body{
  background: #222222;
}

text{
  fill: #fff;
}

h1, h2 {
  padding-top: 1em;
  padding-bottom: 0px;
}

h1 {
  color: white;
}

.menu {
  padding-bottom: 1em;
}

.hide {
  display: none;
}

.domain{
  stroke: #bcbbbd; stroke-width: 2;
}

.tick line, .axis{
  stroke: #bcbbbd; stroke-width: 2;
}

.tick text{
  fill: #bcbbbd; font-size: 1.8em;
}

#cartesian_graph_path{
  fill: none; stroke: #ffff57; stroke-width: 3; /* #8da67b */
}

#polar_graph_path{
  fill: none; stroke: #ffff57; stroke-width: 3; /* orange */
}

#polar_graph_dot {
  fill: #2ccdff; stroke: none;
}

.continuous #frequency_graph,
.discrete #discrete_frequency_graph {
  display: block;
}

.discrete #frequency_graph,
.continuous #discrete_frequency_graph {
  display: none;
}

#frequency_graph_path /* magnitude */ {
  fill: none; stroke: #ff1400; stroke-width: 3; /* #8da67b */
  display: none;
}
.frequency_graph_checkbox_magnitude_discrete, .frequency_graph_checkbox_magnitude_continuous {
  color: #ff1400;
}

#frequency_graph_path_x /* real part */ {
  fill: none; stroke: #00c4ff; stroke-width: 3; /* #8da67b */
}
.frequency_graph_checkbox_real_discrete, .frequency_graph_checkbox_real_continuous {
  color: #00c4ff;
}

#frequency_graph_path_y /* imaginary part */ {
  fill: none; stroke: #29ed29; stroke-width: 3; /* #8da67b */
  display: none;
}
.frequency_graph_checkbox_imaginary_discrete, .frequency_graph_checkbox_imaginary_continuous {
  color: #29ed29;
}

.discrete_frequency_graph_dot_x {
  fill: #00c4ff;
}
.discrete_frequency_graph_dot_y {
  fill: #29ed29;
}

#frequency_graph_dot_x {
  fill: #2ccdff; stroke: none;
}

.discrete .frequency_graph_checkbox_imaginary_discrete, .discrete .frequency_graph_checkbox_real_discrete {
  display: block;
}
.continuous .frequency_graph_checkbox_imaginary_discrete, .continuous .frequency_graph_checkbox_real_discrete {
  display: none;
}

.continuous .frequency_graph_checkbox_imaginary_continuous, .continuous .frequency_graph_checkbox_real_continuous, .continuous .frequency_graph_checkbox_magnitude_continuous {
  display: block;
}
.discrete .frequency_graph_checkbox_imaginary_continuous, .discrete .frequency_graph_checkbox_real_continuous, .discrete .frequency_graph_checkbox_magnitude_continuous {
  display: none;
}

#function_graph_path{
  fill: none; stroke: #ffff57; stroke-width: 3; /* #8da67b */
}

#function_graph_path_zero {
  fill: none; stroke: #bcbbbd; stroke-width: 3;
}

.discrete #function_graph_path{
  stroke: #a7a739;
}

.continuous .function_graph_dot {
  display: none;
}
.discrete .function_graph_dot {
  display: block;
  fill: #ffff57;
}

#function_graph_path_0 {
  fill: none; stroke: #f53939; stroke-width: 3; /* #8da67b */
}

#function_graph_path_1 {
  fill: none; stroke: #39f573; stroke-width: 3; /* #8da67b */
}
#function_graph_path_2 {
  fill: none; stroke: #0fa2fd; stroke-width: 3; /* #8da67b */
}

#controls {
  color: #FFF;
  padding: 0px;
}
#controls form, #controls label {
  margin-bottom: 0px;
}

#controls>div {
  margin: 10px 0px;
  padding: 10px;
  padding-bottom: 0px;
}

.controls-row {
  margin: 0px;
  margin-bottom: 10px;
  display: flex;
}
.controls-left {
  width: 25%;
  margin: 0px;
}
.controls-right {
  width: 75%;
  position: relative;
}
.controls-right>input {
  position: absolute;
  left: 0px;
  bottom: 5px;
}
.controls-right>select {
  position: absolute;
  left: 0px;
}

.controls-left.two-controls {
  width: 25%;
  margin: 0px;
}
.controls-right.two-controls {
  width: 25%;
  position: relative;
}

#function_sum {
  border: 3px solid #ffff57;
}

#function_f_0 {
  border: 3px solid #f53939;
}

#function_f_1 {
  border: 3px solid #39f573;
}

#function_f_2 {
  border: 3px solid #0fa2fd;
}

/****** sliders ******/
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6px 0;
  background: initial;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #dcdcdc;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.65), 0px 0px 2px rgba(13, 13, 13, 0.65);
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #dcdcdc;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #dcdcdc;
  border-radius: 0px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.65), 0px 0px 2px rgba(13, 13, 13, 0.65);
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #dcdcdc;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #dcdcdc;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.65), 0px 0px 2px rgba(13, 13, 13, 0.65);
  border: 0px solid #000000;
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #ffffff;
  cursor: pointer;
  height: 3px;
}
input[type=range]:focus::-ms-fill-lower {
  background: #dcdcdc;
}
input[type=range]:focus::-ms-fill-upper {
  background: #dcdcdc;
}