/*
 * Before using one these variables, check if a mixin could be used. If
 * the lightmode color and darkmode color in the design both match the colors
 * here, then we can use a mixin from _color_mixins.scss instead. May need to
 * build the mixin first, following the example of existing ones.
 *
 * (Darkmode colors not necessarily finalized, should check back later with the
 * figma to confirm them)
 */
.darkmode #discover_root .categorized-room-list {
  background-color: #000;
  border: 1px solid #474747; }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room {
  background: #2a2c2e;
  border: 1px solid rgba(100, 100, 100, 0.5); }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room .title .age {
  color: #B3B3B3; }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room .sub-info {
  color: #888; }

#discover_root .categorized-room-list .room-list-carousel .room_list_room .sub-info li.cams {
  background: url(../../images/cam.svg?aee4a41ba664) no-repeat 0 50%;
  background-size: auto; }
  .darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room .sub-info li.cams {
    background: url(../../images/cam_white.svg?282a760aab80) no-repeat 0 50%;
    background-size: auto; }

#discover_root .categorized-room-list .room-list-carousel .room_list_room .sub-info li.location {
  background: url(../../images/location.svg?5021cfc1ff61) no-repeat 0 50%;
  background-size: auto; }
  .darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room .sub-info li.location {
    background: url(../../images/location_white.svg?339f27869359) no-repeat 0 50%;
    background-size: auto; }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room .subject {
  color: #B3B3B3; }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room_list_room a, .darkmode #discover_root .categorized-room-list .room-list-carousel #hashtag_ticker a, .darkmode #discover_root .categorized-room-list .room-list-carousel .dismissable_notice a, .darkmode #discover_root .categorized-room-list .room-list-carousel .advanced_search_button_shell a {
  color: #68b5f0; }

.darkmode #discover_root .categorized-room-list .room-list-carousel .room-list-carousel-wrapper {
  scrollbar-color: #000 #000; }
  .darkmode #discover_root .categorized-room-list .room-list-carousel .room-list-carousel-wrapper.on-scroll {
    scrollbar-color: #d1d1d1 #000;
    scrollbar-arrow-color: #fff;
    scrollbar-face-color: #d1d1d1;
    scrollbar-track-color: #000; }
    .darkmode #discover_root .categorized-room-list .room-list-carousel .room-list-carousel-wrapper.on-scroll::-webkit-scrollbar-thumb {
      background-color: #d1d1d1; }

.darkmode #discover_root .categorized-room-list .zoomed-in-tile {
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.16);
  z-index: 1; }
  .darkmode #discover_root .categorized-room-list .zoomed-in-tile.bottom-shadow-reduced {
    box-shadow: 3px -1px 8px -5px rgba(0, 0, 0, 0.16), 0px -2px 7px -3px rgba(0, 0, 0, 0.16), -2px -2px 5px -3px rgba(0, 0, 0, 0.16); }

.darkmode #discover_root .categorized-room-list .show-all-room {
  text-shadow: -1px 0 rgba(100, 100, 100, 0.5), 0 1px rgba(100, 100, 100, 0.5), 1px 0 rgba(100, 100, 100, 0.5), 0 -1px rgba(100, 100, 100, 0.5); }
  .darkmode #discover_root .categorized-room-list .show-all-room.room_list_room {
    background-color: #000; }

.darkmode #discover_root .categorized-room-list .carousel-arrow-container .carousel-arrow {
  box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.15);
  background: #6E6F70; }

.darkmode #discover_root .categorized-room-list .carousel-arrow-container.left .carousel-arrow:after {
  border-color: #FFFFFF; }

.darkmode #discover_root .categorized-room-list .carousel-arrow-container.right .carousel-arrow:after {
  border-color: #FFFFFF; }

.darkmode #discover_root .categorized-room-list .category-title {
  color: #fff; }

.darkmode #discover_root .categorized-room-list .carousel-search, .darkmode #discover_root .categorized-room-list .room-list-carousel {
  border-color: #474747; }

.darkmode #discover_root .categorized-room-list .carousel-search .circle-container .circle::after, .darkmode #discover_root .categorized-room-list .room-list-carousel .circle-container .circle::after {
  background: #B3B3B3; }

.darkmode #discover_root .categorized-room-list .carousel-search .circle-container .circle.active::after, .darkmode #discover_root .categorized-room-list .room-list-carousel .circle-container .circle.active::after {
  background: #f47321; }

.darkmode #discover_root .categorized-room-list .room-list-category .carousel-info-icon {
  background-image: url(../../images/info-icon-white.svg?dd889667270a); }

/**
 * Generic mixins
 */
#discover_root .categorized-room-list {
  position: relative;
  background-color: #f8f9fa;
  border: 1px solid #acacac;
  border-radius: 8px;
  margin: 12px 24px; }

#discover_root .room-list-category {
  margin: 16px 0 8px 24px;
  display: flex;
  position: relative; }
  #discover_root .room-list-category a {
    position: relative;
    cursor: pointer;
    line-height: 16px;
    font-size: 12px;
    margin-left: 4px; }
  #discover_root .room-list-category .carousel-info-icon {
    cursor: pointer;
    width: 8px;
    height: 8px;
    display: inline-block;
    background: url(../../images/info-icon-black.svg?a8153a214a15) center center/contain no-repeat;
    align-self: center;
    border-radius: 50%; }
  #discover_root .room-list-category .category-information {
    display: none; }

#discover_root .category-title {
  font-weight: 700;
  font-size: 16px; }

