@font-face {
  font-family: uthman;
  src: url(../fonts/UthmanTN1Ver10.otf);
}
@font-face {
  font-family: uthmanHafs;
  src: url(../fonts/UthmanicHafs_V20.ttf);
}
@font-face {
  font-family: uthman;
  src: url(../fonts/UthmanTN1BVer10.otf);
  font-weight: bold;
}
body {
  font-family: uthman;
}
.hafs{
  font-family: uthmanHafs;

}
p {
  line-height: normal;
}
.language {
  margin-top: -45px;
}

.row {
  margin: 0;
}
.row.title {
  font-weight: bold;
}
.table, .preview{
  font-family: uthmanHafs !important;

}
.table_2 .row:not(.title) .col:nth-child(1) p {
  color: red;
}

.col {
  border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  cursor: pointer;
  padding-right: 0;
  padding-left: 0;
}
.col p {
  color: #000;
}
.col-header {
  background-color: #ffffff;
}
.col-table {
  /* background-color: #f0e9ff;   */
}
.col-table:hover {
  background-color: #d3d3d3;
}
.col-table .col {
  border: 2px solid rgba(112.520718, 44.062154, 249.437846, 0.25);

  margin-top: 0.75rem;
  padding-right: calc(1.5rem * 0.5);
}
.col-del {
  border-top: 0;
}
.col-delA {
  border-top: 0;
  border-bottom: 0;
}
.col-merged {
  border-bottom: 0;
}
.header .col {
  border: 0;
}
.header p,li {
  font-size: 18px;
  color: black;
}
.col {
  font-size: 30px;
}
.col span {
  color: #0070c0;
}
.preview {
  width: 21%;
  border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
  position: fixed;
  top: 125px;
  left: 45px;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 25px;
}
.word {
  font-size: 80px;
}
.word span {
  font-size: 50px;
}
.content {
  padding-left: 0;
  height: 630px;
  margin-right: 300px;
}
.content-scroll {
  padding-bottom: 25px;
}

@media screen and (max-width: 1280px )  {
  .preview {
    display: none;
  }

  .content {
    margin-right: 10px;
    width: 91.66666667%;
  }
  .language {
    margin: auto;
    z-index: 3;
  }

}
@media screen and (max-width: 991px )  {
  .language {
    z-index:3 !important;
    margin: auto;
  }
 


}
