.dark_light_bg {
    background: black;
    color: #ddd;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 5em auto;
    padding: 5em 0;
    display: inline-block;
    padding-bottom: 0;
    margin-top: 3em;
    padding-top: 3em;
}

.loading_text {
    margin: 0 auto;
    color:#333;
    font-size: 1.3em;
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    animation: flicker 2s infinite;
}

.ratio_45:after {
    padding-top: 45%;
}

.ratio_105:after {
    padding-top: 105%;
}

.ratio_200:after {
    padding-top: 200%;
}

.active_container {
    opacity: 1.0;
    transition: opacity 0.2s linear;
}

.inactive_container {
    opacity: 0.5;
    transition: opacity 0.2s linear;
}


#earthrise_container {
    margin-top: 10em;
    position: relative;

}

#earthrise_container::after {
    background-image: linear-gradient(to right, 
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.81) 1%,
    rgba(0, 0, 0, 0.64) 2%,
    rgba(0, 0, 0, 0.49) 3%,
    rgba(0, 0, 0, 0.36) 4%,
    rgba(0, 0, 0, 0.25) 5%,
    rgba(0, 0, 0, 0.16) 6%,
    rgba(0, 0, 0, 0.09) 7%,
    rgba(0, 0, 0, 0.04) 8%,
    rgba(0, 0, 0, 0.01) 9%,
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 90%,
    rgba(0, 0, 0, 0.01) 91%,
    rgba(0, 0, 0, 0.04) 92%,
    rgba(0, 0, 0, 0.09) 93%,
    rgba(0, 0, 0, 0.16) 94%,
    rgba(0, 0, 0, 0.25) 95%,
    rgba(0, 0, 0, 0.36) 96%,
    rgba(0, 0, 0, 0.49) 97%,
    rgba(0, 0, 0, 0.64) 98%,
    rgba(0, 0, 0, 0.81) 99%,
    rgba(0, 0, 0, 1) 100%
     );
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
}


#sun {
    cursor: default;

    position: absolute;
    border-radius: 50%;

    background: radial-gradient(circle, rgb(255, 253, 237) 0%,
            rgb(255, 252, 241) 70.3%,
            rgba(255, 241, 221, 0.5) 70.5%,
            rgba(255, 0, 0, 0) 70.7%);
    background-size: 100% 100%;

}

@-moz-document url-prefix() {
    /* Ugly gradient rendering in FF. */

    #sun {
        background: none;
        background-color: #fffcea;
    }

}


#ems_table {
    position: relative;

    z-index: 1;
}

#table_image1 {
    position: relative;

    z-index: 1;
}

#table_image1_sl0 {
    position: relative;

    z-index: 3;
}


.long_time {
    display: none;
}


.show_long_time .short_time {
    display: none;
}

.show_long_time .long_time {
    display: inline-block;
}


.article {
    overflow: clip;
}

.dark_light_bg a:visited {
    color: #658299;
}


.dark_light_bg .unit_switch {
    padding: 0.0em 1.6em 0em 0.2em;
    background: #060606;
    box-shadow: rgba(255, 255, 255, 0.3) 0 0 2px 0px;
}

.dark_light_bg .unit_switch:hover {
    box-shadow: rgba(255, 255, 255, 0.6) 0 0 2px 0px;
}


.dark_light_bg .unit_switch::after {
    height: 100%;
    background: rgba(62, 68, 70, 0.4);
    color: rgba(255, 255, 255, 0.5);
}

.dark_light_bg .unit_switch:hover::after {

    background: rgba(62, 68, 70, 0.7);
    color: rgba(255, 255, 255, 0.8);
}


.article a.link_button {

    color:#ede4d1;
    text-shadow: rgba(255, 232, 138, 0.6) 0 0 2px,
                rgba(255, 232, 138, 0.6) 0 0 4px;
    transition: 0.15s;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.06em;
}

a.link_button:hover {
    color:#ffffff;
  }



.dashed {
    background-image: linear-gradient(to right, rgba(200, 200, 200, 1) 50%, rgba(200, 200, 200, 0) 0%);
    background-position: 0.1em 1.2em;
    background-size: 7px 1.5px;
    background-repeat: repeat-x;
}



