@import url("https://fonts.googleapis.com/css?family=Montserrat|Roboto|Lobster|Oswald|Raleway|Inter|Open+Sans|Inconsolata|Shadows+Into+Light|Josefin+Sans:ital,wght@0,100;0,200;0,400;0,500;1,100;1,400;1,500&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
@font-face {font-family: bitter; src: url(fonts/Bitter-Regular.otf);}
@font-face {font-family:concord ;src: url(fonts/Concord\ W00\ Light.ttf);}
@font-face {font-family:dd_logo ;src: url(fonts/DwarvenAxe\ BB\ W00\ Regular.ttf);}



/*Blanket Styling*/
*{box-sizing: border-box; background-repeat: no-repeat;}
body{margin: 0; padding: 0; background-color: black; cursor: url(images/dd_cursor.png), auto; overflow: hidden;}
a{text-decoration: none; color: black;}
ul{list-style-type: none; margin:0; padding: 0;}
button{background: white; border: none; width:20px}
.hidden{visibility: hidden;}
.visible{display: block;}
.nondisplay{display: none;}
.ddlogo_text{font-family: dd_logo; color: rgb(199, 179, 107); font-weight: 400;}
.general_desc{position: absolute; width:max-content; display: none;
    border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);
    font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1vw; line-height: 1.3vw; font-weight: 500;
    text-align: center; padding: 0.3vw 0.6vw 0.6vw 0.6vw;
}

.description{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1vw; line-height: 1.3vw;}
.hoverable:hover{filter: brightness(150%);}
.fit_width{width:fit-content}
/*body {
    user-select: none;
}*/

/*General Button Styling*/
.button_long{position: absolute; height: 4vw;}
.button_long:hover{filter: brightness(150%);}
.button_medium{position: absolute; height: 3.8vw;}
.button_medium:hover{filter: brightness(150%);}
.button_short{position: absolute; height: 3.3vw;}
.button_short:hover{filter: brightness(150%);}

.boss_button{position: absolute; height: 3.2vw; display: none;}
.boss_button:hover{filter: brightness(150%);}


/*Map Styling*/
.backdrop{
    width: 7vw; height: 6.6vw; position: absolute; top: -1.5vw; left: -2.2vw;
    background-image: url(images/mission_icons/quest_select_bg_fin.png);  
    background-size: 6.5vw;
}

.map_main{
    height: 50vw; background-image: url(images/backgrounds/quest_bg.png); 
    background-size: 100vw; background-clip: content-box; 
}

/*Label Styling*/
.dungeon_label{width: 17vw; height:4.5vw; position: absolute;}
.crimson_label{top: 14vw; left: 36vw;}
.crimson_label_right{position: absolute; top: 13.3vw; left: 47.5vw; width: 5.5vw;}
.madness_label{top: 26.5vw; left: 35vw}
.madness_labeltxt{position: absolute; top: 26.8vw; left: 37.5vw;
     font-family: dd_logo;  color: rgb(199, 179, 107); font-size: 1.7vw;}

.final_gauntlet_label{top: 4vw; left: 78.5vw; }
.ruins_label{top: 9.5vw; left: 58.3vw}
.warrens_label{ top: 17.5vw; left: 50vw;}
.weald_label{ top:23vw; left:62vw}
.cove_label{top: 17.4vw; left: 78vw;}
.hamlet_label{top: 34.5vw; left: 79vw}

/*Side/Bottom Button Styling*/

.hero_button{width: 5vw;height: 5vw;left: 33.7vw; top: 40.4vw;}
.provision_btn{width:5vw; position: absolute; top: 40.4vw; left: 41vw;}
.loot_btn{position: absolute; width: 5.5vw;height: 5.5vw;left: 2.9vw; top: 40vw;}
.bc_button{left:2.8vw; position: absolute; top: 28vw; width: 5.5vw;}
.mod_btn{width: 5vw; height: 4.5vw; position: absolute; top: 34.5vw; left: 3vw}


.hero_btn_label{ font-size: 1.9vw; position: absolute; top: 45.7vw; left: 32.7vw;}
.provision_btn_label{ font-size: 1.9vw; position: absolute; top: 45.7vw;left: 40.7vw;}
.loot_btn_label{ font-size: 1.9vw;position: absolute; top: 45.7vw;left: 0.5vw;}
.circus_btn_label{ font-size: 1.9vw;position: absolute; top: 27vw;left: 2vw;}

.provision_btn:hover{filter: brightness(150%);}
.loot_btn:hover{filter: brightness(150%);}
.bc_button:hover{filter: brightness(150%);}
.mod_btn:hover{filter: brightness(150%);}


/*General Box, Button and Backdrop Styling*/
.boss_box{width: 24vw;height: 38.4vw; position: absolute; visibility: hidden; left: 9vw; top: 6.9vw;}


.quest_box{width: 24vw;height: 38.4vw; position: absolute; display: none; left: 9vw; top: 6.9vw; padding-left:1vw;
    background-image: url('images/Boxes/quest_textbox.png'); background-size: 24vw;}
.enemy{background-image: url('images/Boxes/quest_textbox_enemy.png'); background-size: 24vw;
    font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167);font-size: 1.3vw; line-height: 1.8vw; font-weight: 500;}
.curio{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167);font-size: 1.3vw; line-height: 1.9vw; font-weight: 500;}

.curio_top_container{position: absolute; top: 0.6vw; left: 0vw;width: 23.7vw; height: 20vw; /*border: 1px solid red;*/
text-align: center;}
.bone_altar_container{border: 1px solid;}
.curio_info{position: absolute; right: 0.5vw; top:0.1vw; width: 2vw;} 
.curio_info:hover{filter: brightness(150%); width: 2.1vw; right: 0.4vw;}
.result_icon{width: 1.4vw; position: absolute; padding-top: 0.2vw;}
.provision_inter_icon{max-width: 1.4vw; max-height: 2vw;  position: absolute; padding-top: 0.3vw; left: 0.7vw}
.result_desc{margin-left: 2vw;}

.curio_result{left: 23.8vw; top: 27.7vw; text-align:start; padding-bottom:0.4vw; line-height: 2vw}
.room_interact{top: 24.7vw;}

.forced_universal{left: 23.6vw; top: -0.5vw}

.interaction_desc{position: absolute; left: 23.8vw; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8); padding:0.3vw 0.5vw 0.3vw 0.4vw;
     width:max-content; font-size: 1.1vw; line-height: 1.8vw; display: none;}

.curio_interaction_container{position: absolute; top: 27vw; left: 0vw;width: 23.7vw; height: 10vw;
                             display: flex; justify-content: center;}
.room_curio{top: 24vw;}
.curio_sprite{max-height: 10vw; max-width: 16vw;}
.room_sprite{max-height: 13vw; max-width: 20vw;}
.curio_name{font-size: 2vw; padding-bottom: 0.3vw}

.interact_item{width: 4vw; height: 8vw; margin: 1vw 1.5vw;}
.interact_item:hover{filter: brightness(150%);}

.crimson_backdrop{top: 16vw; left: 34vw;display: none;}
.crimson_btn{top: 17.2vw; left: 35.4vw;}

.madness_backdrop{top: 28.3vw; left: 32.9vw;display: none;}
.madness_btn{top: 29.4vw; left: 34.2vw;}

