/* PORTAL CUSTOM CSS */
#puzzle-portal .portal-main h1, .portal-main h2 { 
  font-family: "Morion", Georgia, serif!important;
}

#puzzle-portal .portal-main {
  font-family: "Roboto", sans-serif!important;
}

#puzzle-portal .portal-main .game-card__button-play {
  font-family: "Roboto", sans-serif!important;
}

#puzzle-portal .portal-main .featured-games {
  background-color: #fff; /* Featured games - mobile background */
}

#puzzle-portal .portal-main .featured-games .game-card {
  background-color: #ededed; /* Featured games - card background */
}

#puzzle-portal .portal-main .highlighted-games {
  background-color: #fff; /* Highlighted games - mobile background */
}

#puzzle-portal .portal-main .highlighted-games .game-card {
  background-color: #ededed; /* Highlighted games - card background */
}

#puzzle-portal .portal-main .main-games {
  background-color: #fff; /* Main games - mobile background */
}

#puzzle-portal .portal-main .main-games .game-card {
  background-color: #fff; /* Main games - card background */
}

#puzzle-portal .portal-main .game-card__button-play {
  background-color: #000; /* Color 4 */
  color: #fff; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .game-card--disabled .game-card__button-play {
  background-color: #ffa100; /* Color 1 */
  color: #191717; /* Color 1 - inner (fonts etc)*/
}

#puzzle-portal .portal-main .archive-game-type-panel {
  background-color: #ededed; /* Archive - panels/cards background */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected {
  background-color: #000; /* Color 4 */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected svg {
  fill: #fff; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .archive-game-type-panel--selected h3 {
  color: #fff; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .archive-game-card__button-play {
  background-color: #000; /* Color 4 */
  color: #fff; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .portal-main .game-card__new {
  color: #ffa100; /* Color 1 */
}

#puzzle-portal .portal-main .archive-game-card {
  background-color: #ededed; /* Archive - panels/cards background */
}

#puzzle-portal .portal-main .player .player__close {
  color: #000; /* Color 4 */
}

#puzzle-portal .portal-main .player .player__close:visited {
  color: #000; /* Color 4 */
}

@media screen and (min-width: 750px) {
  #puzzle-portal .portal-main .featured-games {
    background-color: #fff; /* Featured games - desktop full width background */
  }

  #puzzle-portal .portal-main .featured-games .game-section-inner {
    background-color: transparent; /* Featured games - desktop inner background */
  }

  #puzzle-portal .portal-main .highlighted-games {
    background-color: #fff; /* Highlighted games - desktop full width background */
  }

  #puzzle-portal .portal-main .highlighted-games .game-section-inner {
    background-color: transparent; /* Highlighted games - desktop inner background */
  }

  #puzzle-portal .portal-main .main-games {
    background-color: #f8f8f8; /* Main games - desktop full width background */
  }

  #puzzle-portal .portal-main .main-games .game-section-inner {
    background-color: #f8f8f8; /* Main games - desktop inner background */
  }

  #puzzle-portal .portal-main .archive-menu {
    background-color: #ededed; /* Archive - panels/cards background */
  }

  #puzzle-portal .portal-main .archive-menu__item--selected {
    background-color: #000; /* Color 4 */
    color: #fff; /* Color 4 - inner (fonts etc) */
  }

  #puzzle-portal .portal-main .archive-game-type-panel--selected {
    background-color: #ededed; /* Archive - panels/cards background */
  }

  #puzzle-portal .portal-main .archive-game-type-panel--selected h3 {
    color: #191717;
  }
}

/* PLAYER CUSTOM CSS */

/* Modal buttons */
#puzzle-portal .player .button {
  background-color: #000; /* Color 4 */
  color: #fff; /* Color 4 - inner (fonts etc) */
}

#puzzle-portal .player .modal__actions .modal__button--link {
  background-color: transparent; 
  color: #222; 
}

/* Carousel bar - Clue bar will be deprecated. */
#puzzle-portal .player .clue-bar {
  background-color: #ff8d00; /* Color 2 */
}

#puzzle-portal .player .clue-bar__nav svg {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .clue-bar__selected-clue {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .carousel-bar {
  background-color: #ff8d00; /* Color 2 */
}

#puzzle-portal .player .carousel-bar__nav svg {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .carousel-bar__text {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

/* Action bar */
#puzzle-portal .player .action-bar {
  background-color: #ededed; /* Action bar background */
}

#puzzle-portal .player.desktop .action-bar {
  background-color: transparent;
}

#puzzle-portal .player .action-bar__button svg {
  fill: #000; /* Color 3 */
}

/* Grid cells */
#puzzle-portal .player .grid-cell.grid-cell--selected .grid-cell__rectangle {
  fill: #ff8d00; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--in-selected-clue .grid-cell__rectangle {
  fill: #faddbf; /* Color 2 at 50% */
}

#puzzle-portal .player .grid-cell.grid-cell--in-selected-category:not(.grid-cell--initial) .grid-cell__rectangle {
  fill: #faddbf; /* Color 2 at 50% */
}

