:root {--common-color:#565656; --uncommon-color:rgb(0, 183, 82); --rare-color:rgb(0, 81, 255); --superrare-color:rgb(91, 3, 158); --coins-color:darkorange; --sand-color: rgb(143, 99, 19); --wood-color: rgb(105, 90, 53); --gold-color: goldenrod; --silver-color: silver; --tin-color: rgb(198, 142, 247); --iron-color: rgb(131, 53, 53); --titanium-color:rgb(85, 84, 84); --concrete-color: rgb(243, 213, 139); --fossil-color:rgb(142, 34, 64); --copper-color:rgb(54, 37, 94); --leather-color:rgb(87, 87, 31); --stone-color: cadetblue; --steel-color: darkgray; --glass-color: lightblue; --rubber-color:mediumpurple; --plastic-color:dodgerblue; --clay-color:rgba(145, 45, 8, 0.818); --bone-color:palegoldenrod; --oil-color:rgb(123, 123, 123); --coral-color:lightcoral;}

html, body {min-height:100%; margin:0; padding:0;}
body {font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:500;}
@media only screen and (min-device-width: 768px) {body {font-size:16px;}}
.panel {margin-top:10px; margin-bottom:0;}
.panel-heading {padding:5px 8px 3px 8px;}
.panel-body {padding:5px;}
data {display:none;}

/* loading screens */
#loading {display:grid; text-align:center; align-items:center; z-index:8; width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0,0,0,.7);}
#loading_init {position:relative; display:grid; text-align:center; align-items:center; z-index:8; width:100%; height:100%; position:fixed; top:0; left:0; background-color:white;}
#loading_init .progress-container {z-index:auto; height:0.8rem; width:80vw; margin:0 auto; background:#000;}
#loading_init .progress-container .init-progress {z-index:auto; height:100%; width:0; background:cornflowerblue; transition:width 0.4s ease;}
#loading_init p {position:absolute; margin:-30px auto 0 auto;}

/* top nav bar */
.navbar {margin-bottom:0; border:0; z-index:6;}
.navbar .container-fluid {background-color:#043c6c;}
.navbar-toggle,.navbar-toggle:hover,.navbar-toggle:focus {background-color:transparent!important; border:0!important;}
.icon-bar {background-color:#fff!important;}
.navbar a {color:#fff!important;}
.navbar-brand,.navbar-brand:link,.navbar-brand:hover,.navbar-brand:active,.navbar-brand:visited {color:#fff;}
.navbar-brand small {font-size:50%;}
.navbar-brand img {display:inline; height:18px;}
.navbar-right li {text-align:right; font-size:smaller; float:left;}
.nav>li>a {padding:0 0 0 10px;}
@media only screen and (min-device-width: 768px) {.nav>li>a {padding:15px 15px 0 0;}}
@media only screen and (max-device-width:480px) {.labels {display:none;} /* hide top nav labels on mobile */}
div.svg-mum a {display:flex;}
div.svg-mum svg {max-width:100px;height:130%;font-weight:600;display:inline-block;margin:-4px -18px 0 -18px;}
#hamburger a {cursor:pointer;}

/* main nav */
#mainNav .btn-md {line-height:1; border-radius:0;}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {text-shadow: 0 0 3px rgba(233, 233, 233, 0.8), 0 0 6px rgba(211, 211, 211, 0.6), 0 0 9px rgba(127, 127, 127, 0.4);}

/* chat */
.chat-message {padding:5px;}
.chat-message .date {font-size:smaller; color:darkred;}
.chat-message .user {color:darkgreen;}
.chat-message .user.system {display:none;}
.chat-message .msg {color:#666;}
.chat-message .msg.system {font-style:italic; font-weight:600; color:cornflowerblue;}
.chat-message .msg.announce {font-style:normal; font-weight:700; color:crimson; text-transform:uppercase;}
#divChat {display:grid; position:fixed; width:60vw; min-width:300px; height:40vh; min-height:250px; bottom:5px; right:5px; background-color:aliceblue; border-top-left-radius:8px; border-top-right-radius:8px; box-shadow:0 0 28px rgba(0,0,0,0.3); grid-template-rows:auto 1fr auto; gap:2px; z-index:6;}
#divChat.mini {height:20vh;}
#divChat.full {height:80vh;}
#divChat #chatResult {overflow-y:scroll; width:100%; height:100%;}
#divChatHeader a {color:white; cursor:pointer; margin-left:8px;}
#divChatHeader {border-top-left-radius:8px; border-top-right-radius:8px; padding:8px; background:#111; color:#fff; font-weight:700; display:grid; grid-template-columns:1fr 1fr; line-height:initial;}
#chatFormContainer {padding:5px 0; margin:0;}
#cchatForm.mini {display:none;}
#cchatForm.full {display:initial;}
#chatMessage {margin-left:5px; width:calc(100% - 85px); display:inline;}
#chatSubmit {width:70px; margin-right:5px; display:inline;}

/* home tab navigation */
#homeTabs {margin-top:10px;}
#homeTabs>li {width:calc(100% / 4);}
#homeTabs>li>a {padding:6px 3px;}

/* postcards */
#postcardList p {position:relative; margin:5px 0; padding:5px 5px 5px 33px; background:#fafafa; color:#ccc;}
#postcardList p::before {content:"\f410"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:10px;}
#postcardList p.found {background:rgb(228, 247, 226); color:rgb(7, 117, 7);}
#postcardList p.found::before {content:"\f058";}

/* character */
#sectionHome, #sectionInventory {margin-bottom:10px;}
#playerStats table {margin-bottom:0; display:flex; justify-content:center; width:100%;}
#playerStats td {border:0; padding:1px; white-space:nowrap; flex-grow:1; flex-basis:0;}
#playerStats .container {border-top:1px solid #eee; padding-top:6px; margin-top:3px; display:grid; grid-template-columns:1fr 1fr 1fr; justify-items:center; width:auto;}
#playerStats .container:before {content:unset;}
#playerStats #player_level {color:cornflowerblue;}
#playerStats #player_xp {color:crimson;}
#playerStats div {cursor:help;}
@media only screen and (max-device-width:480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
  #playerStats .container b:first-child::before {content:"\A"; white-space:pre;}
}
#heroFish img {max-width:100px;}
#heroFish table {margin-bottom:0; display:flex; justify-content:center; width:100%;}
#heroFish td {border:0; padding:1px; white-space:nowrap; flex-grow:1; flex-basis:0;}
#heroFish .container {padding-top:6px; margin-top:3px; display:grid; justify-items:center; grid-template-columns:repeat(3, 1fr); gap:5px; width:100%;}
#heroFish .container:before {content:unset;}
#heroFish .grid-health {grid-column:span 3;}
#heroFish .grid-heading {grid-column:span 3; border-top:1px solid #eee; width:100%; padding-top:10px;}

/* facilities */
#baseStats {background-color:#f5f5f5; padding:0 5px; margin-top:-8px;}
#baseStats table {margin-bottom:0; border-collapse:separate; border-spacing:0 10px;}
#baseStats td {border:0; padding:0; vertical-align:middle; background-color:#fff;}
#baseStats td.left {border-top-left-radius:10px; border-bottom-left-radius:10px; text-align:center; padding:0 10px;}
#baseStats td.right {padding:10px 10px 5px 0; border-top-right-radius:10px; border-bottom-right-radius:10px;}
#baseStats td h4 {font-size:1em; margin:0; padding:2px 0; font-weight:700; color:black;}
#baseStats td h4 small {font-size:1em; font-weight:700; color:dodgerblue;}
#baseStats td p {margin:0; padding:2px 0;}
#baseStats td .btn {margin:-5px 0 10px 0; display:block;}
#baseStats td img {width:60px; margin:10px 0; border:0;}
#baseStats td .fa-bounce {position:absolute; margin:0 0 0 -8px; color:green;}
#baseStats .coins {font-weight:500; color:var(--coins-color);}
#baseStats .sand {font-weight:500; color:var(--sand-color);}
#baseStats .tin {font-weight:500; color:var(--tin-color);}
#baseStats .bone {font-weight:500; color:var(--bone-color);}
#baseStats .fossil {font-weight:500; color:var(--fossil-color);}
#baseStats .coral {font-weight:500; color:var(--coral-color);}
#baseStats .stone {font-weight:500; color:var(--stone-color);}
#baseStats .clay {font-weight:500; color:var(--clay-color);}
#baseStats .leather {font-weight:500; color:var(--leather-color);}
#baseStats .wood {font-weight:500; color:var(--wood-color);}
#baseStats .concrete {font-weight:500; color:var(--concrete-color);}
#baseStats .glass {font-weight:500; color:var(--glass-color);}
#baseStats .plastic {font-weight:500; color:var(--plastic-color);}
#baseStats .rubber {font-weight:500; color:var(--rubber-color);}
#baseStats .oil {font-weight:500; color:var(--oil-color);}
#baseStats .iron {font-weight:500; color:var(--iron-color);}
#baseStats .steel {font-weight:500; color:var(--steel-color);}
#baseStats .titanium {font-weight:500; color:var(--titanium-color);}
#baseStats .copper {font-weight:500; color:var(--copper-color);}
#baseStats .silver {font-weight:500; color:var(--silver-color);}
#baseStats .gold {font-weight:500; color:var(--gold-color);}
#baseUpgrade {background:rgb(252,248,190); background:radial-gradient(circle, rgba(252,248,190,1) 0%, rgba(252,233,80,1) 50%, rgba(252,248,190,1) 100%); margin-top:3px;}
#baseUpgrade b {color:mediumpurple;}
#baseUpgrade a {max-width:200px; margin:0 auto;}
.base-upgrade-timer {font-style:normal;}

/* intro divs */
div.intro {padding-top:10px; width:auto; overflow:auto;}
div.intro div {float:left; margin-bottom:10px; position:relative; top:0;}
div.intro b {display:block;}
div.intro i {font-weight:500; font-style:normal;}
div.intro i.total {color:gray;}
div.intro i.discovered {color:lightseagreen;}
div.intro i.mastered {color:darkorange;}
div.intro u {color:mediumseagreen; text-decoration:none;}
div.intro em {color:mediumvioletred; font-style:normal;}
div.intro p {clear:both;}
div.intro .btn {float:right;}
div.intro::after {content:""; display:table; clear:both;}

/* hint tags */
div.intro p.hint {color:grey; font-style:italic; position:relative; top:-10px;}
.hinttags {color:grey; border-bottom:dotted lightgrey 2px;margin-left:5px; cursor:help;}
.hinttags:hover, .hinttags:active, .hinttags:visited, .hinttags:link {text-decoration:none;}
.hinttags::before {content:"#";}

/* map tab navigation */
#mapTabs {margin-top:10px;}
#mapTabs>li {width:calc(100% / 3);}
#mapTabs>li>a {padding:6px 12px;}

#mapList .zone-sl {margin-bottom:20px; background-color:aliceblue;border-radius:8px;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);}
#mapList .zone-sl i {margin-right:6px;}
#mapList .zone-weather {position:relative;float:right;margin:10px;z-index:auto;font-size:1em;}
#mapList .zone-weather::before {font-family:"Font Awesome 6 Free"; font-weight:900; padding-right:5px;}
#mapList .zone-weather.sunny {color:darkorange;}
#mapList .zone-weather.sunny::before {content:"\f185";}
#mapList .zone-weather.sunny::after {content:"Sunny";}
#mapList .zone-weather.cloudy {color:gray;}
#mapList .zone-weather.cloudy::before {content:"\f0c2";}
#mapList .zone-weather.cloudy::after {content:"Cloudy";}
#mapList .zone-weather.windy {color:rosybrown;}
#mapList .zone-weather.windy::before {content:"\f72e";}
#mapList .zone-weather.windy::after {content:"Windy";}
#mapList .zone-weather.stormy {color:black;}
#mapList .zone-weather.stormy::before {content:"\f0e7";}
#mapList .zone-weather.stormy::after {content:"Stormy";}
#mapList .zone-weather.rainy {color:royalblue;}
#mapList .zone-weather.rainy::before {content:"\f73d";}
#mapList .zone-weather.rainy::after {content:"Rainy";}
#mapList .zone-weather.snowy {color:turquoise;}
#mapList .zone-weather.snowy::before {content:"\f2dc";}
#mapList .zone-weather.snowy::after {content:"Snowy";}
#mapList .zone-weather.foggy {color:olivedrab;}
#mapList .zone-weather.foggy::before {content:"\f75f";}
#mapList .zone-weather.foggy::after {content:"Foggy";}
#mapList .zone-weather.volcanic {color:red;}
#mapList .zone-weather.volcanic::before {content:"\f770";}
#mapList .zone-weather.volcanic::after {content:"Volcanic";}
#mapList .zone-heading {color:black;font-size:larger;font-weight:bold;padding:10px;}
#mapList .zone-heading small {font-size:smaller;color:indigo;font-weight:normal;}
#mapList .zone-icons {color:indigo; padding:0 10px 10px 10px;}
#mapList .zone-icons i:not(:first-child) {margin-left:15px;}
#mapList .zone-desc {padding:0 10px 10px 10px;}
#mapList .zone-desc ul {padding:0; margin:0;}
#mapList .zone-desc li {list-style-type:none; display:inline-block; margin:4px 5px 4px 0; border:1px solid #ccc; padding:3px 6px; border-radius:5px;}
#mapList .zone-button {display:flex;justify-content:center;padding:10px 0;width:100%;/*background-color:green;color:#fff;*/border-radius:0 0 8px 8px;}
#mapList .zone-button:hover, #mapList .zone-button:active, #mapList .zone-button:visited {color:#fff; text-decoration:none;}
#mapList .zone-button.disabled {background-color:lightgray; color:darkgray; pointer-events:none;}
#mapList .zone-sl.locked .zone-button {background-color:lightgray;}
#mapList .zone-sl.locked * {background-color:#eee; color:darkgray; pointer-events:none;}
#mapList .button-pen {--penguin_main_color:#4d4d4d; --penguin_sub_color1:#fff; --penguin_sub_color2:#e9b800; --penguin_base_color:#e9b800; --penguin_border_radius1:60px 60px 40px 40px / 48px 48px 30px 30px; --penguin_border_radius2:70px 70px 40px 40px / 48px 48px 30px 30px; --penguin_border_radius3:40px 40px 40px 40px / 48px 48px 30px 30px;}
#mapList .button-pen {position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:40px; /*80px*/ box-sizing:border-box; text-decoration:none; background:var(--penguin_main_color); font-family:'Fredoka One', cursive;}
#mapList .button-pen-wrapper {display:flex; justify-content:center; align-items:center; position:relative; z-index:1; width:100%; height:100%; border-radius:40px; overflow:hidden;}
#mapList .button-pen-wrapper::before, #mapList .button-pen-wrapper::after {transition:all .5s ease;}
#mapList .characterBox {position:absolute; top:-14px; left:60%; right:0; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; width:126px; height:16px; /*56px*/}
#mapList .button-pen-text {position:relative; z-index:3; font-size:1em; letter-spacing:4px; color:var(--penguin_base_color); transition:all .3s ease;}
#mapList .character {position:relative; width:40px; height:36px; box-sizing:border-box; border:solid 3px #000; background:var(--penguin_main_color); border-radius:var(--penguin_border_radius1); animation:pen-sleep 1s ease infinite alternate;}
#mapList .character::before {content:''; position:absolute; top:-12px; left:22px; width:12px; height:12px; background:#000; clip-path:path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z');}
#mapList .character-pen-face {position:absolute; z-index:2; top:15px; left:0; right:0; margin:0 auto; width:12px; height:6px; background:var(--penguin_sub_color2); border-radius:50% 50% 50% 50% / 78% 78% 22% 22%; transition:.2s;}
#mapList .character-pen-face::before, #mapList .character-pen-face::after {content:''; position:absolute; top:-4px; width:8px; height:2px; border-radius:4px; background:#000;}
#mapList .character-pen-face::before {left:-5px;}
#mapList .character-pen-face::after {right:-5px;}
#mapList .button-pen .charactor-pen-face2 {position:absolute; z-index:1; bottom:0; left:0; right:0; margin:auto; width:30px; height:10px; border-radius:50%; background:#fff; animation:pen-face 1s ease infinite alternate;}
#mapList .button-pen .charactor-pen-face2::before, #mapList .button-pen .charactor-pen-face2::after {content:''; position:absolute; top:-8px; width:17px; height:10px; border-radius:50%; background:#fff;}
#mapList .button-pen .charactor-pen-face2::before {left:-4px;}
#mapList .button-pen .charactor-pen-face2::after {right:-4px;}
#mapList .button-pen:hover .button-pen-text {letter-spacing:6px;}
#mapList .button-pen:hover .wakeup {animation:pen-wakeup .2s ease; animation-fill-mode:forwards;}
#mapList .button-pen:hover .wakeup .character-pen-face {top:20px;}
#mapList .button-pen:hover .wakeup .character-pen-face::before, #mapList .button-pen:hover .wakeup .character-pen-face::after {animation:pen-eye 5s linear infinite;}
#mapList .button-pen:hover .wakeup:nth-child(2) .character-pen-face::before, #mapList .button-pen:hover .wakeup:nth-child(2) .character-pen-face::after {animation:pen-eye_2 5s linear infinite;}
#mapList .button-pen:hover .wakeup .charactor-pen-face2 {animation:pen-face_wakeup .2s ease; animation-fill-mode:forwards;}
#mapList .button-pen:hover .wakeup .charactor-pen-face2::before, #mapList .button-pen:hover .wakeup .charactor-pen-face2::after {top:-12px; height:18px;}
@keyframes pen-sleep {0% {height:36px; border-radius:var(--penguin_border_radius1);} 100%{height:32px; border-radius:var(--penguin_border_radius2);}}
@keyframes pen-wakeup {0% {height:32px; border-radius:var(--penguin_border_radius2);} 100%{height:56px; border-radius:var(--penguin_border_radius3);}}
@keyframes pen-eye {0%{top:-6px; width:6px; height:6px;} 30%{top:-6px; width:6px; height:6px;} 32%{top:-4px; width:8px; height:2px;} 34%{top:-6px; width:6px; height:6px;} 70%{top:-6px; width:6px; height:6px;} 72%{top:-4px; width:8px; height:2px;} 74%{top:-6px; width:6px; height:6px;} 76%{top:-4px; width:8px; height:2px;} 78%{top:-6px; width:6px; height:6px;} 100%{top:-6px; width:6px; height:6px;}}
@keyframes pen-eye_2 {0%{top:-6px; width:6px; height:6px;} 10%{transform:translateX(0);} 12%{transform:translateX(3px);} 20%{top:-6px; width:6px; height:6px;} 22%{top:-4px; width:8px; height:2px;} 24%{top:-6px; width:6px; height:6px;} 25%{transform:translateX(3px);} 27%{transform:translateX(0);} 74%{top:-6px; width:6px; height:6px; transform:translateX(0);} 76%{top:-4px; width:8px; height:2px; transform:translateX(3px);} 78%{top:-6px; width:6px; height:6px;} 80%{top:-4px; width:8px; height:2px;} 82%{top:-6px; width:6px; height:6px;} 85%{transform:translateX(3px);} 87%{transform:translateX(0);} 100%{top:-6px; width:6px; height:6px; transform:translateX(0);}}
@keyframes pen-face {0%{height:14px;} 100%{height:10px;}}
@keyframes pen-face_wakeup {0%{height:14px;} 100%{height:28px;}}

/* fish tab navigation */
#fishTabs {margin-top:10px;}
#fishTabs>li {width:calc(100% / 6); font-size:1em; text-align:center;}
#fishTabs>li>a {padding:6px 3px; font-size:1em; text-align:center;}

/* general fish list grids */
.list-group {margin:0 1px 10px 1px; width:-webkit-fill-available;}
.list-group-item {padding:0;}
.list-group-item .btn {font-weight:500;}
.list-group-item .btn[disabled] {opacity:initial;}
#boosterList .list-group-item .btn[disabled] {background-color:lavender;}
.egg-timer {color:initial;}
.emulated-flex-gap {display:grid; grid-template-columns:1fr 1fr 1fr 1fr;}
.emulated-flex-gap > div {display:flex; justify-content:center; align-items:center; white-space:nowrap; overflow:hidden;}
.emulated-flex-gap::before {content:unset;}
.popup-fish-info {text-overflow:ellipsis; overflow:hidden;}
.fish-list {padding:0; margin:0;}
.fish-list.dnalab .cell {background-color:rgb(230, 255, 216); border-color:lightseagreen;}
.fish-list.dnalab .cell a {background-color:lightseagreen; border-color:lightseagreen; color:white;}
.fish-list.dnalab .cell::before {background-color:rgb(230, 255, 216);}
.fish-list.dnalab .medal {position:absolute; top:5px; right:5px;}
.fish-list.dnalab .medal i {color:goldenrod; font-size:x-large;}
.fish-list.dnalab p.medal {display:none;} /* by default hide medal */
.fish-list.dnalab .mastered p.medal {display:block;} /* if mastered then show */
.fish-list.dnalab .mastered {background-color:lightgoldenrodyellow; border-color:darkorange;}
.fish-list.dnalab .mastered a {background-color:darkorange; border-color:darkorange; color:white;}
.fish-list.dnalab .mastered::before {background-color:lightgoldenrodyellow;}
.fish-list.dnalab .shadow p.level {display:none;}
.fish-list.dnalab .shadow {background-color:#eee; border-color:darkgray;}
.fish-list.dnalab .shadow a {background-color:darkgray; border-color:darkgray; color:white;}
.fish-list.dnalab .shadow::before {background-image:url(/img/no_fish.png);background-size:52px;background-color:#eee;}
.fish-list .cell::before {background-size:130px;width:130px;height:103px;display:block;margin:auto;content:'';background-repeat:no-repeat;background-position:50% 70%;}
@media only screen and (max-device-width:480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
  .fish-list .cell::before {background-size:79px;width:79px;height:69px;}
  .fish-list.dnalab .shadow::before {background-size:34px;width:79px;height:69px;}
  .fish-list {font-size:smaller;}
  .fish-list.dnalab .medal i {font-size:larger;}
}
@media only screen and (min-device-width: 768px) {.fish-list {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}}
.fish-list .level {position:absolute; top:2px; left:4px; color:cornflowerblue;}
.fish-list .del {position:absolute; top:2px; right:4px;}
.fish-list .del a {color:lightgray; cursor:pointer;}

/* Miner list */
#minerList {display:flex; flex-wrap:wrap; margin-left:-10px; margin-right:-10px;}
#minerList .achievement {border:1px #eee solid; border-radius:5px; padding:5px; margin:0 8px 8px 8px; background-color:snow; width:100%; display:inline-grid; grid-template-columns:1fr 2fr; align-items:center;}
#minerList .achievement img {display:block; width:inherit;}
@media only screen and (min-device-width: 768px) {#minerList .achievement {width:calc(50% - 16px);}}
@media only screen and (min-device-width: 1280px) {#minerList .achievement img {max-width:60%; margin:0 auto;}}
#minerList .achievement a.notyet {visibility:hidden;}
#minerList .achievement div {display:inline-block; vertical-align:top; width:100%; color:lightgray;}
#minerList .achievement div div {display:block;}
#minerList .achievement .left {text-align:center; padding-bottom:10px;}
#minerList .achievement b {font-weight:500;}
#minerList .unlocked b {font-weight:700; color:darkgreen;}
#minerList .unlocked strong {color:cornflowerblue;}
#minerList .unlocked div {color:initial;}
#minerList .unlocked {background-color:honeydew;}

/* inventory tab navigation */
#invTabs {margin-top:10px;}
#invTabs>li {width:calc(100% / 4);}
#invTabs>li>a {padding:6px 12px;}

/* inventory list */
#txtInventory {padding:0;}
#txtInventory .panel:first-child {margin-top:0;}
#txtInventory .panel-body {display:inline-flex; flex-wrap:wrap;}
#txtInventory .panel-body {display:grid; grid-template-columns:1fr 1fr 1fr;}
#txtInventory .panel-body div {margin:5px 8px; font-weight:600;}
#txtInventory .panel-body div p {margin:0 0 0 17px; padding:0; font-weight:400;}
#txtInventory .panel-body div p.full {color:red;}
#txtInventory .panel-body::before, #txtInventory .panel-body::after {content:none; /* Ensure pseudo-elements do not interfere with the grid layout */}
#txtInventory div.icon::before {content:""; display:inline-block; width:12px; height:12px; background-size:cover; margin-right:5px;}
#txtInventory div.coins::before {background-image:url(/img/i/coins.png?v=1);}
#txtInventory div.seashell::before {background-image:url(/img/i/seashell.png?v=2);}
#txtInventory div.ticket::before {background-image:url(/img/i/ticket.png?v=1);}
#txtInventory div.sand::before {background-image:url(/img/i/mat_sand.png?v=1);}
#txtInventory div.tin::before {background-image:url(/img/i/mat_tin.png?v=1);}
#txtInventory div.bone::before {background-image:url(/img/i/mat_bone.png?v=1);}
#txtInventory div.fossil::before {background-image:url(/img/i/mat_fossil.png?v=1);}
#txtInventory div.coral::before {background-image:url(/img/i/mat_coral.png?v=1);}
#txtInventory div.stone::before {background-image:url(/img/i/mat_stone.png?v=1);}
#txtInventory div.clay::before {background-image:url(/img/i/mat_clay.png?v=1);}
#txtInventory div.leather::before {background-image:url(/img/i/mat_leather.png?v=1);}
#txtInventory div.wood::before {background-image:url(/img/i/mat_wood.png?v=1);}
#txtInventory div.concrete::before {background-image:url(/img/i/mat_concrete.png?v=1);}
#txtInventory div.glass::before {background-image:url(/img/i/mat_glass.png?v=1);}
#txtInventory div.plastic::before {background-image:url(/img/i/mat_plastic.png?v=1);}
#txtInventory div.rubber::before {background-image:url(/img/i/mat_rubber.png?v=1);}
#txtInventory div.oil::before {background-image:url(/img/i/mat_oil.png?v=1);}
#txtInventory div.iron::before {background-image:url(/img/i/mat_iron.png?v=1);}
#txtInventory div.steel::before {background-image:url(/img/i/mat_steel.png?v=1);}
#txtInventory div.titanium::before {background-image:url(/img/i/mat_titanium.png?v=1);}
#txtInventory div.copper::before {background-image:url(/img/i/mat_copper.png?v=1);}
#txtInventory div.silver::before {background-image:url(/img/i/mat_silver.png?v=1);}
#txtInventory div.gold::before {background-image:url(/img/i/mat_gold.png?v=1);}
#txtInventory div.pearl::before {background-image:url(/img/i/gem_pearl.png?v=1);}
#txtInventory div.sapphire::before {background-image:url(/img/i/gem_sapphire.png?v=1);}
#txtInventory div.emerald::before {background-image:url(/img/i/gem_emerald.png?v=1);}
#txtInventory div.ruby::before {background-image:url(/img/i/gem_ruby.png?v=1);}
#txtInventory div.amethyst::before {background-image:url(/img/i/gem_amethyst.png?v=1);}
#txtInventory div.topaz::before {background-image:url(/img/i/gem_topaz.png?v=1);}
#txtInventory div.citrine::before {background-image:url(/img/i/gem_citrine.png?v=1);}
#txtInventory div.aquamarine::before {background-image:url(/img/i/gem_aquamarine.png?v=1);}
#txtInventory div.agate::before {background-image:url(/img/i/gem_agate.png?v=1);}
#txtInventory div.turquoise::before {background-image:url(/img/i/gem_turquoise.png?v=1);}
#txtInventory div.jade::before {background-image:url(/img/i/gem_jade.png?v=1);}
#txtInventory div.opal::before {background-image:url(/img/i/gem_opal.png?v=1);}
#txtInventory div.garnet::before {background-image:url(/img/i/gem_garnet.png?v=1);}
#txtInventory div.moonstone::before {background-image:url(/img/i/gem_moonstone.png?v=1);}
#txtInventory div.diamond::before {background-image:url(/img/i/gem_diamond.png?v=1);}

/* rod list */
#rodList ul {width:100%; padding:0;}
#rodList li {position:relative; list-style:none; padding:5px 10px; font-size:1em; border:1px solid #eee; margin:0 auto 10px 0;}
@media only screen and (min-device-width: 768px) {
  #rodList ul {display:flex; flex-wrap:wrap; column-count:2; column-gap:10px;}
  #rodList li {break-inside:avoid; flex:1 1 calc(50% - 10px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; width:calc(50% - 10px); max-width:calc(50% - 10px);}
}
#rodList div {display:inline-block; width:100%;}
#rodList div.right {position:absolute; top:8px; right:8px; text-align:right;}
#rodList b {font-weight:600; font-size:medium; display:block;}
#rodList b.uncommon {color:var(--uncommon-color);}
#rodList b.rare {color:var(--rare-color);}
#rodList u {text-decoration:none; color:darkorange;}
#rodList small {color:darkgray; display:block; padding-bottom:2px;}
#rodList a[disabled] {background:#333; color:white; font-weight:700;}
#rodList .ajax-rod-del {margin-right:3px; color:gray;}
#invRods .quickfix {width:auto; padding-top:5px; clear:both;}

/* egg list */
#eggList ul {padding:0;}
#eggList ul li:nth-child(odd) {background-color: #f0f0f0;}
#eggList ul li:nth-child(even) {background-color: #ffffff;}
#eggList li {list-style:none; padding:5px 10px; font-size:1em;}
#eggList div {display:inline-block; vertical-align:middle;}
#eggList div.left {width:60%; text-align:left;}
@media only screen and (min-device-width: 768px) {#eggList div.left br {display:none;}}
#eggList div.mid {width:25%; text-align:right;}
#eggList div.right {width:15%; text-align:left;}
#eggList div.mid .form-control {width:-webkit-fill-available; height:100%; font-size:0.85em; padding:6px;}
#eggList div.right .btn {line-height:unset; width:-webkit-fill-available;}
#eggList b {font-weight:600; color:cornflowerblue;}
#eggList i {font-style:normal; color:lightseagreen;}
#eggList i.full {color:red;}
#eggList u {text-decoration:none; color:darkorange;}
#eggList small {font-size:smaller;}

/* bait farm list */
#baitFarmList {padding:0;}
#baitFarmList .cell {font-weight:700; padding:6px 0 2px 0;}
#baitFarmList .cell::before {background-size:69px;width:69px;height:69px;}
@media only screen and (max-device-width:480px) {
    /* styles for mobile browsers smaller than 480px; (iPhone) */
  #baitFarmList .cell::before {background-size:32px;width:32px;height:32px;}
  #baitFarmList {font-size:smaller;}
}
#baitFarmList .list-group p {margin:-3px 0 0 0; padding:0; font-weight:500; color:lightseagreen;}
#baitFarmList .list-group li.disabled p {color:darkgray;}
#baitFarmList .worm::before {background-image:url('/img/i/bait_worm.png?v=1');display:block;margin:auto auto 4px auto;content:'';}
#baitFarmList .collected::before {background-image:url('/img/i/bait_collected.png?v=1');display:block;margin:auto auto 4px auto;content:'';}
@media only screen and (min-device-width: 768px) {#baitFarmList {grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;}}

/* bait farm merge list */
#baitMergeList ul {width:100%; padding:0;}
#baitMergeList ul li:nth-child(odd) {background-color: #f0f0f0;}
#baitMergeList ul li:nth-child(even) {background-color: #ffffff;}
#baitMergeList li {list-style:none; padding:5px 10px; display:flex; justify-content:space-between; align-items:center;}
#baitMergeList div {display:inline-block; vertical-align:middle;}
#baitMergeList a {margin:0 2px;}
#baitMergeList b {font-weight:600; color:cornflowerblue;}
#baitMergeList i {font-style:normal; color:lightseagreen;}
#baitMergeList i.full {color:red;}
#baitMergeList em {font-style:normal; color:crimson;}
#baitMergeList small {color:darkgray;}
#invBaitFarm .merge {width:auto; padding-top:5px; clear:both;}
#invBaitFarm hr {margin:0; border-top:1px solid #eee; clear:both;}

/* lucky wheel */
#divLuckyWheel {width:100%; height:100%; position:fixed; bottom:0; left:0; background:rgba(82, 58, 3, 0.95); z-index:7; display:none;}
#divLuckyWheel .container {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:90%;}
#divLuckyWheel p.neon {width:100%; text-align:center;}
#divLuckyWheel p.neon u {color:white; font-size:3em; text-decoration:none; animation:neon 1.1s ease-in-out infinite alternate;}
@media only screen and (min-device-width:768px) {#divLuckyWheel p.neon u {font-size:2em;}}
@keyframes neon {from {text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px yellow, 0 0 35px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 75px yellow;} to {text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px yellow, 0 0 35px yellow}}
#divLuckyWheel .peg, #divLuckyWheel .wheelSVG {visibility:hidden;}
#divLuckyWheel .centerCircle, #divLuckyWheel .valueContainer, #divLuckyWheel .wheelOutline, #divLuckyWheel .wheelText {pointer-events:none;}
#divLuckyWheel .wheelContainer {position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; margin:0; padding:0;}
#divLuckyWheel .wheelSVG {position:relative; overflow:visible; height:45vh;}
@media only screen and (min-device-width:768px) {
  #divLuckyWheel .wheelSVG {height:50vh;}
  #divLuckyWheel .btn-block {max-width:40vw; margin-left:auto; margin-right:auto;}
  #divLuckyWheel br {content:"";}
  #divLuckyWheel br:after {content:"\00a0";}
}
#divLuckyWheel .wheelText {text-anchor:start; -webkit-user-select:none; user-select:none;}
#divLuckyWheel .wheelText tspan {text-anchor:middle; letter-spacing:2px;}
#divLuckyWheel .toast {opacity:0; position:relative; overflow:hidden; color:white; width:80vw;}
#divLuckyWheel .toast p {font-size: 1.5em; text-align:center;}

/* fishing */
#divFishing {width:100%; height:100%; position:fixed; bottom:0; left:0; background:rgba(0, 94, 184, 0.95); z-index:7; display:none;}
#divFishing .container {position:fixed; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column;}
#divFishing .ocean {position:relative; width:100vw; height:100vh; background-image:linear-gradient(0deg, #182848, #2980b9);}
#divFishing #playerXP {width:inherit; margin:20px auto 0 auto; font-weight:700; color:deepskyblue; font-size:1.5rem;}
#divFishing #playerXP i {font-style:normal;}
#divFishing #oceanText {width:inherit; margin:20px auto 10px auto; overflow:auto; flex-grow:1; font-weight:700; color:white; font-size:1.5rem;}
#divFishing #oceanText::-webkit-scrollbar {width:0.5em;}
#divFishing #oceanText::-webkit-scrollbar-thumb {background-color:rgba(0, 0, 0, 0.5);}
#divFishing #oceanText::-webkit-scrollbar-track {background-color:rgba(0, 0, 0, 0.1);}
#divFishing #oceanText p.stories {color:lightblue;}
#divFishing #oceanText p.fishinginc {color:greenyellow;}
#divFishing #oceanText p.rodproc {color:black;}
#divFishing #oceanText p.map {color:orange;}
#divFishing #oceanText p.breeder {color:orange;}
#divFishing #oceanText p.explorer {color:orange;}
#divFishing #oceanText p.feeder {color:orange;}
#divFishing #oceanText p.builder {color:orange;}
#divFishing #oceanText p.booster {color:orange;}
#divFishing #oceanText p.miner {color:orange;}
#divFishing #oceanText p.steal {color:lightcoral;}
#divFishing #oceanText p.blueprint b {color:orangered;}
#divFishing #oceanText p.manual b {color:mediumvioletred;}
#divFishing #oceanText p.action span {background-color:black;}
#divFishing #oceanText p.sand span {color:var(--sand-color);}
#divFishing #oceanText p.tin span {color:var(--tin-color);}
#divFishing #oceanText p.bone span {color:var(--bone-color);}
#divFishing #oceanText p.fossil span {color:var(--fossil-color);}
#divFishing #oceanText p.coral span {color:var(--coral-color);}
#divFishing #oceanText p.stone span {color:var(--stone-color);}
#divFishing #oceanText p.clay span {color:var(--clay-color);}
#divFishing #oceanText p.leather span {color:var(--leather-color);}
#divFishing #oceanText p.wood span {color:var(--wood-color);}
#divFishing #oceanText p.concrete span {color:var(--concrete-color);}
#divFishing #oceanText p.glass span {color:var(--glass-color);}
#divFishing #oceanText p.plastic span {color:var(--plastic-color);}
#divFishing #oceanText p.rubber span {color:var(--rubber-color);}
#divFishing #oceanText p.oil span {color:var(--oil-color);}
#divFishing #oceanText p.iron span {color:var(--iron-color);}
#divFishing #oceanText p.steel span {color:var(--steel-color);}
#divFishing #oceanText p.titanium span {color:var(--titanium-color);}
#divFishing #oceanText p.copper span {color:var(--copper-color);}
#divFishing #oceanText p.silver span {color:var(--silver-color);}
#divFishing #oceanText p.gold span {color:var(--gold-color);}
#divFishing #oceanText p.coins span {color:var(--coins-color);}
#divFishing .bubble {width:30px; height:30px; border-radius:100%; position:absolute; background-color:white; bottom:-30px; opacity:0.2; animation:bubble 15s ease-in-out infinite, sideWays 4s ease-in-out infinite alternate;}
@keyframes bubble {0% {transform: translateY(0%); opacity: 0.06;} 100% {transform: translateY(-120vh);}}
@keyframes sideWays {0% {margin-left: 0px;} 100% {margin-left: 200px;}}
#divFishing .bubble--1 {left: 10%; animation-delay: 0.5s; animation-duration: 16s; opacity: 0.2;}
#divFishing .bubble--2 {width: 15px; height: 15px; left: 40%; animation-delay: 1s; animation-duration: 10s; opacity: 0.1;}
#divFishing .bubble--3 {width: 10px; height: 10px; left: 30%; animation-delay: 5s; animation-duration: 20s; opacity: 0.3;}
#divFishing .bubble--4 {width: 25px; height: 25px; left: 40%; animation-delay: 8s; animation-duration: 17s; opacity: 0.2;}
#divFishing .bubble--5 {width: 30px; height: 30px; left: 60%; animation-delay: 10s; animation-duration: 15s; opacity: 0.1;}
#divFishing .bubble--6 {width: 10px; height: 10px; left: 80%; animation-delay: 3s; animation-duration: 30s; opacity: 0.4;}
#divFishing .bubble--7 {width: 15px; height: 15px; left: 90%; animation-delay: -7s; animation-duration: 25s; opacity: 0.3;}
#divFishing .bubble--8 {width: 20px; height: 20px; left: 50%; bottom: 30px; animation-delay: -5s; animation-duration: 19s; opacity: 0.2;}
#divFishing .bubble--9 {width: 40px; height: 40px; left: 30%; bottom: 30px; animation-delay: -21s; animation-duration: 16s; opacity: 0.3;}
#divFishing .bubble--10 {width: 30px; height: 30px; left: 60%; bottom: 30px; animation-delay: -13.75s; animation-duration: 20s; opacity: 0.3;}
#divFishing .leave {width:100%; margin:10px auto 20px auto;}
#divFishing .leave a {width:100%;}
#divFishing .manual-fishing {display:inline-block; vertical-align:top; overflow:hidden; z-index:1; position:relative;}
#divFishing .manual-fishing .percent {display:inline-block; vertical-align:top; width:0; min-width:0; overflow:hidden; text-align:right;}
#divFishing .manual-fishing .progress-bar-holder {position:absolute; left:0; bottom:0; width:100%; background-color:#ddd; height:0; overflow:hidden;}
#divFishing .manual-fishing .progress-bar {height:200%; transform:translateY(-50%); background-color:darkorange; width:0;}
#divFishing .cast, .auto {padding:0; border:0; background:transparent; z-index:auto;}
#divFishing .cast a {width:27vw; border-top-right-radius:0; border-bottom-right-radius:0; padding:11px 0 10px 0; z-index:auto;}
#divFishing .auto a {width:27vw; border-top-left-radius:0; border-bottom-left-radius:0; padding:11px 0 10px 0; z-index:auto;}
#divFishing #bait_type {height:auto; padding-left:10px; z-index:auto;}
#divFishing #bait_type option:disabled {color:#ccc;}
#divFishing .neighbors {color:lightskyblue;}
.select-wrapper {position:relative; display:inline-block; z-index:auto; width:100%; padding:0; margin:0;}
.select-wrapper select {position:absolute; top:3px; border:0;z-index:auto; -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0; margin:0; width:auto; height:auto; border-radius:0;}
.select-wrapper i {position:absolute; right:10px; top:35%;}

/* shop tab navigation */
#shopTabs {margin-top:10px;}
#shopTabs>li {width:calc(100% / 2);}
#shopTabs>li>a {padding:6px 12px;}

/* lucky bomb */
#lucky-bomb {position:fixed; top:-300px; left:50%; transform: translateX(-50%); z-index:9; transition:top 0.3s;}
#lucky-bomb.show {top:80px;}
#lucky-bomb p {position:relative; top:-30px; padding:20px; font-weight:600; font-size:x-large; color:white; text-align:center; padding:10px; background-color:#043c6c; filter:drop-shadow(0 0 5px rgba(0, 0, 0, 1));}
.bomb-drop {display:flex; font-size:7rem; margin:1.5rem; justify-content:center; font-family:"Russo One",sans-serif; filter:drop-shadow(0 0 10px rgba(25, 25, 25, 1));}
.l, .u, .c, .k, .y {opacity:0;}
.drop-animation {animation:drop 0.4s linear forwards;}
.l.drop-animation {animation-delay:0s; color:red;}
.u.drop-animation {animation-delay:0.2s; color:orange;}
.c.drop-animation {animation-delay:0.4s; color:yellow;}
.k.drop-animation {animation-delay:0.6s; color:cyan;}
.y.drop-animation {animation-delay:0.8s; color:blue;}
@keyframes drop {
  0% {transform:translateY(-200px); opacity:0;}
  50% {transform:translateY(0px); opacity:1;}
  65% {transform:translateY(-17px); opacity:1;}
  75% {transform:translateY(-22px); opacity:1;}
  100% {transform: translateY(0px); opacity:1;}
}

/* bot check popup */
#bot-check {display:none; z-index:99; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7);}

/* fish card popup */
#fish-popup-wrapper {display:none;}
#fish-popup {position:fixed; top:0; left:0; width:100%; height:100%; z-index:9; display:flex; justify-content:center; align-items:center;}
#fish-popup .card {user-select:none; width:330px; max-height:90vh; margin:auto; background-color:#444; background:linear-gradient(0deg, #000 0%, rgba(70, 140, 210, 1) 100%, rgba(0, 44, 88, 0.9) 100%); box-shadow:0 7px 20px 5px #00000088; border-radius:0.7rem; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); overflow:hidden; color:#eee;}
@media only screen and (min-device-width:380px) {#fish-popup .card {width:360px;}}
#fish-popup .card hr {width:100%; border:none; border-bottom:1px solid #88888855; margin:0;}
#fish-popup .card h3 {margin:0;}
#fish-popup .card small {color:lightsalmon; font-size:100%;}
#fish-popup .card em {font-style:normal; font-size:100%; color:#444;}
#fish-popup .card em b {color:gold; font-weight:400;}
#fish-popup .card .main {display:flex; flex-direction:column; padding:1.5rem;}
#fish-popup .card .main img {border-radius:0.5rem; max-width:100%; height:auto; object-fit:contain; object-position:center center;}
@media only screen and (max-device-height:500px) {#fish-popup .card .main img {height:100px;} #fish-popup *:not(h3) {font-size:smaller;}}
#fish-popup .card .main .desc {margin:0.5rem 0; color:darkgray;}
#fish-popup .card .main .talent {color:magenta;}
#fish-popup .card .main .info {display:flex; justify-content:space-between; align-items:center;}
#fish-popup .card .main .info .stat1 {display:flex; align-items:center; color:lightgreen;}
#fish-popup .card .main .info .stat2 {display:flex; align-items:center; color:cadetblue; text-align:right; margin-right:0.2rem;}
#fish-popup .card .main .meta {display:flex; align-items:center; margin-top:8px; color:darkgray; flex-direction:inherit;}

/* explorer location selection popup */
#explore-location-popup-wrapper {display:none;}
#explore-location-popup {background-color:rgba(0, 0, 0, 0.7); position:fixed; top:0; left:0; width:100%; height:100%; z-index:7; display:flex; justify-content:center; align-items:center;}
#explore-location-popup .container {background-color:white; padding:20px; border-radius:10px; max-width:500px;}
#explore-location-popup .list-group {max-height:60vh; overflow-y:scroll;}
#explore-location-popup .list-group-item {color:darkseagreen; font-weight:700; padding:10px;}
#explore-location-popup .list-group-item.disabled {color:lightgray; pointer-events:none;}
#explore-location-popup .list-group-item .badge.go {background-color:green;}
#explore-location-popup .close {float:right; cursor:pointer;}

/* grandmaster popup */
#grandmaster-popup-wrapper {display:none;}
#grandmaster-popup {background-color:rgba(0, 0, 0, 0.7); position:fixed; top:0; left:0; width:100%; height:100%; z-index:7; display:flex; justify-content:center; align-items:center;}
#grandmaster-popup .container {background-color:white; padding:20px; border-radius:10px; max-width:90vw;}
#grandmaster-popup h4 {font-weight:700;}
#grandmaster-popup .list-group {max-height:60vh; overflow-y:scroll;}
#grandmaster-popup .list-group-item {font-weight:500; padding:10px;}
#grandmaster-popup .list-group-item p {padding:0; margin:0;}
#grandmaster-popup .list-group-item p.bottom {width:100%; text-align:right;}
#grandmaster-popup .list-group-item div {color:lightgray; margin:8px 0; display:grid; grid-template-columns:1fr 1fr 1fr 1fr;}
@media only screen and (min-device-width: 768px) {
  #grandmaster-popup .container {max-width:50vw;}
  #grandmaster-popup .list-group-item div {grid-template-columns:1fr 1fr 1fr 1fr 1fr;}
}
#grandmaster-popup .list-group-item .collected {color:darkseagreen; pointer-events:none;}
#grandmaster-popup .egg-filler div {text-align:center;}
#grandmaster-popup .egg-filler i {font-style:normal; font-weight:700; color:magenta;}
#grandmaster-popup .egg-filler b {font-weight:700; color:cornflowerblue;}
#grandmaster-popup .egg-filler a {max-width:50%; margin:10px auto;}
#grandmaster-popup .close {float:right; cursor:pointer;}
#grandmasterTabs {margin-top:10px;}
#grandmasterTabs>li {width:calc(100% / 2);}
#grandmasterTabs>li>a {padding:6px 12px;}

/* rodsmith popup */
#rodsmith-popup-wrapper {display:none;}
#rodsmith-popup {background-color:rgba(0, 0, 0, 0.7); position:fixed; top:0; left:0; width:100%; height:100%; z-index:7; display:flex; justify-content:center; align-items:center;}
#rodsmith-popup .container {background-color:white; padding:20px; border-radius:10px; max-width:90vw;}
@media only screen and (min-device-width: 768px) {
  #rodsmith-popup .container {max-width:50vw;}
}
#rodsmith-popup .close {float:right; cursor:pointer;}
#rodsmith-popup h4 {font-weight:700;}
#rodsmith-popup .filler {padding-top:10px;}
#rodsmith-popup .filler {padding-top:10px;}
#rodsmith-popup .filler p {text-align:center; margin:5px 0 0 0;}
#rodsmith-popup .filler p select {width:90%; max-width:90%; display:block; margin:8px auto 4px auto; padding:3px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#rodsmith-popup .filler p.stats {padding:10px; margin:10px 0; font-weight:600; color:darkseagreen; background-color:#eee;}
#rodsmith-popup .filler p.transfer {margin-top:10px;}
#rodsmith-popup .filler p a {display:block; max-width:50%; margin:auto;}
#rodsmithTabs {margin-top:10px;}
#rodsmithTabs>li {width:calc(100% / 2);}
#rodsmithTabs>li>a {padding:6px 12px;}

/* confirm dialog */
.confirm {display:none; z-index:9;}
.confirm > div:first-of-type {z-index:inherit; position:fixed; width:101vw; height:100%; background:rgba(0, 0, 0, 0.7); top:0px; left:0px;}
.confirm > div:last-of-type {z-index:inherit; padding:10px 20px; background:white; border-left:8px solid yellowgreen; position:fixed; width:auto; height:auto; left:50%; top:50%; transform:translate(-50%, -50%); transform:translate(-50%, -50%);box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;}
.confirm > div:last-of-type div:first-of-type {z-index:inherit; min-width:150px; padding:10px;}
.confirm > div:last-of-type div:last-of-type {z-index:inherit; text-align:right;}
.confirm-buttons {z-index:inherit; padding:5px 10px; margin:10px 5px; border-radius:5px; cursor:pointer; background:yellowgreen; border:1px solid #ccc; color:white;}
.confirm-buttons:hover {z-index:inherit; background:#ccc; color:white;}
.confirm i {font-size:2em; color: yellowgreen; text-align:center; width:100%;}
.confirm #confirmYes {background:yellowgreen; width:50px;}
.confirm .disabled {background:lightgray!important; width:50px;}

/* reload dialog */
.reload {display:none; z-index:9;}
.reload > div:first-of-type {z-index:inherit; position:fixed; width:101vw; height:100%; background:rgba(0, 0, 0, 0.7); top:0px; left:0px;}
.reload > div:last-of-type {z-index:inherit; padding:10px 20px; background:white; border-left:8px solid lightcoral; position:fixed; width:auto; height:auto; left:50%; top:50%; transform:translate(-50%, -50%); transform:translate(-50%, -50%);box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;}
.reload > div:last-of-type div:first-of-type {z-index:inherit; min-width:150px; padding:10px;}
.reload > div:last-of-type div:last-of-type {z-index:inherit; text-align:right;}
.reload-buttons {z-index:inherit; padding:5px 10px; margin:10px 5px; border-radius:5px; cursor:pointer; background:lightcoral; border:1px solid #ccc; color:white;}
.reload-buttons:hover {z-index:inherit; background:#007bff; color:white;}
.reload i {font-size:2em; color: lightcoral; text-align:center; width:100%;}/*#008cff*/

/* alert dialog */
.alert {display:none; z-index:9;}
.alert > div:first-of-type {z-index:inherit; position:fixed; width:101vw; height:100%; background:rgba(0, 0, 0, 0.7); top:0px; left:0px;}
.alert > div:last-of-type {z-index:inherit; padding:10px 20px; background:white; border-left:8px solid orange; position:fixed; width:auto; height:auto; left:50%; top:50%; transform:translate(-50%, -50%);box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;}
.alert > div:last-of-type div:first-of-type {z-index:inherit; min-width:150px; padding:10px;}
.alert > div:last-of-type div:last-of-type {z-index:inherit; text-align:right;}
.alert-buttons {z-index:inherit; padding:5px 10px; margin:10px 5px; border-radius:5px; cursor:pointer; background:orange; border:1px solid #ccc; color:white;}
.alert-buttons:hover {z-index:inherit; background:#ccc; color:white;}
.alert i {font-size:2em; color: orange; text-align:center; width:100%;}

/* explorer loot dialog */
.lootd {display:none; z-index:9;}
.lootd > div:first-of-type {z-index:inherit; position:fixed; width:101vw; height:100%; background:rgba(0, 0, 0, 0.7); top:0px; left:0px;}
.lootd > div:last-of-type {z-index:inherit; padding:10px 20px; background:white; border-left:8px solid white; border-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet) 1; position:fixed; width:auto; height:auto; left:50%; top:50%; transform:translate(-50%, -50%);box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;}
.lootd > div:last-of-type div:first-of-type {z-index:inherit; min-width:150px; padding:10px;}
.lootd > div:last-of-type div:last-of-type {z-index:inherit; text-align:right;}
.lootd-buttons {z-index:inherit; padding:5px 10px; margin:10px 5px; border-radius:5px; cursor:pointer; background:mediumorchid; border:1px solid #ccc; color:white;}
.lootd-buttons:hover {z-index:inherit; background:#ccc; color:white;}

/* homepage screensaver */
.outline-animation {position:relative; width:100%; height:450px; display:block; z-index:6; margin:0 auto; overflow:hidden;}
.section-up {position:absolute; width:100%; height:270px; left:0; top:0; display:block; z-index:5;}
.hill {position:absolute; width:115px; height:27px; left:30px; bottom:0; display:block; z-index:15;}
.hill.snd {left:115px; z-index:14;}
.hill.trd {transform:rotateY(180deg); left:auto; right:30px;}
.hill.frt {transform:rotateY(180deg); left:auto; right:110px; z-index:14;}
.hill span {position:absolute; width:60px; height:60px; background-color:#fff; left:4px; top:0; display:block; border-radius:50%; border:2px solid #030308; border-color:#030308 transparent transparent transparent;}
.hill span:nth-child(2) {width:110px; height:110px; left:-6px; top:-5px; background-color:transparent; transform:rotate(5deg); border-color:transparent transparent transparent #030308;}
.hill span:nth-child(3) {width:10px; height:10px; left:2px; top:22px; transform:rotate(-55deg); border:none; border-radius:0;}
.hill span:nth-child(4) {width:40px; height:40px; left:auto; top:11px; right:5px; border-color:#030308 transparent transparent transparent;}
.hill span:nth-child(5) {width:110px; height:110px; left:auto; top:3px; right:-8px; background-color:transparent; transform:rotate(85deg); border-color:#030308 transparent transparent transparent;}
.hill span:nth-child(6) {width:24px; height:24px; left:auto; top:-5px; right:31px; background-color:transparent; border-color:transparent transparent #030308 transparent;}
.hill span:nth-child(7) {width:17px; height:4px; left:auto; top:10px; right:49px; background-color:transparent; border-radius:0; transform:rotate(33deg); border-color:#030308 transparent transparent transparent;}
.hill span:nth-child(8) {width:20px; height:10px; left:65px; top:21px; transform:rotate(-35deg); border:none; border-radius:0;}
.hill span:nth-child(9) {width:30px; height:10px; left:46px; top:15px; transform:rotate(33deg); border:none; border-radius:0;}
.hill span:nth-child(10) {width:20px; height:10px; left:60px; top:19px; border:none; border-radius:0;}
.hill span:nth-child(11) {width:20px; height:10px; left:101px; top:29px; border:none; border-radius:0; transform:rotate(45deg);}
.left-tree {position:absolute; width:20px; height:33px; left:33px; bottom:8px; display:block; z-index:10; transform:rotate(11deg) skewX(3deg); transform-origin:center bottom; animation:moveTree 3s ease infinite;}
.left-tree span {position:absolute; width:20px; height:20px; left:0; top:0; border-radius:50%; border:2px solid #030308; background-color:#fff;}
.left-tree span:nth-child(2) {width:2px; height:25px; left:9px; top:auto; bottom:0; border-radius:0; border:none; background-color:#030308;}
.left-tree span:nth-child(3) {width:2px; height:5px; left:7px; top:auto; bottom:20px; border-radius:0; border:none; background-color:#030308; transform:rotate(-45deg);}
.left-tree span:nth-child(4) {width:2px; height:5px; left:11px; top:auto; bottom:17px; border-radius:0; border:none; background-color:#030308; transform:rotate(45deg);}
.right-tree {position:absolute; width:20px; height:33px; right:25px; bottom:3px; display:block; z-index:10; transform:rotate(11deg) skewX(3deg); transform-origin:center bottom; animation:moveTree 3s ease infinite;}
.right-tree span {position:absolute; width:18px; height:18px; left:1px; top:2px; border-radius:50%; border:2px solid #030308; background-color:#fff;}
.right-tree span:nth-child(2) {width:2px; height:25px; left:9px; top:auto; bottom:0; border-radius:0; border:none; background-color:#030308;}
.right-tree span:nth-child(3) {width:2px; height:5px; left:7px; top:auto; bottom:20px; border-radius:0; border:none; background-color:#030308; transform:rotate(-45deg);}
.right-tree span:nth-child(4) {width:2px; height:5px; left:11px; top:auto; bottom:17px; border-radius:0; border:none; background-color:#030308; transform:rotate(45deg);}
.right-tree span:nth-child(5) {position:absolute; width:14px; height:14px; left:3px; top:-6px; border-radius:50%; border:2px solid #030308; background-color:#fff; border-bottom-color:transparent;}
.building-left {position:absolute; left:62px; bottom:3px; display:block; z-index:9;}
.building-left span {position:absolute; left:0; bottom:0; border:2px solid #030308; background-color:#fff; width:17px; height:42px;}
.building-left span:nth-child(2) {left:20px; width:30px; height:64px;}
.building-left span:nth-child(3) {left:23px; bottom:62px; width:24px; height:9px;}
.building-left span:nth-child(4) {left:54px; width:20px; height:46px;}
.building-left span:nth-child(5) {left:56px; bottom:44px; width:16px; height:7px;}
.building-left span:nth-child(6) {left:2px; bottom:27px; border:none; background-color:#030308; width:6px; height:2px;}
.building-left span:nth-child(7) {left:22px; bottom:44px; border:none; background-color:#030308; width:11px; height:2px;}
.building-left span:nth-child(8) {left:39px; bottom:20px; border:none; background-color:#030308; width:11px; height:2px;}
.building-left span:nth-child(9) {left:56px; bottom:31px; border:none; background-color:#030308; width:8px; height:2px;}
.building-left span:nth-child(10) {left:29px; bottom:71px; border:none; background-color:#030308; width:2px; height:17px;}
.building-left span:nth-child(11) {left:39px; bottom:71px; border:none; background-color:#030308; width:2px; height:17px;}
.building-right {position:absolute; right:67px; bottom:0; display:block; z-index:8;}
.building-right span {position:absolute; right:18px; bottom:0; border:2px solid #030308; background-color:#fff; width:86px; height:24px;}
.building-right span:nth-child(2) {right:18px; bottom:22px; width:96px; height:22px; transform-origin:center bottom; transform:skewX(-20deg);}
.building-right span:nth-child(3) {right:0; bottom:0; width:22px; height:52px;}
.building-right span:nth-child(4) {right:2px; bottom:42px; background-color:#030308; border:none; width:7px; height:2px;}
.building-right span:nth-child(5) {right:13px; bottom:32px; background-color:#030308; border:none; width:7px; height:2px;}
.building-right span:nth-child(6) {right:10px; bottom:52px; background-color:#030308; border:none; width:2px; height:32px;}
.building-right span:nth-child(7) {right:-4px; bottom:74px; border:none; background-color:transparent; width:0; height:0; border-bottom:10px solid #030308; border-left:0 solid transparent; border-right:15px solid transparent; transform:skewY(-15deg); transform-origin:left center; animation:moveFlag 1.5s ease infinite;}
.building-right span:nth-child(8) {right:2px; bottom:76px; border:none; background-color:transparent; width:0; height:0; border-bottom:5px solid #fff; border-left:0 solid transparent; border-right:8px solid transparent; transform:skewY(-15deg); transform-origin:left center; animation:moveFlag 1.5s ease infinite;}
.building-right span:nth-child(9) {right:31px; bottom:0; width:33px; height:65px; perspective:70px; background-color:transparent; border:none;}
.building-right span:nth-child(9) span {right:0; bottom:0; width:33px; height:65px; transform-origin:bottom center; transform:rotateX(13deg);}
.building-right span:nth-child(10) {right:31px; bottom:55px; width:33px; height:10px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.building-right span:nth-child(11) {right:36px; bottom:63px; width:23px; height:30px; border-top-left-radius:11px; border-top-right-radius:11px;}
.building-right span:nth-child(12) {right:42px; bottom:91px; width:11px; height:7px;}
.building-right span:nth-child(13) {right:46px; bottom:98px; width:3px; border:none; background-color:#030308; height:18px;}
.building-right span:nth-child(14) {right:43px; bottom:17px; width:9px; height:11px;}
.building-right span:nth-child(15) {right:43px; bottom:35px; width:9px; height:11px;}
.building-right span:nth-child(16) {right:43px; bottom:63px; width:9px; height:13px; border-top-left-radius:2px; border-top-right-radius:2px;}
.bird-wrapper {position:absolute; left:166px; bottom:46px; display:block; z-index:8; animation:birdFly 3.5s ease infinite; animation-delay:0.4s;}
.bird-wrapper.snd {left:340px; bottom:65px; animation-delay:0s;}
.bird-wrapper.trd {left:420px; bottom:132px; animation-delay:1s;}
.left-wing {position:absolute; right:0; bottom:0; width:14px; height:14px; transform-origin:right bottom; animation:wingLeft 0.4s ease infinite;}
.left-wing span {position:absolute; right:0; bottom:0; border:2px solid #030308; border-radius:50%; width:14px; height:14px; border-color:#030308 transparent transparent transparent; transform:translate(4px,12px);}
.right-wing {position:absolute; left:0; bottom:0; width:14px; height:14px; transform-origin:left bottom; animation:wingRight 0.4s ease infinite;}
.right-wing span {position:absolute; right:0; bottom:0; border:2px solid #030308; border-radius:50%; width:14px; height:14px; border-color:#030308 transparent transparent transparent; transform:translate(-4px,12px);}
.sun {position:absolute; left:200px; top:50px; z-index:4;}
.sun span {position:absolute; left:0; top:0; border-radius:50%; border:2px solid #030308; background-color:gold; width:37px; height:37px; animation:sunShine 3.5s linear infinite;}
.moon {margin:auto; position:absolute; top:50px; bottom:0; left:150px; width:50px; height:50px; background-color:transparent; border-radius:50%; box-shadow:15px 10px 0px 0px rgb(249, 203, 118);}
.cloud-left {position:absolute; left:124px; top:113px; z-index:4; width:30px; height:20px; animation:cloudMove 5s linear infinite;}
.cloud-left span {position:absolute; right:0; top:0; width:20px; height:20px; border-radius:50%; background-color:#fff; border:2px solid #030308; border-color:#030308 #030308 #030308 transparent;}
.cloud-left span:nth-child(2) {right:auto; left:0; top:3px; width:14px; height:17px; border-radius:0; border:none; border-top:2px solid #030308; border-bottom:2px solid #030308; border-left:2px solid #030308; border-top-left-radius:8px; border-bottom-left-radius:8px;}
.cloud-left span:nth-child(3) {right:12px; top:auto; bottom:0; width:10px; height:8px; border-radius:0; border:none; border-bottom:2px solid #030308;}
.cloud-middle {position:absolute; left:285px; top:117px; z-index:4; width:40px; height:28px; animation:cloudMove 4s linear infinite; animation-delay:0.4s;}
.cloud-middle span {position:absolute; right:0; top:0; width:28px; height:28px; border-radius:50%; background-color:#fff; border:2px solid #030308; border-color:#030308 #030308 #030308 transparent;}
.cloud-middle span:nth-child(2) {right:auto; left:0; top:4px; width:17px; height:24px; border-radius:0; border:none; border-top:2px solid #030308; border-bottom:2px solid #030308; border-left:2px solid #030308; border-top-left-radius:12px; border-bottom-left-radius:12px;}
.cloud-middle span:nth-child(3) {right:14px; top:auto; bottom:0; width:10px; height:8px; border-radius:0; border:none; border-bottom:2px solid #030308;}
.cloud-right {position:absolute; right:64px; top:73px; z-index:4; width:23px; height:16px; animation:cloudMove 6s linear infinite; animation-delay:0.6s;}
.cloud-right span {position:absolute; right:0; top:0; width:16px; height:16px; border-radius:50%; background-color:#fff; border:2px solid #030308; border-color:#030308 #030308 #030308 transparent;}
.cloud-right span:nth-child(2) {right:auto; left:0; top:3px; width:10px; height:13px; border-radius:0; border:none; border-top:2px solid #030308; border-bottom:2px solid #030308; border-left:2px solid #030308; border-top-left-radius:6px; border-bottom-left-radius:6px;}
.cloud-right span:nth-child(3) {right:7px; top:auto; bottom:0; width:8px; height:8px; border-radius:0; border:none; border-bottom:2px solid #030308;}
.section-down {position:absolute; width:100%; height:180px; left:0; top:270px; display:block; z-index:6; border-top:2px solid #030308; background-color:lightblue;}
.water-wrapper {position:absolute; left:65px; bottom:0; height:70px; width:77px; display:block; z-index:6; overflow:hidden;}
.water-wrapper.right {left:450px; bottom:-20px;}
.water-wrapper.top.right {left:454.5px; bottom:-10px;}
.water-wrap {position:absolute; left:0; bottom:0; height:70px; width:231px; display:block; z-index:6; transform:translateX(0); animation:moveWater 4s linear infinite;}
.water {position:absolute; left:0; bottom:0; height:70px; width:77px; display:block; z-index:6; background-color:lightblue;}
.water.snd {left:77px;}
.water.trd {left:154px;}
.water span {position:absolute; left:-4px; top:12px; height:20px; width:20px; display:block; z-index:6; border-radius:50%; border:2px solid #030308; border-color:#030308 transparent transparent transparent;}
.water span:nth-child(2) {left:9px; top:-1px; border-color:transparent transparent #030308 transparent;}
.water span:nth-child(3) {left:22px;}
.water span:nth-child(4) {left:35px; top:-1px; border-color:transparent transparent #030308 transparent;}
.water span:nth-child(5) {left:48px;}
.water span:nth-child(6) {left:61px; top:-1px; border-color:transparent transparent #030308 transparent;}
.water-wrapper.top {width:68px; left:69.5px; bottom:10px; z-index:7;}
.water-wrapper.top .water-wrap {width:204px;}
.water-wrapper.top .water {height:70px; width:68px; background-color:transparent;}
.water-wrapper.top .water.snd {left:68px;}
.water-wrapper.top .water.trd {left:136px;}
.water-wrapper.top .water span {position:absolute; left:-3px; top:12px; height:18px; width:18px; display:block; z-index:6; border-radius:50%; border:2px solid #030308; border-color:#030308 transparent transparent transparent;}
.water-wrapper.top .water span:nth-child(2) {left:8px; top:0; border-color:transparent transparent #030308 transparent;}
.water-wrapper.top .water span:nth-child(3) {left:19px;}
.water-wrapper.top .water span:nth-child(4) {left:30px; top:0; border-color:transparent transparent #030308 transparent;}
.water-wrapper.top .water span:nth-child(5) {left:41px;}
.water-wrapper.top .water span:nth-child(6) {left:53px; top:0; border-color:transparent transparent #030308 transparent;}
.fish-wrapper {position:absolute; left:82px; bottom:85px; height:20px; width:54px; display:block; z-index:4;}
.fish-wrapper.right {left:467px; bottom:70px;}
.fish-wrapper.right .fish-wrap {transform:translate(-35px,60px) rotate(-90deg); animation:moveFish-higher 3.5s linear infinite; animation-delay:1s;}
.fish-wrap {position:absolute; left:0; bottom:0; height:20px; width:54px; display:block; z-index:4; transform-origin:center center; transform:translate(-35px,60px) rotate(-90deg); animation:moveFish 3.5s linear infinite;}
.fish {position:absolute; left:0; bottom:0; height:20px; width:54px; display:block; z-index:4; transform:scale(1,0.45);}
.fish span {position:absolute; left:0; top:0; height:36px; width:36px; background-color:#fff; border:4px solid #030308; border-top-left-radius:60%; border-bottom-right-radius:60%; border-bottom-left-radius:53%; transform:rotate(45deg);}
.fish span:nth-child(2) {position:absolute; left:39px; top:16px; height:4px; width:13px; background-color:#030308; border:none; border-radius:0; transform-origin:left center; transform:rotate(45deg); animation:fishTail-bottom 3.5s linear infinite;}
.fish-wrapper.right .fish span:nth-child(2) {animation-delay:1s;}
.fish span:nth-child(3) {position:absolute; left:39px; top:16px; height:4px; width:13px; background-color:#030308; border:none; border-radius:0; transform-origin:left center; transform:rotate(-45deg); animation:fishTail-top 3.5s linear infinite;}
.fish-wrapper.right .fish span:nth-child(3) {animation-delay:1s;}
.fish span:nth-child(4) {position:absolute; left:9px; top:14px; height:7px; width:4px; background-color:#030308; border:none; border-radius:50%; transform-origin:center center; transform:rotate(0); animation:fishEye 3.5s linear infinite;}
.fish-wrapper.right .fish span:nth-child(4) {animation-delay:1s;}
.water-lines-wrapper {position:absolute; top:18px; left:33px; z-index:2;}
.water-lines-wrapper.right {left:500px; top:24px;}
.water-lines {position:absolute; top:0; left:0;}
.water-lines span {position:absolute; top:0; left:0; width:20px; height:2px; background-color:#030308; animation:water-lines-1 3.5s ease infinite;}
.water-lines span:nth-child(2) {left:49px; width:17px; animation-name:water-lines-2;}
.water-lines span:nth-child(3) {top:12px; left:14px; width:14px; animation-name:water-lines-3; animation-delay:0.1s;}
.water-lines span:nth-child(4) {top:12px; left:47px; width:11px; animation-name:water-lines-4; animation-delay:0.1s;}
.water-lines span:nth-child(5) {top:24px; left:32px; width:10px; animation-name:water-lines-5; animation-delay:0.2s;}
.water-big-wrapper {position:absolute; left:240px; bottom:0; height:140px; width:114px; display:block; z-index:6; overflow:hidden;}
.water-big-wrap {position:absolute; left:0; bottom:0; height:114px; width:348px; display:block; z-index:6; animation:moveWater 5s linear infinite;}
.water-big {position:absolute; left:0; bottom:0; height:140px; width:116px; display:block; z-index:1;}
.water-big.snd {left:116px;}
.water-big.trd {left:232px;}
.water-big span {position:absolute; left:0; top:20px; height:50px; width:116px; display:block; z-index:1; background-color:lightblue;}
.water-big span:nth-child(2) {left:-2px; top:-20px; height:40px; width:40px; z-index:2; background-color:transparent; border-radius:50%; border:2px solid #030308; border-color:transparent #030308 #030308 transparent; transform:rotate(45deg);}
.water-big span:nth-child(3) {left:37px; top:-20px; height:40px; width:40px; z-index:2; background-color:transparent; border-radius:50%; border:2px solid #030308; border-color:transparent #030308 #030308 transparent; transform:rotate(45deg);}
.water-big span:nth-child(4) {left:75px; top:-20px; height:40px; width:40px; z-index:2; background-color:transparent; border-radius:50%; border:2px solid #030308; border-color:transparent #030308 #030308 transparent; transform:rotate(45deg);}
.water-big span:nth-child(5) {left:8px; top:14px; height:60px; width:60px; border-top-left-radius:60%; border-bottom-right-radius:60%; border-bottom-left-radius:53%; transform:scale(0.45,1) rotate(-45deg);}
.water-big span:nth-child(6) {left:46px; top:14px; height:60px; width:60px; border-top-left-radius:60%; border-bottom-right-radius:60%; border-bottom-left-radius:53%; transform:scale(0.45,1) rotate(-45deg);}
.water-big span:nth-child(7) {left:84px; top:14px; height:60px; width:60px; border-top-left-radius:60%; border-bottom-right-radius:60%; border-bottom-left-radius:53%; transform:scale(0.45,1) rotate(-45deg);}
.water-big span:nth-child(8) {left:-30px; top:14px; height:60px; width:60px; border-top-left-radius:60%; border-bottom-right-radius:60%; border-bottom-left-radius:53%; transform:scale(0.45,1) rotate(-45deg);}
.water-big span:nth-child(9) {left:5px; top:15px; height:15px; width:10px; transform:rotate(-55deg);}
.water-big span:nth-child(10) {left:43px; top:14px; height:15px; width:10px; transform:rotate(-55deg);}
.water-big span:nth-child(11) {left:81px; top:14px; height:15px; width:10px; transform:rotate(-55deg);}
.water-big span:nth-child(12) {left:23px; top:13px; height:17px; width:10px; transform:rotate(55deg);}
.water-big span:nth-child(13) {left:62px; top:14px; height:15px; width:10px; transform:rotate(55deg);}
.water-big span:nth-child(14) {left:100px; top:14px; height:15px; width:10px; transform:rotate(55deg);}
.ship-wrapper {position:absolute; left:260px; bottom:116px; display:block; z-index:4;}
.ship {position:absolute; left:0; bottom:0; display:block; z-index:6; width:86px; height:34px; transform-origin:center center; animation:shipFloat 5s linear infinite;}
.ship span {position:absolute; left:0; bottom:0; display:block; width:86px; height:34px; border:3px solid #030308; border-bottom-right-radius:40px; border-bottom-left-radius:20px; background-color:#fff; z-index:1;}
.ship span:nth-child(2) {left:30px; bottom:34px; width:3px; height:85px; border:none; border-radius:0; background-color:#030308;}
.ship span:nth-child(3) {left:21px; bottom:57px; width:0; height:0; border:none; border-radius:0; background-color:transparent; border-bottom:62px solid #030308; border-left:20px solid transparent; border-right:20px solid transparent; transform:rotate(-16.5deg); border-bottom-right-radius:5px;}
.ship span:nth-child(4) {left:21px; bottom:55px; width:0; height:0; border:none; border-radius:0; background-color:transparent; border-bottom:62px solid #fff; border-left:20px solid transparent; border-right:20px solid transparent; transform:rotate(-17.5deg) scale(0.85); border-bottom-right-radius:3px; z-index:2;}
.ship span:nth-child(5) {left:-1px; bottom:60px; width:0; height:0; border:none; border-radius:0; background-color:transparent; border-bottom:48px solid #030308; border-left:31px solid transparent; border-right:0 solid transparent; border-bottom-left-radius:5px;}
.ship span:nth-child(6) {left:1px; bottom:58px; width:0; height:0; border:none; border-radius:0; background-color:transparent; border-bottom:48px solid #fff; border-left:31px solid transparent; border-right:0 solid transparent; border-bottom-left-radius:3px; transform:scale(0.80); z-index:2;}

@keyframes moveTree {
0%, 100% {transform:rotate(11deg) skewX(3deg);}
50% {transform:rotate(-11deg) skewX(-3deg);}
100% {transform:rotate(11deg) skewX(3deg);}
}

@keyframes moveFlag {
0% {transform:skewY(-15deg);}
50% {transform:skewY(5deg);}
100% {transform:skewY(-15deg);}
}

@keyframes birdFly {
0% {transform:translateY(0);}
50% {transform:translateY(-40px);}
100% {transform:translateY(0);}
}

@keyframes wingLeft {
0% {transform:rotate(0);}
50% {transform:rotate(40deg);}
100% {transform:rotate(0);}
}

@keyframes wingRight {
0% {transform:rotate(0);}
50% {transform:rotate(-40deg);}
100% {transform:rotate(0);}
}

@keyframes sunShine {
0% {transform:scale(1);}
50% {transform:scale(1.14);}
100% {transform:scale(1);}
}

@keyframes cloudMove {
0% {transform:translateX(0);}
50% {transform:translateX(10px);}
100% {transform:translateX(0);}
}

@keyframes moveWater {
0% {transform:translateX(0);}
100% {transform:translateX(-33.333333333333%);}
}

@keyframes moveFish {
0% {transform:translate(-35px,60px) rotate(-90deg);}
5% {transform:translate(20px, 60px) rotate(90deg);}
45% {transform:translate(20px, 60px) rotate(90deg);}
50% {transform:translate(10px, 10px) rotate(35deg);}
58% {transform:translate(0, 0) rotate(0);}
67% {transform:translate(0, 0) rotate(0);}
75% {transform:translate(-20px, 10px) rotate(-65deg);}
80% {transform:translate(-35px,60px) rotate(-90deg);}
100% {transform:translate(-35px,60px) rotate(-90deg);}
}

@keyframes moveFish-higher {
0% {transform:translate(-35px,60px) rotate(-90deg);}
5% {transform:translate(20px, 60px) rotate(90deg);}
45% {transform:translate(20px, 60px) rotate(90deg);}
50% {transform:translate(10px, 10px) rotate(35deg);}
58% {transform:translate(0, -7px) rotate(0);}
67% {transform:translate(0, -7px) rotate(0);}
75% {transform:translate(-20px, 10px) rotate(-65deg);}
80% {transform:translate(-35px,60px) rotate(-90deg);}
100% {transform:translate(-35px,60px) rotate(-90deg);}
}

@keyframes fishTail-bottom {
0% {transform:rotate(45deg); left:39px; top:16px;}
59% {transform:rotate(45deg); left:39px; top:16px;}
60% {transform:rotate(25deg); left:37px; top:15px;}
61% {transform:rotate(25deg); left:37px; top:15px;}
62% {transform:rotate(45deg); left:39px; top:16px;}
64% {transform:rotate(45deg); left:39px; top:16px;}
65% {transform:rotate(25deg); left:37px; top:15px;}
66% {transform:rotate(25deg); left:37px; top:15px;}
67% {transform:rotate(45deg); left:39px; top:16px;}
100% {transform:rotate(45deg); left:39px; top:16px;}
}

@keyframes fishTail-top {
0% {transform:rotate(-45deg); left:39px; top:16px;}
59% {transform:rotate(-45deg); left:39px; top:16px;}
60% {transform:rotate(-25deg); left:37px; top:17px;}
61% {transform:rotate(-25deg); left:37px; top:17px;}
62% {transform:rotate(-45deg); left:39px; top:16px;}
64% {transform:rotate(-45deg); left:39px; top:16px;}
65% {transform:rotate(-25deg); left:37px; top:17px;}
66% {transform:rotate(-25deg); left:37px; top:17px;}
67% {transform:rotate(-45deg); left:39px; top:16px;}
100% {transform:rotate(-45deg); left:39px; top:16px;}
}

@keyframes fishEye {
0% {height:7px; top:14px;}
59% {height:7px; top:14px;}
60% {height:0; top:17px;}
61% {height:7px; top:14px;}
64% {height:7px; top:14px;}
65% {height:0; top:17px;}
66% {height:7px; top:14px;}
100% {height:7px; top:14px;}
}

@keyframes water-lines-1 {
0% {transform:translateX(0) scaleX(1);}
50% {transform:translateX(21px) scaleX(0.75);}
100% {transform:translateX(0) scaleX(1);}
}

@keyframes water-lines-2 {
0% {transform:translateX(0) scaleX(1);}
50% {transform:translateX(15px) scaleX(1.29);}
100% {transform:translateX(0) scaleX(1);}
}

@keyframes water-lines-3 {
0% {transform:translateX(0) scaleX(1);}
50% {transform:translateX(8px) scaleX(1.21);}
100% {transform:translateX(0) scaleX(1);}
}

@keyframes water-lines-4 {
0% {transform:translateX(0) scaleX(1);}
50% {transform:translateX(11px) scaleX(1.18);}
100% {transform:translateX(0) scaleX(1);}
}

@keyframes water-lines-5 {
0% {transform:translateX(0) scaleX(1);}
50% {transform:translateX(7px) scaleX(1.2);}
100% {transform:translateX(0) scaleX(1);}
}

@keyframes shipFloat {
0% {transform:translateY(0) rotate(0);}
25% {transform:translateY(0) rotate(-10deg);}
40% {transform:translateY(4px) rotate(-10deg);}
85% {transform:translateY(1px) rotate(10deg);}
100% {transform:translateY(0) rotate(0);}
}