@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
img {
  max-width: 100%; }

a {
  color: #FFF;
  text-decoration: none;
  display: inline-block
}
  a:hover {text-decoration: none}

.floatLeft {
  float: left; }

.floatRight {
  float: right; }

.row {
  clear: both; }
  .row::after {
    content: "";
    clear: both;
    display: table; }

.align-baseline {
  vertical-align: baseline !important; }

.align-top {
  vertical-align: top !important; }

.align-middle {
  vertical-align: middle !important; }

.align-bottom {
  vertical-align: bottom !important; }

.align-text-bottom {
  vertical-align: text-bottom !important; }

.align-text-top {
  vertical-align: text-top !important; }

.mt5 {
  margin-top: 5px; }

.pt5 {
  padding-top: 5px; }

.mb5 {
  margin-bottom: 5px; }

.pb5 {
  padding-bottom: 5px; }

.ml5 {
  margin-left: 5px; }

.pl5 {
  padding-left: 5px; }

.mr5 {
  margin-right: 5px; }

.pr5 {
  padding-right: 5px; }

.m5 {
  margin: 5px; }

.p5 {
  padding: 5px; }

.mt10 {
  margin-top: 10px; }

.pt10 {
  padding-top: 10px; }

.mb10 {
  margin-bottom: 10px; }

.pb10 {
  padding-bottom: 10px; }

.ml10 {
  margin-left: 10px; }

.pl10 {
  padding-left: 10px; }

.mr10 {
  margin-right: 10px; }

.pr10 {
  padding-right: 10px; }

.m10 {
  margin: 10px; }

.p10 {
  padding: 10px; }

.mt15 {
  margin-top: 15px; }

.pt15 {
  padding-top: 15px; }

.mb15 {
  margin-bottom: 15px; }

.pb15 {
  padding-bottom: 15px; }

.ml15 {
  margin-left: 15px; }

.pl15 {
  padding-left: 15px; }

.mr15 {
  margin-right: 15px; }

.pr15 {
  padding-right: 15px; }

.m15 {
  margin: 15px; }

.p15 {
  padding: 15px; }

.mt20 {
  margin-top: 20px; }

.pt20 {
  padding-top: 20px; }

.mb20 {
  margin-bottom: 20px; }

.pb20 {
  padding-bottom: 20px; }

.ml20 {
  margin-left: 20px; }

.pl20 {
  padding-left: 20px; }

.mr20 {
  margin-right: 20px; }

.pr20 {
  padding-right: 20px; }

.m20 {
  margin: 20px; }

.p20 {
  padding: 20px; }

.mt25 {
  margin-top: 25px; }

.pt25 {
  padding-top: 25px; }

.mb25 {
  margin-bottom: 25px; }

.pb25 {
  padding-bottom: 25px; }

.ml25 {
  margin-left: 25px; }

.pl25 {
  padding-left: 25px; }

.mr25 {
  margin-right: 25px; }

.pr25 {
  padding-right: 25px; }

.m25 {
  margin: 25px; }

.p25 {
  padding: 25px; }

.mt30 {
  margin-top: 30px; }

.pt30 {
  padding-top: 30px; }

.mb30 {
  margin-bottom: 30px; }

.pb30 {
  padding-bottom: 30px; }

.ml30 {
  margin-left: 30px; }

.pl30 {
  padding-left: 30px; }

.mr30 {
  margin-right: 30px; }

.pr30 {
  padding-right: 30px; }

.m30 {
  margin: 30px; }

.p30 {
  padding: 30px; }

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important; }

.justify-content-between {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important; }

@media (max-width: 991px) {
  .flex-lg-column {
    -ms-flex-direction: column !important;
    flex-direction: column !important; } }

    .answers > label{margin-bottom: 20px}

    .answers label{
      display: flex;
      align-items: center;
      padding: 25px 40px 25px 25px;
      width: 100%;
      background-color: #F1F1F1;
      color: #4D4D4D;
      font-size: 20px;
      cursor: pointer;
      font-weight: 700;
      font-style: normal;
      transition: 0.5s
    }

    .answers label:before{
      content: "\F131";
      display: inline-block;
      font: normal normal normal 25px "Material Design Icons";
      margin-right: 30px
    }

    .answers input[type="checkbox"]{display: none}
    .answers input[type="checkbox"]:checked + label, .answers input[type="checkbox"]:hover + label{
        background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
        background-repeat: repeat-x;
        color: #FFF;
    }

    .answers input[type="checkbox"]:checked + label:before{content: "\F135"}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar }

.body-overflow{overflow: hidden}

body {
  font-size: 16px;
  color: #666666;
  margin: 0px;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  background-color: #2B244D;
  overflow-x: hidden }

.Container {
  max-width: 85rem;
  margin: 0 auto;
  padding: 40px 20px; }

.container-fluid {
  max-width: 100%;
  padding: 0 50px; }
  @media (max-width: 991px) {
    .container-fluid {
      padding: 0 20px; } }

h1, h2, h3 {
  margin: 0px;
  padding: 0px;
  font-weight: normal; }

* {
  outline: 0px;
  box-sizing: border-box; }

.text-center {
  text-align: center; }

.heading {
  background-color: #7863AC;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  margin-top: 40px;
  padding: 15px 47px}
  @media (max-width: 991px) {
    .heading {
      margin-top: 20px;
      padding: 5px 15px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px; } }

.wyloguj a{
  background: #8E78FF;
  border-radius: 30px;
  padding: 10px;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.5);
  transition: 1s
}

.wyloguj a:hover{background: #7863AC}

.wyloguj a > *{text-shadow: 0 0 4px rgba(0,0,0,.3)}

.headerImg {
  margin-top: 40px;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.5);
  border-radius: 30px
 }

