.comment-table {
  width: 100%;
}

.comment-textarea {
  padding: 8px;
  width: 100%;
  overflow: hidden;
  resize: none;
  border: none;
}

.comment-input-box {
  max-width: 100%;
}

.comment-input-box .solid-splitter {
  margin-left: 8px;
  margin-right: 8px;
  width: auto;
}

.comment-btns {
  margin-top: 5px;
  margin-right: 8px;
}

.comment-cell {
  width: 100% !important;
  margin-top: 18px;
}
.comment-cell .cmt-edited {
  display: none;
}
.comment-cell .pinned-icon {
  display: none;
}
.comment-cell .hearted-icon {
  display: none;
}
.comment-cell .cmt-replies-btn {
  display: block;
}
.comment-cell .cmt-more-replies-btn {
  display: none;
}

.comment-cell.leaf-cell[data-high_lighted=true] > .comment-body > .comment-header {
  background-color: rgb(239, 243, 246);
}

.comment-cell[data-edited=true] > .comment-body > .comment-header .cmt-edited {
  display: block;
}

.comment-cell[data-pinned=true] > .comment-body > .comment-header .pinned-icon {
  display: block;
}

.comment-cell[data-hearted=true] > .comment-body > .comment-header .hearted-icon {
  display: block;
}

.comment-cell.leaf-cell > .comment-body > .cmt-content-section > .cmt-replies-btn {
  display: none;
}

.comment-cell.replies-open > .comment-body > .cmt-content-section > .cmt-replies-btn {
  display: none;
}

.comment-cell.replies-open > .comment-body > .cmt-content-section > .cmt-more-replies-btn {
  display: none;
}

.comment-cell.replies-open[data-has_more_replies=true] > .comment-body > .cmt-content-section > .cmt-more-replies-btn {
  display: block;
}

.comment-cell-content {
  white-space: pre-wrap;
}

.comment-body {
  width: 100%;
  min-height: 60px;
}

.cmt-time-ago, .cmt-edited {
  color: gray;
}

.cmt-time-edited {
  margin-top: 5px;
}

.cmt-ellipsis-dropdown {
  position: absolute;
  top: -5px;
  right: 39px;
}

.cmt-more-link {
  display: none;
  font-size: 1.1rem;
}

.cmt-be-first {
  display: none;
}

.cmt-profile-pic {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
}

.comment-cell.leaf-cell .comment-body {
  margin-left: 35px;
}

.comment-cell.leaf-cell .cmt-profile-pic {
  width: 25px;
  height: 25px;
}

.comment-header {
  width: 100%;
}

.cmt-header-section {
  margin-left: 5px;
  display: inline-flex;
}
.cmt-header-section a {
  font-weight: 550;
}

