*{box-sizing:border-box}body{width:100svw;height:100svh;overflow:hidden;margin:0}.seafloor-view .top-region{position:absolute;top:0;left:0;width:100%;padding:20px;display:grid;gap:10px}.seafloor-view .top-region>:nth-child(1){position:relative;display:flex;flex-wrap:wrap;gap:10px;padding-right:50px}.seafloor-view .top-region>:nth-child(2){display:flex;flex-direction:column;gap:10px;width:calc(100% - 80px)}.seafloor-view .dropdown{height:100%;aspect-ratio:1}.seafloor-view .dropdown-button{width:100%;height:100%;padding:0}.seafloor-view .dropdown-button img{width:100%;height:100%;display:block;object-fit:contain}.seafloor-view .dropdown-menu{position:absolute;background-color:#f0f0f0;z-index:1;margin:0;padding:.5rem 0;list-style:none;box-shadow:0 2px 5px #0003}.seafloor-view .dropdown-menu>li{cursor:pointer}.seafloor-view .dropdown-menu>li:hover{background-color:#dcdcdc}.seafloor-view .dropdown-menu>li>button{padding:.5rem 1rem;width:100%;background:none;border:none;text-align:left;cursor:pointer}.seafloor-view .area-selector{font-size:20px;min-height:100%}.seafloor-view .locations-target-date{font-size:20px}.seafloor-view .compass{position:absolute;right:0;top:0;width:48px;height:48px;background-image:url(compass.svg);background-size:contain;background-repeat:no-repeat;background-position:center center}.seafloor-view .right-region{position:absolute;bottom:90px;right:20px;height:calc(100% - 178px);display:grid}.seafloor-view .legend-container{display:flex;flex-direction:column;gap:10px}.seafloor-view .legend{display:flex;align-items:center;gap:10px;color:#fff}.seafloor-view .legend-icon{height:32px;width:auto}.seafloor-view .legend-icon--white-border{border:2px solid white}.seafloor-view .height-slider-container{position:relative;width:60px;display:grid;justify-content:center;min-height:100%;max-height:100%}.seafloor-view .time-slider-container{position:relative;min-height:60px;display:flex;flex:1;align-items:center}.seafloor-view .bottom-region{position:absolute;bottom:0;width:100%;padding:20px;display:grid;gap:10px;overflow:hidden}.seafloor-view .bottom-region>:nth-child(1){display:flex}.seafloor-view .bottom-region>:nth-child(2){display:flex;gap:10px}.seafloor-view .bottom-region>:nth-child(2)>:nth-child(1){margin-right:auto}.seafloor-view .cursorinfo{background-color:#ffffffd9;padding:10px 15px;border-radius:5px;box-shadow:0 2px 5px #0003;display:flex;flex-direction:column;align-items:center;gap:10px}.seafloor-view .inputRange{margin:0;border:1px solid #333333;border-radius:9999px;background:#ddd;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.seafloor-view .inputRange:focus{outline:none}.seafloor-view .inputRange.vertical{width:12px;height:100%;writing-mode:vertical-rl;direction:rtl}.seafloor-view .inputRange.vertical::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:60px;height:30px;border:2px solid #333333;border-radius:10px;background:#06b6d4;box-shadow:none}.seafloor-view .inputRange.vertical::-moz-range-thumb{width:60px;height:30px;border:2px solid #333333;border-radius:10px;background:#06b6d4;box-shadow:none}.seafloor-view .inputRange.horizontal{width:100%;height:12px}.seafloor-view .inputRange.horizontal::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:30px;height:60px;background:#06b6d4;border:2px solid #333333;border-radius:10px}.seafloor-view .inputRange.horizontal::-moz-range-thumb{width:30px;height:60px;background:#06b6d4;border:2px solid #333333;border-radius:10px}.seafloor-view .slider-tooltip{position:absolute;background-color:#ffffffd9;color:#000;padding:5px 10px;border-radius:5px;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;pointer-events:none;white-space:nowrap}.seafloor-view .slider-tooltip.vertical{right:65px}.seafloor-view .slider-tooltip.horizontal{top:65px}.seafloor-view .slider-tooltip:after{content:"";position:absolute;border-width:5px;border-style:solid}.seafloor-view .slider-tooltip.vertical:after{top:50%;left:100%;margin-top:-5px;border-color:transparent transparent transparent rgba(255,255,255,.85)}.seafloor-view .slider-tooltip.horizontal:after{top:auto;bottom:100%;left:50%;margin-left:-5px;border-color:transparent transparent rgba(255,255,255,.85) transparent}.seafloor-view .mode-button-container{display:flex;align-items:center;gap:10px}.seafloor-view .mode-button{border-radius:5px;border:3px solid gray;width:80px;text-align:center;padding:10px;color:#fff}.seafloor-view .mode-button-active{border:3px solid white}.seafloor-view .colorbar-container{background-color:#ffffffd9;padding:10px 15px;border-radius:5px;box-shadow:0 2px 5px #0003;display:flex;align-items:center;gap:10px}.seafloor-view .colorbar{display:inline-block;width:160px;height:20px;border:1px solid #888;background:linear-gradient(to right,#ff6b70,#ff6b70 10%,#ffa06b 10%,#ffa06b 20%,#e2c120 20%,#e2c120 30%,#e3dd1e 30%,#e3dd1e 40%,#ace553 40%,#ace553 50%,#52e88f 50%,#52e88f 60%,#5fc1b7 60%,#5fc1b7 70%,#5f99c4 70%,#5f99c4 80%,#266aa6 80%,#266aa6 90%,#2840a5 90%,#2840a5)}.seafloor-view .colorbar-label{font-size:14px;color:#333;white-space:nowrap}.seafloor-view .switch-container{display:flex;gap:10px}.seafloor-view .center-tooltip{position:absolute;top:50%;left:50%;transform:translateY(-100%);pointer-events:none;color:#fff;padding-left:2rem;padding-bottom:1rem}.seafloor-view .custom-checkbox{display:inline-flex;white-space:nowrap}.seafloor-view .custom-checkbox input[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.seafloor-view .button-content{display:inline-flex;align-items:center;padding:8px 16px;border:2px solid #999999;border-radius:50px;cursor:pointer;transition:all .2s ease;background-color:#333;-webkit-user-select:none;user-select:none;color:#999}.seafloor-view .icon{width:16px;height:16px;margin-right:8px;border:1px solid #ccc;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}.seafloor-view .custom-checkbox input:checked+.button-content{border-color:#78bd78;color:#78bd78}.seafloor-view .custom-checkbox input:checked+.button-content .icon{background-color:#78bd78;border-color:#78bd78}.seafloor-view .custom-checkbox input:checked+.button-content .icon:after{content:"";width:4px;height:8px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg);margin-bottom:2px}.seafloor-view .custom-checkbox input:focus-visible+.button-content{outline:2px solid #78bd78;outline-offset:2px}.seafloor-view .button-content:hover{border-color:#78bd78}.seafloor-view .cross-cursor:before{pointer-events:none;-webkit-user-select:none;user-select:none;content:url('data:image/svg+xml;utf8,      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"         viewBox="-24 -24 48 48" stroke="white" stroke-width="3">      <path d="M 6 0 h 18 M -6 0 h -18 M 0 6 v 18 M 0 -6 v -18 Z"/>      </svg>');position:absolute;top:calc(50% - 24px);left:calc(50% - 24px);opacity:.6;z-index:490;width:48px;height:48px}