#puzzle-portal .player .grid-cell--selected .grid-cell__text {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .grid-cell--selected .grid-cell__label {
  fill: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .grid-cell__note {
  fill: #ff8d00; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--selected .grid-cell__note {
  fill: #fff;
}

#puzzle-portal .sudoku .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #ff8d00; /* Color 2 */
}

#puzzle-portal .sudoku .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #ff8d00; /* Color 2 */
}

#puzzle-portal .player .grid-cell.grid-cell--revealed .grid-cell__visual-feedback {
  fill: #ee9000;
}

#puzzle-portal .player .grid-cell.grid-cell--incorrect .grid-cell__visual-feedback {
  fill: #f23c39;
}

#puzzle-portal .player .grid-cell.grid-cell--correct .grid-cell__visual-feedback {
  fill: #28c301;
}

/* Clues */
#puzzle-portal .player .clues__item--selected {
  background-color: #ff8d00; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .clues__item--selected-opposite .clues__item-label span {
  background-color: #faddbf; /* Color 2 at 50% */
}

/* Result word */
#puzzle-portal .player .result-word__cell--with-active-result-word {
  background-color: #faddbf; /* Color 2 at 50% */
}

#puzzle-portal .player .result-word__cell--with-active-result-word--selected {
  background-color: #ff8d00; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .player .result-word__cell--selected {
  background-color: #faddbf; /* Color 2 at 50% */
}

#puzzle-portal .player .result-word__cell--prizepuzzle {
  background-color: #ec990f;
}

/* Attention color */
#puzzle-portal .filippine .grid-cell__rectangle-result,
#puzzle-portal .filippine-mini .grid-cell__rectangle-result,
#puzzle-portal .filippine-crypto .grid-cell__rectangle-result {
  fill: #ec990f;
}

/* Arrowword */
#puzzle-portal .arrowword .grid-cluecell .grid-cell__rectangle {
  fill: #f3f3f9;
}

#puzzle-portal .arrowword .grid-cluecell__rectangle-background-selected {
  fill: #ee9000;
}

/* Sudoku/tectonic */
#puzzle-portal .sudoku .keyboard__button-inner--active,
#puzzle-portal .tectonic .keyboard__button-inner--active {
  background-color: #ff8d00; /* Color 2 */
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .sudoku .grid-cell--color-1 .grid-cell__rectangle {
  fill: #fff;
}
#puzzle-portal .sudoku .grid-cell--color-2 .grid-cell__rectangle {
  fill: #ecf3f5;
}

#puzzle-portal .tectonic .grid-cell--color-1 .grid-cell__rectangle {
  fill: #d8edba;
}
#puzzle-portal .tectonic .grid-cell--color-2 .grid-cell__rectangle {
  fill: #fbdeb2;
}
#puzzle-portal .tectonic .grid-cell--color-3 .grid-cell__rectangle {
  fill: #b2d3f6;
}
#puzzle-portal .tectonic .grid-cell--color-4 .grid-cell__rectangle {
  fill: #edb2c0;
}
#puzzle-portal .tectonic .grid-cell--color-5 .grid-cell__rectangle {
  fill: #bc9af5;
}

#puzzle-portal .sudoku_chaos .grid-cell--color-1 .grid-cell__rectangle {
  fill: #f49a89;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-2 .grid-cell__rectangle {
  fill: #cfc5af;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-3 .grid-cell__rectangle {
  fill: #ffee90;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-4 .grid-cell__rectangle {
  fill: #a6e8d8;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-5 .grid-cell__rectangle {
  fill: #d8edba;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-6 .grid-cell__rectangle {
  fill: #fbdeb2;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-7 .grid-cell__rectangle {
  fill: #b2d3f6;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-8 .grid-cell__rectangle {
  fill: #edb2c0;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-9 .grid-cell__rectangle {
  fill: #bc9af5;
}

#puzzle-portal .tectonic .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #79ae2d;
}
#puzzle-portal .tectonic .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #d6850b;
}
#puzzle-portal .tectonic .grid-cell--color-3.grid-cell--selected .grid-cell__rectangle {
  fill: #176bc5;
}
#puzzle-portal .tectonic .grid-cell--color-4.grid-cell--selected .grid-cell__rectangle {
  fill: #ab2847;
}
#puzzle-portal .tectonic .grid-cell--color-5.grid-cell--selected .grid-cell__rectangle {
  fill: #4d12b1;
}

#puzzle-portal .sudoku_chaos .grid-cell--color-1.grid-cell--selected .grid-cell__rectangle {
  fill: #a2260f;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-2.grid-cell--selected .grid-cell__rectangle {
  fill: #6f6143;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-3.grid-cell--selected .grid-cell__rectangle {
  fill: #c3a500;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-4.grid-cell--selected .grid-cell__rectangle {
  fill: #289a7e;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-5.grid-cell--selected .grid-cell__rectangle {
  fill: #79ae2d;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-6.grid-cell--selected .grid-cell__rectangle {
  fill: #d6850b;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-7.grid-cell--selected .grid-cell__rectangle {
  fill: #176bc5;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-8.grid-cell--selected .grid-cell__rectangle {
  fill: #ab2847;
}
#puzzle-portal .sudoku_chaos .grid-cell--color-9.grid-cell--selected .grid-cell__rectangle {
  fill: #4d12b1;
}