.cmt-content-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cmt-edit-target {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cmt-replies-target {
  width: 100%;
}

.comment-cell > .comment-body > .cmt-content-section {
  margin-left: 40px;
}

.cmt-time-edited > .cmt-reply-btn {
  font-weight: 550;
  display: block;
}

.comment-cell .cmt-ellipsis-dropdown > .cmt-reply-btn {
  display: none;
}

.cmt-icon-section {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.comment-section {
  width: 98%;
  max-width: 98% !important;
  display: flex;
  flex-direction: column;
  align-items: start;
}

@media (max-width: 412.01px) {
  .comment-section {
    width: 90%;
  }
  .cmt-header-section {
    display: flex;
    flex-direction: column;
  }
  .cmt-header-section .cmt-icon-section {
    position: relative;
  }
}
@media (max-width: 430.01px) {
  .comment-section {
    width: 98%;
    max-width: 98%;
  }
  .comment-header > .cmt-reply-btn {
    display: none;
  }
  .comment-cell .cmt-ellipsis-dropdown > .cmt-reply-btn {
    display: block;
  }
  .comment-cell > .comment-body > .cmt-content-section {
    margin-left: 15px;
  }
  .comment-cell.leaf-cell .comment-body {
    margin-left: 5px;
  }
}
@media (min-width: 720.01px) {
  .comment-section {
    max-width: 720px !important;
  }
}
.creator-bio {
  color: rgb(99, 89, 89);
  font-size: 1.1rem;
}
.creator-bio h2 {
  color: #27b3ed;
}
.creator-bio a {
  color: rgb(150.8510638298, 139.1489361702, 139.1489361702);
}
.creator-bio a.local-site-url {
  color: #27b3ed;
}
.creator-bio p {
  line-height: 1.3;
  margin-bottom: 7px;
}
.creator-bio p:last-of-type {
  margin-bottom: 0;
}

.ch-banner-container {
  position: relative;
}

.ch-banner-outer {
  display: inline-block;
}

.ch-banner-box {
  width: 700px;
  max-height: 186px;
  aspect-ratio: 600/160;
  overflow: visible;
  position: relative;
  background-color: #ffd33d;
}

.ch-banner-img {
  max-width: 100%; /* Scales the width to fit the container */
  max-height: 100%;
  object-fit: cover;
}

.ch-profile-thumb {
  margin-top: auto;
  display: block;
  overflow: hidden;
  position: absolute;
  left: 15px;
  z-index: 9;
  text-decoration: none;
  border-radius: 50%; /* circular */
  object-fit: contain;
  border: 2px solid white;
}

.ch-home-edit {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 60px;
}

.ch-home-edit > .ch-edit-dropdown {
  width: 100%;
  display: block;
  z-index: 9;
}

.ch-home-edit > .ch-banner-file-box {
  display: none;
  z-index: 9;
}

.ch-home-file-upload {
  width: 100%;
  border: 2px solid black;
}

.ch-home-file-upload > .ch-edit-dropdown {
  display: none;
}

.ch-home-file-upload > .ch-banner-file-box {
  display: block;
  z-index: 9;
}

.ch-accordion .ch-at-more {
  display: block;
}
.ch-accordion .ch-at-less {
  display: none;
}
.ch-accordion .show ~ .ch-collapse-control .ch-at-more {
  display: none;
}
.ch-accordion .show ~ .ch-collapse-control .ch-at-less {
  display: block;
}
.ch-accordion .card {
  border: none !important;
  background-color: white !important;
  margin: 0 !important;
}
.ch-accordion .card-header {
  background-color: inherit !important; /* Removes the gray background */
  color: inherit; /* Inherit color from parent or set a custom color */
  border: none !important; /* Removes any border */
  text-decoration: none; /* Removes underline */
  margin: 0 !important;
  padding: 0 !important;
}
.ch-accordion .card-body {
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 414.98px) {
  .ch-banner-outer {
    width: 290px;
  }
  .ch-banner-box {
    width: 290px;
    max-height: 94px;
  }
  .ch-profile-thumb {
    width: 72px;
    height: 72px;
    bottom: -63px;
  }
  .ch-user-handle {
    margin-left: 87px;
  }
  .ch-accordion {
    margin-top: 65px !important;
  }
}
@media (min-width: 415px) {
  .ch-banner-outer {
    width: 390px;
  }
  .ch-banner-box {
    width: 390px;
    max-height: 117px;
  }
  .ch-profile-thumb {
    width: 100px;
    height: 100px;
    bottom: -82px;
  }
  .ch-user-handle {
    margin-left: 115px;
  }
  .ch-accordion {
    margin-top: 84px !important;
  }
}
@media (min-width: 1023.98px) {
  .ch-banner-outer {
    width: 700px;
  }
  .ch-banner-box {
    width: 700px;
    max-height: 196px;
  }
  .ch-profile-thumb {
    width: 110px;
    height: 110px;
    bottom: -85px;
  }
  .ch-user-handle {
    margin-left: 125px;
  }
  .ch-accordion {
    margin-top: 87px !important;
  }
}
.dmc-section {
  display: flex;
  flex-direction: column;
}
.dmc-section .solid-splitter {
  width: 100%;
}
.dmc-section .other-party-handle {
  font-weight: bolder;
  align-items: flex-end;
}

.dmc-cell .dm-cell-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.dmc-cell .dm-cell-box .dm-msg-content {
  white-space: pre-wrap;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: 8px;
  background-color: #c171c7;
  color: white;
}

.dmc-cell[data-text_dir=out] .dm-cell-box {
  align-items: flex-end;
  margin-left: auto;
}
.dmc-cell[data-text_dir=out] .dm-cell-box .dm-msg-content {
  color: white;
  background-color: #06a5da;
}

.no-convos-yet {
  display: none;
}

.dm-input-box {
  padding-bottom: 8px;
}
.dm-input-box .dm-textarea {
  width: 100%;
}

#dm-convo-overlay {
  overflow: hidden;
}
#dm-convo-overlay .modal-dialog {
  max-height: 98% !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.ua-editable-control .ed-edit-btn {
  display: block;
}
.ua-editable-control .save-cancel-btns {
  display: none;
}

.ua-editable-control.ed-editing .ed-edit-btn {
  display: none;
}
.ua-editable-control.ed-editing .save-cancel-btns {
  display: inline-flex;
}

/* Emoji Picker Dialog */
#emoji-dialog {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  overflow: auto;
  max-height: 400px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  z-index: 10000;
}

@media (max-height: 667px) {
  #emoji-dialog {
    max-height: 280px;
  }
}
/* JigMedia table sizing
 The thumbnail images are 480 X 270.
 Small screens will be 300 X 167.
 Sizes for large screens will be 360 X 202
 Sizes for the largest screens will be 330 x 186
 */
#jmt-container {
  display: flex;
  justify-content: center;
}

#jigmedia-table {
  width: 100%;
  margin-top: 8px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0px;
  padding-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

/* The complete jigmedia cell */
.jm-table-cell {
  position: relative;
  margin-top: 8px;
  margin-left: 8px; /* ml-3 */
  margin-right: 8px;
  padding-left: 8px; /* ml-3 */
  padding-right: 8px;
  font-size: 1em;
}

