html{
  scroll-behavior: smooth;
}
body{
  font-family: "helvetica neue", Helvetica, Arial, sans-serif;
  background-color: rgb(40,40,40);
  font-size: 150%;
  color:rgb(200,200,200);
}
main{
  margin: 2em 1%;
  max-width: 100%;
  overflow-x: scroll;
}
header, footer{
  position: fixed;
  left: 0;
  padding: 0.3%;
  width: 100%;
}
header{
  top: 0;
  z-index: 9;
  background-image: linear-gradient(rgba(40, 40, 40, 1), rgba(40, 40, 40, 0.8), rgba(40, 40, 40, 0.0));
}
header.elapsed{
  background-color: rgba(30,30,30, 0.9);
}
header.elapsed a{
  color: rgb(200,200,200);
}
header.elapsed #header_links a{
  display: block
}

#header_links{
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 100vh;
}
#header_links:not(.elapsed){
  max-height: 1.2em;
}
#header_links.elapsed{
  transition: max-height 1s linear;
  max-width: 100vw !important
}
header img{
  max-height: 1em;
  margin: 0;
}
#elapse_button, .elapsable_button img {
  margin: 0;
  padding: 0;
  padding-left: 0.25em;
  transition: all 0.3s ease;
}
.elapsable_button img{
  max-height: 1em;
  margin-right: 0.3em
}
.elapsable_button:hover img{
  opacity: 0.5;
}

#elapse_button.elapsed, .elapsable_button:not(.elapsable_hidden) img{
  transform: rotate(90deg);
}
footer{
  bottom: 0;
  background-image: linear-gradient(rgba(40, 40, 40, 0), rgba(40, 40, 40, 0.8), rgba(40, 40, 40, 1));
}
h1{
  font-size: 350%;
}
.centeredwindow h2, .scrollwindow h2{
  font-size: 350%;
  color: green;
}
h2{
  font-size: 250%;
}
h3{
  font-size: 200%;
}
#topright{
  position: fixed;
  top: 0;
  right: 0;
}
header:not(.elapsed) br:not(.preventOverride){
  display: none;
}
#language_select div, #globalmessagescontent{
  background-color: rgb(20,20,20);
  border-radius: 0.5em;
  width: fit-content;
}
#language_select a:hover{
  text-decoration: none;
}
#language_button:hover{
  color: rgb(120,120,120);
}
#language_select{
  padding: 0;
  margin: 0;
}
#language_select:hover div, #globalmessages:hover div, .globalmessages_enabled div{
  position: fixed;
  right: 0.3em;
  top: 1.3em;
  padding: 1%;
}
#language_select:not(:hover) div, #globalmessages:not(:hover):not(.globalmessages_enabled) div{
  display: none;
}
#globalmessagescontent p {
  background-color: darkred;
  margin: 0.5em;
  padding: 0.4em;
  border-radius: 0.75em
}
#globalmessagescontent p a.readglobalmessages{
  color: black;
  margin-left: 1em;
  text-decoration: none;
}
a, .link{
  font-weight: bold;
  color: rgb(150,150,150);
  text-decoration: none;
}
a:hover, .link:hover{
  color: rgb(120,120,120);
  text-decoration: underline;
}
.nolink, .nolink:hover{
  color: inherit;
  text-decoration: none;
  font-weight: normal;
}
.centeredwindow, div.scrollwindow div{
  position: absolute;
  top: 35%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 100vw
}

.centeredwindow form{
  width: 100%
}

div.scrollwindow div{
  -moz-transform: translateX(-50%) translateY(-38%);
  -webkit-transform: translateX(-50%) translateY(-38%);
  transform: translateX(-50%) translateY(-38%);
  width: 90vw
}
.scrollwindow{
  position: relative;
  height: 70vh;
  width: 90%;
  left: 5%;
}
.scrollwindow .button{
  padding: 0.3em 1.6em;
}
input, button, select, textarea{
  font: inherit;
  color: inherit;
  outline: none;
  border: none;
  background-color: inherit;
}
input, .button, select, textarea{
  border-radius: 0.5em;
  padding: 0.5% 3%;
  margin: 0.3%;
  background-color: rgb(70,70,70);
}
.button, button{
  min-width: 2em;
  min-height: 1em;
}
.button{
  background-color: rgb(17, 97, 17);
  width: fit-content;
  display: inline-block;
  color: white;
  text-decoration: none;
  font-weight: normal;
  transition: all linear 0.2s;
}
.nobutton{
  background-color: rgba(0,0,0,0);
  display: contents;
}
.button.elapsable_button:not(.elapsable_hidden){
  background-color: rgb(100,0,0);
}
.button.elapsable_button:not(.elapsable_hidden):hover{
  background-color: rgb(50,0,0);
}
.unpressable{
  background-color: rgb(70,70,70);
}
.autocomplete{
  background-color: rgb(55,55,55);
}
.autocomplete:hover{
  background-color: rgb(10,10,10)
}
.unpressable:hover{
  color: rgb(20,20,20)
}
.button:hover:not(.unpressable):not(.marked):not(.autocomplete):not(.elapsable_button:not(.elapsable_hidden):hover){
  background-color:  rgb(0, 40, 0);
}
.button:hover{
  color: rgb(100,100,100);
  text-decoration: none;
}
#usermessages{
  position: fixed;
  top: 0.5em;
  right: 0.3em;
  z-index: 11;
  overflow-y: hidden;
  text-align: right;
}
.usermessage{
  padding: 0.3em 0.5em;
  background-color: rgba(20, 20, 20, 0.93);
  border-radius: 1.05em;
  border: 0.1em solid rgb(0, 80, 80);
  color: rgb(200, 200, 200);
  transition: opacity 0.45s ease, max-height 0.45s linear, margin-bottom 0.45s linear, padding 0.45s linear;
  width: fit-content;
  float: right;
  margin-bottom: 0.2em;
}
.usermessage.logusermessage{
  border: 0.1em solid rgb(0, 200, 0);
}
.usermessage.warning{
  border: 0.1em solid darkred
}
.marked{
  background-color: yellow;
  color: black;
}
.marked:hover{
  background-color: rgb(70, 70, 0);
  color: rgb(150,150,150)
}
.widebutton, .wide{
  width: -moz-available;
  width: -webkit-fill-available;
}
input[type=checkbox]{
  height: 1em;
  margin-left: 0.75em;
}