.headerImg img{
  width: 100%;
  border-radius: 30px
}

.boxBlueBg {
  background-color: #392E55;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.2)
 }
  @media (max-width: 991px) {
    .boxBlueBg {
      margin-top: 20px;
      padding: 10px; } }

.userProfile .col {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: calc(50% - 10px);
  background-color: #2B244D;
  float: left;
  overflow: hidden; }
  @media (max-width: 991px) {
    .userProfile .col {
      width: 100%;
      float: none; } }
  .userProfile .col:first-child {
    margin-right: 10px; }
    @media (max-width: 991px) {
      .userProfile .col:first-child {
        margin-right: 0; } }
  .userProfile .col:last-child {
    margin-left: 10px; }
    @media (max-width: 991px) {
      .userProfile .col:last-child {
        margin-left: 0;
        margin-top: 10px; } }
.userProfile .profilePic {
  max-width: 181px;
  float: left;
  font-size: 0 }
  @media (max-width: 991px) {
    .userProfile .profilePic {
      float: none;
      margin: 10px auto 0; } }
  .userProfile .profilePic img {
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0; }
.userProfile .profileName {
  background-color: #04B397;
  padding: 12px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
  color: #FFF;
  font-size: 18px; }
  .userProfile .profileName img {
    margin-right: 5px; }
