@import url('https://fonts.cdnfonts.com/css/verdana');

.editor-container {
    display: flex;
    gap: 1rem;
  }

  @media only screen and (max-width: 1060px) {
    .editor-container {
        display: block!important;
        gap: 0rem;
      }

      .editor-container-preview {
        display: flex;
        /*gap: 1rem;*/
        margin-top:10px;
      }

      textarea {
        padding: 1rem;
        width:680px!important;
        height: 400px;
        /*border: 1px solid #ccc;
        font-family: monospace;*/
        overflow: auto;
        min-width:350px;
      }
  }

.editor-container-preview {
    display: flex;
    /*gap: 1rem;
    margin-top:10px;*/
  }
  textarea {
    padding: 1rem;
    width:768px;
    height: 400px;
    /*border: 1px solid #ccc;
    font-family: monospace;*/
    overflow: auto;
    min-width:350px;
  }
  #preview {
    background: linear-gradient(to bottom, #f9f9f9 0%,#eeeeee 100%);
    border: 1px solid #858179;
    border-radius:10px;
    min-height:300px;
  }
/*body {
    background-color: #1b1c24!important
}*/

html, body {
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
    font-family: Verdana, Geneva, sans-serif!important;
    width: 100%;
    height:100%;
    font-size:12px!important;
    line-height:1.2!important
  }

  .forumBio {
    width:553px!important;
    border-radius: 0px 10px 10px 0px!important;
    padding:20px!important; 
  }

  .forumSig {
    min-height:100px!important;
    max-height:100px!important;
    width:525px!important;
    overflow:hidden!important;
    padding: 15px 0 0 0;
  }

  .dragonBio {
    width:680px!important;
    min-width:680px;
    padding:20px!important; 
  }

  .dragonBioVista {
    width: 555px!important;
    border-radius: 0px 10px 10px 0px!important;
    padding:20px!important; 
  }

  .userBio {
    width: 430px!important;
    background: none!important;
    border: 1px solid #d1d1d1 !important;
    border-radius: 0!important
  }

  .editor-container:has(.dragonBioVista) #vista,.editor-container:has(.forumBio) #vista {
    width:145px;
    background: linear-gradient(to bottom, #f9f9f9 0%,#eeeeee 100%);
    border: 1px #858179;
    border-style: solid none solid solid; 
    border-radius: 10px 0px 0px 10px!important;
  }

  /*p,li {
    color: #fff
  }*/

  .spoiler {
    background: #000;
    color: #000;

    &:selection {
        color: #fff;
        background-color: #222!important
    }
  }

  img {
    vertical-align: bottom!important;
  }

  sup,sub {
    font-size:9px!important;
  }

  .bb-code-header {
    background-color: #874430;
    color: white;
    font-weight: bold;
    padding:0.25em 0.5em;
    position: relative;
  }

  .bb-code {
    border: 1px solid #874430;
    margin: 0.5em 0;
    height: auto;
    position: relative;
    white-space:normal;
  }

  .bb-code-content {
    background-color: #f8f3d4;
    color: black;
    font: 10pt monospace;
    padding:0.5em 1em;
    position: relative;
    height: auto;
    overflow:auto;
  }

  tr td:nth-child(1) {
    padding-right: 1em;
    padding-left: 0em!important;
    vertical-align: top;
  }
  .bb-code-col {
    padding: 0 1em;
    vertical-align: top;
  }

  hr {
    margin: 0.5em 0px 0.5em 0px !important;
    padding:0!important;
    border-top: 2px solid #555555!important
  }


/* Hide <br><br> directly after <hr>, unless there's text in between or it's inside a span or p */

  

  
  /* Ensure <br><br> between content with text (i.e., not directly after hr) doesn't get hidden */
  hr + br + br:not(:empty) {
    display: inline-block!important;
  }
  
br:has(+ [style*="text-align:center"]), br:has(+ [style*="text-align:left"]),br:has(+ [style*="text-align:right"]),  table + br {
    display:none
}


span br {
    display: inline-block!important;
}
hr + br {
    display: none!important;
  }

  [style*="text-align:center"] + br, [style*="text-align:left"] + br,[style*="text-align:right"] + br  {
    display:none!important
}

em {
    font-style: italic!important
}

table{
    margin-top:1em;
    margin-bottom: 1em;
}

.bb-code-morpho, .bb-code-outfit  {
    margin-bottom: 15px;
    margin-right: 3px;
    margin-left: 3px;
}