.elapsable{
  overflow: hidden;
  transition: all 0.15s linear
}
.elapse_button{
  margin-top: 0;
}
.floatright{
  float: right;
}

table th {
  text-align: left;
}
table, th, td{
  border: 0.1em solid rgb(200,200,200);
  border-collapse: collapse;
}
th, td{
  padding: 0.3em
}
tr{
  background-color: black
}
tr:nth-child(even) {
  background-color: rgb(30,30,30);
}
th.right, td.right{
  text-align: right;
}

.moment_timestamp{
  display: none;
}


.autosaveTextarea{
  background-color: black;
  transition: background-color 0.7s linear, color 0.7s linear;
}
textarea.autosaveTextarea{
  min-height: 3em;
}
.autosaveTextarea.saving{
  background-color: rgb(160, 160,0);
  color: black;
}


.flex-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
@media screen and (max-device-width: 768px){
  body{
    font-size: 400%;
  }
  .flex-container{
    flex-direction: column;
  }
  .flex-container.forcerow{
    flex-direction: row
  }
  .hideOnMobile{
    display: none
  }
  table{
    font-size: 50%
  }
  h3{
    font-size: 135%
  }
}

@media (pointer:coarse){
  .hideOnTouch{
    display:none
  }
}
@media (pointer:fine){
  .hideOnMouse{
    display: none;
  }
}

.autosize{
  resize: none
}

.EasyMDEContainer .editor-toolbar, .EasyMDEContainer .editor-toolbar.fullscreen{
    border: none;
    background: black;
}
.EasyMDEContainer .CodeMirror, .EasyMDEContainer .CodeMirror-wrap, .EasyMDEContainer .editor-preview-active, .EasyMDEContainer .editor-preview-active-side{
  color: rgb(200, 200, 200) !important;
  background: rgb(50, 50, 50) !important;
  border: 1px solid black !important;
}
.mobileMarkdownEditor, .mobileMarkdownPreview{
  min-height: 5em;
}
.mobileMarkdownEditor.preview{
  display: none;
}
.mobileMarkdownPreview{
  background-color: rgb(10,10,10);
  border-radius: 0.5em;
  padding: 0.1% 3% 0.5% 3%;
  margin: 0, 0.3%, 0.3%, 0.3%;
  overflow: scroll;
}
.markdownEdit, .markdownPreview{
  position: absolute;
  top: 0.3em;
  right: 0.3em;
}
.mobileMarkdownPreview:not(.preview){
  display: none
}
.markdownContainer{
  position: relative;
}
.markdownEdit.marked, .markdownPreview.marked{
  display: none
}
.markdownEdit, .markdownPreview{
  display: block;
  height: 1em;
  width: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.markdownEdit{
  background-image: url("/static/startid/root/edit.png");
}
.markdownPreview{
  background-image: url("/static/startid/root/preview.png");
}

fieldset{
  margin: 0.3em 0;
  border-radius: 0.75em;
  background-color: rgb(30,30,30);
}
fieldset legend{
  font-weight: bold;
  color: white;
  max-width: 100%
}
fieldset fieldset{
  background-color: rgb(40,40,40)
}


.checkbox, .backgroudImageButton{
  height: 1em;
  min-width: 0em;
  min-height: 0em;
  width: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  color: rgba(0,0,0,0)
}

.checkbox{
  border: 0.1em solid black;
  border-radius: 0.4em;
  background-color: rgb(200,200,200);
  margin-right: 0.5em;
  position: relative;
  top: 0.25em;
}
.checkbox.checked{
  background-color: blue;
  background-image: url("/static/startid/root/checkbox.png");
}

select{
  background-color: black;
  outline: none;
  margin: 0.3em 0 1em 0;
  appearance: none;
}

.markdownBlock{
  background-color: black;
  border-radius: 0.75em;
  padding: 0 0.5em;
  min-height: 3em;
}

.commentHeading{
  font-weight: bold;
  margin-bottom: 0.1em
}