/* main container */
#home-container {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    align-content: center;
}

/* Styling for the button */
.q-button {
    background-color: #003d5c; /* Deep professional blue */
    font-size: 0.6rem;
    color: white;
    border: 2px solid #003d5c;
    border-radius: 4px; /* More corporate, less rounded */
    cursor: pointer;
    padding: 8px 24px;
    width: 200px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.q-button:hover {
    background-color: #005580;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 61, 92, 0.3);
}

.home-button {
    border: none;
    background: none;
    color: black;
    font-weight: bold;
    font-size: 1.6rem;
    width: 100%;
}

.one-line-title .notion-link {
    margin-top: 20px;
}

.two-line-title .notion-link {
    margin-top: 0;
}

.q-button-secondary {
    background-color: #f5f5f5;
    font-weight: 600;
    font-size: 12px;
    color: #003d5c;
    padding: 14px 20px;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.q-button-secondary:hover {
    background-color: #e8e8e8;
    border-color: #003d5c;
}

@media (max-width: 600px) {
    #confirm-button {
        width:45% !important;
    }
}

/* control main element width */
#tabs-parent {
    width: 90%;
    padding: 15px 15px 20px !important;
    box-sizing: border-box;
}

/* Styling for specific page to ensure custom configuration */
.report-portal .tab {
    background-color: white !important;
}

/* Styling for tab selection */
.tab {
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease !important;
    font-weight: 500;
    border: 1px solid #e0e0e0 !important;
}   

.tab:hover {
   background-color: #e8ecef !important;
   border-color: #003d5c !important;
}

.tab--selected {
   border-top: none !important;
   background-color: #003d5c !important;
   color: white !important;
   border: 1px solid #003d5c !important;
}

/* Selected tab - increase specificity */
.q-tab.q-tab--selected {
    background-color: #003d5c !important;
    color: white !important;
    border: 1px solid #003d5c !important;
    border-top: none !important;
}

/* Font Implementation */
@font-face {
    font-family: 'Baskerville Old Face';
    src: url('fonts/baskerville-old-face.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('fonts/AvenirLTProLight.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Global font for entire app - COMPREHENSIVE */
body, * {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6, label, th {
    font-family: 'Inter', Arial, sans-serif !important;
    color: #2c3e50;
}

h6 {
    font-size: 0.8rem;
}

/* for label in checklist use Inter */
#checklist label {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Body Text */
body {
    font-family: 'Inter', Arial, sans-serif !important;
    background-color: #fafbfc;
}

label {
    font-weight: 600;
    color: #2c3e50;
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Dropdown Menu */
.dropdown,
.dropdown-menu,
select {
    font-family: 'Inter', Arial, sans-serif !important;
}

.dropdown-menu {
    overflow: visible !important;
    min-width: 125px !important;
    z-index: 10000 !important;
    /* color: white !important; */
}

.dropdown-menu .dropdown-item,
.dropdown-menu a {
    color: black !important;
}

/* Table and Chart Text - FORCE Inter everywhere */
table,
.chart-content,
td,
th,
.dash-table-container,
.dash-table-container *,
.financial-table,
.financial-table *,
.base-table,
.base-table * {
    font-family: 'Inter', Arial, sans-serif !important;
}

/* Plotly charts */
.js-plotly-plot .plotly text,
.js-plotly-plot .plotly .gtitle,
.js-plotly-plot .plotly .xtick text,
.js-plotly-plot .plotly .ytick text {
    font-family: 'Inter', Arial, sans-serif !important;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #2c3e50;
}

.compare-heading {
    text-align: left;
    margin-bottom: 10px;
    width: 100%;
}

#compare-asset-class-dropdown, 
#compare-sec-dropdown, 
#dropdown-security3, 
#dropdown-security4 {
    margin-bottom: 5px;
}

#compare-ben-dropdown,
#short-note-sec-dropdown,
#textarea-meeting-title,
#chg_to_team_note,
#chg_to_proces_note,
#factor_perf_note,
#other_details_note {
    margin-bottom: 15px;
}

/* for all h5 make it bold */
h5 {
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 15px;
    color: #2c3e50;
}

/* dcc.Dropdown */
.Select-control {
    border: 1px solid #c0c6cc !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem !important;
    height: 32px !important;
    transition: all 0.2s ease;
    background-color: white !important;
    border: 1px solid black !important;
}

.Select-control:hover {
    border-color: #003d5c !important;
    box-shadow: 0 0 0 1px #003d5c !important;
}

.Select-input {
    height: 32px !important;
}

.Select-placeholder {
    line-height: 32px !important;
    color: #6c757d !important;
}

.Select-menu-outer {
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    left: 0 !important;
    border: 1px solid #c0c6cc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

#compare-asset-class-dropdown .Select-menu-outer,
#compare-sec-dropdown .Select-menu-outer, 
#compare-ben-dropdown .Select-menu-outer {
    width: 90% !important;
    left: 0 !important;
}

#fund-table-dropdown .Select-menu-outer,
#fund-compare-dropdown .Select-menu-outer {
    width: 94.7% !important;
}

#dropdown-security3 .Select-menu-outer,
#dropdown-security4 .Select-menu-outer {
    width: 70% !important;
}

