@import "swiper.css";

/* Light Colors */
.theme-light {
  --background: #fff;
  --color: #616161;
  --color-darker: #737373;
  --shadow-color: rgba(0, 0, 0, 0.14);
  --accent: #3B8562;
  --progress-color: #E3E3E3;
  --tap-background: rgba(255, 255, 255, .5);
  --star-color: #898989;
  --black-white: #212121;
  --c-gray1: #616161;
  --c-gray2: #737373;
}

/* Dark Colors */
.theme-dark,
.theme-dark * {
  --background: #000;
  --color: #fff;
  --color-darker: #A1A1A2;
  --shadow-color: rgba(250, 250, 250, 0.14);
  --accent: #3B8562;
  --progress-color: #4C4C4C;
  --tap-background: rgba(0, 0, 0, .5);
  --star-color: #3B8562;
  --black-white: #fff;
  --c-gray1: #fff;
  --c-gray2: #A1A1A2;
}

/* Persisted constructor styles may use !important, so adaptive foregrounds need a stronger scope. */
body[data-match-theme].theme-light #main-container .app-comp .main-header .header__info-title,
body[data-match-theme].theme-dark #main-container .app-comp .main-header .header__info-title {
  color: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .main-header .header__ad-status,
body[data-match-theme].theme-dark #main-container .app-comp .main-header .header__ad-status {
  color: var(--color-darker) !important;
}

/* Keep the app icon at the size defined by its Header variant when the title wraps. */
#main-container .app-comp .main-header .header__logo {
  flex-shrink: 0;
}

/* Unique header 16 originally used position:relative; GrapesJS can restore that
   from saved CSS and pin the banner under Navigation instead of overlaying .app-comp. */
#main-container .app-comp .header.version-16.main-header {
  position: static !important;
}

#main-container .app-comp .header.version-16.main-header .header-preview {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info .info__item .info__item-top span,
body[data-match-theme].theme-dark #main-container .app-comp .info .info__item .info__item-top span {
  color: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info .info__item .info__item-top .stroke-color,
body[data-match-theme].theme-dark #main-container .app-comp .info .info__item .info__item-top .stroke-color {
  stroke: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info .info__item.is--age .info__item-top,
body[data-match-theme].theme-dark #main-container .app-comp .info .info__item.is--age .info__item-top {
  border-color: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info .info__item .info__item-bottom span,
body[data-match-theme].theme-dark #main-container .app-comp .info .info__item .info__item-bottom span {
  color: var(--color-darker) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info .info__item .info__item-bottom .stroke-color,
body[data-match-theme].theme-dark #main-container .app-comp .info .info__item .info__item-bottom .stroke-color {
  stroke: var(--color-darker) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .info.version-11 .info__item-bottom .info-version-11__span-1,
body[data-match-theme].theme-light #main-container .app-comp .info.version-11 .info__item-bottom .info-version-11__span-3,
body[data-match-theme].theme-dark #main-container .app-comp .info.version-11 .info__item-bottom .info-version-11__span-1,
body[data-match-theme].theme-dark #main-container .app-comp .info.version-11 .info__item-bottom .info-version-11__span-3 {
  color: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .charts .charts__header,
body[data-match-theme].theme-dark #main-container .app-comp .charts .charts__header,
body[data-match-theme].theme-light #main-container .app-comp .charts:is(.version-16, .version-17, .version-18, .version-19, .version-20) .score__number,
body[data-match-theme].theme-dark #main-container .app-comp .charts:is(.version-16, .version-17, .version-18, .version-19, .version-20) .score__number,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__header,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__header,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__contact-label,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__contact-label,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__stat-value,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__stat-value,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__label,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__label,
body[data-match-theme].theme-light #main-container .app-comp .updates .updates__label,
body[data-match-theme].theme-dark #main-container .app-comp .updates .updates__label {
  color: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .charts .score__ratings,
body[data-match-theme].theme-dark #main-container .app-comp .charts .score__ratings,
body[data-match-theme].theme-light #main-container .app-comp .charts .score__meta,
body[data-match-theme].theme-dark #main-container .app-comp .charts .score__meta,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__contact-value,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__contact-value,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__stat-label,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__stat-label,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__value,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__value,
body[data-match-theme].theme-light #main-container .app-comp .updates .updates__content,
body[data-match-theme].theme-dark #main-container .app-comp .updates .updates__content,
body[data-match-theme].theme-light #main-container .app-comp .updates .updates__value,
body[data-match-theme].theme-dark #main-container .app-comp .updates .updates__value,
body[data-match-theme].theme-light #main-container .app-comp .updates .updates__category,
body[data-match-theme].theme-dark #main-container .app-comp .updates .updates__category {
  color: var(--color-darker) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .footer .footer__header svg .stroke-color,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__header svg .stroke-color {
  stroke: var(--black-white) !important;
}

body[data-match-theme].theme-light #main-container .app-comp .footer .footer__row svg .stroke-color,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__row svg .stroke-color,
body[data-match-theme].theme-light #main-container .app-comp .footer .footer__contact-icon svg .stroke-color,
body[data-match-theme].theme-dark #main-container .app-comp .footer .footer__contact-icon svg .stroke-color {
  stroke: var(--color-darker) !important;
}

* {
  --c-grean: #00a173;
  --background: #fff;
  --color: #616161;
  --color-darker: #737373;
  --shadow-color: rgba(0, 0, 0, 0.14);
  --accent: #3B8562;
  --progress-color: #E3E3E3;
  --tap-background: rgba(255, 255, 255, .5);
  --star-color: #898989;
  --black-white: #212121;
  -webkit-tap-highlight-color: transparent;
}

body, html {
  background-color: var(--background);
  color: var(--color);
  height: 100vh;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.d-flex {
  display: flex;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}

.clearfix:after, .clearfix:before {
  content: " ";
  display: table
}

.clearfix:after {
  clear: both
}

.article p {
  margin: 15px 0 !important
}

blockquote, body, dd, div, dl, dt, embed, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, li, object, ol, p, pre, select, table, td, th, ul, ul li ol, ul li ol li, ul li ul, ul li ul li {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

abbr, fieldset, img {
  border: none
}

address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {
  font-weight: 400;
  font-style: normal
}

a, ins {
  text-decoration: none
}

ul {
  list-style: outside none none
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px
}

a {
  text-decoration: underline
}

a, a:active, a:link {
  color: inherit;
}

a:hover {
  cursor: pointer
}


h1 {
  font-size: 28px;
  margin: 0 0 20px
}

blockquote {
  padding: 20px
}

.content img {
  max-width: 100%
}

.click-none {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

#main-container.is-not-pwa {
  overflow: hidden
}

#main-container.is-not-pwa,
#main-container,
body {
  font-family: 'Roboto', sans-serif;
}

.theme-dark #main-container.is-not-pwa {
  background-color: var(--background);
}

main {
  font-size: 18px
}

.loading {
  display: none
}

.hide {
  display: none
}

.app-comp {
  position: relative;
  width: 100%;
  max-width: 991px;
  margin: 0 auto;
}