.jigmedia-list-img {
  max-width: 100%;
  height: 100%;
  width: auto;
}

.featured-trailers-cell {
  width: 100%;
}

.embedded-ad-cell {
  overflow: hidden !important;
}

/* Gray box containing image */
.jigmedia-box, .ft-preview-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #eeeded;
  border-radius: 8px;
}
.jigmedia-box .ft-sub-cell, .ft-preview-box .ft-sub-cell {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  background-color: #eeeded;
  border-radius: 8px;
  min-width: 45%;
  overflow: hidden;
}
.jigmedia-box .ft-sub-cell img, .ft-preview-box .ft-sub-cell img {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* media-type: photo or video with camera or play button icon on bottom right */
.jigmedia-box .media-type-icon {
  font-size: 2em;
  color: #ffd33d;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-10px, -10px);
  border-radius: 10px;
}

.title-list-cell, .cat-list-cell {
  width: 8.9rem;
  margin-top: 2px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  font-size: 1.1rem;
}

.jigmedia-mini-thumb {
  max-width: 8.9rem;
  min-height: 5rem;
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #eeeded;
  border-radius: 4px;
}

.jigmedia-mini-thumb img {
  max-width: 8.9rem;
  max-height: 5rem;
  margin: 0;
  padding: 0;
}

/*media-type: photo or video with camera or play button icon on bottom right*/
.jigmedia-mini-thumb .media-type-icon {
  font-size: 1em;
  color: #ffd33d;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-2px, -2px);
}

.ellipsis-button {
  /*display: none; keep it visible to be consistent with mobile*/
  color: rgb(99, 89, 89);
  width: 2em;
}

.ellipsis-dropdown {
  display: none;
}

.jigmedia-list-img {
  border-radius: 10px;
}

/* preview-cell shows video preview over jigmedia-cell */
.preview-cell {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 10;
  background-color: white;
  font-size: 1em !important;
  border-radius: 10px;
  border: medium solid;
  border-color: #eeeded;
}

#preview-close-btn {
  color: lightgrey;
}

.preview-cell video {
  border-radius: 10px;
}

.media-view-desc-dialog .modal-dialog {
  min-width: 60% !important;
  display: flex;
  flex-direction: column;
}
.media-view-desc-dialog .modal-dialog .thumb-pic {
  max-width: 98%;
}

.media-view-desc-dialog .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.media-view-desc-dialog .modal-content .jm-desc-done-btn {
  width: 200px;
}

/* Media breaks for Jimedia Table */
@media (max-width: 414.98px) {
  .jm-table {
    max-width: 100%;
  }
  .jm-table-cell {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    width: 100%;
    max-height: 295px;
  }
  .jm-table-cell[data-game] {
    max-height: 360px;
  }
  .jigmedia-box, .ft-preview-box {
    width: 98%;
    height: 200px;
  }
  .jigmedia-box .ft-sub-cell, .ft-preview-box .ft-sub-cell {
    height: 90px;
  }
  .jigmedia-box .ft-sub-cell img, .ft-preview-box .ft-sub-cell img {
    max-height: 90px;
  }
  .title-list-cell {
    width: 125px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .jigmedia-mini-thumb {
    max-width: 125px;
    min-height: 70px;
  }
  .jigmedia-mini-thumb img {
    max-width: 125px;
    max-height: 70px;
  }
  .article-cell {
    max-width: 300px;
  }
  .jm-ldr-board-btn {
    font-size: 1em;
  }
}
@media (min-width: 415px) {
  .jm-table {
    max-width: 98%;
  }
  .jm-table-cell {
    width: 320px;
    font-size: 0.75em;
    padding: 0;
    max-height: 288px;
  }
  .jm-table-cell .ft-sub-cell {
    height: 130px;
    flex-basis: 45%;
  }
  .jm-table-cell .ft-sub-cell img {
    max-height: 130px;
  }
  .jm-table-cell[data-game] {
    max-height: 360px;
  }
  .jigmedia-box, .ft-preview-box {
    height: 188px;
  }
  .jigmedia-box .ft-sub-cell, .ft-preview-box .ft-sub-cell {
    height: 90px;
  }
  .jigmedia-box .ft-sub-cell img, .ft-preview-box .ft-sub-cell img {
    max-height: 90px;
  }
  .article-cell {
    max-width: 300px;
  }
  .navbar-expand-custom .nav-link span {
    display: inline;
  }
}
@media (min-width: 1023.98px) {
  .jm-table {
    max-width: 90%;
  }
  .jm-table-cell {
    width: 400px;
    max-height: 362px;
    font-size: 0.75em;
    padding: 0;
  }
  .jm-table-cell[data-game] {
    max-height: 460px;
  }
  .jigmedia-box, .ft-preview-box {
    height: 270px;
  }
  .jigmedia-box .ft-sub-cell, .ft-preview-box .ft-sub-cell {
    height: 130px;
  }
  .jigmedia-box .ft-sub-cell img, .ft-preview-box .ft-sub-cell img {
    max-height: 130px;
  }
  .article-cell {
    max-width: 440px;
  }
  .navbar-expand-custom .nav-link span {
    display: inline;
  }
}
/* MainMenu Navbar */
.jd-logo .brand-phrase {
  font-size: 0.8rem;
  position: relative;
  margin-top: -4px;
  padding: 0;
  margin-left: 60px;
}

.jd-logo img {
  width: 145px;
  height: 100%;
}

#puzzle-navbar .nav-link {
  padding: 0;
  margin: 0;
  color: #676060;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
}

