@font-face { font-family: LiberationSerif; src: local('Liberation Serif, Regular') ,url('LiberationSerif-Regular.ttf'); }
   @font-face {font-family: Bookerly; src: local('Bookerly') ,url('Bookerly.ttf'); }
   @font-face {font-family: PT_Serif; src: local('PT Serif'), url('PTSerif-Regular.ttf'); }
   @font-face {font-family: IBM_Plex_Sans; src: local('IBM Plex Sans'), url('IBMPlexSans-Regular.ttf'); }
   @font-face {font-family: Calibri; src: local('Calibri'), url('calibri.ttf'); }

p1 {
  font-family: Bookerly; color: #cbd9f4;
  max-width: 100%;
  align-self: stretch;

}

a {
  text-decoration: none;
  color: #cbd9f4a6;
}

#main_box {
  display: flex;
  justify-content: flex-start;
  flex-flow: column nowrap;
  margin-left: 7.3%;
  margin-right: 7.3%;
  margin-bottom: 254px;
  border: 1px solid black;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

#main_text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  background-color: #172136;
  padding: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  
}
#textbody {
font-size: 23px;
}

#whole_text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
  max-width: 100%;

}

#deletion {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: flex-start;
}

.chunk {
  white-space: nowrap;
}
#new_text{
  margin-left: 7.3%;
  margin-right: 7.3%;
  background-color: #172136;
  padding: 10px;
  border-radius: 5px;
}
#tt_button {
 
  background-color: #071022;
  border-radius: 2px;
  padding: 6px;
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 20px;
  max-width: 97%;
}

#select_button {

  background-color: #071022;
  border-style: solid;
  border-radius: 2px;
  padding: 6px;
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 20px;
  max-width: 97%;

}

#delete_button {
  background-color: #071022;
  border-radius: 2px;
  padding: 6px;
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 17px;
  max-width: 97%;
}

.link-buttons {
  padding: 5px;
  border-radius: 2px;
  background-color: #071022;
  color: #c71f1f;
  font-family: Calibri;
  top: 1px;
  position:relative;
  font-size: 13px;
  cursor: pointer;
  width: fit-content;

}

.link-buttons:hover, .deletion_button:hover {
  background-color: #040a16;
  color: red;
}

#lang_button {
  position: absolute;
  background-color: #071022;
 /* border-style: solid; */
  border-radius: 2px;
  padding: 6px; 
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 18px;

}

#textselect, #langselect {
  background-color: /* #172136; */ #071022;
 /* border-style: solid;
  border-radius: 2px; 
  padding: 3px;  */
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 18px;
  min-width: 100px;
  max-width: 100%;
} 

#hidden_select {

  visibility: hidden; position: fixed; font-family: Calibri; font-size: 18px;
}

#newtext {
  position: flex;
  width: 70%;
  height: 200px;
  border-style: solid;
  border-radius: 5px;
  background-color: #071022;
  color: #cbd9f4;
  text-indent: 0%;
  font-family: Bookerly;
  font-size: 18px;
}

#text_title {
  position: flex;
  width: 70%;
  height: 50px;
  border-style: solid;
  border-radius: 5px;
  background-color: #071022;
  color: #cbd9f4;
  text-indent: 0%;
  font-size: 24px;
  font-family: Bookerly;
}

.submit_btn {
  border-style: solid;
  padding: 5px;
  border-radius: 2px;
  background-color: #071022;
  color: #cbd9f4;
  font-family: Calibri;
  margin-top: 1%;
  margin-bottom: 1%;
  position:relative;
  font-size: 17px;
  left: 10px;
  cursor: pointer;
}


.submit_btn:hover {
 
  background-color: #040a16;
}

.deletion_button {

  border-style: none;
  padding: 4px;
  border-radius: 2px;
  background-color: #071022;
  color: #c71f1f;
  font-family: Calibri;
  margin-top: 1%;
  margin-bottom: 1%;
  position:relative;
  font-size: 13px;

  cursor: pointer;
}




#title {
  font-size: 26px;
  font-family: Bookerly;
  color: rgb(255 115 205);
  text-align: center;
  margin-left: 40px;
  margin-right: 40px;
  position: flex;
}

#loadingbutton {
  position: fixed;
  left: 0;
  bottom: 0;

  background-color: #071022;
  border-style: solid;
  border-radius: 2px;
  padding: 6px; 
  z-index: 1;
  color: #cbd9f4;
  font-family: Calibri;
  font-size: 47px;

}

