@font-face {
font-family: 'vazirB';
src:url('./fonts/Vazir-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'vazir';
src:url('./fonts/Vazir-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


body, html {
    /* body size config  */
    min-height: 100vh;
    max-height: 100vh;
    min-width: 100vw;
    max-width: 100vw;
    overflow: hidden;
    border: none;
}

body {
  /* body background image config , covering the page without any reapted img . */
  background-image: url('./imgs/SpeechWav.jpg');
  background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   /* set align items , children of body tag to center  */
   align-items: center;
   align-self: center;
   justify-content: center;
   /* config the font */
   font-family: 'Tahoma', sans-serif;
   /* if user's broswer size is smaller than fixed minimum height , then show scroll */
   overflow-y: scroll;
}
input[type="file"] {
  width:100vw;
  max-width:100%;  
  white-space: normal;
  word-wrap: break-word; 
  } 
h1 {
  /* config h1 color and add sum space from lef (margin ) */
  /* color: #ec9d39; */
  color :#00fdff;
  margin-left: 20px;
}


/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ec9d39;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}




.main-container{
  /* container that contains the main box class.
set flex display so use the functionality of it .
flex-direction , wrap  is not necessary here because we have just one div as child
set width and height to 100vh,100vw
no functionality this class has just to seprate box parent from body ,its wrote it like this.
   */
    border: none;
    margin: 0px;
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-wrap: no-wrap;
    padding: 40px;
    flex-direction: column;
    min-height:100%;



}
.main_box{
  /* this is the window in middle of the page style config
set text color to white
set height fitting to content and set the position in middle of parent
   */
  color: white;
  height: fit-content;

  align-self: center;
/* set colors config and radius for box . */
  background: rgb(9 0 45 / 90%);
  box-shadow: 0 0 50px rgb(2 78 231 / 50%);
  border: solid #00fdff 2px;
  border-radius: 10px;

  /* the dive is flex container again and has it own children
  at first set the children align to center
  then set row direction for content
   */
  justify-items: center;
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;

/* padding and margin config +
setting width to 50% . this property makes it look in midde from both right and left side
setting min width so the content items style would not cross the lines (works at chrome correctly)
set z index to 0 (sendig it to back of items ).
*/

  padding: 5px;
  margin-top: 25vh;
  margin-right: 10vw;
  font-size: 18px;
  width: 50%;
  min-width: 400px;
  z-index: 0;
  min-height:fit-content;

}

.box{
/* the window contains to boxes , first request and second the saved_result
but to boxes in two columns can have lots of property in common . so there  have same
class for each of them.
in this class spaces from parent (margin) and from children  (padding)
and even border between this two has been configed.
set width of each boxes to 48 perc of parent container .
 */
  margin: 2px;
  padding: 2px;
  border: solid rgba(0,0,0,0.2) 2px;
  border-radius: 10px;
  height: 100%;
  width:   48%;
  opacity: 1;
  color: rgba(24, 78, 119);
  color: #00fdff;
  min-width: 200px;
}
.right-container{
  /* the right container class is prediction side style sheet part .
  becuase the direction of flex part here needs to be change so its specified here . */
  display: flex;
  flex-direction: column;
  width: 60%;
}
.left-container{
  /* the right container class is prediction side style sheet part .
  becuase the direction of flex part here needs to be change so its specified here . */
 position: relative;
}
#prediction-box{
  margin-left: 20px;
  bottom: 25%;
  margin-bottom: 0px;
  position: absolute;
  margin-left:20px;
  right: 0;
  left: 0
}

#result-btn{
  /* saved answer box of image config  */
  border-radius: 20px;
  border: dashed rgba(14, 207, 241, 0.5);
  margin-top:20px ;
  display: none;
}

.messages-container{
    max-height:100%;


}
.message-box{
  margin-top: 2px;
  min-height:20px;
  width:100%;
  height:100%;
  background:white;
  color:#ec9d39;
  background: rgba(256, 256, 256,0.9);
  font-size:12px;
  border-radius: 10px;
}
.message-box p{
    margin-top:0px;
    margin-bottom:0px;
    /*font-family:'dinar';*/
    font-size:12px;

}

#name_text{
  /* input text style sheet . */
    border-radius:12px;
    width: 75%;
    height: 30px;
    background-color: rgba(203, 231, 243, 1);
    font-size: 20px;
}

#help-btn{
  color:#00fdff;
}

.model_select_block{
  display: none;
}

.btn-v2{
  background: #0d003700;
  color:#00fdff;
  margin-right: 10px;
  width:100%;
  height: fit-content;
  font-size: 16px;
  float:right;
  text-align: center;
  border-radius: 10px;
  font-family:'vazir';
  border:1px solid;
}

.btn-v1 {
  background: #0d003700;
  color:white;
  margin-right: 10px;
  width:100%;
  height: 24px;
  font-size: 16px;
  float:right;
  text-align: center;
  border-radius: 10px;
  font-family:'vazir'
}
.btn-v1 option{
  background: #0d0037;
}


/* The alignment part */

.wav_alignment_result_box{
  /* this is the window in middle of the page style config
set text color to white
set height fitting to content and set the position in middle of parent
   */
  color: white;
  height: fit-content;
  align-self: center;
/* set colors config and radius for box . */
  background: rgba(152, 152, 147,0.3);
  box-shadow: 0 0 50px rgb(2 78 231 / 50%);
  border: solid #e93de9 2px;
  border-radius: 10px;

  /* the dive is flex container again and has it own children
  at first set the children align to center
  then set row direction for content
   */
  justify-items: center;
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;

/* padding and margin config +
setting width to 50% . this property makes it look in midde from both right and left side
setting min width so the content items style would not cross the lines (works at chrome correctly)
set z index to 0 (sendig it to back of items ).
*/

  font-size: 18px;
  width: 50%;
  min-width: 400px;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding:0;
  background:white;
  margin:0;
  max-height:30vh;

}


.Alignment-block{
    /*width:400px;*/
    height:220px;
    background: white;
    color:#ec9d39;
    padding:1em;
    max-height:100%;
    padding-top:10px;
    padding-right:12px;
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-between;
    align-items: flex-end;
}
.Alignment-block p{
  padding:0;
  margin:1em;
  margin-right: 12px;
  min-height:20px;
  padding-top:1px;
  margin:0;
}

.substitution{
background-color:#ffa50099
}
.deletion{
background-color:#ff00004d

}
.insertion{
background-color:#0080004d

}



/* Animation Of laoding */
#loading-elem {
  display: none;
  border: 2px solid #f3f3f302; 
  border-top: 2px solid #00fdff; /* Blue */
  /* border-bottom: 5px solid #00fdff; Blue */
  box-shadow: 0px 0px 5px 1px rgb(2 78 231 / 50%);
  filter: 
            drop-shadow(0 0 2px #00fdff)
            drop-shadow(0 0 5px rgb(2 78 231 / 50%))
            drop-shadow(0 0 10px #00fdff)
            drop-shadow(0 0 20px rgb(2 78 231 / 50%));
  /* border: solid #00fdff 2px; */
  border-radius:  50%;
  background-color: rgba(0, 0, 0, 0);
  width: 3rem;
  height: 3rem;
  margin-left: 40%;
  margin-top: 5rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}