html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: overlay;
  background-image: url(img/bg.jpg); }
  html #row1, body #row1 {
    position: relative;
    color: #111111;
    overflow-wrap: break-word; }
    html #row1 span, body #row1 span {
      padding: 3px 5px 3px 5px;
      margin-right: 6px;
      display: inline-block;
      font-size: 29px; }

.container-ancestor {
  margin: 0 !important;
  padding-top: 30px; }

.logic-form {
  width: 100%; }

.ranking-table {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #8eb6d8; }

.text-data {
  margin-top: 0px;
  padding-left: 5px;
  margin-bottom: 10px;
  height: 100px;
  overflow: hidden;
  color: #1d4851;
  font-family: Times New Roman, Times, serif;
  background: rgba(255, 255, 255, 0.3607843137);
  border: 1px solid #8eb6d8;
  border-radius: 4px;
  -moz-user-select: none;
       user-select: none; }

.text-data::-webkit-scrollbar {
  width: 0px; }

.activeTextData {
  display: none; }

.navbar-item img {
  max-height: 8.75rem !important; }

.input-check-form {
  width: 100%;
  height: 60px;
  margin: 0 auto;
  margin-top: 30px;
  background: rgba(167, 200, 231, 0.2784313725);
  border-radius: 5px;
  position: relative; }

.rank-user {
  height: 57px;
  text-transform: capitalize; }

.user-check {
  position: relative; }

.can-giua-text {
  height: 40px;
  line-height: 40px; }

.wpm-user {
  font-weight: bold; }

.padding-rank-24h .stt1 {
  width: 30px;
  height: 30px; }
.padding-rank-24h .rank-user td {
  padding: 0 !important;
  font-size: 14px; }
.padding-rank-24h .rank-user .can-giua-text {
  height: 57px;
  line-height: 57px; }
.padding-rank-24h .rank-user .wpm-user {
  width: 20px !important; }
  .padding-rank-24h .rank-user .wpm-user .can-giua-text {
    text-align: center; }
.padding-rank-24h .rank-user .ten-user p {
  padding-left: 10px; }
.padding-rank-24h .rank-user .anh-user {
  position: relative; }
  .padding-rank-24h .rank-user .anh-user img {
    width: 23px;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); }
.padding-rank-24h .rank-user:nth-child(1) .stt1 {
  width: 30px;
  height: 30px; }
.padding-rank-24h .rank-user:nth-child(1) .stt2 {
  width: 27px;
  height: 27px; }
.padding-rank-24h .rank-user:nth-child(2) .stt1 {
  width: 30px;
  height: 30px; }
.padding-rank-24h .rank-user:nth-child(2) .stt2 {
  width: 27px;
  height: 27px; }
.padding-rank-24h .rank-user:nth-child(3) .stt1 {
  width: 30px;
  height: 30px; }
.padding-rank-24h .rank-user:nth-child(3) .stt2 {
  width: 27px;
  height: 27px; }