.navbar-light .navbar-nav .nav-link {
  color: #676060;
}

.navbar-toggler-icon {
  color: white;
}

.navbar-toggler {
  border: none;
}

.navbar-expand-custom .nav-link {
  flex-direction: row;
}

.navbar-expand-custom .nav-link span {
  margin-left: 0.2rem;
}

/* Media breaks for Home Navbar */
@media (min-width: 851.98px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
    margin-left: auto;
  }
  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 0.9rem;
  }
  .navbar-expand-custom .navbar-collapse {
    display: flex !important;
  }
  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
  .navbar-expand-custom .navbar-nav .dropdown-menu {
    position: absolute;
  }
}
.notif-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.notif-card .cmt-section {
  margin-top: 10px;
  display: none !important;
}
.notif-card .notif-section {
  display: none;
}
.notif-card .dmt-section {
  display: none !important;
}
.notif-card .dmc-section {
  margin-top: 10px;
  display: none !important;
}

.notif-card[data-card=notifs] .notif-section {
  display: block;
  width: 96%;
  max-width: 720px !important;
}

.notif-card[data-card=comments] .cmt-section {
  display: block !important;
  width: 96%;
  max-width: 720px !important;
}

.notif-card[data-card=dms] .dmt-section {
  display: block !important;
  width: 96%;
  max-width: 720px !important;
}
.notif-card[data-card=dms] .dmt-section .dmt-table a {
  color: inherit;
  text-decoration: none;
}
.notif-card[data-card=dms] .dmt-section .dmt-table a:hover, .notif-card[data-card=dms] .dmt-section .dmt-table a:focus, .notif-card[data-card=dms] .dmt-section .dmt-table a:active {
  color: inherit;
  text-decoration: none;
}

.notif-card[data-card=convo] .dmc-section {
  display: block !important;
  width: 96%;
  max-width: 720px !important;
}

.notif-tabs-btns .btn {
  box-shadow: none !important;
}

.cmt-jm-section {
  font-size: 1.7rem;
}

.notif-handle {
  font-weight: 550;
}

.notif-table {
  width: 100%;
}

.notif-cell {
  margin-top: 18px;
}
.notif-cell .cmt-edited {
  display: none;
}
.notif-cell .cmt-replies-btn {
  display: block;
}
.notif-cell .cmt-more-replies-btn {
  display: none;
}
.notif-cell .thumb-box {
  background-color: #eeeded;
}

.thumb-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  border-radius: 4px;
}
.thumb-box .thumb-pic {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-width: 220px;
  max-height: 80px;
  object-fit: contain;
}

.notif-cell[data-edited=true] .cmt-edited {
  display: block;
}

.notif-cell-content {
  white-space: pre-wrap;
}

.notif-row {
  width: 100%;
}

.notif-body {
  width: 100%;
  min-height: 60px;
}

.dmt-handle {
  color: #676060;
  font-weight: bold;
}

.dmt-time-ago {
  color: gray;
}

.cmt-profile-pic {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
}

.notif-header {
  width: 100%;
}

.cmt-header-section {
  display: inline-flex;
}
.cmt-header-section a {
  font-weight: 550;
}

.notif-time-edited {
  display: inline-flex;
  margin-top: 5px;
  margin-left: 40px;
}

.notif-content-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 2px;
  margin-left: 4px;
}
.notif-content-section .cmt-edit-target {
  width: 100%;
}
.notif-content-section .cmt-replies-target {
  width: 100%;
}

.d-block-link {
  display: flex;
  width: 100%;
  color: #676060;
}
.d-block-link:hover {
  background-color: #eeeded;
}

@media (max-width: 412.01px) {
  .notif-section .cmt-section {
    width: 90%;
  }
  .cmt-header-section {
    display: flex;
    flex-direction: column;
  }
  .cmt-header-section .cmt-icon-section {
    position: relative;
  }
}
@media (max-width: 430.01px) {
  .notif-section .cmt-section {
    width: 98%;
    max-width: 98%;
  }
  .notif-cell {
    margin-left: 15px;
  }
}
@media (min-width: 600.01px) {
  .notif-section .cmt-section {
    min-width: min(98vw, 600px);
  }
}
@media (min-width: 720.01px) {
  .notif-section .cmt-section {
    max-width: 720px !important;
  }
}
.alert-badge-container {
  position: relative;
}
.alert-badge-container .alert-badge {
  display: none;
}

