/* Factsheet title styling */
.factsheet-title,
.factsheet-title p,
.factsheet-title div,
.factsheet-title span,
.factsheet-title ul,
.factsheet-title ol,
.factsheet-title li {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.factsheet-title p {
    margin: 0 0 !important;
}

/* Factsheet abstract styling */
.factsheet-abstract,
.factsheet-abstract p,
.factsheet-abstract div,
.factsheet-abstract span,
.factsheet-abstract ul,
.factsheet-abstract ol,
.factsheet-abstract li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.factsheet-abstract p {
    margin: 0.5em 0 !important;
}

/* Factsheet contact styling */
.factsheet-contact,
.factsheet-contact p,
.factsheet-contact div,
.factsheet-contact span,
.factsheet-contact ul,
.factsheet-contact ol,
.factsheet-contact li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.factsheet-contact p {
    margin: 0.5em 0 !important;
}

/* Factsheet disclaimer styling */
.factsheet-disclaimer,
.factsheet-disclaimer p,
.factsheet-disclaimer div,
.factsheet-disclaimer span,
.factsheet-disclaimer ul,
.factsheet-disclaimer ol,
.factsheet-disclaimer li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.factsheet-disclaimer p {
    margin: 0.5em 0 !important;
}

/* Factsheet profile table styling */
.factsheet-profile-label,
.factsheet-profile-label p,
.factsheet-profile-label div,
.factsheet-profile-label span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.factsheet-profile-value,
.factsheet-profile-value p,
.factsheet-profile-value div,
.factsheet-profile-value span {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-iap .Select-control {
    /*border-radius: 12px !important; *//* Adjust the border radius as needed */
    border: 1px solid #d9d9d9; /* Light gray border color */
    padding: 1px 1px; /* Adjust padding for better appearance */
}

.dropdown-iap .Select-multi-value-wrapper {
    /*border-radius: 12px !important;*/
    padding: 0px; /* Ensure the multi-value wrapper doesn't add extra padding */
}

.dropdown-iap .Select-placeholder,
.dropdown-iap .Select--single > .Select-control .Select-value {
    color: #333; /* Adjust text color as needed */
    font-weight: normal;
    border-radius: 12px !important;
}

.dropdown-iap .Select-input {
    padding: 8px 12px !important; /* Adjust input padding */
}

.dropdown-iap .Select-menu-outer {
    border: 1px solid #d9d9d9; /* Same border color as the control */
}

.dropdown-iap .Select-option {
    padding: 4px 4px; /* Adjust option padding */
}

.dropdown-iap .Select-arrow-zone {
    padding: 0 6px; /* Adjust arrow zone padding */
}


 
.dropdown-smooth .Select-control {
    border-radius: 12px !important; /* Adjust the border radius as needed */
    border: 1px solid #d9d9d9; /* Light gray border color */
    padding: 8px 12px; /* Adjust padding for better appearance */
}

.dropdown-smooth .Select-multi-value-wrapper {
    padding: 0px; /* Ensure the multi-value wrapper doesn't add extra padding */
}

.dropdown-smooth .Select-placeholder,
.dropdown-smooth .Select--single > .Select-control .Select-value {
    color: #333; /* Adjust text color as needed */
    font-weight: normal;
}

.dropdown-smooth .Select-input {
    padding: 8px 12px !important; /* Adjust input padding */
}

.dropdown-smooth .Select-menu-outer {
    border-radius: 12px !important; /* Adjust the border radius for the dropdown menu */
    border: 1px solid #d9d9d9; /* Same border color as the control */
}

.dropdown-smooth .Select-option {
    padding: 8px 12px; /* Adjust option padding */
}

.dropdown-smooth .Select-arrow-zone {
    padding: 0 12px; /* Adjust arrow zone padding */
}



.custom-dropdown .Select-control {
    border-radius: 12px !important; /* Adjust the border radius as needed */
    border: 1px solid #d9d9d9; /* Light gray border color */
    padding: 8px 12px; /* Adjust padding for better appearance */
}

.custom-dropdown .Select-multi-value-wrapper {
    padding: 0px; /* Ensure the multi-value wrapper doesn't add extra padding */
}

.custom-dropdown .Select-placeholder,
.custom-dropdown .Select--single > .Select-control .Select-value {
    color: #333; /* Adjust text color as needed */
    fontWeight: normal;
}

.custom-dropdown .Select-input {
    padding: 8px 12px !important; /* Adjust input padding */
}

.custom-dropdown .Select-menu-outer {
    border-radius: 12px !important; /* Adjust the border radius for the dropdown menu */
    border: 1px solid #d9d9d9; /* Same border color as the control */
}

.custom-dropdown .Select-option {
    padding: 8px 12px; /* Adjust option padding */
}

.custom-dropdown .Select-arrow-zone {
    padding: 0 12px; /* Adjust arrow zone padding */
}
.checklist-2col {
    column-count: 2;
}
.checklist-3col {
    column-count: 3;
}

.ag-theme-alpine.blue {
    
    --ag-header-foreground-color: white;
    --ag-header-background-color: #007AFF;
    --ag-header-cell-hover-background-color: rgb(7, 22, 153);
    --ag-header-cell-moving-background-color: rgb(7, 22, 153);
    /*--ag-header-height: 80px;*/
    --ag-grid-size: 3px;
    --ag-font-size: 14px;
    --ag-font-family: monospace;
}

/*
.ag-theme-alpine.blue .ag-header {
    font-family: cursive;
}
.ag-theme-alpine.blue .ag-header-group-cell {
    font-size: 12px;
}
.ag-theme-alpine.blue .ag-header-cell {
    fontWeight: bold;
}
*/



.dropdown-js-1 {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
}
.dropdown-js-1 .Select-control {
    border: none;
}
.dropdown-js-1 .Select-menu-outer {
    background-color: #fff;
    border: 1px solid #ccc;
}
.dropdown-js-1 .Select-option {
    color: #333;
}
.dropdown-js-1 .Select-placeholder {
    border: 1px solid gray;
    border-radius: 4px;
    color:red;
    background-color: #2b2b2b;
    cursor: pointer;
}


/* ---------------------------------- */
/* dropdown-101                       */
/* ---------------------------------- */

/* Style for the dropdown control 
.dropdown-101 .Select-control {
    background-color: rgb(25, 25, 25) !important;
    color:white;
}
*/

/* Style for the currently selected value */
.dropdown-101 .Select-value-label {
    color: black !important;
}

/* Style for the dropdown menu outer */
.dropdown-101 .Select-menu-outer {
    background-color: rgb(25, 25, 25);
    color: white;
}

.dropdown-101 .VirtualizedSelectOption {
    background-color: white;
    color: black;
}
/* Style for the selected option */
.dropdown-101 .VirtualizedSelectFocusedOption {
    background-color:  #007AFF;
    color: white;
}

/* ---------------------------------- */
/* dropdown-101                       */
/* ---------------------------------- */




.dropdownAsset-up .VirtualizedSelectOption {
    color: blue !important;
}
.dropdownAsset-up .Select-value-label {
    color: black !important;
}


.dropdownAsset-down .Select-value-label {
    color: red !important;
}
  

.verticalAgHeader .ag-header-cell-label {
    /*Necessary to allow for text to grow vertically*/
    height: 100%;
    padding: 0 !important;
}

.verticalAgHeader .ag-header-group-cell {
    font-size: 50px;
}

.verticalAgHeader .ag-header-cell-label .ag-header-cell-text {
    /*Force the width corresponding at how much width
      we need once the text is laid out vertically*/
    width: 55px;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    line-height: 2em;
    margin-top: 60px;
}

/* ---------------------------------- */
/* pivotal bridge root layout              */
/* ---------------------*/

.pivotal-bridge {
    margin: 0.5% 2%;
}

.pivotal-bridge-fact-sheet {
    margin: 0;
}

/* Snapshots - Report              */
/* ---------------------------------- */
.ddk-container .ddk-report {
    background-color: #F1F2F4;
    padding: 0px 0px !important;
}

.ddk-container.ddk-container--print-context {
    min-height: 0 !important;
}

@media print {
    #page-footer,
    footer#page-footer {
        display: none !important;
        visibility: hidden !important;
        position: absolute !important;
        overflow: hidden !important;
    }

    /* Additional targeting for any Dash-generated footer with page-footer id */
    [data-dash-is-loading] #page-footer,
    .dash-spinner-container #page-footer,
    #react-entry-point #page-footer {
        display: none !important;
    }
}