.gauntlet_backdrop{top: 5.7vw; left: 76.5vw; display: none;}
.gauntlet_btn{top: 7.6vw; left: 78.2vw; }


.ruins_enemy_backdrop{top: 11.4vw; left: 56.2vw; display: none;}
.ruins_enemy_btn{top: 12.6vw; left: 58vw;}

.ruins_curio_backdrop{top: 11.4vw; left: 60.4vw; display: none;}
.ruins_curio_btn{top: 12.6vw; left: 62.2vw;}

.ruins_boss_backdrop{top: 11.4vw; left: 64.6vw; display: none;}
.ruins_boss_btn{top: 12.6vw; left: 66.4vw;}


.weald_enemy_backdrop{top: 25vw; left: 59.7vw; display: none;}
.weald_enemy_btn{top: 26.2vw; left: 61.5vw;}

.weald_curio_backdrop{top: 25vw; left: 63.8vw; display: none;}
.weald_curio_btn{top: 26.2vw; left: 65.6vw;}

.weald_boss_backdrop{top: 25vw; left: 67.9vw; display: none;}
.weald_boss_btn{top: 26.2vw; left: 69.7vw;}


.warrens_enemy_backdrop{top: 19.5vw; left: 47.9vw; display: none;}
.warrens_enemy_btn{top: 20.7vw; left: 49.7vw; }

.warrens_curio_backdrop{top: 19.5vw; left: 52.1vw; display: none;}
.warrens_curio_btn{top: 20.7vw; left: 53.9vw;}

.warrens_boss_backdrop{top: 19.5vw; left: 56.3vw; display: none;}
.warrens_boss_btn{top: 20.7vw; left: 58.1vw;}


.cove_enemy_backdrop{top: 19.4vw; left: 76.2vw; display: none;}
.cove_enemy_btn{top: 20.6vw; left: 78vw; }

.cove_curio_backdrop{top: 19.4vw; left: 80.3vw; display: none;}
.cove_curio_btn{top: 20.6vw; left: 82.1vw;}

.cove_boss_backdrop{top: 19.4vw; left: 84.4vw; display: none;}
.cove_boss_btn{top: 20.6vw; left: 86.2vw;}


.shared_enemy_backdrop{top: 36.6vw; left: 77.2vw; display: none;}
.shared_enemy_btn{top: 37.8vw; left: 79vw;}

.shared_curio_backdrop{top: 36.6vw; left: 81.4vw; display: none;}
.shared_curio_btn{top: 37.8vw; left: 83.2vw;}

.shared_boss_backdrop{top: 36.6vw; left: 85.6vw; display: none;}
.shared_boss_btn{top: 37.8vw; left: 87.4vw;}

.enemy_sprite{position: absolute; top: 1.2vw ;max-width: 12vw;max-height: 14vw; left:1vw;}
.enemy_small_sprite{position: absolute; top: 4vw ;max-width: 10vw;max-height: 10vw; left:1.3vw;}
.enemy_tall_sprite{position: absolute; top: -1.2vw; max-width: 12vw; max-height: 15vw; left: 2.2vw}
.enemy_medtall_sprite{position: absolute; top: 0vw; max-width: 12vw; max-height: 13.5vw; left: 1.4vw}
.enemy_size2_sprite{position: absolute; top: 0.2vw; max-width: 16vw;max-height: 14vw; left: 0vw}

.monster_name_veryshort{font-size: 2.1vw;  margin:0.3vw 0; position: absolute; top: 11.3vw; right:4.5vw }
.monster_name_short{font-size: 2.1vw;  margin:0.3vw 0; position: absolute; top: 11.3vw; right:3vw ;}
.monster_name_medium{font-size: 2.1vw;  margin:0.3vw 0; position: absolute; top: 11.3vw; right:2vw }

.enemy_sprite_container{ display: none}
.enemy_stats_container{position: absolute; top:14vw;  width: 23.7vw; height:15vw; left: -0.2vw; padding-left: 1vw;}
    
.desc_toggle{width: 9vw; margin-right: 2.5vw; margin-left: 0vw;}
.enemy_strat {position: absolute; top:17.7vw;  width: 23.7vw; height:20.5vw; left: -0.3vw; background-color: black; 
     display: none; font-size: 1.15vw; padding:0 0.2vw; text-align: center;}
.sentence_margin{margin-bottom: 13vw;}
.enemy_skill_container{position:absolute; width: 23.7vw; top: 29.2vw; left: 1vw;line-height: 2.2vw; display: none}
.enemy_skill_desc_container{position: absolute; top: 26.4vw; left: 23.8vw; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8); padding:0.3vw 0.4vw 0.3vw 0.4vw;
                            text-align: center; width:max-content; font-size: 1vw; line-height: 1.5vw; display: none;}

.enemy_toggle_btn1{width: 8vw; position: absolute; left: 2vw; top:0.5vw; display: none}
.enemy_toggle_btn2{width: 8vw; position: absolute; left: 13.5vw; top:0.5vw; display: none;}
.enemy_toggle_btn1:hover{filter: brightness(150%);}
.enemy_toggle_btn2:hover{filter: brightness(150%);}



.position_icons{max-width: 10vw; height: 1vw;}

.enemy_numbers1{position: absolute; top:3.45vw; left: 6.7vw; }
.enemy_numbers2{position: absolute; top:3.53vw; left: 19.5vw; }

.enemy_numbers3{position: absolute; top:9.15vw; left: 6.7vw; line-height: 1.9vw; }
.enemy_numbers4{position: absolute; top:9.15vw; left: 19.5vw; line-height: 1.9vw; }

.content_sidenav{position: absolute; left: 23vw; top:0vw; width: 10vw;height:20vw; 
display: flex; flex-direction: row; flex-wrap: wrap; background-color: black; justify-content: center;}

.sidenav9_long{height: 15.3vw; width: 14.6vw}
.sidenav9{height: 24.3vw}
.sidenav13{height: 24.7vw; width: 14.6vw}
.sidenav10{height: 19.5vw; width: 14.6vw}

.enemy_port{display: flex; height: 4vw; margin: 0.3vw}
.curio_port{display: flex; height: 4vw; margin: 0.3vw}

.enemy_port:hover{filter: brightness(150%);}
.curio_port:hover{filter: brightness(150%);}


.lvl_btn{height: 2vw; position: absolute; left: 17vw; display: none;}
.lvl_btn:hover{filter: brightness(150%);}
.app_lvl{top: 1vw; left:19vw}
.vet_lvl{top: 3.5vw;left:19vw}
.champ_lvl{top: 6vw; left: 17.6vw;}
.darkest_lvl{top: 1vw; left: 17vw;}

.statskill_icon{width: 2vw;}

.hide_headers{position: absolute; top: 15vw; left: -0.3vw;  width: 24vw; height: 23vw; background-color: black;}

#boss1{left: 80vw; top: 20.7vw;}
#boss2{left: 83.6vw; top: 20.7vw;}
#miniboss1{left: 87.2vw; top: 21.9vw;}
#boss3{left: 80vw; top: 24.3vw;}
#boss4{left: 83.6vw; top: 24.3vw;}
#miniboss2 {left: 87.2vw; top: 25.9vw;}
#boss5{left: 80vw; top: 27.9vw;}
#boss6{left: 83.6vw; top: 27.9vw;}
#miniboss3{left: 87.2vw; top: 29.9vw;}
#boss7{left: 80vw; top: 31.5vw;}
#boss8{left: 83.6vw; top: 31.5vw;}

