* {
    box-sizing: border-box;
}

/* html,
body */

html,
body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    /* width: 100vh; */
    /* height: 100vh;  */
    --xRef-badge-size: 30px;
    /* background-color: #4d3617; */
    /* background-color: #605a5a; */
    /* background-color: rgb(233, 144, 137); */

    /* overflow: hidden;
    scrollbar-gutter: stable; */
}

body, input, select, tspan {
    font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
    line-height: 1.6;
}

tspan {
    display: flex;
    text-wrap: wrap;
}

body {
    margin: 0;
    display: flex;
    /* background: url('img/Backgrounds/bg_aoe2_hd_paper.jpg') repeat; */
    font-size: 10pt;
}

#techtree {
    /* background: url('img/Backgrounds/bg_aoe2_hd_paper.jpg') repeat local; */
    /* display: flex;
    flex-direction: row; */
    max-height: 100%;
}

/* a, a:hover, a:visited, a:active {
    color: #4d3617;
}

.credits,
.credits a {
    font-size: 8pt;
    color: #4d3617;
} */



.credits p {
    margin-bottom: 0;
}

#container {
    min-width: 100%;
    min-height: 100vh;
    /* max-height: fit-content; */
    min-height: -webkit-fill-available;
    min-height: fill-available;
    display: flex;
    flex-direction: column;
}

#navigation {
    padding-left: 1rem;
}

#helptext, #helptext_SP  {
    position: absolute;
    display: none;
    width: 300px;
    /* background-color: #eee; */
    background-color: #241f38;
    border: 2px solid #bbb;
    padding: 0.4rem;
    font-size: 10pt;
    color: #d1cfd9;
}

#helptext, #helptext_SP {
    z-index: 999;
}

#helptext p, #helptext_SP p {
    margin-top: 0;
    margin-bottom: 8px;
}

#helptext h3, #helptext_SP h3 {
    font-family: sans-serif;
    font-size: 9pt;
    text-transform: uppercase;
    color: #4d3617;
    margin: 2px 10px 0 0;
    float: left;
}

#helptext__x_ref__container, #helptext__x_ref__container {
    /* There are 37 civs, 4x8+5 makes the badges fit into a square. */
    max-width: calc(var(--xRef-badge-size) * 8);
    margin: auto;
    padding-top: 0.2rem;
}

/* Style for helptext Cross-Reference buttons */
#helptext #helptext__x_ref div button, #helptext_SP #helptext__x_ref_SP div button {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* Style for helptext Cross-Reference image badges */
#helptext #helptext__x_ref div button img, #helptext_SP #helptext__x_ref_SP div button img {
    width: var(--xRef-badge-size);
    height: var(--xRef-badge-size);
}

#helptext__x_ref h3, #helptext__x_ref_SP h3 {
    float: none;
}

#helptext summary, #helptext_SP summary {
    font-family: sans-serif;
    font-size: 8pt;
    color: #4d3617;
    text-transform: uppercase;
    cursor: pointer;
}

#wrapper {
    /* min-width: 100%; */
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-x: scroll;
    /* overflow-y: auto; */
    overflow-y: hidden;

    /* -webkit-overflow-scrolling: touch; */
    /* -ms-overflow-style: -ms-autohiding-scrollbar; */
    /* min-height: 100vh;
    max-height: 100vh; */
    /* overflow: hidden; */
    /* scrollbar-gutter: stable; */

}

#major_god_selection_panel__sticky {
    /* min-width: 500px; */
    /* min-width: 347.68px; /* need to calc dynamically in js */
    /* min-width: 300px; 300px */
    /* position: fixed; */
    position: sticky;
    left: 0;
    /* background-color: #3f4806; */
    /* z-index: 999; */
    z-index: 998;
    /* overflow-y: scroll; */
    min-height: 100%;
    /* overflow-y: scroll; */
    /* opacity: 0.1; */

    /* border-right: 6px solid #4d3617;
    border-right: none; */
    /* width: 20rem; */
    /* flex: 0 0 auto;
    display: flex;
    flex-direction: column; */
    /* padding: 1rem; */
    /* overflow: auto; */
    /* height: 100vh; 
    overflow-y: scroll; */
    height: 100vh;
    max-height: 100vh;

    display: flex;
    flex-direction: column;
    
}

#major_god_selection_panel__sticky__inner {
    /* height: 100%; */
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    /* overflow-y: auto; */
    overflow-y: hidden;
    /* overflow-x: hidden;  */
    /* overflow-x: scroll; */
}

/* scroll bar behavior for major_god_selection_panel__sticky__inner doesn't work */

