html,
* {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(49, 50, 51);
  color: white !important;
  padding: 60px 0 250px;
  min-height: auto !important;
  position: initial !important;
}

.spanUserN {
  font-size: 11px;
  padding: 0;
  margin: -2px 0;
  color: lightgrey;
}

.navApp {
  align-items: center;
  padding: 0;
  height: 50px;
  flex-wrap: nowrap !important;
}

.iconOpen {
  padding: 0 10px;
}

.moreInfo {
  display: block;
}

.wordDiv {
  flex-wrap: nowrap !important;
  position: relative;
  padding-top: 22px !important;
}

span.wordSpan:not(#textStory .wordSpan, a .wordSpan) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 20px;
}

span.noAudio {
  font-size: 13px;
  background: white;
  /* padding: 0 4px; */
  border-radius: 4px;
}

form#searchForm {
  padding: 0;
}

.linkNameApp {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 0 5px;
  margin: 0;
  justify-content: center;
  line-height: normal;
}

.linkNameApp img {
  max-width: 100%;
  height: 34px;
}

.boxForm {
  height: 600px;

  overflow: hidden;
}

.boxForm>.divForm {
  position: absolute;
  height: 350px;
  transition: all 1s, opacity 2s;
  width: 100%;

}

div#action {
  font-size: 17px;
  font-weight: bolder;
  color: aqua;
  display: inline-block;
}

.haveAcount {
  background: transparent;
  font-size: 11px;
}

h4.addWord.btn.btn-outline-light.btn-success {
  margin: 10px auto;
  display: block;
  width: max-content;
}

.hidenForm {
  left: 100%;
  opacity: 0;
  transition: 0;

}

.showForm {
  left: 0%;
  /* opacity: 1; */
  right: 0;
  transition: all 1s, opacity 3s;
}

.showtoHid {
  right: 100%;
  opacity: 1;
  transition: 0s;
}

.boxformAddWord {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  position: relative;
  z-index: 1;
  display: none;
  background: rgb(24, 22, 91);
  background: linear-gradient(61deg, rgba(24, 22, 91, 1) 0%, rgba(39, 99, 153, 1) 35%, rgba(171, 174, 181, 1) 100%);
}

.boxDet {
  display: none;
}

.switch {
  position: relative;
  display: inline-block;

}

span.means,
span.seconMea {
  white-space: initial;
  user-select: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 75px;
  height: 32px;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 31px;
  width: 31px;
  left: 0px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(45px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
  -webkit-border-radius: 34px;
  -moz-border-radius: 34px;
  -o-border-radius: 34px;
  -ms-border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
}

.boxsententextarea {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
}

.boxsententextarea form {
  height: 100%;
}

.boxsententextarea form>span {
  background: black;
  width: max-content;
  display: block;
  padding: 5px 10px;
  margin: 0 !important;
}

.sententextarea {
  width: 100%;
  height: 100%;

}

ul.paginateUl {
  padding: 5px 0;
  list-style: none;
  gap: 10px 0;
  width: max-content;
  margin: 0;
  user-select: none;
}

ul.paginateUl li {
  border: 1px solid;
  padding: 2px;
  width: 50px;
  display: inline-block;
  text-align: center;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  -o-border-radius: 9px;
  -ms-border-radius: 9px;
  font-size: 14px;
  padding: 5px;
  cursor: pointer;
}

ul.paginateUl li:not(.activePage):hover {
  background: lightblue;
}

.activePage {
  cursor: unset !important;
  background: #664cd8;
  /* color: black; */
  font-weight: bolder;
  border-color: lightblue;
}

.paginateBox {
  border: 1px solid;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  overflow-x: scroll;
  padding: 0 10px;
  background: cadetblue;
  position: sticky;
  top: 57px;
  margin-bottom: 15px;
  z-index: 9;
  scroll-behavior: auto !important;
}

.smalBut {
  min-width: 47px;
  font-size: 17px;
}

div#boxnums {
  /* background: cadetblue; */
  position: sticky;
  top: 130px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  position: fixed;
  /* z-index: 999; */
  left: -125px;
  width: 250px;
  height: 250px;
}

.boxnums {
  position: relative;
  width: 0px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  -o-border-radius: 150px;
  -ms-border-radius: 150px;
  height: 0px;
  background: rgba(0, 0, 0, 0.801);
  transform: translate(-100%, -50%);
  top: 50%;
  left: 50%;
  transition: .4s;
  overflow: hidden;
}

input#fname {
  padding: 2px 5px;
  border-radius: 0 6px 6px 0;
  -webkit-border-radius: 0 6px 6px 0;
  -moz-border-radius: 0 6px 6px 0;
  -o-border-radius: 0 6px 6px 0;
  -ms-border-radius: 0 6px 6px 0;
  background: #6298b3;
  color: white;
  outline: none;
  border: 1px solid;
}