.solid {
    background-image: linear-gradient(to right, rgba(200, 200, 200, 1) 100%, rgba(200, 200, 200, 0) 0%);
    background-position: 0px 1.2em;
    background-size: 8px 1.5px;
    background-repeat: repeat-x;
}


.drawer_container {
    max-width: 500px;
}

.ratio_33:after {
    padding-top: 33%;
}

.planet_scale_button {
    position: absolute;
    width: 44px;
    height: 44px;
    bottom: 0px;
    right: 0px;
    background-image: url('/images/moon/icons.png');
    background-repeat: no-repeat;
    background-size: 132px 44px;
    background-position: -44px 0px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    touch-action: manipulation;
}
.large_planets .planet_scale_button {
    background-position: 0px 0px;
}

.planet_scale_button:hover {
    opacity: 0.8;
}


.equation {
    color: #888;
}

span.equation_div_symbol {
    background: #888;
}

.equation_div_bottom {
    padding-top: 0.1em;
}

.equation sup {
    top: -0.3em;
    left: 0.1em;
}

.magic_a {
    display: inline-block;
    position: relative;
    padding: 0 0.1em 0.2em 0.1em;
    border-radius: 0.25em;
    border: solid 1.5px #ddd;
    margin: 0 0.05em 0 0.1em;
    line-height: 0.7em;
}

.thin {
    color:#bbb;
    border: solid 1px #333;
    background-color: #111;
    padding: 0 0.3em 0.05em 0.3em;
}

.c1 .magic_a {
    border: solid 1.5px #EF7F39;
}



sub {
    /* top: -0.3em;  */
    left: 0.05em;
}

table .drawer_container {
    margin: 0;
    padding: 0;
}

.full_width {
    max-width: 100%;
}

table {
    table-layout: fixed;
    width: 100%;
}

#em_table {
    max-width: 560px;
}

#ems_table {
    margin-bottom: 2.5em;
}

tr {
    border-bottom: #333 1px solid;
    border-width: 1px 0;
    font-size: 1.1em;
}

tr:first-child {
    border-bottom: none;
}

tr:last-child {
    border-bottom: none;
}


td {
    padding: 0.4em;
    text-align: left;
}

td.row_title {
    color: #ccc;
    font-size: 0.9em;
    padding-left: 0.4em;
    width: 17%;
    border-top: none;
}

td.item_index {
    text-align: right;
    padding-right: 1em;
    width: 22%;
}

td.item_unit {
    width: 14%;
}


#em_table td.row_title {
    width: 25%;
}

#em_table td.item_index {
    width: 22%;
}

td.image {
    padding: 0em;
    padding-bottom: 1em;
    cursor: grab;
}

td.image:active {
    cursor: grabbing;
}

td.item_unit {
    width: 15%;
}

.item_unit {
    color: #555;
    font-size: 0.8em;
    /* padding-left: 0.8em; */
    text-align: left;
}

#brdf4_container {
    width: 100%;
    position: relative;
    padding: 0;
    user-select: none;
}

#brdf4_container:after {
    padding-top: 50%;
    display: block;
    content: '';
}

#brdf4,
#brdf4a {
    position: absolute;
    display: inline-block;
    width: 50%;
    margin: 0;
}

#brdf4 {
    left: 0;
}

#brdf4a {
    right: 0;
}



.split_container {
    width: 100%;
    position: relative;
    padding: 0;
    user-select: none;
    margin: 2.3em auto 2em auto;
}

.split_container:after {
    padding-top: 50%;
    display: block;
    content: '';
}

.split_container .drawer_container {
    position: absolute;
    display: inline-block;
    width: 50%;
    margin: 0;
}

.split_container .drawer_container:first-child {
    left: 0;
}

.split_container .drawer_container:last-child {
    right: 0;
}


.split_container.big_small:after {
    padding-top: 70%;
}


.split_container.big_small .drawer_container:first-child {
    width: 100%;
    height: 100%;

    max-width: 100%;
}