/* ---------------------------------- */
/* dmc-tabs-api - API              */
/* ---------------------------------- */

.dmc-tabs-api {
    position: relative;
    background-color: #F1F2F4;    
    color: #1f78b4;
    border: none;  /* Remove all borders first */
    border-bottom: 1px solid #e2e2e2;  /* Add only bottom border */
  
    &[data-active] {
      z-index: 1;
      border-color: #e2e2e2;
      color: #606060;
      background-color: #F9F9F9;
      border-radius: 5px 5px 0px 0px;
      border: 1px solid #e2e2e2;
      border-bottom: none;
  
      /* &:hover {
        background-color: var(--mantine-color-blue-filled-hover);
      } */
    }
  }


/* ---------------------------------- */
/* dmc-data-explorer-tabs - API      */
/* ---------------------------------- */

.dmc-data-explorer-tabs {
    position: relative;
    /* background-color: #F9F9F9;     */
    color: #1f78b4;
    border: none;  /* Remove all borders first */
    border-bottom: 1px solid #e2e2e2;  /* Add only bottom border */    
  
    &[data-active] {
      z-index: 1;
      border-color: #e2e2e2;
      color: #606060;
      background-color: #F2F2F2;
      border-radius: 5px 5px 0px 0px;
      border: 1px solid #e2e2e2;
      border-bottom: none;
  
      /* &:hover {
        background-color: var(--mantine-color-blue-filled-hover);
      } */
    }
  }

  /* ---------------------------------- */