.rank-user:nth-child(1) .stt4 {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #ffecb5;
  position: absolute;
  text-align: center;
  line-height: 23px;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #ef6632; }
.rank-user:nth-child(1) .wpm-user {
  color: #ef6632; }
.rank-user:nth-child(1) .stt3 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffbc06;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(1) .stt2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fcd872;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(1) .stt1 {
  width: 38px;
  height: 38px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: #fb724b;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.rank-user:nth-child(2) .stt4 {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #eefafd;
  position: absolute;
  text-align: center;
  line-height: 23px;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #06a0a0; }
.rank-user:nth-child(2) .wpm-user {
  color: #06a0a0; }
.rank-user:nth-child(2) .stt3 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #6bcebb;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(2) .stt2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #a7e3f6;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(2) .stt1 {
  width: 38px;
  height: 38px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: #4dbba6;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.rank-user:nth-child(3) .stt4 {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #f9d9eb;
  position: absolute;
  text-align: center;
  line-height: 23px;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #8c72cb; }
.rank-user:nth-child(3) .wpm-user {
  color: #8c72cb; }
.rank-user:nth-child(3) .stt3 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ad95f2;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(3) .stt2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ddd5f0;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }
.rank-user:nth-child(3) .stt1 {
  width: 38px;
  height: 38px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: #8c72cb;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.container-input-check-form {
  width: 600px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

.input-row {
  width: 470px;
  height: 100%;
  float: left;
  font-size: 25px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  color: black;
  padding-left: 10px;
  border: 1px solid #8eb6d8;
  border-radius: 5px; }

.input-row:focus {
  outline: none; }

.timer {
  width: 80px;
  height: 100%;
  float: left;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  padding: 0px 10px; }

.container-timer {
  width: 100%;
  height: 100%;
  background: rgba(176, 51, 199, 0.48);
  border-radius: 5px;
  line-height: 50px;
  color: white;
  text-align: center;
  font-size: 23px; }

.reset-time {
  width: 50px;
  height: 100%;
  border-radius: 5px;
  float: left;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  position: relative;
  background-color: rgba(2, 209, 177, 0.49);
  border-color: #285e8e;
  cursor: pointer; }
  .reset-time img {
    width: 28px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); }

.result {
  float: left;
  height: 340px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  border-radius: 5px;
  background: white;
  margin-top: 30px;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
       flex-direction: column;
  position: relative; }

.text-result {
  width: 100%;
  height: 50px;
  background: #57c7a8;
  line-height: 50px;
  text-align: center;
  color: white;
  font-size: 23px; }

.value-rls {
  width: 100%;
  height: 40px;
  padding: 0px 10px; }

.wpm {
  font-size: 44px;
  text-align: center;
  font-weight: bold;
  color: #46cfc9; }

.value-left, .value-right {
  width: 50%;
  height: 100%;
  border-top: 1px solid rgba(168, 151, 151, 0.69);
  float: left;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  line-height: 40px;
  font-weight: bold; }

.value-right {
  text-align: right; }

#correctWords {
  color: #46cfc9; }

#wrongWords {
  color: red; }

.btn-icon-fb {
  background-color: #00d1b2 !important;
  width: 258px !important;
  height: 50px !important;
  margin-left: 5px !important;
  margin-top: 3px !important;
  background: #3275b1 !important;
  font-size: 20px !important; }

.table-rank {
  width: 100%; }

.avt-user {
  width: 40px;
  height: auto; }

.rank-fix {
  padding: 0px 0px !important;
  margin-top: 13px; }

.sdf {
  border-radius: 10px;
  padding: 10px;
  font-size: 20px; }

.mauxam {
  background: rgba(134, 140, 147, 0.35); }

.maudo {
  color: red; }

.active {
  display: inline-block; }

.backgroundred {
  background: red; }

.accuracy {
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.49);
  padding: 6px 0px; }

.correctWords {
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.49);
  padding: 6px 0px; }

.wrongWords {
  font-size: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.49);
  padding: 6px 0px; }

.navbar {
  background: #00a07e !important; }

.navbar-end {
  padding-right: 20px; }

.navbar-end .image img {
  width: 100% !important; }

.navbar-item img {
  width: 50% !important; }

.competition {
  width: 100%;
  height: 40px;
  background: #428bca;
  line-height: 40px;
  padding-left: 10px;
  color: white; }

.sl-user-test {
  width: 100%;
  height: 70px;
  background: white;
  position: relative; }
  .sl-user-test span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: 14px;
    width: 90%;
    text-align: center;
    background: #eee;
    padding: 10px 4px;
    color: black;
    border-radius: 5px; }

.highlight-bg-red {
  background: red !important; }

.colorRed {
  color: red; }

.bg-gray {
  background: rgba(128, 128, 128, 0.29); }

.noselect {
  -moz-user-select: none;
       user-select: none; }

.tile.is-parent {
  padding: 0.75rem 3rem !important; }

.rank-24h {
  float: left;
  margin-top: 30px;
  padding: 0 !important;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
       flex-direction: column; }

.padding-rank-24h {
  padding-left: 15px !important; }

.select-view-rank {
  width: 100%;
  height: 51px; }

.count-top, .count-friends {
  width: 85px;
  height: 100%;
  float: left;
  text-align: center;
  line-height: 51px;
  font-size: 16px;
  font-weight: bold;
  background: white;
  cursor: pointer; }

.active-count-rank {
  background: rgba(186, 209, 255, 0.7215686275); }

.main-rank {
  width: 100%;
  background: white;
  position: relative; }

.rank {
  width: 100%;
  position: absolute;
  z-index: 1; }

.friends {
  width: 100%;
  min-height: 290px;
  overflow: hidden;
  background: lightblue;
  position: relative;
  z-index: 2;
  top: 0; }

.table {
  width: 100%; }

.active {
  display: none; }

.login-friends {
  width: 400px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 2;
  display: -moz-box;
  display: flex;
  -moz-box-pack: center;
       justify-content: center;
  -moz-box-align: center;
       align-items: center; }
  .login-friends span {
    margin: 0 4px; }

.login-user {
  width: 400px;
  height: 50px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  display: -moz-box;
  display: flex;
  -moz-box-pack: center;
       justify-content: center;
  -moz-box-align: center;
       align-items: center; }
  .login-user span {
    margin: 0 4px;
    color: white; }
  .login-user .login-fb-span {
    color: white;
    background: #4292a4; }
  .login-user .login-gg-span {
    color: red; }

.image.is-32x32 {
  height: 35px !important;
  width: 35px !important;
  margin-top: 10px; }
  .image.is-32x32 img {
    border-radius: 50%;
    max-height: 35px; }

.navbar-link {
  color: white !important;
  background: none !important; }

.login-fb-span {
  background: #3275b1;
  color: white;
  font-size: 14px;
  padding: 8px 17px;
  font-weight: bold;
  cursor: pointer; }

.login-gg-span {
  background: #ffffff;
  color: red;
  font-size: 14px;
  padding: 8px 24px;
  font-weight: bold;
  cursor: pointer; }

.selectLanguage {
  margin-bottom: 10px;
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center; }
  .selectLanguage select {
    background: #56c7a8 !important; }
  .selectLanguage span {
    margin-left: 10px; }

.selectLanguage .select select {
  color: white !important; }

.table {
  margin-bottom: 50px; }

.avt-user-rank {
  width: 40px;
  height: auto; }

.big-login-panel {
  display: -moz-box;
  display: flex;
  -moz-box-align: center;
       align-items: center; }
  .big-login-panel span {
    margin-right: 10px; }
  .big-login-panel .clickLogFb {
    padding: 5px 7px;
    color: white;
    background: #3374b0;
    cursor: pointer; }
  .big-login-panel .clickLogGg {
    padding: 5px 13px;
    color: red;
    background: white;
    cursor: pointer; }

.small-login-panel {
  display: -moz-box;
  display: flex;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
       flex-direction: column; }
  .small-login-panel .clickLogFb {
    padding: 3px 3px;
    color: white;
    background: #0095ff;
    cursor: pointer;
    border-radius: 10px;
    font-size: 9px;
    text-align: center;
    border: 1px solid #9bb8bd;
    margin-bottom: 5px; }
  .small-login-panel .clickLogGg {
    padding: 3px 13px;
    color: red;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    font-size: 9px;
    text-align: center;
    border: 1px solid #cdcaca; }

.iframe-fb {
  overflow: hidden;
  bottom: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }

.rank-user-th {
  position: relative;
  padding: 0.5em 1.9em !important; }

.stt4 {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  line-height: 23px;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: slategrey; }

.wpm-user {
  color: slategrey; }

.stt3 {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.stt2 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

.stt1 {
  width: 38px;
  height: 38px;
  line-height: 34px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); }

/*# sourceMappingURL=style.css.map */