/*Quirk Glossary Styling*/

.glossary_container{position:absolute; left: 8.5vw; top: 6.75vw; width: 75.2vw; height: 39vw; 
    background-image: url("images/estate_icons/glossary_background2.png"); background-size: 75.2vw 39vw; display: none; }
.glossary_backdrop{position:absolute; width: 90vw; height: 37vw}
.quirk_close{position:absolute; right: 0.8vw; top:0.8vw; width: 1.8vw}
.quirk_close:hover{filter: brightness(150%);}

.glossary_nav1{position:absolute; width: 10vw; top: -3.1vw; left:45vw}
.glossary_nav2{position:absolute; width: 10vw; top: -3.1vw; left:57vw}
.glossary_nav1:hover{filter: brightness(150%);}
.glossary_nav2:hover{filter: brightness(150%);}

.tier_nav{position: absolute; left: 74.8vw;top: 0.5vw; width: 3vw; height: 39vw;  display: flex; flex-direction: column; justify-content: center;}

.tier_btn_positive{width: 4vw; margin: 1vw 0vw}
.tier_btn_positive:hover{filter: brightness(150%);}
.tier_btn_negative{width: 3.5vw; margin: 0.3vw 0vw}
.tier_btn_negative:hover{filter: brightness(150%);}

#neg_nav{display: none;}

.quirk_tier_container{width:37vw; height: 39vw;  position: absolute; left: 36vw; }
.tier_header_txt{position: absolute;left: 1vw;top: 2vw;  height: 4vw; width: 40vw;  font-size: 2.2vw;}

.quirk_container{display:block; position: absolute;top: 6vw; left:1vw; width:fit-content; height: 31vw;  }
.quirk_text{font-family: 'Ubuntu', sans-serif; color: rgb(199, 179, 107); font-size: 1.6vw; line-height: 2.6vw; font-weight: 500; width: fit-content;}
.quirk_name_line2{position: relative; left: 16.5vw; top: -31.2vw}
.quirk_name_container{width: fit-content;}

.negative{color: rgb(160, 43, 32);}

.quirk_desc{position: absolute;  display: none;
    border: 0.15vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);
    font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167);padding: 0.2vw 0.6vw 0.2vw 0.3vw; font-size: 1.3vw; line-height: 1.8vw; font-weight: 500;}

.row1num1{top: 8.5vw; left:0.9vw;}
.row1num2{top:11.1vw; left:0.9vw;}
.row1num3{top:13.7vw; left:0.9vw;}
.row1num4{top: 16.3vw; left:0.9vw;}
.row1num5{top: 18.9vw; left:0.9vw;}
.row1num6{top: 21.5vw; left:0.9vw;}
.row1num7{top: 24.1vw; left:0.9vw;}
.row1num8{top: 26.7vw; left:0.9vw;}
.row1num9{top: 29.3vw; left:0.9vw;}
.row1num10{top: 31.9vw; left:0.9vw;}
.row1num11{top: 34.5vw; left:0.9vw;}
.row1num12{top: 37.1vw; left:0.9vw;}

.row2num1{top: 8.5vw; left:17.4vw;}
.row2num2{top:11.1vw; left:17.4vw;}
.row2num3{top:13.7vw; left:17.4vw;}
.row2num4{top: 16.3vw; left:17.4vw;}
.row2num5{top: 18.9vw; left:17.4vw;}
.row2num6{top: 21.5vw; left:17.4vw;}
.row2num7{top: 24.1vw; left:17.4vw;}
.row2num8{top: 26.7vw; left:17.4vw;}
.row2num9{top: 29.3vw; left:17.4vw;}
.row2num10{top: 31.9vw; left:17.4vw;}
.row2num11{top: 34.5vw; left:17.4vw;}
.row2num12{top: 37.1vw; left:17.4vw;}




/*Provision Box Styling*/

.provision_backdrop{position:absolute; width: 90vw; height: 45vw}
.provision_container{position: absolute; left: 8.5vw; top: 6.75vw; height: 38.5vw; width: 75.2vw; display: none; 
                    background-image: url("images/estate_icons/provision.character_background_long.png"); background-size: 75.2vw;}
.provision_close{position:absolute; right: 0.8vw; top:0.8vw; width: 1.6vw}
.provision_close:hover{filter: brightness(150%);}
.provisions_itembox{display: flex; position: absolute; left: 43vw; top: 1.5vw; width: 30vw; height: 17.5vw; 
                    flex-wrap: wrap; }
.supply_item{width: 3.9vw; height: 7.2vw; margin: 0.25vw 0.3vw 0.25vw 0.3vw; display: flex;}
.supply_item:hover{filter: brightness(150%);}
.provision_desc{font-size: 1vw; line-height: 1.3vw; font-weight: 500;}

.desctop_space{margin-top: 0.3vw;} 
.descbtm_space{margin-bottom: 0.2vw;}
#food_desc{left:-8.7vw} 
#shovel_desc{left:-1vw} 
#antivenom_desc{left:3.3vw} 
#bandage_desc{left:7.8vw} 
#herb_desc{left:12.2vw} 
#key_desc{left:17.3vw}
#holy_water_desc{left:-5.3vw} 
#laudanum_desc{left:-0.9vw} 
#torch_desc{left:2.5vw} 
#dog_treat_desc{left:6.8vw} 
#firewood_desc{left:13vw}

.provision_areabox{position: absolute; top: 19.3vw; right: 0.5vw;
                   height: 19vw; width: 38.5vw;}

.provisions_navigation{position: absolute; top: 18.5vw; left: -11vw}
.provisions_navbtn{width: 4vw;}
.provisions_navbtn:hover{filter: brightness(150%);}

.areabox{position: absolute; width: 37.9vw; height:18.4vw; background-size: 38.5vw;  padding: 1vw;}
.area_provisions_text{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1vw; line-height: 1.3vw; font-weight: 300;}
.ruins_provision{background-image: url("images/backgrounds/ruins_bg.webp"); }
.weald_provision{ background-image: url("images/backgrounds/Weald.webp");}
.warrens_provision{ background-image: url("images/backgrounds/Warrens.webp"); }
.cove_provision{  background-image: url("images/backgrounds/Cove.webp");}

.dungeon_category{width: 12.5vw; height: 16vw; padding-top: 1.8vw; }
.provisions_title{font-size: 2vw; font-family: dd_logo; color: rgb(199, 179, 107); position: absolute; display: flex;justify-content: center; width: 36vw; height: 3vw;}
.provisions_list{text-align: center; line-height: 1.5vw;}
.dungeon_header{font-family: dd_logo; color: rgb(199, 179, 107); font-size: 1.5vw; margin-top: 0.5vw;}

#ruins_area{display: flex;}
#weald_area{display:none}
#warrens_area{display:none}
#cove_area{display: none;}

/*Loot Box Styling*/

.loot_container{position: absolute; top: 22vw;left: 2vw; width: 36vw; height: 18vw; 
               background-image: url('images/loot/inventory_panel.png'); background-size: 36vw; display: none;}