#discover_root .room-list-carousel {
  display: block;
  width: 100%;
  position: relative;
  padding-bottom: 36px; }
  #discover_root .room-list-carousel .room-list-carousel-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: thin;
    scrollbar-color: #f8f9fa #f8f9fa; }
    #discover_root .room-list-carousel .room-list-carousel-wrapper::-webkit-scrollbar-track {
      -webkit-box-shadow: none !important;
      background-color: transparent; }
    #discover_root .room-list-carousel .room-list-carousel-wrapper::-webkit-scrollbar {
      height: 4px !important;
      background-color: transparent; }
    #discover_root .room-list-carousel .room-list-carousel-wrapper::-webkit-scrollbar-thumb {
      background-color: transparent; }
    #discover_root .room-list-carousel .room-list-carousel-wrapper.on-scroll {
      scrollbar-color: #c9c9c9 #f8f8fa;
      -ms-overflow-style: scrollbar;
      scrollbar-face-color: #c9c9c9;
      scrollbar-track-color: #f8f8fa; }
      #discover_root .room-list-carousel .room-list-carousel-wrapper.on-scroll::-webkit-scrollbar-thumb {
        background-color: #c9c9c9;
        border-radius: 4px; }
  #discover_root .room-list-carousel ul.list {
    display: inline-flex;
    overflow: visible;
    white-space: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    left: 0px; }
    #discover_root .room-list-carousel ul.list .subject {
      white-space: normal;
      overflow: hidden; }
    #discover_root .room-list-carousel ul.list > li {
      float: none;
      display: inline-block;
      margin-bottom: 8px;
      flex: 0 0 auto; }
    #discover_root .room-list-carousel ul.list::after {
      content: "";
      display: block;
      width: 24px;
      height: 100%;
      flex: 0 0 auto; }

#discover_root .clearfix1:before,
#discover_root .clearfix1:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden; }

#discover_root .clearfix1:after {
  clear: both; }

#discover_root .carousel-arrow-container {
  position: absolute;
  top: 0; }
  #discover_root .carousel-arrow-container .carousel-arrow {
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    background: white;
    z-index: 1;
    top: 50%; }
    #discover_root .carousel-arrow-container .carousel-arrow:after {
      content: " ";
      position: absolute;
      width: 8px;
      height: 8px;
      margin-top: 13px; }
  #discover_root .carousel-arrow-container.left {
    left: -40px; }
    #discover_root .carousel-arrow-container.left .carousel-arrow {
      left: 16px; }
      #discover_root .carousel-arrow-container.left .carousel-arrow:after {
        margin-left: 13px;
        border-top: 3px solid #222222;
        border-right: 3px solid #222222;
        transform: rotate(-135deg); }
  #discover_root .carousel-arrow-container.right {
    right: -40px; }
    #discover_root .carousel-arrow-container.right .carousel-arrow {
      left: -16px; }
      #discover_root .carousel-arrow-container.right .carousel-arrow:after {
        margin-left: 10px;
        border-top: 3px solid #222222;
        border-right: 3px solid #222222;
        transform: rotate(45deg); }

#discover_root .zoomed-in-tile {
  box-shadow: 0px 0px 7px 0px #000000;
  z-index: 1; }
  #discover_root .zoomed-in-tile.bottom-shadow-reduced {
    box-shadow: 3px -1px 8px -5px #000000, 0px -2px 7px -3px #000000, -2px -2px 5px -3px #000000; }

#discover_root .room_list_room {
  transition: transform 0.1s ease-in-out;
  overflow: hidden;
  box-sizing: border-box;
  position: relative; }

#discover_root .show-all-room {
  display: block;
  box-sizing: border-box;
  padding: 80px 0;
  text-align: center;
  height: 174px;
  width: 180px;
  text-shadow: -1px 0 #efefef, 0 1px #efefef, 1px 0 #efefef, 0 -1px #efefef; }
  #discover_root .show-all-room.room_list_room {
    border-color: #efefef;
    background-color: #f0f1f1;
    margin-bottom: 0; }

#discover_root .triple-rows ul.list {
  flex-flow: column wrap;
  height: 550px; }
  #discover_root .triple-rows ul.list > *:nth-child(-n + 3) {
    margin-left: 24px; }
  #discover_root .triple-rows ul.list > *:nth-child(3n) {
    margin-bottom: 0; }

#discover_root .triple-rows .carousel-arrow-container {
  height: 534px; }

#discover_root .double-rows ul.list {
  flex-flow: column wrap;
  height: 366px; }
  #discover_root .double-rows ul.list > *:nth-child(-n + 2) {
    margin-left: 24px; }
  #discover_root .double-rows ul.list > *:nth-child(2n) {
    margin-bottom: 0; }

#discover_root .double-rows .carousel-arrow-container {
  height: 350px; }

#discover_root .single-row ul.list {
  flex-flow: row nowrap;
  height: 182px; }
  #discover_root .single-row ul.list > *:first-child {
    margin-left: 24px; }
  #discover_root .single-row ul.list > *:nth-child(n) {
    margin-bottom: 0; }

#discover_root .single-row .carousel-arrow-container {
  height: 166px; }

#discover_root .carousel-search {
  padding: 0 0 16px 0;
  margin: 16px 0 0 48px;
  border-bottom: 1px solid #efefef; }

#discover_root .discover-content {
  padding-right: 0; }

#discover_root .circle-container {
  width: 100%;
  bottom: 6px;
  position: absolute;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  #discover_root .circle-container .circle {
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer; }
    #discover_root .circle-container .circle.active::after {
      background: #f47321; }
  #discover_root .circle-container .circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #6E6F70;
    border-radius: 50%;
    display: inline-block;
    margin: 0 auto; }

.filters-info {
  margin-left: 28px; }

.searching-overlay {
  z-index: 10; }