.alert-badge-container[data-has_unseen=true] .alert-badge {
  display: block;
  font-size: 0.75rem;
  position: absolute;
  top: 0px;
  right: 4px;
  border-radius: 15px;
  z-index: 999;
  text-align: center;
  color: white;
  background-color: red;
  width: 1.2rem;
}

.alert-dot-container {
  position: relative;
}
.alert-dot-container .alert-dot {
  display: none;
}

.alert-dot-container[data-unseen=true] .alert-dot {
  margin-top: 6px;
  display: block;
  font-size: 0.5rem;
  color: red;
}

.notif-tabs-btns label {
  padding-top: 10px;
}

/* Puzzle Navbar    */
/********************/
.nav-vert .show-video-controls {
  display: inline-block !important;
}

.nav-vert .vid-control {
  display: none !important;
}

.nav-vert .show-video-controls {
  display: none;
}

.nav-vert #puzzle-navbar {
  display: inline-block;
}

.show-video-controls.hide-for-no-video,
.vid-control.hide-for-no-video {
  display: none !important;
}

/* video controls in a modal dialog for small mobile */
#video-controls-dialog .modal-dialog {
  margin-top: 50px !important;
}

#puzzle-navbar {
  margin: 0;
  padding: 0;
}

.nav-horiz,
.nav-video-controls {
  font-size: 2rem;
  width: 100%;
}

.nav-horiz .nav-item,
.nav-video-controls .nav-item {
  /* Default to nav-fill */
  flex: 1 1 auto;
  text-align: center;
}

.nav-vert {
  height: 100%;
  width: 3rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
}

.nav-vert .icon {
  font-size: 2rem !important;
  text-align: center;
}

@media (min-height: 500px) {
  .nav-vert {
    justify-content: normal;
  }
  .nav-vert .nav-item {
    margin-bottom: 0.9em;
  }
}
/* Up to this size the video controls are toggled on the .show-video-controls button */
@media (max-width: 659.98px) {
  .nav-horiz,
  .nav-vert {
    font-size: 2rem;
  }
  .show-video-controls {
    display: inline-block;
  }
  #puzzle-navbar .vid-control {
    display: none;
  }
  .nav-horiz .svg-icon {
    height: 0.9em;
  }
  .svg-icon {
    height: 0.9em;
  }
}
@media (min-width: 660px) {
  .nav-horiz,
  .nav-video-controls,
  .nav-vert {
    font-size: 2rem;
  }
  .show-video-controls {
    display: none;
  }
  #puzzle-navbar .vid-control {
    /*align-self: center;*/
    /*display: inline-block;*/
  }
  #search-media-input {
    width: 210px;
  }
  .svg-icon {
    height: 1em;
  }
}
@media (min-width: 992px) {
  .nav-horiz,
  .nav-video-controls,
  .nav-vert {
    font-size: 1.5rem;
  }
  .nav-horiz {
    width: 75%;
  }
  #search-media-input {
    width: 250px;
  }
  .svg-icon {
    height: 1.3em;
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .nav-horiz,
  .nav-video-controls,
  .nav-vert {
    font-size: 1.5rem;
  }
  .nav-horiz {
    width: 50%;
  }
}
.change-pic-controls .change-pic-btns {
  display: inline-flex;
  align-items: center;
}
.change-pic-controls .change-pic-file-box {
  display: none;
}

.change-pic-controls-uploading .change-pic-btns {
  display: none;
}
.change-pic-controls-uploading .change-pic-file-box {
  display: flex;
  flex-direction: column;
}

/* puzzle-pause dialog */
#puzzle-pause-dialog .modal-dialog {
  height: 98%;
  max-width: 100% !important;
  width: 95% !important;
}

#puzzle-pause-dialog .modal-dialog .modal-content {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
}

#puzzle-pause-dialog .modal-dialog .modal-content .modal-body {
  width: 100%;
}

#pp-game-info-div {
  margin-top: 5px;
  margin-left: 8px;
  margin-right: 8px;
  padding-right: 25px;
  width: 200px;
}

.ua-card {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.ua-card[data-card=general] .ua-general-tab {
  display: block;
  width: 96%;
}
.ua-card[data-card=general] .ua-homepage-tab {
  display: none;
}

.ua-card[data-card=homepage] .ua-homepage-tab {
  display: block;
  width: 96%;
}
.ua-card[data-card=homepage] .ua-general-tab {
  display: none;
}

.ua-tabs-btns .btn {
  box-shadow: none !important;
}

.ua-section-hdr {
  margin-top: 20px;
}

.ua-section-hdr .ua-title {
  font-size: 1.1em;
  font-weight: bolder;
}

.ua-advice {
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: bold;
  font-size: 0.9em;
  margin-bottom: 5px;
}

.ua-editable {
  border: 2px solid #eeeded;
  border-radius: 8px;
  padding: 2px 4px 2px 4px;
  width: 100%;
  min-height: 2em;
}

.ua-publish-btn:disabled, .ua-cancel-btn:disabled {
  background-color: #faf8f8;
  border-color: #797878 !important;
  color: #797878 !important;
}

.ep-btn {
  border: 2px solid #faf8f8;
  margin-left: 3px;
  padding: 1px;
}

.emoji-dialog {
  height: 400px;
  padding: 0 !important;
  margin: 0 !important;
}
.emoji-dialog .modal-content {
  overflow-y: auto;
  border: 2px solid #797878 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ep-emoji {
  margin: 5px;
}

.mce-container, .mce-edit-area, .mce-content-body {
  width: 100% !important;
  margin: 0 !important;
}

#ua-share-link {
  width: 300px !important;
}