#lootclose{width: 1.5vw; position: absolute; right: 0.45vw; top: 0.45vw;}
#lootclose:hover{filter: brightness(150%);}
.lootflex{width: 36vw; height: 16.7vw;  margin: 0.3vw 0 0 0.3vw; display:flex;flex-wrap: wrap; }
.loot_item{position: absolute; width: 3.4vw; height: 7vw; }
.loot_item:hover{filter: brightness(150%);}

.slot1{ top: 0.9vw; left: 1vw}
.slot2{top: 0.9vw; left: 5.1vw}
.slot3{top: 0.9vw; left: 9.15vw}
.slot4{top: 0.9vw; left: 13.2vw}
.slot5{top: 0.9vw; left: 17.28vw}
.slot6{top: 0.9vw; left: 21.35vw}
.slot7{top: 0.9vw; left: 25.4vw}
.slot8{top: 0.9vw; left: 29.4vw}
.slot9{top: 9.2vw; left: 1vw}
.slot10{top: 9.2vw; left: 5.1vw}
.slot11{top: 9.2vw; left: 9.15vw}
.slot12{top:9.2vw; left: 13.2vw}
.slot13{top:9.2vw; left: 17.28vw}
.slot14{top:9.2vw; left: 21.35vw}
.slot15{top:9.2vw; left: 25.4vw}
.slot16{top:9.2vw; left: 29.4vw}

.loot_desc{ font-size: 1vw; line-height: 1.4vw; font-weight: 500;}

#citrine_desc{top: 0.95vw; left: 5.1vw;}
#jade_desc{top: 0.95vw; left: 9.15vw}
#onyx_desc{top: 0.95vw; left: 13.2vw}
#emerald_desc{top: 0.95vw; left: 17.28vw}
#sapphire_desc{top: 0.95vw; left: 21.35vw}
#ruby_desc{top: 0.95vw; left: 25.4vw}
#trapezohedron_desc{top: 8.5vw; left: 18vw}
#goldbag_desc{top: 8.5vw; left: 24vw}
#pew_desc{top: 9.25vw; left: 5.1vw}
#minor_antique_desc{top: 9.25vw; left: 9.15vw}
#major_antique_desc{top: 9.25vw; left: 13.2vw}
#tapestry_desc{top: 9.25vw; left: 17.28vw}
#crest_desc{top: 17.5vw; left:11vw}
#bust_desc{top: 17.5vw; left: 15vw}
#deed_desc{top: 17.5vw; left: 19.2vw}
#portrait_desc{top: 17.5vw; left:23.3vw}



.apprentice{color:rgb(108, 149, 85)}
.veteran{color:rgb(209, 136, 46)}
.champion{color: rgb(149, 48, 48)}

/*Lower Right Button Styling*/
.district_closed{position:absolute; top: 44.2vw; left: 69.3vw; width: 4vw; height: 4.7vw}
.district_open{position:absolute; top: 44.2vw; left: 69.3vw; width: 4vw; height: 4.7vw; display: none;}
.estate_overlay{position: absolute; height: 6.4vw; width: 5vw; display: none;}
.district_overlay{ top: 43.2vw; left: 69.3vw;}

.event_closed{position: absolute; top: 44.5vw; left: 74.6vw; width: 4.5vw; }
.event_open{position: absolute; top: 44.5vw; left: 74.6vw; width: 4.5vw; display: none}
.event_overlay{ top: 43.2vw; left: 74.3vw}

.activity_closed{position: absolute; top: 44.9vw; left: 79.4vw; width: 5vw; height: 3.5vw}
.activity_open{position: absolute; top: 44.4vw; left: 79.4vw; width: 5vw; height: 5vw;display: none}
.activity_overlay{ top: 43.2vw; left: 79.3vw}

.trinketbox_closed{position: absolute; top: 43.5vw; left: 84.5vw; width: 4.9vw; height: 5vw}
.trinketbox_open{position: absolute; top: 43.5vw; left: 84.5vw; width: 4.9vw; height: 5vw;display: none}
.trinketbox_overlay{ top: 43.2vw; left: 84.3vw}

.glossary_closed{position: absolute; top: 44.3vw; left: 89.7vw; width: 4.1vw; height: 4.3vw}
.glossary_open{position: absolute; top: 44.3vw; left: 89.3vw; width: 5vw; height: 4.3vw;display: none}
.glossary_overlay{ top: 43.2vw; left: 89.3vw}

.setting_icon{position: absolute; top: 44.2vw; left: 95.2vw; width: 3.1vw;height: 4.1vw}
.setting_overlay{ top: 43.2vw; left: 94.3vw}

/*Background element Styling*/
.back_arrow{position: absolute; top: 4.3vw; left: 11.8vw; height: 2vw;}
.back_arrow:hover{filter: brightness(150%);}
.crimson_banner{width: 9.5vw; position: absolute; top: 5vw; left: 1.2vw;}
.estate_title{height: 15vw; position: absolute;  width: 48vw;}

/*Embark Button Styling*/
#embark_button{height: 3vw; position: absolute; top: 44.7vw; left: 49.7vw; display: none;}
#embark_button:hover{filter: brightness(170%);}
.embark_btn{height: 5vw; position: absolute; top: 45vw; left: 49.7vw; display: none;}
.embark_btn:hover{filter: brightness(170%);}
.dd_button{position: absolute;  width: 16vw; height: 2.3vw; margin-top: 1.1vw; }
.dd_buttontop{position: absolute; width: 16vw; margin-top: 0.4vw; }
.embark_branch{top: 44.7vw}

/*Opinion Container Styling*/
.opinion_container{width: 21.5vw; height:5.2vw; 
    position: absolute; top: 40.2vw; left:47vw; display: flex; justify-content: center;}
.opinion_header{position: absolute; top: 38vw;left:51.55vw;
    font-family: 'Ubuntu', sans-serif; color:rgb(93, 91, 79);font-size: 1.3vw; font-weight: 800;}
.opinion_box{width: 23vw; height:6vw;
    position: absolute; top: 39.8vw; left:46.3vw}

.opinion_bg{width:5vw; height: 5vw; display: flex; padding: 0.5vw 0.2vw 0.2vw 0.4vw;}
.opinion_bg:hover{filter: brightness(150%);}
.padding{height:60vw; width: 100vw; background-color: black;}

/*Hero Portion Styling*/
.heroes_main{
    background-image: url(images/backgrounds/circus.png); background-size: 100vw; 
    height: 43vw; background-clip: content-box; background-position: top;
}

.hero_port_container{
    display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; 
    position: absolute; top:60vw; width: 99%; margin-left: 0.4vw
}
.hero_port{width: 4.5%; display: flex; margin: -0.9vw 0.4vw 1vw 0.4vw}
.hero_port:hover{filter: brightness(150%);}

.back_hero1{width: 2vw; position: absolute; top: 60.5vw; left: 0.65vw}
.back_hero2{width: 2vw; position: absolute; top: 60.5vw; right: 0.65vw}
.back_hero1:hover{filter: brightness(150%);} 
.back_hero2:hover{filter: brightness(150%);}

/*Hero Panel Styling*/
.hero_panel{ margin: 0; padding:0; margin-top: 4vw; display: block;}
.char_panel{width: 94vw; height: 40vw; position: relative; margin-left: 3vw;}

.empty_space{ height: 47vw; width: 30vw; position: absolute;}