#puzzle-portal .sudoku .grid-cell--selected .grid-cell__text,
#puzzle-portal .sudoku_chaos .grid-cell--selected .grid-cell__text,
#puzzle-portal .tectonic .grid-cell--selected .grid-cell__text {
  fill: #fff;
}

@keyframes custom-fading_completed-set-color {
  0%, 70% {
    fill: #82ceb1;
  }
  100% {
  }
}

#puzzle-portal .player .grid-cell--in-completed-set .grid-cell__rectangle {
  animation: custom-fading_completed-set-color 1s;
}

/* Hashi */
#puzzle-portal .hashi .grid__background {
  fill: #fff;
}
#puzzle-portal .hashi.desktop .grid__background {
  fill: #ededed;
}
#puzzle-portal .hashi .grid__raster-line {
  stroke: #ddd;
}
#puzzle-portal .hashi .grid__bridge--preview {
  stroke: #ffbb95;
}
#puzzle-portal .hashi .grid__node--correct {
  fill: #e0f0d9;
  stroke: #549139;
}
#puzzle-portal .hashi .grid__node--excessive {
  fill: #ffa3a8;
  stroke: #a30009;
}

/* Wordsearch */
#puzzle-portal .wordsearch .clues {
  background-color: #ff8d00; /* Color 2 */
}

#puzzle-portal .wordsearch .clue-item {
  color: #fff; /* Color 2 - inner (fonts etc) */
}

#puzzle-portal .wordsearch .grid__line {
  stroke: #ff8d00;
  stroke-opacity: 0.7;
}

/* Fitword */
#puzzle-portal .fitword .clues__block--selected {
  color: #ff8d00; /* Color 2 */
}

#puzzle-portal .fitword .clues__title:hover {
  background-color: #faddbf; /* Color 2 at 50% */
}

#puzzle-portal .wordsearch .modal__result-word-character
{
background-color:#00B368;
color:#ffffff
}

#puzzle-portal .wordsearch .grid-cell__result-circle circle
{
    fill:#00B368;
}

#puzzle-portal .sudoku.desktop-narrow .keyboard {
    background-color: transparent;
}

#puzzle-portal .sudoku.desktop .keyboard {
    background-color: transparent;
}

/* below section was added because they only have 3 puzzles in their portal */

#puzzle-portal .portal-main .main-games {
    padding: 0.75em 0 0;
}

#puzzle-portal .portal-main .powered-section-inner {
    width: 100%;
    display: none;
}

/* mobile/default stuff */

#puzzle-portal .portal-main h1,
#puzzle-portal .portal-main h2 {
    font-size: 2.5em;
    color: #042c3d;
}

#puzzle-portal .portal-main .game-card__title {
    font-size: 1.2em;
    color: #042c3d;
    margin: 0;
}

#puzzle-portal .modal__title {
    font-family: "Morion", Georgia, serif;
    font-size: 1.5em;
    color: #042c3d;
    margin-bottom: 10;
}

#puzzle-portal .portal-main .main-games .game-card {
    background-color: #f8f8f8;
}

/* desktop */

@media screen and (min-width: 750px){
    #puzzle-portal .portal-main .game-section-inner {
    width: calc(100% - 6em);
    padding: 0 3em;
  }

  #puzzle-portal .portal-main .game-card {
    width: calc(33% - 2em);
    margin-right: 3em;
  }

  #puzzle-portal .portal-main .game-card:nth-child(3n) {
    margin-right: 0;
  }
  
  #puzzle-portal .portal-main .game-card__button-play, 
#puzzle-portal .portal-main .archive-game-card__button-play {
      font-size: 1.2em;
  }

  #puzzle-portal .portal-main h1,
  #puzzle-portal .portal-main h2 {
      font-size: 2.5em;
  }

  #puzzle-portal .portal-main .game-card__title {
      font-size: 1.8em;
  }

  #puzzle-portal .modal__title {
      font-size: 2.4em;
      margin-bottom: 20;
  }
  
  #puzzle-portal .portal-main .main-games .game-card {
      background-color: #fff;
  }
}

#puzzle-portal .arrowword .clues {
    display: none;
}

#puzzle-portal .player .clues__block {
    background-color: #f8f8f8;
}

#puzzle-portal .mobile .action-bar {
    background-color: #f5f5f5;
}

#puzzle-portal .codebreaker .codebar__item--unmapped {
    color: #ff8d00;
}

#puzzle-portal .codebreaker .codebar__button-active {
    background-color: #ff8d00;
}

#puzzle-portal .portal-main .game-card:nth-child(n+3) .game-card__difficulty-sticker {
    display: none;
}

#puzzle-portal .portal-main .game-card--disabled img {
    opacity: .3;
}