.Select-option {
    border-radius: 0 !important;
}

.Select-option:hover {
    background-color: #f0f4f7 !important;
}

/* basic table format, applies to all table*/
.base-table {
    font-family: 'Inter', 'Avenir Next LT Pro';
    color: #2c3e50;
    border-collapse: collapse;
    border-color: #d0d5dd;
    border: 1px solid #d0d5dd;
}

/* white background and black border */
.table-white-bg td,
.table-white-bg tr,
.table-white-bg th {
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
}

/* Removing part of borders */
.table-merged-columns th {
    border-right: none !important;
    border-left: none !important;
}

.table-merged-columns tr td:nth-child(n+2) {
    border-right: none !important;
}

.table-merged-columns tr td:nth-child(n+3) {
    border-left: none !important;
}

#table1 td:first-child,
#table2 td:first-child,
#table3 td:first-child,
#table4 td:first-child {
    width: 220px !important;
    text-align: left;
}

#table1 td:not(:first-child) {
    text-align: left;
}

/* Style data columns of all tables */
#table2 td:not(:first-child),
#table3 td:not(:first-child),
#table4 td:not(:first-child) {
    width: 70px !important;
    text-align: center;
}

/* Style first column of all tables */
#table2 th:first-child,
#table3 th:first-child,
#table4 th:first-child {
    width: 220px !important;
    text-align: left;
}

#table1 th:first-child {
    text-align: left;
}

/* Style data columns of all tables */
#table2 th:not(:first-child),
#table3 th:not(:first-child),
#table4 th:not(:first-child) {
    width: 70px !important;
    text-align: center;
}

/* For Date Picker styling */
.date-picker-inception {
    display: block !important;
}
.date-picker-inception input {
    font-size: 16px;
}

/* styling for the DatePickerSingle */
.DateInput_input {
    border: 1px solid #c0c6cc !important;
    border-radius: 4px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #2c3e50 !important;
    height: 32px !important;
    padding: 0 !important;
    font-weight: 500 !important;
    transition: all 0.2s ease;
    background-color: white !important;
}

.DateInput_input:hover {
    border-color: #003d5c !important;
    box-shadow: 0 0 0 1px #003d5c !important;
}

.DateInput_input:focus {
    border-color: #003d5c !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 61, 92, 0.1) !important;
}

.DateInput_input:hover {
    cursor: pointer;
}

/* extra small devices */
@media (max-width: 512px) {
    .DateInput_input {
        width: 150px !important;
    }
}

.date-single-input .SingleDatePickerInput {
    border: none !important;
}

.date-single-input .DateInput_input::placeholder {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #6c757d !important;
    text-align: center !important;
}

/* this is style for the footer */
/* .q-footer {
    margin: auto;
    width: 100%;
    background-color: white;
    color: #2c3e50;
    text-align: center;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #e5e7eb;
}

.q-footer p, .q-footer div {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    padding: 10px;
} */

/* for the Q wave image on bottom left */
.q-wave-img {
    position: relative;
    bottom: 5%;
    left: 8%;
    width: 40px;
    height: 40px;
}

/* Configure for different screen sizes */
@media (min-width: 768px) and (max-width: 1024px) {
    .q-wave-img {
        bottom: 5%;
        left: 8%;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .q-wave-img {
        bottom: 4%;
        left: 2%;
    }
}

@media (min-width: 450px) and (max-width: 576px) {
    .q-wave-img {
        height: 30px!important;
        width: 30px!important;
        bottom: 4%;
        left: 0%;
    }
}

@media (max-width: 450px) {
    .q-wave-img {
        display: none;
    }
}

/* this is the style for header */
.q-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center;
    background-color: black !important;
    z-index: 5000;
    border-bottom: 1px solid #2c3e50;
}