#bio-editable {
  max-width: 98%;
}

@media (max-width: 414.98px) {
  .ua-details {
    width: 300px;
  }
}
@media (min-width: 415px) {
  .ua-details {
    width: 400px;
  }
}
@media (min-width: 1023.98px) {
  .ua-details {
    width: 600px;
  }
}
/* Login Dialog */
#login-dialog {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  overflow: auto;
  height: 500px;
  width: 400px;
  min-width: 300px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  z-index: 11000;
}

@media (max-height: 667px) {
  #login-dialog {
    max-height: 410px;
  }
}
#featured-trailer-upload-dialog #featured-trailer-edit-dialog .modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 98vh;
}
#featured-trailer-upload-dialog #featured-trailer-edit-dialog .modal-header .ref-jm-thumb {
  max-width: 80%;
  height: auto;
}

/* Media breaks for ref Jigmedia thumb */
@media (max-width: 414.98px) {
  .ref-jm-thumb {
    max-width: 250px;
    height: auto;
  }
}
@media (min-width: 415px) {
  .ref-jm-thumb {
    max-width: 250px;
    height: auto;
  }
}
@media (min-width: 1023.98px) {
  .ref-jm-thumb {
    max-width: 400px;
    height: auto;
  }
}
.ft-video-box {
  display: flex;
  justify-content: center;
  width: 100%;
  overflow: contain;
  position: relative;
  margin-bottom: 8px;
}
.ft-video-box video {
  width: 100%;
  height: auto;
  object-fit: scale-down;
}

.ft-video-controls {
  width: 100%;
  margin-top: 5px;
}

.ft-progress-bar {
  width: 98%;
}

#ft-volume-slider {
  width: 100px;
  height: 8px;
  padding: 0 5px;
}

.ft-accordion {
  width: 80%;
}
.ft-accordion .ft-at-more {
  display: block;
}
.ft-accordion .ft-at-less {
  display: none;
}
.ft-accordion .show ~ .ft-collapse-control .ft-at-more {
  display: none;
}
.ft-accordion .show ~ .ft-collapse-control .ft-at-less {
  display: block;
}
.ft-accordion .ft-card-body {
  padding: 10px;
  text-align: left;
}

.ft-play-it-here-link {
  font-size: 2rem;
}

/* Media breaks for ref Jigmedia thumb */
@media (max-width: 414.98px) {
  .ft-video-box {
    max-width: 370px;
    height: auto;
  }
  .ft-video-box .ft-video-controls {
    max-width: 370px;
  }
  .ft-accordion {
    width: 98%;
  }
}
@media (min-width: 415px) {
  .ft-video-box {
    max-width: 370px;
    height: auto;
  }
  .ft-video-controls {
    max-width: 370px;
  }
  .ft-accordion {
    width: 98%;
  }
}
@media (min-width: 1023.98px) {
  .ft-video-box {
    width: 90%;
    max-width: 90vw;
    max-height: 70vh;
  }
  .ft-video-controls {
    width: 90%;
  }
  .ft-accordion {
    width: 60%;
    max-width: 900px;
  }
}
.leaderboard-dialog .modal-dialog {
  min-width: 60% !important;
  display: flex;
  flex-direction: column;
}
.leaderboard-dialog .modal-dialog .thumb-pic {
  max-width: 98%;
}

.leaderboard-dialog .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.leaderboard-dialog .ldrb-thumb-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.leaderboard-dialog .solid-splitter {
  width: 100% !important;
  margin: 0;
}
.leaderboard-dialog .config-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.leaderboard-dialog .config-desc .desc-wrap {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
}
.leaderboard-dialog .fa-circle {
  font-size: 0.4em;
  color: darkgray;
}

a.compound-link {
  text-decoration: none;
  color: black;
  background-color: #eeeded;
}

a.compound-link:hover div {
  background-color: lightblue;
}

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; /* prevent font from scaling smaller in portrait mode */
}

html body {
  height: 100%; /* handle ios screen rotation white band on landscape (when it goes to fullscreen)  ios-fs */
  height: 100vh; /* ios-fs */
  width: 100%; /* ios-fs */
  width: 100vw; /* ios-fs */
  background-color: white;
  color: #676060;
}

.modal-content {
  background-color: white;
}

.swal2-popup {
  background-color: white !important;
  border: none;
}

