/* https://stackoverflow.com/questions/651317/div-width-100-minus-fixed-amount-of-pixels */
/* Rowan Sharp helped with some color choices */

body
{
     background-color: black;
     color: white;
     text-align: center;
     height: 100%;
     width: 100%;
     margin: 0;
}

#editorBody
{
     overflow: hidden;
}

div
{
  margin: 2em;
  padding: 2em;
  background-color: #070d17;
  border-radius: 1em;
}

a
{
     background-color: #2a3040;
     border-radius: 1em;
     color: #8ec1f3;
}

#topbar
{
     width: auto;
     height: 60px;
     background: none;
     padding: 0;
     margin: 0;
}

#main
{
     display: flex;
     width: auto;
     height: calc(100vh - 200px);
     background: none;
     padding: 0;
     margin: 0;
}



.sidebar
{
     width: 80px;
     padding: 0;
     margin: 0;
     background: none;
}

.center
{
     flex: 1;
     margin: 0;
     background: none;
     padding: 0;
}

#bottombar
{
     width: auto;
     height: 60px;
     /* height: auto; */
     background: none;
     margin: 32px 32px;
     padding: 0;
}

#blockHolder
{
     position: absolute;
     top: 50%;
     /* z-index: 0; */
     width: 50px;
     transform: translateY(-50%);
     /* height: 30%; */
     /* top: 50%;
     left: 0%; */
     /* margin-top: -15%;
     margin-left: 0px; */
     margin: 0;
     background-color: #252629;
     padding: 5px 10px;

}

.source
{
  color: white;
  border: 1px solid black;
  height: 50px;
  width: 50px;
  margin: 5px 0px;
}

#blockTarget
{
  /* border: 1px solid black; */
  /* display: contents; */
  /* width: 80vw; */
  /* height: 80vh; */
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: auto;
  background: #070d17;
}

img
{
     width: auto;
}

p
{
     display: block;
     margin: 1em;
}

.editText
{
     width: 60%;
     /* height: 2em; */
     resize: vertical;
     text-align: center;
     color: inherit;
     background-color: #252629;
     font: inherit;
     border: none;
     margin: 0;
     padding: 0;
}

.headerEditText
{
     width: 60%;
     /* height: 2em; */
     resize: none;
     text-align: center;
     color: inherit;
     background-color: #252629;
     font: inherit;
     border: none;
     margin: 0;
     padding: 0;
}

.otherEditText
{
     width: 60%;
     /* height: 2em; */
     resize: vertical;
     text-align: center;
     color: inherit;
     background-color: #252629;
     font: inherit;
     border: none;
     margin: 10px;
     padding: 0;
}


.textEditBlock
{
     /* border: black 2px solid; */
     padding: 0px;
     /* background-color: #171719; */

}

.otherEditBlock
{
     border: black 2px solid;
     padding: 1em;
     margin: 1em;
     background-color: #2c3644;
}

.headerEditBlock
{
     padding: 0px;
     background-color: black;

}

.buttonContainer
{
     margin: auto;
     padding: 0;
     background-color: inherit;
}

.editButton
{
     font-size: 10px;
     margin: 0em 1.5em;
     padding: 1em;
     border-radius: 10px;
     background-color: black;
     color: white;
}

/* https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */
.blockTrash
{
     /* position: absolute;
     z-index: 0;
     bottom: 0%;
     right: 0%; */

     width: 60px;
     height: 60px;
     margin: auto;
     background-color: #252629;
     padding: 0px;
     display: inline-block;

     -webkit-touch-callout: none; /* iOS Safari */
       -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
          -moz-user-select: none; /* Old versions of Firefox */
           -ms-user-select: none; /* Internet Explorer/Edge */
               user-select: none; /* Non-prefixed version, currently
                                     supported by Chrome, Opera and Firefox */
}

.editorButton
{
     /* position: absolute;
     z-index: 0;
     top: 0;
     right: 0; */
     width: 60px;
     height: 60px;
     margin: 0px 12px;
     background-color: #252629;
     padding: 0px;
     display: block;
     display: inline-block;
}

#previewButton
{
     float: right;
}

#saveButton
{
     float: left;
}

#exportButton
{
     float: left;
}

.trash
{
     height: 40px;
     width: 40px;
     padding: 10px;
     border-radius: 1em;
}

.editingLink
{
     padding: 10px;
     border: black solid 2px;
     width: 90%;
     margin: auto;
     display: block;
}

.editingDiv
{
     padding: 10px;
     border: black solid 2px;
     /* width: 90%; */
     margin: auto;
     background-color: #273244;
}

.userHtml
{
     padding: 10px;
     border: black solid 2px;
     /* width: 90%; */
     margin: auto;
     background-color: #354254;
}

#prev
{
     margin: 0;
     width: 100vw;
     height: 100%;
     padding: 0;
     overflow: auto;
     background: #070d17;
}

.buttonText
{
     margin: 1em 0;
}

.matchers
{
     margin: auto;
}

#passMatch
{
     color: green;
     display: block;
}

#passDont
{
     color: red;
     display: none;
}

.buttonLink
{
     background: #23334c;
     border: white solid;
     border-radius: 5px;
     color: white;
     font-size: 1.75em;
     user-select: none;
     white-space: pre;
     align-items: flex-start;
     text-align: center;
     cursor: default;
     box-sizing: border-box;
     padding: 1px 7px 2px;
     letter-spacing: normal;
     word-spacing: normal;
     text-transform: none;
     text-indent: 0px;
     text-shadow: none;
     display: inline-block;
     text-decoration: none;
     margin: 10px;
}

.signButton
{
     position: absolute;
     top: 5px;
     right: 5px;
     font-size: 1em;
}

.homeButton
{
     position: absolute;
     top: 5px;
     left: 5px;
     font-size: 1em;
}

.smallerButtonLink
{
     font-size: 1em;
}

table
{
     width: 100%;
}

table, th, td
{
  border: 2px solid white;
  border-collapse: collapse;

}

th, td
{
     padding: 15px;

}

.previewCell
{
     background: none;
     width: 80vw;
     height: 15vh;
     overflow: auto;
     padding: 0;
     margin: 0;
}