html {
    font-family: Arial, Helvetica, Sans;
    color: #222;
}

html, body {
    height: 100%;
}

.hide {
    display: none !important;
}

body {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}

body > * {
    flex: 1 1 0;
}

hr {
    border: none;
    border-top: 1px solid black;
}

a {
    text-decoration: none;
}

.link {
    cursor: pointer;
    color: #000;
    padding: 10px 5px;
    border-radius: 2px;
}

.link:hover {
    color: rgb(0, 0, 255);
    background-color: #bfbfbf;
}

#content {
    margin: 10px;
    display: flex;
    flex-direction: column;
}

#content > * {
    flex: 1 1 0;
}

#toolbar {
    flex: 0 1 0;
}

#grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 10px;
    margin-top: 10px;
    min-height: 0;
}

#grid_container > * {
    min-width: 0;
    min-height: 0;
}

#code_input, #tables, #stdout, #stderr {
    border: 1px solid #b3b3b3;
}

#code_input {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#tables {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
}

#table_container {
    flex: 1 1 0;
    min-height: 0px;
    margin: 5px;
}

#table_container, .tab_body {
    height: 100%;
}

.jexcel_content {
    width: 100% !important;
    padding-bottom: 2px;
}

.output_container {
    display: flex;
    flex-direction: column;
}

.output_container > * {
    flex: 1 1 0;
}

.output_container > h1 {
    flex: 0 0 auto;
    margin: 0 0 5px 8px;
    font-weight: normal;
    font-size: 20px;
}

.output_container > textarea {
    resize: none;
    margin: 0;
    padding: 0 8px;
    white-space: pre;
}

#stdout_container {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

#stderr_container {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

#table_container > .tab_body {
    display: none;
}

#table_container > .tab_body.current {
    display: block;
}

#tab_container {
    display: flex;
    flex-wrap: wrap;
    background-color: #f4f4f4;
}

#tab_container > .tab_button {
    flex: 0 0 auto;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    padding: 5px 10px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

#tab_container > .tab_button > .tab_text {
    padding: 0px 10px;
}

#tab_container > .tab_button.current {
    background-color: white;
    border-left: 1px solid #b3b3b3;
    border-right: 1px solid #b3b3b3;
}

#tab_container > .tab_button:not(.current):hover {
    background-color: #d4d4d4;
}

#tab_container > .tab_button .xbtn {
	margin-left: 10px;
}

#tab_container > .tab_button .xbtn:hover {
	color: red;
}

.tab_button:first-child {
    border-left: none !important;
}

#modal_overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 30000;
    background-color: #00000080;
}

#modal_overlay > * {
    flex: 0 0 auto;
}

#new_table_form {
    background-color: #e6e6e6;
    border-radius: 4px;
    padding: 20px;
}

.content {
  padding-left: 25px;
  padding-right: 25px;
}

.content .title {
  margin-top: 50px;
  text-align: center;
  font-weight:200;
  font-size: 2.5rem;
  letter-spacing: 0.05rem;
}

.content .input_field {
  margin-top: 25px;
}

.content .input-line {
  width: 100%;
  background: none;
  margin-bottom: 10px;
  line-height:2.4em;
  color: black;
  letter-spacing: 0.02rem;
  font-size:1.2rem;
  border: none;
  border-bottom: 1px solid black;
  transition: all .2s ease;
}

#spacing {
  flex-grow: 1;
  height: 100px;
}

.content div button {
  width: 40%;
  float; left;
  cursor: pointer;
  background: none;
  border: 1px solid black;
  border-radius: 25px;
  color: black;
  align-self: flex-end;
  font-size: 1.2rem;
  line-height: 2.5em;
  margin-top: auto;
  margin-bottom: 25px;
  transition all .2s ease;
}
#submit_button {
  float: right;
}

#page {
    display: flex;
    min-height: 0;
}

#page > * {
    flex: 1 1 0;
}

#sidebar {
    flex: 0 0 auto;
    width: 26vw;
    background-color: #e6e6e6;
    overflow: auto;
    transition: width 0.5s;
}

#sidebar > div {
    margin: 20px 20px 20px 20px;
}

#sidebar.hidden {
    width: 0 !important;
}

#tut_list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#tut_list_view > h1 {
    text-align: center;
}

.tut_section {
    margin-top: 5px;
    font-weight: bold;
}

#tut_list > .link {
    padding-left: 25px;
}

#tut_controls {
    display: flex;
    text-align: center;
}

#tut_controls > * {
    flex: 1 1 0;
}

#tut_title {
    font-size: 28px;
}

#tut_body {
    font-size: 14px;
}

#tut_body p {
    line-height: 20px;
}

#tut_body img {
    max-width: 100%;
}

#tut_body pre {
    overflow: auto;
    background-color: #ffffff;
    padding: 8px;
    border: 1px solid #b3b3b3b3;
    border-radius: 4px;
}

#tut_body code {
    background-color: #ffffff;
    border-radius: 2px;
    padding: 1px 2px;
    white-space: pre;
}

#tut_body pre > code {
    padding: 0;
}

#tut_body li {
    margin: 8px 0;
}

#tut_nav {
    display: flex;
    text-align: center;
    margin-top: 50px;
}

#tut_nav > * {
    flex: 1 1 0;
}

#sidehandle {
    flex: 0 0 auto;
    width: 20px;
    background-color: #d0d0d0;
    border-left: 1px solid #a3a3a3;
    border-right: 1px solid #a3a3a3;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    user-select: none;
    color: #505050;
    align-items: center;
}

#sidehandle:hover {
    background-color: #c0c0c0;
}

#sidehandle > img {
    max-width: 10px;
}

#sidehandle.expanded > img {
    transform: scale(-1, 1);
}

#footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    border-top: 1px solid #b3b3b3;
    background-color: #f4f4f4;
    font-size: 12px;
}

#footer > span > * {
    margin: 0 5px;
}

#toolbar > .toolbar-group {
  background-color: #f4f4f4;
  border-color: rgba(0,0,0,.1);
  height: 34px;
  display: flex;
  border: 1px solid #b3b3b3;
  align-items: center;
}

.toolbar-button {
  border: none;
  padding: 0 8px;
  flex: 0 0 auto;
  background-color: transparent;
  height: 100%;
}

.toolbar-button > * {
    display: block;
    max-height: 20px;
}

.toolbar-button:focus {
  outline: none !important;
}

.toolbar-button:hover {
  background-color: #808080;
  cursor:pointer;
}

#status {
    margin-left: 24px;
}

.status-error {
    color: rgb(240, 0, 0);
}