input, textarea, select {
  background-color: white;
  border: 2px solid #eeeded;
  border-radius: 7px;
}

input:disabled {
  background-color: #faf8f8;
}

h1 {
  font-size: 1.5rem !important;
  color: #676060;
}

h2 {
  font-size: 1.4rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.2rem;
  font-weight: bold;
}

/* Media breaks for Headings  */
@media (max-width: 414.98px) {
  h1 {
    font-size: 1rem !important;
  }
}
@media (min-width: 415px) {
  h1 {
    font-size: 1.1rem !important;
  }
}
.jm-edit-tags {
  background-color: white;
  border-radius: 7px;
}

/* Disable scrolling for the puzzle page */
#puzzlepagebody {
  margin: 0;
  overscroll-behavior: none;
  -ms-scroll-chaining: none;
  touch-action: none;
}

a {
  -webkit-user-select: none !important; /* disable selection/Copy of UIWebView */
}

body {
  -webkit-touch-callout: none !important; /* disable the IOS popup when long-press on a link */
}

/* video */
.video-mask {
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

#menu-orient {
  position: fixed;
  width: 100%;
  height: 100%;
}

#puzzleParent {
  background: url("/assets/img/suede-blue.svg") white !important;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#puzzleParent canvas {
  width: 100%;
  height: 100%;
}

.modal-dialog {
  background-color: white;
  padding: 10px;
  /* keep modal dialog near the top esp for landscape. */
  margin-top: 0 !important;
  top: 3px !important;
}

.modal-dialog h2 {
  font-size: 1.5rem;
}

.modal-content, .modal-header {
  border: none;
}

.modal-content .row {
  border: none;
  margin-top: 3px;
}

.article-cells {
  width: 100%;
  padding-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 300px;
  justify-content: space-around;
}

.article-cell {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /*background-color: cyan;*/
}

.article-cell img {
  max-width: 100%;
  max-height: 100%;
}

.article-cell .more-button {
  margin-left: auto;
  margin-bottom: 0.3rem;
  padding-left: 5px;
  padding-right: 5px;
  color: rgb(99, 89, 89);
  text-decoration: underline;
}

.article-content {
  font-family: sans-serif;
  font-size: 1.2rem;
}

#p-timer, #piece-count-display {
  z-index: 10;
  font-size: 1rem;
  font-weight: bold;
  background-color: transparent;
  margin: auto;
  text-shadow: 1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black;
  color: white;
  grid-area: 1/1;
}

.pp-game-info-box {
  background-color: aliceblue;
  padding: 4px;
}

.pp-jm-desc {
  border-radius: 3px;
  background-color: white;
}

.pp-tags {
  min-width: 5rem;
  max-width: 15rem;
}

.puzzle-home-btn {
  width: 2.5rem;
  height: 2.8rem;
}

.jm-quick-view {
  font-size: 1.1rem;
  color: rgb(99, 89, 89);
  background-color: white;
}

a.link-white,
a.link-white:hover,
a.link-white:active,
a.link-white:visited,
.bg-dark .nav-item > a,
.bg-dark .nav-item > a:hover,
.bg-dark .nav-item > a:active,
.bg-dark .nav-item > a:visited,
.bg-dark .navbar-header > a {
  color: white;
  background-color: inherit;
  text-decoration: none;
}

a.link-black,
a.link-black:hover,
a.link-black:active,
a.link-black:visited,
#pagination a {
  color: #676060;
  background-color: inherit;
  text-decoration: none;
}

a.link-gray,
a.link-gray:hover,
a.link-gray:active,
a.link-gray:visited {
  color: rgb(99, 89, 89);
  background-color: inherit;
  text-decoration: none;
}

.jm-puzzle-create {
  font-size: 1.1rem;
}

.jm-uploader {
  font-size: 1.1rem;
}

.jm-details {
  color: rgb(99, 89, 89);
  font-size: 1.1rem;
}

.jm-details .icon {
  font-size: 0.3rem;
}

.jm-details .fa-check {
  font-size: 1.1rem;
  color: green;
}

/* toggle visibility */
.nsi-invisible {
  display: none;
}

/* jigmedia more-actions dropdown */
.jigmedia-cell .dropdown {
  position: relative;
  display: inline-block;
}

.jigmedia-cell .dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

.jigmedia-cell .dropdown-menu a {
  color: #676060;
  text-decoration: none;
  display: block;
}

.jigmedia-cell .dropdown-menu a:hover {
  background-color: #ddd;
}

.modal h3 {
  font-size: 1.2rem;
}

/* splash while loading ajax data */
/* display to "flex" to show and "none" to hide */
#loading {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.7;
  background-color: white;
  z-index: 99;
}

#loading-image {
  z-index: 100;
}

#search-clear-btn,
.jm-view-desc-btn {
  outline: 0 !important;
  box-shadow: none !important;
}

.jm-view-desc-btn .icon {
  font-size: 1.5rem;
}