/*Hero Header Styling*/
.hero_header{color: rgb(199, 179, 107); font-family: dd_logo ; font-size: 2.6vw;
             position: absolute; top: 64.6vw; left: 6.7vw;}
.quotebox{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1.1vw; font-weight: bold;
         position: absolute; top: 67.1vw; left: 6.7vw;} 
.box_text{display: none;}

.header_bg{position: absolute; left: 6vw; top: 64.7vw;  width: 60vw; height: 6vw;}

#abombg{background-image: url(images/Hero_boxes/abomheader3.png); background-size: 44vw;}
#antibg{background-image: url(images/Hero_boxes/anti_header.png); background-size: 44vw;}
#arbbg{background-image: url(images/Hero_boxes/arb_header.png); background-size: 44vw;}
#bhbg{background-image: url(images/Hero_boxes/bh_header.png); background-size: 44vw;}
#crusbg{background-image: url(images/Hero_boxes/crus_header.png); background-size: 44vw;}
#flagbg{background-image: url(images/Hero_boxes/flag_header.png); background-size: 44vw;}
#grbg{background-image: url(images/Hero_boxes/gr_header.png); background-size: 44vw;}
#hellbg{background-image: url(images/Hero_boxes/hell_header.png); background-size: 44vw;}
#hwmbg{background-image: url(images/Hero_boxes/hwm_header.png); background-size: 44vw;}
#hmbg{background-image: url(images/Hero_boxes/hm_header.png); background-size: 44vw;}
#jesbg{background-image: url(images/Hero_boxes/jes_header.png); background-size: 44vw;}
#lepbg{background-image: url(images/Hero_boxes/lep_header.png); background-size: 44vw;}
#maabg{background-image: url(images/Hero_boxes/maa_header.png); background-size: 44vw;}
#muskbg{background-image: url(images/Hero_boxes/musk_header.png); background-size: 44vw;}
#occbg{background-image: url(images/Hero_boxes/occ_header.png); background-size: 44vw;}
#pdbg{background-image: url(images/Hero_boxes/pd_header.png); background-size: 44vw;}
#sbbg{background-image: url(images/Hero_boxes/sb_header.png); background-size: 44vw;}
#vesbg{background-image: url(images/Hero_boxes/ves_header.png); background-size: 44vw;}

/*Hero Sprite Styling*/
.sprite_abom{position: absolute; top: 85.4vw; left: 7vw; width: 7.5vw; height: 16vw; display: none;}
.sprite_anti{position: absolute; top: 85.9vw; left: 7.2vw; width: 8.4vw; height: 16vw; display: none;}
.sprite_arb{position: absolute; top: 84.5vw; left: 4.7vw;  width: 10.5vw; height: 17vw; display: none;}
.sprite_bh{position: absolute; top: 84.9vw; left: 6.7vw; width: 9vw; height: 16.7vw; display: none;}
.sprite_crus{position: absolute; top: 82.7vw; left: 6.7vw; width: 9.5vw; height: 19vw; display: none;}
.sprite_flag{position: absolute; top: 85vw; left: 6vw; width: 11vw; height: 16.5vw;  display: none;} 
.sprite_gr{position: absolute; top: 84vw; left: 6.8vw; width: 8.3vw; height: 17.5vw; display: none;}
.sprite_hell{position: absolute; top: 81.5vw; left: 7.8vw; width: 10vw; height: 20vw; display: none;}
.sprite_hwm{position: absolute; top: 84.5vw; left: 7.3vw; width: 10vw; height: 17.1vw; display: none;}
.sprite_hm{position: absolute; top: 85.7vw; left: 4.5vw; width: 15vw; height: 16vw; display: none;}
.sprite_jes{position: absolute; top: 85.3vw; left: 6.5vw; width: 12vw; height: 16vw; display: none;}
.sprite_lep{position: absolute; top: 84vw; left: 6vw; width: 9.2vw; height: 17.5vw; display: none;}
.sprite_maa{position: absolute; top: 85.3vw; left: 6vw; width: 12vw; height: 16vw; display: none;}
.sprite_musk{position: absolute; top: 82.5vw; left: 7vw; width: 8.1vw; height: 19vw; display: none;}
.sprite_occ{position: absolute; top: 85.2vw; left: 6.8vw;  width: 10vw; height: 16.8vw; display: none;}
.sprite_pd{position: absolute; top: 85.6vw; left: 5.8vw; width: 11vw; height: 16vw; display: none;}
.sprite_sb{position: absolute; top: 84.5vw; left: 6.7vw; width: 8.5vw; height: 16.8vw;  display:none;}
.sprite_ves{position: absolute; top: 85.1vw; left: 6.5vw; width: 10vw; height: 16.5vw; display: none;}


.shadow{position: absolute; top: 99.5vw; left: 6.6vw; width: 10vw; height: 4vw; } 
.shadow_big{position: absolute; top: 89.5vw; left: 5vw; width: 12vw; height: 4.2vw; display: none;} 

/*Hero Panel Button Styling*/
.rename_button{position: absolute; top: 65.3vw; left: 4.4vw; width: 1.6vw;} 
.close_btn{position: absolute; top: 64.6vw; right: 3.6vw; width: 1.6vw;} 
.swapskin_btn{position:absolute; left: 3.6vw; top: 101.8vw; width: 1.6vw;}
.rename_button:hover{filter: brightness(150%);}
.close_btn:hover{filter: brightness(150%);}
.swapskin_btn:hover{filter: brightness(150%);}

.prev_btn{position: absolute; top: 104vw; left: 85vw; width: 5vw; height: 2.6vw; display: none;}
.next_btn{position: absolute; top: 104vw; left: 90vw; width: 5vw; height: 2.6vw; display: none;}
.prev_btn:hover{filter: brightness(150%);}
.next_btn:hover{filter: brightness(150%);}


/*Info Button Styling*/
.info{position: absolute; width: 1.7vw;} 
.info:hover{filter: brightness(150%);}

.infobox{display: flex; justify-content: center;
        position: absolute; top: 87.6vw;left: 89.8vw; height: 2.2vw; width: 2.4vw;}
    
.infodesc{position: absolute;top: 87.5vw ; left: 83.3vw; padding: 0.1vw 0.2vw; display: none;
    font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 0.8vw; line-height: 1.4vw;
    height: fit-content; width:max-content; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);}

.box2{top: 81.9vw; left: 17.4vw;}
.desc2{top: 81.8vw; left: 19.5vw;}


/*Preferred Target Styling*/

.pref_position_container{position:absolute; top: 70vw; left: 58.3vw;  
    height: 2.9vw; width: 13.3vw; display: flex; justify-content: space-evenly; } 

.pref_target_container{position:absolute; top: 70vw; left: 79.25vw;  
    height: 2.9vw; width: 13.3vw; display: flex; justify-content: space-evenly; } 

.pref_pos{height: 0.8vw; width:1vw;  border-radius: 2vw; background-color:rgb(199, 179, 107); }
.pref_target{height: 0.8vw; width:1vw;  border-radius: 2vw; background-color:red;}

.pos4_1{position:absolute; left: 1.2vw; top: 0.97vw;}
.pos3_2{position: absolute; left: 4.45vw; top: 0.97vw}
.pos2_3{position: absolute; left: 7.65vw; top: 0.97vw}
.pos1_4{position:absolute; left: 10.9vw; top: 0.97vw}