.userProfile .profileDetail {
  float: left;
  padding: 50px 20px 0px 40px;
  font-size: 30px;
  color: #FFF;
  font-weight: 700;
  width: calc(100% - 181px);
  position: relative; }
  @media (max-width: 991px) {
    .userProfile .profileDetail {
      float: none;
      padding: 20px;
      width: 100%;
      margin-top: 0; } }
  .userProfile .profileDetail span, .userProfile .profileDetail i {
    color: #FBB03B; }
  .userProfile .profileDetail .profileStatus {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    background-color: #8CC63F;
    top: 20px;
    right: 20px; }
  .userProfile .profileDetail .profileProgres {
    background-color: #FFF;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    width: 100%;
    margin-top: 20px;
    overflow: hidden
  }
    @media (max-width: 991px) {
      .userProfile .profileDetail .profileProgres {
        margin-top: 10px; } }
    .userProfile .profileDetail .profileProgres .profileProgressBar {
      background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
      background-repeat: repeat-x;
      height: 34px;
      max-width: 100% }
      @media (max-width: 991px) {
        .userProfile .profileDetail .profileProgres .profileProgressBar {
          height: 20px; } }
.userProfile .welcomeText {
  padding: 20px;
  height: 235px;
  overflow-y: auto }
  .userProfile .welcomeText h2 {
    font-size: 31px;
    font-weight: 700;
    color: #FFF;
    margin: 0 0 20px; }
    .userProfile .welcomeText h2 img {
      margin-right: 10px; }
  .userProfile .welcomeText p {
    margin: 0;
    color: #FFF;
    font-size: 13px;
    line-height: 26px; }

.naskroty {
  padding: 20px 20px 30px; }
  @media (max-width: 991px) {
    .naskroty {
      padding: 10px; } }
  .naskroty .header{margin: 0 0 20px}
  .naskroty .header h1 {font-size: 25px}
    @media (max-width: 991px) {
      .naskroty .header{margin-bottom: 10px}
      .naskroty h1 {font-size: 20px}
    }

a.btn {
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: #7863AC;
  border: 0;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  padding: 10px 20px;
  width: 360px;
  cursor: pointer;
  display: block;
  text-align: center;
  line-height: 40px;
  position: relative;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.3)
}
  @media (max-width: 991px) {
    a.btn {
      width: 100%!important;
      font-size: 16px;
      padding: 10px; } }
  a.btn img {
    vertical-align: middle;
    margin-right: 10px; }
    @media (max-width: 991px) {
      a.btn img {
        max-width: 25px; } }
  a.btn:hover {
    background-color: #8E78FF; }
.squareBoxes .boxBlueBg {
  padding: 20px 10px 30px; }
  @media (max-width: 991px) {
    .squareBoxes .boxBlueBg {
      padding: 10px 10px 20px; } }
.squareBoxes .generalBox {
  -webkit-border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  padding: 20px 100px 20px 20px;
  color: #FFF;
  height: 230px;
  background-repeat: no-repeat;
  background-position: right 40px top 20px; }

  .squareBoxes .generalBox > *{text-shadow: 0 0 24px rgba(0,0,0,.1);}
  @media (max-width: 991px) {
    .squareBoxes .generalBox {
      background-size: 40% auto;
      background-position: right 20px top 70%; } }
  .squareBoxes .generalBox h2 {
    font-size: 40px;
    font-weight: 900
  }
    @media (max-width: 991px) {
      .squareBoxes .generalBox h2 {
        font-size: 30px; } }
  .squareBoxes .generalBox p {
    font-size: 14px;
    max-height: 60px;
    overflow-y: auto;
    margin: 10px 0 0
  }
    .squareBoxes .generalBox.blueSkyBg h2 {
      font-size: 34px;
      max-width: 300px; }
      @media (max-width: 991px) {
        .squareBoxes .generalBox.blueSkyBg h2 {
          font-size: 20px; } }
.squareBoxes .grayBox {
  background-color: #D9D9D9;
  padding: 20px;
  font-size: 20px;
  color: #FFF;
  position: relative;
  font-weight: 900; }
  @media (max-width: 991px) {
    .squareBoxes .grayBox {
      font-size: 18px;
      padding: 10px; } }
  .squareBoxes .grayBox .circle {
    width: 24px;
    height: 24px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px; }
    @media (max-width: 991px) {
      .squareBoxes .grayBox .circle {
        width: 18px;
        height: 18px;
        margin-right: 5px; } }
    .squareBoxes .grayBox .circle.gold {
      background-color: #FFBB00; }
    .squareBoxes .grayBox .circle.silver {
      background-color: #A5A5A5; }
    .squareBoxes .grayBox .circle.bronze {
      background-color: #B46937; }
    .squareBoxes .grayBox .circle.master {
      background-color: #D21818; }
    .squareBoxes .grayBox .circle span {
      vertical-align: middle; }
  .squareBoxes .grayBox .rating {
    color: #636363;
    float: right;
    font-weight: 400;
    display: flex;
    align-items: center }
    .squareBoxes .grayBox .rating span {
      vertical-align: middle; }
    .star{
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #fff;
      margin-left: 10px;
      width: 30px;
      height: 30px;
      display: inline-block; }
      @media (max-width: 991px) {
        .star {
          width: 22px;
          height: 22px; } }
  .squareBoxes .grayBox .playBtn {
    position: absolute;
    left: 50%;
    top: 0;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: solid 3px #FFF;
    width: 78px;
    height: 78px;
    cursor: pointer; }

    @media screen and (max-width: 991px) {
      .squareBoxes .grayBox .playBtn{top: -15px}
    }

    .squareBoxes .grayBox .playBtn.blueSky {
      background-color: #6AB9FF; }
    .squareBoxes .grayBox .playBtn.puplePink {
      background-color: #C578FF; }
    .squareBoxes .grayBox .playBtn.purpleBlue {
      background-color: #8E78FF; }
    .squareBoxes .grayBox .playBtn.greenParrot {
      background-color: #36C16D; }
    .squareBoxes .grayBox .playBtn:hover {
      background-color: #FBB03B; }
.squareBoxes .progress {
  background-color: #FFF;
  width: 100%; }
  .squareBoxes .progress .ProgressBar {
    background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
    background-repeat: repeat-x;
    max-width: 100%;
    height: 15px;
    position: relative;
    overflow: hidden
  }
.squareBoxes .liczbaBg {
  background-color: #6AB9FF;
  padding: 20px 20px;
  margin-top: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  font-size: 18px;
  color: #FFF;
  width: calc(50% - 10px);
  float: left; }
  @media (max-width: 991px) {
    .squareBoxes .liczbaBg {
      font-size: 14px;
      width: calc(50% - 5px); } }
  .squareBoxes .liczbaBg:last-child {
    float: right; }
  .squareBoxes .liczbaBg.puplePink {
    background-color: #C578FF; }
  .squareBoxes .liczbaBg.purpleBlue {
    background-color: #8E78FF; }
  .squareBoxes .liczbaBg.greenParrot {
    background-color: #36C16D; }
  .squareBoxes .liczbaBg .nowe {
    background-color: #B90707;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    padding: 8px 40px 8px 20px;
    position: absolute;
    font-size: 14px;
    color: #FFF;
    font-weight: 700;
    right: 5px;
    bottom: -15px;
    box-shadow: 0 0 23px 0 rgba(0,0,0,.25)
  }
    @media (max-width: 991px) {
      .squareBoxes .liczbaBg .nowe {
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        padding: 4px 30px 4px 10px; } }
    .squareBoxes .liczbaBg .nowe span {
      font-size: 18px;
      display: inline-block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #6AB9FF;
      border: solid 2px #FFF;
      width: 34px;
      height: 34px;
      position: absolute;
      top: 50%;
      right: -5px;
      text-align: center;
      line-height: 30px;
      -moz-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      @media (max-width: 991px) {
        .squareBoxes .liczbaBg .nowe span {
          width: 26px;
          height: 26px;
          font-size: 14px;
          line-height: 22px; } }

    .squareBoxes .liczbaBg .nowe > *{text-shadow: 0 0 4px rgba(0,0,0,.15)}

.logowanie {
  background-image: url("../images/login-page/login-page-bg-jti.png");
  background-size: cover;
  height: 100%;
  min-height: 500px;
  position: relative; }

.loginBox {
  max-width: 490px;
  width: 100%;
  background-color: #FFF;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right:0;
  left:0

}
  @media (max-width: 575px) {
    .loginBox {
      width: 94%; } }
  .loginBox .gradient {
    background-image: linear-gradient(to right, #0094AA 0%, #0DFF6A 100%);
    background-repeat: repeat-x; }
  .loginBox h1 {
    font-size: 34px;
    margin: 0;
    padding: 10px 0;
    text-align: center;
    color: #FFF; }
    @media (max-width: 575px) {
      .loginBox h1 {
        font-size: 24px; } }
  .loginBox p {
    text-align: center;
    color: #341451;
    font-weight: 700;
    font-size: 15px; }
  .loginBox .loginForm {
    max-width: 320px;
    margin: 0 auto; }
    @media (max-width: 575px) {
      .loginBox .loginForm {
        max-width: 260px; } }
  .loginBox a.noweHasio {
    font-size: 12px;
    float: right;
    color: #B5B5B5;
    display: block;
    margin: 5px 0; }
    .loginBox a.noweHasio:hover {
      color: #04B397; }
  .loginBox .footer {
    height: 10px; }

    .loginBox form input {
  width: 100%;
  border: solid 2px #B5A4C5;
  margin: 20px 0 0;
  padding: 16px 20px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }
  .loginBox form .button {
  text-align: center;
  background-color: #341451;
  width: 190px;
  height: 48px;
  line-height: 48px;
  color: #FFF;
  border: 0;
  cursor: pointer;
  margin: 20px auto 40px;
  display: block;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out; }
  .loginBox form .button:hover {
    background-color: #FBB03B; }

.fullWidth.boxBlueBg {
  padding: 50px 50px 30px;
}
  @media (max-width: 991px) {
    .fullWidth.boxBlueBg {
      padding: 10px 10px 30px; } }
.fullWidth .generalBox {
  -webkit-border-radius: 15px 15px 0 0;
  -moz-border-radius: 15px 15px 0 0;
  border-radius: 15px 15px 0 0;
  padding: 20px 30px;
  color: #FFF;
  height: 330px;
  background-repeat: no-repeat;
  background-position: right bottom; }
  @media (max-width: 991px) {
    .fullWidth .generalBox {
      height: auto;
      padding: 20px;
      background-size: 260px auto;
      background-position: center; } }
  .fullWidth .generalBox h2 {
    font-size: 35px;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(0,0,0,.15)
   }
    @media (max-width: 991px) {
      .fullWidth .generalBox h2 {
        font-size: 25px!important; } }
  .fullWidth .generalBox p {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    max-height: 100px;
    overflow-y: auto;
    margin-top: 10px
  }
    @media (max-width: 991px) {
      .fullWidth .generalBox p {
        line-height: 20px;
        font-size: 12px
       } }
.fullWidth .employeeBox {
  margin-top: 50px; }
  .fullWidth .employeeBox:first-child {
    margin-top: 0; }
    @media (max-width: 991px) {
      .fullWidth .employeeBox .generalBox {
        background-size: 160px auto; } }
        .fullWidth .playBtnGroup {
          margin-top: 35px;
          text-align: center}
        .fullWidth .playBtn {
          cursor: pointer;
          -webkit-transition: all 300ms ease-in-out;
          -moz-transition: all 300ms ease-in-out;
          -ms-transition: all 300ms ease-in-out;
          -o-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
          -webkit-border-radius: 54px;
          -moz-border-radius: 54px;
          border-radius: 54px;
          background-color: #7863AC;
          font-weight: 700;
          display: inline-flex;
          align-items: center;
          justify-content: space-between
        }
          .fullWidth .playBtn strong {
            vertical-align: middle;
            font-size: 20px;
            padding-left: 25px;
           }
          .fullWidth .playBtn span {
            -moz-transform: translateX(3px);
            -webkit-transform: translateX(3px);
            -o-transform: translateX(3px);
            -ms-transform: translateX(3px);
            transform: translateX(3px);
            -webkit-transition: all 300ms ease-in-out;
            -moz-transition: all 300ms ease-in-out;
            -ms-transition: all 300ms ease-in-out;
            -o-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            margin-left: 5px;
            border: solid 3px #FFF;
            width: 55px;
            height: 55px;
            display: inline-block;
            vertical-align: middle;
            background-color: #6AB9FF;
            display: inline-flex;
            align-items: center;
            justify-content: center
         }
            @media (max-width: 991px) {
              .fullWidth .playBtn span {
                width: 45px;
                height: 45px; } }
          .fullWidth .playBtn:hover {
            background-color: #FBB03B; }
            .fullWidth .playBtn:hover span {
              background-color: #7863AC; }
        .fullWidth .progress {
          background-color: #FFF;
          max-width: 100%;
          overflow: hidden
         }
  .fullWidth .progress .ProgressBar {
    background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
    background-repeat: repeat-x;
    height: 20px;
    position: relative;
    overflow: hidden
   }
.fullWidth .grayBox {
  background-color: #D9D9D9;
  padding: 20px 30px;
  font-size: 20px;
  color: #636363;
  position: relative;
  font-weight: 900;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px; }
  @media (max-width: 991px) {
    .fullWidth .grayBox {
      font-size: 18px;
      padding: 20px 20px; } }
  .fullWidth .grayBox .star {
    margin-left: 10px}
    @media (max-width: 991px) {
      .fullWidth .grayBox .star {
        width: 22px;
        height: 22px; } }
  .fullWidth .grayBox span {
    vertical-align: middle; }
.pagingBox {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  box-sizing: initial;
  margin: 30px auto 0
 }

 .slider-level + .d-flex .pagingBox{margin: 0 auto 30px}
 .sticky-wrapper + .d-flex .pagingBox{margin: 30px auto}


  .pagingBox > * {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    transition: 1s;
    margin: 0 10px;
    box-shadow: inset 0 0 15px 0 rgba(0,0,0,.2)
  }

  .pagingBox > div > b{color: #fff}
  .pagingBox > a > b{
    color: #999;
    transition: 1s
  }

    .pagingBox a:hover {
      background-color: #FBB03B; }
    .pagingBox .active {
      background-color: #6AB9FF; }

      .pagingBox a:hover > b{color: #fff}

.cardContainer {
  position: relative;
  z-index: 1;
  padding: 38px 34px; }
  .cardContainer .cardPreview {
    transform-style: preserve-3d}
  .cardContainer .cardPreview.active {
    border-radius: 30px
   }
  .ekran-gry .active-card .panel{animation: pulse-card 1s infinite}
  .cardContainer .face.back {
    display: block;
    box-sizing: border-box;
    color: white;
    text-align: center; }
    .cardContainer .face.back .rating{margin-bottom: 5px}
      .pytanie .cardContainer .face.back .rating {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        left: 0; }
    .cardContainer .face.back .topRight, .cardContainer .face.back .leftBottom {
      border: solid 2px #2B3F5E;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 10px;
      right: 10px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    display: flex;
  align-items: center;
justify-content: center }
.cardContainer .face.back .topRight, .cardContainer .face.back .leftBottom i{font-size: 16px!important}
      .pytanie .cardContainer .face.back .topRight,
      .pytanie .cardContainer .face.back .leftBottom {
        background-color: #2B3F5E; }
    .cardContainer .face.back .leftBottom {
      top: inherit;
      right: inherit;
      left: 10px;
      bottom: 10px; }

    .cardContainer .topRight .checkCorrect, .cardContainer .leftBottom .checkCorrect,
    .cardContainer .topRight .checkWrong, .cardContainer .leftBottom .checkWrong{display: none}

    .cardContainer .cardWrong .topRight .checkWrong,
    .cardContainer .cardWrong .leftBottom .checkWrong {
      display: block; }
    .cardContainer .cardCorrect .topRight .checkCorrect,
    .cardContainer .cardCorrect .leftBottom .checkCorrect {
      display: block; }

    .cardCorrect .topRight,
    .cardCorrect .leftBottom{
      background:#53d397 }
    .cardWrong .topRight,
    .cardWrong .leftBottom {
      background:#f95959 }

.ekran-gry.boxBlueBg {
  padding: 40px 40px 50px }
  @media (max-width: 991px) {
    .ekran-gry.boxBlueBg {
      padding: 10px 10px 10px; } }
.ekran-gry .punkty {
  border-bottom: solid 2px #7863AC;
  padding-bottom: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start; }
  @media (max-width: 991px) {
    .ekran-gry .punkty {
      margin-bottom: 20px;
      padding-bottom: 10px; } }
.ekran-gry h2 {
  font-size: 28px;
  font-weight: 900;
  color: #FFF;
  margin-bottom: 30px; }
  @media (max-width: 991px) {
    .ekran-gry h2 {
      font-size: 14px;
      margin-bottom: 20px; } }
.ekran-gry .btnPoziom {
  display: inline-block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #6AB9FF;
  padding: 0 20px;
  margin: 0 auto;
  line-height: 70px;
  font-size: 25px;
  color: #FFF;
  width: 100%;
  max-width: 360px;
  text-align: center; }
  @media (max-width: 991px) {
    .ekran-gry .btnPoziom {
      padding: 0 10px;
      font-size: 20px;
      line-height: 50px;
      max-width: 180px; } }
.ekran-gry .purpleBox {
  background-color: rgba(196, 172, 255, 0.24);
  padding: 30px 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
align-items: center;
box-shadow: 0 11px 16px -2px rgba(0,0,0,.3)

}
  @media (max-width: 991px) {
    .ekran-gry .purpleBox {
      padding: 20px 10px; } }
  .ekran-gry .purpleBox.cardsBoxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    overflow: hidden
   }
    @media (max-width: 991px) {
      .ekran-gry .purpleBox.cardsBoxes {
        padding: 20px 10px 0;
        margin-bottom: 0; } }

.overlay {
  background-color: rgba(51, 51, 51, 0.8);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9; }

.modal {
  z-index: 99;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 100%;
  min-height: 100%;
  padding: 20px;
  position: relative;
  display: none
}

    .modal .modalBg {
    background-color: #FFF;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    max-width: 1070px;
    overflow: hidden
  }
  .modal .modalBg-answers{
    margin: 40px auto 0;
    padding: 30px
  }
    @media (max-width: 991px) {
      .modal .modalBg-answers {
        padding: 20px; } }
  .modal .col {
    float: left;
    width: 70%; }
    @media (max-width: 991px) {
      .modal .col {
        width: 100%; } }
    .modal .col:last-child {
      width: 30%; }
      @media (max-width: 991px) {
        .modal .col:last-child {
          width: 100%; } }
  .modal p {
    font-size: 27px;
    color: #333333;
    padding: 0;
    margin: 0;
  text-align: center }
    @media (max-width: 991px) {
      .modal p {
        font-size: 20px; } }
    @media (max-width: 680px) {
      .modal p {
        font-size: 19px; } }
  .modal .timeCounter {
    background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
    background-repeat: repeat-x;
    padding: 10px 20px;
    font-size: 33px;
    color: #FFF;
    max-width: 130px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    font-weight: 900;
    line-height: 30px; }
    @media (max-width: 991px) {
      .modal .timeCounter {
        max-width: 150px;} }
  .modal .btnPunktow {
    font-size: 15px;
    background-color: #0094AA;
    color: #FFF;
    max-width: 130px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 10px 20px;
    line-height: 30px }
    @media (max-width: 991px) {
      .modal .btnPunktow {
        max-width: 150px; } }
  .modal .btnSprawdz {
    background-color: #341451;
    border: none;
    cursor: pointer;
    padding: 15px 30px;
    margin: 0 auto;
    text-align: center;
    display: block;
    transition: 1s;
    border-radius: 5px;
  }
    @media (max-width: 991px) {
      .modal .btnSprawdz {width: 100%}
      .modal .btnSprawdz > span{font-size: 16px}
    }
    .modal .btnSprawdz:hover {
      background-color: #6AB9FF; }
    .modal .btnSprawdz > span{
      color: #FFF;
      font-weight: 900;
      font-size: 19px;
    }


/*#########################################*/
.screen-wipe-left{
  width: 100%;
  height: 100vh;
  background: #2B244D;
  position: fixed;
  z-index: 1000;
  left: -100%
}

.screen-wipe-right{
  width: 100%;
  height: 100vh;
  background: #2B244D;
  position: fixed;
  z-index: 1000;
  right: -100%
}


.loginBox h1{font-weight: 900}

header > div{
  display: flex;
  align-items: center;
  justify-content: space-between
}


.profileName{
  display: flex;
  align-items: center;
  justify-content: center
}

.profileName > *{text-shadow: 0 0 4px rgba(0,0,0,.3)}

.profileName i{margin-right: 9px}
.profileName span{font-weight: bold}

.username{
  font-size: 30px;
  font-weight: 900;
}

.score{
  display: flex;
  margin-top: 10px
}
.score .fa-star:before{
  color:#FBB03B;
  font-size: 25px;
  margin-left: 10px
}

.descGame{
  display: flex;
  align-items: center;
  margin-bottom: 20px
}

.descGame h1{
  font-size: 31px;
  font-weight: 700;
  color: #FFF;
  margin-left: 10px
}

.descGame i{
  color: #fff;
  font-size: 30px
}

.naskroty .header, .naskroty a.btn{
  display: flex;
  align-items: center;
  justify-content: center
}

.naskroty .header > *{
  color: #fff;
  font-weight: bold;
}

.naskroty .header i{
  font-size: 30px;
  margin-right: 10px
}


.naskroty .wrapper-row-items{
  display: flex;
  flex-direction: column
}

.naskroty .wrapper-row-items .row-items > div{position: relative}
.naskroty .wrapper-row-items .row-items .new-box{
  top: -10px;
  right: -10px
}

.naskroty .row-items{
  width: 100%;
  display: flex;
  justify-content: space-around
}

.naskroty .row-items:not(:first-child){margin-top: 20px}

.naskroty .blockBox > *{margin-bottom: 0}
.naskroty .blockBox{
  border-radius: 10px!important;
  flex-direction: row
}

.naskroty .blockBox > i{
  font-size: 30px;
  margin-right: 10px
}

.naskroty .blockBox > h1{ font-size: 16px }

.naskroty a.btn > i{
  font-size: 31px;
  margin-right: 10px
}

.naskroty a > *{text-shadow: 0 0 4px rgba(0,0,0,.3)}

.squareBoxes{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.squareBoxes > .boxBlueBg{
  flex: 0 0 49%;
  position: relative;
}

.squareBoxes .grayBox .playBtn{
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shadow-pulse 1s infinite
}

.squareBoxes .grayBox .playBtn i{
  font-size: 40px;
  text-shadow: 0 0 24px rgba(0,0,0,.2)
}

.star{
  display: flex;
  align-items: center;
  justify-content: center
}

.star > i{
  font-size: 19px;
  color: #FBB03B
}

.squareBoxes .grayBox .levelModule{
  display: inline-flex;
  align-items: center
}

.heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 1s;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.5)
}

.heading:hover{background: #8E78FF}

.heading > *{
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.345)
}

.heading i{font-size: 35px}

.heading h1{
  font-size: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}


.topics{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.topics > .teamBox{
  flex: 0 0 49%;
  position: relative;
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.5)
}

.topics > .teamBox:nth-child(n+3){margin-top: 40px}


.blockBox{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background: rgba(0,0,0,.8);
  border-radius: 15px 15px 5px 5px
}

.blockBox h1{
  color: #fff;
  font-weight: 900;
  font-size: 25px;
  margin-bottom: 30px
}

.blockBox p{font-weight: 900}

.blockBox i{
  color: #fff;
  font-size: 60px;
  margin-bottom: 10px
}


.fullWidth .generalBox{
  display: flex;
  justify-content: center;
  flex-direction: column
}

.fullWidth .playBtn{box-shadow: inset 0 0 57px 0 rgba(0,0,0,.2)}
.fullWidth .playBtn span > i{font-size: 32px}

.fullWidth .playBtn span{
  animation: shadow-pulse 1s infinite;
  box-shadow: inset 0 0 12px 0 rgba(0,0,0,.1)
}

.fullWidth .grayBox, .fullWidth .grayBox > div{
  display: flex;
  align-items: center;
  justify-content: space-between
}

.fullWidth .generalBox .floatLeft > *{text-shadow: 0 0 24px rgba(0,0,0,.1)}

.purpleBox a > i{
  font-size: 58px;
  transition: 1s
}

.purpleBox a:hover > i, .cardContainer .face.back .rating .active{color: #FBB03B}
.cardContainer .face.back .rating .unactive{color: #f95959}


.ekran-gry .punkty > div{
  display: flex;
  align-items: center
}

.ekran-gry .punkty > div > *{
  color: #fff;
  font-weight: 900;
  font-size: 22px
}

.ekran-gry .punkty span{margin-left: 10px}


.slider-level{margin-bottom: 40px}

.cardContainer .face.front{
  box-shadow: 0 11px 16px -2px rgba(0,0,0,.3);
  border-radius: 30px;
  font-size: 0;
  width: 213px;
  height: 327px
}

.cardContainer .face.front > div{
  height: 100%;
  width: 100%;
  border-radius: 30px;
  border: 10px solid #fff;
  background: #c40b13;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 24px 0 rgba(0,0,0,.3)
}

.cardContainer .face.front > div > i{
  color: #fff;
  font-size: 57px;
  background: rgba(0,0,0,.2);
  padding: 20px 25px;
  border-radius: 100%;
  box-shadow: inset 0 0 24px 0 rgba(0,0,0,.2);
  text-shadow: 0 0 4px rgba(0,0,0,.15)
}

.cardContainer .face.back .rating i{
  font-size: 37px;
  color: #2B244D
}

.cardContainer .face.back .rating i:nth-child(even){font-size: 50px}

.pulseCard{animation: pulse-card 1s infinite;}
div.panel{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  font-size: 0;
  transition: 1s;
  width: 213px;
  height: 327px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cardContainer .panel-hover{cursor: pointer}
.cardContainer .panel-hover:hover{box-shadow: 0 0 32px 0 rgba(251, 176, 59, .7)}

.coverCard{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center
}

.coverCard > button{
  outline: none;
  background: #FBB03B;
  padding: 11px 23px;
  border-radius: 30px;
  border: 5px solid #FBB03B;
  box-shadow: inset 0 0 12px 0 rgba(0,0,0,.2), 0 0 24px 0 rgba(0,0,0,.7);
  cursor: pointer;
}

.coverCard:hover button{
  -webkit-animation: tada 1s;
  animation: tada 1s;
}

.coverCard > button > span{
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 7px rgba(0,0,0,.25);
  text-transform: uppercase
}



@keyframes pulse-card
{
  0% {
      box-shadow: 0 0 0 0px rgba(251, 176, 59, .4);
  }
  100% {
      box-shadow: 0 0 0 25px rgba(251, 176, 59, 0);
  }
}

@keyframes shadow-pulse
{
  0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
      box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
  }
}


.fullWidth .grayBox span:first-child{font-size: 15px}


/* QUESTION POPUP */
#dialog-modal, #dialog-message{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0
}

.question-popup, .popup-wrapper, .preloader{
  background: rgba(0,0,0,.7);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  min-height: 100%;
  z-index: 10000;
  display: none
}

.question-popup .close{
  z-index: 10;
  margin-bottom: 30px;
  text-align: right
}

.modal .topModalBg{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1070px;
  margin: 45px auto 0
}

.modal .topModalBg > .modalBg{width: 100%}

.modalBg .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 30px 30px 0
}

.modal .topModalBg > .modalBg p{padding: 0 30px 30px}
.modal .topModalBg .lady-icon{margin-left: 40px}

.modal .topModalBg .errorAnswer{
  padding: 20px 30px;
  background: #f95959;
  text-align: center;
  display: none
}

.modal .topModalBg .errorAnswer > span{
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(0,0,0,.1)
}


/* POPUP */
.popup-wrapper{
  z-index: 100000;
  padding: 20px
}

.popup-wrapper > .popup{
  margin: 60px auto 0;
  text-align: center;
  width: fit-content;
  border-radius: 65px;
  padding: 10px;
  background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%)
}


.popup-wrapper .content{
  border: 20px solid #fff;
  border-radius: 65px;
  padding: 20px 30px
}

.popup-wrapper .content h1{
  font-weight: 900;
  color: #fff;
  font-size: 17px;
  text-shadow: 0 0 7px rgba(0,0,0,.1)
}

.message-popup{
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1000;
  display: none
}

.message-popup .box, .form-complaint{
  background: #fff;
  overflow: hidden;
  margin: 10px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  border-radius: 5px;
  box-shadow: 0 0 24px 0 rgba(0,0,0,.4)
}

.message-popup .box i, .form-complaint > i{font-size: 60px}

.message-popup .box .info-section{
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  padding: 10px;
  margin: 15px 0;
  background: #fafafa
}

.message-popup .box > .info-section > span{font-style: italic}

.message-popup i.success{color: #09DC7F}
.message-popup button.success, .error-logout > .repeat{
  background: #09DC7F;
  border-color: #09DC7F
}

.message-popup i.danger, .form-complaint > i, .message-popup .box .btn-complaint span{color: #f95959}
.message-popup button.danger, .error-logout > .home-page, .form-complaint button{
  background: #f95959;
  border-color: #f95959
}


.message-popup i.info{color: #6AB9FF}
.message-popup button.info{
  background: #6AB9FF;
  border-color: #6AB9FF
}

.message-popup .box h1, .form-complaint > h1{
  font-weight: 900;
  font-size: 18px;
  color: #444;
  margin: 5px 0 25px
}

.message-popup .box .btn-section > button, .error-logout > a, .form-complaint button{
  outline: none;
  cursor: pointer;
  padding: 11px 23px;
  border-radius: 30px;
  border: 5px solid transparent;
  box-shadow: inset 0 0 7px 0 rgba(0,0,0,.1);
}

.message-popup .box .btn-section > button:hover > span, .form-complaint button:hover > span, .message-popup .box .btn-complaint button:hover > span{
  text-decoration: underline
}

.message-popup .box .btn-section > button > span, .error-logout > a > span, .form-complaint button > span{
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,0,0,.05);
  text-transform: uppercase;
}

.message-popup .box .btn-popup-second{margin-left: 15px}

.message-popup .box .btn-complaint{margin-top: 15px}
.message-popup .box .btn-complaint button{
  border: none;
  background: none;
  cursor: pointer;
}

@media screen and (max-width: 1360px){
  .fullWidth .generalBox h2{
    font-size: 30px
  }
}


@media screen and (max-width: 1220px){
  .profileDetail, .username{font-size:25px!important}
  .naskroty a{width: 315px}
  .naskroty a > i{font-size: 20px}
  .naskroty a > span{font-size: 15px}
}

@media screen and (max-width: 1024px){
  .headerImg img{border-radius: 0}

  .naskroty .row-items{flex-direction: column}
  .naskroty .row-items:not(:first-child){margin-top: 0}
  .naskroty .row-items > div{margin-top: 20px}

  .naskroty a{width: 100%}

  .squareBoxes > .boxBlueBg{flex: 0 0 100%}
  .star > i{font-size: 15px}

  .userProfile .welcomeText{
    height: auto;
    max-height: 235px
  }

  .modal .topModalBg .lady-icon{display: none}
  .modalBg .top{padding: 20px 20px 0}
  .modal .topModalBg > .modalBg p{padding: 20px}
  .modal .topModalBg .errorAnswer{padding: 15px 20px}

  .heading h1{font-size: 18px}
  .purpleBox a > i{font-size: 45px}

  .topics > .teamBox{flex: 0 0 100%}

  .fullWidth .teamBox:first-child{margin-top: 20px}
  .fullWidth .teamBox:not(:first-child){margin-top: 40px}

  .cardContainer{
    float: none;
    margin: 0 auto
  }

  .ekran-gry .purpleBox.cardsBoxes .blockBox > i{margin-top: 50px}

  .ranking{padding: 20px!important}
}

@media screen and (max-width: 650px) {
  .topics .new-box{
    top: -5px!important;
    right: -5px!important
  }

  .ekran-gry .punkty{flex-direction: column}
  .ekran-gry .punkty > div > *{font-size: 16px}
  .ekran-gry .punkty > div {
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
  }
}


/* ERRORS */
.ErrorContainer{
  display: flex;
  align-items: center;
  height: 100%
}


.error-logout{
  text-align: center;
  margin: 0 auto;
  margin-top: 70px
}

.error-logout h1, .error-logout p{color: #fff}

.error-logout h1{
  font-size: 41px;
  font-weight: 900
}

.error-logout p{
  font-size: 15px;
  font-weight: bold;
}

.error-logout a{display: inline-block}
.error-logout a:hover > span{text-decoration: underline}

.error-logout .repeat{margin-top: 25px}
.error-logout .home-page{margin-top: 15px}

.preloader{
  align-items: center;
  justify-content: center;
  flex-direction: column
}

.preloader > span{
  color: #fff;
  font-weight: 900;
  margin-top: 15px;
}


.blockPage{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  text-align: center
}

.blockPage header, .blockPage > div{margin-bottom: 100px}

.blockPage > *{
  color: #fff;
  font-weight: 900
}

.blockPage > div{
  margin-top: 20px;
  font-size: 20px
}


.new-box{
  position: absolute;
  top: 10px;
  right: 10px;
  background: #B90707;
  padding: 8px 20px 8px 20px;
  border-radius: 40px;
  box-shadow: 0 0 12px 0 rgba(0,0,0,.2);
  font-size: 0;
  z-index: 10
}

.new-box > span{
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(0,0,0,.2);
  text-transform: uppercase
}


.progress-bar{
  width: 0;
  overflow: hidden;
  position: relative
}

.progress-bar:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  overflow: hidden;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.info-box{
  width: 100%;
  padding: 20px 0;
  background: rgba(196, 172, 255, .9);
  border-radius: 5px;
  z-index: 1000;
  text-align: center
}

.info-box span{
  color:#fff;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(0,0,0,.1)
}


/*--------------------------------------------------------------
USERS RANKING
--------------------------------------------------------------*/
.ranking .title{
  padding: 12px 30px;
  background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%);
  display: inline-block;
  border-radius: 5px
}

.ranking .title h1{
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,.15)
}

/* FILTERS */
.filters{
  margin-top: 30px;
  display: flex
}

.filters div:not(:first-child){margin-left: 20px}
.filters select{
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background-image: none;
}

.filters .select {
  position: relative;
  display: block;
  width: 14em;
  height: 3em;
  line-height: 3;
  overflow: hidden;
  border-radius: 5px
}

.filters select {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  color: #fff;
  font: 700 16px 'Lato';
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
}

.filters select::-ms-expand {display: none}
.filters select option{background: #2B244D}

.filters .select::after {
  content: '\F140';
  font: normal normal normal 30px 'Material Design Icons';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: #fff
}

.filters .select:hover::after {color: #2B244D}
.filters .select::after {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}

.filters .btn{height: 3em}
.filters .btn button{
  height: 100%;
  outline: none;
  border: none;
  cursor: pointer;
  background: #6AB9FF;
  border-radius: 5px;
  border: 5px solid #6AB9FF;
  box-shadow: inset 0 0 24px 0 rgba(0,0,0,.15);
  transition: 1s
}

.filters .btn button:hover, .filters .btn button:focus{
  background: #379ffc;
  border-color: #379ffc
}

.filters .btn button span{
  font: 900 16px 'Lato';
  color:#fff;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(0,0,0,.1);
  padding: 0 15px
}


/* TABLE */
.ranking .table{
  max-width: 100%;
  overflow: hidden;
}

.ranking table{
  width: 100%;
  min-width: 800px;
  text-align: left;
  margin-top: 30px;
  border-collapse:separate;
  border-spacing: 0 1em
}

.ranking tr{box-shadow: 0 0 12px 0 rgba(0,0,0,.3)}

.ranking thead{background: rgba(196, 172, 255, 0.24)}
.ranking thead th{padding: 15px 10px!important}

.ranking thead th, .ranking tbody td{
  padding: 10px;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 0 4px rgba(0,0,0,.15)
}

.ranking tbody tr:not(.clear){background-image: linear-gradient(to right, #09DC7F 0%, #04B397 100%)}
.ranking tbody tr:first-child, .ranking tbody tr:nth-child(2), .ranking tbody tr:nth-child(3){background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%)}

.ranking .clear{box-shadow: none}

.ranking .me{background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important}
.ranking .mdi-account-circle{margin-right: 10px}

@media screen and (max-width: 680px){
  .filters{flex-direction: column}
  .filters div:not(:first-child){margin: 20px 0 0 0}
}


/*--------------------------------------------------------------
COMPLAINT FORM
--------------------------------------------------------------*/
#complaint-container{
  height: 100%;
  width: fit-content;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10001;
  display: none;
  max-height: calc(100% - 100px);
  overflow-y: auto
}

.form-complaint{ max-width: 500px }

.form-complaint .fieldrow{
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 15px
}

.form-complaint .fieldrow > label{margin-bottom: 5px}
.form-complaint .fieldrow > label > span{font-size: 14px}
.form-complaint .fieldrow textarea{
  resize: none;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  background: #fafafa;
  border-radius: 3px;
  padding: 10px;
  font: normal 14px 'Lato'
}

.form-complaint .btnrow{
  display: flex;
  justify-content: center;
  margin-top: 20px
}

.form-complaint .input-upload{
  width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.form-complaint .input-upload + label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 10px 15px 10px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
}

.form-complaint .input-upload + label > span{margin-left: 10px}

.form-complaint .input-upload:focus + label, .form-complaint .input-upload + label:hover { background-color: #f2f2f2 }
.form-complaint .input-upload + label { cursor: pointer }

@media screen and (max-width:991px){
  .complaint-container{max-height: 500px}
  .form-complaint{max-width: 100%}
}