.gradient-splitter {
  height: 2px;
  width: 85%;
  background: linear-gradient(to right, rgb(99, 89, 89), lightgrey);
}

.solid-splitter {
  height: 2px;
  width: 85%;
  background: lightgrey;
}

#footer .icon {
  color: #676060;
}

#puzzle-footer {
  position: fixed;
  z-index: 2;
  bottom: 0;
  width: 100%;
  background-color: transparent;
}

.social-link .icon {
  font-size: 1.7rem;
}

.btn-cancel {
  background-color: transparent !important;
  border-color: #797878 !important;
}

.unselectable {
  pointer-events: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.privacy-policy {
  font-size: 1em;
}

.privacy-policy h1 {
  font-size: 2.5rem;
  text-align: center;
}

.privacy-policy h2 {
  font-size: 1.5rem;
}

#dmca-takedown-dialog h2 {
  font-size: 1.2rem;
}

.takedown-review input:disabled {
  background: white;
}

.google-login a {
  width: 200px;
  font-size: 0.9rem !important;
  padding: 0 15px 0 0;
  border: 2px solid #eeeded;
}

#facebook-login-btn {
  background-color: #1877F2;
  color: white;
  width: 200px;
  padding: 0.45rem 5px 0.45rem 0;
  font-size: 0.9rem;
}

#facebook-login-btn img {
  width: 1.9rem;
}

/* New User Dialog */
.new-user-content {
  max-width: 600px;
}

#display-name-verified {
  max-width: 20px;
}

.cover-screen {
  background: #000000;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  z-index: 99;
}

.admin-util-labels {
  display: inline-block;
  width: 100px;
  height: 100px;
}

/* tag widget */
/* (A) WRAPPER */
.tagwrap {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  border: 2px solid #eeeded;
}

/* (B) SHARED TAGS */
.tagwrap .tag, .tagwrap .tagin {
  display: block;
  margin: 10px 5px;
  padding: 10px;
}

/* (C) TAGS blue bubbles */
.tagwrap .tag {
  color: white;
  background: #2d7dc1;
  cursor: pointer;
  border-radius: 23px;
}

.tagwrap .tag::after {
  content: "X";
  padding-left: 20px;
}

/* (D) TAG INPUT */
.tagwrap .tagin {
  flex-grow: 1;
  background: none;
  border: 0;
}

.tagwrap .tagin:focus {
  outline-width: 0;
  outline: none;
}

/* (X) DOES NOT MATTER */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

/* \tag widget */
/* twitter typeahead */
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #eeeded;
  border-radius: 7px;
  outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: lightgrey;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
  width: 422px;
  margin-top: 12px;
  padding: 8px 0;
  background-color: white;
  border: 1px solid #eeeded;
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
  color: white;
  background-color: #0097cf;
}

.tt-suggestion p {
  margin: 0;
}

/* /twitter-typeahead */
.search-filter-btns button, .search-filter-btns a {
  height: 2rem;
  border: none;
  display: flex;
  align-items: center;
}

/* oops page */
.oops-page {
  font-size: 3rem;
}

#puzzle-solved-dialog {
  top: 10%;
  z-index: 100;
  position: fixed;
  width: 300px;
  background-color: white;
}

.close-icon {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 1.2rem;
  color: rgb(99, 89, 89);
}

#reopen-icon {
  z-index: 20;
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 1.5rem;
  color: white;
  background-color: transparent;
}

#puzzle-solved-dialog .logo-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.9rem;
}

#play-next {
  bottom: 3%;
  z-index: 100;
  position: fixed;
  width: 100%;
  max-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Avoid overlap of the menu on the left */
#play-next.nav-vert {
  margin-left: 5%;
  width: 95%;
}

#play-next .card {
  position: relative;
  display: flex;
  /*width: 200px;*/
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
}

/* Put a shadow on these dialogs */
.with-shadow {
  background-color: white;
  background-clip: border-box;
  border: 1px solid #eeeded;
  font-family: fantasy; /* Moved this out of the border property */
  border-radius: 4px;
  -webkit-box-shadow: 0 0 5px 0 rgb(249, 249, 250);
  -moz-box-shadow: 0 0 5px 0 rgb(212, 182, 212);
  box-shadow: 0 0 5px 0 rgb(161, 163, 164);
}

#play-next .card .card-body {
  padding: 1rem 1rem;
}

#play-next .card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
  width: 190px;
  text-align: center;
}

#play-next p {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  line-height: 1.5rem;
}

#play-next h4 {
  line-height: 0.2 !important;
}

#play-next .items {
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
}

#play-next .slick-slide {
  margin: 10px;
}

/* Media breaks for play-next ribbon */
@media (max-height: 500px) {
  #play-next {
    max-height: 250px;
  }
  #play-next .pn-title {
    display: none;
  }
  #puzzle-solved-dialog {
    top: 5px;
  }
  #puzzle-solved-dialog .logo-box {
    display: none;
  }
}
.right-aligned-dropdown {
  text-align: right;
}

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

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