.modal {
  background-color:#262329;
  border-radius:20px;
  min-width:400px;
  max-width: 400px;
  overflow:hidden;
  position:relative
}
.modal:before {
  background:linear-gradient(180deg,#28262c,#262329);
  content:"";
  height:230px;
  left:0;
  position:absolute;
  top:88px;
  width:100%
}
@media(max-width:599px) {
  .modal:before {
    top:70px
  }
}
@media(max-width:599px) {
  .modal {
    border-radius:10px;
    min-width:100%;
    top: -70px;
  }
}
.modal--open {
  overflow:hidden
}
.modal__overlay {
  background-color:rgba(33,33,40,.72);
  border-radius:2px;
  inset:0;
  justify-content:center;
  position:fixed;
  z-index:1000
}
.modal__overlay,
.modal__top {
  align-items:center;
  display:flex
}
.modal__top {
  height:88px;
  padding:0 0 0 36px;
  width:100%
}
@media(max-width:599px) {
  .modal__top {
    height:70px;
    padding:0 0 0 15px
  }
}
.modal__title {
  -webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#937e82,#fff8f3);
  -webkit-background-clip:text;
  background-clip:text;
  font-size:20px;
  font-weight:400;
  letter-spacing:.03em;
  line-height:24px;
  text-transform:uppercase
}
@media(max-width:599px) {
  .modal__title {
    font-size:16px;
    line-height:20px;
    padding:0 20px 0 0
  }
}
.modal__close {
  cursor:pointer;
  height:34px;
  margin:0 30px 0 auto;
  width:34px
}
.modal__close path {
  transition:fill .3s ease
}
.modal__close:hover path {
  fill:#b0aeaf
}
@media(max-width:599px) {
  .modal__close {
    margin:0 15px 0 auto
  }
  .modal__close-icon {
    height:28px;
    width:28px
  }
}
.modal__top-desc {
  color:#89898f;
  padding:25px 0;
  text-align:center
}
.modal__loading {
  margin-bottom:-5px;
  overflow:hidden
}
.ReactModal__Overlay {
  opacity:0
}
.ReactModal__Overlay--after-open {
  opacity:1;
  transition:opacity .3s
}
.ReactModal__Overlay--before-close {
  opacity:0
}
.ReactModal__Content {
  opacity:0;
  position:relative
}
.ReactModal__Content--after-open {
  opacity:1;
  transition:opacity .3s
}
.ReactModal__Content--before-close {
  opacity:0
}
.everyday {
  padding:30px;
  width:100%;
}
@media(max-width:1200px) {
  .everyday {
    padding:15px;
  }
}
@media(max-width:599px) {
  .everyday {
    padding:12px;
    width:100%
  }
}
.everyday__warning {
  background:linear-gradient(90deg,#482836,#2d2d36);
  box-shadow:0 5px 46px rgba(0,0,0,.2);
  color:#fbd9e1;
  font-size:13px;
  margin:0 0 15px;
  padding:13px 26px;
  text-align:center;
  text-shadow:0 0 13px rgba(229,0,55,.43)
}
.everyday__header {
  display:flex;
  margin:0 -10px
}
@media(max-width:599px) {
  .everyday__header {
    flex-wrap:wrap
  }
}
.everyday__header-block {
  flex-shrink:0;
  margin:0 0 15px;
  padding:0 10px;
  width:100%;
}
@media(max-width:599px) {
  .everyday__header-block {
    margin-bottom:10px;
    width:100%;
  }
}
.everyday__block {
  align-items:center;
  background:#1e1a20;
  border-radius:14px;
  display:flex;
  justify-content:center;
  overflow:hidden;
  padding:30px 24px 24px;
  position:relative
}
.everyday__block-content {
  display:flex;
  flex-direction:column;
  height:100%;
  position:relative;
  width:100%;
  z-index:1
}
@media(max-width:599px) {
  .everyday__block-content {
    width:100%
  }
}
.everyday__level {
  align-items:center;
  background:#2e231a;
  border:2px solid #ffb374;
  border-radius:100%;
  box-shadow:0 0 50px 10px rgba(255,152,66,.2);
  color:#ffb374;
  display:flex;
  flex-shrink:0;
  font-size:33px;
  font-weight:800;
  height:80px;
  justify-content:center;
  margin:0 auto 25px;
  overflow:hidden;
  width:80px
}
@media(max-width:900px) {
  .everyday__level {
    font-size:19px;
    height:70px;
    width:70px
  }
}
@media(max-width:599px) {
  .everyday__level {
    font-size:16px;
    height:55px;
    width:55px
  }
}
.everyday__xp-header {
  color:#eadfe4;
  display:flex;
  font-size:14px;
  justify-content:space-between;
  margin-bottom:8px
}
@media(max-width:1200px) {
  .everyday__xp-header {
    font-size:12px
  }
}
@media(max-width:900px) {
  .everyday__xp-header {
    font-size:11px
  }
}
.everyday__xp-progress-bar {
  background:#2d2730;
  border-radius:4px;
  height:15px;
  margin-bottom:12px;
  overflow:hidden
}
@media(max-width:900px) {
  .everyday__xp-progress-bar {
    margin-bottom:10px
  }
}
.everyday__xp-progress {
  background:linear-gradient(90deg,#5553c6,#a167ce);
  border-radius:4px;
  height:15px;
  width:0
}
.everyday__block-desc {
  color:#3f3c3c;
  font-size:9px;
  line-height:15px;
  text-align:center
}
@media(max-width:1200px) {
  .everyday__block-desc {
    font-size:12px
  }
}
@media(max-width:900px) {
  .everyday__block-desc {
    font-size:9px
  }
}
.everyday__yellow {
  color:#ffb374
}
.everyday__orange {
  color:#ff8660
}
.everyday__bonus-title {
  color:#ff7360;
  font-size:15px;
  line-height:18px;
  margin-bottom:13px;
  text-align:center;
  text-transform:uppercase
}
@media(max-width:1200px) {
  .everyday__bonus-title {
    font-size:13px
  }
}
@media(max-width:900px) {
  .everyday__bonus-title {
    font-size:12px
  }
}
.everyday__bonus-val {
  background:#ffb374;
  border-radius:10px;
  color:#5e3c1e;
  display:inline-block;
  font-size:30px;
  font-weight:900;
  margin:0 auto 10px;
  padding:10px 20px
}
@media(max-width:1200px) {
  .everyday__bonus-val {
    border-radius:6px;
    font-size:16px
  }
}
@media(max-width:900px) {
  .everyday__bonus-val {
    border-radius:4px;
    font-size:14px;
    padding:10px 18px
  }
}
.everyday__bonus-currency {
  font-size:22px;
  font-weight:700;
  margin:0 0 0 5px
}
@media(max-width:1200px) {
  .everyday__bonus-currency {
    font-size:16px
  }
}
@media(max-width:900px) {
  .everyday__bonus-currency {
    font-size:14px
  }
}
.everyday__btn {
  background:#2d2830;
  border-radius:10px;
  color:#ffb374;
  display:block;
  font-size:15px;
  font-weight:800;
  margin:0 auto 10px;
  max-width:216px;
  padding:15px 35px;
  position:relative;
  text-transform:uppercase;
  transition:color .3s ease,background-color .3s ease;
  width: 100%;
  text-align: center;
}

.everyday__btn:hover {
  background:#362e28;
  color:#ffb374
}
.everyday__spinner-wrapper {
  align-items:center;
  display:flex;
  height:46px;
  justify-content:center;
  overflow:hidden
}
@media(max-width:599px) {
  .everyday__spinner-wrapper {
    height:37px
  }
}
.everyday__fivefold {
  display:flex
}
.everyday__fivefold-left {
  align-items:center;
  background:#362e28;
  border-radius:14px 5px 5px 14px;
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  justify-content:center;
  overflow:hidden;
  text-align:center;
  width:150px
}
@media(max-width:900px) {
  .everyday__fivefold-left {
    width:120px
  }
}
@media(max-width:599px) {
  .everyday__fivefold-left {
    display:none
  }
}
.everyday__fivefold-right {
  background:#2e2a30;
  border-radius:5px 14px 14px 5px;
  margin:0 0 0 auto;
  padding:20px 25px;
  width:calc(100% - 152px)
}
@media(max-width:900px) {
  .everyday__fivefold-right {
    width:calc(100% - 122px)
  }
}
@media(max-width:599px) {
  .everyday__fivefold-right {
    border-radius:14px;
    padding:18px 15px;
    text-align:center;
    width:100%
  }
}
.everyday__fivefold-val {
  color:#ffb374;
  font-size:60px;
  font-weight:900;
  line-height:64px;
  text-shadow:0 0 50px #ff9842
}
@media(max-width:900px) {
  .everyday__fivefold-val {
    font-size:30px
  }
}
.everyday__fivefold-desc {
  color:#ff7f6d;
  font-size:14px;
  line-height:17px;
  text-transform:uppercase
}
@media(max-width:900px) {
  .everyday__fivefold-desc {
    font-size:12px
  }
}
.everyday__fivefold-content {
  color:#cbbbbf;
  font-size:13px;
  font-weight:500;
  line-height:19px;
  margin-bottom:10px
}
@media(max-width:1200px) {
  .everyday__fivefold-content {
    font-size:11px;
    line-height:13px;
    margin-bottom:7px
  }
}
.everyday__scale-desc {
  color:#ff7360;
  font-size:11px;
  font-weight:500;
  line-height:13px;
  margin-bottom:14px;
  text-transform:uppercase
}
@media(max-width:1200px) {
  .everyday__scale-desc {
    font-size:12px
  }
}
@media(max-width:900px) {
  .everyday__scale-desc {
    font-size:11px;
    margin-bottom:10px
  }
}
.everyday__scale-content {
  background:#262128;
  border-radius:7px;
  overflow:hidden;
  position:relative
}
@media(max-width:599px) {
  .everyday__scale-content {
    border-radius:5px
  }
}
.everyday__scale-list {
  display:flex;
  position:relative;
  z-index:1
}
.everyday__scale-item {
  color:#4f4455;
  flex-shrink:0;
  font-size:12px;
  height:34px;
  line-height:34px;
  text-align:center;
  width:10%
}
@media(max-width:599px) {
  .everyday__scale-item {
    font-size:12px
  }
}
.everyday__scale-item--checked {
  background:#37323c;
  color:#ff7360
}
.everyday__scale-item+.everyday__scale-item {
  border-left:1px solid #2e2a30
}
.everyday__success {
  align-items:center;
  color:#cbbbbf;
  display:flex;
  flex-direction:column;
  font-size:13px;
  height:100%;
  justify-content:center;
  text-transform:uppercase
}
@media(max-width:900px) {
  .everyday__success {
    font-size:12px
  }
}
@media(max-width:599px) {
  .everyday__success {
    font-size:11px
  }
}
.everyday__success-bonus {
  color:#ffb374;
  font-size:40px;
  font-weight:900;
  text-transform:uppercase
}
@media(max-width:900px) {
  .everyday__success-bonus {
    font-size:35px
  }
}
@media(max-width:599px) {
  .everyday__success-bonus {
    font-size:25px
  }
}