.split_container.big_small .drawer_container:last-child {
    bottom: 10px;
    right: 10px;
    max-width: 180px;
    width: 35%;
    /* background: radial-gradient(circle, 
     rgba(0, 0, 0, 0.5) 50%,
     rgba(0, 0, 0, 0.3) 55%, 
     rgba(0, 0, 0, 0.1) 60%, 
     rgba(0, 0, 0, 0.05) 65%, 
     rgba(0, 0, 0, 0.0) 70%); */
    /* backdrop-filter: brightness(85%); */
    /* border:1px solid rgba(255,255,255,0.1); */
    /* background-color: rgba(0,0,0,0.4); */
    /* background-color: rgba(255,255,255,0.1); */
    /* border-radius: 14px; */
}

#moon_halves {
    max-width: 500px;
}
#moon_halves:after {
    padding-top: 100%;
}

#moon_halves .drawer_container:last-child {
    left: calc(50% - 1px);
}




.article .img_border {
    padding: 0;
    max-width: 100%;
    border-radius: 4px;
    box-shadow: none;
    border: #ddd 7px solid;
    background: #d4b8b8;
    display: inline-block;
    margin: 1em 0;
}


.camera_icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: white;
    /* border: 2px solid black; */
    display: inline-block;
    white-space: nowrap;
    margin: 0em 0.15em 0.1em 0.15em;
}

.barycenter {
    width: 8px;
    height: 8px;
    /* background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c); */
    background: radial-gradient(circle, #fff 0%, #fff 30%,  #000 30%, #000 70%, #fff 70%, #fff 100%);

    border-radius: 50%;
    background-color: #396392;
    border: 1.5px solid white;
    display: inline-block;
    margin: 0em 0.1em 0em 0.1em;
}

.play_icon,
.planet_icon,
.locate_icon {
    background-color: rgba(255, 255, 255, 0.05);
    /* background-color: red; */
    border-radius: 14%;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('/images/play_pause_white.png');
    background-repeat: no-repeat;
    background-size: 78px 26px;
    background-position: -29px -3px;
    margin-bottom: -0.15em;
}

.locate_icon {
    background-image: url('/images/moon/icons.png');
    background-position: -55px -3px;
}

.planet_icon {
    /* background-color: red; */
    background-size: 66px 22px;
    background-image: url('/images/moon/icons.png');
    background-position: -23px -1px;
}

.large_planets .planet_icon {
    background-position: -1px -1px;
}

.gravity_force {
    color: #a2a2a2;
}

.tidal_force {
    color: #000;
    /* -webkit-text-stroke: 1px #999; */

    text-shadow:
  -1.41px 0 0 #ccc,
   1.41px 0 0 #ccc,
   0 -1.41px 0 #ccc,
   0 1.41px 0 #ccc,
   -1px -1px 0 #ccc,
   1px -1px 0 #ccc,
   -1px 1px 0 #ccc,
    1px 1px 0 #ccc;
}



.yellow {
    color: #EB9A30;
}

.F {
    color: #ccc;
}

.G {
    color: #70899f;
}

.gray {
    color: #555;
}


.moon {
    color: #B9B8B2;
}

.earth {
    color: #4578b2;
}


.proto_earth {
    color: #407495;
}


.ecliptic {
    color: rgb(87, 100, 133);
}

.orbital {
    color: #a0a0a0;
}

.line_of_nodes {
    color: #E4A26D;
}

.ascending {
    color: #6EAF38;
}


.descending {
    color: #EA5644;
}



.observer {
    color: #f64c4c
}

.emp {
    color: #E83624
}

.emn {
    color: #008FFF
}

.c0 {
    color: #EFC540
}

.slider_c0 .slider_left_gutter,
.slider_c0 .slider_right_gutter,
.slider_c0 .slider_knob {
    background: #EFC540;
}

.c1 {
    color: #EF7F39
}

.c2 {
    color: #31C0B1;
}

.c3 {
    color: #256BB9;
}

.c4 {
    color: #DA7BA3;
}

.c5 {
    color: #A41247;
}

.dashed.c0 {
    color: rgb(164, 136, 43);
    background-image: linear-gradient(to right, rgb(164, 136, 43) 50%, rgba(239, 197, 64, 0) 0%);
}

.dashed.c2 {
    background-image: linear-gradient(to right, rgba(49, 196, 180, 1) 50%, rgba(49, 196, 180, 0) 0%);
}

.dashed.c4 {
    background-image: linear-gradient(to right, rgba(218, 123, 163, 1) 50%, rgba(218, 123, 163, 0) 0%);
}

.slider_c1 .slider_left_gutter,
.slider_c1 .slider_right_gutter,
.slider_c1 .slider_knob {
    background: #EF7F39
}


.slider_c2 .slider_left_gutter,
.slider_c2 .slider_right_gutter,
.slider_c2 .slider_knob {
    background: #31C4B4
}


.slider_c3 .slider_left_gutter,
.slider_c3 .slider_right_gutter,
.slider_c3 .slider_knob {
    background: #256BB9
}





.slider_yellow2 .slider_left_gutter,
.slider_yellow2 .slider_right_gutter,
.slider_yellow2 .slider_knob {
    background: #E3D961;
}

.blue2 {
    color: #6197E3
}

.slider_blue2 .slider_left_gutter,
.slider_blue2 .slider_right_gutter,
.slider_blue2 .slider_knob {
    background: #6197E3
}

.camera {
    color: #fff
}

.slider_camera .slider_left_gutter,
.slider_camera .slider_right_gutter,
.slider_camera .slider_knob {
    background: #ddd
}

.time_speed {
    color: #545b69
}

.slider_speed .slider_left_gutter,
.slider_speed .slider_right_gutter,
.slider_speed .slider_knob {
    background: #545b69
}

.time_scrub {
    color: #777
}

.color_date {
    color: #7290AF
}

.color_time {
    color: #CDB57B;
}


.slider_date .slider_left_gutter,
.slider_date .slider_right_gutter,
.slider_date .slider_knob {
    background: #7290AF
}

.slider_time .slider_left_gutter,
.slider_time .slider_right_gutter,
.slider_time .slider_knob {
    background: #CDB57B
}

#sky26_seg0 {
    max-width: 500px;    
    margin: 0 auto;
}