/* @media (min-height: 421px) {
    #major_god_selection_panel__sticky__inner {
    height: 100%;
    width: 100%;
    }
}

@media (max-height: 420px) {
    #major_god_selection_panel__sticky__inner {
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    }
} */

#root_MG {
    /* overflow-y: scroll; */
    height: 100vh;
    max-height: 100vh;
}

#side_panel {
    /* min-width: 1043.04px; */
    /* margin-left: 347.68px; */ /*was for when mg_selection panel was set to position: fixed;  */
    background-color: rgb(51, 51, 92);
    position: left;
    display: flex;
    flex-direction: row;
    /* width: 967.93px; /* need to calc dynamically in js */
    height: 100%;
}

#side_panel__major_god_description {
    /* background-color: #7c78e4; */
    /* width: 456.48px; 47.16% */
   /* width: 40%; /* 47.16%, 35%, 39.8% 35% */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* color: #d1cfd9; */
    /* min-height: 100%; */
}

@media (max-height: 475px) {
    #side_panel__major_god_description {
        font-size: 7pt;
    }
}

#side_panel__major_god_description__headings {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#side_panel__major_god_description__headings h1 {
   margin-bottom: -5px; 
}

#side_panel__major_god_description__artwork {
    /* background-color: darkgreen; */
    /* margin-top: -50px; */
}

#side_panel__major_god_description__headings h3 {
   margin-top: -5px; 
}

#side_panel__major_god_description__bonus-details {
    width: 100%;
    overflow-y: scroll;
    padding-left: 2.5%;
    padding-right: 2.5%;
    
}

#side_panel__major_god_description__bonus-details p{
    margin-top: 2.5px;
    /* margin-bottom: 2.5px; */
}

/* #side_panel__major_god_description__bonus-details  p:first-of-type{
    margin-top: 2.5px;
    margin-bottom: 15px;
} */

/* 52.8 + 35 = 87.8 
    60.2 + 39.8 = 100
    65 + 35 = 100
*/

#side_panel__minor_gods {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /* width: 511.45px;  */
    width: 60%; /* 53.84 60.2 65 */
    /* 52.84 */
    /* margin-left: 804.159px; */
    min-height: 100%;
}

#side_panel__minor_gods__age_icons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    height: 100%;
    width: 15%; /* 9.5% */
    /* margin-top: 2.5%; */
    /* background-color: #100c81; */
}

#side_panel__minor_gods__age_icon {
    
}

#side_panel__minor_gods__details {
    height: 100%;
    width: 85%;
    /* background-color: #8f11a8; */
    position: relative;
}

#techtree {
    /* border-left: 6px solid #4d3617; */
    flex: 1 0 auto;
    /* position: relative; */
    position: relative;
    /* width: calc(100vw - 22rem - 20px); */
    /* overflow-x: scroll; */
    /* min-height: 100%;
    /* height: 100%; */
    height: 100vh;
    min-height: 100vh;
    overflow-y: hidden;

    width: auto;
    overflow-x: auto;

}

#metainfo {
    border-right: 6px solid #4d3617;
    border-right: none;
    width: 20rem;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    overflow: auto;
    height: 100vh;
}

#civselect {
    font-size: 18px;
    font-weight: bold;
    background-color: #72604a;
    flex: 1 0 auto;
    margin-right: 1rem;
    color: white;
    text-shadow: #000000 -3px 2px;
    box-shadow: inset 0 2px #3f4806, inset 2px -2px #768141, inset -2px 0 #768141;
    height: 36px;
    padding: 5px;
}

#civselect option {
    text-shadow: none;
}

#civselect:focus {
    outline: none;
}

#civinfo {
    flex: 1 0 auto;
    font-size: 10pt;
}

#civtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#thanks {
    flex: 0 0 auto;
}

hr {
    overflow: visible;
    /* For IE */
    height: 30px;
    margin-bottom: -15px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
}

hr:before {
    /* Not really supposed to work, but does */
    display: block;
    content: '';
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
}

#buildingindex__table {
    margin: auto;
    border: none;
    border-spacing: 5px;
}

#key__table {
    border: none;
    border-spacing: 10px;
}

.locale-switcher {
    position: relative;
    display: inline-block;
}

.locale-switcher:after {
    content: '▾';
    right: 8px;
    top: 2px;
    position: absolute;
    pointer-events: none;
    font-family: Arial, sans-serif;
}

.locale-switcher select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 320px;
    float: right;
    margin: 0;
    padding: 0 20px 0 3px;
    background-color: rgba(0, 0, 0, 0.15);
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 0;
    word-break: normal;
}