li.mt-2.btn.btn-outline-secondary.text-light.d-flex.flex-wrap.justify-content-between.text-start:nth-child(even) {
  background: #3e5959;
}

li.mt-2.btn.btn-outline-secondary.text-light.d-flex.flex-wrap.justify-content-between.text-start:nth-child(odd) {
  background: #1e5959;
}

label#labelSer i {
  border: 1px solid;
  padding: 1px 10px;
  border-radius: 6px 0 0 6px;
  -webkit-border-radius: 6px 0 0 6px;
  -moz-border-radius: 6px 0 0 6px;
  -o-border-radius: 6px 0 0 6px;
  -ms-border-radius: 6px 0 0 6px;
  background: #6bbe6b;

}

label#labelSer {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0;
}

#boxswitsh {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin: 12px 0;
  align-items: center;
  direction: rtl;
}

div#boxswitsh p {
  margin: 0;
}

ul#boxUlWordsF {
  padding: 0 0 116px !important;
  position: relative;

}

ul#boxUlWordsF>li {
  margin-bottom: 23px;
}

.sound {
  background: blueviolet;
  border: none;
  height: 30px;
  font-size: 22px;
  width: 30px;
  color: cornsilk;
  border-radius: 50px;
  text-align: center;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -o-border-radius: 50px;
  padding: 0;
  -ms-border-radius: 50px;
}

.sound:focus {
  outline: none;
}

.boxnums.d-flex.justify-content-center.align-items-center {
  background: cadetblue;
}

.typeW.p-2 span {
  border: 1px solid;
  padding: 5px 13px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  padding: 3px !important;
  display: inline-block;
  min-width: 54px;
  width: max-content;
  text-align: center;
  background: lightblue;
  color: black;
}

.typeW.p-2 span:hover {
  background: lightblue;
}

.typeW.p-2 span.activeType {
  background: #664cd8;
  color: white;
}

.radioLabel {
  border: 1px solid;
  padding: 2px 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
}

.radioLabel:has(> input:checked) {
  background-color: black;
}

.pareType {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.typeW {
  /* position: absolute; 
  */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  width: 100%;
}

.pareType:nth-child(1) {

  transform: translate(-50%, -50%) rotate(-240deg);
}

.pareType:nth-child(1)>div>span {

  transform: rotate(180deg);
}

.pareType:nth-child(2) {

  transform: translate(-50%, -50%) rotate(-210deg);
}

.pareType:nth-child(2)>div>span {

  transform: rotate(180deg);
}

.pareType:nth-child(3) {

  transform: translate(-50%, -50%) rotate(-180deg);
}

.pareType:nth-child(3)>div>span {

  transform: rotate(180deg);
}

.pareType:nth-child(4) {

  transform: translate(-50%, -50%) rotate(-150deg);
}

.pareType:nth-child(4)>div>span {

  transform: rotate(180deg);
}

.pareType:nth-child(5) {

  transform: translate(-50%, -50%) rotate(-120deg);
}

.pareType:nth-child(5)>div>span {

  transform: rotate(180deg);
}

.activeTypeOne {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: .5;
  font-size: 12px;
  transform: translate(0%, -50%);
  z-index: 9;
  padding: 2px 5px;
  background: lightblue;
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
  -o-border-radius: 0 10px 10px 0;
  -ms-border-radius: 0 10px 10px 0;
  color: black;
}

.openType {
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%);

}

#boxnums:has(>.openType) {
  z-index: 99;
}

textarea.w-100.sentenSpan {
  resize: none;
  border-radius: 10px;
  padding: 0px 10px;
  height: 70px;
  user-select: none;
}

div#BoxtranW {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 999;
  transform: translate(-50%, -50%);
  background: white;
  color: black;
  width: 90%;
  min-height: 200px;
  max-height: 500px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 9px 7px 4px 10px #333333b8;
  font-size: 20px;
  overflow: scroll;
  padding: 10px 10px 50px;
}

.parebutTrans {
  position: absolute;
  top: -35px;
  left: 0;
  gap: 5px;
  display: none;
  overflow: hidden;
}

.parebutTrans .butTrans,
.parebutTrans .butCancTrans {
  width: 60px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 10px;
  background: rgb(0, 153, 255);
}

.butCancTrans {
  background: rgb(255, 0, 0) !important;
}

div.pTextarea:has(>.sentenSpan.selected)>.parebutTrans {
  display: flex;

}

.closrPare {
  position: absolute;
  top: -5px;
  right: 1px;
  font-size: 30px;
  color: red;
}

.enW {
  margin: 20px 0 0;
}


.w-100.sentenSpan span {
  display: inline-block;
  text-align: left !important;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
  display: none;
}

iframe#\:1\.container {
  display: none;
}