.locate_button {

    position: absolute;
    width: 40px;
    height: 40px;
    right:0;
    bottom: 0;
    background-image: url('/images/moon/icons.png');
    background-repeat: no-repeat;
    background-size: 132px 44px;
    background-position: -90px -2px;
    cursor: pointer;
    
    border-radius: 50%;
    touch-action: manipulation;

 
    background-color: rgba(0,0,0,0.2);
    transition: background-color 0.1s linear;

}

@keyframes shake {
    0%   {transform:rotate(10deg);}
    20%  {transform:rotate(-10deg);}
    40%  {transform:rotate(10deg);}
    60%  {transform:rotate(-10deg);}
    80%  {transform:rotate(10deg);}
    100% {transform:rotate(0deg);}
}

@keyframes pulse {
    0%   {opacity: 1.0}
    50% {opacity: 0.5}
    100% {opacity: 1.0}
}

  
.locate_button:hover {
    background-color: rgba(0,0,0,0.3);
}

.location_querying .locate_button {
    animation-name: pulse;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.location_denied .locate_button {
    transition: background-color 0.15s linear;
    background-color: rgba(213, 30, 30, 0.692);
    animation-name: shake;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

@media only screen and (max-width: 750px) {
 
  td.item_unit {
      font-size: 0.7em;
      width: 16%;
  }
  

  }

@media only screen and (max-width: 630px) {
  #ems_table {
    font-size: 1em;
  }

  td {
    padding: 0.3em;
}

td.row_title {
    padding-left: 0.3em;
}

td.item_index {
    padding-right: 0.8em;
}

td.item_unit {
    font-size: 0.7em;
    width: 18%;
}

#ems_table td.row_title {
    width: 15%;
}
}

@media only screen and (max-width: 550px) {
    #ems_table {
        font-size: 0.9em;
    }

    .segmented_control_on, .segmented_control_off {
        font-size: 1em;
    }
}


@media only screen and (max-width: 520px) {
    #em_table {
        font-size: 1em;
    }
}


@media only screen and (max-width: 440px) {
    #ems_table {
        font-size: 0.8em;
    }
}

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

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