html {
    font-family: georgia;
    height: 98%;
}
body {
    height: 99%;
}

.container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

.new {
    border:0px solid red;
    font-family: georgia;
    font-size: 100%;
    background: #FAFAFA;
    color: black;
    text-align: center;
    height: 100%;
}
.textcontainer{
background: white;
  width: 100%;
  height: 60%;
}

.inputbox {
    border: 0px solid grey;
    width: 100%;
    height: 30%;
    margin-left: auto;
    margin-right: auto;
}

.textupper{
  background: white;
  width: 100%;
  height: 65%;
}
.partitionbox {
  background: #FAFAFA;
  color: black;
  border: 0px solid red;
  width: 100%;
  height: 5%;
  margin-left: auto;
  margin-right: auto;
}
.textlower{
  background: white;
  margin: auto;
  width: 100%;
  height: 30%;
}

.text1{
  background: white;
  border-radius: 10px 10px 10px 10px;
  color: black;
  width: 61%;
  height: 100%;
  overflow-y: scroll; overflow-x:hidden;
  float: left;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  border:2px solid black;
  white-space: pre-wrap;
}

.text2{
  background: white;
  border-radius: 10px 10px 10px 10px;
  color: black;
  width: 33%;
  height: 100%;
  overflow-y: scroll; overflow-x:hidden;
  float: right;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  border:2px solid black;
  white-space: pre-wrap;
}
.text3{
  background: white;
  border-radius: 10px 10px 10px 10px;
  color: black;
  width: 61%;
  height: 100%;
  overflow-y: scroll; overflow-x:hidden;
  float: left;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  border:2px solid black;
  white-space: pre-wrap;
}
.text4{
  background: white;
  border-radius: 10px 10px 10px 10px;
  color: black;
  width: 33%;
  height: 100%;
  overflow-y: scroll; overflow-x:hidden;
  float: right;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  border:2px solid black;
  white-space: pre-wrap;
}

.list {
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
    background: white;
    color: black;
    width: 72%;
    height: 98%;
    text-align: left;
    overflow-y: scroll; overflow-x:hidden;
    float: right;
}

.list h2 {
    text-align: center;
}

.alignment{
  border: 1px solid black;
  color: black;
  font-size: 100%;
  border-radius: 10px 10px 10px 10px;
  padding-left: 1%;
  padding-right: 1%;
}

.annotation{
  border: 1px solid green;
  color: black;
  font-size: 100%;
  border-radius: 3px 3px 3px 3px;
  padding-left: 1%;
  padding-right: 1%;
}

.terminal1{
  background: black;
  border-radius: 10px 10px 10px 10px;
  color: green;
  width: 61%;
  height: 100%;
  overflow-y: scroll; overflow-x:hidden;
  float: left;
  text-align: left;
  padding-left: 1%;
  padding-right: 1%;
  border:2px solid black;
  white-space: pre-wrap;
}

#panel, #settingspanel, #annotations1panel, #annotations2panel, #dictpanel, #flowerpanel, #hammerpanel, #dharmapanel, .flip {
  overflow-y: scroll; overflow-x:hidden;
}

#panel {
  display: none;
}

#settingspanel {
  border:2px solid black;
  width: 30%;
  height: 100%;
  float: left;
  text-align: left;
}
#annotations1panel {
  border:2px solid black;
  width: 20%;
  height: 100%;
  float: left;
  text-align: left;
}
#annotations2panel {
  border:2px solid black;
  width: 20%;
  height: 100%;
  float: right;
  text-align: left;
}

#dictpanel {
  border:2px solid black;
  width: 30%;
  height: 100%;
  float: left;
  text-align: left;
}

.detail .text {
    text-align: center;
}