.sentenSpan {
  padding-right: 34px;
  margin: 5px 11px 15px;
  text-align: left;
  flex-wrap: wrap;
  display: flex;
  gap: 4px;
}

.skiptranslate.goog-te-gadget {
  color: transparent;
}

.skiptranslate.goog-te-gadget>span {
  display: none;
}

.goog-te-gadget .goog-te-combo {
  margin: 0 !important;
  height: 100%;
}

div#google_translate_element {
  flex-wrap: nowrap;
}

.skiptranslate.goog-te-gadget>* {
  /* position: absolute; */
  height: 100%;
  top: 0;
  padding: 0;
  margin: 0;
}

div#boxOption {
  position: fixed;
  bottom: 0;
  right: 0px;
  width: 100%;
  display: flex;
  padding: 5px 10px;
  align-items: center;
  justify-content: space-between;
  background: cadetblue;
  gap: 5px;
}

.optionsW {
  border-radius: 10px;
  border: 1px solid;
  position: relative;
  width: 100%;
  height: 42px;
  padding: 1px;
  gap: 10px;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light.position-fixed.fixed-top.w-100 {
  background-color: cadetblue !important;
}

a.navbar-brand {
  color: white !important;
}

a.nav-link {
  color: white !important;
}

div:has(>a[title="Free Web Hosting with PHP5 or PHP7"]) {
  display: none;
}

.listOption {
  position: absolute;
  background: cadetblue;
  padding: 10px;
  list-style: none;
  top: 42px;
  width: 250px;
  right: 14px;
  display: none;
  border: 2px solid;
  border-radius: 0 0 5px 5px;
  border-top: none;
}

.menuIcon {
  border-color: white;
  font-size: 22px;
  background: transparent;
  color: white;
  border-radius: 5px;
  border: navajowhite;
}

.boxinfo {
  position: absolute;
  top: 0;
  right: 22px;
  top: 50%;
  font-size: 23px;
  transform: translate(0%, -50%);
  color: #95ff2d;
  z-index: 9;
}

.info {
  display: block;
  /* bottom: 22px; */
  top: calc(100vh - 40px);
  font-size: 14px;
  left: calc(100% - 40px);
  right: 38px;
  border-radius: 9px 9px 0 9px;
  padding: 0;
  transition: .4s;
  opacity: 0;
  overflow: hidden;
}

.info.openInfo {
  opacity: 1;
  left: 5px;
  padding: 5px 10px;
  top: calc(100vh - 150px);
}

.butWorSen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  padding: 0 14px;
  border-radius: 8px;
  height: 100%;
  gap: 5px;
}

.butWorSen>input {
  width: 17px;
  height: 17px;
}

#storyText {
  transition: 1s;
  height: 100px;
}

/* story  */
.pageContent {
  background: whitesmoke !important;
  height: max-content;
  color: black;
  padding-bottom: 50px;
}

.closrreadPage {
  font-size: 24px;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50px;
  position: sticky;
  top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.closrreadPage>a.backLink i {
  background: black;
  border-radius: 50px;
  height: 26px;
  width: 26px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closrreadPage>span {
  gap: 10px;
}

.titStoryH {
  font-weight: bolder;
  color: floralwhite;
  background: cadetblue;
  padding: 5px;
  border-radius: 9px;
}

pre#textStory {
  font-size: 18px;
  line-height: 32px;
  font-weight: bold;
  white-space: pre-line;
}

/* end story  */


/* google translate style */
.VIpgJd-yAWNEb-L7lbkb {
  display: none !important;
}

.VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* End google translate style */

a[title^="Free"] {
  display: none;
}

.boxAllWords {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}


.boxAllWords li.mt-2.btn.btn-outline-secondary.text-light.d-flex.flex-wrap.justify-content-between.text-start:nth-child(2n+1) {
  background: #1e5959;
}

.boxAllWords li.mt-2.btn.btn-outline-secondary.text-light.d-flex.flex-wrap.justify-content-between.text-start:nth-child(2n+2) {
  background: #3e5959;
}

.activSound {
  border: 2px solid rgb(109, 0, 167) !important;
}


.butPlayAll {
  position: fixed;
  text-align: center;
  z-index: 999;
  left: 50%;
  top: 55px;
  transform: translate(-50%);
}

.butPlayAll button {
  width: 75px;
  padding: 10px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  height: 75px;
  background: blueviolet;
  color: white;
  font-size: 50px;
  line-height: 50px;
  border: navajowhite;
  box-shadow: 9px 9px 10px 1px black;
}

.butPlayAll button i {
  text-shadow: 4px 3px 3px #333;
}

.butNexPrev {
  position: sticky;
  left: 0;
  display: flex;
  gap: 3px;
  justify-content: stretch;
  padding-bottom: 5px;
}

/* CSS */
.butNexPrev button {
  width: 50%;
  padding: 5px 26px;
  color: #fff;
  border: 0;
  font-weight: bold;
  font-size: 13px;
  transition: all 150ms ease-in-out;
  border-radius: 7px;
  box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;
  background: linear-gradient(180deg, #047b81 0%, #1a4248 100%);
}

.butNexPrev button:not(:disabled):hover {
  filter: brightness(1.1);
}

.butNexPrev button:not(:disabled):active {
  transform: scale(.95);
}

#haveW {
  display: none;
}

button.addNewW {
  background: #1e82a3;
  color: white;
  border-radius: 10px;
}


.form-control[name="mean"]::placeholder {
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}

.wordDiv>.addList {
  position: absolute;
  top: -10px;
  left: 0px;
  background: purple;
  width: 0px;
  height: 0px;
  line-height: 25px;
  font-size: 25px;
  border-radius: 50%;
  text-align: center;
  /* margin-left: 10px; */
}

/* Test */

.quesSec.container {
  text-align: center;
  position: absolute;
  top: 50% !important;
  left: 50%;
  transform: translate(-50%, -50%);
  background: cadetblue;
  padding: 30px;
  border-radius: 10px;
}

.boxWordsQues {
  text-align: center;
  position: relative;
}

.boxWordsQues>div {
  margin: 5px;
  border-bottom: 1px solid;
  padding: 5px;
  position: relative;
}

.theWord {
  position: relative;
}

.boxAnswer {
  background: cadetblue;
  padding: 20px;
  position: relative;
}

.boxAnswer>input {
  padding: 5px;
  border-radius: 7px;
}

.butBoxQues {
  padding: 20px 0 0;
}

.butBoxQues>button {
  padding: 5px 40px;
  border-radius: 30px;
  background: #6bbe6b;
  color: white;
  border-color: white;
}

.ladTran {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #6bbe6b;
  z-index: 10;
}

#hintBox {
  display: none;
}