.barely_pref{filter: brightness(40%)}
.strong_pref{filter: brightness(165%);}
.med_pref{filter: brightness(90%);}

.pref_pos_header{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1.1vw; line-height: 1.5vw;
    position: absolute; top: 68.8vw; left: 46.3vw;
   height: 2vw; width: 25vw; text-align: center;} 

.pref_target_header{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1.1vw; line-height: 1.5vw;
    position: absolute; top: 68.8vw; left: 78.7vw;
   height: 2vw; width: 25vw; text-align: center;} 



/*Hero Panel Category Styling*/

.title_header{font-family: dd_logo; color: rgb(199, 179, 107); font-size: 1.6vw;}
.quirk_header{position: absolute; top: 70.5vw; left: 17.7vw;
    height: 2vw; width: 34.3vw; text-align: center;} 

.stat_header{position: absolute; top: 81.8vw; left: 17.7vw;
    height: 2vw; width: 34.3vw; text-align: center;}

.equip_header{position: absolute; top: 89.5vw; left: 17.7vw;
    height: 2vw; width: 34.3vw; text-align: center;}

.skill_header{position: absolute; top: 66.6vw; left: 57.5vw; 
    height: 2vw; width: 35vw; text-align: center;}

.camp_header{position: absolute; top: 78.9vw; left: 57.5vw; 
    height: 2vw; width: 35vw; text-align: center;}

.resist_header{position: absolute; top: 87.5vw; left: 57.5vw; 
    height: 2vw; width: 35vw; text-align: center;}

.misc_stat_header{position: absolute; top:96.4vw; left: 57.5vw; 
        height: 2vw; width: 35vw; text-align: center;}
    
/*Quirk Category Styling*/

.posquirk_text{ color: rgb(199, 179, 107); font-family:  'Ubuntu', sans-serif; font-size: 1vw; font-weight: 500; line-height: 1.5vw;
            position:absolute; top: 73vw; left: 18.5vw;  transform: scaleX(1.1);
}

.negquirk_text{ color: rgb(160, 43, 32); font-family:  'Ubuntu', sans-serif; font-size: 1vw; font-weight: 500; line-height: 1.5vw;
    position:absolute; top: 73vw; left: 38.5vw;  transform: scaleX(1.1); 
    display: flex;  width: 13vw; height: 30vw;  direction: rtl;
}
.negflex {display: flex;}


/*Resolve and name Styling*/
.resolve{position:absolute; top: 70vw; left: 9.4vw; width: 2.7vw }

.canon_name{color: rgb(199, 179, 107); font-family:  dd_logo; font-size: 1.5vw; 
    position:absolute; top: 75.8vw; left: 7.5vw; transform: scaleX(1.2);
    width: 7vw; height: 2vw; ; text-align: center;}

/*Resist Styling*/

.res_icon {width: 1.5vw}

.resist_text{position: absolute; top: 89.8vw; left: 57.3vw; 
             width: 35vw; height: 6.5vw; display: flex;
             font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1.1vw; line-height: 1.5vw;}

.resist1{height: 6.5vw; width: 17vw; display: flex; direction: rtl; flex-direction: column;}
.resist2{height: 6.5vw; width: 19vw;  display: flex; direction: rtl; flex-direction: column;}

/*General Tooltip Colorcoding*/

.highres{color: rgb(199, 179, 107); }
.highest{filter: brightness(150%); color: yellow;}
.lowres {color: rgb(160, 43, 32);}
.lowest {filter: brightness(70%);}
.normal {color: rgb(173, 172, 167)}
.stun {color:rgb(221, 175, 62)}
.blight{color:rgb(185, 191, 65)}
.heal{color:rgb(133, 189, 62)}
.stress{color:white}
.chance {color: rgb(94, 95, 94)}
.debuff{color:rgb(177, 108, 49)}
.buff{color:rgb(117, 190, 197)}
.bleed{color:rgb(141, 14, 16)}
.move{color:rgb(92, 129, 145)}
.disease{color:rgb(116, 125, 78)}
.mark{color:rgb(141, 15, 26)}
.stealth{color: rgb(79, 71, 124)}
.scouting {color: rgb(69, 123, 112)}
.block{color: rgb(93, 83, 43)}
.aegis{width: 1.5vw; margin: 0;  margin-top:-0.25vw; padding:0; position: absolute;}
.grey{color:grey}
.attack_type{color:rgb(140, 123, 95)}

/*Statline Styling*/
.statline_container{position: absolute; top: 84.3vw; left: 18vw;
    height:7.2vw; width:40vw; 
    display: flex; justify-content: start; flex-direction: row;}


.stat_box{position: absolute; top: 84.4vw; left: 9vw;
             height:7.2vw; width:53vw;
             display: flex; justify-content: start; flex-direction: row;}

.stats_box1{position: absolute; left: 5vw;}
.stats_box2{position: absolute; left: 19.5vw}

.numbers_container{position:absolute; width: 40vw;}
.numbers_box1{height:7vw; position:absolute; left: 21.5vw; top: -0.1vw; width: 35vw}
.numbers_box2{height: 7vw;position: absolute; left: 34vw; top: -0.1vw; width:15vw}

.statline{font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 1.3vw;
     line-height: 1.5vw; text-align: start;}

/*Misc Stats Styling*/
.misc_container {position: absolute; top: 99.2vw; left: 52vw;
                height:7.2vw; width:40vw; 
                display: flex; justify-content: start; flex-direction: row;}
.misc_box1{position: absolute; left: 4.5vw;}
.misc_box2{position: absolute; left: 24vw}
.misc{top: 99.3vw; left: 46vw}
.misc_numbers_box1{height:7vw; position:absolute; left: 19vw; top: -0.1vw; width: 35vw}
.misc_numbers_box2{height: 7vw;position: absolute; left: 37vw; top: -0.1vw; width:15vw}
.misc_statline{line-height: 1.8vw; }


/*Camping and Combat Styling*/

.camp_title{font-size: 1vw; line-height: 1.2vw;}
.skill_title{font-size: 1vw; font-weight: 400;}


.combat_skill_container{position: absolute; top: 73.5vw; left: 57.7vw;
                        width: 35vw; height: 5vw;
                        display: flex; justify-content: center;}

.camping_skill_container{position: absolute; top: 82vw; left: 57.7vw;
                         width: 35vw; height: 5vw;
                         display: flex; justify-content: center;}

.desc_box{position: absolute; top: 4.4vw; left: -3vw;
         height: fit-content; width:max-content; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);
         font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 0.9vw; line-height: 1.1vw; font-weight: 500;
         text-align: center; padding: 0 0.6vw 0.3vw 0.6vw; display: none;
}

.camp_desc{position: absolute; top: 4.4vw; left:2vw;
    height: fit-content; width:max-content; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);
    font-family: 'Ubuntu', sans-serif; color: rgb(173, 172, 167); font-size: 0.8vw; line-height: 1.5vw; font-weight: 500;
    text-align: center; padding: 0.2vw 0.6vw 0.3vw 0.6vw; display: none;
}
.uses_text{font-family: 'Ubuntu', sans-serif; color: rgb(199, 179, 107); line-height: 1vw; margin-top: 0.3vw;}


.ability_grid{width: 4.4vw; height:4.8vw; position: absolute; top: -0.6vw;} 
.skill_icon{height: 4vw; width: 4vw; margin: 0 0.3vw; position: relative}
.skill:hover .skill_icon {filter: brightness(150%);}