.locale-switcher:hover select {
    background-color: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(0, 0, 0, 0.30);
}

.locale-switcher select:focus {
    outline: none;
}

#navigation {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.node__overlay {
    fill: transparent;
    cursor: pointer;
}

.node.is-highlight .node__overlay {
    stroke: #fff;
    stroke-width: 3px;
}

.node.major_god_selector_button.is-highlight-mg-panel {
    stroke: #fff;
    /* stroke: #1a1919; */
    stroke-width: 6px;
}

.is-highlight-mg-panel {
    stroke: #fff;
    stroke-width: 6px;
}

.xRef__badge {
    cursor: pointer;
}

.connection {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
}

.connection.is-highlight {
    stroke: #fff;
    stroke-width: 3px;
}

@media (max-width: 900px) {
    #techtree {
        width: auto;
        overflow-x: auto;
    }
}

a.inverted {
    background-color: rgba(50,50,50,.5);
    color: #ccc;
    padding: .2em;
}

.helptext__heading,
.helptext__upgrade_cost {
    line-height: 1;
}

.cost {
    white-space: nowrap;
    padding-left: .25em;
}
.cost:after {
    vertical-align: -40%;
    padding-left: 2px;
    margin-bottom: -2px;
}
.cost.wood:after {
    /* content: url("img/stats_icons/wood_icon.png"); */
    background-image: url("img/stats_icons/wood_icon.png");
    background-size: 24px 14.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 24px;
    height: 14.5px;
    content: "";
}
.cost.food:after {
    /* content: url("img/stats_icons/food_icon.png"); */
    /* height: 50%;
    width: 50%; */
    background-image: url("img/stats_icons/food_icon.png");
    background-size: 20px 18.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 20px;
    height: 18.5px;
    /* content: url("img/stats_icons/food_icon.png"); */
    content: "";
}

/* .cost.food:after {
    width: 30px;
    height: 30px;
    background-size: contain;
} */

.cost.gold:after {
    /* content: url("img/stats_icons/gold_icon.png"); */
    background-image: url("img/stats_icons/gold_icon.png");
    background-size: 18.5px 17.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 18.5px;
    height: 17.5px;
    content: "";
}

.cost.favor:after {
    /* content: url("img/stats_icons/favor_icon.png"); */
    background-image: url("img/stats_icons/favor_icon.png");
    background-size: 18px 18px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 18px;
    height: 18px;
    content: "";
}

.cost.pop:after {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/population_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.cost.training_time:after {
    /* content: url("img/stats_icons/time_icon.png"); */
    background-image: url("img/stats_icons/time_icon.png");
    background-size: 18.5px 24px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 18.5px;
    height: 24px;
    content: "";
}

.stat.hitpoints:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/hitpoints_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.hack_armor:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/hack_armor_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.pierce_armor:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/pierce_armor_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.crush_armor:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/crush_armor_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.velocity:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/velocity_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

/* .stat.attack_type:after {
    background-image: url("img/stats_icons/_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; 
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
} */

.stat.hack_damage:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/hack_damage_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.pierce_damage:after {
    background-image: url("img/stats_icons/pierce_damage_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; 
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.divine_damage:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/divine_damage_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.crush_damage:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/crush_damage_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.rate_of_fire:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/attack_interval_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_myth_unit:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_myth_unit_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_mythunit:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_myth_unit_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_hero:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_hero_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_infantry:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_infantry_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_building:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_building_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_ship:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_ship_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_cavalry:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_cavalry_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_archer:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_archer_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_villager:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_villager_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_archer_ship:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_archer_ship_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_archership:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_archer_ship_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_tower:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_tower_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_ox_cart:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_ox_cart_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.bonus_multiplier_titan:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/bonus_multiplier_titan_icon.webp");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.stat.range:before {
    /* content: url("img/stats_icons/population_icon.png"); */
    background-image: url("img/stats_icons/range_icon.png");
    background-size: 21.5px 20.5px;
    background-repeat: no-repeat; /* Prevent tiling */
    display: inline-block;
    width: 21.5px;
    height: 20.5px;
    content: "";
}

.selected__major_god {
    border: 10px solid rgb(220, 218, 218);
}

/* block before first */

/* #major_god_selection_panel__sticky {
    position: sticky;
    top: 0;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding-bottom: 40px !important; /* Buffer for the bottom items */ /*
    display: block;
}

#root_MG {
    height: 445px !important; /* Matches content height + small buffer */ /*
    display: block;
} */



/* first block of style from browser addition */

#major_god_selection_panel__sticky {
    position: sticky;
    top: 0;
    
    /* 1. Prevent width collapse */
    width: 220px;          /* Match your desired panel width */
    min-width: 220px;
    flex-shrink: 0;        /* Prevents flexbox from squishing it */
    
    /* 2. Scrollbar settings */
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    
    display: block;
    z-index: 998;
}

#root_MG {
    width: 100%;           /* Ensure SVG fills the 220px width */
    /* height: 445px;         The height we calculated earlier */
    height: 100vh;
    display: block;
}

