.header__account {
  margin-left: 0;
}

.markdown {
  display: -ms-grid;
  display: grid;
  height: calc(100vh - 50px);
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
}

.markdown__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 50px;
  background: #2E2E2E;
}

.markdown__header a.header__account {
  padding-top: 7.5px;
  text-decoration: none;
}

.markdown__switch-icon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.markdown__switch-icon:hover {
  background-color: #3f3f3f;
}

.markdown__switch-icon input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.markdown__switch-icon input:hover {
  cursor: pointer;
}

.markdown__switch-icon label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
      align-self: center;
  padding: 10px;
}

.markdown__switch-icon input + label::before {
  content: "switch to style editor";
}

.markdown__switch-icon input:checked + label::before {
  content: "switch to text editor";
}

.markdown__print-icon {
  margin: auto 20px;
  padding: 4px;
  background: none;
}

.markdown__small-sreen-warning {
  display: none;
  margin: 20px;
}

.markdown__editor, .markdown__viewer {
  display: block;
  height: 100%;
  overflow: hidden;
}

.markdown__editor > textarea {
  width: 100%;
  height: 100%;
  resize: none;
}

.markdown__editor > [data-editor="style"] {
  position: relative;
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.markdown__editor > [data-editor="style"] [data-style-editor="resetStyles"] {
  position: absolute;
  right: 20px;
}

.markdown__editor > [data-editor="style"] .markdown__input-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.markdown__editor > [data-editor="style"] .markdown__input-line > * {
  margin-left: 10px;
}

.markdown__editor > [data-editor="style"] input[type="number"] {
  padding: 5px 8px;
  border: 2px solid white;
}

.markdown__editor > [data-editor="style"] [data-style-editor="customCSS"] {
  width: 100%;
  min-height: 400px;
  resize: none;
}

.markdown__viewer > iframe {
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 800px) {
  .markdown {
    display: none;
  }
  .markdown__switch-icon {
    display: none;
  }
  .markdown__print-icon {
    display: none;
  }
  .markdown__small-sreen-warning {
    display: block;
  }
}