/*Positioning*/

.pos_ally{width: 0.5vw; height: 0.5vw;  border-radius: 0.5vw; margin: 0 0.15vw; background-color: rgb(199, 179, 107); }
.pos_enemy {width: 0.5vw; height: 0.5vw;  border-radius: 0.5vw; margin: 0 0.15vw; background-color: rgb(160, 43, 32);}
.pos_dot{width: 0.5vw; height: 0.5vw; background-color: rgb(54, 54, 55); border-radius: 0.5vw; margin: 0 0.15vw;}
.pos_container{display: flex; justify-content: center; margin-top: 0.4vw; margin-bottom: 0.2vw;}
.blank_space{width: 1.5vw}
.desc_text{line-height: 1vw; font-size: 0.8vw;}

/*Equipment and Trinket Styling*/

.trinket1{margin-left: 6.5vw;}
.trinket2{margin-left: 0vw;}

.equipment{height: 8.3vw; margin-right: 0.5vw; padding: 0;}
.equipment:hover{filter: brightness(150%);}

.equip_box{position: absolute; top: 94.5vw; left:23.2vw; width: 35vw; display: flex;}
.trinket_box{top: 0vw;padding: 0.3vw;}

.left1{left: 20.3vw;}  .left2{left: 24.9vw;}

/*Tooltip Colorcoding*/

.common{color: white}
.uncommon{color:rgb(108, 149, 85)}
.rare{color: rgb(68, 97, 163)}
.very_rare{color: rgb(180, 78, 31)}
.crystal{color: rgb(184, 253, 238)}
.crimson_court{color:rgb(162, 42, 23)}
.cc_text{color:rgb(92, 50, 58)}
.set_bonus{color:rgb(128, 191, 116)}

.equip_desc{position: absolute; top: -2.6vw;
    height: fit-content; width:max-content; border: 0.2vw rgb(54, 54, 55) solid;background-color:rgba(0, 0, 0, 0.8);
    font-family: 'Ubuntu', sans-serif; color: rgb(206, 58, 33); font-size: 1vw; line-height: 1.5vw; font-weight: 500;
    text-align: center; padding:0.2vw; display: none;
}

/*Equipment Positioning */

#weaponabom{left:-2vw}  #armorabom{left:2.5vw}
#weaponanti{left:-2vw}  #armoranti{left:0.8vw}
#weaponarb{left:-0.2vw}  #armorarb{left:4.55vw}
#weaponbh{left:-2.1vw}  #armorbh{left:3.4vw}
#weaponcrus{left:-2.1vw}  #armorcrus{left:2.1vw}
#weaponflag{left:-0.83vw}  #armorflag{left:3.1vw}
#weapongr{left:-1.9vw}  #armorgr{left:3.8vw}
#weaponhell{left:-1.85vw}  #armorhell{left:4vw}
#weaponhwm{left:-3.3vw}  #armorhwm{left:2.7vw}
#weaponhm{left:-0.8vw}  #armorhm{left:2.7vw}
#weaponjes{left:-1.3vw}  #armorjes{left:2.2vw}
#weaponlep{left:-2.15vw}  #armorlep{left:3.8vw}
#weaponmaa{left:-0.4vw}  #armormaa{left:3.7vw}
#weaponmusk{left:-0.3vw}  #armormusk{left:1.4vw}
#weaponocc{left:-2vw}  #armorocc{left:3vw}
#weaponpd{left:-2.6vw}  #armorpd{left:1.7vw}
#weaponsb{left:-1.95vw}  #armorsb{left:4.85vw}
#weaponves{left:-2vw}  #armorves{left:1.9vw}


/*AoE Skills*/
.cleave_double{border-top:0.18vw solid rgb(160, 43, 32); width:0.8vw;
    position: absolute; top: 0.6vw;}

.cleave_triple{border-top:0.18vw solid rgb(160, 43, 32); width:1.6vw;
        position: absolute; top: 0.6vw;}

.quad_cleave{border-top:0.18vw solid rgb(160, 43, 32); width:2.4vw;
    position: absolute; top: 0.6vw;}
.pos2_3abom{left: 11.55vw}
.pos1_2abom{left: 6vw}

.pos1_2arbmusk{left: 6.2vw}
.pos3_4arbmusk{left: 8.7vw}
.quad_arbmusk{left:7.7vw}

.pos1_2crus{left:5.5vw}

.pos3_4flag{left:12.4vw}

.pos2_3gr{left: 9.3vw;}

.pos1_2hell{left:7.6vw; top: 1.9vw}
.pos1_2_3hell{left:10.6vw;}

.pos1_2_3hwm{left:9.9vw;}

.quad_hm{left:5.5vw;}

.quad_jes{left:14vw; top: 1.9vw;}
.pos2_3jes{left:9vw;}

.pos1_2lep{left:5.5vw;}

.quad_maa{left:12.7vw}

.pos3_4occ{left: 7.2vw;}

.pos3_4pd1{left:7.1vw}
.pos3_4pd2{left:7.1vw; top: 1.9vw;}

.quad_sb{left: 5.6vw}

/*Combat and Camping skill positioning*/

#grid1{ left: 1.5vw; }
#grid2{ left: 6.1vw; }
#grid3{ left: 10.7vw; }
#grid4{ left: 15.3vw; }
#grid5{left: 19.85vw;}
#grid6{ left: 24.45vw; }
#grid7{ left: 29.1vw; }

#FlagGrid1{left:8.4vw;}
#FlagGrid2{left:13vw;}
#FlagGrid3{left:17.6vw;}
#FlagGrid4{left:22.2vw;}

#combatabom1{left: -4.8vw}
#combatabom2{ left: 3.6vw;}
#combatabom3{ left: 3.4vw}
#combatabom4{ left: 14.8vw}
#combatabom5{ left: 17.15vw}
#combatabom6{ left: 22vw}
#combatabom7{ left: 21.8vw}

#restabom1{ left: 11.6vw;}
#restabom2{ left: 16.8vw;}
#restabom3{ left: 20.45vw;}
#restabom4{ left: 26.5vw;}

#combatanti1{left:-1vw}
#combatanti2{ left:-1.2vw;}
#combatanti3{ left: 6.6vw}
#combatanti4{ left: 11.9vw}
#combatanti5{ left: 17vw}
#combatanti6{ left: 22.35vw}
#combatanti7{ left: 26.1vw}

#restanti1{ left: 11.1vw;}
#restanti2{ left: 16.5vw;}
#restanti3{ left: 20.5vw;}
#restanti4{ left: 25.2vw;}

#combatarb1{left: -1.2vw;}
#combatarb2{ left: 2.4vw;}
#combatarb3{ left: 6.55vw}
#combatarb4{ left: 12.3vw}
#combatarb5{ left: 17.3vw}
#combatarb6{ left: 20.65vw}
#combatarb7{ left: 24.8vw}

#restarb1{ left: 11.9vw;}
#restarb2{ left: 17.35vw;}
#restarb3{ left: 19.6vw;}
#restarb4{ left: 27.7vw;}

#combatmusk1{left: -1.1vw;}
#combatmusk2{ left: 2.4vw;}
#combatmusk3{ left: 6.55vw}
#combatmusk4{ left: 12.3vw}
#combatmusk5{ left: 17.3vw}
#combatmusk6{ left: 20.65vw}
#combatmusk7{ left: 24.8vw}

