/*********************************************************************************
**********************************************************************************
*** In many
**********************************************************************************
**********************************************************************************/

button {margin-top: 20px; margin-left: 20px; padding: 10px 10px;background-color: #007bff;color: white;border: none;cursor: pointer;font-size: 16px;}
button:hover {background-color: #0056b3;}
.figure-download-btn {margin-top: 10px; margin-left: 10px; padding: 6px 10px; font-size: 13px; border-radius: 4px;}


.no-data-message-box {display: flex; justify-content:center;align-items:center; height: 200px; background-color: #f9f9f9; border: 1px solid #ccc ; margin:10px;}
.no-data-message-text {font-size: 16px; font-weight: bold; color:#333;margin:10px;}

/*********************************************************************************
**********************************************************************************
*** Decomposition figure only 
**********************************************************************************
**********************************************************************************/

.tooltip {
    position: absolute;
    text-align: center;
    padding: 6px;
    background: lightgray;
    border-radius: 4px;
    pointer-events: none;
}

/*********************************************************************************
**********************************************************************************
*** Line Figures only
**********************************************************************************
**********************************************************************************/

.line-year-slider {justify-content: space-between; margin: 60px 20px 10px 20px;}
.noUi-tooltip {font-size: 16px; font-family: Arial, sans-serif;}

@media (max-width: 600px) {
    .noUi-tooltip {font-size: 0.8em;} 
}


/*********************************************************************************
**********************************************************************************
*** Used in selection file only
**********************************************************************************
**********************************************************************************/

.countries-heading {font-weight: bold;font-size: 1.2em;margin-top: 10px;}
li {line-height: 1.5;}
ul {list-style-type: none;}

.node--internal > ul {padding-left: 5px;}
.node {cursor: pointer;}
.node--leaf {font-weight: normal;}
.node--internal {font-weight: bold;}
.node-checkbox {margin-left: 10px;}

.variable-filters {margin: 10px 0 15px 0; padding: 10px; background: #f8fbff; border: 1px solid #d9e7f4; border-radius: 6px;}
.variable-filters-title {font-size: 0.95em; font-weight: bold; margin-bottom: 8px;}
.variable-filters-toggle {cursor: pointer; user-select: none;}
.variable-filters-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px;}
.variable-filter-item {display: grid; grid-template-columns: 18px 1fr; align-items: start; column-gap: 8px; margin: 0; font-weight: normal;}
.variable-filter-item input {margin: 0; margin-top: 3px;}
.variable-filter-item input:disabled + span {color: #8f8f8f;}
.heading1-label {display: inline-block; margin: 8px 0 4px 0; font-weight: bold;}

.multi-outcome-filters {margin: 10px 0 16px 0; padding: 10px; background: #f8fbff; border: 1px solid #d9e7f4; border-radius: 6px;}
.multi-outcome-filters-title {font-size: 0.95em; font-weight: bold; margin-bottom: 8px;}
.multi-outcome-filters-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px;}
.multi-outcome-filter-item {display: grid; grid-template-columns: 18px 1fr; align-items: start; column-gap: 8px; margin: 0;}
.multi-outcome-filter-item input {margin: 0; margin-top: 3px;}
.multi-outcome-filter-item input:disabled + span {color: #8f8f8f;}
.multi-outcome-slider-wrap {margin: 24px 0 14px 0; padding: 0 10px;}
.multi-outcome-slider-title {font-size: 0.95em; font-weight: bold; margin-bottom: 18px;}
.multi-outcome-slider-wrap .line-year-slider {margin: 34px 6px 8px 6px;}
.multi-outcome-chart {padding: 34px 0; border-top: 1px solid #e6e6e6; margin-bottom: 22px;}
.multi-outcome-title {margin: 0 0 8px 0; font-size: 1em;}
.multi-outcome-legend-svg {margin-top: 8px; margin-left: 10px;}
.star-plot-subtitle {margin: 4px 0 8px 10px; color: #555; font-size: 0.9em;}
.star-legend-svg {display: block; margin-top: -40px; margin-left: auto; margin-right: auto;}
.star-axis-label {font-size: 14px; font-weight: bold;}
.star-axis-subtitle {font-size: 11px; fill: #666;}
.star-line-chart-svg {display: block; max-width: 100%;}
.star-line-outcome-label {font-size: 13px; font-weight: bold; fill: #222;}
.star-line-caption {font-size: 10px; fill: #666;}
.traditional-star-controls {margin: 10px 10px 0 10px; padding: 8px 10px; background: #f8fbff; border: 1px solid #d9e7f4; border-radius: 6px;}
.traditional-star-toggle {display: inline-flex; align-items: center; gap: 8px; font-size: 0.95em; font-weight: bold;}
.traditional-star-toggle input {margin: 0;}
.traditional-star-scale-note {margin: 4px 0 0 26px; color: #555; font-size: 0.85em;}
.traditional-star-wrapper {padding-top: 22px; padding-bottom: 12px;}
.traditional-star-wrapper > svg:first-of-type {display: block; margin-bottom: -24px;}
.traditional-star-legend-svg {display: block; margin: -18px auto 0 auto;}
.traditional-star-wrapper .figure-download-btn {margin-top: 4px;}
.star-line-chart-wrapper {padding-top: 22px; padding-bottom: 12px;}
.star-line-chart-wrapper .figure-download-btn {margin-top: 4px;}

@media (max-width: 480px) {
    .star-legend-svg {margin-top: -10px;}
    .star-chart-wrapper {overflow-x: auto; -webkit-overflow-scrolling: touch;}
    .star-chart-wrapper svg {display: block;}
    .traditional-star-scale-note {margin-left: 0;}
}

.wimort-location-control {padding: 8px 10px; border: 1px solid #d9e7f4; border-radius: 6px; background: #fff;}
.wimort-location-title {font-weight: bold; margin-bottom: 6px;}
.wimort-years-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px;}
.wimort-year-item {display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; margin: 0;}
.wimort-year-item input {margin: 0;}
.wimort-year-chart {margin-bottom: 22px;}
.wimort-year-title {margin: 8px 0 8px 10px; font-size: 0.95em;}
.wimort-legend {display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 6px 0 8px 10px;}
.wimort-legend-item {display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em;}
.wimort-legend-swatch {width: 14px; height: 14px; border-radius: 2px; display: inline-block;}

@media (max-width: 700px) {
    .wimort-years-list {grid-template-columns: repeat(2, minmax(0, 1fr));}
}


/*********************************************************************************
**********************************************************************************
*** Index only / script_main.js
**********************************************************************************
**********************************************************************************/

.figure-note { font-size: 16px; text-align: left; margin-bottom: 20px; margin-top: 20px; margin-left: 10px; width: 90%;}
.figure-placeholder {font-size: 15px; color: #555; margin: 8px 10px 12px 10px; font-style: italic;}
.references-container {margin: 0 10px 12px 10px;}
.references-pre {
    margin: 0;
    padding: 10px 12px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    max-height: 900px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.4;
}
.references-markdown {
    padding: 8px 12px;
    background: #f8f8f8;
    border: 1px solid #ddd;
}
.references-markdown h3 {
    margin: 28px 0 12px 0;
    font-size: 1.05em;
}
.references-markdown h4 {
    margin: 10px 0 6px 0;
    font-size: 1em;
}
.references-markdown p {
    margin: 6px 0;
}
.references-markdown ul {
    margin: 0 0 8px 0;
    padding-left: 20px;
    list-style-type: disc;
}
.references-markdown li {
    line-height: 1.45;
    margin: 2px 0;
}

body {font-family: Arial, sans-serif; margin: 20px; display: flex; flex-direction: column; align-items: center; line-height: 1.5; font-size: 18px; padding-bottom: 100px;}

.header {display: flex; align-items: center; margin: 0px 0;}

.logo-image {max-width: 250px; height: auto; border-radius: 0; margin-right: 20px;}

h1 {font-size: 1.4em; margin:  20px 0 0px 0px;text-align: center; }
h1.sect {font-size: 1.4em; text-align: left; margin:  0px 0 0px 50px;}
h2 {font-size: 1.0em; cursor: pointer; background-color: #f0f0f0; padding: 10px; margin: 20px; border-radius: 5px; transition: background-color 0.2s;}
h2:hover  {background-color: #e0e0e0;}

hr.top {border: none; border-top: 2px solid #000; margin: 60px 0px 5px 40px;}
hr.bottom {border: none; border-top: 2px solid #000; margin: 0px 0px 5px 40px;}

.container  {max-width: 800px; width: 100%; padding: 20px; box-sizing: border-box;}

.content {max-height: 0; overflow: hidden; transition: max-height 0.1s ease-in-out, padding 0.1s ease-in-out;}
.active + .content {max-height: 1000px; padding: 0px;}

/* .decomp-container {padding-left: 5px; margin:0px;} */

.expandable, .subheading {cursor: pointer; background-color: #cfeecd; color: #000000; padding: 10px; margin: 10px 0; border-radius: 0; transition: background-color 0.2s ease-out;}
.expandable:hover {background-color: #e0e0e0;}

#backToMenu {display: none; position: fixed; bottom: 10px; left: 10px; background-color: #007bff; color: white; border: none; padding: 10px; cursor: pointer; border-radius: 5px;}
#backToMenu:hover {background-color: #0056b3;}

.section {margin-bottom: 20px;}

.checkboxes label {margin-left: 20px; margin-right: 10px;}
.variable-filters label {margin-left: 0; margin-right: 0;}

@media (max-width: 600px) {

    body {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 1px;
        padding-right: 2px;
    }


 .container {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 1px;
    padding-right: 1px;
} 
}