@font-face {
    font-family: 'Noto Sans SC';
    src: url('/static/font/NotoSansSC-Regular.ttf');
}
@font-face {
    font-family: 'Noto Serif JP';
    src: url('/static/font/NotoSerifJP-Regular.otf');
}
@font-face {
    font-family: 'Noto Serif TC';
    src: url('/static/font/NotoSerifTC-Regular.otf');
}

body[data-language="zh_Hant_TW"] {
    font-family: 'Noto Serif TC', serif;
}
body[data-language="zh_Hans_CN"] {
    font-family: 'Noto Sans SC', sans-serif;
}

body[data-language="ja_JP"] {
    font-family: 'Noto Serif JP', sans-serif;
}


html, body {
    margin: 5px;
    padding: 0;
    background-color: #EFEFFF;
}
#goto_top_button {
  display: inline-block;
  background-color: #416186;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#goto_top_button::after {
  content: "Top";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 50px;
  color: #fff;
}
#goto_top_button:hover {
  cursor: pointer;
  background-color: #333;
}
#goto_top_button:active {
  background-color: #555;
}
#goto_top_button.show {
  opacity: 1;
  visibility: visible;
}


@media only screen and (max-width: 1023px) {
  .hide_for_small{
    display: none;
  }
  .show_for_small{
    display: block;
    border-top: 2px solid #e3e3ef; padding-left:10px; width:100%;border-bottom: 2px solid #e3e3ef;
  }
}
@media only screen and (min-width: 1024px) {
  .show_for_small{
       display: none;
  }
  .hide_for_small{
    display: block;
  }

}
.btn-show-delete{
  border: 1px solid #444444;
}

.math-input{
    font-family: 'Courier'
}

.math-display{
    font-family: 'Courier';
    background-color: rgba(188, 243, 200, 0.69);
    padding: 8px;
}


/*display row numbers for code-textarea*/
.textarea-container {
    display: flex;
    align-items: flex-start;
}

/* apply all textarea */
.textarea-rownum {
    resize: vertical;
    line-height: 1.5;
    overflow-y: scroll;
}

.line-numbers {
    padding: 0;
    line-height: 1.5;
    margin-right: 5px;
    text-align: right;
    user-select: none;
    color: gray;
}

.input-box-code {
    border:1px solid #444444;padding:2px 10px 2px 10px;background-color:#FFFFFF
}
.input-box-code-highlight {
    border:2px solid red; padding:2px 10px 2px 10px;background-color: #efeec2
}