.q-sidebar {
    z-index: 100;
    background-color: #1a1d23 !important;
}

.q-header-title {
    color: white;
}

.q-header {
    height: 60px !important;
    width:auto !important; 
    margin: auto !important;
    border: none !important;
}

.q-header-logo {
    height: 80px;
}

.q-header .q-header-wave {
    height: auto;
    width: 400px;
    margin-left: 0px;
    margin-bottom: -10px;
    margin-top: -70px;
    overflow-y: hidden;
    position: absolute;
    bottom: -25px;
    left: -40px;
}

.navbar.bg-primary {
    border: none !important;
}

.q-slider {
    position:fixed;
    top: -1px;
    right: 200px;
    width: 60%;
    padding: 15px 15px 20px !important;
    box-sizing: border-box;
    z-index: 10000;
}

.q-slider .rc-slider-handle {
    width: 15px;     
    height: 15px;     
    background-color: #003d5c;   
    border: 2px solid #003d5c;
    border-radius: 50%;
    z-index: 10000;
}

.q-slider .rc-slider-handle:hover {
    background-color: #005580;
    border-color: #005580;
}

.q-slider .rc-slider-rail {
    background-color: #d0d5dd;
    z-index: 10000;
}

.q-slider .rc-slider-track {
    background-color: #003d5c;
    z-index: 10000;
}

.q-slider .rc-slider-dot {
    background-color: white;
    border: 1px solid #d0d5dd;
    z-index: 10000;
}

.q-slider .rc-slider-dot-active {
    background-color: #003d5c;
    border: 1px solid #003d5c;
    z-index: 10000;
}

.q-slider .rc-slider-mark-text {
    font-size: 16px;
    z-index: 10000;
    color: #6c757d;
    font-weight: 500;
}

@media (min-width: 674px) and (max-width: 900px) {
    .q-slider .rc-slider-mark-text {
        font-size: 10px;
    }
}

@media (max-width: 1300px) {
    .q-slider .rc-slider-mark-text {
        font-size: 12px;
    }
}

.q-page-wrapper {
    margin: 0;
    /* height: 100vh; */
    /* overflow-y: auto; */
    background-color: #fafbfc;
    min-height: 50vh;
}

.q-dropdown-wrapper a {
    font-size: 16px;
}

/* Direct Equity Class */
.direct-equity-textbox {
    width: 100%;
    height: 100%;
    font-size: 20px !important;
    font-family: 'Inter';
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter';
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.financial-table th {
    background-color: #003d5c;
    color: white;
    border: none;
    height: 30px !important;
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Add alternating row colors */
.financial-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.financial-table tr:nth-child(odd) {
    background-color: white;
}

.financial-table td {
    color: #2c3e50;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    height: 35px !important;
    padding: 12px 16px !important;
    font-size: 0.75rem !important;
    text-align: center;
}

.financial-table td:first-child {
    font-weight: 500;
    color: #1a1d23;
}

.financial-table tbody tr:last-child td {
    border-bottom: none;
}

/* Maste File */
.form-check-input:checked {
    background-color: #003d5c;
    border-color: #003d5c;
}

.ms-auto.navbar-nav {
    margin-left: unset !important;
}

.navbar-collapse.collapse {
    justify-content: center;
}

.table-horizontal-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow-x: visible;
    width: max-content;
    min-width: 100%;
}

.table-vertical-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    height: 100%;
}

#hide-first-header .cell-table tr:first-child {
    display: none !important;
}

.hide-two-first-header .cell-table tr:first-child,
.hide-two-first-header .cell-table tr:nth-child(2) {
    display: none !important;
}

.hide-first-two-table thead tr:first-child,
.hide-first-two-table thead tr:nth-child(2) {
    display: none !important;
}