/* second block of style from browser addition */

/* related resource: style.css:164:1 */
#major_god_selection_panel__sticky { /* the element was div#major_god_selection_panel__sticky */
  /* max-height: 95vh; */
  /* max-height: 120vh; */
  max-height: 100vh;
  /* height: 100%; */
  /* max-height: 100%; */
  /* overflow-y: visible; */
  display: block;
  padding-bottom: 10px;  /* intial suggestion padding-bottom: 50px; */
}

/* related resource: style.css:221:1 */
#root_MG { /* the element was svg#root_MG */
  /* height: 444px; */
  height: 100vh;
  /* height: 100%; */
  /* min-height: 100%; */
  /* height: auto; */
  display: block;
}

/* my troubleshooting additions */

#major_god_selection_panel__sticky__inner {
    overflow-x: hidden;
    height: 100vh;
}

/* rect height is too 339.187 px which is too small (stick__inner and rootMG are h=363px though stick is h=313px*/
/* (treeMG.height = 339.187 = window.innerHeight - 2 * (window.innerHeight * 0.0328), where 0.0328 is 20/big screen window height, 20 is tree.padding */


/* colour changes */

body {
    
    /* background-color: #4d3617; */
    /* background-color: #605a5a; */
    /* background-color: rgb(233, 144, 137); */
    background-color: none;

}

#major_god_selection_panel__sticky {
    /* background-color: #3f4806; */
    /* background-color: #716e6b; */
    /* background: url('img/backgrounds/retold-background-sample-7.png') repeat local; */
}

/* sample-4 is okay */

/* sample 6-1 is good on horz line still has some vert line, but they look less harsh */

#techtree { 
    /* background: url('img/backgrounds/retold-background-sample-6-1.PNG') repeat local; */
    /* background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local; */
    /* border-left: 6px solid #4d3617; */
    /* border-left: 6px solid #0a0a0a; */
    border-left: -10px;
}

.major_god_selection_panel__sticky_darkColorScheme {
    /* background-color: #3f4806; */
    /* background-color: #716e6b; */
    background: url('img/backgrounds/retold-background-sample-7.png') repeat local;
}

.major_god_selection_panel__sticky_lightColorScheme { 
    background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local;
    color: #101010;
}

.side_panel__major_god_description_darkColorScheme {
    /* background-color: #7c78e4; */
    /* background-color: #7e7d93; */
    color: #d1cfd9;
    background: url('img/backgrounds/retold-background-sample-7-3.png') repeat local;
    
}

.side_panel__major_god_description_lightColorScheme {
    /* background-color: #7c78e4; */
    /* background-color: #7e7d93; */
    color: #101010;
    background: url('img/backgrounds/bg_aoe2_hd_paper_darkened.jpg') repeat local;
    
}

.side_panel__minor_gods__age_icons_darkColorScheme {
    /* background-color: #100c81; */
    background: url('img/backgrounds/retold-background-sample-7.png') repeat local;
}

#major_god_selection_panel__sticky_credits > p {
    padding-left: 15px;
    padding-right: 15px;
}

.major_god_selection_panel__sticky_credits_darkColorScheme {
    color: #d1cfd9;
}

.major_god_selection_panel__sticky_credits_lightColorScheme {
    color: #101010;
}

.major_god_selection_panel__sticky_credits_darkColorScheme a, .major_god_selection_panel__sticky_credits_darkColorScheme a:hover, .major_god_selection_panel__sticky_credits_darkColorScheme a:visited, .major_god_selection_panel__sticky_credits_darkColorScheme a:active {
    color: #7669a6;
}

.major_god_selection_panel__sticky_credits_lightColorScheme a, .major_god_selection_panel__sticky_credits_lightColorScheme a:hover, .major_god_selection_panel__sticky_credits_lightColorScheme a:visited, .major_god_selection_panel__sticky_credits_lightColorScheme a:active {
    color: #4d3617;
}

.side_panel__minor_gods__age_icons_lightColorScheme {
    /* background-color: #100c81; */
    background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local;
}

