body, .scene_editor {
    background-color: #222;
    color: #f2f2f2;
}

.collapsible {
    background-color: #222;
    color: #f2f2f2;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 24px;
}

.active, .collapsible:hover {
    color: #222;
    background-color: #f2f2f2;
  }

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.content {
    display: none;
    overflow: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    font-family: Alice;
    float: left;
    color: #f2f2f2;
    text-align: center;
    vertical-align: middle;
    padding: 0px 16px;
    line-height: 50px;
    text-decoration: none;
    font-size: 24px;
    height: 56px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #f2f2f2;
    color: #222;
}

.topnav label {
    font-family: Alice;
    float: left;
    background: #f2f2f2;
    text-align: center;
    height: 56px;
    text-decoration: none;
    font-size: 24px;
}

/* The slider itself */
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
}

@font-face {
	font-family: Alice;
	src: url('fonts/Alice-Regular.ttf');
}

@font-face {
	font-family: Calligraphica;
	src: url('fonts/Kingthings Calligraphica 2.ttf');
}

@font-face {
	font-family: Calligraphica Light;
	src: url('fonts/Kingthings Calligraphica Light.ttf');
}

a {
    color: #f2f2f2;
}

p, li, label {
	font-family: Alice;
	color: #d4c794;
}

.sceneinput {
    font-family: Alice;
    background-color: #222;
    color: #f2f2f2;
}

button, h1, h2, h3 {
	font-family: Calligraphica Light;
}

#player_table {
    width: 100%;
}

#player_div, #player_line_div, #help_div, #timer_div, #browser_div {
    
    background-color: #222 !important;
    color: #f2f2f2 !important;
    font-family: Alice !important;
}

#player_controls_div {
    float: left;
    width: 20%;
}

 #player_timer_div, #timer_timer_div {
    float: left;
    font-family: Alice !important;
    color: #f2f2f2 !important;
}

#player_button_div, #timer_button_div {
    float: left;
    text-align: center;
}

#player_line_div, #timer_line_div {
    width: 80%;
    font-size: 125%;
    float: left;
    text-align: center;
    background-color: #444 !important;
}

/* Outlines the colored text with black to make it easier to read */
#line_div span{
    -webkit-text-stroke: 1px black;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

.editor-container {
  /* height: 80px; */
  /* max-width: 320px; */
}

.editor-wrapper {
  border: 1px solid #aaa;
  box-shadow: 0 0 2px 2px #ddd;
}

.formatting-container {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  padding: 5px 12px;
}

input.textFieldEditor {
    width: 100%;
}

input.numFieldEditor {
    width: 80px;
}

.cast_table{
    table-layout: fixed;
    text-align: left !important;
    width: 100%;
    display: table;
    max-width: 360px;
    overflow: hidden;
}

.cast_table td{
    width: 100%;
    max-width: 180px;
}

.cast_input_box {
    max-width: 180px;
}

.info_table {
    table-layout: fixed;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
}

.info_table td {
    width: 100%;
    max-width: 180px;
}

.speed_table {
    table-layout: fixed;
    width: 100%;
    max-width: 360px;
}

.speed_button {
    width: 100%;
    max-width: 120px;
}

.speed_slider {
    width: 350px;
    max-width: 350px;
}

#lines_help {
    width: 100%;
    max-width: 360px;
}

td.actor {
    min-width: 120px;
}

table.lines {

    width: 100%;
}

td.lineCol {
    width: 12%;
}

td.editorCol {
    width: 28%;
}

button.editorButton {
    width: 80px;
    height: 20px;
}

tr.castSpaceAbove > td
{
    padding-top: 1em;
}

.next {
    color: #777777;
}

* {
    box-sizing: border-box;
}

.reactive_row:after {
    content: "";
    display: table;
    clear: both;
}

.reactive_column {
    float: left;
    width: 50%;
    padding: 10px;
}

#sceneLongDescription {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 720px) {
    .reactive_column {
        width: 100%;
    }
}