.divBoxHints {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
}

.answerHint {
  background: white;
  color: black;
  padding: 10px;
  border-radius: 9px;
}

.answerHint:focus {
  border: none !important;
  outline: none;
}

.progressTest {
  background: white;
  height: 5px;
  position: absolute;
  width: 100%;
  top: 7px;
  left: 0px;
}

.backProgres {
  height: 100%;
  background: aqua;
  width: 0%;
  transition: .3s;
  position: relative;
}

.progressTest::after {

  content: "2";
  position: absolute;
  background-color: black;
  color: white;
  bottom: 100%;
  left: 50%;
  padding: 5px 10px;
  transform: translateX(-50%);

}

.activeIcon::before {
  background: lime;
  border-radius: 50%;
}

.boxLinks {
  display: none;
}

.newWordsThere {
  background: #757575;
  padding: 2px 5px;
  font-size: 11px;
  width: max-content;
  margin: 28px auto 0;
}

.newWordsThere a {
  color: white;
  border: 1px solid;
  padding: 4px;
  display: block;
  width: max-content;
  margin: 10px auto 0;
  border-radius: 2px;
}

.cardBoxUsers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* gap: 10px; */
}

.aUser {
  min-width: 250px;
  padding: 5px;
}

.nameUser,
.passUser {
  display: flex;
  justify-content: space-between;
}

.boxuser {
  border: 1px solid;
  padding: 5px 15px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.confirmBox {
  display: none;
  position: fixed;
  background: cadetblue;
  padding: 30px;
  z-index: 999;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.answerConfirm {
  margin: 25px 0 0;
}

.tranHint {
  display: none;
}

.selectLang {
  position: fixed;
  width: 100%;
  height: 100vh;
  padding: 50px 0 0;
  top: 0;
  left: 50%;
  transform: translate(-50%, -0%);
  z-index: 9999;
  text-align: center;
  background: #120023d9;
  justify-content: center;
  display: none;
}

.boxSelLang {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.selectLang h2 {
  width: max-content;
  padding: 5px 20px;
  border-radius: 10px;
  margin: auto;
}

.selectLang p {
  /* width: max-content; */
  padding: 5px 20px;
  border-radius: 10px;
  margin: auto;
  background-color: #1e5959;
}

p.reloadLang {
  margin: 10px 20px;
  font-size: 11px;
}

.selectLang>a {
  margin: auto;
  display: block;
  width: max-content;
}

#relunch {
  color: white;
  padding: 7px 20px;
  background-color: #050033;
  display: block;
  border-radius: 10px;
  margin: 10px auto;
  width: max-content;
  box-shadow: 1px 1px 3px white;
}

.butsList {
  position: absolute !important;
  left: 0;
  top: 0;
  border: none !important;
  font-size: 18px;
  z-index: 999;
}

.butsList>div {
  margin: 0 11px 0 0;
}

.tranWordSpan {
  display: none;
}

#rate-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}