.detail .submit {
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

.lefttitle{
  padding-left: 7%;
  margin: auto;
  float: left;
}
.righttitle{
  padding-right: 7%;
  margin: auto;
  float: right;
}
.gutter{
  margin: 1px;
  border:0px solid clear;
  float: left;
}

.settingsbox{
  border: 0px solid grey;
  width: 11%;
  height: 100%;
  padding-left: 1%;
  text-align: left;
  float: left;
}

.dictbox{
  border: 0px solid grey;
  width: 11%;
  height: 60%;
  padding-left: 1%;
  text-align: left;
  float: left;
}

.leftpbox{
  border: 0px solid grey;
  width: 49%;
  height: 85%;
  padding-left: 1%;
  float: left;
}

.rightpbox{
  border: 0px solid grey;
  width: 32%;
  height: 85%;
  padding-left: 1%;
  float: right;
}

.right{
    float:right;
}

.left{
    float:left;
}

.buttonbox {
    border: 0px solid grey;
    width: 27%;
    height: 100%;
    text-align: right;
    float: left;
}

.tabbox {
    border: 1px solid black;
    border-radius: 10px 0px 0px 10px;
    background: white;
    color: black;
    width: 10%;
    height: 10%;
    text-align: left;
    float: right;
}

.annotationbox {
    border: 1px solid black;
    border-radius: 10px 0px 0px 10px;
    background: white;
    color: black;
    width: 100%;
    height: 98%;
    text-align: left;
    float: right;
}

.anns1 {
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
    background: white;
    color: black;
    width: 48%;
    height: 100%;
    text-align: left;
    overflow-y: scroll; overflow-x:hidden;
    float: left;
}

.anns2 {
    border: 1px solid black;
    border-radius: 10px 10px 10px 10px;
    background: white;
    color: black;
    width: 48%;
    height: 100%;
    text-align: left;
    overflow-y: scroll; overflow-x:hidden;
    float: left;
}



.text1 mark{ background: yellow; color: black;}
.text2 mark{ background: yellow; color: black;}
.text1 mark.secondary{ background: lightgreen; color: black;}
.text2 mark.secondary{ background: lightgreen; color: black;}
.text1 mark.tertiary{ background: #db7093; color: black;}
.text2 mark.tertiary{ background: #db7093; color: black;}

.text1 mark.n0{ background: #FF0000; color: white;}
.text1 mark.n1{ background: #FF0000; color: white;}
.text1 mark.n2{ background: #FF3700; color: white;}
.text1 mark.n3{ background: #FF6E00; color: white;}
.text1 mark.n4{ background: #FFA600; color: white;}
.text1 mark.n5{ background: #FFDD00; color: white;}
.text1 mark.n6{ background: #E8FF00; color: white;}
.text1 mark.n7{ background: #B1FF00; color: white;}
.text1 mark.n8{ background: #79FF00; color: white;}
.text1 mark.n9{ background: #42FF00; color: white;}
.text1 mark.n10{ background: #0BFF00; color: white;}
.text1 mark.n11{ background: #00FF2C; color: white;}
.text1 mark.n12{ background: #00FF63; color: white;}
.text1 mark.n13{ background: #00FF9B; color: white;}
.text1 mark.n14{ background: #00FFD2; color: white;}
.text1 mark.n15{ background: #00F3FF; color: white;}
.text1 mark.n16{ background: #00BCFF; color: white;}
.text1 mark.n17{ background: #0085FF; color: white;}
.text1 mark.n18{ background: #004DFF; color: white;}
.text1 mark.n19{ background: #0016FF; color: white;}
.text1 mark.n20{ background: #2100FF; color: white;}
.text1 mark.n21{ background: #5800FF; color: white;}
.text1 mark.n22{ background: #9000FF; color: white;}
.text1 mark.n23{ background: #C700FF; color: white;}
.text1 mark.n24{ background: #FF00FF; color: white;}

.text2 mark.n0{ background: #FF0000; color: white;}
.text2 mark.n1{ background: #FF0000; color: white;}
.text2 mark.n2{ background: #FF3700; color: white;}
.text2 mark.n3{ background: #FF6E00; color: white;}
.text2 mark.n4{ background: #FFA600; color: white;}
.text2 mark.n5{ background: #FFDD00; color: white;}
.text2 mark.n6{ background: #E8FF00; color: white;}
.text2 mark.n7{ background: #B1FF00; color: white;}
.text2 mark.n8{ background: #79FF00; color: white;}
.text2 mark.n9{ background: #42FF00; color: white;}
.text2 mark.n10{ background: #0BFF00; color: white;}
.text2 mark.n11{ background: #00FF2C; color: white;}
.text2 mark.n12{ background: #00FF63; color: white;}
.text2 mark.n13{ background: #00FF9B; color: white;}
.text2 mark.n14{ background: #00FFD2; color: white;}
.text2 mark.n15{ background: #00F3FF; color: white;}
.text2 mark.n16{ background: #00BCFF; color: white;}
.text2 mark.n17{ background: #0085FF; color: white;}
.text2 mark.n18{ background: #004DFF; color: white;}
.text2 mark.n19{ background: #0016FF; color: white;}
.text2 mark.n20{ background: #2100FF; color: white;}
.text2 mark.n21{ background: #5800FF; color: white;}
.text2 mark.n22{ background: #9000FF; color: white;}
.text2 mark.n23{ background: #C700FF; color: white;}
.text2 mark.n24{ background: #FF00FF; color: white;}

.text1 mark.n25{ background: #000000; color: white;}
.text2 mark.n25{ background: #000000; color: white;}
.text1 mark.n26{ background: #db7093; color: black;}
.text2 mark.n26{ background: #db7093; color: black;}
.text1 mark.n27{ background: #db7093; color: black;}
.text2 mark.n27{ background: #db7093; color: black;}
.text1 mark.n28{ background: #db7093; color: black;}
.text2 mark.n28{ background: #db7093; color: black;}
.text1 mark.n29{ background: #db7093; color: black;}
.text2 mark.n29{ background: #db7093; color: black;}
.text1 mark.n30{ background: #db7093; color: black;}
.text2 mark.n30{ background: #db7093; color: black;}
.text1 mark.n31{ background: #db7093; color: black;}
.text2 mark.n31{ background: #db7093; color: black;}
.text1 mark.n32{ background: #db7093; color: black;}
.text2 mark.n32{ background: #db7093; color: black;}
.text1 mark.n33{ background: #db7093; color: black;}
.text2 mark.n33{ background: #db7093; color: black;}
.text1 mark.n34{ background: #db7093; color: black;}
.text2 mark.n34{ background: #db7093; color: black;}
.text1 mark.n35{ background: #db7093; color: black;}
.text2 mark.n35{ background: #db7093; color: black;}
.text1 mark.n36{ background: #db7093; color: black;}
.text2 mark.n36{ background: #db7093; color: black;}
.text1 mark.n37{ background: #db7093; color: black;}
.text2 mark.n37{ background: #db7093; color: black;}
.text1 mark.n38{ background: #db7093; color: black;}
.text2 mark.n38{ background: #db7093; color: black;}
.text1 mark.n39{ background: #db7093; color: black;}

.text1::selection{background: yellow; color: black;}
.text2::selection{background: yellow; color: black;}

.list:nth-child(1) {
        background: red;
 }
 .list:nth-child(2) {
        background: yellow;
 }