canvas {
    /* border: 1px solid red; */
}

.na_water_bg, .na_water_bg_70 {
    background: linear-gradient(180deg, #6AC0F3 0%, #B6DDF4 50%, #2D8BBC 50%, #2D8BBC 55%, #1D5B7B 100%);

    position: relative;
    margin-top: 2em;
    margin-bottom: 3em;

    width: 100%;
    max-width: 100%;
    padding: 0;
    /* padding: 0 100%; */

    /* display: inline-block; */

    border-top: 2px solid #3E7EA4;
    border-bottom: 2px solid #174964;
    overflow: hidden;
}

.na_water_bg_70 {
    background: linear-gradient(180deg, #6AC0F3 0%, #B6DDF4 70%, #2D8BBC 70%, #2D8BBC 75%, #1D5B7B 100%);
}

.na_water_glow {
    width: 100%;
    height: 130%;
    max-width: 700px;
    background-image: radial-gradient(farthest-side,
    rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.00) 100%);
    margin: 0 auto;
    /* background: red; */
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    /* mix-blend-mode: overlay; */
    /* content: 'sdf'; */
}

.na_water_wave {
    position: absolute;
    margin: auto 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.na_water_wind {
    width: 100%;
    height: 11%;
    position: absolute;
    margin: auto 0;
    left: 0;
    right: 0;
    top: 0;
    background-repeat: repeat-x;
}

.na_water_wind_off0 {
    top: 3%;
}

.na_water_wind_off1 {
    top: 14%;
}

.na_water_wind_off2 {
    top: 25%;
}

.na_water_wind_off3 {
    top: 36%;
}

.na_buoyancy {
    color: #739FB8;
}

.na_gravity {
    color: #C2A869
}

.na_wind {
    color: #78ADCC;
}

.na_yellow {
    color: rgb(214, 178, 57);
}

.na_red {
    color: rgb(247, 65, 57);
}

.na_blue {
    color: rgb(91, 173, 220);
}

.na_highlight, .na_highlight_dark {
    position: relative;
    margin: 0 0.1em;
    padding: 0.0em 0.3em;
    border-radius: 0.2em;
    background-color: #ddd;
}

.na_highlight_dark {
    background-color: #222;
}

.na_white {
    position: relative;
    margin: 0 0.1em;
    padding: 0 0.2em;
    border-radius: 0.2em;
    background-color: #444;
    color: #fff;
}

.na_water_bg .drawer_container {
    margin: 0 auto;
}

.na_water_bg_70 .drawer_container {
    margin: 0 auto;
}

.drawer_container {
    max-width: 400px;
}

.drawer_container:after {
    padding-top: 100%;
}

#na_height:after {
    padding-top: 60%;
}

.na_plot {
    max-width: 650px;
}

.na_plot:after {
    padding-top: 50%;
}

.na_propeller_plot {
    max-width: 400px;
}

.na_propeller_plot:after, #na_propeller_aoa:after {
    padding-top: 50%;
}

#na_L {
    max-width: 500px;
}

#na_L:after {
    padding-top: 55%;
}

#na_3d_forces:after {
    padding-top: 80%;
}

#na_propeller_forward:after {
    padding-top: 55%;
}

#na_propeller_n_seg0 {
    max-width: 400px;
    margin: 0 auto;
}

#na_water_cylinder {
    max-width: 300px;
}

#na_hull, #na_hull_ratio {
    max-width: 600px;
}

#na_hull:after, #na_hull_ratio:after {
    padding-top: 55%;
}

#na_barrel {
    max-width: 500px;
}

#na_syringe_pressure {
    max-width: 500px;
}

#na_syringe_pressure:after {
    padding-top: 80%;
}

#na_brick_container:after {
    padding-top: 75%;
}

#na_barrel:after {
    padding-top: 70%;
}

#na_water_level:after {
    padding-top: 70%;
}

.na_black .slider_left_gutter,
.na_black .slider_right_gutter,
.na_black .slider_knob {
    background: #333;
}

.na_red .slider_left_gutter,
.na_red .slider_right_gutter,
.na_red .slider_knob {
    background: #DE3F3F;
}

.na_pitch .slider_left_gutter,
.na_pitch .slider_right_gutter,
.na_pitch .slider_knob {
    background: #218FCC;
}

.na_radius .slider_left_gutter,
.na_radius .slider_right_gutter,
.na_radius .slider_knob {
    background: #DB8906;
}

.na_black .slider_left_gutter,
.na_black .slider_right_gutter,
.na_black .slider_knob {
    background: #333;
}

.na_weight_slider .slider_left_gutter,
.na_weight_slider .slider_right_gutter,
.na_weight_slider .slider_knob {
    background: #37844F;
}

.na_water_slider .slider_left_gutter,
.na_water_slider .slider_right_gutter,
.na_water_slider .slider_knob {
    background: #76A9CE;
}

.na_wood_slider .slider_left_gutter,
.na_wood_slider .slider_right_gutter,
.na_wood_slider .slider_knob {
    background: #C3935E;
}

.na_wind_slider .slider_left_gutter,
.na_wind_slider .slider_right_gutter,
.na_wind_slider .slider_knob {
    background: #78ADCC;
}

.na_plot_angle_slider .slider_left_gutter,
.na_plot_angle_slider .slider_right_gutter,
.na_plot_angle_slider .slider_knob {
    background: #333;
}

.na_oil_slider .slider_left_gutter,
.na_oil_slider .slider_right_gutter,
.na_oil_slider .slider_knob {
    background: #341500;
}

.na_cargo_slider .slider_left_gutter,
.na_cargo_slider .slider_right_gutter {
    background: #aaa;
}

.na_cargo_slider .slider_knob {
    border: 2px solid #555;
    background: linear-gradient(90deg,
    #dad160 0%,
    #dad160 18%,
    #49addb 18%,
    #49addb 39%,
    #26a731 39%,
    #26a731 61%,
    #c76294 61%,
    #c76294 82%,
    #f05050 82%,
    #f05050 100%);
    width: 36px;
    height: 36px;
}

@media only screen and (max-width: 580px) {
    .segmented_control_on, .segmented_control_off {
        font-size: 18px;
    }
}

@media only screen and (max-width: 550px) {
    .segmented_control_on, .segmented_control_off {
        font-size: 16px;
    }
}

@media only screen and (max-width: 500px) {
    .segmented_control_on, .segmented_control_off {
        font-size: 15px;
        letter-spacing: -1px;
    }
}

@media only screen and (max-width: 350px) {
    .segmented_control_on, .segmented_control_off {
        font-size: 13px;
    }
}