.first-cell-table td, 
.first-cell-table th {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.first-cell-table td:nth-child(2), 
.first-cell-table th:nth-child(2) {
    min-width: 400px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.first-cell-table th:nth-child(2), 
.first-cell-table td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 2;
}

.first-cell-table th:nth-child(3), 
.first-cell-table td:nth-child(3) {
    position: sticky;
    left: 399px;
    z-index: 2;
}

.first-cell-table th:nth-child(4), 
.first-cell-table td:nth-child(4) {
    position: sticky;
    left: 498px;
    z-index: 2;
}

.first-cell-table th:nth-child(5), 
.first-cell-table td:nth-child(5) {
    position: sticky;
    left: 597px;
    z-index: 2;
    box-shadow: inset -3px 0 0 #d0d5dd;
}

.width-constraint-table td, 
.width-constraint-table th {
    min-width: 100px;
    max-width: 100px;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

.width-constraint-table td:nth-child(2), 
.width-constraint-table th:nth-child(2) {
    min-width: 400px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.mantine-Accordion-control {
    padding-left: 0px;
}

.m_4ba554d4{
    padding:unset;
}

.m_df3ffa0f {
    padding-top: unset;
    padding-bottom: unset;
}

.sidebar-link {
    color: #c0c6cc;
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.sidebar-link:nth-child(1) {
    margin-top: 10px;
}

.sidebar-link:hover {
    background-color: #2c3e50;
    color: white;
}

.sidebar-link.active {
    background-color: #003d5c !important;
    color: white !important;
    font-weight: 600 !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa !important;
}

::-webkit-scrollbar-thumb {
  background: #c0c6cc;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #003d5c;
}

::-webkit-scrollbar-button:single-button {
  display: none !important;
  height: 0px !important;
  width: 0px !important;
}

::-webkit-scrollbar-button {
  background: transparent !important;
  height: 0 !important;
  width: 0 !important;
}

textarea {
    resize: none !important;
    border: 1px solid #c0c6cc !important;
    padding: 12px !important;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    background-color: white;
    font-size: 0.85rem !important;  /* ADD THIS LINE */
    font-family: 'Inter', Arial, sans-serif !important;  /* ADD THIS LINE */
}

textarea:hover {
    border-color: #003d5c !important;
}

textarea:focus {
    border-color: #003d5c !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 61, 92, 0.1) !important;
}

.fund-input-row {
    gap: 20px;
    margin-bottom: 20px;
}

.dash-table-container {
    border: 1px solid #d0d5dd !important; 
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    background-color: white;
}

.dash-table-container table {
    font-size: 0.85rem !important;
    border: none !important; 
}

.dash-table-container .dash-cell,
.dash-table-container .dash-header {
    border-left: none !important;
    border-right: none !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
}

.dash-table-container .dash-header {
    border-bottom: 2px solid #e5e7eb !important;
    border-top: none !important;
    background-color: #f8f9fa !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
}

.dash-table-container .dash-cell {
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: none !important;
    color: #2c3e50 !important;
}

.dash-table-container thead tr:first-child th {
    border-top: none !important;
}

.dash-table-container tbody tr:last-child td {
    border-bottom: none !important;
}

#table1 {
    margin-top: 20px !important;
}

.performance1-table {
    margin-bottom: 20px !important;
}

.graph {
    border: 1px solid #d0d5dd !important;
    border-radius: 6px !important;
    height: 400px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 8px !important;
    background-color: white;
}

.graph .js-plotly-plot,
.graph .plotly {
    margin: 0 !important;
    padding: 0 !important;
}

.graph .main-svg {
    margin: 0 !important;
}

.tab-container {
    background-color: #f8f9fa !important;
    padding: 10px 20px !important;
    border-radius: 6px;
}

.tab {
    background-color: white !important;
    color: #6c757d !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    margin: 4px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap  !important;
}

.tab--selected {
    background-color: #003d5c !important;
    color: white !important;
    font-weight: 600 !important;
    border-color: #003d5c !important;
}

.tab:hover {
    background-color: #f0f4f7 !important;
    border-color: #003d5c !important;
}

.tab--selected:hover {
    background-color: #005580 !important;
}

.tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    border-bottom: none !important;
}

#home-icon {
    content: url('/images/home.svg') !important;
}

#sidebar-link-0:hover #home-icon {
    content: url('images/home-black.svg') !important;
}

#rolling-alpha-distribution-div { 
    border: none !important;
    width: 100% !important;
}

/* Hover effect for financial tables */
.financial-table tr:hover {
    background-color: #e8f4f8 !important;
    transition: background-color 0.2s ease;
}

.dash-table-container .dash-cell {
    transition: background-color 0.2s ease;
}

.dash-table-container tbody tr:hover td {
    background-color: #f8f9fa !important;
}

.dash-table-container thead tr:hover th {
    background-color: #f8f9fa !important;
}

html {
    overflow-y: scroll;
}

#fund-analyst-table {
    border: none !important;
}