.side_panel__minor_gods__details_darkColorScheme {
    /* background-color: #8f11a8; */
    background: url('img/backgrounds/retold-background-sample-7.png') repeat local;
    /* background-color: #8f11a8; */
    border-right: 5px;
}


.side_panel__minor_gods__details_lightColorScheme {
    /* background-color: #8f11a8; */
    background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local;;
    /* background-color: #8f11a8; */
    border-right: 5px;
}

.side_panel__minor_gods__darkColorScheme {
    /* background-color: #8f11a8; */
    background: url('img/backgrounds/retold-background-sample-7.png') repeat local;
    /* background-color: #8f11a8; */
    border-right: 5px;
}


.side_panel__minor_gods__lightColorScheme {
    /* background-color: #8f11a8; */
    background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local;;
    /* background-color: #8f11a8; */
    border-right: 5px;
}

.age_seperation_line_minor_God_Tree_darkColorScheme {
    stroke: #515052;
}

.age_seperation_line_minor_God_Tree_lightColorScheme {
    stroke: #e1b984;
    /* stroke: #5fe472; */
}

.techtree_darkColorScheme { 
    background: url('img/backgrounds/retold-background-sample-6-1.PNG') repeat local;
}

.techtree_lightColorScheme { 
    background: url('img/backgrounds/bg_aoe2_hd_paper.jpg') repeat local;
    
}

#side_panel__minor_gods__details {
    /* background-color: #8f11a8; */
    /* background: url('img/backgrounds/retold-background-sample-7.png') repeat local; */
    /* background-color: #8f11a8; */
    border-right: 5px;
}

#toggle-container__fixed {
    position: fixed;
    top: 0;
    right: 0;
    width: 75px;
    height: 60px;
    z-index: 1000;
    /* background-color: rgb(143, 17, 168); */
    /* opacity: 0.1; */
    /* background: rgba(143, 17, 168, 0.4);  */
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#darkmode-toggle-label {
    width: 50px;
    height: 20px;
    position: relative;
    display: block;
    /* FIXED: Uses a 135-degree diagonal gradient for the accurate metallic slope */
    background: linear-gradient(135deg, #4b4b4b 0%, #2b2b2b 60%, #1a1a1a 100%);
    border-radius: 20px;
    /* FIXED: Deep, wide inner shadow mixed with a subtle bottom outline glow */
    box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.85), 
                0px 1px 1px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#darkmode-toggle-label:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 1px;
    left: 1px;
    /* FIXED: Matches the exact mid-grey flat matte finish of the original knob */
    background: #525252;
    border-radius: 18px; 
    /* Soft drop shadow so it melts perfectly into the track's right edge shadow */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
}

input {
    width: 0;
    height: 0;
    visibility: hidden;
}

input:checked + #darkmode-toggle-label {
    /* Back to your original light theme track settings */
    background: #ebebeb;
    box-shadow: inset 0px 5px 15px rgba(0,0,0,0.2), inset 0px -5px 15px rgba(255,255,255,0.4);
}

input:checked + #darkmode-toggle-label:after {
    left: 48px;
    transform: translateX(-100%);
    /* Back to your original sun theme knob settings */
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

#darkmode-toggle-label, #darkmode-toggle-label:after {
    transition: 0.3s;
}

#darkmode-toggle-label:active:after {
    width: 24px; 
}

.font-color-lightColorScheme {
    /* color: rgb(209, 207, 217); */
    fill: rgb(209, 207, 217);
}

.font-color-darkColorScheme {
    /* color: rgb(16, 16, 16); */
    fill: rgb(16, 16, 16);
}



#darkmode-toggle-label svg {
  position: absolute;
  width: 12px;
  top:4px;
  z-index: 100;
}
#darkmode-toggle-label svg.moon {
  left:4px;
  fill:#fff;
  transition: 0.3s;
}
#darkmode-toggle-label svg.sun {
  left:34px;
  fill:#7e7e7e;
  transition: 0.3s;
}
#darkmode-toggle-label:checked + label svg.moon {
  fill:#7e7e7e;
}
#darkmode-toggle-label:checked + label svg.sun {
  fill:#fff;
}


#major_god_selection_panel__sticky_credits > p {
    padding-left: 15px;
    padding-right: 15px;
}


/* makes browser scroll bars match chrome color theme */
:root {
  /* color-scheme: light dark; */
  color-scheme: dark;
}

#helptext {
    /* overflow-y: auto; */
    max-height: 100vh;
    /* max-height: 95%; */
    overflow-y: scroll;
}