#restmusk1{ left: 11.9vw;}
#restmusk2{ left: 17.35vw;}
#restmusk3{ left: 19.6vw;}
#restmusk4{ left: 27.7vw;}


#combatbh1{left: -1.1vw}
#combatbh2{ left: 2.1vw;}
#combatbh3{ left: 8.2vw}
#combatbh4{ left: 12.2vw}
#combatbh5{ left: 17.5vw}
#combatbh6{ left: 22vw}
#combatbh7{ left: 21.8vw}

#restbh1{ left: 11.5vw;}
#restbh2{ left: 13.5vw;}
#restbh3{ left: 20.5vw;}
#restbh4{ left: 24.5vw;}

#combatcrus1{left: -1vw}
#combatcrus2{ left: 3.7vw;}
#combatcrus3{ left: 8.2vw}
#combatcrus4{ left: 12.85vw}
#combatcrus5{ left: 19vw}
#combatcrus6{ left: 22vw}
#combatcrus7{ left: 28.2vw}

#restcrus1{ left: 11.5vw;}
#restcrus2{ left: 16.5vw;}
#restcrus3{ left: 21.9vw;}
#restcrus4{ left: 25.4vw;}

#combatflag1{left: -3.7vw}
#combatflag2{ left: -1.3vw;}
#combatflag3{ left: -0.5vw}
#combatflag4{ left: 10.5vw}
#combatflag5{ left: 8.8vw}
#combatflag6{ left: 23.7vw}
#combatflag7{ left: 21.6vw}

#restflag1{ left: 6.5vw;}
#restflag2{ left: 10.9vw;}
#restflag3{ left: 15.9vw;}
#restflag4{ left: 20.8vw;}

#combatgr1{left: -1vw}
#combatgr2{ left: 3.5vw;}
#combatgr3{ left: 5.6vw}
#combatgr4{ left: 6.7vw}
#combatgr5{ left: 13.3vw}
#combatgr6{ left: 16.9vw}
#combatgr7{ left: 26.9vw}

#restgr1{ left: 13.65vw;}
#restgr2{ left: 17vw;}
#restgr3{ left: 19.8vw;}
#restgr4{ left: 24.9vw;}

#combathell1{left: -1vw}
#combathell2{ left: 3.7vw;}
#combathell3{ left: 6.45vw}
#combathell4{ left: 12.8vw}
#combathell5{ left: 12.4vw}
#combathell6{ left: 22.6vw}
#combathell7{ left: 21.2vw}

#resthell1{ left: 9.7vw;}
#resthell2{ left: 17.3vw;}
#resthell3{ left: 21.5vw;}
#resthell4{ left: 26.8vw;}

#combathwm1{left: -1vw}
#combathwm2{ left: 3.6vw;}
#combathwm3{ left: 7.6vw}
#combathwm4{ left: 10.8vw}
#combathwm5{ left: 12.5vw}
#combathwm6{ left: 14.7vw}
#combathwm7{ left: 21.7vw}

#resthwm1{ left: 12.3vw;}
#resthwm2{ left: 15.3vw;}
#resthwm3{ left: 19.8vw;}
#resthwm4{ left: 22.6vw;}

#combathm1{left: -1.05vw}
#combathm2{ left: 3.55vw;}
#combathm3{ left: 6.7vw}
#combathm4{ left: 12.6vw}
#combathm5{ left: 18.2vw}
#combathm6{ left: 23.7vw}
#combathm7{ left: 26.7vw}

#resthm1{ left: 8.9vw;}
#resthm2{ left: 17.5vw;}
#resthm3{ left: 21.5vw;}
#resthm4{ left: 24.7vw;}

#combatjes1{left: -0.8vw}
#combatjes2{ left: 1.3vw;}
#combatjes3{ left: 0.9vw}
#combatjes4{ left: 4.4vw}
#combatjes5{ left: 12.1vw;}
#combatjes6{ left: 21.5vw}
#combatjes7{ left: 26.2vw}

#restjes1{ left: 12.7vw;}
#restjes2{ left: 14.95vw;}
#restjes3{ left: 22.5vw;}
#restjes4{ left: 27vw;}

#combatlep1{left: -0.9vw}
#combatlep2{ left: 3.55vw;}
#combatlep3{ left: 3.3vw}
#combatlep4{ left: 5.7vw}
#combatlep5{ left: 19.4vw}
#combatlep6{ left: 16.6vw}
#combatlep7{ left: 25vw}

#restlep1{ left: 11.8vw;}
#restlep2{ left: 16.2vw;}
#restlep3{ left: 22.4vw;}
#restlep4{ left: 26.1vw;}

#combatmaa1{left: -0.8vw}
#combatmaa2{ left: 3vw;}
#combatmaa3{ left: 1.35vw}
#combatmaa4{ left: 13.85vw}
#combatmaa5{ left: 6.3vw}
#combatmaa6{ left: 20.1vw}
#combatmaa7{ left: 26.9vw}

#restmaa1{ left: 11.4vw;}
#restmaa2{ left: 17.3vw;}
#restmaa3{ left: 22.7vw;}
#restmaa4{ left: 24.6vw;}

#combatocc1{left: -1.1vw}
#combatocc2{ left: 3.6vw;}
#combatocc3{ left: 6.7vw}
#combatocc4{ left: 13vw}
#combatocc5{ left: 15.8vw}
#combatocc6{ left: 22.1vw}
#combatocc7{ left: 26.8vw}

#restocc1{ left: 12.4vw;}
#restocc2{ left: 14.8vw;}
#restocc3{ left: 22.4vw;}
#restocc4{ left: 24.6vw;}

#combatpd1{left: -3.4vw}
#combatpd2{ left: 3.7vw;}
#combatpd3{ left: 8.3vw}
#combatpd4{ left: 12.9vw}
#combatpd5{ left: 17.4vw}
#combatpd6{ left: 22.1vw}
#combatpd7{ left: 24.6vw}

#restpd1{ left: 10.6vw;}
#restpd2{ left: 18.5vw;}
#restpd3{ left: 20.4vw;}
#restpd4{ left: 26.3vw;}

#combatsb1{left: -1vw}
#combatsb2{ left: -0.5vw;}
#combatsb3{ left: 8.3vw}
#combatsb4{ left: 12.9vw}
#combatsb5{ left: 12.5vw}
#combatsb6{ left: 22.1vw}
#combatsb7{ left: 27.5vw}

#restsb1{ left: 10.6vw;}
#restsb2{ left: 17vw;}
#restsb3{ left: 20.2vw;}
#restsb4{ left: 25.7vw;}

#combatves1{left: -1vw}
#combatves2{ left: 3.6vw;}
#combatves3{ left: 8.4vw}
#combatves4{ left: 14.5vw}
#combatves5{ left: 18.7vw}
#combatves6{ left: 20.5vw}
#combatves7{ left: 26.7vw}

#restves1{ left: 12.7vw;}
#restves2{ left: 14.6vw;}
#restves3{ left: 19.4vw;}
#restves4{ left: 25.7vw;}

#genericamp1{ left: 0vw}
#genericamp2{ left: 4.3vw}
#genericamp3{left: 8.1vw}