/* ============================================================================ Bootstrap Mearged Final CSS file. ============================================================================ LAYOUT SCOPING used to impliment CSS from Layout page to laest report and Reserch Details: Add class to body tag (layout handles this via ViewBag.PageClass): - for ResearchDetail pages - for LatestReports pages - for other pages ============================================================================ */ /* ======================================== GLOBAL & CONTAINER STYLES ======================================== */ * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: #212529; background-color: #fff; } /* Container alignment to match hero section */ .container-fluid { padding-left: 94px; padding-right: 60px; max-width: 100%; } .is-hidden { display: none; } .row { margin-left: 0; margin-right: 0; } a{ text-decoration: none !important; } /* ======================================== SIDEBAR STYLES ======================================== */ .page-research-detail .sidebar { background-color: #F8F8F8; padding: 20px 15px; min-height: fit-content; max-height: fit-content; /*border: 1px solid #E0E4E8;*/ border-radius: 8px; } /* Sidebar Category */ .page-research-detail .sidebar-category { margin-bottom: 8px; } .page-research-detail .category-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background-color: #F5F7FA; border-bottom: 1px solid #E0E4E8; border-radius: 0px; cursor: pointer; transition: all 0.2s ease; } .page-research-detail .category-header:hover { background-color: #F8F9FA; border-color: #D1D5DB; } .page-research-detail .category-title { font-size: 14px; font-weight: 500; color: #374151; } .page-research-detail .category-icon { color: #000; font-size: 12px; transition: transform 0.2s ease; } .page-research-detail .category-items { padding: 8px 0 0 0; display: none; } .page-research-detail .sidebar-item { /* padding: 10px 15px; margin: 2px 0; cursor: pointer; border-radius: 4px; transition: background-color 0.2s ease;*/ padding: 15px 30px; border-bottom: 1px solid #d3d3d3; cursor: pointer; transition: all 0.3s; font-size: 14px; } .page-research-detail .sidebar-item:hover { background-color: #D8E4FE; border-radius: 8px; } .page-research-detail .sidebar-item.active { background: #D8E4FE; color: #000; font-weight: bold; border-radius: 8px; margin: 10px 0; } .page-research-detail .sidebar-item.active .sidebar-link { color: #000; font-weight: 500; } .page-research-detail .sidebar-link { color: #000000; text-decoration: none; display: block; font-size: 13px; } .page-research-detail .sidebar-link:hover { text-decoration: none; color: #1F2937; } .page-research-detail .sidebar-item a { color: #000000; text-decoration: none !important; font-family: var(--bs-body-font-family-regular) !important; font-weight: 400 !important; font-size: 14px; } /* Customer Links Section */ .page-research-detail .customer-links-section { margin-top: 20px; /*padding-top: 20px;*/ /* border-top: 1px solid #E0E4E8;*/ } .page-research-detail .customer-link-item { margin-bottom: 10px; background-color: rgb(255, 255, 255); margin-top: 15px !important; font-size: 13px !important; border-width: 2px !important; border-style: solid !important; border-color: rgb(245, 130, 32) !important; border-image: initial !important; border-radius: 7px !important; padding: 8px !important; margin-left: 15px; width: 90% !important; display: flex !important; text-decoration: none; cursor: pointer; transition: all 0.3s ease; color: inherit; font-family: var(--font-medium) !important; font-weight: 500 !important; align-items: baseline; justify-content: space-between; } /*.page-research-detail .customer-link-item:hover { background-color: #FEF3C7; text-decoration: none; color: #92400E; }*/ .page-research-detail .customer-link-item i { color: #000; font-size: 12px; } /* ======================================== MAIN CONTENT AREA ======================================== */ .page-research-detail .main-content { padding: 25px 30px; background-color: #FFFFFF; } /* ======================================== DISCLAIMER SECTION ======================================== */ .page-research-detail #MF_Disclaimer { margin-bottom: 25px; } .page-research-detail .disclaimer-section { border: 1px solid #e0e0e0; border-radius: 4px; padding: 10px 15px; margin-bottom: 20px; } .btn-toggle-disclaimer { background: none; border: none; color: #333; font-weight: bold; cursor: pointer; padding: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; } .btn-toggle-disclaimer i { color: #F59E0B; } .page-research-detail .disclaimer-content { padding: 16px 0px 0px; border-top: none; border-radius: 0 0 6px 6px; transition: all 0.3s ease; } .page-research-detail .disclaimer-content.hidden { display: none; } .page-research-detail .disclaimer-content p { font-size: 12px; color: #757575; margin-top: 0px; margin-bottom: 0; } /* ======================================== FILTER SECTION ======================================== */ .page-research-detail .filter-section { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 25px; padding: 20px; background-color: #F9FAFB; border-radius: 8px; border: 0px solid #E5E7EB; } .page-research-detail .filter-label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.3px; } .filter-select, .filter-select-input, .page-research-detail .date-filter-input { width: 100%; min-width: 180px; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 30px; font-size: 14px; background-color: #FFFFFF; color: #374151; transition: all 0.2s ease; background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E) right 15px top 50% / 12px no-repeat white; background-position: right 15px top 50%; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } .filter-select:focus, .filter-select-input:focus, .page-research-detail .date-filter-input:focus { outline: none; border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .page-research-detail #stockSearchDiv .filter-select-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; /* Removes any background arrow images */ } .page-research-detail .date-filter-group { /*display: flex; align-items: flex-end;*/ gap: 10px; } .page-research-detail .date-inputs-wrapper { display: flex; gap: 10px; } .page-research-detail .clear-dates-btn { padding: 10px 20px; background-color: #6B7280; color: #FFFFFF; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; height: fit-content; transition: all 0.2s ease; } .page-research-detail .clear-dates-btn:hover:not(:disabled) { background-color: #4B5563; } .page-research-detail .clear-dates-btn:disabled { background-color: #E5E7EB; color: #9CA3AF; cursor: not-allowed; } /* ======================================== DESKTOP TABLE STYLES ======================================== */ .page-research-detail .reports-table { width: 100%; border-collapse: separate; border-spacing: 0; background-color: #FFFFFF; /* border: 1px solid #E5E7EB;*/ border-radius: 8px; overflow: hidden; } .page-research-detail .reports-table thead { background-color: #F3F4F6; } .page-research-detail .reports-table th { padding: 15px 10px; text-align: left; font-size: 14px; color: #000000; font-weight: 500; border-bottom: 2px solid #E3E3E3; font-family: var(--bs-body-font-family-medium); } .page-research-detail .reports-table td { padding: 16px; border-bottom: 1px solid #F3F4F6; font-size: 13px; color: #374151; vertical-align: top; color: rgb(117, 117, 117); font-family: var(--bs-body-font-family-regular); font-weight: 400; } .page-research-detail .reports-table tbody tr.main-report-row:hover { background-color: #F9FAFB; } .page-research-detail .report-date { font-weight: 500; color: #6B7280; white-space: nowrap; font-size: 13px; } .page-research-detail .report-content { max-width: 600px; } .page-research-detail .report-title { font-weight: 600; font-size: 15px; color: #111827; margin-bottom: 6px; line-height: 1.4; } .page-research-detail .report-description { font-size: 13px; color: #757575; line-height: 1.5; font-family: var(--bs-body-font-family-regular); font-weight: 400; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; /* 👈 Only show 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } .page-research-detail .report-tag { display: inline-block; padding: 0px 12px; font-size: 13px; font-weight: 500; color: rgb(117, 117, 117); font-family: var(--bs-body-font-family-regular); font-weight: 400; } .page-research-detail .report-analyst { color: #4B5563; font-size: 14px; } /* Stock Ideas Toggle Button */ .page-research-detail .stock-ideas-btn-container { text-align: center; margin-top: 12px; } .page-research-detail .stock-ideas-toggle-btn { background-color: #F97316; color: #FFFFFF; border: none; padding: 7px 6px; border-radius: 20px; cursor: pointer; font-size: 10px; text-align: left; /* font-weight: 500; */ display: inline-flex; align-items: center; gap: 8px; width: 134.5px; height: 18px; transition: all 0.2s ease; } .page-research-detail .stock-ideas-toggle-btn:hover { background-color: #EA580C; } .page-research-detail .stock-ideas-toggle-btn.expanded { background-color: #64748B; display: none; } .page-research-detail .stock-ideas-toggle-btn.expanded:hover { background-color: #475569; } .btn-chevron { font-size: 11px; transition: transform 0.2s ease; } /* Action Buttons */ .page-research-detail .action-buttons { display: flex; gap: 12px; align-items: center; } .page-research-detail .icon-btn { background: none; border: none; cursor: pointer; padding: 6px; color: #F97316; font-size: 18px; transition: all 0.2s ease; position: relative; } .page-research-detail .icon-btn:hover { color: #EA580C; transform: scale(1.1); } /* Dropdown Menu */ .page-research-detail .custom-bubble { display: none; position: absolute; top: 100%; right: 0; background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); list-style: none; padding: 4px 0; margin: 8px 0 0 0; z-index: 1000; min-width: 100px; max-width: 150px; } .eyeiconbtn:focus + .custom-bubble, .eyeiconbtn:active + .custom-bubble, .page-research-detail .custom-bubble:hover { display: block; } .page-research-detail .custom-bubble li { padding: 0; cursor: pointer; } .page-research-detail .custom-bubble li:hover { background-color: #F3F4F6; } .page-research-detail .dropdown-item { color: #ff7a00; text-decoration: none; display: block; font-size: 13px; padding: 10px 16px; } .page-research-detail .dropdown-item:hover { color: #111827; text-decoration: none; } /* ======================================== STOCK DETAILS TABLE (Desktop) ======================================== */ .page-research-detail .stock-detail-row { display: none; } .page-research-detail .stock-detail-cell { padding: 0 !important; background-color: #F9FAFB; border-bottom: 1px solid #E5E7EB; } .page-research-detail .stock-detail-container { padding: 20px; background-color: #fff } .page-research-detail .stock-detail-table { width: 100%; background-color: #F1F8FF; border: 1px solid #E5E7EB; border-radius: 8px; overflow: hidden; border-collapse: separate; border-spacing: 0; } .page-research-detail .stock-detail-table thead { background-color: #F1F8FF; } .page-research-detail .stock-detail-table th { padding: 12px 16px; text-align: left; font-weight: 400; font-size: 12px; font-family: var(--bs-body-font-family-regular); color: #9E9E9E; /* text-transform: uppercase; */ letter-spacing: 0.3px; border-bottom: 1px solid #F1F8FF; } .page-research-detail .stock-detail-table td { padding: 14px 0px 14px 15px; border-bottom: 1px solid #dcdcdc; font-size: 14px; } .page-research-detail .stock-detail-table tbody tr:last-child td { border-bottom: none; } .page-research-detail .stock-detail-table tbody tr:hover { background-color: #F9FAFB; } .page-research-detail .stock-name-cell { display: flex; flex-direction: column; } .page-research-detail .stock-ticker { font-weight: 600; font-size: 14px; color: #F97316; margin-bottom: 2px; } .page-research-detail .stock-company-name { font-size: 12px; color: #6B7280; } .page-research-detail .stock-value { font-weight: 500; color: #374151; } .btn-stock-action { display: inline-block; padding: 6px 20px; border-radius: 20px; font-size: 12px; font-weight: 600; text-align: center; text-decoration: none; transition: all 0.2s ease; } .btn-stock-action.btn-buy { background-color: #00B050; color: #FFFFFF; } .btn-stock-action.btn-buy:hover { background-color: #00B050; color: #FFFFFF; } .btn-stock-action.btn-Hold { background-color: #7F7F7F; color: #FFFFFF; } .btn-stock-action.btn-Hold:hover { background-color: #7F7F7F; color: #FFFFFF; } .btn-stock-action.btn-Sell { background-color: #FF0000; color: #FFFFFF; } .btn-stock-action.btn-Sell:hover { background-color: #FF0000; color: #FFFFFF; } /* Stock Collapse Button */ .page-research-detail .stock-collapse-btn-container { text-align: center; margin-top: 20px; } .page-research-detail .stock-collapse-btn { background-color: #64748B; color: #FFFFFF; border: none; padding: 7px 6px; border-radius: 20px; cursor: pointer; font-size: 10px; text-align: left; /* font-weight: 500; */ display: inline-flex; align-items: center; gap: 8px; width: 134.5px; height: 18px; transition: all 0.2s ease; } .page-research-detail .stock-collapse-btn:hover { background-color: #475569; } .page-research-detail .stock-collapse-btn i { font-size: 11px; } /* ======================================== MOBILE CARD VIEW ======================================== */ .page-research-detail .mobile-cards-container { display: none; } .page-research-detail .mobile-report-card { background-color: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* Mobile Card Header */ .page-research-detail .mobile-card-header { margin-bottom: 16px; } .page-research-detail .mobile-header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .page-research-detail .mobile-stock-ticker { font-weight: 700; font-size: 14px; color: #F97316; text-transform: uppercase; } .page-research-detail .mobile-report-date { font-size: 12px; color: #9CA3AF; font-weight: 500; } .page-research-detail .mobile-report-title { font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 8px; line-height: 1.4; } .page-research-detail .mobile-report-description { font-size: 13px; color: #6B7280; line-height: 1.5; margin-bottom: 0; } /* Mobile Stock Toggle Button */ .page-research-detail .mobile-stock-toggle-btn-wrapper { text-align: center; margin: 16px 0; } .page-research-detail .mobile-stock-toggle-btn { background-color: #F97316; color: #FFFFFF; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; width: 100%; justify-content: center; } .page-research-detail .mobile-stock-toggle-btn:hover { background-color: #EA580C; } .page-research-detail .mobile-stock-toggle-btn i { font-size: 11px; } /* Mobile Slider */ .page-research-detail .mobile-slider-wrapper { margin-top: 16px; display: none; } .page-research-detail .mobile-carousel-container { overflow: hidden; width: 100%; margin-bottom: 12px; } .page-research-detail .mobile-carousel-track { display: flex; transition: transform 0.3s ease; } .page-research-detail .mobile-carousel-slide { min-width: 100%; flex-shrink: 0; } /* Mobile Stock Card */ .page-research-detail .mobile-stock-card { background-color: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 16px; } .page-research-detail .mobile-stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .page-research-detail .mobile-stock-grid:last-child { margin-bottom: 0; } .page-research-detail .mobile-stock-info { display: flex; flex-direction: column; } .page-research-detail .mobile-stock-info label { font-size: 11px; color: #9CA3AF; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; } .page-research-detail .mobile-stock-ticker-name { font-weight: 700; font-size: 13px; color: #F97316; margin-bottom: 2px; } .page-research-detail .mobile-stock-company { font-size: 11px; color: #6B7280; } .page-research-detail .mobile-stock-info .value { font-weight: 600; font-size: 13px; color: #111827; } .page-research-detail .mobile-btn-stock-action { display: inline-block; padding: 8px 16px; border-radius: 16px; font-size: 11px; font-weight: 700; text-align: center; text-decoration: none; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 6px; } .page-research-detail .mobile-btn-stock-action.btn-buy { background-color: #10B981; color: #FFFFFF; } .page-research-detail .mobile-btn-stock-action.btn-Hold { background-color: #F59E0B; color: #FFFFFF; } .page-research-detail .mobile-btn-stock-action.btn-Sell { background-color: #EF4444; color: #FFFFFF; } /* Mobile Single Stock */ .page-research-detail .mobile-single-stock { margin: 16px 0; } /* Mobile Carousel Dots */ .page-research-detail .mobile-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; } .page-research-detail .mobile-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #D1D5DB; cursor: pointer; transition: all 0.2s ease; } .page-research-detail .mobile-dot.active { background-color: #F97316; width: 8px; border-radius: 4px; } /* Mobile Card Footer */ .page-research-detail .mobile-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid #E5E7EB; } .page-research-detail .mobile-analyst { font-size: 12px; color: #6B7280; } .page-research-detail .mobile-actions { display: flex; gap: 16px; align-items: center; } .page-research-detail .mobile-icon-btn { background: none; border: none; cursor: pointer; padding: 4px; color: #F97316; font-size: 20px; transition: all 0.2s ease; } .page-research-detail .mobile-icon-btn:hover { color: #EA580C; transform: scale(1.1); } /* ======================================== MODAL STYLES ======================================== */ .page-research-detail .custom-modal { border-radius: 12px; overflow: hidden; } .btn-close-custom { position: absolute; top: 16px; right: 16px; background: #fff; border: 1px solid #ddd; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; color: #374151; z-index: 10; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .btn-close-custom i { color: #374151 !important; } .btn-close-custom:hover { color: #111827; } .modal-title { font-size: 20px; font-weight: 600; color: #111827; margin-bottom: 16px; } .modal-content-text { margin-bottom: 20px; } .modal-point { font-size: 14px; line-height: 1.6; color: #374151; } .video-container { position: relative; padding-bottom: 255px; height: 0; overflow: hidden; border-radius: 8px; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal-footer-buttons { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid #E5E7EB; } .logo { font-size: 16px; flex-grow: 1; display: flex; align-items: baseline; } .page-research-detail .logo { font-size: 16px; flex-grow: 1; display: flex; align-items: baseline; } .page-research-detail .recommendation-label { font-size: 12px; color: #6B7280; margin-right: 10px; font-weight: 500; } /* Stock row */ .page-latest-reports .stock-row { padding: 0; } /* ======================================== BLUR CONTENT (For Protected Content) ======================================== */ .page-research-detail .blur-content { position: relative !important; cursor: pointer !important; pointer-events: auto !important; /* Ensures the row is clickable */ } .page-research-detail .blur-content > * { filter: blur(5px); pointer-events: none !important; /* Prevents text from blocking the click */ user-select: none; } .page-research-detail .blur-content::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background-image: url('/Content/images/research/lock.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 9999; pointer-events: none; /* Allows the click to pass through to the parent .blur-content */ } /* ======================================== UTILITY CLASSES ======================================== */ .page-research-detail .font-regular { font-weight: 400; } .page-research-detail .font-medium { font-weight: 500; } .page-research-detail .font-bold { font-weight: 600; } .page-research-detail .section-title { font-size: 32px; color: var(--color-text-dark); margin-bottom: 20px; font-weight: 400; font-family: var(--bs-body-font-family-regular) } .page-research-detail .section-description { font-size: 14px; color: #6B7280; margin-bottom: 20px; } /* No Results Message */ .page-research-detail #noResultsMessage { padding: 60px 20px; text-align: center; } .page-research-detail #noResultsMessage h4 { color: #374151; margin-bottom: 12px; font-weight: 600; } .page-research-detail #noResultsMessage p { color: #6B7280; font-size: 14px; } /* Pagination */ .page-research-detail #js-pagination-container { margin-top: 30px; display: flex; justify-content: center; } .page-research-detail #parentDivPagination { display: flex; gap: 8px; justify-content: space-around; padding-bottom: 25px; } .page-research-detail .pagination { min-width: 14rem; display: flex; justify-content: center; align-items: center; margin-top: 30px; padding: 5px; border-top: 1px solid #f0f0f0; background: #F3F3F3 0% 0% no-repeat padding-box; border-radius: 73px; opacity: 1; } .page-research-detail .pagination-info { min-width: 4rem; font-size: 15px; color: #757575; font-family: var(--bs-body-font-family-regular); font-weight: 400; text-align: center; } .page-research-detail .pagination-btn { padding: 9px 15px; border: 1px solid var(--color-border-light); background: white; border-radius: 5px; cursor: pointer; font-size: 15px; color: #757575; transition: all 0.3s; border-radius: 73.1px; margin: 0px 25px 0px 0px; } .page-research-detail .pagination-btn.next { background: var(--color-primary-orange); color: white; border-color: var(--color-primary-orange); border-radius: 73.1px; margin-left: 10px; border: 1px solid #fff; margin: 0px 0px 0px 25px; } /* ======================================= Modelpopup footer changes UI ======================================= */ /* ======================================== MOBILE FILTER CONTAINER (for sidebar) ======================================== */ .page-research-detail .mobile-filter-container { background-color: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); margin-bottom: 16px; } .page-research-detail .mobile-report-filter { padding: 16px !important; } .page-research-detail .dropdown-header-ui { margin-bottom: 12px; } .page-research-detail .radio-options-container { margin-top: 12px; } .page-research-detail .radio-item-ui { display: flex; align-items: center; padding: 12px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s ease; } .page-research-detail .radio-item-ui:hover { background-color: #F3F4F6; } .page-research-detail .radio-item-ui input[type="radio"] { margin-right: 10px; accent-color: #F97316; } .page-research-detail .radio-indicator { width: 18px; height: 18px; border: 2px solid #F97316; border-radius: 50%; margin-right: 10px; } /* ============================================================================ LATESTREPORTS.CSS Scoped to .page-latest-reports ============================================================================ */ /* ---------------------------------------------------- */ /* 1. FONT FAMILY (Spoqa Han Sans Neo) */ /* ---------------------------------------------------- */ @font-face { font-family: 'SpoqaHanSansNeo-Light'; src: url('fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SpoqaHanSansNeo-Regular'; src: url('fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'SpoqaHanSansNeo-Medium'; src: url('fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SpoqaHanSansNeo-Bold'; src: url('fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------------------------------------------------- */ /* 2. CSS VARIABLES */ /* ---------------------------------------------------- */ :root { --color-primary-blue: #003d82; --color-primary-orange: #F58220; --color-text-dark: #333; --color-text-gray: #757575; --color-text-light: #6B7280; --color-border: #EAEAEA; --color-bg-gray: #F8F8F8; --color-bg-light: #D8E4FE; --font-light: 'SpoqaHanSansNeo-Light', sans-serif; --font-regular: 'SpoqaHanSansNeo-Regular', sans-serif; --font-medium: 'SpoqaHanSansNeo-Medium', sans-serif; --font-bold: 'SpoqaHanSansNeo-Bold', sans-serif; } /* ---------------------------------------------------- */ /* 3. GLOBAL STYLES */ /* ---------------------------------------------------- */ body { font-family: var(--font-regular); line-height: 1.6; color: var(--color-text-dark); background: #fff; margin: 0; padding: 0; } /* Font utility classes */ .page-latest-reports .font-light { font-family: var(--font-light) !important; font-weight: 300 !important; } .page-latest-reports .font-regular { /* font-family: var(--font-regular) !important;*/ font-weight: 400 !important; /* font-size: 12px; color: #6B7280;*/ } .page-latest-reports .font-medium { font-family: var(--font-medium) !important; font-weight: 500 !important; font-size: 13px; color: var(--color-text-dark); } .page-latest-reports .font-bold { font-family: var(--font-bold) !important; font-weight: 700 !important; } /* ---------------------------------------------------- */ /* 4. LAYOUT - CONTAINER */ /* ---------------------------------------------------- */ .container-fluid { max-width: 87%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } .page-latest-reports .content-layout { width: 100%; min-height: 100vh; } /* ---------------------------------------------------- */ /* 5. SIDEBAR STYLES */ /* ---------------------------------------------------- */ .page-latest-reports .sidebar { background-color: var(--color-bg-gray); border-radius: 12px; padding: 25px 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); position: sticky; top: 20px; height: fit-content; } /* Mobile menu container */ .page-latest-reports .mobile-menu-container { padding: 0; } .page-latest-reports .mobile-menu-container .form-group { margin-bottom: 0; } .mobile-menu-container .form-control, .page-latest-reports .mobile-menu-container .form-select { width: 100%; padding: 10px 15px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; font-family: var(--font-regular); } /* Sidebar menu */ .page-latest-reports .sidebar-menu { margin-bottom: 20px; } /* Sidebar items */ .page-latest-reports .sidebar-item { padding: 15px 20px; /*border-radius: 8px;*/ margin-bottom: 5px; cursor: pointer; transition: all 0.3s ease; border-bottom: 1px solid rgb(211, 211, 211); } .page-latest-reports .sidebar-item:hover { background-color: var(--color-bg-light); border-radius: 8px; } .page-latest-reports .sidebar-item.active { background-color: var(--color-bg-light); color: #000; border-radius: 8px; } .page-latest-reports .sidebar-link { color: #4B5563; text-decoration: none; display: block; font-size: 0.95rem; font-family: var(--font-regular); } .sidebar-item.active .sidebar-link, .page-latest-reports .sidebar-item:hover .sidebar-link { color: #000; } /* Customer link with lock icon */ .page-latest-reports .siderahref { text-decoration: none; color: inherit; } .page-latest-reports .filter-icon { margin-bottom: 10px; background-color: rgb(255, 255, 255); margin-top: 15px !important; font-size: 13px !important; border-width: 2px !important; border-style: solid !important; border-color: rgb(245, 130, 32) !important; border-image: initial !important; border-radius: 7px !important; padding: 8px !important; } .page-latest-reports .filter-lock { width: 16px; height: 16px; margin-left: 8px; } /* ---------------------------------------------------- */ /* 6. MAIN CONTENT AREA */ /* ---------------------------------------------------- */ .page-latest-reports .main-content { padding: 20px; padding-top: 0px; } /* ---------------------------------------------------- */ /* 7. SECTION TITLE */ /* ---------------------------------------------------- */ .page-latest-reports .section-title { font-size: 32px; font-weight: 400; color: var(--color-text-dark); margin-bottom: 20px; margin-top: 0; margin-left: 10px; font-family: var(--font-regular); } /* ---------------------------------------------------- */ /* 8. RESEARCH GRID */ /* ---------------------------------------------------- */ .page-latest-reports .research-grid { width: 100%; margin-bottom: 30px; } .page-latest-reports .research-grid.row { align-items: flex-start; /* prevents columns from stretching to equal height */ } .page-latest-reports .report-group { margin-bottom: 40px; } /* ---------------------------------------------------- */ /* 9. RESEARCH CARDS */ /* ---------------------------------------------------- */ .page-latest-reports .research-card { background: white; border-radius: 12px; padding: 20px 22px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border: 1px solid var(--color-border); height: auto; display: flex; flex-direction: column; } .page-latest-reports .research-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* Card header */ .page-latest-reports .card-header { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; align-items: center; justify-content: space-between; } .page-latest-reports .card-tag { color: var(--color-primary-orange); padding: 6px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-medium); } .page-latest-reports .card-type { font-size: 13px; color: var(--color-text-light); font-family: var(--font-regular); margin-left: auto; } /* Card title */ .page-latest-reports .card-title { font-size: 15px; color: #000; margin-bottom: 10px; font-family: var(--font-bold); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Card description */ .page-latest-reports .card-description { font-size: 13px; color: var(--color-text-gray); line-height: 1.6; margin-bottom: 15px; font-family: var(--font-regular); /* flex-grow: 1;*/ display: -webkit-box; -webkit-line-clamp: 2; /* 👈 Only show 2 lines */ -webkit-box-orient: vertical; overflow: hidden; } .page-latest-reports .card-description a { color: var(--color-primary-orange); text-decoration: none; font-weight: 500; } .page-latest-reports .card-description a:hover { text-decoration: underline; } /* Card footer */ .card-footer { display: flex; justify-content: space-between; align-items: center; /*margin-top: auto; padding-top: 15px; border-top: 1px solid #E3E3E3;*/ } .page-latest-reports .card-date { font-size: 13px; color: #9CA3AF; font-family: var(--font-regular); } /* Lock icon in card footer */ .page-latest-reports .card-lock-icon { width: 20px; height: 20px; opacity: 0.6; } /* Card actions */ .page-latest-reports .card-actions { display: flex; gap: 10px; align-items: center; } /* Icon buttons */ .page-latest-reports .icon-btn, .page-latest-reports .eyeIcon { background: none; border: none; cursor: pointer; padding: 5px; transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; } .page-latest-reports .icon-btn:hover, .page-latest-reports .eyeIcon:hover { transform: scale(1.1); } .page-latest-reports .icon-btn img, .page-latest-reports .eyeIcon img { width: 30px; height: 24px; } /* Eye container for popup */ .page-latest-reports .eye-container { position: relative; } /* Popup menu */ .page-latest-reports .popupMenu { /*display: none; position: absolute; right: 0; bottom: 100%; margin-bottom: 5px;*/ background: white; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 8px 0; z-index: 1000; /*left: 1010.66px !important;*/ /*min-width: 180px;*/ } .popupMenu div, .page-latest-reports .popupMenu a { padding: 10px 16px; cursor: pointer; color: var(--color-text-dark); text-decoration: none; display: block; font-size: 14px; transition: background-color 0.2s; } .popupMenu div:hover, .page-latest-reports .popupMenu a:hover { background-color: #f5f5f5; } /* ======================================== BLUR CONTENT ======================================== */ .page-latest-reports .blur-content { position: relative !important; cursor: pointer !important; pointer-events: auto !important; } .page-latest-reports .blur-content > * { filter: blur(5px); pointer-events: none !important; user-select: none; } .page-latest-reports .blur-content::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background-image: url('/Content/images/research/lock.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 9999; pointer-events: none; } /* ---------------------------------------------------- */ /* 10. STOCK DISPLAY SECTION - GRID LAYOUT */ /* ---------------------------------------------------- */ /* Stock table wrapper */ .page-latest-reports .stock-table-wrapper { margin-top: 20px; background-color: #EFF6FF; border-radius: 8px; padding: 20px !important; } /* Stock grid - 3 columns */ .page-latest-reports .stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 15px; background-color: transparent; } /* Stock cell */ .page-latest-reports .stock-cell { display: flex; flex-direction: column; gap: 8px; } /* Stock label (small gray text) */ .page-latest-reports .stock-label { font-size: 12px; font-weight: 400; color: #6B7280; font-family: var(--font-regular); } /* Stock value (larger bold text) */ .page-latest-reports .stock-value { font-size: 13px; font-weight: 500; color: var(--color-text-dark); font-family: var(--font-medium); } /* Stock name badge (green background) */ .page-latest-reports .stock-name-badge { display: inline-block; padding: 0px 0px; /*background-color: #D1FAE5; color: #065F46;*/ border-radius: 6px; font-size: 13px; font-weight: 500; width: fit-content; } /* Button cell alignment */ .page-latest-reports .stock-cell-button { display: flex; align-items: flex-end; justify-content: flex-start; } /* Inline action button (in grid with Buy Price/Target) */ .page-latest-reports .stock-action-btn-inline { display: inline-block; padding: 10px 28px; border-radius: 6px; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; color: white; letter-spacing: 0.5px; font-family: var(--font-bold); transition: all 0.2s ease; min-width: 100px; } .page-latest-reports .stock-action-btn-inline.btn-buy { background-color: #1AB176; margin-top: 5px; border-radius: 30px; } .page-latest-reports .stock-action-btn-inline.btn-Hold { background-color: #F58220; margin-top: 5px; border-radius: 30px; } .page-latest-reports .stock-action-btn-inline.btn-Sell { background-color: #DC2626; margin-top: 5px; border-radius: 30px; } .page-latest-reports .stock-action-btn-inline:hover { opacity: 0.9; transform: translateY(-1px); } /* Hide old table structure */ .page-latest-reports .stock-info-table { display: none; } /* Stock information table */ .page-latest-reports .stock-info-table { width: 100%; border-collapse: collapse; margin-bottom: 0; background-color: transparent; } .page-latest-reports .stock-info-table thead th { font-size: 13px; font-weight: 400; color: #6B7280; text-align: left; padding: 10px 15px; font-family: var(--font-regular); background-color: transparent; border: none; } .page-latest-reports .stock-info-table tbody td { font-size: 15px; font-weight: 600; color: var(--color-text-dark); padding: 12px 15px; font-family: var(--font-medium); background-color: transparent; border: none; } .page-latest-reports .stock-info-table tbody tr { background-color: transparent; } /* Stock action button - FULL WIDTH at bottom - HIDE */ .page-latest-reports .stock-action-button { display: none; } /* Legacy classes - keep for compatibility */ .page-latest-reports .stock-action-btn { display: inline-block; padding: 8px 24px; border-radius: 6px; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; color: white; letter-spacing: 0.5px; font-family: var(--font-bold); } /* Hide these only when NOT in slider */ .stock-table-wrapper .single-stock-inline, .page-latest-reports .stock-table-wrapper .single-detail { display: none; } .single-stock-name, .stock-table, .page-latest-reports .stock-table-bottom { display: none; } /* Stock row */ .page-latest-reports .stock-row { padding: 0; } /* Buy/Hold/Sell buttons - Legacy support */ .btn-buy, .btn-Hold, .btn-Sell { display: inline-block; padding: 10px 28px !important; border-radius: 30px; font-size: 14px; font-weight: 700; text-align: center; width: 80px; text-decoration: none; color: white !important; letter-spacing: 0.5px; font-family: var(--font-bold); transition: all 0.2s ease; min-width: 100px; } .btn-buy { background-color: #1AB176; } .btn-Hold { background-color: #F58220; } .btn-Sell { background-color: #DC2626; } /* ---------------------------------------------------- */ /* 11. STOCK SLIDER (Multiple Stocks) */ /* ---------------------------------------------------- */ .page-latest-reports .stock-expand-wrapper { position: relative; margin-top: 0px; } .page-latest-reports .expand-arrow-btn { width: 15px; height: 15px; padding: 0; background: var(--color-primary-orange); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; font-size: 10px; color: white; margin: 0 auto; box-shadow: 0 2px 8px rgba(245, 130, 32, 0.3); } .page-latest-reports .expand-arrow-btn:hover { background: #e67416; transform: scale(1.05); box-shadow: 0 4px 12px rgba(245, 130, 32, 0.4); } .page-latest-reports .expand-arrow-btn i { transition: transform 0.3s ease; } .page-latest-reports .expand-arrow-btn.expanded i { transform: rotate(180deg); } /* Stock slider content */ .page-latest-reports .stock-slider-content { display: none; margin-top: 15px; overflow: hidden; } .page-latest-reports .stock-slider-content.expanded { display: block; animation: slideDown 0.3s ease-out; } @keyframes slideDown { .page-latest-reports from { opacity: 0; max-height: 0 } .page-latest-reports to { opacity: 1; max-height: 500px; } } .page-latest-reports .stock-slider-inner { position: relative; padding: 20px; background-color: #EFF6FF; border-radius: 8px; } .page-latest-reports .stocks-carousel { width: 100%; overflow: hidden; } .page-latest-reports .stocks-track { display: flex; transition: transform 0.3s ease; } /* Stock slide - individual stock in slider */ .page-latest-reports .stock-slide { min-width: 100%; flex-shrink: 0; padding: 0 0px; } .page-latest-reports .stock-slide .stock-row { display: flex; flex-wrap: wrap; gap: 20px; padding: 15px; background-color: transparent; } .page-latest-reports .stock-slide .single-detail { display: flex; flex-direction: column; gap: 5px; min-width: 0px; flex: 1; } .page-latest-reports .stock-slide .single-detail label { font-size: 12px; color: #6B7280; font-family: var(--font-regular); } .page-latest-reports .stock-slide .single-detail span { font-size: 13px; font-weight: 600; color: var(--color-text-dark); font-family: var(--font-medium); } .stock-slide .btn-buy, .stock-slide .btn-Hold, .page-latest-reports .stock-slide .btn-Sell { margin-top: 10px; padding: 8px 20px; } .page-latest-reports .stock-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 0px; width: 100%; } /* Stock navigation buttons */ .page-latest-reports .stock-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: white; border: 1px solid var(--color-border); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .page-latest-reports .stock-nav-btn:hover { background: var(--color-primary-orange); color: white; border-color: var(--color-primary-orange); } .page-latest-reports .stock-prev-btn { left: 5px; } .page-latest-reports .stock-next-btn { right: 5px; } /* Stock indicators (dots) */ .page-latest-reports .stock-indicators { display: flex; justify-content: center; gap: 8px; margin-top: 15px; margin-bottom: 2px; } .page-latest-reports .stock-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; } .stock-dot:hover, .page-latest-reports .stock-dot.active { background-color: var(--color-primary-orange); transform: scale(1.2); } /* ---------------------------------------------------- */ /* 12. DISCLAIMER SECTION */ /* ---------------------------------------------------- */ .page-latest-reports .disclaimer-section { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 15px; margin-bottom: 25px; } .btn-toggle-disclaimer { background: none; border: none; color: var(--color-text-dark); font-weight: 600; cursor: pointer; padding: 0; font-size: 14px; display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; font-family: var(--font-medium); } .page-latest-reports .disclaimer-icon { margin-left: 10px; transition: transform 0.3s ease; } .page-latest-reports .disclaimer-content { max-height: 500px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; opacity: 1; margin-top: 10px; } .page-latest-reports .disclaimer-content.hidden { max-height: 0; opacity: 0; margin-top: 0; } .page-latest-reports .disclaimer-content p { font-size: 13px; line-height: 1.6; color: var(--color-text-gray); margin: 10px 0 0 0; } /* ---------------------------------------------------- */ /* 13. MODAL STYLES */ /* ---------------------------------------------------- */ .page-latest-reports .modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; outline: 0; background-color: rgba(0, 0, 0, 0.5); } .page-latest-reports .modal.fade { transition: opacity 0.15s linear; } .modal-dialog { position: relative; width: auto; margin: 1.75rem auto; pointer-events: none; max-width: 600px; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); justify-content: center; } /* Ensure modal stays centered and not pushed up */ #stockModal .modal-dialog { margin: 1.75rem auto !important; transform: none !important; } #stockModal .modal-dialog-centered { min-height: calc(100vh - 3.5rem); } /* Stock Modal specific styles */ #stockModal .modal-content { max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } #stockModal .modal-body { padding: 30px 25px 25px; max-height: calc(90vh - 100px); overflow-y: auto; } .page-latest-reports .custom-modal { max-width: 600px; } .modal-body { position: relative; flex: 1 1 auto; padding: 25px; } .modal-title { font-size: 20px; font-weight: 700; color: var(--color-text-dark); margin-bottom: 15px; font-family: var(--font-bold); } .modal-content-text { margin-bottom: 20px; } .modal-point { font-size: 14px; line-height: 1.6; color: var(--color-text-gray); } .page-latest-reports .Synopsis-video-container { width: 100%; margin-bottom: 20px; } .page-latest-reports .Synopsis-video-container iframe { width: 100%; height: 315px; border-radius: 8px; } /* Modal footer */ .modal-footer-buttons { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid #e0e0e0; } /* Modal Footer Layout */ #modalFooterDiv { display: flex; justify-content: space-between; align-items: center; width: 100%; } #RecommendationDiv { display: flex; align-items: center; gap: 10px; } #reportDiv { display: flex; align-items: center; gap: 10px; } /* Recommendation button styling (BUY/SELL/HOLD) */ #recommendationclick { background-color: #10B981; color: white; padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-block; text-transform: uppercase; } /* Report download button */ #Downloadbtn { display: flex; align-items: center; gap: 8px; padding: 6px 12px !important; /*border: 1px solid #E0E0E0 !important; border-radius: 19px !important;*/ color: #757575 !important; font-size: 14px !important; background: white; text-decoration: none !important; } /* Play/Synopsis toggle button */ .toggle-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; /*border: 1px solid #E0E0E0; border-radius: 19px;*/ background: white; color: #757575; font-size: 14px; cursor: pointer; } .toggle-btn:hover, #Downloadbtn:hover { background: #f9f9f9; } .page-latest-reports .recommendation-label { font-size: 14px; font-weight: 600; color: var(--color-text-dark); margin-right: 10px; } /* Close button */ .btn-close-custom { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-text-dark); opacity: 0.7; transition: opacity 0.2s; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; } .btn-close-custom:hover { opacity: 1; } /* Modal backdrop and positioning fixes */ .modal { display: none; position: fixed; top: 0; left: 0; z-index: 1050; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; outline: 0; } .modal.show { display: block !important; } .modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); } .modal-backdrop.show { opacity: 0.5; } /* Ensure body doesn't scroll when modal is open */ body.modal-open { overflow: hidden; } /* ============================================================================ LAYOUTRESEARCHREPORT.CSS ============================================================================ */ .container { max-width: 87%; margin: 0 auto; padding: 0 0px; } /* ======================================================================== BUTTON STYLES (from researchCenter.css) ======================================================================== */ .page-layout-research .btn { padding: 17px 30px !important; border: none !important; border-radius: 29px !important; cursor: pointer !important; font-size: 16px !important; text-decoration: none !important; display: inline-block !important; transition: all 0.3s !important; } /* Override for header button in report pages */ .header .btn { padding: 5px 14px !important; border-radius: 17px !important; font-size: 13px !important; } .page-layout-research .openDmatbtn { padding: 8px 30px !important; } .btn-primary { background: #043B72 !important; color: #FFF !important; } .btn-research-calls { background-color: #FFF; border: 1px solid #F58220 !important; margin: 0px 10px; height: 33px; } .btn-primary:hover { background: #043B72 !important; } /* ======================================================================== HERO BANNER & MOBILE INPUT FORM (from researchCenter.css) ======================================================================== */ /* Hero Banner Section */ .hero-banner { min-height: 335px; background: #F58220; color: white; text-align: center; padding: 60px 20px; margin: 30px auto; border-radius: 29px; width: 87%; /* Matches your container class */ display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 87% !important; } .hero-banner h1 { font-size: 72px; font-weight: 300; text-shadow: 0px 3px 10px #00000059; letter-spacing: 1px; } .hero-banner p { font-size: 23px; text-shadow: 0px 3px 10px #00000059; top: 251px; height: 28px; } .hero-content { position: relative; z-index: 3; color: white; margin-bottom: 15px; } /* Mobile Input Form */ .mobile-input-form { display: flex; justify-content: center; margin-top: 36px; } .mobile-input-form input, .mobile-input-form button { -webkit-tap-highlight-color: transparent; } .input-grouprep { position: relative; display: flex; align-items: center; border-radius: 50px; background-color: white; width: 100%; max-width: 471px; margin: 0 auto; height: 49px; border: none !important; overflow: hidden; } .input-grouprep:focus-within { outline: none !important; border: none !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .country-code { background-color: transparent; color: #757575; padding: 12px 10px 12px 20px; /* Increased left padding for curve */ box-sizing: border-box; white-space: nowrap; font-size: 16px; } .line-height-code { border-left: 1px solid #ddd; height: 25px; margin: 0 10px; } .mobile-input { border: none !important; /* Removes default input border */ outline: none !important; /* Removes the blue 'focus' ring */ padding: 12px 130px 12px 0px; font-size: 1rem; flex-grow: 1; background-color: transparent; } #mobileNumberInput:focus, .mobile-input:focus { outline: none !important; box-shadow: none !important; border: none !important; } .start-free-trial-btn { position: absolute; right: 0px; top: 0px; bottom: 0px; background-color: #043B72; color: white; border: none !important; /* Removes button border */ outline: none !important; padding: 0 25px; font-size: 16px; font-weight: 600; cursor: pointer; border-radius: 50px; white-space: nowrap; } .start-free-trial-btn:hover { background-color: #043B72; } /* ======================================================================== TAB NAVIGATION (from researchCenter.css) ======================================================================== */ /* Tab Button Base Styles - Transparent background for inactive tabs */ .tab-btn { background: transparent; border: none; padding: 12px 25px; border-radius: 25px; cursor: pointer; font-size: 14px; color: #333; transition: all 0.3s; } .tab-btn:focus { outline: none; box-shadow: none; } .tab-btn.active { background: #043B72; color: #fff; } .page-layout-research .active-tab { background: #043B72; color: white; } /* Navigation Container */ .nav-bar-container { margin: 30px auto; padding: 0px 0px 0px 0px !important; background-color: #E0E5EE; border-radius: 50px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: flex; justify-content: center; height: 50px; width: fit-content; } .report-nav { display: flex; flex-wrap: nowrap; width: 100%; align-self: stretch; } /* Override inline style max-width: fit-content in HTML */ .nav-bar-container.container { max-width: none !important; margin: 30px auto !important; width: fit-content !important; /*display: block !important;*/ padding: 0 !important; /* margin-left: 50% !important;*/ } .report-nav .tab-btn.active { height: 100%; } .report-nav .tab-btn { white-space: nowrap; margin-right: 10px; flex-shrink: 0; } .report-nav .tab-btn:last-child { margin-right: 0; } .page-layout-research .nav-item { text-decoration: none; color: #333; padding: 8px 15px; font-size: 0.95rem; font-weight: 600; white-space: nowrap; transition: color 0.2s; } .nav-item.active, .page-layout-research .nav-item.active-blue { background-color: #e6eef5; border-radius: 20px; color: #333; } .page-layout-research .nav-item.active-blue { color: #004b8d; font-weight: 700; } .page-layout-research .nav-item:not(.active):not(.active-blue):hover { color: #004b8d; } /* ======================================================================== SECTION 9: HORIZONTAL NAVIGATION (from researchCenter.css) ======================================================================== */ .test-horizontal-nav { display: flex; gap: 0; background-color: transparent; position: relative; } .test-nav-button { flex-shrink: 0; padding: 14px 30px; font-size: 15px; font-weight: 500; color: #333333; background-color: #e8eef5; border: none; cursor: pointer; white-space: nowrap; transition: all 0.3s ease; border-radius: 0; margin: 0; outline: none; } .test-nav-button:first-of-type { border-top-left-radius: 28px; border-bottom-left-radius: 28px; padding-left: 34px; } .test-nav-button:last-of-type { border-top-right-radius: 28px; border-bottom-right-radius: 28px; padding-right: 34px; } .test-nav-button.test-active-state { background-color: #043B72; color: #ffffff; font-weight: 600; border-radius: 30px; } .test-nav-button:hover:not(.test-active-state) { background-color: #d5dfe8; } /* ======================================================================== INLINE STYLES - USER PROFILE DROPDOWN & NAVIGATION (from _LayoutResearchReport.cshtml lines 37-195) ======================================================================== */ /* Default parent and submenu */ .page-layout-research .subcategory-header { border-bottom: 1px solid #d3d3d3; /* default light border */ } .page-layout-research .submenu-items { display: none; border-bottom: none; /* default */ } /* When submenu is open */ .page-layout-research .subcategory-header.active { border-bottom: none; /* remove bottom border of parent */ /*border-top: 1px solid #757575;*/ /* top border highlight */ } .video-section { background: #F7F7F7; padding: 10px 0; text-align: center; margin: 0px; } *, ::after, ::before { box-sizing: border-box; } .page-layout-research section { display: block; unicode-bidi: isolate; } /* Container for alignment */ .user-profile-wrapper { position: relative; display: inline-block; vertical-align: middle; padding: 10px; } /* The Main Box Size */ .user-details-card { position: absolute; top: 45px; /* Distance from the icon */ right: 0; width: 260px; /* Reduced width for a more compact look */ background: #ffffff; border-radius: 8px; /* Slightly sharper corners */ box-shadow: 0 4px 15px rgba(0,0,0,0.1); padding: 15px; /* Smaller padding */ z-index: 1000; border: 1px solid #eef0f2; font-family: 'Segoe UI', Arial, sans-serif; } /* User Info Section */ .user-info-header { display: flex; align-items: center; margin-bottom: 8px; } .avatar-circle { width: 42px; height: 42px; background: #dce8ff; color: #4a90e2; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; margin-right: 10px; } .user-text { display: flex; flex-direction: column; font-size: 13px; /* Smaller text size */ color: #333; } .u-name { font-weight: 600; } .u-phone { font-weight: 600; } /* The Orange Trial Box - Exact Match */ .trial-banner-box { background-color: #f37021; /* [cite: 3] */ color: #ffffff; padding: 5px 10px; border-radius: 3px; font-size: 12px; /* Smaller font for the banner */ font-weight: 700; margin: 10px 0; display: block; width: 100%; box-sizing: border-box; } .promo-desc { font-size: 12px; color: #888; line-height: 1.3; margin-bottom: 15px; } /* Buttons and Links */ .card-footer { display: flex; justify-content: space-between; align-items: center; flex-direction: row; } .btn-open-demat-dropdown { background-color: #043b72; /* Dark blue [cite: 2] */ color: white !important; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-size: 12px; font-weight: 600; } .link-logout { color: #999; text-decoration: underline; font-size: 12px; } /* Top Arrow */ .card-arrow { position: absolute; top: -6px; right: 12px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-top: 1px solid #eef0f2; border-left: 1px solid #eef0f2; } .page-layout-research #freeTrialForm { visibility: hidden; } /* ======================================================================== INLINE STYLES - BLUR CONTENT & LOCK ICON (from _LayoutResearchReport.cshtml lines 196-295) ======================================================================== */ /* Container for the blurred content */ .page-layout-research .blur-content { position: relative !important; cursor: pointer !important; pointer-events: auto !important; /* Ensures the row is clickable */ } /* Blur the children elements only */ .page-layout-research .blur-content > * { filter: blur(5px); pointer-events: none !important; /* Prevents text from blocking the click */ user-select: none; } /* The Lock Icon - Fixed 30x30px */ .page-layout-research .blur-content::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translate(-50%, -50%); pointer-events: none !important; z-index: 10; } /* ======================================================================== SECTION 12: INLINE STYLES - MODAL SYSTEM (from _LayoutResearchReport.cshtml lines 296-414) ======================================================================== */ .page-layout-research .modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); } .page-layout-research .modal.show { display: flex !important; align-items: center; justify-content: center; } .modal-dialog { position: relative; width: 90%; max-width: 900px; margin: 20px auto; max-height: 90vh; display: flex; flex-direction: column; } .modal-content { background: #fff; border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; max-height: 90vh; overflow: hidden; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e5e5; flex-shrink: 0; } .modal-title { font-size: 20px; font-weight: 600; color: #333; margin: 0; } .modal-body { padding: 24px; overflow-y: auto; flex: 1; min-height: 0; } .modal-footer { padding: 16px 24px; border-top: 1px solid #e5e5e5; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .btn-close { background: transparent; border: none; font-size: 28px; line-height: 1; color: #999; cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; } .btn-close:hover { color: #333; } .synopsis-btn, .video-btn, .page-layout-research .download-btn { padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; } .page-layout-research .synopsis-btn { background: #043B72; color: #fff; } .page-layout-research .synopsis-btn:hover { background: #032a52; } .page-layout-research .video-btn { background: #f0f0f0; color: #333; } .page-layout-research .video-btn:hover { background: #e0e0e0; } .page-layout-research .download-btn { background: #F58220; color: #fff; text-decoration: none; display: inline-block; } .page-layout-research .download-btn:hover { background: #d66f1a; } .modal-video { width: 100%; height: 450px; border: none; border-radius: 8px; } .page-layout-research .iframe-container { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .page-layout-research .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px; } /* Navigation buttons inside modal */ .page-layout-research .nav-button { padding: 10px 20px; margin: 0 5px; border: 1px solid #ddd; background: white; cursor: pointer; border-radius: 6px; font-size: 14px; transition: all 0.2s; } .page-layout-research .nav-button.active { background: #043B72; color: white; border-color: #043B72; } .page-layout-research .nav-button:hover { background: #f5f5f5; } .page-layout-research .nav-button.active:hover { background: #032a52; } /* Toggle container */ .page-layout-research .toggle-container { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; } .page-layout-research .toggle-switch { position: relative; width: 48px; height: 24px; background: #ccc; border-radius: 12px; cursor: pointer; transition: background 0.3s; } .page-layout-research .toggle-switch::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: white; top: 2px; left: 2px; transition: left 0.3s; } .page-layout-research .toggle-switch.active { background: #043B72; } .page-layout-research .toggle-switch.active::after { left: 26px; } .page-layout-research .toggle-switch-label { font-size: 14px; color: #666; cursor: pointer; user-select: none; } /* ======================================================================== SECTION 13: INLINE STYLES - REGISTRATION MODAL (from _LayoutResearchReport.cshtml lines 415-535) ======================================================================== */ .page-layout-research .registration-modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); align-items: center; justify-content: center; } .page-layout-research .registration-modal-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .page-layout-research .registration-modal-content { position: relative; background: white; width: 90%; max-width: 440px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; z-index: 2001; } .modal-close-btn { position: absolute; top: 16px; right: 16px; background: transparent; border: none; font-size: 24px; color: #999; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 10; transition: color 0.2s; } .modal-close-btn:hover { color: #333; } .modal-header-reg { background: linear-gradient(135deg, #043B72 0%, #065a9e 100%); padding: 32px 24px 24px; text-align: center; color: white; } .page-layout-research .trial-badge { display: inline-block; background: #F58220; color: white; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 12px; } .modal-logo { width: 120px; height: auto; margin: 0 auto 16px; display: block; } .modal-header-reg h2 { font-size: 24px; margin: 0 0 8px; font-weight: 600; } .modal-header-reg p { font-size: 14px; margin: 0; opacity: 0.95; } .modal-body-reg { padding: 32px 24px; } .page-layout-research .input-section { margin-bottom: 20px; } .page-layout-research .input-label { display: block; font-size: 13px; font-weight: 500; color: #333; margin-bottom: 8px; } .page-layout-research .phone-input-wrapper { display: flex; gap: 8px; } .page-layout-research .country-dropdown { width: 80px; padding: 12px 8px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: white; cursor: pointer; } .page-layout-research .phone-input { flex: 1; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; } .page-layout-research .phone-input:focus { outline: none; border-color: #043B72; } .page-layout-research .otp-input { width: 100%; padding: 12px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; } .page-layout-research .otp-input:focus { outline: none; border-color: #043B72; } .page-layout-research .submit-btn { width: 100%; padding: 14px; background: #F58220; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-top: 8px; } .page-layout-research .submit-btn:hover { background: #d66f1a; } .page-layout-research .login-link { text-align: center; margin-top: 20px; font-size: 14px; color: #666; } .page-layout-research .login-link a { color: #043B72; text-decoration: none; font-weight: 500; } .page-layout-research .login-link a:hover { text-decoration: underline; } .page-layout-research .terms-text { font-size: 11px; color: #999; text-align: center; margin-top: 16px; line-height: 1.5; } .page-layout-research .terms-text a { color: #043B72; text-decoration: none; } .page-layout-research .terms-text a:hover { text-decoration: underline; } /* ======================================================================== SECTION 14: INLINE STYLES - SYNOPSIS POPUP BUBBLE (from _LayoutResearchReport.cshtml lines 536-624) ======================================================================== */ .page-layout-research .custom-bubble { display: none; position: fixed; background: white; border: 1px solid #e0e0e0; border-radius: 12px; padding: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 9999; max-width: 400px; width: max-content; min-width: 250px; } .page-layout-research .custom-bubble.show { display: block; } .page-layout-research .custom-bubble::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid white; } .page-layout-research .custom-bubble p { margin: 0; font-size: 13px; line-height: 1.5; color: #333; } .page-layout-research .eyeiconbtn { background: none; border: none; cursor: pointer; padding: 4px; color: #666; transition: color 0.2s; } .page-layout-research .eyeiconbtn:hover { color: #043B72; } /* ======================================================================== SECTION 15: INLINE STYLES - REPORT TABLE & CARDS (from _LayoutResearchReport.cshtml lines 625-815) ======================================================================== */ .page-layout-research .report-table-wrapper { overflow-x: auto; margin: 20px 0; } .page-layout-research .report-table { width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden; } .page-layout-research .report-table th { background: #f8f9fa; padding: 16px; text-align: left; font-weight: 600; font-size: 14px; color: #333; border-bottom: 2px solid #e5e5e5; white-space: nowrap; } .page-layout-research .report-table tbody tr { border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s; } .page-layout-research .report-table tbody tr:hover { background-color: #f8f9fa; } .page-layout-research .report-table tbody td { padding: 16px; font-size: 14px; color: #555; vertical-align: top; } .page-layout-research .report-date-cell { white-space: nowrap; font-weight: 500; color: #666; min-width: 100px; } .page-layout-research .report-headline-cell { font-weight: 500; color: #333; cursor: pointer; min-width: 200px; } .page-layout-research .report-headline-cell:hover { color: #043B72; } .page-layout-research .report-filename-text { display: block; font-size: 12px; color: #999; margin-top: 4px; } .page-layout-research .report-synopsis-cell { max-width: 400px; line-height: 1.5; } .page-layout-research .synopsis-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .page-layout-research .report-actions-cell { white-space: nowrap; text-align: center; } .page-layout-research .action-icons { display: flex; gap: 8px; justify-content: center; } .page-layout-research .action-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #f5f5f5; border: 1px solid #e0e0e0; cursor: pointer; transition: all 0.2s; color: #666; } .page-layout-research .action-icon:hover { background: #043B72; color: white; border-color: #043B72; } /* Card view for mobile */ .page-layout-research .report-card { background: white; border: 1px solid #e5e5e5; border-radius: 12px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .page-layout-research .report-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; } .page-layout-research .report-meta { flex: 1; } .page-layout-research .report-date { font-size: 13px; color: #999; margin-bottom: 4px; } .page-layout-research .report-frequency { display: inline-block; background: #f0f0f0; padding: 3px 10px; border-radius: 12px; font-size: 11px; color: #666; font-weight: 500; } .page-layout-research .report-name { font-size: 12px; color: #F58220; font-weight: 500; margin-top: 6px; } .page-layout-research .report-card-body { margin-bottom: 12px; } .page-layout-research .report-headline { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 8px; line-height: 1.4; } .page-layout-research .report-synopsis { font-size: 13px; color: #666; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .page-layout-research .report-card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid #f0f0f0; } .page-layout-research .icon-group { display: flex; gap: 8px; } /* ======================================================================== SECTION 16: INLINE STYLES - SIDEBAR & FILTERS (from _LayoutResearchReport.cshtml lines 816-948) ======================================================================== */ /* .page-layout-research .sidebar-container { background: #f8f9fa; border-right: 1px solid #e5e5e5; height: 100%; overflow-y: auto; } .page-layout-research .sidebar { padding: 20px; } .page-layout-research .sidebar-header { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid #e5e5e5; }*/ .page-layout-research .filter-group { margin-bottom: 24px; } .page-layout-research .filter-label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .page-layout-research .filter-select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; background: white; cursor: pointer; transition: border-color 0.2s; } .page-layout-research .filter-select:focus { outline: none; border-color: #043B72; } /*.sidebar-section { margin-bottom: 24px; } .page-layout-research .sidebar-item { padding: 12px 16px; margin-bottom: 4px; border-radius: 6px; cursor: pointer; font-size: 14px; color: #555; transition: all 0.2s; display: flex; align-items: center; gap: 10px; } */ /* .sidebar-item.active { background: #043B72; color: white; font-weight: 500; } .page-layout-research .sidebar-item:hover { background: #e8eef5; } .page-layout-research .sidebar-item.active:hover { background: #032a52; } .page-layout-research .sidebar .subcategory-header { padding: 12px 16px; cursor: pointer; font-weight: 500; color: #333; display: flex; justify-content: space-between; align-items: center; } .page-layout-research .sidebar-radio { margin-right: 8px; cursor: pointer; } */ /* ======================================================================== INLINE STYLES - PAGINATION (from _LayoutResearchReport.cshtml lines 949-1047) ======================================================================== */ .page-layout-research .pagination-wrapper { display: flex; justify-content: center; align-items: center; margin: 30px 0; gap: 20px; } .page-layout-research .pagination-controls { display: flex; gap: 8px; align-items: center; } .page-layout-research .pagination-info { font-size: 14px; color: #666; } .page-layout-research .page-button { min-width: 36px; height: 36px; padding: 0 12px; border: 1px solid #ddd; background: white; color: #555; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .page-layout-research .page-button:hover { background: #f5f5f5; border-color: #043B72; } .page-layout-research .page-button.active { background: #043B72; color: white; border-color: #043B72; font-weight: 600; } .page-layout-research .page-button:disabled { opacity: 0.4; cursor: not-allowed; background: #f5f5f5; } .page-layout-research .page-button:disabled:hover { border-color: #ddd; } /* ======================================================================== SECTION 18: INLINE STYLES - HEADER (from _LayoutResearchReport.cshtml lines 1048-1147) ======================================================================== */ .header { background: white; padding: 14px 98px 19px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 100; } .page-layout-research .header-left { display: flex; align-items: center; gap: 20px; } .page-layout-research .header-center { flex: 1; display: flex; justify-content: center; padding: 0 20px; } .page-layout-research .header-search { position: relative; width: 100%; max-width: 500px; } .page-layout-research .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #999; pointer-events: none; } .page-layout-research .header-right { display: flex; align-items: center; gap: 16px; } .page-layout-research .icon-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #666; transition: all 0.2s; cursor: pointer; } .page-layout-research .icon-link:hover { background: #f5f5f5; color: #043B72; } /* ======================================================================== SECTION 19: INLINE STYLES - SEARCH BAR (from _LayoutResearchReport.cshtml lines 1148-1276) ======================================================================== */ .page-layout-research .search-bar-wrapper { position: relative; width: 100%; } .page-layout-research .search-form { width: 100%; } .page-layout-research .search-input { width: 100%; padding: 10px 40px 10px 40px; border: 1px solid #ddd; border-radius: 24px; font-size: 14px; transition: all 0.2s; background: #f8f9fa; } .page-layout-research .search-input:focus { outline: none; border-color: #043B72; background: white; box-shadow: 0 2px 8px rgba(4, 59, 114, 0.1); } .page-layout-research .search-icon-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #043B72; border: none; border-radius: 50%; color: white; cursor: pointer; transition: background 0.2s; } .page-layout-research .search-icon-btn:hover { background: #032a52; } .page-layout-research .search-results-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: white; border: 1px solid #e5e5e5; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); max-height: 400px; overflow-y: auto; z-index: 1000; display: none; } .page-layout-research .search-results-dropdown.show { display: block; } .page-layout-research .search-result-item { padding: 12px 16px; border-bottom: 1px solid #f5f5f5; cursor: pointer; transition: background 0.2s; } .page-layout-research .search-result-item:last-child { border-bottom: none; } .page-layout-research .search-result-item:hover { background: #f8f9fa; } /* ======================================================================== SECTION 19A: UTILITY CLASSES ======================================================================== */ /* Visibility toggles - Desktop defaults */ .hideResRep { display: block; } .showResRep { display: block; } .hidetbldata { display: block; /* Visible on desktop */ } .showtblData { display: none !important; /* Hidden on desktop */ } /* Additional utility */ .page-layout-research a { color: #000; text-decoration: none; } /* ======================================================================== SECTION 20: RESPONSIVE STYLES - NAVIGATION ======================================================================== */ /* ======================================== PRINT STYLES ======================================== */ @media print { .sidebar, .filter-section, .mobile-filter-container, .action-buttons, .mobile-actions, .btn-toggle-disclaimer, .stock-ideas-toggle-btn, .stock-collapse-btn, .page-research-detail .mobile-stock-toggle-btn { display: none !important; } .page-research-detail .main-content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .reports-table, .page-research-detail .stock-detail-table { border: 1px solid #000; } .reports-table th, .reports-table td, .stock-detail-table th, .page-research-detail .stock-detail-table td { border: 1px solid #000; } } /* Desktop view - default (992px and above) */ /* Large Desktop */ @media (min-width: 1200px) { .page-research-detail .sidebar { padding: 25px 20px; } .page-research-detail .main-content { padding: 0px 0px 0px 30px; } } @media (max-width: 1199px) { .container-fluid { padding-left: 40px; padding-right: 40px; } } @media (min-width: 992px) { .test-horizontal-nav { overflow-x: visible; flex-wrap: nowrap; } .header { padding: 14px 98px 19px; } } /* Tablet and below (< 992px) */ @media (max-width: 991px) { .logo { margin-left: 10px; } .page-research-detail .logo { margin-left:10px; } .page-latest-reports .stock-slide { flex-shrink: 0; } .page-latest-reports .main-content { padding: 15px; } .page-latest-reports .section-title { font-size: 24px; } .page-latest-reports .sidebar { margin-bottom: 20px; position: relative; top: 0; } } /* ======================================== RESPONSIVE BREAKPOINTS ======================================== */ /* Tablet and Below */ @media (max-width: 991.98px) { .page-research-detail .sidebar { min-height: auto; position: relative; height: auto; padding: 16px 12px; } .page-research-detail .main-content { padding: 20px 16px; } } /* Mobile */ /* Tablet and Mobile - Navigation Adjustments */ @media (max-width: 768px) { /* FIX 2: Hero Banner - Updated */ .hero-banner { height: auto; min-height: 380px; /* Changed from no min-height */ padding: 40px 20px 50px; /* Changed from 50px 20px */ width: 90% !important; } .hero-banner h1 { font-size: 40px; /* Changed from 48px */ padding-top: 0; /* Changed from 65px */ margin-bottom: 15px; /* Added */ line-height: 1.2; /* Added */ } .hero-banner p { font-size: 16px; /* Changed from 18px */ line-height: 1.4; margin-bottom: 25px; /* Added */ } /* FIX 2: Mobile Input Form - Updated */ .mobile-input-form { margin-top: 25px; /* Changed from 115px */ padding: 0; /* Added */ width: 100%; /* Added */ } .input-grouprep { max-width: 100%; /* Changed from 350px */ width: 100%; /* Added */ height: 50px; } .country-code { padding: 12px 10px 12px 15px; /* Changed from 9px */ font-size: 12px !important; } .line-height-code { margin: 10px 0px; } .mobile-input { font-size: 15px; /* Changed from 14px */ padding: 12px 120px 12px 5px; /* Changed from 7px */ } .start-free-trial-btn { font-size: 13px; /* Changed from 14px */ padding: 12px 16px; /* Changed from 0 15px */ right: 0px; /* Added */ border-radius: 25px; /* Added */ } /* Navigation (keep existing) */ .tab-btn { padding: 14px !important; } .report-nav { gap: 10px; } .nav-bar-container { background-color: #e3e8ef; border-radius: 50px; padding: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); max-width: 100%; width: 93% !important; overflow: hidden; margin: 30px auto !important; } .report-nav { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; padding-bottom: 0; } .report-nav::-webkit-scrollbar { display: none; } } @media (max-width: 768px) { #modalFooterDiv { flex-direction: row; align-items: flex-start; gap: 0px; } #RecommendationDiv { width: 100%; } #reportDiv { width: 100%; justify-content: flex-end; } } @media (max-width: 768px) { /* Table to Card view */ /* FIX 1: Header - Updated */ .header { padding: 10px 15px; /* Changed from 8px 0 */ gap: 10px; /* Added */ } .logo img { max-width: 140px; /* Added */ height: auto; /* Added */ } .header .btn-primary { height: 27px; font-size: 11px !important; width: 125px; padding: 5px !important; } .header-profile-icon { width: 24px !important; /* Added */ height: 24px !important; /* Added */ } .page-layout-research .report-table-wrapper { display: none; } .page-layout-research .report-card { display: block; } /* Mobile Header adjustments */ .header { padding: 8px 0; } .page-layout-research .header-center { padding: 0 12px; } .page-layout-research .header-search { max-width: 100%; } /* Sidebar as drawer */ .page-layout-research /* .sidebar-container { position: fixed; left: -280px; top: 0; width: 280px; height: 100%; z-index: 999; transition: left 0.3s ease; } .page-layout-research .sidebar-container.open { left: 0; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2); }*/ /* Mobile pagination */ .page-layout-research .pagination-wrapper { flex-direction: column; gap: 12px; } .page-layout-research .pagination-controls { flex-wrap: wrap; justify-content: center; } /* Modal adjustments */ /* Modal adjustments */ .modal-dialog { width: 95%; margin: 1rem auto; max-width: 95%; } .modal-dialog-centered { min-height: calc(100vh - 2rem); } #stockModal .modal-dialog { margin: 1rem auto !important; } #stockModal .modal-content { max-height: calc(100vh - 2rem); } #stockModal .modal-body { padding: 25px 15px 15px 15px; max-height: calc(100vh - 8rem); overflow-y: auto; } /* FIX 4: Container Width - New */ .page-research-detail .container-fluid { padding-left: 5%; padding-right: 5%; width: 100%; } .page-research-detail .main-content { padding: 15px 0; } .page-research-detail .sidebar { padding: 15px; margin-bottom: 15px; } .page-research-detail .mobile-card, .page-research-detail .report-card { margin: 0 0 15px 0; padding: 15px; } .modal-content { border-radius: 8px; } .modal-video { height: 250px; } /* Registration modal */ .page-layout-research .registration-modal-content { width: 95%; max-width: 100%; } .modal-header-reg { padding: 24px 16px 20px; } .modal-body-reg { padding: 24px 16px; } /* Search dropdown */ .page-layout-research .search-results-dropdown { max-height: 300px; } /* User profile dropdown */ .user-details-card { width: 240px; right: -10px; } } @media (min-width: 768px) { .page-research-detail .desktop-table { display: table; } .page-research-detail .mobile-cards-container { display: none; } .page-research-detail .mobile-stock-toggle-btn { font-size: 10px !important; font-weight: 300 !important; width: 45% !important; } } @media (max-width: 767.98px) { .page-research-detail .sidebar { border-right: none; border-bottom: 1px solid #E0E4E8; padding: 16px; } .page-research-detail .main-content { padding: 16px; } .page-research-detail .desktop-table { display: none; } .page-research-detail .mobile-cards-container { display: block; } .page-research-detail .filter-section { display: flex; /* Keep flex for layout */ flex-direction: column; /* Stack vertically */ padding: 16px; gap: 12px; background: #f8f9fa; /* Add background */ border-radius: 8px; /* Add radius */ margin-bottom: 15px; /* Add spacing */ } /* CRITICAL: Do NOT set display on child divs - let JavaScript control it */ .page-research-detail .filter-section > div { /* Don't force display here - JavaScript controls visibility */ width: 100%; /* Only set width */ } /* Style the filter labels */ .filter-label { font-size: 13px; font-weight: 600; margin-bottom: 5px; display: block; } /* Make filter inputs full width when visible */ .filter-select, .filter-select-input, .page-research-detail .date-filter-input { min-width: 100%; width: 100%; font-size: 14px; padding: 10px; border: 1px solid #ddd; border-radius: 30px; } /*remove default dropdown arrow from select*/ select { appearance: none; -webkit-appearance: none; -moz-appearance: none; } #stockSearchDiv .filter-select-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; /* Removes any background arrow images */ } /* Ensure no dropdown styling on focus */ .page-research-detail #sskiCodeSearch::-webkit-calendar-picker-indicator { display: none; } /* Date filter group responsive */ .page-research-detail .date-filter-group { flex-direction: column; width: 100%; gap: 12px; } .page-research-detail .date-inputs-wrapper { flex-direction: column; width: 100%; gap: 12px; } .page-research-detail .date-inputs-wrapper > div { width: 100%; } /* Clear button full width */ .page-research-detail .clear-dates-btn { width: 100%; margin-top: 0 !important; } .filter-select, .filter-select-input, .page-research-detail .date-filter-input { min-width: 100%; width: 100%; /* Added */ font-size: 14px; /* Added */ padding: 10px; /* Added */ background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23666%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E) right 15px top 50% / 12px no-repeat white; background-position: right 15px top 50%; } .page-research-detail .date-filter-group { flex-direction: column; width: 100%; gap: 12px; /* Added */ } .page-research-detail .date-inputs-wrapper { flex-direction: column; width: 100%; gap: 12px; /* Added */ } .page-research-detail .date-inputs-wrapper > div { width: 100%; /* Added */ } .page-research-detail .clear-dates-btn { width: 25%; margin-top: 15px !important; /* Added */ } } /* Desktop */ @media (max-width: 767px) { .container-fluid { padding-left: 15px; padding-right: 15px; } } /* Mobile (< 768px) */ @media (max-width: 767px) { .container-fluid { padding-left: 15px; padding-right: 15px; max-width: 100%; } .row { margin-left: 0; margin-right: 0; } .page-latest-reports .main-content { padding: 15px 0px; } .col-12 { padding-left: 0; padding-right: 0; } .page-latest-reports .section-title { font-size: 20px; margin-bottom: 15px; } .page-latest-reports .research-card { padding: 15px; margin-bottom: 15px; } .page-latest-reports .card-title { font-size: 14px; } .page-latest-reports .card-description { font-size: 12px; } /* Card header - analyst name below on mobile */ .page-latest-reports .card-header { flex-direction: column; align-items: flex-start; } .page-latest-reports .card-type { margin-left: 0; } /* Stock grid mobile - SAME 3-column layout as desktop */ .page-latest-reports .stock-table-wrapper { padding: 12px; } .page-latest-reports .stock-grid { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; } .page-latest-reports .stock-cell { padding: 0; } .page-latest-reports .stock-label { font-size: 10px; margin-bottom: 4px; } .page-latest-reports .stock-name-badge { font-size: 11px; padding: 4px 0px; } .page-latest-reports .stock-value { font-size: 13px; } .page-latest-reports .stock-action-btn-inline { width: 100%; padding: 8px 12px; font-size: 12px; min-width: auto; } .page-latest-reports .stock-cell-button { align-items: flex-end; } /* Stock table mobile - hide old styles */ .page-latest-reports .stock-info-table thead { display: none; } .page-latest-reports .stock-info-table tbody td { display: block; text-align: left; padding: 8px 0; font-size: 14px; } .page-latest-reports .stock-info-table tbody td::before { content: attr(data-label); font-weight: 400; font-size: 12px; color: #6B7280; display: block; margin-bottom: 5px; } .page-latest-reports .stock-action-button { padding: 10px 20px; font-size: 13px; } /* Expand arrow button */ .page-latest-reports .expand-arrow-btn { width: 15px; height: 15px; font-size: 10px; } /* Stock slider adjustments for mobile */ .page-latest-reports .stock-slider-inner { padding: 9px; } .page-latest-reports .stock-slide .stock-row { flex-direction: column; gap: 10px; } .page-latest-reports .stock-slide .single-detail { min-width: auto; width: 100%; } .page-latest-reports .stock-nav-btn { width: 32px; height: 32px; font-size: 14px; } /* Modal adjustments */ .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); } .modal-body { padding: 20px; } } /* Tablet view - scrollable (577px to 991px) */ @media (min-width: 577px) and (max-width: 991px) { .test-nav-container { padding: 0 16px; width: 100%; /* ADD — constrains container width on iOS */ overflow: hidden; /* ADD — clips overflow so scroll stays in nav */ } .test-horizontal-nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; /* ADD THIS — fixes iOS page scroll */ scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .test-horizontal-nav::-webkit-scrollbar { display: none; } .test-nav-button { padding: 13px 26px; font-size: 14px; } .test-nav-button:first-of-type { padding-left: 30px; } .test-nav-button:last-of-type { padding-right: 30px; } } /* Small mobile (< 576px) */ @media (max-width: 575px) { .page-latest-reports .section-title { font-size: 18px; } .page-latest-reports .card-header { flex-direction: row; align-items: center; gap: 5px; } .card-footer { flex-direction: row; align-items: flex-start; gap: 10px; } .page-latest-reports .stock-indicators { gap: 6px; } .page-latest-reports .stock-dot { width: 8px; height: 8px; } } /* Mobile view - scrollable (up to 576px) */ @media (max-width: 576px) { .hidetbldata { display: none !important; } .showtblData { display: block !important; } .test-menu-wrapper { padding: 12px 0; } .test-nav-container { padding: 0 12px; width: 100%; /* ADD — constrains container width on iOS */ overflow: hidden; /* ADD — clips overflow so scroll stays in nav */ } .test-horizontal-nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-x; /* ADD THIS — fixes iOS page scroll */ scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } /* Hide scrollbar for Chrome, Safari and Opera */ .test-horizontal-nav::-webkit-scrollbar { display: none; } .test-nav-button { padding: 11px 22px; font-size: 13px; } .test-nav-button:first-of-type { padding-left: 26px; } .test-nav-button:last-of-type { padding-right: 26px; } } /* Mobile - Switch to horizontal navigation */ @media (max-width: 480px) { .input-grouprep { max-width: 97%; padding: 0 5px; } /* Further mobile refinements */ .modal-title { font-size: 16px; } /* FIX 1: Hide Research Calls on tiny screens */ .btn-research-calls { display: block; } /* FIX 2: Hero Banner - Extra Small */ .hero-banner { width: 92%; /* Added */ padding: 35px 15px 45px; /* Added */ min-height: 350px; /* Added */ } .hero-banner h1 { font-size: 32px; /* Added */ } .hero-banner p { font-size: 14px; /* Added */ } .input-grouprep { height: 40px; /* Added */ } .mobile-input { padding: 10px 110px 10px 5px; /* Added */ font-size: 10px; /* Added */ } .start-free-trial-btn { padding: 10px 14px; /* Added */ font-size: 12px; /* Added */ } /* FIX 4: Container - Extra Small */ .page-research-detail .container-fluid { padding-left: 4%; /* Added */ padding-right: 4%; /* Added */ } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px; flex-direction: column; gap: 8px; } .synopsis-btn, .video-btn, .page-layout-research .download-btn { width: 100%; text-align: center; } .page-layout-research .report-card { padding: 12px; } .page-layout-research .report-headline { font-size: 14px; } .page-layout-research .pagination-controls .page-button { min-width: 32px; height: 32px; font-size: 13px; } .page-layout-research /*.sidebar { padding: 16px; }*/ .user-details-card { width: calc(100vw - 20px); right: -5px; left: 10px; } } @media (max-width: 576px) { .hidetbldata { display: none !important; } .showtblData { display: block !important; } .mobile-input-form { margin-top: 85px; margin-bottom: 0px; font-size: 14px; margin-right: 0px; } .input-grouprep { max-width: 80%; padding: 0 5px; } .page-research-detail .mobile-stock-toggle-btn { font-size: 10px !important; font-weight: 300 !important; width: 50% !important; } .page-research-detail .mobile-stock-toggle-btn { padding: 3px 0px !important; } .page-research-detail .video-decorations img { width: 100%; padding: 0% 4%; } .page-latest-reports .video-decorations img { width: 100%; padding: 0% 4%; } .btn-buy, .btn-Hold, .btn-Sell { width: 70px !important; min-width: 90px !important; padding: 9px 20px !important; } .page-latest-reports .popupMenu { left: 210px !important; } } /* Extra small mobile devices (up to 375px) */ @media (max-width: 375px) { .test-nav-button { padding: 10px 18px; font-size: 12px; } .test-nav-button:first-of-type { padding-left: 22px; } .test-nav-button:last-of-type { padding-right: 22px; } .page-layout-research .page-layout-research .logo img { width: 160px; height: 27px; } } @media (max-width: 375px) { .container { max-width: 95%; } .header .btn { padding: 4px 10px !important; font-size: 12px !important; } .page-layout-research .report-card-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .page-layout-research .icon-group { width: 100%; justify-content: flex-start; } .btn-buy, .btn-Hold, .btn-Sell { width: 70px !important; min-width: 75px !important; padding: 9px 20px !important; } .input-grouprep { max-width: 80%; padding: 0 5px; } .hero-content h1, .hero-content p{ padding:0px 30px; } } /* Extra small devices - additional refinements */ @media (max-width: 321px) { .input-grouprep { max-width: 80%; padding: 0 5px; } .page-research-detail .mobile-stock-info label { font-size: 8px !important; } .page-research-detail .mobile-stock-ticker-name { font-size: 9px; } .page-research-detail .mobile-stock-grid { gap: 0px !important; } .btn-buy, .btn-Hold, .btn-Sell { width: 70px !important; min-width: 75px !important; padding: 9px 20px !important; } .page-research-detail .customer-link-item { font-size: 10px !important; } .page-latest-reports .stock-slide .single-detail label { font-size: 10px !important; } .page-latest-reports .stock-slide .single-detail span { font-size: 10px; } .page-latest-reports .stock-info-grid { gap: 0px; } .page-latest-reports .font-medium{ font-size:10px; } .page-latest-reports .font-regular { font-size: 10px; } .page-latest-reports .stock-slider-inner { padding: 0px; } .video-container { padding-bottom: 156px !important; } .page-research-detail .customer-link-item{ font-size: 10px; } .page-latest-reports .filter-icon{ font-size: 10px; } .page-latest-reports .popupMenu { left: 210px !important; } } /* ======================================================================== END OF FILE ======================================================================== */