#pageno_footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
#pagenos {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: fit-content;
  width: fit-content;
  min-height: 13px;
  /* min-width: 155px; */
  border-radius: 6px;
  background-color: #040a16;
  border: 1px solid black;
}

.pageno {
  cursor: pointer
}
.pageno:hover {
  color: rgb(0 255 186);
}
.current_pageno {
  color: rgb(0 255 186);
  border-bottom: 2px solid rgb(0 255 186);
}

.pageno_text {
  height: 40px;
  width: 70px;
  padding: 4px;
  outline: none;
  overflow: hidden;
  text-align: center;
  resize: none;
  border: 1px solid #040a16;
  box-sizing: border-box;
  color: #cbd9f4a6;
  font-family: Bookerly;
  font-size: 21px;
  background-color: #071022;
  user-select: none;
}
#pageno_box {
  width: 70px;
  height: 40px;
  text-align: center;
  padding: 4px;
  outline: none;
  overflow: hidden;
  resize: none;
  border: 1px solid #040a16;
  box-sizing: border-box;

  color: #cbd9f4;
  font-family: Bookerly;
  font-size: 21px;
  background-color:#071022;
}
#pageno_box:focus {
  border: 1px solid black;
  background-color: black;
}
#pageno_leftarrow {
  border-right: 1px solid black;
  width: 35px;

  border-top-left-radius: 5px; /* 1px less than the parent box because of the border */
  border-bottom-left-radius: 5px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-weight: 900;
}
#pageno_rightarrow {
  border-left: 1px solid black;
  width: 35px;

  border-top-right-radius: 5px; /* 1px less than the parent box because of the border */
  border-bottom-right-radius: 5px;

  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-weight: 900;
}
.nav_arrow {
  cursor: default;
  color: grey;
  font-family: Liberation_Serif;
  user-select: none;
}
.nav_arrow:hover {
  background-color:#172136;
  color: white;
}

.nav_arrow_deactiv {
  cursor: default;
  color: grey;
  font-family: Liberation_Serif;
}
 /*-------------------------tooltip_prevs.css----------------------------*/
.tooltip {
position: relative;
display: inline-block;
/*color: rgb(252, 119, 119); */
color: #cbd9f4;
cursor: pointer;
border-bottom: 2px solid rgb(23, 33, 54, 0);
}

.tooltip:hover {
  color: rgb(255 115 205);
}

.multiword {
  border-bottom: 2px dotted rgb(0 255 186 / 50%);
}


.lemma_set, .lemma_set_unexplicit {
  color: rgb(0 255 186);

  position: relative;
  display: inline-block;
  cursor: pointer;
}
.lemma_set:hover, .lemma_set_unexplicit:hover {
  color: rgb(0 255 34);
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip_selected {
  position: relative;
  display: inline-block;
  color: rgb(255 115 205);
  cursor: pointer;

  border-bottom: 2px solid rgb(23, 33, 54, 0);
}
.mw_selectable:hover {
  border-bottom: 2px solid rgb(0 255 186);
}
.mw_current_select {
  border-bottom: 2px solid rgb(0 255 186);
}



#editbtn {

  color: rgb(0, 255, 34);
  border: 1px solid rgb(0, 255, 34);
}

#delbtn {
  color: red;
  border: 1px solid red;
}


.tooltip_opt {

  width: 60px;
  border-style: solid;
  padding: 2px;
  border-radius: 2px;
  background-color: #071022;
  color: #cbd9f4;
  font-family: Calibri;
  position:relative;
  font-size: 17px;
  cursor: pointer;
  background-color: #172136;
  
}


.tooltip:hover .lemma_tt, .tooltip:hover .mw_tt {
  visibility: visible;
} 

.tooltip_opt:hover {
  background-color: #040a16;
} 
  
  
.tooltip .lemma_tt, .tooltip_selected .lemma_tt, .tooltip .mw_tt, .tooltip_selected .mw_tt {
    visibility: hidden;
    /* width: 170px; */
    min-width: 170px;
    max-width: 250px;
    height: fit-content;
    background-color: #071022;
    color: #cbd9f4;
    text-align: center;
    border-radius: 6px;
    border: solid 1px black;

    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -85px;
  
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
    flex-grow: 0;
    cursor: default;
    word-break: break-word;
  }

  #tt_top {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
  }