/* dmc-tabs-factsheet - Factsheet      */
/* ---------------------------------- */

.dmc-tabs-factsheet {
    position: relative;
    background-color: #F1F2F4;
    color: #333333;
    border: none;  /* Remove all borders first */
    border-bottom: 1px solid #e2e2e2;  /* Add only bottom border */

    &[data-active] {
      z-index: 1;
      border-color: #e2e2e2;
      color: #333333;
      background-color: #F9F9F9;
      border-radius: 5px 5px 0px 0px;
      border: 1px solid #e2e2e2;
      border-bottom: none;

      /* &:hover {
        background-color: var(--mantine-color-blue-filled-hover);
      } */
    }
  }

/* ---------------------------------- */
/* card-controls-padding              */
/* ---------------------------------- */

.card-controls-padding {
    padding-top: 15px;
}

/* ---------------------------------- */
/* card-header-margin                 */
/* ---------------------------------- */

.card-header-margin {
    margin-bottom: 15px !important;
}

/* ---------------------------------- */
/* DMC Cards inherit DDK Card styles  */
/* Force DMC cards to match DDK cards */
/* ---------------------------------- */

/* DDK cards follow theme.py configuration */
.ddk-container .card {
    box-shadow: 0px;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background-color: var(--card_background_color, #FFFFFF) !important;
}

/* Force DMC/Mantine cards to inherit DDK theme variables */
.mantine-Card-root,
.mantine-Paper-root,
div[class*="mantine-Card"],
div[class*="mantine-Paper"] {
    box-shadow: 0px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 10px !important;
    background-color: var(--card_background_color, #FFFFFF) !important;
    padding: var(--card_padding, 16px) !important;
}

/* Ensure card sections don't override */
.mantine-Card-section {
    background-color: transparent !important;
}

/* Factsheet graph cards - no border radius */
/* Must come after .ddk-container .card rule to override */
.ddk-container .card.factsheet-graph-card,
.factsheet-graph-card.card,
.factsheet-graph-card {
    border-radius: 0px !important;
}

/* Override red scroll shadow on ddk pages with gray */
.ddk-report:not(.ddk-report--print-context) .ddk-page--inner {
    background:
        linear-gradient(white 30%, rgba(255,255,255,0)),
        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.1), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.1), rgba(0,0,0,0)) 0 100% !important;
    background-repeat: no-repeat !important;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px !important;
    background-attachment: local, local, scroll, scroll !important;
}