:root {
  --widthOfListblock: 40vw;
  --heightOfListblock: clamp(1px,30vh,30vw);
  --radiusListblock: 5px;
  --speakerSize: clamp(2px, 4vh, 3vw);
  --sizeSwitcher: clamp(4px, 8vh, 6vw);
  --borderWidth1: clamp(1px,1vh,3px);
  --borderWidth2: clamp(1px, 0.5vw, 4px);
  --color1: #1A7F8A;
  --color2: #93D8F1;
  --color3: #1B9AC7;
  --color4: #007AA7;
  --color5: #ddd;
  --color6: #1AAE1E;
  --color7: #19C129;
  --color8: black;
  --color9: white;
  --colorOfLink: blue;
  /*--color1: #c77b0e;
  --color2: #945c0c;
  --color3: #d4aa6f;
  --color4: #653c02;*/
  scroll-behavior: smooth;
  touch-action: pan-x pan-y;
}
@media (prefers-color-scheme: dark) {
  :root {
  /*  --color8: #eee;
    --color9: #111;*/
  }
}
.centered {
  text-align: center !important;
  margin: 0 auto !important;
  display: block !important;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: clamp(5px, 5vh, 3.5vw);
  -webkit-appearance: none;
  appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  color: var(--color8);
}
body {
  background: var(--color9);
}
#wrapper {
  background: linear-gradient(45deg, var(--color2), var(--color9));
  height: auto;
  min-height: 100vh;
}
#wrapper > main {
  container-type: inline-size;
}
header {
  text-align: center;
  border-bottom: var(--borderWidth1) solid var(--color8);
  display: flex;
  flex-flow: row nowrap;
}
h1, header > h2 {
  flex: 1;
}
header > h2 {
  height: 3vmax;
}
a {
  color: var(--colorOfLink);
}
label {
  width: 100%;
  display: flex;
  margin-bottom: 0.2em;
  background: linear-gradient(80deg, var(--color9), var(--color5));
}
label > input, label > select {
  flex: 1;
  width: 40%;
  position: absolute;
  right: 0;
}
label > textarea {
  flex: 1;
}
nav {
  border-bottom: var(--borderWidth1) solid var(--color8);
  padding-bottom: clamp(1px, 2vh, 6px);
}
aside {
  container-type: inline-size;
}
#progressProcess {
  width: 100cqw;
  margin-bottom: 1em;
  height: 1vh;
}
#mainNav > ul {
  list-style: none;
  display: flex;
}
#mainNav > ul > li {
  float: left;
  margin-left: 1%;
}
a, p {
  font-size: inherit;
}
#openusermenu {
  width: 3vmax;
  height: 3vmax;
  background: linear-gradient(80deg, var(--color2), var(--color3));
  display: flex;
}
#openusermenu:hover {
  background: var(--color4);
}
#teachermenu, #usermenu {
  position: fixed;
  z-index: 9999;
  right: -60vw;
  top: 0;
  height: 100vh;
  width: 60vw;
  background: linear-gradient(80deg, var(--color1), var(--color2), var(--color9));
  transition: 1s all ease;
  overflow: overlay;
}
#teachermenu {
  z-index: 10000;
}
#closeteachermenu, #closeusermenu {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 3vmax;
  height: 3vmax;
  z-index: 2;
  background: linear-gradient(80deg, var(--color2), var(--color3));
}
#closeteachermenu:hover, #closeusermenu:hover {
  background: var(--color4);
}
.underlineh3 {
  border-bottom: var(--borderWidth1) solid var(--color8);
  text-align: center;
  margin: 3vh 0 1vh 0;
  font-size: 2.5vmax;
}
.listBlock {
  display: inline-block;
  width: var(--widthOfListblock);
  height: var(--heightOfListblock);
  border-radius: var(--radiusListblock);
  border: var(--borderWidth1) solid var(--color8);
  margin-left: calc((100vw - var(--widthOfListblock) * 2 ) / 3);
  margin-top: 0.3vh;
  background: linear-gradient(45deg, var(--color2), var(--color1));
  box-shadow: 2px 2px 10px black;
  padding: 0.1em;
}
.listBlock > h4 {
  border-bottom: 1px var(--color8) solid;
  text-align: left;
  padding: clamp(2px, 1.5%, 15px);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cursBlocks > .listBlock {
  background: linear-gradient(45deg, var(--color1), var(--color2));
}
#modeNav {
  position: sticky;
  top:0;
  left: 0;
  float: left;
  width: 12vw;
  height: 100cqh;
  border-right: var(--borderWidth2) var(--color8) solid;
  border-bottom: none;
}
#modeNav > ul {
  list-style-type: none;
}
#modeNav > ul > li {
  font-size: clamp(3px,3vh,2vw);
  line-height: 5vh;
  margin: clamp(1px, 0.5em, 5vw) 1.5vh;
}
#content {
  margin-left: 12vw;
  padding: 1em;
  overflow: overlay;
}
#writeAside, #listenAside {
  margin-top: -1em;
}
.vocab {
  display: inline;
}
.vocab > svg {
  width: var(--speakerSize);
  height: var(--speakerSize);
}
#vocablist {
  width: 80vw;
}
.foundVocab {
  background: rgb(0, 200, 0, 0.5);
}
#headerVocabModeLook {
  display: flex;
  width: 80vw;
  margin-bottom: 3vh;
}
#headerVocabModeLook > input {
  flex: 4;
}
#cardAside {
  position: relative;
  overflow: hidden;
  width: 80vw;
  height: 80vh;
  max-height: 80vw;
  border: var(--borderWidth1) solid var(--color8);
  display: none;
}
#cardMain > div {
  text-align: center;
  height: 50vh;
  max-height: 50vw;
  width: 50vh;
  max-width: 50vw;
  position: absolute;
  top: clamp(10px,15vh,15vw);
  right: -50vh;
  /*transform: scale(0,1);*/
  border: var(--borderWidth1) solid var(--color8);
  background: var(--color9);
  transition: all 200ms ease;
}
#cardMain > div:first-child {
  right: max(calc(50% - 25vh), calc(50% - 25vw));
  transform: scale(1,1);
}
#cardMain > div > p:nth-child(even) {
  z-index: -1;
  top: -100%;
}
#cardMain > div > p {
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 100%;
  background: var(--color9);
  font-size: clamp(2px, 6cqh, 6cqw);
  font-weight: 500;
  align-items: center;
  display: flex;
  justify-content: center;
}
.switch {
  width: var(--sizeSwitcher);
  height: var(--sizeSwitcher);
  position: absolute;
  top: calc(clamp(10px,40vh,40vw) - var(--sizeSwitcher) / 2);
  left: 0;
}
.switch > svg {
  width: 100%;
  height: 100%;
}
#switchFront {
  right: 0;
  left: auto;
}
#turn {
  position: absolute;
  bottom: clamp(2px,2vh,2vw);
  left: 32vw;
  right: 32vw;
  height: 7vh;
  max-height: 7vw;
  font-size: clamp(2px,3vh,3vw);
}
#speak {
  position: absolute;
  bottom: clamp(2px,2vh,2vw);
  right: 22vw;
  width: 7vh;
  max-width: 7vw;
  height: 7vh;
  max-height: 7vw;
}
#speak > svg {
  width: 100%;
  height: 100%;
}
#speakUse, .speakUse {
  display: none;
}
#feedBack > span {
  color: red;
  display: none;
}
#feedBack > span:first-child {
  color: green;
}
#playListening {
  border-radius: 50%;
}
button {
  background: linear-gradient(80deg, var(--color2), var(--color1));
}
input[type="text"] {
  border: none;
  border-bottom: 0.1em var(--color8) solid;
}
input[type="text"]:focus {
  outline: 0.1em green solid;
}
.wrongValue:focus {
  outline: 0.1em red solid !important;
}
#content > aside {
  text-align: center;
}
#playListening {
  display: block;
  margin: 0 auto 0.5em auto;
  width: clamp(1em,10vmax,10vmin);
  height: clamp(1em,10vmax,10vmin);
}
button > svg {
  width: 100%;
  height: 100%;
}
#feedBack {
  margin-top: 0.5em;
}
#result > p > span {
  display: none;
  font-size: 0.9em;
}
#result {
  display: none;
}
#result > canvas {
  width: 100%;
  height: auto;
}
#resultTB > tr > td {
  width: 33.3cqw;
}
#gameAside > iframe {
  width: 80cqw;
  height: 43.8cqw;
  max-width: 136.8cqh;
  max-height: 75cqh;
}
#gameAside > header > a, #gameAside > header > p {
  flex: 1;
}
.testTableInput {
  text-align: center;
}
#testSubmit {
  display: block;
  margin-top: 1em;
}
#testSubmit + #result > p > span {
  display: inline;
}
#testAside > table {
  width: 80%;
}
.horizontallist {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  border-bottom: var(--borderWidth1) solid var(--color8);
}
.horizontallist > li {
  flex: 1;
  font-size: clamp(4px, 4vh, 2.5vw);
  border-right: 0.1cqw solid var(--color8);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizontallist > li > a {
  text-decoration: none;
  color: blue;
}
header > .horizontallist {
  border: none;
}
#teachermenu > header {
  display: block;
}
#teachermenu > p, #teachermenu > a, #usermenu > p {
  width: 80%;
  margin: 2vmax auto 0 auto;
  border: var(--borderWidth1) var(--color8) solid;
  background: var(--color5);
  border-radius: 1vmax;
  padding: 1vmax;
  text-align: center;
}
#teachermenu > p > a {
  display: block;
}
.vocablistlist {
  list-style-type: none;
}
.vocablistlist > li {
  font-size: clamp(4px, 4vh, 2.5vw);
  display: flex;
  border: 0.1cqw solid var(--color8);
  border-radius: 0.5cqw;
  padding: 0.3cqw;
  background: var(--color9);
  margin: 0.5cqw;
}
.vocablistlist > li > p:first-child {
  flex-basis: 45%;
  text-overflow: ellipsis;
  max-width: 45%;
  overflow: hidden;
  flex: 1;

}
.vocablistlist > li > p:last-child {
  flex-basis: 45%;
  flex: 1;
}
.vocablistlist > li > * {
  margin: 1%
}
.vocablistlist > li > a {
  flex-basis: 10%;
}
#holeName {
  position: absolute;
  top: 40vh;
  left: 10vw;
  right: 10vw;
  bottom: 40vh;
  border: 0.3cqw solid var(--color8);
  border-radius: 1cqw;
  font-size: 0.8em;
  word-wrap: break-word;
  display: none;
  background: var(--color9);
}
#newListPara, #editPrivateList {
  width: 100%;
}
#newListPara > thead > tr > th, #newListPara > tbody > tr > td, #editPrivateList > tbody > tr > td, #editPrivateList > tbody > tr > th {
  max-width: 19vw;
}
#newListPara > tbody > tr > td > input, #editPrivateList > tbody > tr > td > input {
  max-width: 100%;
  border-radius: 0.5vmax;
}
input[name^="sentence_"] {
  width: 90%;
  float: left;
  margin-right: 1%;
}
input[name^="sentence_"] + button {
  width: 9%;
  height: 90%;
  aspect-ratio: 1;
  border-radius: 10%;
}
.wrong {
  background: rgb(200,0,0,0.5);
  color: var(--color9);
}
.memberlist {
  width: 100%;
}
.memberlist > thead > tr > th {
  border-bottom: var(--borderWidth2) solid var(--color8);
}
.memberlist > tbody > tr > td {
  text-align: center;
  border-bottom: var(--borderWidth1) solid var(--color8);
}
.memberlist > tbody > tr {
  background: var(--color2);
}
.memberlist > tbody > tr:nth-child(even) {
  background: var(--color3);
}
.subWindow {
  text-align: center;
  width: 80%;
  border-radius: 2vmax;
  border: var(--borderWidth2) solid var(--color9);
  background: var(--color2);
  padding: 3vmax;
  position: absolute;
  top: 10vh;
  left: 10%;
  display: none;
}
#addNewUser > header {
  display: block;
  margin-bottom: 2vmax;
}
#addNewUser > div:nth-child(2) {
  border-bottom: var(--borderWidth1) solid var(--color8);
  margin-bottom: 1vmax;
  padding-bottom: 1vmax;
}
#addNewUser > footer {
  width: 60%;
  margin: 0 auto;
}
#addNewUserResult {
  max-height: 70vh;
  overflow: hidden;
}
#addNewUserResult > aside {
  overflow: overlay;
  max-height: 60vh;
  position: relative;
}
#addNewUserResult > aside > table {
  width: 80%;
  overflow: overlay;
  margin: 10%;
}
#addNewUserResult > aside > table > thead {
  position: sticky;
  top: 0;
  background: var(--color2);
}
#searchForMembers, #copyLink1 {
  padding: 1%;
  border-radius: 1vmax;
  background: var(--color9);
  border: var(--borderWidth1) solid var(--color3);
}
#searchForMembers:hover, #copyLink1:hover {
  background: var(--color5);
}
.closeSubWindow {
  width: 3vmax;
  height: 3vmax;
  border-radius: 100%;
  background: var(--color3);
  border: var(--borderWidth1) solid var(--color9);
  position: absolute;
  top: 0;
  right: 0;
}
.closeSubWindow:hover {
  background: var(--color4);
}
.closeSubWindow > svg {
  width: 100%;
  height: 100%;
}
.disabledUser > td {
  opacity: 0.2;
}
#selectmenutop {
  display: flex;
  background: var(--color3);
}
#selectmenutop > span {
  flex: 1;
  text-align: center;
  border-bottom: var(--borderWidth1) solid var(--color9);
  border-right: var(--borderWidth1) solid var(--color9);
}
#selectmenutop > span:last-child {
  border-right: none;
}
#selectmenutop > .active {
  background: var(--color4);
  border-bottom: none;
}
#editcur > main {
  background: var(--color4);
  display: none;
}
#editcur > main:first-child {
  display: block;
}
#INFORM {
  position: absolute;
  top: 10%;
  left: 10%;
  bottom: 10%;
  right: 10%;
  border-radius: 2vmax;
  border: var(--borderWidth1) solid var(--color8);
  background: var(--color3);
  padding: 5%;
  overflow: overlay;
  text-align: center;
  z-index: 9999;
}
#INFORM > header {
  margin-bottom: 1em;
  border-bottom: var(--borderWidth1) solid var(--color8);
  text-align: center;
  display: block;
}
.cursLists, .cursGrex {
  text-align: center;
}
.cursGrex > li > p {
  flex: 1;
}
.cursLists > li, .cursGrex > li {
  display: flex;
  background: var(--color9);
  margin: 0 1vmax 1vmax 1vmax;
  padding: 0.2em;
  border-radius: 0.4vmax;
  border: var(--borderWidth1) solid var(--color8);
}
.removeListFromCurs, .kickmember, .addListToCurs, .addGrexToCurs, #addCurs {
  border-radius: 0.2vmax;
  background: var(--color3);
  border: var(--borderWidth2) solid var(--color8);
  width: 1em;
}
.removeListFromCurs:hover, .kickmember:hover, .addListToCurs:hover, #addCurs:hover {
  background: #017AA7;
}
.cursLists > li > p {
  flex: 1;
}
.overflowText {
  overflow: hidden;
}
.headervocablistslist {
  display: flex;
  align-items: center;
}
.headervocablistslist > input {
  flex: 1;
}
.headervocablistslist > svg {
  height: 100%;
  width: 5cqh;
}
#cursName {
  position: relative;
}
#cursName {
  background: var(--color3);
}
#cursName > p {
  display: inline-block;
}
#cursName > button {
  width: 5vh;
  aspect-ratio: 1 / 1;
  background: var(--color9);
}
.yourCursList {
  list-style-type: none;
}
.yourCursList > li {
  width: 80%;
  background: var(--color9);
  border: var(--borderWidth1) solid var(--color8);
  margin: 1vh 1vw;
  border-radius: 1vmax;
  padding: 1vmax;
}
.yourCursList > li > h4 {
  margin-bottom: 0.8vh;
  border-bottom: var(--borderWidth1) solid var(--color8);
  text-align: center;
}
.yourCursList > li > p {
  margin-top: 0.8vh;
  font-size: clamp(1px, 3vh, 2.5vw);
}
#orderPrivateList {
  background: var(--color9);
  border: var(--borderWidth1) solid var(--color8);
  border-radius: 2vmax;
  margin: 1vh auto;
  padding: 2vmax;
  max-width: 80%;
  text-align: center;
}
.privateListList {
  list-style-type: none;
  margin: auto;
  display: flex;
}
.privateListList > li {
  background: var(--color9);
  border: var(--borderWidth1) solid var(--color8);
  border-radius: 1.5vmax;
  display: inline-block;
  max-width: 50%;
  width: 40%;
  margin: 1vh auto;
  padding: 1vmax;
  text-align: center;
}
.privateListList > li > a {
  color: var(--color8);
  width: 100%;
  height: 100%;
  display: inline-block;
}
.privateListList > li > a:hover {
  color: var(--color4);
}
.goalsList {
  list-style-type: none;
}
.goalsList > li {
  background: linear-gradient(80deg, var(--color5), var(--color2));
  display: flex;
  border: var(--borderWidth1) solid var(--color8);
  max-width: 80%;
  border-radius: 0.4vmax;
  margin: 1vh auto;
  box-shadow: 2px 2px 10px black;
  padding: 0.3vmax;
}
.goalsList > .finished {
  background: linear-gradient(80deg, var(--color6), var(--color7));
}
.goalsList > li > p {
  flex: 1 1 20%;
}
.goalsList > li > p:first-child {
  flex: 1.5 1 60%;
}
.goalsList > li > p:last-child {
  text-align: right;
}
#newGoalLink {
  display: block;
  width: 40%;
  border: var(--borderWidth1) solid var(--color8);
  border-radius: 0.4vmax;
  padding: 0.4vmax;
  margin: 2vh auto;
  background: linear-gradient(45deg, var(--color2), var(--color1));
  color: var(--color8);
  text-decoration: none;
  text-align: center;
}
#grammarExercise {
  margin-left: 1.5em;
}
.grammarExercise > li > input, #grex > li > select {
  border-width: var(--borderWidth1);
  border-style: solid;
}
.grammarExercise > li > input {
  width: 10em;
}
.grammarExercise > li > * {
  display: inline;
}
.grammarExercise > li {
  margin-bottom: 0.8em;
}
#newListLink {
  margin-right: 0.5cqw;
  font-size: clamp(3px, 4vh, 2.5vw);
}
#newListLink > a {
  color: black;
  text-decoration: none;
}
#newListLink:hover {
  background: linear-gradient(80deg, var(--color4), var(--color1));
}
.dontKnowGrex {
  float: right;
  margin-right: 1vw;
}
/* GRAMMAR-CREATOR*/
#GrammarCreator > aside {
  background: var(--color9);
  position: absolute;
  right: 0;
  top: 25vh;
  width: 4vw;
  padding: 0.5vw;
  border-radius: 0.5vw;
}
#newGrammarForm {
  container-type: inline-size;
}
.tool {
  width: 3vw;
  height: 3vw;
  margin-bottom: 0.5vw;
  background: var(--color5);
  border-radius: 0.5vw;
}
.tool > img {
  width: 100%;
  height: 100%;
}
#typIsTable, #typIsMatch {
  display: none;
}
#typIsList > ol {
  margin-left: 1.5em;
  width: 85cqw;
}
#typIsList > ol > li:hover {
  background: rgb(0, 0, 0, 0.1);
}
#typIsList > ol > .activeLi, #typIsList > ol > .activeLi:hover {
  background: rgb(0, 0, 0, 0.4);
  width: 100%;
  min-height: 5vh;
}
#tools {
  display: flex;
  margin: 0 auto 1em auto;
  width: 80cqw;
}
#tools > button {
  flex: 1;
}
.newGrammarContainer {
  display: inline-block;
  max-width: 100%;
}
.newGrammarContainer > input {
  min-width: 5vw;
  width: 5vw;
  max-width: 100%;
  margin: 0 1cqw;
}
input[name*="_typ_"][value="fillIn"] + input {
  background: yellow;
}
input[name*="_typ_"][value="select"] + input {
  background: orange;
  min-width: 10vw;
}
input[name*="_typt_"][value="fillIn"] + textarea {
  background: yellow;
}
input[name*="_typt_"][value="select"] + textarea {
  background: orange;
  min-width: 10vw;
}
.movingToolWorking > li:hover {
  border-bottom: 3vh black solid;
}
.movingToolWorking2 > li > p:hover {
  border-left: 3vh black solid;
}
#showManualVideo {
  background: linear-gradient(80deg, var(--color2), var(--color3));
}
#manualContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(0, 0, 0, 0.3);
  z-index: 9999999;
  display: none;
}
#manualContainer > video {
  width: auto;
  height: auto;
  flex: 1;
}
#manualContainer > button {
  width: 3vmax;
  height: 3vmax;
  position: fixed;
  top: 0;
  right: 0;
  background: linear-gradient(80deg, var(--color2), var(--color3));
}
.activeTd {
  background: yellow;
}
#typIsTable > table > * > * > * > * {
  width: 100%;
}
#typIsTableBody > tr > td > textarea, #typIsMatchBody > tr > td > textarea {
  resize: none;
  width: 100%;
  height: 100%;
}
#grexm {
  width: 80vw;
}
#grexm > tbody > tr > td > div {
  display: flex;
}
#grexm > tbody > tr > td > div > p {
  flex: 1;
}
#grexm > tbody > tr > td > div > input {
  width: 2em;
  background: none;
}