.lemma_tag_tt {
  height:fit-content;
  width: fit-content;
  /* min-height: 20px; */
  

  outline: none;
  overflow: hidden;

  box-sizing: border-box;

  font-size: 15px;
  font-family: Bookerly;
  color: #cbd9f4;

  border-bottom-right-radius: 6px;
  border-top-left-radius: 5px;
  padding: 5px;
  background-color: #040a16;
  border: 1px solid black;
  border-left: none;
  border-top: none;

  resize: none;
}

#tt_mid {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: stretch;
    padding: 5px;
    flex-grow: 1;
}

#tt_meaning {
  background-color: #040a16;

  padding: 4px;
  flex: 1;
  color: #cbd9f4;
  border-radius: 4px;
  border: 1px solid black;;

  font-family: 'IBM_PLEX_SANS';
  font-size: 15px;
  text-align: center;
  white-space: normal;
  
  min-height: 10px;
  max-height: 200px;
  overflow-y: auto;
  
  box-sizing: border-box;

  resize: none; /* these two are for if I make it into a <textarea> one day */
  outline: none;
}
  
  
#tt_bottom {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: flex-start;
}

#pos_tag_box_tt {
  height:fit-content;
  width: fit-content;
  cursor: default;;

  font-size: 9px;
  font-family: IBM_Plex_Sans;
  color: black;

  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: center;
  align-items: center;
  text-align: center;

  margin-left: 10px;



  /* border-bottom: none;
  border-right: none;
  border-left: none; */
}



.pos_tag_tt {

  padding-left: 4px;
  padding-right: 4px;
  user-select: none;
  width: 9px;
  height: 15px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}



#pos_tag_verb_tt {
  background-color: #4dac0d;
}

#pos_tag_adj_tt {
  background-color: #fc7f03;
}

#pos_tag_noun_tt {
  background-color: #9cac0d;
}

#pos_tag_adverb_tt {
  background-color: #e32f1a;
}

#pos_tag_prep_tt {
  background-color: #0d9cac;
}

#pos_tag_conj_tt {
  background-color: #0dac62;
}

#pos_tag_part_tt {
  background-color: #ac0d9c;
}
#pos_tag_ques_tt {
  background-color: hsl(345, 100%, 70%);
}
#pos_tag_multiword {
  background-color: #cbd9f4;
}


.appendages {

  position: absolute;
  font-family: Calibri;
  font-size: 16px;
  right: 100%;

  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  user-select: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  text-align: center;
}

#append1 {
  top: 2%;
}
#append2 {
  top: 20px; 
}
.append_inact {
  background-color: /* #8c64ed59;*/ #403876;
  color: #cbd9f482;
  z-index: 0;
}
.append_act {
  background-color: /*#8c64edad;*/ #664fb2;
  color: #cbd9f4;
  z-index: 1;
}
.append_inact:hover {
  background-color: /*#8c64edad;*/ #664fb2;
  color: #cbd9f4;
}

#toplinks-flexbox {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  font-family: Calibri;
  background-color: #172136;
  color: #cbd9f4a6;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 1px solid black;
}
#texts_link {
  border-top-left-radius: 5px;
}
.toplink-buttons {
  font-size: 21px;
  width: fit-content;
  max-width: 97%;
  padding: 6px;
  user-select: none;
  min-width: 100px;
  text-align: center;
  border-right: 1px solid black;
  cursor: pointer;
  background-color: #172136
}
.toplink-buttons.current {
  background-color: #040a16;
  color: #cbd9f4;
}
.toplink-buttons:hover {
  background-color: #071022;
  color: #cbd9f4d3;
}
.toplink-buttons.current:hover {
  background-color: #040a16;
  color: #cbd9f4;
}

#edit-letter {
  animation: cursor-flash 0.9s steps(1, jump-start) infinite;
  /*border-bottom: 2px solid red; */
  border-right: 1px solid #172136;
}
@keyframes cursor-flash {
  /*50% { color: black; }
  100% { color: inherit; } */
  50% { border-right: 1px solid red; }
  100% { border-right: inherit; }
}
.edit-displayWord {
  border-left: 1px solid #172136;
  border-right: 1px solid #172136;
  border-bottom: 2px dotted red;
  /*animation: border-flash 0.9s steps(1, jump-start) infinite;*/
}
@keyframes border-left-flash {
  50% { 
    border-left: 1px solid red;
  }
  100% { 
    border-left: 1px solid #172136;
  }
}