@charset "UTF-8";
.theme-color-darkest {
  color: #1b1e26; }

.theme-color-dark {
  color: #0B3C5D; }

.theme-color-light {
  color: #328CC1; }

.theme-color-white {
  color: #D7CEC7; }

.theme-color-gray {
  color: #786556; }

.theme-color-highlight {
  color: #D9B310; }

.theme-color-blue-dark {
  color: #20243C; }

.theme-color-yellow {
  color: #D9B310; }

.theme-color-yellow-light {
  color: #FBD225; }

.theme-color-green {
  color: #78c478; }

.theme-color-highlight-background {
  color: #2C2C2C; }

.theme-color-black {
  color: #3C3C3E; }

.theme-color-button-dark {
  color: #2D2F30; }

.theme-color-input-label-background {
  color: #202020; }

.theme-color-input-label {
  color: #C8C8C8; }

.theme-color-dimmed-black {
  color: #707070; }

.description-background {
  color: #40464B; }

.theme-color-input-field-background-light {
  color: #3b4045; }

.theme-color-beginner {
  color: #64B13E; }

.theme-color-advanced {
  color: #819EFF; }

.theme-color-featured {
  color: rgba(36, 36, 36, 0.9); }

@keyframes fade_in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fade_out {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes fade_in_0 {
  from {
    opacity: 0; }
  to {
    opacity: 0; } }
@keyframes fade_in_1 {
  from {
    opacity: 0; }
  to {
    opacity: 0.1; } }
@keyframes fade_in_2 {
  from {
    opacity: 0; }
  to {
    opacity: 0.2; } }
@keyframes fade_in_3 {
  from {
    opacity: 0; }
  to {
    opacity: 0.3; } }
@keyframes fade_in_4 {
  from {
    opacity: 0; }
  to {
    opacity: 0.4; } }
@keyframes fade_in_5 {
  from {
    opacity: 0; }
  to {
    opacity: 0.5; } }
@keyframes fade_in_6 {
  from {
    opacity: 0; }
  to {
    opacity: 0.6; } }
@keyframes fade_in_7 {
  from {
    opacity: 0; }
  to {
    opacity: 0.7; } }
@keyframes fade_in_8 {
  from {
    opacity: 0; }
  to {
    opacity: 0.8; } }
@keyframes fade_in_9 {
  from {
    opacity: 0; }
  to {
    opacity: 0.9; } }
@keyframes fade_in_10 {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes bounce {
  from {
    bottom: 0; }
  50% {
    bottom: 3px; }
  to {
    bottom: 0; } }
@keyframes bounce_high {
  from {
    bottom: 0; }
  50% {
    bottom: 10px; }
  to {
    bottom: 0; } }
@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
@keyframes glow {
  from {
    color: #D7CEC7; }
  50% {
    color: #D9B310; }
  to {
    color: #D7CEC7; } }
@keyframes flash_to_3 {
  from {
    opacity: 0.3; }
  50% {
    opacity: 1; }
  to {
    opacity: 0.3; } }
@keyframes svg_flash {
  from {
    fill: white; }
  to {
    fill: #D7CEC7; } }
@keyframes svg_glow {
  from {
    fill: #D7CEC7; }
  50% {
    fill: #D9B310; }
  to {
    fill: #D7CEC7; } }
@keyframes circle_button_icon_appear {
  from {
    opacity: 0;
    height: 10px;
    width: 10px; }
  to {
    opacity: 1;
    height: 40px;
    width: 40px; } }
@keyframes circle_button_title_appear {
  from {
    top: 20px;
    opacity: 0; }
  to {
    top: 10px;
    opacity: 1; } }
@keyframes panel_open_right {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0); } }
@keyframes blink {
  0% {
    opacity: 1; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1; } }
@keyframes flash {
  from {
    background-color: #D7CEC7; }
  to {
    background-color: #D9B310; } }
@keyframes dice_success {
  from {
    color: #D7CEC7; }
  20% {
    font-size: 0.8em; }
  50% {
    font-size: 1.4em; }
  90% {
    font-size: 1.1em; }
  to {
    color: #D9B310; } }
@keyframes dice_failure {
  from {
    color: #D7CEC7; }
  20% {
    font-size: 0.8em; }
  50% {
    font-size: 1.4em; }
  90% {
    font-size: 1.1em; }
  to {
    color: indianred; } }
@keyframes appear_bottom {
  from {
    opacity: 0;
    transform: translateY(50%); }
  to {
    opacity: 1;
    transform: translateY(0%); } }
@keyframes appear_bottom_center {
  from {
    opacity: 0;
    left: 50%;
    transform: translate(-50%, 50%); }
  to {
    opacity: 1;
    left: 50%;
    transform: translate(-50%, 0%); } }
@keyframes appear_to_fit {
  from {
    height: 200%; }
  to {
    height: 100%; } }
.badge.badge-theme-highlight {
  color: #D9B310;
  border: 1px solid #D9B310; }

a {
  cursor: pointer;
  word-break: break-all; }

b {
  font-weight: bold; }

@media (max-width: 600px) {
  .desktop {
    display: none !important; } }
html {
  background: #1b1e26;
  background: url(../../images/background_asset.jpg) no-repeat, #1b1e26;
  background-size: auto; }

body {
  background: none;
  -webkit-overflow-scrolling: touch; }
  body::after {
    display: none;
    content: "xs"; }

.row.small-gutters {
  margin-left: -0.5rem;
  margin-right: -0.5rem; }
  .row.small-gutters .col, .row.small-gutters .col-1, .row.small-gutters .col-10, .row.small-gutters .col-11, .row.small-gutters .col-12, .row.small-gutters .col-2, .row.small-gutters .col-3, .row.small-gutters .col-4, .row.small-gutters .col-5, .row.small-gutters .col-6, .row.small-gutters .col-7, .row.small-gutters .col-8, .row.small-gutters .col-9, .row.small-gutters .col-auto, .row.small-gutters .col-lg, .row.small-gutters .col-lg-1, .row.small-gutters .col-lg-10, .row.small-gutters .col-lg-11, .row.small-gutters .col-lg-12, .row.small-gutters .col-lg-2, .row.small-gutters .col-lg-3, .row.small-gutters .col-lg-4, .row.small-gutters .col-lg-5, .row.small-gutters .col-lg-6, .row.small-gutters .col-lg-7, .row.small-gutters .col-lg-8, .row.small-gutters .col-lg-9, .row.small-gutters .col-lg-auto, .row.small-gutters .col-md, .row.small-gutters .col-md-1, .row.small-gutters .col-md-10, .row.small-gutters .col-md-11, .row.small-gutters .col-md-12, .row.small-gutters .col-md-2, .row.small-gutters .col-md-3, .row.small-gutters .col-md-4, .row.small-gutters .col-md-5, .row.small-gutters .col-md-6, .row.small-gutters .col-md-7, .row.small-gutters .col-md-8, .row.small-gutters .col-md-9, .row.small-gutters .col-md-auto, .row.small-gutters .col-sm, .row.small-gutters .col-sm-1, .row.small-gutters .col-sm-10, .row.small-gutters .col-sm-11, .row.small-gutters .col-sm-12, .row.small-gutters .col-sm-2, .row.small-gutters .col-sm-3, .row.small-gutters .col-sm-4, .row.small-gutters .col-sm-5, .row.small-gutters .col-sm-6, .row.small-gutters .col-sm-7, .row.small-gutters .col-sm-8, .row.small-gutters .col-sm-9, .row.small-gutters .col-sm-auto, .row.small-gutters .col-xl, .row.small-gutters .col-xl-1, .row.small-gutters .col-xl-10, .row.small-gutters .col-xl-11, .row.small-gutters .col-xl-12, .row.small-gutters .col-xl-2, .row.small-gutters .col-xl-3, .row.small-gutters .col-xl-4, .row.small-gutters .col-xl-5, .row.small-gutters .col-xl-6, .row.small-gutters .col-xl-7, .row.small-gutters .col-xl-8, .row.small-gutters .col-xl-9, .row.small-gutters .col-xl-auto {
    padding-left: 0.5rem;
    padding-right: 0.5rem; }

.noscroll {
  overflow: hidden; }
  @media (min-width: 600px) {
    .noscroll {
      padding-right: 10px;
      background-color: black; }
      .noscroll .nav_tabs, .noscroll .nav_tabs.slide_up {
        right: 10px; } }

.button-reset {
  padding: 0;
  border: none;
  background: none; }

.highlighted {
  color: #D9B310; }

.App, .reset_password_page {
  font-family: "Tahoma", sans-serif;
  font-weight: 100;
  color: #D7CEC7;
  display: flex;
  flex-direction: row;
  position: relative; }
  @media (min-width: 576px) {
    .App, .reset_password_page {
      font-size: 1.5em; } }
  .App .app_content, .reset_password_page .app_content {
    flex: 1;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(0, 0, 0, 0.45), #110B19 80vh); }
  .App #cookieAlert p, .reset_password_page #cookieAlert p {
    margin: 0;
    font-size: 0.9em; }
  .App #cookieAlert.alert, .reset_password_page #cookieAlert.alert {
    margin-bottom: 0;
    border-radius: 0;
    background-color: #0B3C5D;
    border: none;
    color: #D7CEC7; }
  .App .page_title, .reset_password_page .page_title {
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em; }
  .App .page_content, .reset_password_page .page_content {
    flex: 1;
    -webkit-overflow-scrolling: touch; }
  .App pre, .reset_password_page pre {
    font-family: "Tahoma", sans-serif;
    margin-bottom: initial;
    overflow: initial;
    font-size: 1em;
    white-space: pre-line; }
  .App.no_access .logo, .reset_password_page.no_access .logo {
    width: 50px;
    height: 50px;
    margin: 30px auto 50px auto; }
  .App.no_access .form, .reset_password_page.no_access .form {
    margin-bottom: 20px; }
  .App.no_access .label, .reset_password_page.no_access .label {
    font-size: 1.3em;
    font-weight: 900; }
  .App.no_access input, .reset_password_page.no_access input {
    width: 100%;
    display: block;
    padding: 10px 3px;
    font-size: 1.2em;
    margin-bottom: 10px; }
  .App.no_access .button_container, .reset_password_page.no_access .button_container {
    text-align: center; }
    .App.no_access .button_container button, .reset_password_page.no_access .button_container button {
      width: 100px; }
  .App.updated_privacy, .reset_password_page.updated_privacy {
    padding-top: 50px; }
    .App.updated_privacy a, .reset_password_page.updated_privacy a {
      display: inline-block; }
    .App.updated_privacy .button_flat, .reset_password_page.updated_privacy .button_flat {
      flex: 0 1 auto; }
  .App a:not([href]):not([tabindex]), .reset_password_page a:not([href]):not([tabindex]) {
    color: #328CC1; }
    .App a:not([href]):not([tabindex]):hover, .reset_password_page a:not([href]):not([tabindex]):hover {
      color: #3492c9; }

.screen {
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: fade_in 0.3s;
  margin-top: 43px; }
  .screen .container_desktop {
    display: flex;
    flex-direction: column; }
  .screen.game_list_screen .container_desktop {
    overflow: hidden; }

.full_screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100; }
  .full_screen .page_content {
    overflow: auto; }
  .full_screen.instant {
    animation: none; }

.input_field, .text_area_field {
  display: flex;
  width: 100%; }
  .input_field .label, .text_area_field .label {
    flex: 0 1 auto;
    font-family: "Tahoma", sans-serif;
    font-weight: 900;
    background-color: #202020;
    padding: 10px 0;
    font-size: 20px;
    min-height: 50px; }
    .input_field .label svg, .input_field .label img, .text_area_field .label svg, .text_area_field .label img {
      height: 20px; }

input {
  flex: 1; }

input, textarea {
  background-color: rgba(27, 30, 38, 0.3);
  color: #D7CEC7;
  padding: 0 10px;
  font-family: "Tahoma", sans-serif;
  border: none; }
  input:focus, textarea:focus {
    outline: none; }
  input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); }

.modal {
  color: #1b1e26;
  font-family: "Tahoma", sans-serif;
  font-weight: 400; }

.search_input {
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  padding: 5px; }
  .search_input .search_bar {
    height: 30px;
    display: flex; }
  .search_input img {
    flex: 0 1 auto;
    height: 20px;
    margin-right: 3px;
    position: relative;
    top: 5px; }
  .search_input input {
    flex: 1; }
  .search_input .filters {
    text-align: right; }
    .search_input .filters .switch_box .switch {
      top: 2px;
      vertical-align: initial; }
    .search_input .filters .switch_box .label {
      display: inline-block;
      margin-right: 10px; }

.screen_info.warning {
  border-radius: 10px;
  background-color: rgba(11, 60, 93, 0.5);
  padding: 15px;
  margin-top: 10px; }

a {
  color: #328CC1; }
  a:hover {
    color: #3492c9;
    text-decoration: none; }

a.discrete {
  color: #D7CEC7; }
  a.discrete:hover {
    color: white; }

.space {
  flex: 1; }

.fadein {
  animation: fade_in 0.5s; }

.bottom_margin {
  margin-bottom: 70px; }

.flow_buttons {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  margin-bottom: 2em; }
  .flow_buttons.container_mobile {
    margin-bottom: 2em; }
  .flow_buttons button {
    flex: 1; }
    .flow_buttons button:not(:last-child) {
      margin-right: 1em; }

.rank_name {
  margin-top: -0.5em;
  font-size: 0.8em; }
  .rank_name.no {
    color: #D7CEC7; }
  .rank_name.co {
    color: #f19d40; }
  .rank_name.si {
    color: #A4C9DF; }
  .rank_name.go {
    color: #D9B310; }
  .rank_name.pl {
    color: #dcf6f7; }
  .rank_name.le {
    color: #a962f5; }

.need_upgrade .rank_name {
  font-size: initial;
  margin-top: initial; }

hr {
  border-top-color: #707070;
  width: 100%; }
  hr.discrete {
    margin-top: 0.5rem; }

.clickable {
  cursor: pointer;
  user-select: none; }
  .clickable.disabled {
    cursor: initial;
    opacity: 0.5;
    pointer-events: none; }

.background_dark {
  background-color: #1b1e26; }
  .background_dark .screen_title .popover_container > button .icon svg * {
    fill: #D7CEC7 !important; }

.close {
  color: white; }

.modal-dialog h5 {
  color: black; }

svg {
  height: 100%;
  width: auto; }
  svg * {
    fill: #D7CEC7; }

.Typist .Cursor {
  display: inline-block; }

.Typist .Cursor--blinking {
  opacity: 1;
  animation: blink 0.75s linear infinite; }

.fadein0 {
  animation: fade_in_0 0.5s both; }

.fadein1 {
  animation: fade_in_1 0.5s both; }

.fadein2 {
  animation: fade_in_2 0.5s both; }

.fadein3 {
  animation: fade_in_3 0.5s both; }

.fadein4 {
  animation: fade_in_4 0.5s both; }

.fadein5 {
  animation: fade_in_5 0.5s both; }

.fadein6 {
  animation: fade_in_6 0.5s both; }

.fadein7 {
  animation: fade_in_7 0.5s both; }

.fadein8 {
  animation: fade_in_8 0.5s both; }

.fadein9 {
  animation: fade_in_9 0.5s both; }

.fadein10 {
  animation: fade_in_10 0.5s both; }

.App.keyboard_opened .hide_when_keyboard {
  display: none !important; }
.App.keyboard_opened .reduce_when_keyboard {
  height: 0 !important; }

@media (min-width: 768px) {
  body::after {
    content: "sm"; } }
@media (min-width: 992px) {
  body::after {
    content: "md"; } }
@media (min-width: 1200px) {
  body::after {
    content: "lg"; } }
.container_mobile {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 768px) {
  .container_mobile {
    width: 750px; } }
@media (min-width: 992px) {
  .container_mobile {
    width: 970px; } }
@media (min-width: 1200px) {
  .container_mobile {
    width: 1170px; } }
.offline {
  color: white;
  padding-top: 2em; }

.upper_tabs {
  display: flex;
  transition: all 0.25s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .upper_tabs .upper_tab {
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 5px 0;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 8px;
    text-align: center; }
    .upper_tabs .upper_tab.active, .upper_tabs .upper_tab.selected {
      color: #D9B310; }
      .upper_tabs .upper_tab.active:after, .upper_tabs .upper_tab.selected:after {
        opacity: 1;
        width: 60%;
        left: 20%; }
    .upper_tabs .upper_tab.disabled {
      opacity: 0.3;
      pointer-events: none; }
    .upper_tabs .upper_tab:after {
      position: absolute;
      bottom: 15%;
      display: block;
      content: " ";
      left: 30%;
      width: 40%;
      height: 4px;
      background-color: #D9B310;
      border-radius: 5px;
      opacity: 0;
      transition: all 0.25s; }
  .upper_tabs:not(.no_bars) .upper_tab:not(:first-child):not(:first-child):before {
    content: "";
    display: block;
    height: 50%;
    width: 2px;
    background-color: #707070;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; }
  .upper_tabs svg {
    height: 1em;
    width: auto;
    margin-right: 0.5em; }
    .upper_tabs svg * {
      fill: #D7CEC7 !important; }

.tabbed_content {
  margin-top: 10px; }

.navigation_backdrop {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1b1e26;
  opacity: 0.7;
  animation: fade_in_7 0.5s; }

.nav_tabs {
  padding-bottom: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  font-size: 22px; }
  .nav_tabs.rank_0 .sliding_pane {
    background: linear-gradient(to left, #84807d, rgba(132, 128, 125, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_0 .sliding_pane {
        background: linear-gradient(to left, #84807d, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.rank_1 .sliding_pane {
    background: linear-gradient(to left, #9e6d33, rgba(158, 109, 51, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_1 .sliding_pane {
        background: linear-gradient(to left, #9e6d33, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.rank_2 .sliding_pane {
    background: linear-gradient(to left, #7791a0, rgba(119, 145, 160, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_2 .sliding_pane {
        background: linear-gradient(to left, #7791a0, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.rank_3 .sliding_pane {
    background: linear-gradient(to left, #af931e, rgba(175, 147, 30, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_3 .sliding_pane {
        background: linear-gradient(to left, #af931e, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.rank_4 .sliding_pane {
    background: linear-gradient(to left, #90aaab, rgba(144, 170, 171, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_4 .sliding_pane {
        background: linear-gradient(to left, #90aaab, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.rank_5 .sliding_pane, .nav_tabs.rank_6 .sliding_pane {
    background: linear-gradient(to left, #541e8e, rgba(84, 30, 142, 0.2) 70%, rgba(0, 0, 0, 0.1)), url(../../images/background_asset.jpg) no-repeat;
    background-size: auto; }
    @media (min-width: 600px) {
      .nav_tabs.rank_5 .sliding_pane, .nav_tabs.rank_6 .sliding_pane {
        background: linear-gradient(to left, #541e8e, transparent), url(../../images/background_asset.jpg) no-repeat;
        background-size: cover; } }
  .nav_tabs.slide_up {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 250ms ease-in;
    transform: none;
    will-change: transform; }
    .nav_tabs.slide_up .sliding_pane, .nav_tabs.slide_up .slide_sub_bar {
      position: relative; }
    .nav_tabs.slide_up.folded {
      transform: translateY(var(--top_bar_height, -103%)); }
  .nav_tabs .sliding_pane > .container_desktop, .nav_tabs .sliding_pane > .container {
    display: flex;
    flex-direction: row; }
  .nav_tabs .tab {
    position: relative;
    padding-bottom: 8px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    user-select: none;
    cursor: pointer;
    color: white;
    padding-top: 0.35em;
    padding-bottom: 0.4em; }
    .nav_tabs .tab.active, .nav_tabs .tab.selected {
      color: #D9B310; }
      .nav_tabs .tab.active:after, .nav_tabs .tab.selected:after {
        opacity: 1;
        width: 60%;
        left: 20%; }
    .nav_tabs .tab.disabled {
      opacity: 0.3;
      pointer-events: none; }
    .nav_tabs .tab:after {
      position: absolute;
      bottom: 15%;
      display: block;
      content: " ";
      left: 30%;
      width: 40%;
      height: 4px;
      background-color: #D9B310;
      border-radius: 5px;
      opacity: 0;
      transition: all 0.25s; }
    .nav_tabs .tab > button {
      width: 100%; }
    .nav_tabs .tab button.icon_only .icon {
      height: initial; }
    .nav_tabs .tab:after {
      bottom: 0.1em; }
    .nav_tabs .tab#avatar_menu .icon {
      width: 1.2em;
      height: 1.2em; }
    .nav_tabs .tab#avatar_menu .portrait {
      height: 100%;
      width: auto;
      animation: none; }
    .nav_tabs .tab#avatar_menu .button_component {
      display: flex;
      align-items: center;
      justify-content: center; }
    .nav_tabs .tab#avatar_menu .popover_custom .user_info {
      text-align: right; }
      .nav_tabs .tab#avatar_menu .popover_custom .user_info .username {
        font-size: 1.2em; }
      .nav_tabs .tab#avatar_menu .popover_custom .user_info .rank {
        margin-top: 0.3em;
        font-size: 0.9em; }
    .nav_tabs .tab#avatar_menu .upgrade_arrow {
      position: absolute;
      bottom: 0.2em;
      transform: translateX(-30%); }
      .nav_tabs .tab#avatar_menu .upgrade_arrow svg, .nav_tabs .tab#avatar_menu .upgrade_arrow img {
        height: 0.7em; }
    .nav_tabs .tab > .icon {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      flex: 0 0 auto; }
      .nav_tabs .tab > .icon > svg {
        vertical-align: middle;
        height: 1.2em;
        width: auto; }
        .nav_tabs .tab > .icon > svg * {
          fill: white !important; }
      .nav_tabs .tab > .icon img {
        height: 1.2em; }
    .nav_tabs .tab.highlighted {
      color: #D9B310; }
      .nav_tabs .tab.highlighted > .icon svg * {
        fill: #D9B310 !important; }
  .nav_tabs .mobile_separator {
    flex: 0;
    margin-left: 0.2em;
    margin-right: 0.2em;
    position: relative; }
    .nav_tabs .mobile_separator:before {
      content: "";
      display: block;
      height: 50%;
      width: 1px;
      background-color: #A4A4A4;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      z-index: 1; }
  .nav_tabs .tab_title {
    display: none;
    font-size: 0.9em; }
  .nav_tabs #current_game {
    display: none; }
    .nav_tabs #current_game svg * {
      fill: #328CC1 !important; }
  .nav_tabs .back_button {
    cursor: pointer;
    opacity: 0.6;
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center; }
    .nav_tabs .back_button:hover {
      opacity: 1; }
    .nav_tabs .back_button svg {
      height: auto;
      width: 17px; }
      .nav_tabs .back_button svg * {
        fill: #D7CEC7; }
  .nav_tabs .container_desktop > .title, .nav_tabs .container > .title {
    flex: 5;
    position: relative;
    font-size: 0.7em;
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 2em), transparent);
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 2em), transparent);
    display: flex;
    align-items: center; }
    .nav_tabs .container_desktop > .title .overflow_content, .nav_tabs .container > .title .overflow_content {
      position: absolute;
      white-space: nowrap; }
  .nav_tabs .title_container {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    flex: 5;
    justify-content: center; }
    .nav_tabs .title_container .subtitle {
      font-size: 0.4em;
      margin-top: -0.5em;
      margin-bottom: -1.3em; }
    .nav_tabs .title_container .title {
      position: relative;
      top: 8px;
      font-size: 0.8em; }
  .nav_tabs.no_back_button .container_desktop > .title, .nav_tabs.no_back_button .container > .title, .nav_tabs.no_back_button .title_container {
    margin-left: 10px; }

.background_dark .nav_tabs.rank_0 .sliding_pane {
  background: linear-gradient(to left, #84807d, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_0 .sliding_pane {
      background: linear-gradient(to left, #84807d, #1b1e26);
      background-size: auto; } }
.background_dark .nav_tabs.rank_1 .sliding_pane {
  background: linear-gradient(to left, #9e6d33, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_1 .sliding_pane {
      background: linear-gradient(to left, #9e6d33, #1b1e26);
      background-size: auto; } }
.background_dark .nav_tabs.rank_2 .sliding_pane {
  background: linear-gradient(to left, #7791a0, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_2 .sliding_pane {
      background: linear-gradient(to left, #7791a0, #1b1e26);
      background-size: auto; } }
.background_dark .nav_tabs.rank_3 .sliding_pane {
  background: linear-gradient(to left, #af931e, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_3 .sliding_pane {
      background: linear-gradient(to left, #af931e, #1b1e26);
      background-size: auto; } }
.background_dark .nav_tabs.rank_4 .sliding_pane {
  background: linear-gradient(to left, #90aaab, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_4 .sliding_pane {
      background: linear-gradient(to left, #90aaab, #1b1e26);
      background-size: auto; } }
.background_dark .nav_tabs.rank_5 .sliding_pane, .background_dark .nav_tabs.rank_6 .sliding_pane {
  background: linear-gradient(to left, #541e8e, #1b1e26); }
  @media (min-width: 600px) {
    .background_dark .nav_tabs.rank_5 .sliding_pane, .background_dark .nav_tabs.rank_6 .sliding_pane {
      background: linear-gradient(to left, #541e8e, #1b1e26);
      background-size: auto; } }

.nav_tabs.fullscreen {
  bottom: 0;
  display: flex;
  flex-direction: column; }
  .nav_tabs.fullscreen .sliding_pane {
    border-bottom: solid 1px rgba(215, 206, 199, 0.5); }
  .nav_tabs.fullscreen .slide_sub_bar {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden; }
  .nav_tabs.fullscreen .jump_to {
    display: none; }

.upper_tabs .badge, .nav_tabs .badge {
  background-color: red;
  border-radius: 100%;
  color: white;
  font-size: 0.6em;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1; }
  @media (min-width: 600px) {
    .upper_tabs .badge, .nav_tabs .badge {
      right: -1.6em; } }

.loading_mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #0B3C5D;
  z-index: 1;
  pointer-events: none; }
  .loading_mask .message {
    text-align: center; }

.loading_icon {
  opacity: 0.5;
  position: relative;
  pointer-events: none;
  transition: opacity 0.5s; }
  .loading_icon svg, .loading_icon img {
    height: 15px;
    width: auto;
    animation: spin infinite 1s linear;
    position: absolute; }
    .loading_icon svg *, .loading_icon img * {
      fill: #D7CEC7; }
  .loading_icon.size1 {
    height: 15px; }
  .loading_icon.size2 {
    width: 100%;
    text-align: center;
    height: 3em;
    margin: 1em 0;
    left: -1.5em; }
    .loading_icon.size2 svg, .loading_icon.size2 img {
      height: 100%; }
  .loading_icon.hidden {
    position: absolute;
    opacity: 0; }
    .loading_icon.hidden svg {
      animation: none; }

.loading_placeholder {
  height: 1.5em;
  width: 100%;
  background: linear-gradient(to right, rgba(32, 32, 32, 0.5), transparent 50%, transparent); }

.markdown_text {
  white-space: pre-line; }
  .markdown_text .underlined {
    text-decoration: underline; }
  .markdown_text h4, .markdown_text h5, .markdown_text h6 {
    margin-bottom: 0.25em; }
  .markdown_text h4 {
    font-size: 1.5em; }
  .markdown_text h5 {
    font-size: 1.2em; }
  .markdown_text h6 {
    font-size: 1.1em; }
  .markdown_text ul {
    list-style: square;
    margin-bottom: 0; }

a[type='button'] {
  -webkit-appearance: none; }
  a[type='button']:hover {
    text-decoration: none; }

.button_base, a[type='button'] {
  display: inline-flex;
  position: relative;
  background-color: #2D2F30;
  border: none;
  color: white;
  transition: all 0.25s, height 0.5s;
  border-radius: 6px;
  align-items: center;
  text-align: center;
  padding: 0 0.5em;
  min-height: 2.9em;
  word-break: initial; }
  .button_base:hover:not(:disabled), a[type='button']:hover:not(:disabled) {
    cursor: pointer;
    background-color: #393c3d; }
  .button_base:active:not(:disabled), a[type='button']:active:not(:disabled) {
    background-color: rgba(45, 47, 48, 0.7);
    transition: background-color 0.15s; }
  .button_base:focus, a[type='button']:focus {
    outline: none; }
  .button_base:disabled, a[type='button']:disabled {
    opacity: 0.4; }
  .button_base small, a[type='button'] small {
    font-size: 50%;
    display: block; }
  .button_base img, a[type='button'] img {
    vertical-align: baseline; }
  .button_base svg path, a[type='button'] svg path {
    fill: #D7CEC7 !important; }
  .button_base.light svg path, a[type='button'].light svg path {
    fill: #3C3C3E !important; }
  .button_base.highlighted .button_title, a[type='button'].highlighted .button_title {
    color: #D9B310; }
  .button_base.highlighted svg *, a[type='button'].highlighted svg * {
    fill: #D9B310 !important; }
  .button_base .button_title, a[type='button'] .button_title {
    flex: 1; }
  .button_base .icon, a[type='button'] .icon {
    height: 1.5em; }
    .button_base .icon svg, .button_base .icon img, a[type='button'] .icon svg, a[type='button'] .icon img {
      height: 100%; }
  .button_base:not(.icon_only):not(.button_circle) .icon, a[type='button']:not(.icon_only):not(.button_circle) .icon {
    margin-left: 0.5em; }
  .button_base .badge, a[type='button'] .badge {
    position: absolute;
    font-size: 0.5em;
    bottom: 0;
    right: -0.5em;
    color: white;
    z-index: 0; }
    .button_base .badge:before, a[type='button'] .badge:before {
      z-index: -1;
      content: " ";
      background-color: red;
      border-radius: 100%;
      height: 1.5em;
      width: 1.5em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .button_base .badge.top, a[type='button'] .badge.top {
      top: -0.5em;
      bottom: initial; }
  .button_base .loading_icon, a[type='button'] .loading_icon {
    width: 15px; }

button.icon_only:not(.button_circle) {
  padding: 0;
  height: 45px;
  width: 45px;
  justify-content: center;
  min-height: 0;
  min-width: 0; }
  button.icon_only:not(.button_circle) .icon {
    display: flex;
    align-items: center; }
    button.icon_only:not(.button_circle) .icon svg, button.icon_only:not(.button_circle) .icon img {
      display: inline-block;
      height: 20px; }

button.light, a[type='button'].light {
  color: #1b1e26;
  background-color: #D7CEC7;
  border-color: transparent; }

button.golden, a[type='button'].golden {
  background: linear-gradient(to right, #ffb401, #e3c21e);
  opacity: 1;
  font-weight: 600;
  color: #1b1e26;
  box-shadow: 0 0px 2px 1px #e3c21e;
  border-color: #D9B310; }
  button.golden:hover:not(:disabled), a[type='button'].golden:hover:not(:disabled) {
    background-color: #D9B310;
    opacity: 1; }
  button.golden:active:not(:disabled), a[type='button'].golden:active:not(:disabled) {
    background-color: #D9B310; }
  button.golden svg *, a[type='button'].golden svg * {
    fill: #1b1e26 !important; }

button.button_danger, a[type='button'].button_danger {
  background-color: #dc3545; }
  button.button_danger:hover:not(:disabled), a[type='button'].button_danger:hover:not(:disabled) {
    background-color: #c82333; }

button.wide, a[type='button'].wide {
  min-width: 12em; }

button.button_footer, a[type='button'].button_footer {
  margin-top: 2em;
  margin-bottom: 2em; }

button.button_header {
  margin-top: 1.5em;
  margin-bottom: 1em; }

button.button_list, a[type='button'].button_list {
  white-space: nowrap;
  display: flex;
  padding: 0.7em 0.7em 0.7em 0.3em;
  cursor: pointer;
  background-color: transparent;
  text-align: left;
  width: 100%;
  transition: background-color 0.25s; }
  button.button_list .icon, a[type='button'].button_list .icon {
    margin-right: 1em;
    width: 1em; }
    button.button_list .icon svg, a[type='button'].button_list .icon svg {
      height: 1em; }

button.button_circle, a[type='button'].button_circle {
  display: flex;
  flex-direction: row-reverse;
  padding: 0;
  background-color: #2D2F30;
  border-radius: 100%;
  height: 45px;
  width: 45px;
  min-height: 0;
  min-width: 0;
  position: relative; }
  button.button_circle .icon, a[type='button'].button_circle .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20px;
    width: 20px; }
    button.button_circle .icon svg, button.button_circle .icon img, a[type='button'].button_circle .icon svg, a[type='button'].button_circle .icon img {
      vertical-align: top;
      height: 100%;
      width: 100%; }
  button.button_circle .button_title, a[type='button'].button_circle .button_title {
    position: relative;
    top: 10px; }
  button.button_circle:hover:not(:disabled), a[type='button'].button_circle:hover:not(:disabled) {
    background-color: #323435; }
  button.button_circle:active:not(:disabled), a[type='button'].button_circle:active:not(:disabled) {
    background-color: #323435; }
  button.button_circle.has_background_shape, a[type='button'].button_circle.has_background_shape {
    background-color: transparent;
    border-radius: 0; }
    button.button_circle.has_background_shape .background_shape, a[type='button'].button_circle.has_background_shape .background_shape {
      height: 100%;
      width: 100%; }
      button.button_circle.has_background_shape .background_shape svg *, a[type='button'].button_circle.has_background_shape .background_shape svg * {
        fill: #2D2F30 !important; }
    button.button_circle.has_background_shape:hover:not(:disabled), a[type='button'].button_circle.has_background_shape:hover:not(:disabled) {
      background-color: transparent; }
      button.button_circle.has_background_shape:hover:not(:disabled) .background_shape svg *, a[type='button'].button_circle.has_background_shape:hover:not(:disabled) .background_shape svg * {
        fill: #323435 !important; }
    button.button_circle.has_background_shape:active:not(:disabled), a[type='button'].button_circle.has_background_shape:active:not(:disabled) {
      background-color: transparent; }
      button.button_circle.has_background_shape:active:not(:disabled) .background_shape svg *, a[type='button'].button_circle.has_background_shape:active:not(:disabled) .background_shape svg * {
        fill: #323435 !important; }

button.transparent, a[type='button'].transparent {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white; }
  button.transparent:hover:not(:disabled), a[type='button'].transparent:hover:not(:disabled) {
    background-color: transparent;
    opacity: 0.8; }
  button.transparent:active:not(:disabled), a[type='button'].transparent:active:not(:disabled) {
    background-color: transparent; }

button.golden_reverse, a.golden_reverse {
  border: solid 2px #D9B310; }

button.button_light_border {
  border: solid 1px #707070; }

a.button_link svg {
  height: 3em;
  margin-right: 0; }

button.attention_catch {
  position: relative;
  animation: bounce_high 0.5s; }

.tone_coloring.angry .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.tone_coloring.angry .tone {
  color: indianred; }
.tone_coloring.annoyed .tone_border {
  border-color: #905757;
  border-left-width: 3px; }
.tone_coloring.annoyed .tone {
  color: #905757; }
.tone_coloring.anxious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.tone_coloring.anxious .tone {
  color: #5F9EA0; }
.tone_coloring.affectionate .tone_border {
  border-color: #f796c6;
  border-left-width: 3px; }
.tone_coloring.affectionate .tone {
  color: #f796c6; }
.tone_coloring.alarmed .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.tone_coloring.alarmed .tone {
  color: #D9B310; }
.tone_coloring.amused .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.tone_coloring.amused .tone {
  color: lightskyblue; }
.tone_coloring.brooding .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.tone_coloring.brooding .tone {
  color: #D7CEC7; }
.tone_coloring.cheerful .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.tone_coloring.cheerful .tone {
  color: #328CC1; }
.tone_coloring.confident .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.tone_coloring.confident .tone {
  color: #8a80cb; }
.tone_coloring.confused .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.tone_coloring.confused .tone {
  color: #A5A5B0; }
.tone_coloring.curious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.tone_coloring.curious .tone {
  color: #5F9EA0; }
.tone_coloring.disappointed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.tone_coloring.disappointed .tone {
  color: cadetblue; }
.tone_coloring.disgusted .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.tone_coloring.disgusted .tone {
  color: darkseagreen; }
.tone_coloring.desperate .tone_border {
  border-color: #C4751E;
  border-left-width: 3px; }
.tone_coloring.desperate .tone {
  color: #C4751E; }
.tone_coloring.doubtful .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.tone_coloring.doubtful .tone {
  color: #D7CEC7; }
.tone_coloring.excited .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.tone_coloring.excited .tone {
  color: #D9B310; }
.tone_coloring.impressed .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.tone_coloring.impressed .tone {
  color: #767CCB; }
.tone_coloring.pensive .tone_border {
  border-color: #EDECEB;
  border-left-width: 3px; }
.tone_coloring.pensive .tone {
  color: #EDECEB; }
.tone_coloring.playful .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.tone_coloring.playful .tone {
  color: lightskyblue; }
.tone_coloring.sad .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.tone_coloring.sad .tone {
  color: cadetblue; }
.tone_coloring.sarcastic .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.tone_coloring.sarcastic .tone {
  color: #CD8F5C; }
.tone_coloring.scared .tone_border {
  border-color: #8dccce;
  border-left-width: 3px; }
.tone_coloring.scared .tone {
  color: #8dccce; }
.tone_coloring.seductive .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.tone_coloring.seductive .tone {
  color: #767CCB; }
.tone_coloring.serious .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.tone_coloring.serious .tone {
  color: #7e7e89; }
.tone_coloring.surprised .tone_border {
  border-color: #e2ca49;
  border-left-width: 3px; }
.tone_coloring.surprised .tone {
  color: #e2ca49; }
.tone_coloring.suspicious .tone_border {
  border-color: #a5a5b0;
  border-left-width: 3px; }
.tone_coloring.suspicious .tone {
  color: #a5a5b0; }
.tone_coloring.threatening .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.tone_coloring.threatening .tone {
  color: indianred; }
.tone_coloring.nervous .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.tone_coloring.nervous .tone {
  color: cadetblue; }
.tone_coloring.worried .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.tone_coloring.worried .tone {
  color: cadetblue; }
.tone_coloring.apologetic .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.tone_coloring.apologetic .tone {
  color: #5F9EA0; }
.tone_coloring.baffled .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.tone_coloring.baffled .tone {
  color: darkseagreen; }
.tone_coloring.embarrassed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.tone_coloring.embarrassed .tone {
  color: cadetblue; }
.tone_coloring.fascinated .tone_border {
  border-color: #d9a02f;
  border-left-width: 3px; }
.tone_coloring.fascinated .tone {
  color: #d9a02f; }
.tone_coloring.friendly .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.tone_coloring.friendly .tone {
  color: #328CC1; }
.tone_coloring.haughty .tone_border {
  border-color: #4ec19a;
  border-left-width: 3px; }
.tone_coloring.haughty .tone {
  color: #4ec19a; }
.tone_coloring.mocking .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.tone_coloring.mocking .tone {
  color: #CD8F5C; }
.tone_coloring.passionate .tone_border {
  border-color: #dcba08;
  border-left-width: 3px; }
.tone_coloring.passionate .tone {
  color: #dcba08; }
.tone_coloring.panicked .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.tone_coloring.panicked .tone {
  color: #cd691b; }
.tone_coloring.panting .tone_border {
  border-color: #a97268;
  border-left-width: 3px; }
.tone_coloring.panting .tone {
  color: #a97268; }
.tone_coloring.puzzled .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.tone_coloring.puzzled .tone {
  color: #A5A5B0; }
.tone_coloring.proud .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.tone_coloring.proud .tone {
  color: #8a80cb; }
.tone_coloring.pressing .tone_border {
  border-color: #cb5837;
  border-left-width: 3px; }
.tone_coloring.pressing .tone {
  color: #cb5837; }
.tone_coloring.relieved .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.tone_coloring.relieved .tone {
  color: darkseagreen; }
.tone_coloring.remorseful .tone_border {
  border-color: skyblue;
  border-left-width: 3px; }
.tone_coloring.remorseful .tone {
  color: skyblue; }
.tone_coloring.sleepy .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.tone_coloring.sleepy .tone {
  color: darkseagreen; }
.tone_coloring.shy .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.tone_coloring.shy .tone {
  color: #5F9EA0; }
.tone_coloring.suffering .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.tone_coloring.suffering .tone {
  color: #cd691b; }
.tone_coloring.tense .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.tone_coloring.tense .tone {
  color: #7e7e89; }
.tone_coloring.tired .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.tone_coloring.tired .tone {
  color: darkseagreen; }
.tone_coloring.admiring .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.tone_coloring.admiring .tone {
  color: #767CCB; }
.tone_coloring.detached .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.tone_coloring.detached .tone {
  color: #7e7e89; }
.tone_coloring.condescending .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.tone_coloring.condescending .tone {
  color: #CD8F5C; }
.tone_coloring.kind .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.tone_coloring.kind .tone {
  color: #328CC1; }

.screen_title {
  user-select: none;
  padding: 3px 0 2px 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
  .screen_title > .container > .icon {
    display: none; }
  .screen_title .container {
    display: flex;
    flex: 0 1 auto;
    padding: 10px 10px 5px 10px;
    align-items: center; }
    .screen_title .container button.icon_only {
      height: 1.5em;
      min-height: 1.5em;
      width: 2.3em;
      padding: 0;
      background-color: transparent;
      vertical-align: top;
      border: none; }
  .screen_title .back_button {
    cursor: pointer;
    opacity: 0.6;
    padding-right: 15px; }
    .screen_title .back_button:hover {
      opacity: 1; }
    .screen_title .back_button svg {
      height: auto;
      width: 17px; }
      .screen_title .back_button svg * {
        fill: #D7CEC7; }
  .screen_title .menu_icon {
    cursor: pointer;
    opacity: 0.6;
    padding-right: 15px; }
    .screen_title .menu_icon:hover {
      opacity: 1; }
    .screen_title .menu_icon svg {
      height: 15px;
      width: auto; }
      .screen_title .menu_icon svg * {
        fill: #D7CEC7; }
    .screen_title .menu_icon.highlighted svg * {
      fill: #D9B310; }
  .screen_title > .icon {
    display: none;
    position: relative;
    margin-right: 8px; }
    .screen_title > .icon svg, .screen_title > .icon img {
      position: relative;
      top: -3px;
      height: 25px; }
      .screen_title > .icon svg *, .screen_title > .icon img * {
        fill: #D7CEC7 !important; }
  .screen_title .container > .title {
    flex: 1;
    position: relative;
    mask-image: linear-gradient(to right, #000, #000 calc(100% - 2em), transparent);
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(100% - 2em), transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    height: 1.5em; }
    .screen_title .container > .title .overflow_content {
      position: absolute;
      white-space: nowrap; }
  .screen_title.clickable .title {
    cursor: pointer; }
  .screen_title .title_container {
    display: inline-flex;
    flex-direction: column;
    vertical-align: -webkit-baseline-middle;
    vertical-align: middle;
    position: relative;
    top: -4px;
    flex: 1; }
    .screen_title .title_container .subtitle {
      position: absolute;
      font-size: 0.4em;
      margin-bottom: -5px; }
    .screen_title .title_container .title {
      position: relative;
      top: 8px; }
  .screen_title .popover_container > button .icon svg * {
    fill: #1b1e26 !important; }

.user_banner {
  cursor: pointer; }
  .user_banner.rank_0 {
    background: linear-gradient(to right, #84807d, rgba(132, 128, 125, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_0 {
        background: linear-gradient(to right, #84807d, rgba(132, 128, 125, 0.2) 70%, transparent); } }
  .user_banner.rank_1 {
    background: linear-gradient(to right, #9e6d33, rgba(158, 109, 51, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_1 {
        background: linear-gradient(to right, #9e6d33, rgba(158, 109, 51, 0.2) 70%, transparent); } }
  .user_banner.rank_2 {
    background: linear-gradient(to right, #7791a0, rgba(119, 145, 160, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_2 {
        background: linear-gradient(to right, #7791a0, rgba(119, 145, 160, 0.2) 70%, transparent); } }
  .user_banner.rank_3 {
    background: linear-gradient(to right, #af931e, rgba(175, 147, 30, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_3 {
        background: linear-gradient(to right, #af931e, rgba(175, 147, 30, 0.2) 70%, transparent); } }
  .user_banner.rank_4 {
    background: linear-gradient(to right, #90aaab, rgba(144, 170, 171, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_4 {
        background: linear-gradient(to right, #90aaab, rgba(144, 170, 171, 0.2) 70%, transparent); } }
  .user_banner.rank_5, .user_banner.rank_6 {
    background: linear-gradient(to right, #541e8e, rgba(84, 30, 142, 0.2) 70%, rgba(0, 0, 0, 0.1)); }
    @media (min-width: 600px) {
      .user_banner.rank_5, .user_banner.rank_6 {
        background: linear-gradient(to right, #541e8e, rgba(84, 30, 142, 0.2) 70%, transparent); } }
  .user_banner .content {
    display: flex;
    padding-top: 0.3em;
    padding-bottom: 0.3em; }
  .user_banner .portrait {
    height: 3.3em;
    width: 3.3em; }
  .user_banner .user_info {
    flex: 1;
    margin-left: 0.8em; }
    .user_banner .user_info .user_name {
      color: #D7CEC7;
      font-size: 1.4em;
      word-wrap: break-word; }
    .user_banner .user_info .rank .rank_name {
      font-size: 0.9em;
      font-weight: 600; }
    .user_banner .user_info .upgrade_button {
      float: right;
      font-size: 0.9em;
      margin-top: 0.3em; }

.stage_menu_opened .jump_to {
  display: none; }

.jump_to {
  position: fixed;
  z-index: 3;
  animation: fade_in 0.5 2s;
  width: initial; }
  .jump_to button {
    width: 35px;
    height: 35px;
    min-height: 35px;
    background-color: rgba(45, 47, 48, 0.6); }
    .jump_to button .icon {
      height: 15px;
      width: 15px; }
  .jump_to.jump_to_top {
    margin-top: 5px; }
  .jump_to.jump_to_bottom {
    bottom: calc(var(--bottom-content-height, 110px) - 40px); }

.scroll_list {
  position: relative;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch; }
  .scroll_list:not(.remote) {
    overflow: auto; }
  .scroll_list.horizontal {
    width: 200px;
    height: 800px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: rotate(-90deg) translateY(-200px);
    transform-origin: right top;
    padding-top: 200px; }
    .scroll_list.horizontal .game_item {
      width: 200px;
      height: 200px;
      transform: rotate(90deg);
      transform-origin: right top; }

@media (min-width: 600px) {
  .jump_to button {
    margin-left: -3.5rem; } }
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 20px;
  margin-bottom: 0;
  vertical-align: text-bottom;
  /* Hide default HTML checkbox */ }
  .switch input {
    display: none; }

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #D7CEC7;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  /* Rounded sliders */ }
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 13px;
    left: 3px;
    bottom: 2px;
    background-color: #1b1e26;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
  .slider.round {
    border-radius: 34px; }
    .slider.round:before {
      border-radius: 50%; }
  .slider.square {
    border-radius: 5px; }
    .slider.square:before {
      border-radius: 5px; }

input:disabled + .slider {
  opacity: 0.3; }

input:checked + .slider {
  background-color: #D9B310; }

input:focus + .slider {
  box-shadow: 0 0 1px #0B3C5D; }

input:checked + .slider:before {
  -webkit-transform: translateX(calc(100% - 3px));
  -ms-transform: translateX(calc(100% - 3px));
  transform: translateX(calc(100% - 3px)); }
  .switch.small input:checked + .slider:before {
    -webkit-transform: translateX(8px);
    -ms-transform: translateX(8px);
    transform: translateX(8px); }

.input_field input:checked + .slider:before {
  -webkit-transform: translateX(calc(100% - 5px));
  -ms-transform: translateX(calc(100% - 5px));
  transform: translateX(calc(100% - 5px)); }

.home_screen.landing_page.screen {
  font-size: 16px; }
.home_screen.landing_page.screen {
  margin-top: 0;
  display: block; }
.home_screen.landing_page .landing_page_content {
  background: linear-gradient(rgba(0, 0, 0, 0.3), #1b1e26 80%); }
.home_screen.landing_page .screen_title {
  color: white; }
  .home_screen.landing_page .screen_title .title {
    font-weight: 600; }
  .home_screen.landing_page .screen_title .title_button {
    color: white;
    cursor: pointer; }
    .home_screen.landing_page .screen_title .title_button.login {
      margin-right: 1.2em;
      opacity: 0.6; }
  .home_screen.landing_page .screen_title .signup_link {
    padding: 0.5em;
    min-height: 1em;
    width: initial;
    margin-top: 0; }
.home_screen.landing_page .panel {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: 80vh; }
.home_screen.landing_page #browse_button {
  margin-top: 1em;
  width: 13em;
  margin-left: auto;
  margin-right: auto; }
.home_screen.landing_page .first_block {
  color: white;
  flex-direction: column;
  display: flex;
  text-align: center; }
.home_screen.landing_page .app_logo {
  height: 10rem;
  text-align: center; }
  .home_screen.landing_page .app_logo svg {
    height: 100%;
    width: auto;
    max-width: 100%; }
.home_screen.landing_page .introduction {
  font-size: 0.8em;
  margin-top: 10px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  color: white; }
  .home_screen.landing_page .introduction h1 {
    font-size: 2.4em; }
  .home_screen.landing_page .introduction h2 {
    opacity: 0.6;
    font-size: 1.2em;
    margin-top: 20px; }
  .home_screen.landing_page .introduction .dynamic_text {
    font-size: 1.2em; }
.home_screen.landing_page .signup_link {
  margin: auto;
  display: flex;
  padding: 10px 40px;
  font-weight: 600;
  width: 13em; }
  .home_screen.landing_page .signup_link.mid_page {
    margin-top: 3em; }
.home_screen.landing_page .game_browsers {
  margin-top: 2em; }
.home_screen.landing_page .feature_section {
  padding-bottom: 2.5em; }
  .home_screen.landing_page .feature_section.dark {
    background-color: rgba(36, 36, 36, 0.7); }
  .home_screen.landing_page .feature_section.semi_dark {
    background-color: rgba(27, 30, 38, 0.8); }
  .home_screen.landing_page .feature_section.complex {
    background: linear-gradient(to right, rgba(27, 30, 38, 0.5), rgba(27, 30, 38, 0.9)), url(../../images/backgrounds/game_preview_background.png) no-repeat;
    background-size: cover; }
.home_screen.landing_page .feature_picture {
  text-align: center; }
  .home_screen.landing_page .feature_picture img {
    max-height: 80vh;
    border: solid 1px #707070; }
.home_screen.landing_page .feature_title {
  position: relative;
  font-size: 1em;
  font-weight: bold;
  color: white;
  text-align: center;
  margin-top: 2.5em;
  margin-bottom: 2em; }
  .home_screen.landing_page .feature_title:after {
    position: absolute;
    bottom: -0.5em;
    display: block;
    content: " ";
    left: 30%;
    width: 40%;
    height: 1px;
    background-color: #707070;
    border-radius: 5px; }
  .home_screen.landing_page .feature_title.highlighted {
    color: #D9B310;
    font-weight: initial; }
.home_screen.landing_page h2.feature_title {
  margin-top: 1.5em;
  font-size: 1.5em; }
  .home_screen.landing_page h2.feature_title:after {
    display: none; }
.home_screen.landing_page .feature_details {
  margin-top: 2.5em;
  text-align: center; }
.home_screen.landing_page .tweets {
  position: relative;
  margin-top: 1.5em;
  height: 300px; }
  .home_screen.landing_page .tweets .twitter-tweet {
    animation: fade_in 2s, fade_out 1s 9s forwards;
    margin-left: auto;
    margin-right: auto; }

.home_screen.screen {
  font-size: 14px; }
  .home_screen.screen .discord_link {
    margin: 2em 0 3em 0; }
    .home_screen.screen .discord_link .button_discord {
      float: left;
      margin-right: 1rem; }
    .home_screen.screen .discord_link p {
      margin: 0;
      padding-top: 0.6rem; }
  .home_screen.screen .button_discord svg path {
    fill: #7289DA !important; }
  .home_screen.screen .page_content {
    padding-top: 0; }
  .home_screen.screen .page_content {
    min-height: 100vh; }
  .home_screen.screen .menu {
    margin-top: 1.9em;
    margin-bottom: 1.1em;
    display: flex;
    flex: 0 0 auto; }
    .home_screen.screen .menu button {
      flex: 1; }
      .home_screen.screen .menu button:not(:last-child) {
        margin-right: 10px; }
  .home_screen.screen .section_title {
    font-size: 14px; }
  .home_screen.screen .game_browsers {
    font-size: 1rem;
    margin-top: 2em; }
  .home_screen.screen .homescreen_section {
    margin: 0.5rem 0; }
  .home_screen.screen .section_description {
    opacity: 0.7;
    margin-top: 2rem;
    margin-bottom: 1rem; }
  .home_screen.screen .buttons {
    margin-bottom: 1rem; }
  .home_screen.screen .featured_game {
    position: relative;
    height: 100%; }
    .home_screen.screen .featured_game > .game_item {
      background: rgba(36, 36, 36, 0.9);
      padding-left: 35px;
      padding-right: 35px; }
  .home_screen.screen .continue_reading_section, .home_screen.screen .continue_playing_section {
    margin-bottom: 0; }
  .home_screen.screen .featured_items_section .horizontal_list_item_container .horizontal_list_item {
    height: 22rem; }

.store_links {
  display: flex;
  align-items: center;
  margin: 30px 0; }
  .store_links .links {
    display: flex;
    align-items: center; }
  .store_links a img {
    max-width: 100%; }
  @media (max-width: 600px) {
    .store_links {
      flex-direction: column;
      justify-content: center; } }
  @media (min-width: 600px) {
    .store_links {
      flex-direction: row; }
      .store_links a img {
        max-height: 70px; } }

.store_button.ios {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 3%;
  max-width: 50%; }
  @media (max-width: 600px) {
    .store_button.ios img {
      width: 100%; } }
  @media (min-width: 600px) {
    .store_button.ios {
      padding: 0; }
      .store_button.ios img {
        height: 46px; } }

@media (max-width: 600px) {
  .store_button {
    flex: 1; } }

.contest_games .foldout_game_list .horizontal_list_item_container, .contest_games .foldout_game_list.small .horizontal_list_item_container {
  height: 12rem; }
  @media (min-width: 600px) {
    .contest_games .foldout_game_list .horizontal_list_item_container, .contest_games .foldout_game_list.small .horizontal_list_item_container {
      height: 15rem; } }

.game_settings {
  padding-top: 30px;
  font-size: 0.8em;
  overflow: auto; }
  .game_settings.screen {
    margin-top: 0; }
  .game_settings .button_base {
    min-width: 10em; }
  .game_settings .sheet_options {
    border-top: solid 1px #707070;
    border-bottom: solid 1px #707070;
    margin-top: 2em;
    margin-bottom: 2em;
    padding-top: 2em;
    padding-bottom: 2em; }
    .game_settings .sheet_options .buttons {
      display: flex; }
      .game_settings .sheet_options .buttons button {
        flex: 1; }
        .game_settings .sheet_options .buttons button:not(:last-child) {
          margin-right: 1em; }
    .game_settings .sheet_options .loaded_sheet_name {
      margin-top: 0.5em;
      margin-bottom: 0; }
  .game_settings .option_bar {
    margin-bottom: 2.2em; }
  .game_settings .grouped .option_bar {
    margin-bottom: 0.5em; }
    .game_settings .grouped .option_bar.has_hint {
      margin-bottom: 1.9em; }
  .game_settings .tag_picker {
    margin-bottom: 1.9em; }
  .game_settings .section_title {
    margin-bottom: 0.5em;
    margin-top: 1.2em;
    opacity: 0.8; }
  .game_settings .cover_section img {
    border: 1px solid #707070; }
  .game_settings .cover_section .hint {
    opacity: 0.6;
    text-align: right; }
  .game_settings .dice_sets_section .button_base {
    margin-top: 1em; }

#addToProfileModal input {
  background-color: transparent;
  color: #1b1e26;
  width: 100%;
  border: solid 1px rgba(0, 0, 0, 0.1);
  padding: 0.5em; }

.character_sheet_editor .character_sheet, .my_sheet_screen .character_sheet, .create_character_screen .character_sheet {
  flex: 1;
  overflow: auto;
  min-height: 60px; }
  .character_sheet_editor .character_sheet .upper_tabs, .my_sheet_screen .character_sheet .upper_tabs, .create_character_screen .character_sheet .upper_tabs {
    margin-bottom: 15px; }
  .character_sheet_editor .character_sheet .tab_options, .my_sheet_screen .character_sheet .tab_options, .create_character_screen .character_sheet .tab_options {
    margin-bottom: 10px; }
    .character_sheet_editor .character_sheet .tab_options .collapse_content, .my_sheet_screen .character_sheet .tab_options .collapse_content, .create_character_screen .character_sheet .tab_options .collapse_content {
      padding: 1em;
      background-color: black; }
    .character_sheet_editor .character_sheet .tab_options button.delete, .my_sheet_screen .character_sheet .tab_options button.delete, .create_character_screen .character_sheet .tab_options button.delete {
      font-size: 0.6em; }
    .character_sheet_editor .character_sheet .tab_options .option_bar, .my_sheet_screen .character_sheet .tab_options .option_bar, .create_character_screen .character_sheet .tab_options .option_bar {
      margin-bottom: 1em; }
    .character_sheet_editor .character_sheet .tab_options .move_options, .my_sheet_screen .character_sheet .tab_options .move_options, .create_character_screen .character_sheet .tab_options .move_options {
      display: flex;
      margin-bottom: 1em; }
      .character_sheet_editor .character_sheet .tab_options .move_options button, .my_sheet_screen .character_sheet .tab_options .move_options button, .create_character_screen .character_sheet .tab_options .move_options button {
        padding: 10px; }
      .character_sheet_editor .character_sheet .tab_options .move_options button:first-child, .my_sheet_screen .character_sheet .tab_options .move_options button:first-child, .create_character_screen .character_sheet .tab_options .move_options button:first-child {
        margin-right: 5px; }
.character_sheet_editor .preview_button, .my_sheet_screen .preview_button, .create_character_screen .preview_button {
  width: 100%;
  background-color: #2D2F30;
  border: none;
  cursor: pointer;
  color: #D7CEC7; }
  .character_sheet_editor .preview_button:hover, .my_sheet_screen .preview_button:hover, .create_character_screen .preview_button:hover {
    background-color: #0c4266; }
  .character_sheet_editor .preview_button:focus, .my_sheet_screen .preview_button:focus, .create_character_screen .preview_button:focus {
    outline: none;
    border: none; }
  .character_sheet_editor .preview_button:active, .my_sheet_screen .preview_button:active, .create_character_screen .preview_button:active {
    background-color: #0d456b; }
  .character_sheet_editor .preview_button svg, .character_sheet_editor .preview_button img, .my_sheet_screen .preview_button svg, .my_sheet_screen .preview_button img, .create_character_screen .preview_button svg, .create_character_screen .preview_button img {
    height: 20px;
    width: auto; }
    .character_sheet_editor .preview_button svg path, .character_sheet_editor .preview_button img path, .my_sheet_screen .preview_button svg path, .my_sheet_screen .preview_button img path, .create_character_screen .preview_button svg path, .create_character_screen .preview_button img path {
      fill: #D7CEC7; }

.character_sheet .size1 {
  flex: 1; }
.character_sheet .size2 {
  flex: 2; }
.character_sheet .size3 {
  flex: 3; }
.character_sheet .size4 {
  flex: 4; }
.character_sheet .size5 {
  flex: 5; }
.character_sheet .size6 {
  flex: 6; }
.character_sheet .size7 {
  flex: 7; }
.character_sheet .size8 {
  flex: 8; }
.character_sheet .size9 {
  flex: 9; }
.character_sheet .size10 {
  flex: 10; }
.character_sheet .size11 {
  flex: 11; }
.character_sheet .size12 {
  flex: 12; }
.character_sheet .size13 {
  flex: 13; }
.character_sheet .size14 {
  flex: 14; }
.character_sheet .size15 {
  flex: 15; }
.character_sheet .size16 {
  flex: 16; }
.character_sheet .size17 {
  flex: 17; }
.character_sheet .size18 {
  flex: 18; }
.character_sheet .size19 {
  flex: 19; }
.character_sheet .size20 {
  flex: 20; }
.character_sheet > .character_name .input_area {
  display: flex; }
  .character_sheet > .character_name .input_area .portrait {
    cursor: pointer; }
  .character_sheet > .character_name .input_area input {
    flex: 1;
    padding: 10px;
    border-radius: 5px; }
.character_sheet .avatar_area {
  display: inline-flex;
  width: 100%;
  padding-top: 1em;
  align-items: center; }
  .character_sheet .avatar_area .portrait {
    height: 80px;
    width: 80px;
    margin-right: 11px; }
  .character_sheet .avatar_area .avatar_options {
    flex: 1; }
    .character_sheet .avatar_area .avatar_options input {
      padding-top: 3px;
      padding-bottom: 3px; }
  .character_sheet .avatar_area .change_avatar_button {
    margin-top: 11px;
    padding: 0 2em; }
.character_sheet .upper_tabs {
  background-color: black;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.3);
  white-space: nowrap; }
  .character_sheet .upper_tabs.count_5 {
    font-size: 0.8em; }
  .character_sheet .upper_tabs.count_6 {
    font-size: 0.7em; }
  .character_sheet .upper_tabs.count_7 {
    font-size: 0.6em; }
.character_sheet .section {
  display: flex;
  position: relative; }
  .character_sheet .section .section_item {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: padding 0.25s; }
    .character_sheet .section .section_item.selected {
      background-color: rgba(50, 140, 193, 0.1); }
    .character_sheet .section .section_item textarea, .character_sheet .section .section_item input {
      background-color: rgba(32, 32, 32, 0.5); }
  .character_sheet .section.horizontal {
    flex-direction: row; }
    .character_sheet .section.horizontal > .section_item:not(:first-child) {
      margin-left: 5px; }
  .character_sheet .section.vertical {
    flex-direction: column; }
    .character_sheet .section.vertical > .section_item {
      margin-bottom: 10px; }
  .character_sheet .section .title_input {
    position: relative;
    top: 0;
    width: 100%;
    overflow: hidden;
    min-height: 36px;
    height: 36px;
    transition: all 0.25s; }
    .character_sheet .section .title_input.empty {
      opacity: 0.4; }
    .character_sheet .section .title_input input {
      width: 100%;
      position: absolute;
      background-color: transparent;
      padding: 0;
      flex: 0 1 auto; }
      .character_sheet .section .title_input input::placeholder {
        width: 0; }
  .character_sheet .section .selected > .title_input.empty {
    opacity: 1; }
  .character_sheet .section .section_title, .character_sheet .section .title_input {
    font-size: 1.2em; }
  .character_sheet .section .section_title {
    color: #D7CEC7; }
  .character_sheet .section .section .section .section_title, .character_sheet .section .section .section .title_input {
    font-size: 1em; }
  .character_sheet .section .section .section .section_title {
    opacity: 0.6; }
  .character_sheet .section .section .section .title_input {
    min-height: 24px;
    height: 24px; }
  .character_sheet .section .sheet_text_area {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%; }
    .character_sheet .section .sheet_text_area textarea[data-text-size="1"] {
      font-size: 1em; }
    .character_sheet .section .sheet_text_area textarea[data-text-size="2"] {
      font-size: 0.9em; }
    .character_sheet .section .sheet_text_area textarea[data-text-size="3"] {
      font-size: 0.8em; }
    .character_sheet .section .sheet_text_area textarea[data-text-size="4"] {
      font-size: 0.7em; }
    .character_sheet .section .sheet_text_area textarea {
      height: 100%;
      width: 100%;
      padding-top: 10px;
      box-sizing: padding-box;
      background-color: rgba(11, 60, 93, 0.3); }
  .character_sheet .section .sheet_number_input {
    flex: 1; }
    .character_sheet .section .sheet_number_input .input_field.number {
      flex-direction: row;
      height: initial;
      width: 100%; }
      .character_sheet .section .sheet_number_input .input_field.number .label {
        flex: 1;
        display: flex;
        align-items: center;
        text-align: left;
        padding: 10px 20px;
        background-color: #3c4b56;
        font-size: 1em; }
      .character_sheet .section .sheet_number_input .input_field.number input {
        width: 30%;
        padding-top: 10px;
        padding-bottom: 10px; }
      .character_sheet .section .sheet_number_input .input_field.number input:not(.label) {
        flex: 0 1 auto;
        background-color: rgba(11, 60, 93, 0.3); }
      .character_sheet .section .sheet_number_input .input_field.number.no_label input {
        width: 100%; }
  .character_sheet .section .sheet_picture {
    position: relative;
    flex: 1; }
    .character_sheet .section .sheet_picture svg, .character_sheet .section .sheet_picture img {
      position: relative;
      width: 100%;
      background-color: rgba(27, 30, 38, 0.3); }
    .character_sheet .section .sheet_picture .coming_soon {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(27, 30, 38, 0.4);
      color: #D7CEC7;
      transition: opacity 0.25s; }
      .character_sheet .section .sheet_picture .coming_soon p {
        text-align: center;
        position: relative;
        top: 50%;
        font-weight: 700;
        font-size: 0.6em;
        transform: translateY(-50%); }
    .character_sheet .section .sheet_picture:hover .coming_soon {
      opacity: 1; }
.character_sheet .user_list_feedback {
  position: absolute;
  max-width: 55%;
  top: 0;
  right: 0;
  color: #D9B310;
  font-size: 0.9em; }
  .character_sheet .user_list_feedback.negative {
    top: 0px;
    font-weight: 900;
    color: indianred; }
.character_sheet .resize_option {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translateY(17px);
  font-size: 0.9em; }
  .character_sheet .resize_option .overflowing_container {
    width: 90px;
    background-color: #328CC1;
    border-radius: 15px;
    padding: 0 0 0 10px;
    animation: fade_in 0.25s both; }
  .character_sheet .resize_option label {
    margin-bottom: 0; }
  .character_sheet .resize_option input {
    background-color: transparent;
    flex: 0 0 auto;
    width: 40px;
    padding: 0 3px; }
.character_sheet .add_node {
  height: 50px;
  padding-right: 10px;
  padding-left: 10px;
  text-align: center; }
  .character_sheet .add_node svg, .character_sheet .add_node img {
    height: 20px;
    left: initial;
    right: initial;
    width: initial;
    background-color: transparent; }
.character_sheet .choice {
  font: "Tahoma", sans-serif;
  position: relative;
  font-size: 50px;
  font-weight: 900;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  animation: fade_in 0.5s;
  background-color: rgba(27, 30, 38, 0.3);
  border: none;
  color: #D7CEC7;
  transition: background-color 0.25s;
  cursor: pointer; }
  .character_sheet .choice:hover {
    background-color: rgba(27, 30, 38, 0.6); }
  .character_sheet .choice:active:not(:disabled) {
    background-color: rgba(27, 30, 38, 0.7);
    transition: background-color 0.15s; }
  .character_sheet .choice:focus {
    outline: none; }
  .character_sheet .choice:disabled {
    animation: fade_in_3 0.5s;
    opacity: 0.3; }
  .character_sheet .choice.small {
    font-size: 20px;
    height: 40px;
    min-height: 40px;
    width: 40px;
    min-width: 40px; }
    .character_sheet .choice.small svg, .character_sheet .choice.small img {
      height: 25px;
      width: auto;
      max-width: 25px; }
  .character_sheet .choice .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 0; }
  .character_sheet .choice svg, .character_sheet .choice img {
    height: 50px;
    width: auto;
    max-width: 50px; }
    .character_sheet .choice svg path, .character_sheet .choice img path {
      fill: #D7CEC7; }
  .character_sheet .choice:not(:first-child) {
    margin-left: 3px; }
.character_sheet .item_options {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 1;
  text-align: right; }
  .character_sheet .item_options .choice {
    background-color: #1b1e26; }
    .character_sheet .item_options .choice.negative svg *, .character_sheet .item_options .choice.negative img * {
      fill: indianred; }
.character_sheet .languages_section {
  padding-top: 20px;
  margin-top: 20px;
  border-top: solid 1px rgba(215, 206, 199, 0.2); }
  .character_sheet .languages_section .language_item {
    margin-bottom: 1em; }

.replicate_name_hint {
  font-size: 0.9em;
  opacity: 0.8; }

.replicate_option {
  font-size: 0.9em;
  opacity: 0.8;
  cursor: pointer;
  color: #328CC1; }
  .replicate_option:hover {
    color: #328CC1;
    text-decoration: underline; }

#replicateModal input {
  background-color: transparent;
  color: #1b1e26;
  width: 100%;
  border: solid 1px rgba(0, 0, 0, 0.1); }

.create_character_screen .page_content {
  display: flex;
  flex-direction: column;
  overflow: hidden; }
.create_character_screen .game_summary {
  flex: 1;
  overflow: auto; }
.create_character_screen .main_section_title {
  display: flex;
  opacity: 0.8;
  padding-bottom: 0.3em;
  margin-top: 2em;
  margin-bottom: 1em;
  border-bottom: solid 1px #707070; }
  .create_character_screen .main_section_title svg, .create_character_screen .main_section_title img {
    height: 20px;
    width: auto;
    margin-right: 10px; }
    .create_character_screen .main_section_title svg *, .create_character_screen .main_section_title img * {
      fill: #D7CEC7; }
.create_character_screen .game_item {
  margin: 0 0 1.5em 0;
  box-shadow: none;
  border: none;
  width: 100%;
  background-color: transparent;
  padding-left: 0;
  padding-right: 0; }
  .create_character_screen .game_item .description {
    font-size: 0.8em; }
.create_character_screen .game_rules {
  white-space: pre-line;
  word-break: break-word;
  font-size: 0.8em; }
.create_character_screen label {
  font-weight: bold;
  opacity: 0.6;
  font-size: 0.8em; }

.game_screen {
  position: relative;
  min-height: 100vh; }
  .game_screen.screen {
    flex: 0 0 auto;
    margin-top: 0; }
  .game_screen.blocked_game, .game_screen .blocked_game {
    padding-top: 3em;
    text-align: center; }
    .game_screen.blocked_game .empty_icon, .game_screen .blocked_game .empty_icon {
      height: 5em;
      opacity: 0.6; }
  .game_screen #screen_bottom {
    z-index: 1;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #1b1e26;
    max-height: 100vh; }
    .game_screen #screen_bottom.away {
      height: 0; }
  .game_screen .typing_feedback {
    position: relative; }
    .game_screen .typing_feedback .dots {
      position: absolute;
      top: -25px; }
    .game_screen .typing_feedback .dot {
      position: relative;
      display: inline-block; }
      .game_screen .typing_feedback .dot:nth-child(1) {
        animation: bounce 0.5s 0.125s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(2) {
        animation: bounce 0.5s 0.25s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(3) {
        animation: bounce 0.5s 0.375s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(4) {
        animation: bounce 0.5s 0.5s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(5) {
        animation: bounce 0.5s 0.625s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(6) {
        animation: bounce 0.5s 0.75s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(7) {
        animation: bounce 0.5s 0.875s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(8) {
        animation: bounce 0.5s 1s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(9) {
        animation: bounce 0.5s 1.125s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(10) {
        animation: bounce 0.5s 1.25s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(11) {
        animation: bounce 0.5s 1.375s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(12) {
        animation: bounce 0.5s 1.5s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(13) {
        animation: bounce 0.5s 1.625s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(14) {
        animation: bounce 0.5s 1.75s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(15) {
        animation: bounce 0.5s 1.875s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(16) {
        animation: bounce 0.5s 2s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(17) {
        animation: bounce 0.5s 2.125s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(18) {
        animation: bounce 0.5s 2.25s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(19) {
        animation: bounce 0.5s 2.375s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:nth-child(20) {
        animation: bounce 0.5s 2.5s infinite, fade_in 0.25s; }
      .game_screen .typing_feedback .dot:after {
        color: #D7CEC7;
        content: " ●";
        font-size: 0.8em; }
  .game_screen .map {
    display: inline-flex; }
  .game_screen .comments_blocked {
    font-size: 1.3em;
    margin-top: 50px;
    color: indianred;
    font-weight: 400; }

.more_popover .popover_custom_content {
  display: flex; }
  .more_popover .popover_custom_content button:not(:last-child) {
    margin-right: 5px; }

.tab_game_preview {
  scroll-behavior: smooth; }

.main_scroller {
  position: relative;
  z-index: auto;
  padding-top: 43px; }
  .stage_folded .main_scroller {
    padding-bottom: var(--bottom-content-height, 150px); }
  .stage_unfolded .main_scroller {
    padding-bottom: calc(var(--bottom-content-height, 270px) - 10px); }
  .stage_unfolded.roll_requested .main_scroller {
    padding-bottom: var(--bottom-content-height, 270px); }

.edit_buttons {
  font-size: 0.7em;
  text-align: right; }
  .edit_buttons button {
    margin-bottom: 0.5em;
    padding: 0.5em 1em; }
    .edit_buttons button:not(:last-child) {
      margin-right: 1em; }
    .edit_buttons button svg {
      margin-left: 0.5em; }

.lines_scroller {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  font-weight: 400;
  font-size: 0.7em; }
  .lines_scroller .line_container {
    position: relative;
    transition: opacity 0.2s;
    animation: fade_in 0.2s; }
    .lines_scroller .line_container.pending {
      opacity: 0.2;
      animation: none; }
    .lines_scroller .line_container.background {
      opacity: 0.5; }
    .lines_scroller .line_container.edit_mode .author_name {
      display: none; }
    .lines_scroller .line_container.edit_mode .timestamp {
      display: none; }
    .lines_scroller .line_container.edit_mode .chat {
      display: flex; }
    .lines_scroller .line_container.add_split {
      margin-bottom: 30px; }
      @media (max-width: 600px) {
        .lines_scroller .line_container.add_split {
          margin-bottom: 10px; } }
  .lines_scroller .timestamp {
    opacity: 0.4; }
  .lines_scroller .content {
    width: 100%; }
    .lines_scroller .content textarea {
      width: 100%;
      background-color: transparent;
      color: #1b1e26;
      margin: 0;
      padding: 0; }
    .lines_scroller .content .language_indicator {
      position: absolute;
      opacity: 0.6;
      font-size: 0.8em;
      top: 0;
      right: 0.5em;
      font-weight: bold;
      color: #328CC1;
      z-index: 1; }
    .lines_scroller .content .gibberish {
      opacity: 0.4; }
    .lines_scroller .content .tagged_name {
      font-weight: bold; }
  .lines_scroller .toggle_chat_hint {
    opacity: 0.9;
    font-size: 0.8em; }
  .lines_scroller .targets {
    margin-bottom: 3px;
    font-size: 0.9em; }
    .lines_scroller .targets svg {
      height: 10px;
      width: auto; }
      .lines_scroller .targets svg * {
        fill: #D7CEC7 !important; }
    .lines_scroller .targets .info {
      opacity: 0.8; }
    .lines_scroller .targets span:before {
      opacity: 0.8;
      font-weight: 400;
      color: white; }
    .lines_scroller .targets span:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:last-child):before {
      content: ", "; }
    .lines_scroller .targets span:last-child:not(:nth-child(3)):before {
      content: " & "; }
  .lines_scroller .line_container:not(.reduced) .targets {
    margin-top: -5px; }

.bookmark {
  position: relative;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 0.5em;
  color: white;
  background-color: #8B9195; }
  .bookmark:not(.new_content) .title {
    display: inline-block;
    padding-left: 2.5em; }
  .bookmark:not(.new_content):hover {
    background-color: rgba(139, 145, 149, 0.5); }
  .bookmark svg {
    position: absolute;
    top: -0.3em;
    height: 2.5em;
    width: auto; }
    .bookmark svg * {
      fill: #D9B310; }
  .bookmark.new_content {
    background-color: transparent;
    text-align: center;
    font-size: 0.9em;
    color: #D9B310;
    cursor: initial;
    border-bottom: solid 1px #D9B310; }
  .bookmark .hint {
    float: right; }

.game_screen .line.angry .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.game_screen .line.angry .tone {
  color: indianred; }
.game_screen .line.annoyed .tone_border {
  border-color: #905757;
  border-left-width: 3px; }
.game_screen .line.annoyed .tone {
  color: #905757; }
.game_screen .line.anxious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_screen .line.anxious .tone {
  color: #5F9EA0; }
.game_screen .line.affectionate .tone_border {
  border-color: #f796c6;
  border-left-width: 3px; }
.game_screen .line.affectionate .tone {
  color: #f796c6; }
.game_screen .line.alarmed .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.game_screen .line.alarmed .tone {
  color: #D9B310; }
.game_screen .line.amused .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.game_screen .line.amused .tone {
  color: lightskyblue; }
.game_screen .line.brooding .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.game_screen .line.brooding .tone {
  color: #D7CEC7; }
.game_screen .line.cheerful .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_screen .line.cheerful .tone {
  color: #328CC1; }
.game_screen .line.confident .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.game_screen .line.confident .tone {
  color: #8a80cb; }
.game_screen .line.confused .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.game_screen .line.confused .tone {
  color: #A5A5B0; }
.game_screen .line.curious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_screen .line.curious .tone {
  color: #5F9EA0; }
.game_screen .line.disappointed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_screen .line.disappointed .tone {
  color: cadetblue; }
.game_screen .line.disgusted .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_screen .line.disgusted .tone {
  color: darkseagreen; }
.game_screen .line.desperate .tone_border {
  border-color: #C4751E;
  border-left-width: 3px; }
.game_screen .line.desperate .tone {
  color: #C4751E; }
.game_screen .line.doubtful .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.game_screen .line.doubtful .tone {
  color: #D7CEC7; }
.game_screen .line.excited .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.game_screen .line.excited .tone {
  color: #D9B310; }
.game_screen .line.impressed .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_screen .line.impressed .tone {
  color: #767CCB; }
.game_screen .line.pensive .tone_border {
  border-color: #EDECEB;
  border-left-width: 3px; }
.game_screen .line.pensive .tone {
  color: #EDECEB; }
.game_screen .line.playful .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.game_screen .line.playful .tone {
  color: lightskyblue; }
.game_screen .line.sad .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_screen .line.sad .tone {
  color: cadetblue; }
.game_screen .line.sarcastic .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_screen .line.sarcastic .tone {
  color: #CD8F5C; }
.game_screen .line.scared .tone_border {
  border-color: #8dccce;
  border-left-width: 3px; }
.game_screen .line.scared .tone {
  color: #8dccce; }
.game_screen .line.seductive .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_screen .line.seductive .tone {
  color: #767CCB; }
.game_screen .line.serious .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_screen .line.serious .tone {
  color: #7e7e89; }
.game_screen .line.surprised .tone_border {
  border-color: #e2ca49;
  border-left-width: 3px; }
.game_screen .line.surprised .tone {
  color: #e2ca49; }
.game_screen .line.suspicious .tone_border {
  border-color: #a5a5b0;
  border-left-width: 3px; }
.game_screen .line.suspicious .tone {
  color: #a5a5b0; }
.game_screen .line.threatening .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.game_screen .line.threatening .tone {
  color: indianred; }
.game_screen .line.nervous .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_screen .line.nervous .tone {
  color: cadetblue; }
.game_screen .line.worried .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_screen .line.worried .tone {
  color: cadetblue; }
.game_screen .line.apologetic .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_screen .line.apologetic .tone {
  color: #5F9EA0; }
.game_screen .line.baffled .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_screen .line.baffled .tone {
  color: darkseagreen; }
.game_screen .line.embarrassed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_screen .line.embarrassed .tone {
  color: cadetblue; }
.game_screen .line.fascinated .tone_border {
  border-color: #d9a02f;
  border-left-width: 3px; }
.game_screen .line.fascinated .tone {
  color: #d9a02f; }
.game_screen .line.friendly .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_screen .line.friendly .tone {
  color: #328CC1; }
.game_screen .line.haughty .tone_border {
  border-color: #4ec19a;
  border-left-width: 3px; }
.game_screen .line.haughty .tone {
  color: #4ec19a; }
.game_screen .line.mocking .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_screen .line.mocking .tone {
  color: #CD8F5C; }
.game_screen .line.passionate .tone_border {
  border-color: #dcba08;
  border-left-width: 3px; }
.game_screen .line.passionate .tone {
  color: #dcba08; }
.game_screen .line.panicked .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.game_screen .line.panicked .tone {
  color: #cd691b; }
.game_screen .line.panting .tone_border {
  border-color: #a97268;
  border-left-width: 3px; }
.game_screen .line.panting .tone {
  color: #a97268; }
.game_screen .line.puzzled .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.game_screen .line.puzzled .tone {
  color: #A5A5B0; }
.game_screen .line.proud .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.game_screen .line.proud .tone {
  color: #8a80cb; }
.game_screen .line.pressing .tone_border {
  border-color: #cb5837;
  border-left-width: 3px; }
.game_screen .line.pressing .tone {
  color: #cb5837; }
.game_screen .line.relieved .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_screen .line.relieved .tone {
  color: darkseagreen; }
.game_screen .line.remorseful .tone_border {
  border-color: skyblue;
  border-left-width: 3px; }
.game_screen .line.remorseful .tone {
  color: skyblue; }
.game_screen .line.sleepy .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_screen .line.sleepy .tone {
  color: darkseagreen; }
.game_screen .line.shy .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_screen .line.shy .tone {
  color: #5F9EA0; }
.game_screen .line.suffering .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.game_screen .line.suffering .tone {
  color: #cd691b; }
.game_screen .line.tense .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_screen .line.tense .tone {
  color: #7e7e89; }
.game_screen .line.tired .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_screen .line.tired .tone {
  color: darkseagreen; }
.game_screen .line.admiring .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_screen .line.admiring .tone {
  color: #767CCB; }
.game_screen .line.detached .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_screen .line.detached .tone {
  color: #7e7e89; }
.game_screen .line.condescending .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_screen .line.condescending .tone {
  color: #CD8F5C; }
.game_screen .line.kind .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_screen .line.kind .tone {
  color: #328CC1; }

.game_lines_preview .line.angry .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.game_lines_preview .line.angry .tone {
  color: indianred; }
.game_lines_preview .line.annoyed .tone_border {
  border-color: #905757;
  border-left-width: 3px; }
.game_lines_preview .line.annoyed .tone {
  color: #905757; }
.game_lines_preview .line.anxious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_lines_preview .line.anxious .tone {
  color: #5F9EA0; }
.game_lines_preview .line.affectionate .tone_border {
  border-color: #f796c6;
  border-left-width: 3px; }
.game_lines_preview .line.affectionate .tone {
  color: #f796c6; }
.game_lines_preview .line.alarmed .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.game_lines_preview .line.alarmed .tone {
  color: #D9B310; }
.game_lines_preview .line.amused .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.game_lines_preview .line.amused .tone {
  color: lightskyblue; }
.game_lines_preview .line.brooding .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.game_lines_preview .line.brooding .tone {
  color: #D7CEC7; }
.game_lines_preview .line.cheerful .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_lines_preview .line.cheerful .tone {
  color: #328CC1; }
.game_lines_preview .line.confident .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.game_lines_preview .line.confident .tone {
  color: #8a80cb; }
.game_lines_preview .line.confused .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.game_lines_preview .line.confused .tone {
  color: #A5A5B0; }
.game_lines_preview .line.curious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_lines_preview .line.curious .tone {
  color: #5F9EA0; }
.game_lines_preview .line.disappointed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_lines_preview .line.disappointed .tone {
  color: cadetblue; }
.game_lines_preview .line.disgusted .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_lines_preview .line.disgusted .tone {
  color: darkseagreen; }
.game_lines_preview .line.desperate .tone_border {
  border-color: #C4751E;
  border-left-width: 3px; }
.game_lines_preview .line.desperate .tone {
  color: #C4751E; }
.game_lines_preview .line.doubtful .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
.game_lines_preview .line.doubtful .tone {
  color: #D7CEC7; }
.game_lines_preview .line.excited .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
.game_lines_preview .line.excited .tone {
  color: #D9B310; }
.game_lines_preview .line.impressed .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_lines_preview .line.impressed .tone {
  color: #767CCB; }
.game_lines_preview .line.pensive .tone_border {
  border-color: #EDECEB;
  border-left-width: 3px; }
.game_lines_preview .line.pensive .tone {
  color: #EDECEB; }
.game_lines_preview .line.playful .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
.game_lines_preview .line.playful .tone {
  color: lightskyblue; }
.game_lines_preview .line.sad .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_lines_preview .line.sad .tone {
  color: cadetblue; }
.game_lines_preview .line.sarcastic .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_lines_preview .line.sarcastic .tone {
  color: #CD8F5C; }
.game_lines_preview .line.scared .tone_border {
  border-color: #8dccce;
  border-left-width: 3px; }
.game_lines_preview .line.scared .tone {
  color: #8dccce; }
.game_lines_preview .line.seductive .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_lines_preview .line.seductive .tone {
  color: #767CCB; }
.game_lines_preview .line.serious .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_lines_preview .line.serious .tone {
  color: #7e7e89; }
.game_lines_preview .line.surprised .tone_border {
  border-color: #e2ca49;
  border-left-width: 3px; }
.game_lines_preview .line.surprised .tone {
  color: #e2ca49; }
.game_lines_preview .line.suspicious .tone_border {
  border-color: #a5a5b0;
  border-left-width: 3px; }
.game_lines_preview .line.suspicious .tone {
  color: #a5a5b0; }
.game_lines_preview .line.threatening .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
.game_lines_preview .line.threatening .tone {
  color: indianred; }
.game_lines_preview .line.nervous .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_lines_preview .line.nervous .tone {
  color: cadetblue; }
.game_lines_preview .line.worried .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_lines_preview .line.worried .tone {
  color: cadetblue; }
.game_lines_preview .line.apologetic .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_lines_preview .line.apologetic .tone {
  color: #5F9EA0; }
.game_lines_preview .line.baffled .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_lines_preview .line.baffled .tone {
  color: darkseagreen; }
.game_lines_preview .line.embarrassed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
.game_lines_preview .line.embarrassed .tone {
  color: cadetblue; }
.game_lines_preview .line.fascinated .tone_border {
  border-color: #d9a02f;
  border-left-width: 3px; }
.game_lines_preview .line.fascinated .tone {
  color: #d9a02f; }
.game_lines_preview .line.friendly .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_lines_preview .line.friendly .tone {
  color: #328CC1; }
.game_lines_preview .line.haughty .tone_border {
  border-color: #4ec19a;
  border-left-width: 3px; }
.game_lines_preview .line.haughty .tone {
  color: #4ec19a; }
.game_lines_preview .line.mocking .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_lines_preview .line.mocking .tone {
  color: #CD8F5C; }
.game_lines_preview .line.passionate .tone_border {
  border-color: #dcba08;
  border-left-width: 3px; }
.game_lines_preview .line.passionate .tone {
  color: #dcba08; }
.game_lines_preview .line.panicked .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.game_lines_preview .line.panicked .tone {
  color: #cd691b; }
.game_lines_preview .line.panting .tone_border {
  border-color: #a97268;
  border-left-width: 3px; }
.game_lines_preview .line.panting .tone {
  color: #a97268; }
.game_lines_preview .line.puzzled .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
.game_lines_preview .line.puzzled .tone {
  color: #A5A5B0; }
.game_lines_preview .line.proud .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
.game_lines_preview .line.proud .tone {
  color: #8a80cb; }
.game_lines_preview .line.pressing .tone_border {
  border-color: #cb5837;
  border-left-width: 3px; }
.game_lines_preview .line.pressing .tone {
  color: #cb5837; }
.game_lines_preview .line.relieved .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_lines_preview .line.relieved .tone {
  color: darkseagreen; }
.game_lines_preview .line.remorseful .tone_border {
  border-color: skyblue;
  border-left-width: 3px; }
.game_lines_preview .line.remorseful .tone {
  color: skyblue; }
.game_lines_preview .line.sleepy .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_lines_preview .line.sleepy .tone {
  color: darkseagreen; }
.game_lines_preview .line.shy .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
.game_lines_preview .line.shy .tone {
  color: #5F9EA0; }
.game_lines_preview .line.suffering .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
.game_lines_preview .line.suffering .tone {
  color: #cd691b; }
.game_lines_preview .line.tense .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_lines_preview .line.tense .tone {
  color: #7e7e89; }
.game_lines_preview .line.tired .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
.game_lines_preview .line.tired .tone {
  color: darkseagreen; }
.game_lines_preview .line.admiring .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
.game_lines_preview .line.admiring .tone {
  color: #767CCB; }
.game_lines_preview .line.detached .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
.game_lines_preview .line.detached .tone {
  color: #7e7e89; }
.game_lines_preview .line.condescending .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
.game_lines_preview .line.condescending .tone {
  color: #CD8F5C; }
.game_lines_preview .line.kind .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
.game_lines_preview .line.kind .tone {
  color: #328CC1; }

.line {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  cursor: pointer; }
  .line .author_area {
    display: flex;
    flex-direction: row;
    flex: 0;
    margin-right: 10px; }
    @media (min-width: 600px) {
      .line .author_area {
        margin-right: 15px; } }
    @media (max-width: 600px) {
      .line .author_area .portrait {
        height: 40px;
        width: 40px; } }
    .line .author_area .name {
      height: 50px;
      font-size: 0.8em;
      max-width: 50%; }
  .line .horizontal_content {
    position: relative;
    display: flex;
    flex-direction: row; }
  .line .content_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .line .content_area .content {
      word-break: break-word;
      border: solid 2px transparent;
      border-radius: 5px;
      padding: 10px;
      position: relative;
      background-color: white;
      color: #1b1e26; }
      .line .content_area .content:after {
        right: 100%;
        top: 20px;
        border: solid transparent;
        content: " ";
        position: absolute;
        pointer-events: none;
        border-right-color: white;
        border-width: 10px;
        margin-top: -10px; }
  .line .markdown_text {
    display: inline; }
    .line .markdown_text a {
      color: #328CC1; }

.line_container.user_tagged {
  background-color: #2C2C2C;
  border: solid 1px #D9B310;
  border-radius: 6px;
  padding: 6px; }

.line_container.user_line {
  text-align: right; }
  .line_container.user_line .action, .line_container.user_line .targets {
    text-align: left; }
  .line_container.user_line .line:not(.action) .horizontal_content {
    flex-direction: row-reverse;
    text-align: left; }
  .line_container.user_line .author_area {
    flex-direction: row-reverse;
    margin-right: 0;
    margin-left: 10px; }
    .line_container.user_line .author_area .portrait {
      margin-right: 0;
      margin-left: 5px; }
    .line_container.user_line .author_area .name {
      text-align: right;
      font-size: 0.9em;
      max-width: 50%; }
  .line_container.user_line .content_area .content:after {
    border-right-color: transparent;
    border-left-color: white;
    right: initial;
    left: 100%; }
  .line_container.user_line .feedback {
    left: initial;
    right: -30px; }
  .line_container.user_line .chat {
    padding-right: 5px; }
    .line_container.user_line .chat .author_area {
      flex-direction: column;
      margin-left: 15px; }
      .line_container.user_line .chat .author_area .portrait {
        margin: 0 auto; }
        .line_container.user_line .chat .author_area .portrait svg * {
          fill: #D9B310 !important; }

.line_info {
  display: flex;
  font-size: 0.9em; }
  .line_info:not(:empty) {
    margin-bottom: 3px; }
  .line_info > div:not(:first-child) {
    margin-left: 11px; }

.line_target_avatars {
  position: relative;
  margin-left: 10px;
  width: 60px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-items: center;
  z-index: 1; }
  @media (min-width: 600px) {
    .line_target_avatars {
      margin-left: 20px; } }
  .line_target_avatars.avatars_1 .avatar {
    width: 50px;
    height: 50px; }
  .line_target_avatars.avatars_2 .avatar {
    width: 40px;
    height: 40px; }
    .line_target_avatars.avatars_2 .avatar:first-child {
      position: absolute;
      top: 10px;
      left: 20px;
      opacity: 0.6; }
  .line_target_avatars.avatars_3 .avatar, .line_target_avatars.avatars_4 .avatar {
    width: 30px;
    height: 30px; }
    .line_target_avatars.avatars_3 .avatar:nth-child(3), .line_target_avatars.avatars_3 .avatar:last-child, .line_target_avatars.avatars_4 .avatar:nth-child(3), .line_target_avatars.avatars_4 .avatar:last-child {
      position: absolute;
      left: 50%;
      top: 50%; }
    .line_target_avatars.avatars_3 .avatar:nth-child(3), .line_target_avatars.avatars_4 .avatar:nth-child(3) {
      transform: translate(-50%, 0%); }
    .line_target_avatars.avatars_3 .avatar:last-child, .line_target_avatars.avatars_4 .avatar:last-child {
      transform: translate(-50%, -100%);
      opacity: 0.6;
      width: 25px;
      height: 25px;
      z-index: -1; }
  .line_target_avatars.avatars_4 .avatar:first-child, .line_target_avatars.avatars_4 .avatar:nth-child(2) {
    position: relative; }
    .line_target_avatars.avatars_4 .avatar:first-child:after, .line_target_avatars.avatars_4 .avatar:nth-child(2):after {
      position: absolute;
      top: 0;
      left: 0;
      content: " ";
      height: 100%;
      width: 100%;
      background-color: black;
      opacity: 0.2; }

.user_line .line_target_avatars {
  margin-left: 0;
  margin-right: 10px; }
  @media (min-width: 600px) {
    .user_line .line_target_avatars {
      margin-right: 20px; } }

.user_line .line:not(.action) .line_info {
  flex-direction: row-reverse; }
  .user_line .line:not(.action) .line_info > div:not(:first-child) {
    margin-left: 0;
    margin-right: 11px; }

.line_container:not(.reduced) .content_area {
  margin-top: 5px; }
  .line_container:not(.reduced) .content_area .content:after {
    top: 15px; }

.line_container.whispered .line .content_area .content {
  background-color: transparent;
  color: #D7CEC7;
  border: solid 1px #707070; }
  .line_container.whispered .line .content_area .content textarea {
    color: white; }

.line_options.modal_custom {
  text-align: left;
  display: flex;
  flex-direction: column;
  color: white; }
  .line_options.modal_custom hr {
    width: 100%;
    margin: 0.2em 0; }
  .line_options.modal_custom label {
    display: block;
    text-align: center;
    color: #D7CEC7;
    margin-top: 0; }
  .line_options.modal_custom .buttons_group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 0 auto; }
  .line_options.modal_custom .line_summary {
    max-height: 7em;
    overflow: hidden;
    margin-bottom: 0.5em; }
    .line_options.modal_custom .line_summary .author {
      opacity: 0.6; }
  .line_options.modal_custom .button_base.button_list {
    flex-direction: column;
    display: inline-flex;
    width: 40px;
    margin: 0 10px;
    padding: 0.7em 0; }
    .line_options.modal_custom .button_base.button_list .button_title {
      margin-top: 5px;
      text-align: center;
      font-size: 0.6em;
      white-space: initial;
      color: #D7CEC7; }
    .line_options.modal_custom .button_base.button_list .icon {
      margin: 0;
      height: 30px;
      width: initial; }
      .line_options.modal_custom .button_base.button_list .icon svg {
        height: 100%; }
    .line_options.modal_custom .button_base.button_list.delete .button_title {
      color: indianred; }
    .line_options.modal_custom .button_base.button_list.delete svg * {
      fill: indianred !important; }
  .line_options.modal_custom .story_marker_options .button_base.button_list .button_title {
    color: #D9B310; }
  .line_options.modal_custom .story_marker_options svg * {
    fill: #D9B310 !important; }

.line_options_sub_menu.modal_custom .body {
  overflow: hidden; }
.line_options_sub_menu.modal_custom .button_base {
  margin-bottom: 0.5em;
  text-align: left;
  display: block;
  width: 100%; }

.whisper_menu.modal_custom .done_button {
  margin-top: 1em; }

.line.dice_action .more_details_button {
  cursor: pointer;
  margin-left: 3px; }
  .line.dice_action .more_details_button svg {
    position: relative;
    top: 3px;
    height: 12px;
    width: auto; }
    .line.dice_action .more_details_button svg * {
      fill: #D7CEC7 !important; }
.line.dice_action .modifier {
  opacity: 0.6; }
  .line.dice_action .modifier.positive, .line.dice_action .modifier .positive {
    color: #D9B310; }
  .line.dice_action .modifier.negative, .line.dice_action .modifier .negative {
    color: indianred; }
.line.dice_action .specials {
  color: #328CC1;
  font-size: 0.8em;
  opacity: 0.8; }
.line.dice_action .successes {
  color: #D9B310; }
  .line.dice_action .successes.none {
    color: indianred;
    opacity: 0.5; }

.game_screen .line.action .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(50, 140, 193, 0.2);
  background-size: cover; }
.game_screen .line.action.color_1 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(215, 206, 199, 0.3);
  background-size: cover; }
.game_screen .line.action.color_2 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(165, 165, 176, 0.3);
  background-size: cover; }
.game_screen .line.action.color_3 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(164, 201, 223, 0.3);
  background-size: cover; }
.game_screen .line.action.color_4 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(50, 140, 193, 0.3);
  background-size: cover; }
.game_screen .line.action.color_5 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(118, 124, 203, 0.3);
  background-size: cover; }
.game_screen .line.action.color_6 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(95, 158, 160, 0.3);
  background-size: cover; }
.game_screen .line.action.color_7 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(120, 196, 120, 0.3);
  background-size: cover; }
.game_screen .line.action.color_8 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(205, 192, 156, 0.3);
  background-size: cover; }
.game_screen .line.action.color_9 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(217, 179, 16, 0.3);
  background-size: cover; }
.game_screen .line.action.color_10 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(195, 140, 174, 0.3);
  background-size: cover; }
.game_screen .line.action.color_11 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(205, 92, 92, 0.3);
  background-size: cover; }
.game_screen .line.action.color_12 .horizontal_content {
  background: url(../../images/ui/gr_bg_left.png?2) rgba(205, 143, 92, 0.3);
  background-size: cover; }

.game_lines_preview .line.action .horizontal_content {
  background: linear-gradient(to right, rgba(50, 140, 193, 0.2), transparent 65%); }
.game_lines_preview .line.action.color_1 .horizontal_content {
  background: linear-gradient(to right, rgba(215, 206, 199, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_2 .horizontal_content {
  background: linear-gradient(to right, rgba(165, 165, 176, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_3 .horizontal_content {
  background: linear-gradient(to right, rgba(164, 201, 223, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_4 .horizontal_content {
  background: linear-gradient(to right, rgba(50, 140, 193, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_5 .horizontal_content {
  background: linear-gradient(to right, rgba(118, 124, 203, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_6 .horizontal_content {
  background: linear-gradient(to right, rgba(95, 158, 160, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_7 .horizontal_content {
  background: linear-gradient(to right, rgba(120, 196, 120, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_8 .horizontal_content {
  background: linear-gradient(to right, rgba(205, 192, 156, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_9 .horizontal_content {
  background: linear-gradient(to right, rgba(217, 179, 16, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_10 .horizontal_content {
  background: linear-gradient(to right, rgba(195, 140, 174, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_11 .horizontal_content {
  background: linear-gradient(to right, rgba(205, 92, 92, 0.3), transparent 65%); }
.game_lines_preview .line.action.color_12 .horizontal_content {
  background: linear-gradient(to right, rgba(205, 143, 92, 0.3), transparent 65%); }

.line.action {
  position: relative; }
  .line.action .horizontal_content {
    align-items: center;
    padding: 10px; }
  .line.action .roll_name {
    color: #D9B310; }
  .line.action .hint {
    display: block;
    opacity: 0.8; }
  .line.action .icon {
    margin-right: 10px;
    display: flex; }
    .line.action .icon svg, .line.action .icon img {
      height: 20px; }
      .line.action .icon svg *, .line.action .icon img * {
        fill: white !important; }
  .line.action .dice_type, .line.action .result {
    font-weight: 900;
    color: #328CC1; }
  .line.action .result .coma {
    color: #D7CEC7;
    opacity: 0.6; }
  .line.action .die_marker {
    opacity: 0.4; }
  .line.action .die_face_symbol {
    position: relative;
    top: 3px; }
    .line.action .die_face_symbol .character_token {
      height: 15px;
      width: 15px; }
  .line.action .normal {
    opacity: 0.6; }
  .line.action .highlighted {
    position: relative;
    font-weight: bold;
    color: #D9B310;
    width: 1.2em;
    display: inline-block;
    vertical-align: super; }
    .line.action .highlighted.size_1 {
      width: 1em; }
    .line.action .highlighted.size_2 {
      width: 1.5em; }
    .line.action .highlighted.size_3 {
      width: 2em; }
    .line.action .highlighted .number {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      font-size: 1.1em;
      animation: dice_success 1s 1s; }
    .line.action .highlighted.negative {
      color: indianred; }
      .line.action .highlighted.negative .number {
        animation-name: dice_failure; }
  .line.action .title {
    display: flex; }
  .line.action .action_description {
    opacity: 0.5;
    font-size: 0.9em; }

.line.action.open_map .horizontal_content {
  flex-direction: column;
  align-items: flex-start; }
  .line.action.open_map .horizontal_content .title {
    cursor: pointer; }
  .line.action.open_map .horizontal_content .timestamp {
    display: block; }
  .line.action.open_map .horizontal_content .close {
    position: absolute;
    right: 10px;
    color: #D7CEC7; }
  .line.action.open_map .horizontal_content .map .current_section {
    cursor: pointer; }

.line.chat {
  cursor: pointer;
  width: initial;
  display: inline-flex; }
  .line.chat .name {
    font-weight: bold;
    color: #0B3C5D; }
    .line.chat .name .character_name {
      font-size: 0.8em; }
      .line.chat .name .character_name.hidden {
        display: None; }
  .line.chat.gm .name {
    color: #328CC1; }
  .line.chat .author_area .portrait {
    margin: 0 auto;
    position: relative;
    height: 40px;
    width: 40px;
    border: solid 1px #328CC1;
    background-color: rgba(11, 60, 93, 0.8); }
    .line.chat .author_area .portrait img {
      height: 100%;
      width: auto; }
    .line.chat .author_area .portrait svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 80%; }
  .line.chat .author_area.beginner .portrait {
    border-color: #78c478; }
  .line.chat .author_area .name {
    height: initial;
    font-size: 1em;
    max-width: 100%;
    text-align: center; }

.stage_unfolded .line_container.overlapping .storytelling .author_area, .stage_unfolded .line_container.overlapping .storytelling .line_target_avatars, .stage_unfolded .line_container.overlapping .dialogue .author_area, .stage_unfolded .line_container.overlapping .dialogue .line_target_avatars {
  display: none; }
.stage_unfolded .line_container.overlapping .storytelling .content, .stage_unfolded .line_container.overlapping .dialogue .content {
  min-height: var(--content-height, 0);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: none; }
  .stage_unfolded .line_container.overlapping .storytelling .content:after, .stage_unfolded .line_container.overlapping .dialogue .content:after {
    content: none; }

.line.description .content_area .content, .line.storytelling .content_area .content {
  background-color: #40464B;
  position: relative;
  color: #D7CEC7; }
  .line.description .content_area .content textarea, .line.storytelling .content_area .content textarea {
    color: #D7CEC7; }
  .line.description .content_area .content:after, .line.storytelling .content_area .content:after {
    border: none; }

.line.dialogue .author_name {
  color: white;
  flex: 0 0 auto; }
.line.dialogue.npc .author_name {
  color: #D9B310; }
.line.dialogue .portrait.selectable {
  cursor: pointer; }

.line.storytelling .content .language_indicator {
  font-weight: initial;
  color: #D9B310; }

.was_player .line.dialogue.npc .author_name {
  color: #D7CEC7;
  opacity: 0.2; }

.line_container.tone_shared .tone {
  display: none; }
.line_container.reduced .line:not(.chat) .author_area, .line_container.last_of_series .line:not(.chat) .author_area {
  height: 0; }
.line_container.reduced .horizontal_content {
  padding-top: 1px; }
.line_container.reduced .timestamp {
  display: none; }
.line_container.reduced .author_area {
  width: 40px;
  flex: 0 1 auto; }
  @media (min-width: 600px) {
    .line_container.reduced .author_area {
      width: 50px; } }
  .line_container.reduced .author_area .portrait {
    display: none; }
.line_container.reduced.user_line .author_area {
  width: 45px; }
  @media (min-width: 600px) {
    .line_container.reduced.user_line .author_area {
      width: 55px; } }
.line_container.reduced:not(.start_type) .content_area .content:after {
  display: none; }
.line_container.reduced .line.chat .name {
  display: none; }
.line_container.reduced .line.chat .author_area {
  width: 40px;
  height: 10px; }
.line_container.reduced .line.chat.comment .author_area {
  width: 25px; }
.line_container.first_of_series:not(.end_type) .line {
  margin-bottom: 0em; }
.line_container.first_of_series:not(.end_type) .line, .line_container.reduced:not(.end_type) .line, .line_container.last_of_series:not(.end_type) .line {
  margin-bottom: 0em; }
.line_container.first_of_series:not(.start_type):not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.reduced:not(.start_type):not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.last_of_series:not(.start_type):not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content {
  border-radius: 0; }
.line_container.first_of_series:not(.start_type):not(.end_type):not(.overlapping) .line.chat .content_area .content, .line_container.reduced:not(.start_type):not(.end_type):not(.overlapping) .line.chat .content_area .content, .line_container.last_of_series:not(.start_type):not(.end_type):not(.overlapping) .line.chat .content_area .content {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }
.line_container.first_of_series.start_type:not(.end_type):not(.overlapping):not(.user_line) .line.chat .content_area .content, .line_container.first_of_series.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.reduced.start_type:not(.end_type):not(.overlapping):not(.user_line) .line.chat .content_area .content, .line_container.reduced.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.last_of_series.start_type:not(.end_type):not(.overlapping):not(.user_line) .line.chat .content_area .content, .line_container.last_of_series.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content {
  border-bottom-left-radius: 0; }
.line_container.first_of_series.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.reduced.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.last_of_series.start_type:not(.end_type):not(.overlapping) .line:not(.chat) .content_area .content {
  border-bottom-right-radius: 0; }
.line_container.first_of_series.start_type:not(.end_type):not(.overlapping).user_line .line .content_area .content, .line_container.reduced.start_type:not(.end_type):not(.overlapping).user_line .line .content_area .content, .line_container.last_of_series.start_type:not(.end_type):not(.overlapping).user_line .line .content_area .content {
  border-bottom-right-radius: 0; }
.line_container.first_of_series.end_type:not(.start_type):not(.overlapping) .line .content_area .content, .line_container.reduced.end_type:not(.start_type):not(.overlapping) .line .content_area .content, .line_container.last_of_series.end_type:not(.start_type):not(.overlapping) .line .content_area .content {
  border-top-left-radius: 0; }
.line_container.first_of_series.end_type:not(.start_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.reduced.end_type:not(.start_type):not(.overlapping) .line:not(.chat) .content_area .content, .line_container.last_of_series.end_type:not(.start_type):not(.overlapping) .line:not(.chat) .content_area .content {
  border-top-right-radius: 0; }
.line_container.first_of_series.end_type:not(.start_type):not(.overlapping).user_line .line .content_area .content, .line_container.reduced.end_type:not(.start_type):not(.overlapping).user_line .line .content_area .content, .line_container.last_of_series.end_type:not(.start_type):not(.overlapping).user_line .line .content_area .content {
  border-top-right-radius: 0; }
.line_container.first_of_series.end_type:not(.start_type):not(.overlapping).user_line .line:not(.chat) .content_area .content, .line_container.reduced.end_type:not(.start_type):not(.overlapping).user_line .line:not(.chat) .content_area .content, .line_container.last_of_series.end_type:not(.start_type):not(.overlapping).user_line .line:not(.chat) .content_area .content {
  border-top-left-radius: 0; }

.line_container.overlapping.tone_shared .tone {
  display: none; }

.write_box {
  display: flex;
  flex-direction: column;
  font-weight: 400;
  flex: 0 1 auto;
  margin-bottom: 11px;
  z-index: auto;
  position: relative; }
  .write_box .vertical_pane {
    z-index: 100;
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto; }
    .write_box .vertical_pane .section {
      flex: 0 1 auto;
      display: inline-flex;
      align-items: center; }
    .write_box .vertical_pane.menu_pane {
      align-items: flex-end; }
    .write_box .vertical_pane .menu {
      font-size: 0.8em; }
      .write_box .vertical_pane .menu > *:not(:last-child) {
        margin-right: 0.5em; }
      .write_box .vertical_pane .menu button.icon_only {
        height: 35px;
        width: 35px; }
  .write_box .join_button {
    min-width: 5em; }
  .write_box .text_pane {
    padding-top: 0.2em;
    padding-bottom: 0.4em; }
  .write_box .input_pane {
    flex: 0 0 auto;
    background-color: #2D2F30;
    box-shadow: -1px 1px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 2px; }
  .write_box.disabled {
    opacity: 0.2; }
  .write_box.container {
    overflow: initial; }
  .write_box .portrait {
    margin: auto;
    height: 30px;
    width: 30px;
    overflow: hidden; }
    .write_box .portrait.generic_icon svg * {
      fill: #D7CEC7; }
  .write_box .name_area {
    font-size: 0.6em; }
    .write_box .name_area .name {
      font-weight: 400;
      color: #D9B310; }
    .write_box .name_area .clickable {
      cursor: pointer; }
    .write_box .name_area.public .name {
      color: #D7CEC7; }
  .write_box .current_chat {
    font-size: 0.8em;
    margin-right: 6px; }
  .write_box .input_field_button {
    display: flex;
    position: relative;
    width: 40px;
    user-select: none;
    -moz-user-select: none;
    text-align: center;
    align-items: center;
    justify-content: center; }
    .write_box .input_field_button:not(:first-child):before {
      content: "";
      display: block;
      height: 50%;
      width: 2px;
      background-color: #707070;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1; }
    .write_box .input_field_button.disabled {
      opacity: 0.5; }
    .write_box .input_field_button.dialogue_switch:not(.disabled) .big_icon {
      opacity: 1; }
    .write_box .input_field_button.avatar_area {
      width: 60px;
      margin: 0; }
    .write_box .input_field_button:not(.disabled):hover {
      cursor: pointer; }
    .write_box .input_field_button .big_icon {
      flex: 0 1 auto;
      opacity: 0.3; }
      .write_box .input_field_button .big_icon svg {
        display: block;
        margin: auto;
        height: 20px;
        width: 15px;
        top: 50%;
        left: 50%; }
    .write_box .input_field_button .close_comments {
      font-size: 0.6em;
      height: 35px;
      width: 35px;
      min-height: 0;
      min-width: 0; }
  .write_box .input_area.clickable textarea {
    cursor: pointer; }
  .write_box .input_area {
    flex: 1;
    position: relative;
    background-color: #2D2F30; }
    .write_box .input_area:not(:first-child):before {
      content: "";
      display: block;
      height: 50%;
      width: 2px;
      background-color: #707070;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1; }
    .write_box .input_area .write_options_area {
      position: relative;
      margin-bottom: 1px;
      transition: all 0.25s; }
      .write_box .input_area .write_options_area.away {
        opacity: 0;
        height: 0;
        overflow: hidden; }
    .write_box .input_area .language_indicator {
      position: absolute;
      opacity: 0.6;
      font-size: 0.6em;
      top: 0;
      right: 0.5em;
      color: #D9B310;
      z-index: 1; }
    .write_box .input_area textarea {
      vertical-align: top;
      width: 100%;
      transition: all 0.5s;
      position: relative;
      padding: 7px 10px;
      background-color: transparent;
      color: #D7CEC7;
      font-size: 0.6em;
      border-radius: 0; }
      .write_box .input_area textarea:not(:focus):not(.long_placeholder)::placeholder {
        font-size: 1.5em; }
      .write_box .input_area textarea::placeholder {
        color: #D7CEC7;
        opacity: 0.5; }
      .write_box .input_area textarea:disabled {
        opacity: 0.5; }
  .write_box.is_description .language_indicator, .write_box.chat .language_indicator {
    display: none; }
  .write_box .send_option {
    position: relative;
    transition: width 0.25s;
    width: 50px;
    padding-left: 10px;
    overflow: hidden; }
    .write_box .send_option.away {
      width: 0;
      padding: 0; }
    .write_box .send_option svg, .write_box .send_option img {
      width: 30px;
      height: auto;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .write_box .send_option svg polygon, .write_box .send_option img polygon {
        fill: #D7CEC7 !important; }
  .write_box.is_description:not(.chat) .input_area textarea {
    background-color: #40464B;
    color: #D7CEC7; }

.writing_options .popover_custom.position_top {
  min-width: 150px;
  max-height: 50vh; }
  .writing_options .popover_custom.position_top .loading_icon {
    display: none; }
.writing_options .writing_options_button {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  .writing_options .writing_options_button .amount {
    color: #D9B310;
    font-size: 0.7em;
    position: absolute;
    bottom: 5px;
    right: 2px; }
  .writing_options .writing_options_button svg {
    transform: rotate(90deg); }
    .writing_options .writing_options_button svg * {
      fill: #D7CEC7; }

#character_menu_popover {
  max-width: 80vw;
  max-height: 80vh; }
  #character_menu_popover .option_bar_label {
    white-space: nowrap; }
  #character_menu_popover hr {
    margin: -5px 30px 0.5em 30px; }
  #character_menu_popover .narrator {
    flex: 0 0 auto; }

#open_chat_menu .icon {
  top: 40%; }

.write_box.spectating .input_pane {
  background-color: transparent; }

.dice_roll_menu {
  display: inline-flex; }
  .dice_roll_menu #roll_menu_popover {
    padding: 11px;
    transform: translateY(-50%, calc(-100% - 10px)); }
    .dice_roll_menu #roll_menu_popover .popover_custom_content {
      padding: 0; }
    .dice_roll_menu #roll_menu_popover .die_name, .dice_roll_menu #roll_menu_popover .die_number, .dice_roll_menu #roll_menu_popover .hint:not(.selectable) {
      user-select: none; }
  .dice_roll_menu .roll_dice_button, .dice_roll_menu .bottom_button {
    margin: 0.8em 0;
    padding: 0.5em 1em;
    min-width: 10em; }

.App.keyboard_opened #roll_menu_popover {
  left: 10px;
  bottom: -10px;
  width: calc(100vw - 20px); }
  .App.keyboard_opened #roll_menu_popover .roll_request_menu {
    width: 100%;
    max-width: initial; }
  .App.keyboard_opened #roll_menu_popover .roll_options, .App.keyboard_opened #roll_menu_popover .advanced_roll, .App.keyboard_opened #roll_menu_popover .roll_request_menu {
    max-width: initial;
    width: initial; }

@media (min-width: 600px) {
  .roll_options, .roll_macros, .advanced_roll, .roll_request_menu {
    min-width: 20em;
    width: 20em;
    max-width: 70vw; } }
.roll_options label, .roll_macros label, .advanced_roll label, .roll_request_menu label {
  font-size: 0.8em; }
.roll_options hr, .roll_macros hr, .advanced_roll hr, .roll_request_menu hr {
  margin: 0.5em 0 0.1em 0; }
.roll_options .options_title, .roll_macros .options_title, .advanced_roll .options_title, .roll_request_menu .options_title {
  display: block;
  margin-bottom: 1em;
  text-align: center; }
.roll_options .button_container, .roll_macros .button_container, .advanced_roll .button_container, .roll_request_menu .button_container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 0 0 auto; }

.roll_macros {
  overflow: hidden;
  display: flex;
  flex-direction: column; }
  .roll_macros .characters_list, .roll_macros .macro_visualization {
    margin-bottom: 10px; }
  .roll_macros .select_macro_targets {
    display: flex;
    flex-direction: column;
    overflow: hidden; }
    .roll_macros .select_macro_targets.selecting_label .macro_visualization {
      overflow-y: auto;
      white-space: nowrap;
      flex: 1 0 auto;
      padding-bottom: 0.5em; }

.roll_command .input_field {
  display: flex; }
  .roll_command .input_field .character_name {
    max-width: 30%;
    flex: 0 1 auto;
    padding: 10px 5px 10px 3px;
    background-color: #328CC1;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; }
    .roll_command .input_field .character_name span {
      position: relative;
      top: 50%;
      transform: translateY(-50%); }
  .roll_command .input_field input {
    flex: 1;
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px; }
    .roll_command .input_field input::placeholder {
      opacity: 0.5;
      font-weight: 100; }
.roll_command .hint {
  margin-top: 10px;
  font-size: 0.8em; }
  .roll_command .hint .hint_title {
    padding: 1em 0;
    cursor: pointer; }
  .roll_command .hint .command_example {
    opacity: 0.8; }
  .roll_command .hint .generation {
    opacity: 0.5; }
  .roll_command .hint .collapse, .roll_command .hint .collapsing {
    max-height: 15vh;
    overflow: auto; }
  .roll_command .hint ul {
    list-style: none;
    padding-left: 0.5em; }
.roll_command .die_face_symbol {
  position: relative;
  top: 3px; }
  .roll_command .die_face_symbol .character_token {
    height: 15px;
    width: 15px; }

.roll_request_menu .roll_name {
  margin-bottom: 1em; }
.roll_request_menu .timer {
  margin-bottom: 3em; }
.roll_request_menu .button_container button {
  width: 10em; }
  .roll_request_menu .button_container button:first-child:not(:last-child) {
    margin-right: 0.5em; }
.roll_request_menu .characters_list {
  overflow: auto;
  max-height: 35vh; }
.roll_request_menu .all_bar {
  margin-top: 1em;
  margin-bottom: 1em; }

.roll_requests {
  flex: 0 0 auto;
  font-size: 0.8em;
  padding: 0; }
  .roll_requests .tabs {
    display: flex;
    font-size: 0.6em; }
    .roll_requests .tabs .tab {
      width: 5em;
      height: 2em;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 1px rgba(112, 112, 112, 0.5);
      border-radius: 5px 5px 0 0;
      cursor: pointer; }
      .roll_requests .tabs .tab.selected {
        background-color: rgba(215, 206, 199, 0.6);
        border-color: transparent;
        cursor: initial; }
  .roll_requests .current_roll_box {
    display: flex;
    background-color: #2C2C2C;
    border: solid 1px #D9B310;
    border-radius: 6px;
    padding: 0.5em; }
    .roll_requests .current_roll_box .icon {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 1.5em 0 1em; }
      .roll_requests .current_roll_box .icon img {
        height: 3em; }
    .roll_requests .current_roll_box .roll_info {
      flex: 1;
      display: flex;
      flex-direction: column; }
      .roll_requests .current_roll_box .roll_info .name {
        color: #D9B310; }
      .roll_requests .current_roll_box .roll_info .command {
        font-size: 1.1em;
        color: #328CC1; }
      .roll_requests .current_roll_box .roll_info .targets {
        font-size: 0.8em;
        opacity: 0.6; }
        .roll_requests .current_roll_box .roll_info .targets .target_name:not(:first-child):not(:last-child):before {
          content: ", "; }
        .roll_requests .current_roll_box .roll_info .targets .target_name:last-child:not(:first-child):before {
          content: " & "; }
  .roll_requests .right_pane {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0.5em;
    text-align: center; }
    .roll_requests .right_pane button {
      min-width: 5em; }
  .roll_requests .timer {
    margin-top: 0.5em;
    font-size: 0.8em; }
    .roll_requests .timer .hint {
      opacity: 0.6;
      margin-right: 0.5em; }
    .roll_requests .timer .value {
      color: #D9B310; }

.roll_options {
  max-height: 54vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: auto; }
  .roll_options .hint {
    opacity: 0.6;
    font-size: 0.8em;
    animation: fade_in_6 0.25s; }
  .roll_options .main_content {
    flex: 1;
    overflow: auto; }
  .roll_options .die_button {
    display: inline-block;
    position: relative;
    width: 50px;
    margin: 0.1em;
    cursor: pointer; }
    .roll_options .die_button .character_token {
      border-radius: 4px;
      transition: background-color 0.15s, height 0.15s, width 0.15s;
      background-color: transparent; }
    .roll_options .die_button:active .character_token {
      transition: background-color 0s, height 0s, width 0s; }
    .roll_options .die_button .die_name {
      font-size: 0.8em; }
    .roll_options .die_button .die_number {
      position: absolute;
      bottom: -8px;
      right: -1px; }
  .roll_options .dice_sets .character_token {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    height: 30px;
    width: 30px;
    border: solid 1px #3b4045; }
  .roll_options .dice_sets .die_button {
    height: 60px;
    padding: 5px; }
    .roll_options .dice_sets .die_button:active .character_token {
      background-color: #328CC1;
      height: 33px;
      width: 33px; }
  .roll_options .dice_pool {
    min-height: 5em;
    border: solid 1px #3b4045; }
    .roll_options .dice_pool .character_token {
      animation: fade_in_6 0.25s; }
    .roll_options .dice_pool .die_button:active .character_token {
      background-color: rgba(205, 92, 92, 0.5); }
  .roll_options #modifier_popover {
    width: 100px; }
    .roll_options #modifier_popover .amount_option {
      padding: 0.5em 0;
      text-align: center;
      cursor: pointer; }
      .roll_options #modifier_popover .amount_option:hover {
        color: white; }
  .roll_options .custom_modifier {
    text-align: center;
    margin: 0 0.5em 0.5em 0.5em; }
    .roll_options .custom_modifier .option {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: -1em; }
      .roll_options .custom_modifier .option .button_base {
        min-height: initial;
        margin-right: 0.5em; }
      .roll_options .custom_modifier .option .value {
        border: solid 1px #D7CEC7;
        min-width: 2em; }

.game_list_screen .page_content {
  display: flex;
  flex-direction: column; }
  .game_list_screen .page_content .horizontal_list_item_container {
    display: flex;
    justify-content: center; }
.game_list_screen .upper_tabs .upper_tab:not(:last-child) {
  border-right: none; }
.game_list_screen .game_item {
  margin-bottom: 1em; }
.game_list_screen .flow_buttons {
  margin-top: 2em; }

.notes_screen .page_content {
  display: flex;
  flex-direction: column; }
  .notes_screen .page_content .container {
    height: 100%;
    word-wrap: break-word;
    overflow: auto; }
.notes_screen textarea {
  margin-top: 10px;
  min-height: calc(100% - 20px);
  width: 100%; }
.notes_screen .game_handouts {
  white-space: pre-line;
  margin-top: 0; }
  .notes_screen .game_handouts.read-only {
    padding-top: 20px; }
    .notes_screen .game_handouts.read-only .hint {
      opacity: 0.6; }
.notes_screen .section_title {
  display: flex;
  font-family: "Tahoma", sans-serif;
  margin-bottom: 10px;
  opacity: 0.8; }
  .notes_screen .section_title svg {
    height: 20px;
    width: auto;
    margin-right: 10px; }
    .notes_screen .section_title svg * {
      fill: #D7CEC7; }
  .notes_screen .section_title:first-child {
    margin-top: 20px; }
.notes_screen .game_description, .notes_screen .game_rules {
  white-space: pre-line;
  font-size: 0.8em; }

@keyframes selection_bounce {
  from {
    width: 1px;
    height: 50%; }
  20% {
    width: 1px;
    height: 20%; }
  80% {
    height: 80%;
    width: 4px; }
  to {
    height: 55%;
    width: 3px; } }
.characters_screen .page_content {
  padding-bottom: 90px; }
  .characters_screen .page_content .title {
    margin-top: 17px;
    font-size: 0.6em;
    margin-bottom: 0.7rem; }
.characters_screen .player_characters:first-child {
  margin-top: 17px; }

.character_item.option_bar {
  margin-bottom: 0.5em;
  white-space: nowrap;
  flex: 0 0 auto; }
  .character_item.option_bar .visibility_icon {
    position: absolute;
    bottom: 0;
    right: 5px;
    width: 37%;
    background-color: #2D2F30;
    border-radius: 100%;
    padding: 5%; }
    .character_item.option_bar .visibility_icon svg {
      height: auto;
      width: 100%; }
  .character_item.option_bar .option_bar_label {
    padding-right: 3em; }
  .character_item.option_bar .beginner_tag {
    color: #78c478; }
  .character_item.option_bar.light .avatar {
    width: 30px;
    height: 30px; }

.player_selection_modal .option_bar {
  margin-bottom: 5px; }

.login_screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fade_in 0.25s;
  padding-top: 30px; }
  .login_screen .option_bar {
    margin-bottom: 2em; }
  .login_screen a {
    cursor: pointer;
    transition: all 0.25s; }
    .login_screen a:hover {
      color: #D9B310 !important; }
  .login_screen .logo {
    width: 50px;
    height: 50px;
    margin: 0px auto 20px auto; }
  .login_screen .page_content .container {
    padding-top: 30px;
    flex: 1;
    position: relative; }
  .login_screen .form {
    position: relative; }
    .login_screen .form label {
      font-size: 0.8em;
      margin-bottom: 0; }
  .login_screen .area {
    display: flex;
    flex-direction: column;
    margin-top: 20px; }
    .login_screen .area.password {
      animation: fade_in 0.25s; }
    .login_screen .area input {
      border: none;
      background-color: transparent;
      border-bottom: solid 1px #328CC1;
      transition: all 0.25s; }
      .login_screen .area input:focus {
        background-color: transparent;
        border-bottom: solid 1px #D9B310; }
  .login_screen input[type=checkbox] {
    top: 3px;
    margin-right: 3px;
    position: relative; }
  .login_screen .remember_me, .login_screen .privacy_policy_line {
    margin-top: 15px; }
    .login_screen .remember_me .switch, .login_screen .privacy_policy_line .switch {
      margin-right: 3px; }
  .login_screen .loading_icon {
    display: inline-block;
    margin: 10px 0; }
  .login_screen .footer {
    display: flex;
    flex-direction: row;
    margin-top: 10px; }
    .login_screen .footer a {
      flex: 1; }
    .login_screen .footer .forgot_password_link {
      text-align: right; }
  .login_screen .option_bar label.hint {
    left: 0;
    right: initial;
    bottom: -0.2em;
    opacity: 1; }
  .login_screen .error {
    color: red;
    font-size: 1.3em; }
  .login_screen.reset .validate {
    margin-top: 30px; }

.profile_settings_screen .delete_account_link {
  font-size: 0.8em;
  opacity: 0.6;
  float: right;
  margin-bottom: 2em; }
.profile_settings_screen .page_content .container {
  position: relative;
  flex: 1;
  margin-bottom: 30px; }
.profile_settings_screen .error {
  color: indianred;
  font-size: 1.3em; }
.profile_settings_screen .languages {
  font-size: 0.8em; }
  .profile_settings_screen .languages .option {
    cursor: pointer;
    opacity: 0.6; }
    .profile_settings_screen .languages .option:not(:first-child):before {
      content: " / "; }
  .profile_settings_screen .languages .selected {
    opacity: 1; }
.profile_settings_screen .option_bar, .profile_settings_screen .tag_picker {
  margin-bottom: 10px; }
  .profile_settings_screen .option_bar.has_hint, .profile_settings_screen .tag_picker.has_hint {
    margin-bottom: 2em; }
.profile_settings_screen .email_field .hint {
  color: indianred;
  opacity: 1;
  font-size: 1em; }
.profile_settings_screen .section_title {
  margin-top: 15px; }

.discord_link_button {
  text-align: center; }
  .discord_link_button a[type='button'] {
    background: linear-gradient(to right, #7289da, #7289da);
    color: white;
    box-shadow: 0 0px 2px 1px #7289da;
    border-color: rgba(255, 255, 255, 0.1);
    padding: 0.7em 1em; }
    .discord_link_button a[type='button']:hover {
      background-color: transparent; }
    .discord_link_button a[type='button'] svg {
      height: 1em;
      margin-right: 0.5em; }
      .discord_link_button a[type='button'] svg *, .discord_link_button a[type='button'] svg path {
        fill: white !important; }
  .discord_link_button .discord_user {
    text-align: center;
    background-color: rgba(215, 206, 199, 0.1);
    padding: 0.5em; }
    .discord_link_button .discord_user label {
      font-weight: 400;
      text-align: left; }

.settings_screen {
  font-size: 0.8em; }

.profile_page .profile_banner .image {
  text-align: center;
  opacity: 0.4; }
  .profile_page .profile_banner .image svg {
    margin-top: 1em;
    height: 10em; }
.profile_page .page_content {
  display: flex;
  flex-direction: column; }
.profile_page .darker_background {
  background-color: rgba(27, 30, 38, 0.85);
  flex: 1;
  display: flex;
  flex-direction: column; }
  .profile_page .darker_background .scroll_list {
    flex: 1; }
.profile_page .profile_summary {
  margin-top: 1em;
  padding-bottom: 1em;
  border-bottom: solid 1px #707070;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }
  .profile_page .profile_summary.no_bottom {
    border-bottom: none; }
  .profile_page .profile_summary .avatar_column {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 0 1 auto; }
  .profile_page .profile_summary .user_info {
    width: 100%;
    margin-top: 0.5em; }
    .profile_page .profile_summary .user_info .username {
      line-height: 1.2em;
      font-size: 1.3em;
      word-break: break-word; }
    .profile_page .profile_summary .user_info .rank_name {
      font-size: 0.9em;
      margin-top: 0.1em; }
  .profile_page .profile_summary .portrait {
    height: 110px;
    width: 110px;
    margin-left: auto;
    margin-right: auto; }
  .profile_page .profile_summary .coins_summary {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    cursor: pointer;
    max-width: 40vw; }
    .profile_page .profile_summary .coins_summary .purse_explanation_button {
      cursor: pointer;
      font-size: 0.9em;
      opacity: 0.6;
      margin-left: 0.3em; }
      .profile_page .profile_summary .coins_summary .purse_explanation_button:hover {
        opacity: 1; }
    .profile_page .profile_summary .coins_summary .purse {
      margin-top: 0.5em; }
    .profile_page .profile_summary .coins_summary .chest, .profile_page .profile_summary .coins_summary .purse {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end; }
      .profile_page .profile_summary .coins_summary .chest .coins_list, .profile_page .profile_summary .coins_summary .purse .coins_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end; }
        .profile_page .profile_summary .coins_summary .chest .coins_list .coin, .profile_page .profile_summary .coins_summary .purse .coins_list .coin {
          display: inline-block; }
          .profile_page .profile_summary .coins_summary .chest .coins_list .coin img, .profile_page .profile_summary .coins_summary .purse .coins_list .coin img {
            height: 1.7em; }
          .profile_page .profile_summary .coins_summary .chest .coins_list .coin:not(:first-child), .profile_page .profile_summary .coins_summary .purse .coins_list .coin:not(:first-child) {
            margin-left: -0.3em; }
          .profile_page .profile_summary .coins_summary .chest .coins_list .coin .icon, .profile_page .profile_summary .coins_summary .purse .coins_list .coin .icon {
            position: relative; }
          .profile_page .profile_summary .coins_summary .chest .coins_list .coin .amount, .profile_page .profile_summary .coins_summary .purse .coins_list .coin .amount {
            font-size: 0.9em;
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
            font-weight: bold; }
      .profile_page .profile_summary .coins_summary .chest > .icon, .profile_page .profile_summary .coins_summary .purse > .icon {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 3em; }
        .profile_page .profile_summary .coins_summary .chest > .icon label, .profile_page .profile_summary .coins_summary .purse > .icon label {
          opacity: 0.6;
          margin-bottom: 0;
          font-size: 0.8em;
          text-align: center; }
        .profile_page .profile_summary .coins_summary .chest > .icon svg, .profile_page .profile_summary .coins_summary .purse > .icon svg {
          height: 2em; }
          .profile_page .profile_summary .coins_summary .chest > .icon svg *, .profile_page .profile_summary .coins_summary .purse > .icon svg * {
            fill: white; }
.profile_page .bio {
  position: relative;
  margin-bottom: 2em; }
  .profile_page .bio.empty {
    opacity: 0.6; }
  .profile_page .bio.editing textarea {
    padding: 0.5em;
    color: #D7CEC7;
    width: 100%;
    border-radius: 6px;
    background-color: #40464B; }
  .profile_page .bio .editing_notice {
    position: absolute;
    left: 0;
    top: 1em;
    font-size: 0.6em;
    opacity: 0.6; }
  .profile_page .bio .options {
    font-size: 0.7em;
    text-align: right; }
    .profile_page .bio .options button {
      margin-bottom: 0.5em;
      padding: 0.5em 1em; }
      .profile_page .bio .options button:not(:last-child) {
        margin-right: 1em; }
      .profile_page .bio .options button svg {
        margin-left: 0.5em; }
.profile_page .game_list_screen .page_content {
  background: transparent; }
.profile_page .template_item {
  margin-bottom: 11px; }
.profile_page .nav_tabs.secondary {
  position: relative;
  display: flex;
  margin-top: 1em;
  margin-bottom: 1em;
  z-index: initial; }
  .profile_page .nav_tabs.secondary .tab {
    flex-direction: column; }
  .profile_page .nav_tabs.secondary .tab_title {
    color: #D7CEC7;
    display: block;
    margin-top: 0.5em;
    font-size: 10px;
    opacity: 0.6; }
  .profile_page .nav_tabs.secondary .tab.selected:after {
    content: none; }
  .profile_page .nav_tabs.secondary .tab.selected > .icon > svg * {
    fill: #D9B310 !important; }
  .profile_page .nav_tabs.secondary .tab > .icon > svg {
    height: 2em;
    width: 2em; }

.friend_status {
  color: #78c478;
  font-size: 0.7em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end; }
  .friend_status svg {
    height: 0.9em;
    margin-right: 0.3em; }
    .friend_status svg * {
      fill: #78c478; }

.add_friend_container {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
  font-size: 0.8em; }

.explanation_button {
  font-size: 14px;
  cursor: pointer;
  color: #D7CEC7;
  opacity: 0.4;
  position: absolute;
  margin: 0;
  right: -0.8em; }

@media (min-width: 600px) {
  .friend_explanation .store_button {
    max-width: 250px; } }
.friend_explanation .store_button img {
  max-width: 100%;
  border: none !important; }
@media (min-width: 600px) {
  .friend_explanation .store_button.ios {
    padding: 0 2%; }
    .friend_explanation .store_button.ios img {
      height: 77px; } }

.join_game_screen .search_bar {
  padding: 0.8em 0.6em;
  border: solid 1px #D7CEC7;
  border-radius: 6px;
  height: initial; }
  .join_game_screen .search_bar input {
    padding-left: 10px;
    background-color: transparent; }
.join_game_screen .search_input {
  margin-bottom: 0; }
.join_game_screen .search_options_buttons {
  display: flex;
  margin: 1em 0; }
  .join_game_screen .search_options_buttons .collapse_button {
    display: flex;
    margin-right: 2em; }
    .join_game_screen .search_options_buttons .collapse_button .title {
      margin-right: 1em; }
    .join_game_screen .search_options_buttons .collapse_button .icon {
      opacity: 0.6;
      height: 0.8em; }
    .join_game_screen .search_options_buttons .collapse_button:hover .title, .join_game_screen .search_options_buttons .collapse_button.opened .title {
      color: white; }
.join_game_screen .search_options_area {
  max-height: 0;
  transition: max-height 0.35s, border-color 0.35s;
  border: solid 1px transparent; }
  .join_game_screen .search_options_area .search_parameters, .join_game_screen .search_options_area .sorting {
    opacity: 0;
    pointer-events: none; }
  .join_game_screen .search_options_area.show {
    padding: 0.5em;
    max-height: 150px;
    border-color: rgba(215, 206, 199, 0.2); }
    .join_game_screen .search_options_area.show .search_parameters, .join_game_screen .search_options_area.show .sorting {
      opacity: 1;
      pointer-events: initial; }
  .join_game_screen .search_options_area .search_parameters {
    display: flex;
    align-items: center;
    transition: opacity 0.35s; }
    .join_game_screen .search_options_area .search_parameters .filters {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      margin-left: 2em; }
      .join_game_screen .search_options_area .search_parameters .filters .switch_box {
        display: flex;
        justify-content: flex-end; }
        .join_game_screen .search_options_area .search_parameters .filters .switch_box:not(:last-child) {
          margin-bottom: 1em; }
    .join_game_screen .search_options_area .search_parameters .tag_picker .option_bar {
      border: solid 1px #D7CEC7;
      border-radius: 6px;
      background-color: transparent;
      box-shadow: none; }
      .join_game_screen .search_options_area .search_parameters .tag_picker .option_bar .option_bar_element {
        padding: 0.8em 0.6em; }
    .join_game_screen .search_options_area .search_parameters .tag_picker .selected_tag_item {
      background-color: transparent; }
  .join_game_screen .search_options_area .sorting {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .join_game_screen .search_options_area .sorting .sort_option {
      cursor: pointer;
      padding: 0.5em;
      position: relative;
      padding-bottom: 8px;
      text-align: center; }
      .join_game_screen .search_options_area .sorting .sort_option:hover {
        color: white; }
      .join_game_screen .search_options_area .sorting .sort_option.active, .join_game_screen .search_options_area .sorting .sort_option.selected {
        color: #D9B310; }
        .join_game_screen .search_options_area .sorting .sort_option.active:after, .join_game_screen .search_options_area .sorting .sort_option.selected:after {
          opacity: 1;
          width: 60%;
          left: 20%; }
      .join_game_screen .search_options_area .sorting .sort_option.disabled {
        opacity: 0.3;
        pointer-events: none; }
      .join_game_screen .search_options_area .sorting .sort_option:after {
        position: absolute;
        bottom: 15%;
        display: block;
        content: " ";
        left: 30%;
        width: 40%;
        height: 4px;
        background-color: #D9B310;
        border-radius: 5px;
        opacity: 0;
        transition: all 0.25s; }

.color_picker {
  display: inline; }
  .color_picker .current_color_box_container {
    position: relative;
    display: inline-block; }

.color_box {
  cursor: pointer;
  min-width: 50px;
  height: 50px; }
  .color_box.color_1 {
    background-color: #D7CEC7; }
  .color_box.color_2 {
    background-color: #a5a5b0; }
  .color_box.color_3 {
    background-color: #a4c9df; }
  .color_box.color_4 {
    background-color: #328CC1; }
  .color_box.color_5 {
    background-color: #767ccb; }
  .color_box.color_6 {
    background-color: cadetblue; }
  .color_box.color_7 {
    background-color: #78C478; }
  .color_box.color_8 {
    background-color: #cdc09c; }
  .color_box.color_9 {
    background-color: #D9B310; }
  .color_box.color_10 {
    background-color: #c38cae; }
  .color_box.color_11 {
    background-color: indianred; }
  .color_box.color_12 {
    background-color: #CD8F5C; }

#popover_portal {
  z-index: 100; }

.popover_container {
  position: relative; }

.popover_custom {
  text-align: left;
  position: fixed;
  animation: fade_in 0.25s;
  z-index: 100;
  background-color: #252627;
  color: #D7CEC7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  font-size: 14px;
  top: var(--top, initial);
  left: var(--left, 0);
  bottom: var(--bottom, initial); }
  .popover_custom ::-webkit-scrollbar {
    width: 5px;
    height: 5px; }
  .popover_custom ::-webkit-scrollbar-track {
    background: transparent; }
  .popover_custom.wide {
    min-width: 350px; }
  .popover_custom .popover_custom_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5em; }
    .popover_custom .popover_custom_content:not(.allow_overflow) {
      overflow-y: auto;
      overflow-x: hidden; }
  .popover_custom:after {
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-width: 10px; }
  .popover_custom.position_right:after {
    right: 100%;
    top: var(--arrow_top_position, 50%);
    border-right-color: #252627;
    margin-top: -10px; }
  .popover_custom.position_top:after {
    left: var(--arrow_left_position, 50%);
    top: 100%;
    border-top-color: #252627;
    margin-left: -10px; }
  .popover_custom.position_bottom:after {
    left: var(--arrow_left_position, 50%);
    top: -20px;
    border-bottom-color: #252627;
    margin-left: -10px; }
  .popover_custom .list_menu_title, .popover_custom .popover_custom_title {
    flex: 0 1 auto;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    padding: 1em;
    font-size: 0.8em;
    white-space: nowrap; }
    .popover_custom .list_menu_title .back_button, .popover_custom .popover_custom_title .back_button {
      margin-right: 5px;
      display: inline-block;
      height: 15px;
      width: 15px; }
      .popover_custom .list_menu_title .back_button svg, .popover_custom .popover_custom_title .back_button svg {
        height: 100%;
        width: auto; }
        .popover_custom .list_menu_title .back_button svg *, .popover_custom .popover_custom_title .back_button svg * {
          fill: #D7CEC7; }
  .popover_custom label {
    font-size: 0.8em;
    margin-left: 0.5em; }
  .popover_custom.list_popover .popover_custom_content {
    display: flex;
    flex-direction: column; }
  .popover_custom.list_popover .menu_item {
    cursor: pointer;
    padding: 3px 10px;
    opacity: 0.8;
    display: flex; }
    .popover_custom.list_popover .menu_item:hover {
      opacity: 1; }
    .popover_custom.list_popover .menu_item .title {
      flex: 1; }
    .popover_custom.list_popover .menu_item .icon {
      height: 20px;
      width: 20px;
      margin-right: 5px; }
      .popover_custom.list_popover .menu_item .icon svg {
        height: 100%;
        width: auto;
        display: block; }
        .popover_custom.list_popover .menu_item .icon svg * {
          fill: #D7CEC7; }
  .popover_custom.list_popover .scroll_list {
    flex: 1; }
  .popover_custom .empty_message {
    font-size: 0.8em;
    opacity: 0.6; }

.list_item {
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s; }
  .list_item .popover_custom_content {
    padding: 0; }
  .list_item:after {
    margin-top: 3px;
    position: relative;
    display: block;
    content: " ";
    width: 40%;
    height: 4px;
    background-color: #D9B310;
    border-radius: 5px;
    opacity: 0;
    transition: all 0.25s; }
  .list_item.selected {
    color: #D9B310; }
    .list_item.selected:after {
      opacity: 1;
      width: 80%; }

#modal_portal {
  z-index: 100; }

.modal_backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(27, 30, 38, 0.5);
  z-index: -1;
  pointer-events: none;
  animation: fade_in 0.5s; }

.modal_custom_container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  z-index: 100;
  color: #D7CEC7; }
  .modal_custom_container .modal_custom {
    margin: 10vh auto 50px auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
    animation: fade_in 0.5s;
    border: solid 1px #707070;
    border-radius: 4px;
    background-color: #252627;
    max-width: 100vw;
    width: 900px; }
    @media (max-width: 700px) {
      .modal_custom_container .modal_custom {
        width: 500px; } }
    @media (max-width: 600px) {
      .modal_custom_container .modal_custom {
        width: 350px; } }
    @media (max-width: 400px) {
      .modal_custom_container .modal_custom {
        width: 300px; } }
    .modal_custom_container .modal_custom > .title {
      flex: 0 1 auto;
      padding: 10px;
      text-align: center;
      font-size: 0.8em;
      border-radius: 4px 4px 0 0; }
      .modal_custom_container .modal_custom > .title h5 {
        margin-bottom: 0; }
    .modal_custom_container .modal_custom .body {
      display: flex;
      flex-direction: column;
      overflow: auto;
      flex: 1;
      padding-top: 50px;
      padding-bottom: 50px; }
      @media (max-width: 700px) {
        .modal_custom_container .modal_custom .body {
          padding: 30px; } }
      @media (max-width: 600px) {
        .modal_custom_container .modal_custom .body {
          padding: 20px; } }
      @media (max-width: 400px) {
        .modal_custom_container .modal_custom .body {
          padding: 10px; } }
      .modal_custom_container .modal_custom .body label {
        text-align: left;
        font-size: 0.9em;
        opacity: 0.6;
        margin-bottom: 0;
        margin-top: 1em; }
    .modal_custom_container .modal_custom .footer {
      display: flex;
      flex-direction: row;
      padding: 10px;
      flex: 0 1 auto;
      justify-content: center; }
      .modal_custom_container .modal_custom .footer button {
        flex: 1; }
        .modal_custom_container .modal_custom .footer button:not(:last-child) {
          margin-right: 1em; }

.modal_custom_container:not(.bottom_slider) .body {
  padding-left: 1.5em;
  padding-right: 1.5em; }

.modal_custom_container.bottom_slider {
  overflow: hidden; }
  @media (max-width: 600px) {
    .modal_custom_container.bottom_slider .autocomplete {
      position: fixed;
      margin: 0 11px; } }
  .modal_custom_container.bottom_slider .modal_custom {
    border-color: #D9B310;
    width: calc(100% - 6px);
    animation: appear_bottom 0.25s;
    position: absolute;
    bottom: 3px;
    left: 3px;
    margin: 0;
    max-height: 80vh; }
    .modal_custom_container.bottom_slider .modal_custom .body {
      display: flex;
      flex-direction: column;
      padding-top: 1em;
      padding-bottom: 1em; }

.modal_custom_container.no_backdrop .backdrop {
  background-color: transparent; }

.confirmation_modal .footer {
  margin-top: 1em; }

.templates_screen .macro_explanation {
  opacity: 0.8;
  display: flex;
  align-items: center;
  margin-bottom: 0.5em; }
  .templates_screen .macro_explanation img {
    height: 1em;
    margin-right: 0.5em; }
.templates_screen .option_bar {
  margin-bottom: 1em; }
.templates_screen .page_content {
  padding-top: 10px;
  flex: 1;
  overflow: hidden; }
.templates_screen .list_title {
  margin: 20px 0;
  opacity: 0.9; }
  .templates_screen .list_title svg {
    height: 20px;
    width: auto;
    margin-right: 5px; }
    .templates_screen .list_title svg * {
      fill: #D7CEC7 !important; }
.templates_screen .list {
  flex: 1;
  flex-direction: column;
  display: flex; }
.templates_screen .search_bar {
  margin-top: 5px;
  margin-bottom: 10px; }
  .templates_screen .search_bar img {
    height: 15px;
    width: auto;
    margin-right: 5px;
    position: relative;
    top: -3px; }
.templates_screen .template_item {
  margin-bottom: 1em; }
  .templates_screen .template_item .public_info .flavor_text {
    opacity: 0.7;
    font-size: 0.9em; }
  .templates_screen .template_item .public_info .usage_count {
    opacity: 0.7;
    font-size: 0.9em; }
  .templates_screen .template_item .dice_set_icon {
    position: absolute;
    right: 0;
    top: -10px;
    height: 20px;
    width: 20px; }

.network_message {
  background-color: #D9B310;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  text-align: center;
  z-index: 1000; }
  .network_message .content {
    position: relative;
    top: 50%;
    transform: translateY(-50%); }

@keyframes vote_option_appear {
  from {
    height: 0; }
  to {
    height: 30px; } }
.feature_list .explanation {
  background-color: rgba(27, 30, 38, 0.3);
  padding: 10px;
  font-size: 0.7em; }
.feature_list .option_bar {
  margin-bottom: 1em; }
.feature_list .upper_tabs .upper_tab:not(:last-child) {
  border-right: none; }
.feature_list .current_value {
  margin-top: -1em;
  margin-bottom: 0.75em; }
.feature_list .scroll_list {
  overflow: hidden; }

.privacy_policy_page, .tos_page {
  color: #D7CEC7;
  background-color: #0B3C5D; }

.game_maps_screen .option_bar {
  margin-bottom: 1em; }
.game_maps_screen .page_content > .container {
  padding-top: 10px; }

#brush_popover .color_box.color_0 {
  background-color: #0B3C5D; }
#brush_popover .color_box.color_1 {
  background-color: #EDECEB; }
#brush_popover .color_box.color_2 {
  background-color: #D7CEC7; }
#brush_popover .color_box.color_3 {
  background-color: #A5A5B0; }
#brush_popover .color_box.color_4 {
  background-color: #A4C9DF; }
#brush_popover .color_box.color_5 {
  background-color: #328CC1; }
#brush_popover .color_box.color_6 {
  background-color: #767CCB; }
#brush_popover .color_box.color_7 {
  background-color: #5F9EA0; }
#brush_popover .color_box.color_8 {
  background-color: #78C478; }
#brush_popover .color_box.color_9 {
  background-color: #CDC09C; }
#brush_popover .color_box.color_10 {
  background-color: #D9B310; }
#brush_popover .color_box.color_11 {
  background-color: #C38CAE; }
#brush_popover .color_box.color_12 {
  background-color: #CD5C5C; }
#brush_popover .color_box.color_13 {
  background-color: #CD8F5C; }
#brush_popover .color_box.color_14 {
  background-color: #C4751E; }
#brush_popover .color_box.color_15 {
  background-color: #1D2731; }
#brush_popover .shapes {
  margin-top: 5px;
  padding-top: 5px; }
  #brush_popover .shapes td {
    padding: 0; }
  #brush_popover .shapes .shape {
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: auto; }
    #brush_popover .shapes .shape.color_0.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #0B3C5D; }
    #brush_popover .shapes .shape.color_0.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #0B3C5D;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_0.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #0B3C5D; }
    #brush_popover .shapes .shape.color_0.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_0.shape_2 {
        width: 30px;
        height: 15px;
        background: #0B3C5D;
        position: relative; }
      #brush_popover .shapes .shape.color_0.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #0B3C5D; }
      #brush_popover .shapes .shape.color_0.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #0B3C5D; }
    #brush_popover .shapes .shape.color_0.shape_3 {
      width: 30px;
      height: 30px;
      background: #0B3C5D;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_0.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #0B3C5D; }
    #brush_popover .shapes .shape.color_0.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_0.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #0B3C5D; }
    #brush_popover .shapes .shape.color_0.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_1.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #EDECEB; }
    #brush_popover .shapes .shape.color_1.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #EDECEB;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_1.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #EDECEB; }
    #brush_popover .shapes .shape.color_1.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_1.shape_2 {
        width: 30px;
        height: 15px;
        background: #EDECEB;
        position: relative; }
      #brush_popover .shapes .shape.color_1.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #EDECEB; }
      #brush_popover .shapes .shape.color_1.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #EDECEB; }
    #brush_popover .shapes .shape.color_1.shape_3 {
      width: 30px;
      height: 30px;
      background: #EDECEB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_1.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #EDECEB; }
    #brush_popover .shapes .shape.color_1.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_1.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #EDECEB; }
    #brush_popover .shapes .shape.color_1.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_2.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D7CEC7; }
    #brush_popover .shapes .shape.color_2.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D7CEC7;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_2.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D7CEC7; }
    #brush_popover .shapes .shape.color_2.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_2.shape_2 {
        width: 30px;
        height: 15px;
        background: #D7CEC7;
        position: relative; }
      #brush_popover .shapes .shape.color_2.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D7CEC7; }
      #brush_popover .shapes .shape.color_2.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D7CEC7; }
    #brush_popover .shapes .shape.color_2.shape_3 {
      width: 30px;
      height: 30px;
      background: #D7CEC7;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_2.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D7CEC7; }
    #brush_popover .shapes .shape.color_2.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_2.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D7CEC7; }
    #brush_popover .shapes .shape.color_2.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_3.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A5A5B0; }
    #brush_popover .shapes .shape.color_3.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A5A5B0;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_3.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A5A5B0; }
    #brush_popover .shapes .shape.color_3.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_3.shape_2 {
        width: 30px;
        height: 15px;
        background: #A5A5B0;
        position: relative; }
      #brush_popover .shapes .shape.color_3.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A5A5B0; }
      #brush_popover .shapes .shape.color_3.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A5A5B0; }
    #brush_popover .shapes .shape.color_3.shape_3 {
      width: 30px;
      height: 30px;
      background: #A5A5B0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_3.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A5A5B0; }
    #brush_popover .shapes .shape.color_3.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_3.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A5A5B0; }
    #brush_popover .shapes .shape.color_3.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_4.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A4C9DF; }
    #brush_popover .shapes .shape.color_4.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A4C9DF;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_4.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A4C9DF; }
    #brush_popover .shapes .shape.color_4.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_4.shape_2 {
        width: 30px;
        height: 15px;
        background: #A4C9DF;
        position: relative; }
      #brush_popover .shapes .shape.color_4.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A4C9DF; }
      #brush_popover .shapes .shape.color_4.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A4C9DF; }
    #brush_popover .shapes .shape.color_4.shape_3 {
      width: 30px;
      height: 30px;
      background: #A4C9DF;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_4.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A4C9DF; }
    #brush_popover .shapes .shape.color_4.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_4.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A4C9DF; }
    #brush_popover .shapes .shape.color_4.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_5.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #328CC1; }
    #brush_popover .shapes .shape.color_5.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #328CC1;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_5.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #328CC1; }
    #brush_popover .shapes .shape.color_5.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_5.shape_2 {
        width: 30px;
        height: 15px;
        background: #328CC1;
        position: relative; }
      #brush_popover .shapes .shape.color_5.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #328CC1; }
      #brush_popover .shapes .shape.color_5.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #328CC1; }
    #brush_popover .shapes .shape.color_5.shape_3 {
      width: 30px;
      height: 30px;
      background: #328CC1;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_5.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #328CC1; }
    #brush_popover .shapes .shape.color_5.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_5.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #328CC1; }
    #brush_popover .shapes .shape.color_5.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_6.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #767CCB; }
    #brush_popover .shapes .shape.color_6.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #767CCB;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_6.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #767CCB; }
    #brush_popover .shapes .shape.color_6.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_6.shape_2 {
        width: 30px;
        height: 15px;
        background: #767CCB;
        position: relative; }
      #brush_popover .shapes .shape.color_6.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #767CCB; }
      #brush_popover .shapes .shape.color_6.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #767CCB; }
    #brush_popover .shapes .shape.color_6.shape_3 {
      width: 30px;
      height: 30px;
      background: #767CCB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_6.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #767CCB; }
    #brush_popover .shapes .shape.color_6.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_6.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #767CCB; }
    #brush_popover .shapes .shape.color_6.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_7.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #5F9EA0; }
    #brush_popover .shapes .shape.color_7.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #5F9EA0;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_7.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #5F9EA0; }
    #brush_popover .shapes .shape.color_7.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_7.shape_2 {
        width: 30px;
        height: 15px;
        background: #5F9EA0;
        position: relative; }
      #brush_popover .shapes .shape.color_7.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #5F9EA0; }
      #brush_popover .shapes .shape.color_7.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #5F9EA0; }
    #brush_popover .shapes .shape.color_7.shape_3 {
      width: 30px;
      height: 30px;
      background: #5F9EA0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_7.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #5F9EA0; }
    #brush_popover .shapes .shape.color_7.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_7.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #5F9EA0; }
    #brush_popover .shapes .shape.color_7.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_8.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #78C478; }
    #brush_popover .shapes .shape.color_8.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #78C478;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_8.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #78C478; }
    #brush_popover .shapes .shape.color_8.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_8.shape_2 {
        width: 30px;
        height: 15px;
        background: #78C478;
        position: relative; }
      #brush_popover .shapes .shape.color_8.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #78C478; }
      #brush_popover .shapes .shape.color_8.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #78C478; }
    #brush_popover .shapes .shape.color_8.shape_3 {
      width: 30px;
      height: 30px;
      background: #78C478;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_8.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #78C478; }
    #brush_popover .shapes .shape.color_8.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_8.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #78C478; }
    #brush_popover .shapes .shape.color_8.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_9.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CDC09C; }
    #brush_popover .shapes .shape.color_9.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CDC09C;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_9.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CDC09C; }
    #brush_popover .shapes .shape.color_9.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_9.shape_2 {
        width: 30px;
        height: 15px;
        background: #CDC09C;
        position: relative; }
      #brush_popover .shapes .shape.color_9.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CDC09C; }
      #brush_popover .shapes .shape.color_9.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CDC09C; }
    #brush_popover .shapes .shape.color_9.shape_3 {
      width: 30px;
      height: 30px;
      background: #CDC09C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_9.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CDC09C; }
    #brush_popover .shapes .shape.color_9.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_9.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CDC09C; }
    #brush_popover .shapes .shape.color_9.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_10.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D9B310; }
    #brush_popover .shapes .shape.color_10.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D9B310;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_10.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D9B310; }
    #brush_popover .shapes .shape.color_10.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_10.shape_2 {
        width: 30px;
        height: 15px;
        background: #D9B310;
        position: relative; }
      #brush_popover .shapes .shape.color_10.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D9B310; }
      #brush_popover .shapes .shape.color_10.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D9B310; }
    #brush_popover .shapes .shape.color_10.shape_3 {
      width: 30px;
      height: 30px;
      background: #D9B310;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_10.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D9B310; }
    #brush_popover .shapes .shape.color_10.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_10.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D9B310; }
    #brush_popover .shapes .shape.color_10.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_11.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C38CAE; }
    #brush_popover .shapes .shape.color_11.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C38CAE;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_11.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C38CAE; }
    #brush_popover .shapes .shape.color_11.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_11.shape_2 {
        width: 30px;
        height: 15px;
        background: #C38CAE;
        position: relative; }
      #brush_popover .shapes .shape.color_11.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C38CAE; }
      #brush_popover .shapes .shape.color_11.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C38CAE; }
    #brush_popover .shapes .shape.color_11.shape_3 {
      width: 30px;
      height: 30px;
      background: #C38CAE;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_11.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C38CAE; }
    #brush_popover .shapes .shape.color_11.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_11.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C38CAE; }
    #brush_popover .shapes .shape.color_11.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_12.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD5C5C; }
    #brush_popover .shapes .shape.color_12.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD5C5C;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_12.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD5C5C; }
    #brush_popover .shapes .shape.color_12.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_12.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD5C5C;
        position: relative; }
      #brush_popover .shapes .shape.color_12.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD5C5C; }
      #brush_popover .shapes .shape.color_12.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD5C5C; }
    #brush_popover .shapes .shape.color_12.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD5C5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_12.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD5C5C; }
    #brush_popover .shapes .shape.color_12.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_12.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD5C5C; }
    #brush_popover .shapes .shape.color_12.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_13.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD8F5C; }
    #brush_popover .shapes .shape.color_13.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD8F5C;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_13.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD8F5C; }
    #brush_popover .shapes .shape.color_13.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_13.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD8F5C;
        position: relative; }
      #brush_popover .shapes .shape.color_13.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD8F5C; }
      #brush_popover .shapes .shape.color_13.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD8F5C; }
    #brush_popover .shapes .shape.color_13.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD8F5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_13.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD8F5C; }
    #brush_popover .shapes .shape.color_13.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_13.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD8F5C; }
    #brush_popover .shapes .shape.color_13.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_14.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C4751E; }
    #brush_popover .shapes .shape.color_14.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C4751E;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_14.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C4751E; }
    #brush_popover .shapes .shape.color_14.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_14.shape_2 {
        width: 30px;
        height: 15px;
        background: #C4751E;
        position: relative; }
      #brush_popover .shapes .shape.color_14.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C4751E; }
      #brush_popover .shapes .shape.color_14.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C4751E; }
    #brush_popover .shapes .shape.color_14.shape_3 {
      width: 30px;
      height: 30px;
      background: #C4751E;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_14.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C4751E; }
    #brush_popover .shapes .shape.color_14.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_14.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C4751E; }
    #brush_popover .shapes .shape.color_14.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_15.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #1D2731; }
    #brush_popover .shapes .shape.color_15.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #1D2731;
      position: relative;
      top: -15px; }
    #brush_popover .shapes .shape.color_15.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #1D2731; }
    #brush_popover .shapes .shape.color_15.shape_2 {
      margin-top: 7.5px; }
      #brush_popover .shapes .shape.color_15.shape_2 {
        width: 30px;
        height: 15px;
        background: #1D2731;
        position: relative; }
      #brush_popover .shapes .shape.color_15.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #1D2731; }
      #brush_popover .shapes .shape.color_15.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #1D2731; }
    #brush_popover .shapes .shape.color_15.shape_3 {
      width: 30px;
      height: 30px;
      background: #1D2731;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    #brush_popover .shapes .shape.color_15.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #1D2731; }
    #brush_popover .shapes .shape.color_15.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.color_15.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #1D2731; }
    #brush_popover .shapes .shape.color_15.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
    #brush_popover .shapes .shape.shape_2 {
      margin-bottom: 7px; }

.map_screen .map_info, .line.open_map .map_info {
  background-color: #0B3C5D;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 10px; }
  .map_screen .map_info .container, .line.open_map .map_info .container {
    display: flex; }
    .map_screen .map_info .container .left_pane, .line.open_map .map_info .container .left_pane {
      flex: 1; }
    .map_screen .map_info .container .brush_area, .line.open_map .map_info .container .brush_area {
      flex: 0 1 auto; }
      .map_screen .map_info .container .brush_area label, .line.open_map .map_info .container .brush_area label {
        margin-left: 5px; }
      .map_screen .map_info .container .brush_area .popover_container, .line.open_map .map_info .container .brush_area .popover_container {
        display: inline-block; }
      .map_screen .map_info .container .brush_area .brush, .line.open_map .map_info .container .brush_area .brush {
        cursor: pointer; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_0, .line.open_map .map_info .container .brush_area .brush.color_0.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #0B3C5D; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_1, .line.open_map .map_info .container .brush_area .brush.color_0.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #0B3C5D;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_0.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #0B3C5D; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_2, .line.open_map .map_info .container .brush_area .brush.color_0.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_0.shape_2, .line.open_map .map_info .container .brush_area .brush.color_0.shape_2 {
            width: 30px;
            height: 15px;
            background: #0B3C5D;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_0.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_0.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #0B3C5D; }
          .map_screen .map_info .container .brush_area .brush.color_0.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_0.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #0B3C5D; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_3, .line.open_map .map_info .container .brush_area .brush.color_0.shape_3 {
          width: 30px;
          height: 30px;
          background: #0B3C5D;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_4, .line.open_map .map_info .container .brush_area .brush.color_0.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #0B3C5D; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_5, .line.open_map .map_info .container .brush_area .brush.color_0.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #0B3C5D;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_6, .line.open_map .map_info .container .brush_area .brush.color_0.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #0B3C5D; }
        .map_screen .map_info .container .brush_area .brush.color_0.shape_7, .line.open_map .map_info .container .brush_area .brush.color_0.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #0B3C5D;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_0, .line.open_map .map_info .container .brush_area .brush.color_1.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #EDECEB; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_1, .line.open_map .map_info .container .brush_area .brush.color_1.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #EDECEB;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_1.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #EDECEB; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_2, .line.open_map .map_info .container .brush_area .brush.color_1.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_1.shape_2, .line.open_map .map_info .container .brush_area .brush.color_1.shape_2 {
            width: 30px;
            height: 15px;
            background: #EDECEB;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_1.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_1.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #EDECEB; }
          .map_screen .map_info .container .brush_area .brush.color_1.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_1.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #EDECEB; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_3, .line.open_map .map_info .container .brush_area .brush.color_1.shape_3 {
          width: 30px;
          height: 30px;
          background: #EDECEB;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_4, .line.open_map .map_info .container .brush_area .brush.color_1.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #EDECEB; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_5, .line.open_map .map_info .container .brush_area .brush.color_1.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #EDECEB;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_6, .line.open_map .map_info .container .brush_area .brush.color_1.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #EDECEB; }
        .map_screen .map_info .container .brush_area .brush.color_1.shape_7, .line.open_map .map_info .container .brush_area .brush.color_1.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #EDECEB;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_0, .line.open_map .map_info .container .brush_area .brush.color_2.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #D7CEC7; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_1, .line.open_map .map_info .container .brush_area .brush.color_2.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #D7CEC7;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_2.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #D7CEC7; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_2, .line.open_map .map_info .container .brush_area .brush.color_2.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_2.shape_2, .line.open_map .map_info .container .brush_area .brush.color_2.shape_2 {
            width: 30px;
            height: 15px;
            background: #D7CEC7;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_2.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_2.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #D7CEC7; }
          .map_screen .map_info .container .brush_area .brush.color_2.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_2.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #D7CEC7; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_3, .line.open_map .map_info .container .brush_area .brush.color_2.shape_3 {
          width: 30px;
          height: 30px;
          background: #D7CEC7;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_4, .line.open_map .map_info .container .brush_area .brush.color_2.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #D7CEC7; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_5, .line.open_map .map_info .container .brush_area .brush.color_2.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #D7CEC7;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_6, .line.open_map .map_info .container .brush_area .brush.color_2.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #D7CEC7; }
        .map_screen .map_info .container .brush_area .brush.color_2.shape_7, .line.open_map .map_info .container .brush_area .brush.color_2.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #D7CEC7;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_0, .line.open_map .map_info .container .brush_area .brush.color_3.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #A5A5B0; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_1, .line.open_map .map_info .container .brush_area .brush.color_3.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #A5A5B0;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_3.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #A5A5B0; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_2, .line.open_map .map_info .container .brush_area .brush.color_3.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_3.shape_2, .line.open_map .map_info .container .brush_area .brush.color_3.shape_2 {
            width: 30px;
            height: 15px;
            background: #A5A5B0;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_3.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_3.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #A5A5B0; }
          .map_screen .map_info .container .brush_area .brush.color_3.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_3.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #A5A5B0; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_3, .line.open_map .map_info .container .brush_area .brush.color_3.shape_3 {
          width: 30px;
          height: 30px;
          background: #A5A5B0;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_4, .line.open_map .map_info .container .brush_area .brush.color_3.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #A5A5B0; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_5, .line.open_map .map_info .container .brush_area .brush.color_3.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #A5A5B0;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_6, .line.open_map .map_info .container .brush_area .brush.color_3.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #A5A5B0; }
        .map_screen .map_info .container .brush_area .brush.color_3.shape_7, .line.open_map .map_info .container .brush_area .brush.color_3.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #A5A5B0;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_0, .line.open_map .map_info .container .brush_area .brush.color_4.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #A4C9DF; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_1, .line.open_map .map_info .container .brush_area .brush.color_4.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #A4C9DF;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_4.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #A4C9DF; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_2, .line.open_map .map_info .container .brush_area .brush.color_4.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_4.shape_2, .line.open_map .map_info .container .brush_area .brush.color_4.shape_2 {
            width: 30px;
            height: 15px;
            background: #A4C9DF;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_4.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_4.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #A4C9DF; }
          .map_screen .map_info .container .brush_area .brush.color_4.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_4.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #A4C9DF; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_3, .line.open_map .map_info .container .brush_area .brush.color_4.shape_3 {
          width: 30px;
          height: 30px;
          background: #A4C9DF;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_4, .line.open_map .map_info .container .brush_area .brush.color_4.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #A4C9DF; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_5, .line.open_map .map_info .container .brush_area .brush.color_4.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #A4C9DF;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_6, .line.open_map .map_info .container .brush_area .brush.color_4.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #A4C9DF; }
        .map_screen .map_info .container .brush_area .brush.color_4.shape_7, .line.open_map .map_info .container .brush_area .brush.color_4.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #A4C9DF;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_0, .line.open_map .map_info .container .brush_area .brush.color_5.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #328CC1; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_1, .line.open_map .map_info .container .brush_area .brush.color_5.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #328CC1;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_5.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #328CC1; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_2, .line.open_map .map_info .container .brush_area .brush.color_5.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_5.shape_2, .line.open_map .map_info .container .brush_area .brush.color_5.shape_2 {
            width: 30px;
            height: 15px;
            background: #328CC1;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_5.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_5.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #328CC1; }
          .map_screen .map_info .container .brush_area .brush.color_5.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_5.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #328CC1; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_3, .line.open_map .map_info .container .brush_area .brush.color_5.shape_3 {
          width: 30px;
          height: 30px;
          background: #328CC1;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_4, .line.open_map .map_info .container .brush_area .brush.color_5.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #328CC1; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_5, .line.open_map .map_info .container .brush_area .brush.color_5.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #328CC1;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_6, .line.open_map .map_info .container .brush_area .brush.color_5.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #328CC1; }
        .map_screen .map_info .container .brush_area .brush.color_5.shape_7, .line.open_map .map_info .container .brush_area .brush.color_5.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #328CC1;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_0, .line.open_map .map_info .container .brush_area .brush.color_6.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #767CCB; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_1, .line.open_map .map_info .container .brush_area .brush.color_6.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #767CCB;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_6.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #767CCB; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_2, .line.open_map .map_info .container .brush_area .brush.color_6.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_6.shape_2, .line.open_map .map_info .container .brush_area .brush.color_6.shape_2 {
            width: 30px;
            height: 15px;
            background: #767CCB;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_6.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_6.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #767CCB; }
          .map_screen .map_info .container .brush_area .brush.color_6.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_6.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #767CCB; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_3, .line.open_map .map_info .container .brush_area .brush.color_6.shape_3 {
          width: 30px;
          height: 30px;
          background: #767CCB;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_4, .line.open_map .map_info .container .brush_area .brush.color_6.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #767CCB; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_5, .line.open_map .map_info .container .brush_area .brush.color_6.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #767CCB;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_6, .line.open_map .map_info .container .brush_area .brush.color_6.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #767CCB; }
        .map_screen .map_info .container .brush_area .brush.color_6.shape_7, .line.open_map .map_info .container .brush_area .brush.color_6.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #767CCB;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_0, .line.open_map .map_info .container .brush_area .brush.color_7.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #5F9EA0; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_1, .line.open_map .map_info .container .brush_area .brush.color_7.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #5F9EA0;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_7.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #5F9EA0; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_2, .line.open_map .map_info .container .brush_area .brush.color_7.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_7.shape_2, .line.open_map .map_info .container .brush_area .brush.color_7.shape_2 {
            width: 30px;
            height: 15px;
            background: #5F9EA0;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_7.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_7.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #5F9EA0; }
          .map_screen .map_info .container .brush_area .brush.color_7.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_7.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #5F9EA0; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_3, .line.open_map .map_info .container .brush_area .brush.color_7.shape_3 {
          width: 30px;
          height: 30px;
          background: #5F9EA0;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_4, .line.open_map .map_info .container .brush_area .brush.color_7.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #5F9EA0; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_5, .line.open_map .map_info .container .brush_area .brush.color_7.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #5F9EA0;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_6, .line.open_map .map_info .container .brush_area .brush.color_7.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #5F9EA0; }
        .map_screen .map_info .container .brush_area .brush.color_7.shape_7, .line.open_map .map_info .container .brush_area .brush.color_7.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #5F9EA0;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_0, .line.open_map .map_info .container .brush_area .brush.color_8.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #78C478; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_1, .line.open_map .map_info .container .brush_area .brush.color_8.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #78C478;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_8.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #78C478; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_2, .line.open_map .map_info .container .brush_area .brush.color_8.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_8.shape_2, .line.open_map .map_info .container .brush_area .brush.color_8.shape_2 {
            width: 30px;
            height: 15px;
            background: #78C478;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_8.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_8.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #78C478; }
          .map_screen .map_info .container .brush_area .brush.color_8.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_8.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #78C478; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_3, .line.open_map .map_info .container .brush_area .brush.color_8.shape_3 {
          width: 30px;
          height: 30px;
          background: #78C478;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_4, .line.open_map .map_info .container .brush_area .brush.color_8.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #78C478; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_5, .line.open_map .map_info .container .brush_area .brush.color_8.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #78C478;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_6, .line.open_map .map_info .container .brush_area .brush.color_8.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #78C478; }
        .map_screen .map_info .container .brush_area .brush.color_8.shape_7, .line.open_map .map_info .container .brush_area .brush.color_8.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #78C478;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_0, .line.open_map .map_info .container .brush_area .brush.color_9.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #CDC09C; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_1, .line.open_map .map_info .container .brush_area .brush.color_9.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #CDC09C;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_9.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #CDC09C; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_2, .line.open_map .map_info .container .brush_area .brush.color_9.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_9.shape_2, .line.open_map .map_info .container .brush_area .brush.color_9.shape_2 {
            width: 30px;
            height: 15px;
            background: #CDC09C;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_9.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_9.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #CDC09C; }
          .map_screen .map_info .container .brush_area .brush.color_9.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_9.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #CDC09C; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_3, .line.open_map .map_info .container .brush_area .brush.color_9.shape_3 {
          width: 30px;
          height: 30px;
          background: #CDC09C;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_4, .line.open_map .map_info .container .brush_area .brush.color_9.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #CDC09C; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_5, .line.open_map .map_info .container .brush_area .brush.color_9.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #CDC09C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_6, .line.open_map .map_info .container .brush_area .brush.color_9.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #CDC09C; }
        .map_screen .map_info .container .brush_area .brush.color_9.shape_7, .line.open_map .map_info .container .brush_area .brush.color_9.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #CDC09C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_0, .line.open_map .map_info .container .brush_area .brush.color_10.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #D9B310; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_1, .line.open_map .map_info .container .brush_area .brush.color_10.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #D9B310;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_10.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #D9B310; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_2, .line.open_map .map_info .container .brush_area .brush.color_10.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_10.shape_2, .line.open_map .map_info .container .brush_area .brush.color_10.shape_2 {
            width: 30px;
            height: 15px;
            background: #D9B310;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_10.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_10.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #D9B310; }
          .map_screen .map_info .container .brush_area .brush.color_10.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_10.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #D9B310; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_3, .line.open_map .map_info .container .brush_area .brush.color_10.shape_3 {
          width: 30px;
          height: 30px;
          background: #D9B310;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_4, .line.open_map .map_info .container .brush_area .brush.color_10.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #D9B310; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_5, .line.open_map .map_info .container .brush_area .brush.color_10.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #D9B310;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_6, .line.open_map .map_info .container .brush_area .brush.color_10.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #D9B310; }
        .map_screen .map_info .container .brush_area .brush.color_10.shape_7, .line.open_map .map_info .container .brush_area .brush.color_10.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #D9B310;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_0, .line.open_map .map_info .container .brush_area .brush.color_11.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #C38CAE; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_1, .line.open_map .map_info .container .brush_area .brush.color_11.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #C38CAE;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_11.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #C38CAE; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_2, .line.open_map .map_info .container .brush_area .brush.color_11.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_11.shape_2, .line.open_map .map_info .container .brush_area .brush.color_11.shape_2 {
            width: 30px;
            height: 15px;
            background: #C38CAE;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_11.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_11.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #C38CAE; }
          .map_screen .map_info .container .brush_area .brush.color_11.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_11.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #C38CAE; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_3, .line.open_map .map_info .container .brush_area .brush.color_11.shape_3 {
          width: 30px;
          height: 30px;
          background: #C38CAE;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_4, .line.open_map .map_info .container .brush_area .brush.color_11.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #C38CAE; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_5, .line.open_map .map_info .container .brush_area .brush.color_11.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #C38CAE;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_6, .line.open_map .map_info .container .brush_area .brush.color_11.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #C38CAE; }
        .map_screen .map_info .container .brush_area .brush.color_11.shape_7, .line.open_map .map_info .container .brush_area .brush.color_11.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #C38CAE;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_0, .line.open_map .map_info .container .brush_area .brush.color_12.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #CD5C5C; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_1, .line.open_map .map_info .container .brush_area .brush.color_12.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #CD5C5C;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_12.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #CD5C5C; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_2, .line.open_map .map_info .container .brush_area .brush.color_12.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_12.shape_2, .line.open_map .map_info .container .brush_area .brush.color_12.shape_2 {
            width: 30px;
            height: 15px;
            background: #CD5C5C;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_12.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_12.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #CD5C5C; }
          .map_screen .map_info .container .brush_area .brush.color_12.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_12.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #CD5C5C; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_3, .line.open_map .map_info .container .brush_area .brush.color_12.shape_3 {
          width: 30px;
          height: 30px;
          background: #CD5C5C;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_4, .line.open_map .map_info .container .brush_area .brush.color_12.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #CD5C5C; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_5, .line.open_map .map_info .container .brush_area .brush.color_12.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #CD5C5C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_6, .line.open_map .map_info .container .brush_area .brush.color_12.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #CD5C5C; }
        .map_screen .map_info .container .brush_area .brush.color_12.shape_7, .line.open_map .map_info .container .brush_area .brush.color_12.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #CD5C5C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_0, .line.open_map .map_info .container .brush_area .brush.color_13.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #CD8F5C; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_1, .line.open_map .map_info .container .brush_area .brush.color_13.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #CD8F5C;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_13.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #CD8F5C; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_2, .line.open_map .map_info .container .brush_area .brush.color_13.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_13.shape_2, .line.open_map .map_info .container .brush_area .brush.color_13.shape_2 {
            width: 30px;
            height: 15px;
            background: #CD8F5C;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_13.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_13.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #CD8F5C; }
          .map_screen .map_info .container .brush_area .brush.color_13.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_13.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #CD8F5C; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_3, .line.open_map .map_info .container .brush_area .brush.color_13.shape_3 {
          width: 30px;
          height: 30px;
          background: #CD8F5C;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_4, .line.open_map .map_info .container .brush_area .brush.color_13.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #CD8F5C; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_5, .line.open_map .map_info .container .brush_area .brush.color_13.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #CD8F5C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_6, .line.open_map .map_info .container .brush_area .brush.color_13.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #CD8F5C; }
        .map_screen .map_info .container .brush_area .brush.color_13.shape_7, .line.open_map .map_info .container .brush_area .brush.color_13.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #CD8F5C;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_0, .line.open_map .map_info .container .brush_area .brush.color_14.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #C4751E; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_1, .line.open_map .map_info .container .brush_area .brush.color_14.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #C4751E;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_14.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #C4751E; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_2, .line.open_map .map_info .container .brush_area .brush.color_14.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_14.shape_2, .line.open_map .map_info .container .brush_area .brush.color_14.shape_2 {
            width: 30px;
            height: 15px;
            background: #C4751E;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_14.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_14.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #C4751E; }
          .map_screen .map_info .container .brush_area .brush.color_14.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_14.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #C4751E; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_3, .line.open_map .map_info .container .brush_area .brush.color_14.shape_3 {
          width: 30px;
          height: 30px;
          background: #C4751E;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_4, .line.open_map .map_info .container .brush_area .brush.color_14.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #C4751E; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_5, .line.open_map .map_info .container .brush_area .brush.color_14.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #C4751E;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_6, .line.open_map .map_info .container .brush_area .brush.color_14.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #C4751E; }
        .map_screen .map_info .container .brush_area .brush.color_14.shape_7, .line.open_map .map_info .container .brush_area .brush.color_14.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #C4751E;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_0, .line.open_map .map_info .container .brush_area .brush.color_15.shape_0 {
          width: 30px;
          height: 30px;
          background-color: #1D2731; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_1, .line.open_map .map_info .container .brush_area .brush.color_15.shape_1 {
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-bottom-color: #1D2731;
          position: relative;
          top: -15px; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_1:after, .line.open_map .map_info .container .brush_area .brush.color_15.shape_1:after {
          content: "";
          position: absolute;
          left: -15px;
          top: 15px;
          width: 0;
          height: 0;
          border: 15px solid transparent;
          border-top-color: #1D2731; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_2, .line.open_map .map_info .container .brush_area .brush.color_15.shape_2 {
          margin-top: 7.5px; }
          .map_screen .map_info .container .brush_area .brush.color_15.shape_2, .line.open_map .map_info .container .brush_area .brush.color_15.shape_2 {
            width: 30px;
            height: 15px;
            background: #1D2731;
            position: relative; }
          .map_screen .map_info .container .brush_area .brush.color_15.shape_2:before, .line.open_map .map_info .container .brush_area .brush.color_15.shape_2:before {
            content: "";
            position: absolute;
            top: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-bottom: 7.5px solid #1D2731; }
          .map_screen .map_info .container .brush_area .brush.color_15.shape_2:after, .line.open_map .map_info .container .brush_area .brush.color_15.shape_2:after {
            content: "";
            position: absolute;
            bottom: -7.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 7.5px solid #1D2731; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_3, .line.open_map .map_info .container .brush_area .brush.color_15.shape_3 {
          width: 30px;
          height: 30px;
          background: #1D2731;
          -moz-border-radius: 100%;
          -webkit-border-radius: 100%;
          border-radius: 100%; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_4, .line.open_map .map_info .container .brush_area .brush.color_15.shape_4 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-bottom: 30px solid #1D2731; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_5, .line.open_map .map_info .container .brush_area .brush.color_15.shape_5 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-left: 30px solid #1D2731;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_6, .line.open_map .map_info .container .brush_area .brush.color_15.shape_6 {
          width: 0;
          height: 0;
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 30px solid #1D2731; }
        .map_screen .map_info .container .brush_area .brush.color_15.shape_7, .line.open_map .map_info .container .brush_area .brush.color_15.shape_7 {
          width: 0;
          height: 0;
          border-top: 15px solid transparent;
          border-right: 30px solid #1D2731;
          border-bottom: 15px solid transparent; }
        .map_screen .map_info .container .brush_area .brush.color_0, .line.open_map .map_info .container .brush_area .brush.color_0 {
          border: solid rgba(50, 140, 193, 0.5) 1px; }
.map_screen .unzoom_option, .line.open_map .unzoom_option {
  flex: 0.5;
  font-size: 0.8em; }
  .map_screen .unzoom_option small, .line.open_map .unzoom_option small {
    display: inline; }
.map_screen .title_area, .line.open_map .title_area {
  margin-bottom: 10px; }
.map_screen .scale_area, .map_screen .title_area, .line.open_map .scale_area, .line.open_map .title_area {
  font-size: 0.8em; }
  .map_screen .scale_area .input_line, .map_screen .title_area .input_line, .line.open_map .scale_area .input_line, .line.open_map .title_area .input_line {
    display: flex; }
    .map_screen .scale_area .input_line label, .map_screen .title_area .input_line label, .line.open_map .scale_area .input_line label, .line.open_map .title_area .input_line label {
      min-width: 78px;
      flex: 0 1 auto; }
    .map_screen .scale_area .input_line input, .map_screen .title_area .input_line input, .line.open_map .scale_area .input_line input, .line.open_map .title_area .input_line input {
      flex: 1;
      display: inline-block;
      background-color: rgba(11, 60, 93, 0.2);
      color: #D7CEC7; }
.map_screen .alert_message, .line.open_map .alert_message {
  animation: fade_in 0.25s;
  position: absolute;
  width: 100%;
  background-color: rgba(11, 60, 93, 0.95);
  text-align: center;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  padding: 20px; }
.map_screen .saving_message, .line.open_map .saving_message {
  animation: fade_in 0.25s;
  position: absolute;
  z-index: 10; }
  .map_screen .saving_message svg, .line.open_map .saving_message svg {
    height: 10px;
    width: auto;
    margin-right: 5px; }
    .map_screen .saving_message svg *, .line.open_map .saving_message svg * {
      fill: #D7CEC7 !important; }
.map_screen .map, .line.open_map .map {
  font-size: 0.6em; }
  .map_screen .map.is_preview .navigate_option, .line.open_map .map.is_preview .navigate_option {
    display: none; }
  .map_screen .map.player_viewing .navigate_option.add, .line.open_map .map.player_viewing .navigate_option.add {
    cursor: initial; }
  .map_screen .map .info, .line.open_map .map .info {
    font-size: 0.8em;
    text-align: right; }
.map_screen label, .line.open_map label {
  opacity: 0.5;
  margin-bottom: 0; }
.map_screen .screen_title .title, .line.open_map .screen_title .title {
  font-size: 0.7em; }
.map_screen .display_container, .line.open_map .display_container {
  display: flex;
  margin-bottom: 5px; }
.map_screen .horizontal_display, .line.open_map .horizontal_display {
  position: relative;
  display: flex;
  flex-direction: row;
  margin: 10px auto 10px auto; }
  .map_screen .horizontal_display .move, .line.open_map .horizontal_display .move {
    position: relative;
    height: calc(100% - 20px);
    width: 30px; }
    .map_screen .horizontal_display .move svg, .line.open_map .horizontal_display .move svg {
      position: absolute;
      height: 20px;
      width: auto;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
  .map_screen .horizontal_display .navigate_option, .line.open_map .horizontal_display .navigate_option {
    cursor: pointer;
    position: relative;
    min-height: 20px;
    min-width: 20px; }
    .map_screen .horizontal_display .navigate_option svg, .line.open_map .horizontal_display .navigate_option svg {
      width: 20px;
      height: auto;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      .map_screen .horizontal_display .navigate_option svg *, .line.open_map .horizontal_display .navigate_option svg * {
        fill: #D7CEC7 !important; }
    .map_screen .horizontal_display .navigate_option:hover svg *, .line.open_map .horizontal_display .navigate_option:hover svg * {
      fill: white !important; }
    .map_screen .horizontal_display .navigate_option.add:after, .line.open_map .horizontal_display .navigate_option.add:after {
      content: " ";
      background-color: #0B3C5D;
      min-height: 30px;
      min-width: 30px;
      pointer-events: none;
      position: absolute;
      opacity: 0.5; }
    .map_screen .horizontal_display .navigate_option.add svg, .line.open_map .horizontal_display .navigate_option.add svg {
      width: 10px;
      height: 10px; }
    .map_screen .horizontal_display .navigate_option.nav_up, .line.open_map .horizontal_display .navigate_option.nav_up {
      margin-bottom: 10px; }
      .map_screen .horizontal_display .navigate_option.nav_up .preview, .line.open_map .horizontal_display .navigate_option.nav_up .preview {
        top: 0; }
      .map_screen .horizontal_display .navigate_option.nav_up.add:after, .line.open_map .horizontal_display .navigate_option.nav_up.add:after {
        top: 0;
        left: 0;
        width: 217px; }
    .map_screen .horizontal_display .navigate_option.nav_down, .line.open_map .horizontal_display .navigate_option.nav_down {
      margin-top: 10px; }
      .map_screen .horizontal_display .navigate_option.nav_down .preview, .line.open_map .horizontal_display .navigate_option.nav_down .preview {
        top: -10px; }
      .map_screen .horizontal_display .navigate_option.nav_down.add:after, .line.open_map .horizontal_display .navigate_option.nav_down.add:after {
        top: -10px;
        left: 0;
        width: 217px; }
    .map_screen .horizontal_display .navigate_option.nav_left, .line.open_map .horizontal_display .navigate_option.nav_left {
      margin-right: 10px; }
      .map_screen .horizontal_display .navigate_option.nav_left .preview, .line.open_map .horizontal_display .navigate_option.nav_left .preview {
        top: 30px; }
      .map_screen .horizontal_display .navigate_option.nav_left.add:after, .line.open_map .horizontal_display .navigate_option.nav_left.add:after {
        top: 30px;
        height: 217px; }
    .map_screen .horizontal_display .navigate_option.nav_right, .line.open_map .horizontal_display .navigate_option.nav_right {
      margin-left: 10px; }
      .map_screen .horizontal_display .navigate_option.nav_right .preview, .line.open_map .horizontal_display .navigate_option.nav_right .preview {
        top: 30px;
        left: -10px; }
      .map_screen .horizontal_display .navigate_option.nav_right.add:after, .line.open_map .horizontal_display .navigate_option.nav_right.add:after {
        top: 30px;
        left: -10px;
        height: 217px; }
    .map_screen .horizontal_display .navigate_option .preview, .line.open_map .horizontal_display .navigate_option .preview {
      pointer-events: none;
      min-height: 30px;
      min-width: 30px;
      position: absolute;
      opacity: 0.3; }
  .map_screen .horizontal_display .middle .navigate_option svg, .line.open_map .horizontal_display .middle .navigate_option svg {
    top: 0;
    transform: translateY(0%); }
  .map_screen .horizontal_display .middle, .line.open_map .horizontal_display .middle {
    flex: 0 1 auto; }
    .map_screen .horizontal_display .middle .navigate_option, .line.open_map .horizontal_display .middle .navigate_option {
      text-align: center; }
.map_screen .map_square, .line.open_map .map_square {
  height: 31px;
  width: 31px;
  border: solid 1px #1b1e26;
  padding: 0;
  position: relative; }
  .map_screen .map_square .layered_data, .line.open_map .map_square .layered_data {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .map_screen .map_square .layered_data.layer_hidden, .line.open_map .map_square .layered_data.layer_hidden {
      opacity: 0.4; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #0B3C5D;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2 {
        width: 30px;
        height: 15px;
        background: #0B3C5D;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #0B3C5D; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_3 {
      width: 30px;
      height: 30px;
      background: #0B3C5D;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #EDECEB;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2 {
        width: 30px;
        height: 15px;
        background: #EDECEB;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #EDECEB; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_3 {
      width: 30px;
      height: 30px;
      background: #EDECEB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D7CEC7;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2 {
        width: 30px;
        height: 15px;
        background: #D7CEC7;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D7CEC7; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_3 {
      width: 30px;
      height: 30px;
      background: #D7CEC7;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A5A5B0;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2 {
        width: 30px;
        height: 15px;
        background: #A5A5B0;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A5A5B0; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_3 {
      width: 30px;
      height: 30px;
      background: #A5A5B0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A4C9DF;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2 {
        width: 30px;
        height: 15px;
        background: #A4C9DF;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A4C9DF; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_3 {
      width: 30px;
      height: 30px;
      background: #A4C9DF;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #328CC1;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2 {
        width: 30px;
        height: 15px;
        background: #328CC1;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #328CC1; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_3 {
      width: 30px;
      height: 30px;
      background: #328CC1;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #767CCB;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2 {
        width: 30px;
        height: 15px;
        background: #767CCB;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #767CCB; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_3 {
      width: 30px;
      height: 30px;
      background: #767CCB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #5F9EA0;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2 {
        width: 30px;
        height: 15px;
        background: #5F9EA0;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #5F9EA0; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_3 {
      width: 30px;
      height: 30px;
      background: #5F9EA0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #78C478;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2 {
        width: 30px;
        height: 15px;
        background: #78C478;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #78C478; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_3 {
      width: 30px;
      height: 30px;
      background: #78C478;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CDC09C;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2 {
        width: 30px;
        height: 15px;
        background: #CDC09C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CDC09C; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_3 {
      width: 30px;
      height: 30px;
      background: #CDC09C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D9B310;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2 {
        width: 30px;
        height: 15px;
        background: #D9B310;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D9B310; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_3 {
      width: 30px;
      height: 30px;
      background: #D9B310;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C38CAE;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2 {
        width: 30px;
        height: 15px;
        background: #C38CAE;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C38CAE; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_3 {
      width: 30px;
      height: 30px;
      background: #C38CAE;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD5C5C;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD5C5C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD5C5C; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD5C5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD8F5C;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD8F5C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD8F5C; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD8F5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C4751E;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2 {
        width: 30px;
        height: 15px;
        background: #C4751E;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C4751E; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_3 {
      width: 30px;
      height: 30px;
      background: #C4751E;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #1D2731;
      position: relative;
      top: -15px; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2 {
      margin-top: 7.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2 {
        width: 30px;
        height: 15px;
        background: #1D2731;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #1D2731; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_3 {
      width: 30px;
      height: 30px;
      background: #1D2731;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
  .map_screen .map_square .square_menu, .line.open_map .map_square .square_menu {
    transform: translate(-50%, 0); }
    .map_screen .map_square .square_menu .add_detailed_map, .line.open_map .map_square .square_menu .add_detailed_map {
      font-size: 0.8em;
      padding: 10px;
      height: 40px;
      width: 120px;
      background-color: #1b1e26; }
      .map_screen .map_square .square_menu .add_detailed_map .button_title, .line.open_map .map_square .square_menu .add_detailed_map .button_title {
        position: static; }
      .map_screen .map_square .square_menu .add_detailed_map:hover, .map_screen .map_square .square_menu .add_detailed_map:active, .map_screen .map_square .square_menu .add_detailed_map:focus, .line.open_map .map_square .square_menu .add_detailed_map:hover, .line.open_map .map_square .square_menu .add_detailed_map:active, .line.open_map .map_square .square_menu .add_detailed_map:focus {
        background-color: #328CC1; }
      .map_screen .map_square .square_menu .add_detailed_map svg, .line.open_map .map_square .square_menu .add_detailed_map svg {
        margin-right: 5px; }
  .map_screen .map_square .zoom_in_option, .line.open_map .map_square .zoom_in_option {
    position: absolute;
    bottom: -1px;
    right: 2px; }
    .map_screen .map_square .zoom_in_option svg, .line.open_map .map_square .zoom_in_option svg {
      height: 12px;
      width: auto; }
      .map_screen .map_square .zoom_in_option svg *, .line.open_map .map_square .zoom_in_option svg * {
        fill: #328CC1 !important; }
.map_screen .preview .square_menu, .map_screen .preview .zoom_in_option, .line.open_map .preview .square_menu, .line.open_map .preview .zoom_in_option {
  display: none; }
.map_screen .description_area, .line.open_map .description_area {
  margin-bottom: 10px; }
  .map_screen .description_area .input_line, .line.open_map .description_area .input_line {
    display: flex; }
    .map_screen .description_area .input_line label, .line.open_map .description_area .input_line label {
      flex: 0 1 auto; }
    .map_screen .description_area .input_line input, .line.open_map .description_area .input_line input {
      flex: 1;
      display: inline-block;
      background-color: rgba(11, 60, 93, 0.2);
      color: #D7CEC7; }
  .map_screen .description_area .characters_count, .line.open_map .description_area .characters_count {
    display: block;
    font-size: 0.6em; }
.map_screen .layer_options, .map_screen .timeline_area, .line.open_map .layer_options, .line.open_map .timeline_area {
  margin-bottom: 10px; }
  .map_screen .layer_options label, .map_screen .timeline_area label, .line.open_map .layer_options label, .line.open_map .timeline_area label {
    display: block; }
.map_screen .layer_options .layer_name, .line.open_map .layer_options .layer_name {
  cursor: pointer; }
  .map_screen .layer_options .layer_name:hover, .line.open_map .layer_options .layer_name:hover {
    color: white; }
  .map_screen .layer_options .layer_name.not_selected, .line.open_map .layer_options .layer_name.not_selected {
    opacity: 0.5; }
.map_screen .layer_options .create_layer_option, .line.open_map .layer_options .create_layer_option {
  cursor: pointer; }
  .map_screen .layer_options .create_layer_option:hover, .line.open_map .layer_options .create_layer_option:hover {
    color: white; }
.map_screen .layer_options .new_layer_interface .option, .line.open_map .layer_options .new_layer_interface .option {
  display: initial;
  cursor: pointer; }
  .map_screen .layer_options .new_layer_interface .option svg, .line.open_map .layer_options .new_layer_interface .option svg {
    height: 10px;
    width: auto; }
    .map_screen .layer_options .new_layer_interface .option svg *, .line.open_map .layer_options .new_layer_interface .option svg * {
      fill: #D7CEC7; }
  .map_screen .layer_options .new_layer_interface .option:hover, .line.open_map .layer_options .new_layer_interface .option:hover {
    color: white; }
    .map_screen .layer_options .new_layer_interface .option:hover svg *, .line.open_map .layer_options .new_layer_interface .option:hover svg * {
      fill: white; }
.map_screen .layer_options .new_layer_interface .accept, .line.open_map .layer_options .new_layer_interface .accept {
  margin-right: 10px;
  margin-left: 10px; }
.map_screen .move, .line.open_map .move {
  height: 22px;
  cursor: pointer;
  background-color: transparent;
  border: none; }
  .map_screen .move.move_left, .line.open_map .move.move_left {
    padding-right: 5px; }
  .map_screen .move.move_right, .line.open_map .move.move_right {
    padding-left: 5px; }
  .map_screen .move:disabled, .line.open_map .move:disabled {
    opacity: 0.2;
    cursor: initial; }
  .map_screen .move svg, .line.open_map .move svg {
    height: 100%;
    width: auto; }
    .map_screen .move svg *, .line.open_map .move svg * {
      fill: #D7CEC7; }
  .map_screen .move:active, .map_screen .move:focus, .line.open_map .move:active, .line.open_map .move:focus {
    outline: none;
    border: none; }
  .map_screen .move:hover svg *, .line.open_map .move:hover svg * {
    fill: white; }
.map_screen .timeline_area .dots_line, .line.open_map .timeline_area .dots_line {
  display: flex; }
.map_screen .timeline_area .dots, .line.open_map .timeline_area .dots {
  display: flex;
  flex: 1; }
  .map_screen .timeline_area .dots .space, .line.open_map .timeline_area .dots .space {
    flex: 1; }
  .map_screen .timeline_area .dots .timeline_dot, .line.open_map .timeline_area .dots .timeline_dot {
    flex: 0 1 auto;
    display: inline-block;
    position: relative;
    transition: all 0.25s;
    height: 22px;
    width: 22px;
    border-radius: 100%;
    background-color: #D7CEC7;
    color: #0B3C5D;
    font-weight: 900;
    cursor: pointer; }
    .map_screen .timeline_area .dots .timeline_dot.fake, .line.open_map .timeline_area .dots .timeline_dot.fake {
      opacity: 0.1; }
    .map_screen .timeline_area .dots .timeline_dot.selected, .line.open_map .timeline_area .dots .timeline_dot.selected {
      border: solid 4px #aa8c0c;
      background-color: #D9B310; }
    .map_screen .timeline_area .dots .timeline_dot .content, .map_screen .timeline_area .dots .timeline_dot svg, .line.open_map .timeline_area .dots .timeline_dot .content, .line.open_map .timeline_area .dots .timeline_dot svg {
      opacity: 0.5;
      user-select: none;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 0.7em; }
  .map_screen .timeline_area .dots .add_frame, .line.open_map .timeline_area .dots .add_frame {
    background-color: rgba(215, 206, 199, 0.2); }
    .map_screen .timeline_area .dots .add_frame svg, .line.open_map .timeline_area .dots .add_frame svg {
      height: 15px; }
      .map_screen .timeline_area .dots .add_frame svg *, .line.open_map .timeline_area .dots .add_frame svg * {
        fill: #328CC1 !important; }
.map_screen .is_preview .map_square, .line.open_map .is_preview .map_square {
  height: 21px;
  width: 21px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #0B3C5D; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #0B3C5D;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #0B3C5D; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2 {
      width: 20px;
      height: 10px;
      background: #0B3C5D;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #0B3C5D; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_3 {
    width: 20px;
    height: 20px;
    background: #0B3C5D;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #0B3C5D; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #0B3C5D;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #0B3C5D; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #0B3C5D;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #EDECEB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #EDECEB;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #EDECEB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2 {
      width: 20px;
      height: 10px;
      background: #EDECEB;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #EDECEB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_3 {
    width: 20px;
    height: 20px;
    background: #EDECEB;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #EDECEB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #EDECEB;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #EDECEB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #EDECEB;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #D7CEC7; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #D7CEC7;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #D7CEC7; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2 {
      width: 20px;
      height: 10px;
      background: #D7CEC7;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #D7CEC7; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_3 {
    width: 20px;
    height: 20px;
    background: #D7CEC7;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #D7CEC7; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #D7CEC7;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #D7CEC7; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #D7CEC7;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #A5A5B0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #A5A5B0;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #A5A5B0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2 {
      width: 20px;
      height: 10px;
      background: #A5A5B0;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #A5A5B0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_3 {
    width: 20px;
    height: 20px;
    background: #A5A5B0;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #A5A5B0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #A5A5B0;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #A5A5B0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #A5A5B0;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #A4C9DF; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #A4C9DF;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #A4C9DF; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2 {
      width: 20px;
      height: 10px;
      background: #A4C9DF;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #A4C9DF; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_3 {
    width: 20px;
    height: 20px;
    background: #A4C9DF;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #A4C9DF; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #A4C9DF;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #A4C9DF; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #A4C9DF;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #328CC1; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #328CC1;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #328CC1; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2 {
      width: 20px;
      height: 10px;
      background: #328CC1;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #328CC1; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_3 {
    width: 20px;
    height: 20px;
    background: #328CC1;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #328CC1; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #328CC1;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #328CC1; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #328CC1;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #767CCB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #767CCB;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #767CCB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2 {
      width: 20px;
      height: 10px;
      background: #767CCB;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #767CCB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_3 {
    width: 20px;
    height: 20px;
    background: #767CCB;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #767CCB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #767CCB;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #767CCB; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #767CCB;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #5F9EA0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #5F9EA0;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #5F9EA0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2 {
      width: 20px;
      height: 10px;
      background: #5F9EA0;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #5F9EA0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_3 {
    width: 20px;
    height: 20px;
    background: #5F9EA0;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #5F9EA0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #5F9EA0;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #5F9EA0; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #5F9EA0;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #78C478; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #78C478;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #78C478; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2 {
      width: 20px;
      height: 10px;
      background: #78C478;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #78C478; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_3 {
    width: 20px;
    height: 20px;
    background: #78C478;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #78C478; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #78C478;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #78C478; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #78C478;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #CDC09C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #CDC09C;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #CDC09C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2 {
      width: 20px;
      height: 10px;
      background: #CDC09C;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #CDC09C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_3 {
    width: 20px;
    height: 20px;
    background: #CDC09C;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #CDC09C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #CDC09C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #CDC09C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #CDC09C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #D9B310; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #D9B310;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #D9B310; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2 {
      width: 20px;
      height: 10px;
      background: #D9B310;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #D9B310; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_3 {
    width: 20px;
    height: 20px;
    background: #D9B310;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #D9B310; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #D9B310;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #D9B310; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #D9B310;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #C38CAE; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #C38CAE;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #C38CAE; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2 {
      width: 20px;
      height: 10px;
      background: #C38CAE;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #C38CAE; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_3 {
    width: 20px;
    height: 20px;
    background: #C38CAE;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #C38CAE; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #C38CAE;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #C38CAE; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #C38CAE;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #CD5C5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #CD5C5C;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #CD5C5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2 {
      width: 20px;
      height: 10px;
      background: #CD5C5C;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #CD5C5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_3 {
    width: 20px;
    height: 20px;
    background: #CD5C5C;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #CD5C5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #CD5C5C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #CD5C5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #CD5C5C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #CD8F5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #CD8F5C;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #CD8F5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2 {
      width: 20px;
      height: 10px;
      background: #CD8F5C;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #CD8F5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_3 {
    width: 20px;
    height: 20px;
    background: #CD8F5C;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #CD8F5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #CD8F5C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #CD8F5C; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #CD8F5C;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #C4751E; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #C4751E;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #C4751E; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2 {
      width: 20px;
      height: 10px;
      background: #C4751E;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #C4751E; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_3 {
    width: 20px;
    height: 20px;
    background: #C4751E;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #C4751E; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #C4751E;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #C4751E; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #C4751E;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_0 {
    width: 20px;
    height: 20px;
    background-color: #1D2731; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_1 {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #1D2731;
    position: relative;
    top: -10px; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_1:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #1D2731; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2 {
    margin-top: 5px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2 {
      width: 20px;
      height: 10px;
      background: #1D2731;
      position: relative; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:before {
      content: "";
      position: absolute;
      top: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 5px solid #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:after {
      content: "";
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 5px solid #1D2731; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_3 {
    width: 20px;
    height: 20px;
    background: #1D2731;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_4 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #1D2731; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_5 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 20px solid #1D2731;
    border-bottom: 10px solid transparent; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_6 {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #1D2731; }
  .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_7 {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 20px solid #1D2731;
    border-bottom: 10px solid transparent; }
.map_screen .is_preview .timeline_area, .line.open_map .is_preview .timeline_area {
  margin: 10px auto 0 auto;
  width: 80%; }
  .map_screen .is_preview .timeline_area .dots .timeline_dot, .line.open_map .is_preview .timeline_area .dots .timeline_dot {
    height: 10px;
    width: 10px; }
.map_screen .is_preview .frame_descriptions, .line.open_map .is_preview .frame_descriptions {
  flex: 0 1 auto;
  font-size: 1.3em; }
  .map_screen .is_preview .frame_descriptions .character_name, .line.open_map .is_preview .frame_descriptions .character_name {
    opacity: 0.5; }
.map_screen .is_preview .middle, .line.open_map .is_preview .middle {
  flex: 1 0 auto; }

.tag_picker {
  width: 100%;
  position: relative; }
  .tag_picker .option_bar {
    margin-bottom: 0; }
  .tag_picker .selected_tags {
    margin-top: 5px;
    margin-bottom: 0.9em;
    font-size: 0.7em; }
    .tag_picker .selected_tags .selected_tag_item {
      font-weight: 400;
      display: inline-block;
      background-color: #202020;
      color: #D9B310;
      padding: 0.3em 0.7em;
      border-radius: 3px;
      border: none;
      cursor: pointer;
      margin-right: 3px; }
      .tag_picker .selected_tags .selected_tag_item:hover {
        background-color: #338fc5; }
  .tag_picker .input_field {
    display: flex; }
    .tag_picker .input_field input {
      flex: 1; }
  .tag_picker .tags_list {
    overflow: auto;
    background-color: #1b1e26;
    max-height: 50vh;
    padding: 10px;
    margin-bottom: 10px;
    position: absolute;
    z-index: 10;
    min-width: 100%;
    white-space: nowrap; }
    .tag_picker .tags_list .tag_item {
      width: 100%;
      cursor: pointer; }
      .tag_picker .tags_list .tag_item:hover {
        background-color: #328CC1; }
      .tag_picker .tags_list .tag_item .tag_info {
        opacity: 0.6;
        font-size: 0.6em; }
  .tag_picker .label {
    text-align: center; }
  .tag_picker svg {
    position: relative;
    top: 5px;
    height: 30px;
    width: auto;
    margin-right: 5px; }
    .tag_picker svg * {
      fill: #D7CEC7 !important; }

.tag_picker_big .tag_item {
  cursor: pointer;
  user-select: none;
  vertical-align: bottom;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3em;
  width: 7em;
  margin: 5px;
  background-color: transparent;
  border-radius: 5px;
  border: solid 2px rgba(215, 206, 199, 0.2);
  box-shadow: -2px 5px 2px 1px rgba(0, 0, 0, 0.2);
  transition: 0.25s all; }
  .tag_picker_big .tag_item:hover {
    transition: border-color 0.15s;
    border-color: rgba(215, 206, 199, 0.4); }
  .tag_picker_big .tag_item.selected {
    animation: flashTag 0.25s both;
    box-shadow: none; }

@keyframes flashTag {
  from {
    background-color: #D7CEC7;
    color: #D7CEC7;
    border-color: #D7CEC7; }
  to {
    background-color: transparent;
    color: #D9B310;
    border-color: #D9B310; } }
.waiting_list {
  margin-top: 1em;
  margin-bottom: 1.5em; }
  .waiting_list .text {
    opacity: 0.3; }
  .waiting_list .character_listed {
    opacity: 0.3;
    animation: flash_to_3 1s; }
    .waiting_list .character_listed:not(:first-child):not(:last-child):before {
      content: ", "; }
    .waiting_list .character_listed:not(:first-child):last-child:before {
      content: " & "; }

.portrait {
  z-index: 0;
  position: relative;
  height: 50px;
  width: 50px;
  text-align: center;
  animation: fade_in 0.5s; }
  .portrait .avatar_icon {
    position: relative;
    height: 100%; }
  .portrait .avatar_background {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%; }
  .portrait svg, .portrait img {
    height: 100%;
    width: auto; }
  .portrait .avatar_icon.color_1 svg #shade1 * {
    fill: #D7CEC7 !important; }
  .portrait .avatar_icon.color_1 svg #shade2 * {
    fill: #c2b4a9 !important; }
  .portrait .avatar_icon.color_1 svg #shade3 * {
    fill: #ad9a8c !important; }
  .portrait .avatar_icon.color_2 svg #shade1 * {
    fill: #a5a5b0 !important; }
  .portrait .avatar_icon.color_2 svg #shade2 * {
    fill: #8a8a98 !important; }
  .portrait .avatar_icon.color_2 svg #shade3 * {
    fill: #70707f !important; }
  .portrait .avatar_icon.color_3 svg #shade1 * {
    fill: #a4c9df !important; }
  .portrait .avatar_icon.color_3 svg #shade2 * {
    fill: #7eb3d2 !important; }
  .portrait .avatar_icon.color_3 svg #shade3 * {
    fill: #599cc4 !important; }
  .portrait .avatar_icon.color_4 svg #shade1 * {
    fill: #328CC1 !important; }
  .portrait .avatar_icon.color_4 svg #shade2 * {
    fill: #286f98 !important; }
  .portrait .avatar_icon.color_4 svg #shade3 * {
    fill: #1d5170 !important; }
  .portrait .avatar_icon.color_5 svg #shade1 * {
    fill: #767ccb !important; }
  .portrait .avatar_icon.color_5 svg #shade2 * {
    fill: #5159bd !important; }
  .portrait .avatar_icon.color_5 svg #shade3 * {
    fill: #3c439f !important; }
  .portrait .avatar_icon.color_6 svg #shade1 * {
    fill: cadetblue !important; }
  .portrait .avatar_icon.color_6 svg #shade2 * {
    fill: #4c7e80 !important; }
  .portrait .avatar_icon.color_6 svg #shade3 * {
    fill: #395f60 !important; }
  .portrait .avatar_icon.color_7 svg #shade1 * {
    fill: #78C478 !important; }
  .portrait .avatar_icon.color_7 svg #shade2 * {
    fill: #55b455 !important; }
  .portrait .avatar_icon.color_7 svg #shade3 * {
    fill: #419541 !important; }
  .portrait .avatar_icon.color_8 svg #shade1 * {
    fill: #cdc09c !important; }
  .portrait .avatar_icon.color_8 svg #shade2 * {
    fill: #bcaa7a !important; }
  .portrait .avatar_icon.color_8 svg #shade3 * {
    fill: #ab9558 !important; }
  .portrait .avatar_icon.color_9 svg #shade1 * {
    fill: #D9B310 !important; }
  .portrait .avatar_icon.color_9 svg #shade2 * {
    fill: #aa8c0c !important; }
  .portrait .avatar_icon.color_9 svg #shade3 * {
    fill: #7a6509 !important; }
  .portrait .avatar_icon.color_10 svg #shade1 * {
    fill: #c38cae !important; }
  .portrait .avatar_icon.color_10 svg #shade2 * {
    fill: #b26a96 !important; }
  .portrait .avatar_icon.color_10 svg #shade3 * {
    fill: #99507d !important; }
  .portrait .avatar_icon.color_11 svg #shade1 * {
    fill: indianred !important; }
  .portrait .avatar_icon.color_11 svg #shade2 * {
    fill: #bc3a3a !important; }
  .portrait .avatar_icon.color_11 svg #shade3 * {
    fill: #952e2e !important; }
  .portrait .avatar_icon.color_12 svg #shade1 * {
    fill: #CD8F5C !important; }
  .portrait .avatar_icon.color_12 svg #shade2 * {
    fill: #bc753a !important; }
  .portrait .avatar_icon.color_12 svg #shade3 * {
    fill: #955c2e !important; }
  .portrait .avatar_background.color_1 svg #shade1 * {
    fill: #a28d7d !important; }
  .portrait .avatar_background.color_1 svg #shade2 * {
    fill: #897362 !important; }
  .portrait .avatar_background.color_1 svg #shade3 * {
    fill: #6c5a4d !important; }
  .portrait .avatar_background.color_2 svg #shade1 * {
    fill: #646472 !important; }
  .portrait .avatar_background.color_2 svg #shade2 * {
    fill: #4c4c57 !important; }
  .portrait .avatar_background.color_2 svg #shade3 * {
    fill: #34343b !important; }
  .portrait .avatar_background.color_3 svg #shade1 * {
    fill: #4691be !important; }
  .portrait .avatar_background.color_3 svg #shade2 * {
    fill: #36759a !important; }
  .portrait .avatar_background.color_3 svg #shade3 * {
    fill: #295875 !important; }
  .portrait .avatar_background.color_4 svg #shade1 * {
    fill: #18435c !important; }
  .portrait .avatar_background.color_4 svg #shade2 * {
    fill: #0d2533 !important; }
  .portrait .avatar_background.color_4 svg #shade3 * {
    fill: #03080b !important; }
  .portrait .avatar_background.color_5 svg #shade1 * {
    fill: #353b8c !important; }
  .portrait .avatar_background.color_5 svg #shade2 * {
    fill: #272c67 !important; }
  .portrait .avatar_background.color_5 svg #shade3 * {
    fill: #191c42 !important; }
  .portrait .avatar_background.color_6 svg #shade1 * {
    fill: #304f50 !important; }
  .portrait .avatar_background.color_6 svg #shade2 * {
    fill: #1d2f30 !important; }
  .portrait .avatar_background.color_6 svg #shade3 * {
    fill: #0a1010 !important; }
  .portrait .avatar_background.color_7 svg #shade1 * {
    fill: #398339 !important; }
  .portrait .avatar_background.color_7 svg #shade2 * {
    fill: #2a602a !important; }
  .portrait .avatar_background.color_7 svg #shade3 * {
    fill: #1a3c1a !important; }
  .portrait .avatar_background.color_8 svg #shade1 * {
    fill: #9b874e !important; }
  .portrait .avatar_background.color_8 svg #shade2 * {
    fill: #79693d !important; }
  .portrait .avatar_background.color_8 svg #shade3 * {
    fill: #574c2c !important; }
  .portrait .avatar_background.color_9 svg #shade1 * {
    fill: #625107 !important; }
  .portrait .avatar_background.color_9 svg #shade2 * {
    fill: #332a04 !important; }
  .portrait .avatar_background.color_9 svg #shade3 * {
    fill: #030300 !important; }
  .portrait .avatar_background.color_10 svg #shade1 * {
    fill: #88476f !important; }
  .portrait .avatar_background.color_10 svg #shade2 * {
    fill: #673654 !important; }
  .portrait .avatar_background.color_10 svg #shade3 * {
    fill: #452439 !important; }
  .portrait .avatar_background.color_11 svg #shade1 * {
    fill: #822828 !important; }
  .portrait .avatar_background.color_11 svg #shade2 * {
    fill: #5b1c1c !important; }
  .portrait .avatar_background.color_11 svg #shade3 * {
    fill: #341010 !important; }
  .portrait .avatar_background.color_12 svg #shade1 * {
    fill: #825028 !important; }
  .portrait .avatar_background.color_12 svg #shade2 * {
    fill: #5b381c !important; }
  .portrait .avatar_background.color_12 svg #shade3 * {
    fill: #342010 !important; }
  .portrait .avatar_background.color_1 svg #shade1 * {
    fill: #8c8c8c !important; }
  .portrait .avatar_background.color_1 svg #shade2 * {
    fill: #737373 !important; }
  .portrait .avatar_background.color_1 svg #shade3 * {
    fill: #595959 !important; }

.avatar_builder {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden; }
  .avatar_builder .avatar_preview {
    display: flex;
    justify-content: center;
    flex: 0 0 auto; }
    .avatar_builder .avatar_preview .portrait {
      height: 50px;
      width: 50px; }
      @media (min-width: 600px) {
        .avatar_builder .avatar_preview .portrait {
          height: 80px;
          width: 80px; } }
  .avatar_builder .header_buttons {
    font-size: 0.8em; }
    .avatar_builder .header_buttons button.button_base {
      min-width: 5em; }
    .avatar_builder .header_buttons button:first-child {
      margin-right: 1em; }
  @media (min-width: 600px) {
    .avatar_builder .request_button {
      font-size: 0.8em;
      margin-left: 1em; } }
  .avatar_builder .upper_tabs {
    flex: 1; }
    @media (min-width: 600px) {
      .avatar_builder .upper_tabs {
        margin-bottom: 35px; }
        .avatar_builder .upper_tabs.rank_tabs {
          margin-bottom: 0; } }
    .avatar_builder .upper_tabs img {
      height: 100%;
      margin-bottom: 15px; }
      @media (min-width: 600px) {
        .avatar_builder .upper_tabs img {
          height: 35px; } }
  .avatar_builder .color_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.8em; }
    .avatar_builder .color_area label {
      margin-bottom: 0; }
    .avatar_builder .color_area div.color_box {
      min-width: 20px;
      width: 20px;
      height: 20px; }
  .avatar_builder .footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-around;
    margin-bottom: 2em;
    margin-top: 11px; }
    .avatar_builder .footer button.button_base {
      min-width: 7em; }

.request_avatar_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em;
  border: solid 1px #40464B;
  margin-bottom: 1em; }
  .request_avatar_box.gray {
    background-color: #3b4045; }
  .request_avatar_box.done {
    color: #2C2C2C;
    background-color: #78c478; }

.avatar_picker .rank_list {
  display: flex;
  flex-flow: wrap;
  justify-content: center; }
.avatar_picker .portrait_box, .avatar_picker .background_box {
  cursor: pointer;
  text-align: center;
  padding: 0;
  white-space: initial; }
  .avatar_picker .portrait_box svg, .avatar_picker .portrait_box img, .avatar_picker .background_box svg, .avatar_picker .background_box img {
    height: 100%;
    width: auto; }
.avatar_picker .background_box.empty {
  background-color: rgba(215, 206, 199, 0.4);
  border-radius: 100%; }
.avatar_picker .rank_name {
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1em;
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  align-items: center; }
  .avatar_picker .rank_name.locked {
    margin-top: 20px;
    margin-bottom: 20px; }
  .avatar_picker .rank_name svg {
    top: 0.1em;
    position: relative;
    height: 1em;
    margin-left: 0.5em; }
  .avatar_picker .rank_name button.button_base {
    font-size: 0.8em;
    margin-left: 0.5em;
    min-height: 0;
    padding: 0.4em 1em; }
.avatar_picker .no .rank_name {
  color: #D7CEC7; }
.avatar_picker .no .portrait_box svg #shade1 *, .avatar_picker .no .background_box svg #shade1 * {
  fill: #D7CEC7 !important; }
.avatar_picker .no .portrait_box svg #shade2 *, .avatar_picker .no .background_box svg #shade2 * {
  fill: #c2b4a9 !important; }
.avatar_picker .no .portrait_box svg #shade3 *, .avatar_picker .no .background_box svg #shade3 * {
  fill: #ad9a8c !important; }
.avatar_picker .no .portrait_box svg #shade4 *, .avatar_picker .no .background_box svg #shade4 * {
  fill: #a28d7d !important; }
.avatar_picker .co .rank_name {
  color: #f19d40; }
.avatar_picker .co .portrait_box svg #shade1 *, .avatar_picker .co .background_box svg #shade1 * {
  fill: #f19d40 !important; }
.avatar_picker .co .portrait_box svg #shade2 *, .avatar_picker .co .background_box svg #shade2 * {
  fill: #ed8511 !important; }
.avatar_picker .co .portrait_box svg #shade3 *, .avatar_picker .co .background_box svg #shade3 * {
  fill: #bd6a0e !important; }
.avatar_picker .co .portrait_box svg #shade4 *, .avatar_picker .co .background_box svg #shade4 * {
  fill: #a55d0c !important; }
.avatar_picker .si .rank_name {
  color: #A4C9DF; }
.avatar_picker .si .portrait_box svg #shade1 *, .avatar_picker .si .background_box svg #shade1 * {
  fill: #A4C9DF !important; }
.avatar_picker .si .portrait_box svg #shade2 *, .avatar_picker .si .background_box svg #shade2 * {
  fill: #7eb3d2 !important; }
.avatar_picker .si .portrait_box svg #shade3 *, .avatar_picker .si .background_box svg #shade3 * {
  fill: #599cc4 !important; }
.avatar_picker .si .portrait_box svg #shade4 *, .avatar_picker .si .background_box svg #shade4 * {
  fill: #4691be !important; }
.avatar_picker .go .rank_name {
  color: #D9B310; }
.avatar_picker .go .portrait_box svg #shade1 *, .avatar_picker .go .background_box svg #shade1 * {
  fill: #D9B310 !important; }
.avatar_picker .go .portrait_box svg #shade2 *, .avatar_picker .go .background_box svg #shade2 * {
  fill: #aa8c0c !important; }
.avatar_picker .go .portrait_box svg #shade3 *, .avatar_picker .go .background_box svg #shade3 * {
  fill: #7a6509 !important; }
.avatar_picker .go .portrait_box svg #shade4 *, .avatar_picker .go .background_box svg #shade4 * {
  fill: #625107 !important; }
.avatar_picker .pl .rank_name {
  color: #dcf6f7; }
.avatar_picker .pl .portrait_box svg #shade1 *, .avatar_picker .pl .background_box svg #shade1 * {
  fill: white !important; }
.avatar_picker .pl .portrait_box svg #shade2 *, .avatar_picker .pl .background_box svg #shade2 * {
  fill: #e6e6e6 !important; }
.avatar_picker .pl .portrait_box svg #shade3 *, .avatar_picker .pl .background_box svg #shade3 * {
  fill: #cccccc !important; }
.avatar_picker .pl .portrait_box svg #shade4 *, .avatar_picker .pl .background_box svg #shade4 * {
  fill: #bfbfbf !important; }
.avatar_picker .le .rank_name {
  color: #a962f5; }
.avatar_picker .le .portrait_box svg #shade1 *, .avatar_picker .le .background_box svg #shade1 * {
  fill: #a962f5 !important; }
.avatar_picker .le .portrait_box svg #shade2 *, .avatar_picker .le .background_box svg #shade2 * {
  fill: #8f32f2 !important; }
.avatar_picker .le .portrait_box svg #shade3 *, .avatar_picker .le .background_box svg #shade3 * {
  fill: #750ee3 !important; }
.avatar_picker .le .portrait_box svg #shade4 *, .avatar_picker .le .background_box svg #shade4 * {
  fill: #690dcb !important; }
.avatar_picker .portrait_cell {
  position: relative;
  display: inline-block; }
  .avatar_picker .portrait_cell:not(:last-child) .pick_choice {
    padding: 5px; }
  .avatar_picker .portrait_cell .locked {
    position: absolute;
    z-index: 1;
    height: 25%;
    right: 5px;
    bottom: 5px; }
.avatar_picker .pick_choice {
  border-radius: 100%; }
  .avatar_picker .pick_choice:not(.disabled):hover, .avatar_picker .pick_choice.selected {
    background-color: #2f3233; }
  .avatar_picker .pick_choice.portrait_box, .avatar_picker .pick_choice.background_box {
    height: 60px;
    width: 60px; }
    @media (min-width: 600px) {
      .avatar_picker .pick_choice.portrait_box, .avatar_picker .pick_choice.background_box {
        height: 70px;
        width: 70px; } }
  .avatar_picker .pick_choice.just_unlocked svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: appear_to_fit 2s 0.75s both, fade_in 1s both;
    z-index: 1; }

.avatar_picker {
  display: inline; }
  .avatar_picker table {
    display: block; }
    .avatar_picker table td {
      display: inline-block; }
  .avatar_picker .current_portrait_box_container, .avatar_picker .current_background_box_container {
    position: relative;
    display: inline-block;
    margin-left: 5px; }
  .avatar_picker .popover_custom {
    position: fixed;
    top: 10%; }
    .avatar_picker .popover_custom:after {
      display: none; }

.complex_confirm_modal .buttons {
  display: flex;
  flex-direction: column; }
.complex_confirm_modal .complex_option {
  padding: 1em;
  background-color: #3b4045;
  margin: 0.5em 0; }
  .complex_confirm_modal .complex_option .explanation {
    margin-bottom: 1em;
    text-align: center; }
  .complex_confirm_modal .complex_option .avatar_changes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5em 0; }
    .complex_confirm_modal .complex_option .avatar_changes .arrow svg {
      height: 20px;
      margin: 0 0.5em; }
  .complex_confirm_modal .complex_option button.button_base {
    width: 100%; }
.complex_confirm_modal button {
  margin-bottom: 0.5em; }

.avatars_list {
  margin-top: 1.2em; }
  .avatars_list .portrait {
    display: inline-block;
    height: 25px;
    width: 25px; }

.modal_custom_container .manage_party_menu.modal_custom .title {
  display: flex;
  align-items: center;
  padding-left: 1.5em;
  padding-right: 1.5em; }
  .modal_custom_container .manage_party_menu.modal_custom .title .merge_all {
    float: right; }
.modal_custom_container .manage_party_menu.modal_custom .party_section {
  margin-bottom: 2em;
  border-bottom: solid 1px #707070; }
  .modal_custom_container .manage_party_menu.modal_custom .party_section .party_name {
    margin-bottom: 1em;
    transition: opacity 0.25s; }
  .modal_custom_container .manage_party_menu.modal_custom .party_section.dimmed {
    opacity: 0.4; }
.modal_custom_container .manage_party_menu.modal_custom .instructions {
  font-size: 0.8em;
  opacity: 0.6;
  margin-bottom: 1em; }
.modal_custom_container .manage_party_menu.modal_custom .character_item, .modal_custom_container .manage_party_menu.modal_custom .empty_slot {
  display: inline-block;
  margin-bottom: 0.5em;
  cursor: pointer;
  vertical-align: top; }
  .modal_custom_container .manage_party_menu.modal_custom .character_item:not(:first-child), .modal_custom_container .manage_party_menu.modal_custom .empty_slot:not(:first-child) {
    margin-left: 1em; }
  .modal_custom_container .manage_party_menu.modal_custom .character_item .portrait, .modal_custom_container .manage_party_menu.modal_custom .empty_slot .portrait {
    width: 40px;
    height: 40px;
    margin-left: auto;
    margin-right: auto; }
  .modal_custom_container .manage_party_menu.modal_custom .character_item .name, .modal_custom_container .manage_party_menu.modal_custom .empty_slot .name {
    width: 50px;
    text-align: center;
    font-size: 0.6em;
    opacity: 0.6; }
  .modal_custom_container .manage_party_menu.modal_custom .character_item.selected .name, .modal_custom_container .manage_party_menu.modal_custom .empty_slot.selected .name {
    color: #D9B310;
    opacity: 1; }
.modal_custom_container .manage_party_menu.modal_custom .empty_slot {
  cursor: pointer;
  transition: opacity 0.25s; }
  .modal_custom_container .manage_party_menu.modal_custom .empty_slot.unavailable {
    pointer-events: none;
    opacity: 0;
    cursor: initial;
    transition: opacity 0s; }
  .modal_custom_container .manage_party_menu.modal_custom .empty_slot .square {
    margin: 10px auto;
    height: 30px;
    width: 30px;
    border: solid 1px #707070;
    border-radius: 5px; }

.party_info, .party_split_notification {
  transition: opacity 0.5s;
  display: flex; }
  .party_info .members .name:not(:first-child):not(:last-child):before, .party_split_notification .members .name:not(:first-child):not(:last-child):before {
    content: ", "; }
  .party_info .members .name:last-child:not(:first-child):before, .party_split_notification .members .name:last-child:not(:first-child):before {
    content: " & "; }
  .party_info .left_pane, .party_split_notification .left_pane {
    flex: 0 1 auto;
    margin-right: 10px; }
  .party_info .swap_icon, .party_split_notification .swap_icon {
    position: relative;
    height: 3em;
    width: 3em; }
    .party_info .swap_icon .portrait, .party_split_notification .swap_icon .portrait {
      height: inherit;
      width: inherit; }
    .party_info .swap_icon .top_icon, .party_split_notification .swap_icon .top_icon {
      position: absolute;
      bottom: 0;
      right: 0;
      transform: translateY(10%);
      border-radius: 100%;
      background-color: rgba(0, 0, 0, 0.4); }
      .party_info .swap_icon .top_icon svg, .party_split_notification .swap_icon .top_icon svg {
        height: 1.5em; }
        .party_info .swap_icon .top_icon svg *, .party_split_notification .swap_icon .top_icon svg * {
          fill: white; }
  .party_info.light, .party_split_notification.light {
    font-size: 12px; }
  .party_info:not(.light), .party_split_notification:not(.light) {
    margin-top: 3em;
    margin-bottom: 3em; }
  .party_info .sibling_parties_listing, .party_split_notification .sibling_parties_listing {
    white-space: nowrap;
    mask-image: linear-gradient(to right, #000, #000 calc(90vw - 100px), transparent calc(100vw - 50px));
    -webkit-mask-image: linear-gradient(to right, #000, #000 calc(90vw - 100px), transparent calc(100vw - 50px)); }
    .party_info .sibling_parties_listing .new_content, .party_split_notification .sibling_parties_listing .new_content {
      color: #D9B310; }
    .party_info .sibling_parties_listing > span:not(:last-child):after, .party_split_notification .sibling_parties_listing > span:not(:last-child):after {
      content: " | ";
      color: #D7CEC7; }
    .party_info .sibling_parties_listing span.closed, .party_split_notification .sibling_parties_listing span.closed {
      opacity: 0.6; }
    .party_info .sibling_parties_listing .current, .party_split_notification .sibling_parties_listing .current {
      opacity: 1; }
    .party_info .sibling_parties_listing .size_icon, .party_split_notification .sibling_parties_listing .size_icon {
      margin-right: 0.5em; }
      .party_info .sibling_parties_listing .size_icon span, .party_split_notification .sibling_parties_listing .size_icon span {
        opacity: 1; }
      .party_info .sibling_parties_listing .size_icon span:not(:first-child), .party_split_notification .sibling_parties_listing .size_icon span:not(:first-child) {
        margin-left: -0.4em; }
      .party_info .sibling_parties_listing .size_icon svg, .party_split_notification .sibling_parties_listing .size_icon svg {
        height: 1em; }
      .party_info .sibling_parties_listing .size_icon .pov_character svg *, .party_split_notification .sibling_parties_listing .size_icon .pov_character svg * {
        fill: #D9B310; }
  .party_info .story_of, .party_split_notification .story_of {
    font-size: 0.9em;
    color: #D9B310; }

.pov_menu h6 {
  color: white; }
.pov_menu .hint {
  font-size: 0.8em;
  margin-bottom: 2em; }
.pov_menu .character_item {
  margin-bottom: 1em;
  font-size: 1.1em; }
  .pov_menu .character_item.selected {
    border: solid 1px rgba(217, 179, 16, 0.8); }
  .pov_menu .character_item .main_label {
    margin-bottom: 0.5em; }
.pov_menu .character_parties span:not(:first-child):before {
  content: " > ";
  color: #D7CEC7;
  opacity: 0.6; }
.pov_menu .character_parties span {
  opacity: 0.6; }
  .pov_menu .character_parties span:hover {
    opacity: 1; }
.pov_menu .character_parties .current {
  opacity: 1;
  color: white; }
.pov_menu .character_parties .new_content {
  color: #D9B310; }
.pov_menu .character_parties .size_icon {
  display: none; }

.party_split_notification {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  transition: background-color 0.5s; }
  .party_split_notification .members .name {
    color: #D9B310; }
    .party_split_notification .members .name:before {
      color: #D7CEC7;
      opacity: 0.6; }
    .party_split_notification .members .name:not(:nth-child(1)):not(:last-child):before {
      content: ", "; }
    .party_split_notification .members .name:last-child:not(:nth-child(1)):before {
      content: " & "; }

.merge_indicator {
  margin-top: 2.5em;
  margin-bottom: 2.5em; }

.merge_indicator, .party_split_notification {
  color: rgba(215, 206, 199, 0.6); }
  .merge_indicator .icon, .party_split_notification .icon {
    margin-right: 5px; }
    .merge_indicator .icon svg *, .party_split_notification .icon svg * {
      fill: #D7CEC7; }

.nav_tabs .party_split_notification {
  margin-top: 0;
  margin-bottom: 0;
  background-color: #1b1e26;
  font-size: 12px; }
.nav_tabs .party_info {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  background-color: #252627; }
.nav_tabs .party_tabs {
  margin-top: 0;
  width: 100%;
  font-size: 12px; }

.create_language_menu .character_item {
  display: inline-flex;
  margin: 0 0 5px 5%; }
.create_language_menu .input_area {
  display: flex; }
  .create_language_menu .input_area .delete_option {
    cursor: pointer;
    padding: 5px;
    margin-right: 5px;
    opacity: 0.6; }
    .create_language_menu .input_area .delete_option:hover {
      opacity: 1; }
    .create_language_menu .input_area .delete_option svg {
      height: 100%;
      width: auto; }
      .create_language_menu .input_area .delete_option svg * {
        fill: #D7CEC7; }
  .create_language_menu .input_area input {
    padding: 5px;
    flex: 1;
    width: 100%; }
  .create_language_menu .input_area .option_bar {
    flex: 1; }
.create_language_menu .proficiency_section_title {
  text-align: center;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  opacity: 1;
  font-size: 0.8em; }
.create_language_menu .character_list {
  display: flex;
  flex-direction: column; }
  .create_language_menu .character_list .option_bar {
    margin-bottom: 1em; }

.story_marker_options {
  display: flex;
  flex-direction: column; }
  .story_marker_options button {
    padding: 12px; }
    .story_marker_options button:not(:last-child) {
      margin-right: 5px; }

.story_top .story_marker_options {
  flex-direction: row;
  justify-content: center; }
  .story_top .story_marker_options button {
    padding: 12px 0;
    margin-right: 0;
    display: flex;
    justify-content: center; }
    .story_top .story_marker_options button .icon {
      margin-right: 0; }
    .story_top .story_marker_options button .button_title {
      flex: 0; }

.marker_options_toggle {
  text-align: center;
  padding: 5px;
  opacity: 0.9;
  cursor: pointer;
  color: #D9B310; }
  .marker_options_toggle:hover {
    opacity: 1; }

.create_story_marker_menu {
  font-size: initial; }
  .create_story_marker_menu input {
    width: 100%;
    padding: 5px; }
  .create_story_marker_menu textarea {
    width: 100%;
    padding: 5px; }

.index_marker {
  color: #D7CEC7; }
  .index_marker label {
    opacity: 0.5;
    font-size: 0.6em; }
  .index_marker.act {
    margin-top: 1em; }
  .index_marker.chapter {
    margin-top: 0.3em;
    margin-left: 10px; }
  .index_marker.scene {
    margin-left: 25px; }

.story_marker {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  cursor: pointer;
  opacity: 0.9; }
  .story_marker:hover {
    opacity: 1; }
  .story_marker .marker_title {
    display: block;
    font-size: 0.8em;
    opacity: 0.6; }
    .story_marker .marker_title .icon {
      display: inline-block;
      height: 15px;
      margin-right: 5px; }
      .story_marker .marker_title .icon svg * {
        fill: #D7CEC7; }
  .story_marker .marker_name {
    display: block;
    font-size: 1.2em; }
    .story_marker .marker_name input {
      text-align: center;
      padding: 5px; }
  .story_marker .description textarea {
    width: 100%; }
  .story_marker .description .content {
    opacity: 0.7;
    white-space: pre-line; }
  .story_marker .description .description_toggle {
    opacity: 0.3;
    font-size: 0.8em; }

.marker_type_options {
  display: flex; }
  .marker_type_options .option {
    font-size: 2em;
    opacity: 0.5;
    cursor: pointer;
    padding: 3px 5px; }
    .marker_type_options .option.selected {
      opacity: 1; }

.marker_options {
  display: flex;
  justify-content: center;
  margin-bottom: 30px; }
  .marker_options button {
    flex: 1; }
    .marker_options button:not(:last-child) {
      margin-right: 1em; }

.helper_editor .page_content > .container, .helper_panel_editor .page_content > .container {
  margin-bottom: 70px; }
.helper_editor input, .helper_panel_editor input {
  padding: 5px; }
.helper_editor textarea, .helper_panel_editor textarea {
  padding: 5px; }
.helper_editor hr, .helper_panel_editor hr {
  width: 100%; }
.helper_editor label, .helper_panel_editor label {
  opacity: 0.6;
  margin-top: 0.5rem;
  margin-bottom: 0; }
.helper_editor .name_input, .helper_editor .description_input, .helper_panel_editor .name_input, .helper_panel_editor .description_input {
  display: flex;
  flex-direction: column; }

.helpers_screen .page_content > .container {
  margin-top: 10px; }
.helpers_screen .warning {
  padding: 1em;
  background-color: rgba(27, 30, 38, 0.5);
  font-size: 0.7em;
  margin: 10px 0; }
.helpers_screen .helper_item {
  margin-bottom: 1em; }
  .helpers_screen .helper_item .option_bar_label {
    opacity: 0.6;
    cursor: pointer; }
  .helpers_screen .helper_item.public .option_bar_label {
    opacity: 1; }
  .helpers_screen .helper_item .public_icon {
    display: inline-block;
    margin-right: 0.5em; }
    .helpers_screen .helper_item .public_icon svg {
      height: 1em; }

.helper_editor label {
  margin-bottom: 0.7em; }
.helper_editor .panel_item {
  width: 100%;
  margin-bottom: 10px; }
.helper_editor textarea {
  padding: 1em; }
.helper_editor .option_bar {
  margin-bottom: 1em; }
.helper_editor .button_footer {
  margin-right: 0.5em; }

.helper_panel_editor .panel_content {
  min-height: 20vh;
  width: 100%; }
.helper_panel_editor textarea {
  padding: 1em; }

.helper_panel_option {
  display: flex;
  margin-bottom: 10px;
  font-size: 0.8em; }
  .helper_panel_option .left_pane, .helper_panel_option .right_pane {
    display: flex;
    flex-direction: column; }
  .helper_panel_option .left_pane {
    flex: 0 1 auto; }
    .helper_panel_option .left_pane button:first-child {
      margin-bottom: 3px; }
  .helper_panel_option .right_pane {
    margin-left: 5px;
    flex: 1; }
  .helper_panel_option input {
    width: 100%;
    margin-bottom: 5px; }
  .helper_panel_option .options {
    display: flex; }
    .helper_panel_option .options button:not(:last-child) {
      margin-right: 5px; }
    .helper_panel_option .options .target {
      flex: 1; }
  .helper_panel_option .no_target {
    color: indianred; }
  .helper_panel_option .select_panel_modal .option_bar {
    margin-bottom: 0.7em; }

.helpers_menu #helper_menu_button {
  border: none;
  height: initial;
  width: initial;
  min-height: initial; }
.helpers_menu .circle_icon {
  cursor: pointer;
  float: right;
  right: 5px;
  bottom: 20px; }
.helpers_menu .list_popover {
  text-align: left;
  width: 21em;
  max-width: 80vw; }
.game_menu_container .helpers_menu {
  position: relative; }
  .game_menu_container .helpers_menu .circle_icon {
    float: initial;
    right: initial;
    bottom: initial; }

.collapse {
  white-space: pre-line; }

.helper_item_description {
  font-size: 0.7em;
  background-color: rgba(27, 30, 38, 0.3);
  margin-top: -10px;
  margin-bottom: 10px; }
  .helper_item_description .content {
    padding: 10px; }

.helper_item {
  margin-bottom: 0.5em; }
  .helper_item .close {
    color: #D7CEC7;
    margin-left: 0.5em; }
  .helper_item .upvote_option {
    background-color: rgba(27, 30, 38, 0.2);
    width: 40px;
    text-align: center;
    display: flex;
    flex-direction: column; }
    .helper_item .upvote_option .icon, .helper_item .upvote_option .counter {
      flex: 0 1 auto;
      font-size: 0.6em;
      opacity: 0.5; }
    .helper_item .upvote_option svg {
      display: block;
      margin: auto;
      height: 10px; }
    .helper_item .upvote_option:hover .icon, .helper_item .upvote_option:hover .counter {
      opacity: 1; }
    .helper_item .upvote_option.upvoted svg * {
      fill: #D9B310; }
    .helper_item .upvote_option.upvoted .icon, .helper_item .upvote_option.upvoted .counter {
      opacity: 0.9; }

.select_helper_modal .helper_item.active {
  opacity: 0.3; }
.select_helper_modal .search_input {
  margin-bottom: 1em; }
.select_helper_modal .section_title {
  opacity: 0.6;
  margin-bottom: 10px; }
  .select_helper_modal .section_title svg {
    height: 15px;
    margin-right: 10px; }
.select_helper_modal .empty_message {
  opacity: 0.6; }

.interactive_helper {
  z-index: 100;
  position: fixed;
  width: 250px;
  height: 100vh;
  background-color: #252627;
  font-size: 0.8em;
  right: 0;
  transition: all 0.25s;
  animation: panel_open_right 0.25s;
  display: flex;
  flex-direction: column; }
  .interactive_helper .screen_title {
    background-color: #1b1e26; }
  .interactive_helper .close {
    display: none;
    position: absolute;
    right: 15px;
    top: 3px;
    color: white; }
    .interactive_helper .close:hover {
      color: white; }
  .interactive_helper.closed {
    transform: translateX(100%); }
  .interactive_helper .panel_content {
    flex: 0 2 auto;
    white-space: pre-line;
    margin-top: 10px;
    overflow: auto; }
  .interactive_helper .panel_options {
    margin-top: 10px;
    flex: 1 1 auto;
    overflow: auto;
    padding-bottom: 30px; }
    .interactive_helper .panel_options button {
      width: 100%;
      margin-bottom: 10px; }

.messaging_bar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 0.6em;
  display: flex;
  flex-direction: column;
  background-color: #0B3C5D;
  padding: 10px 3px 10px 3px; }
  .messaging_bar .messaging_icon {
    cursor: pointer;
    text-align: center;
    opacity: 0.3; }
    .messaging_bar .messaging_icon:not(:last-child) {
      margin-left: 10px; }
    .messaging_bar .messaging_icon.selected {
      opacity: 1; }
    .messaging_bar .messaging_icon svg {
      height: 10px;
      width: auto; }
      .messaging_bar .messaging_icon svg * {
        fill: #D7CEC7 !important; }
    .messaging_bar .messaging_icon.new_content {
      color: #D9B310;
      opacity: 0.7; }
      .messaging_bar .messaging_icon.new_content svg * {
        fill: #D9B310 !important; }

.horizontal_list_item_container {
  margin-right: -1rem;
  margin-left: -1rem;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  height: 90vw;
  padding-left: 2px;
  padding-bottom: 1rem;
  padding-top: 0.5rem; }
  .horizontal_list_item_container .horizontal_list_item {
    display: inline-block;
    width: 45vw;
    height: 100%;
    margin-right: 0.5rem; }
    .horizontal_list_item_container .horizontal_list_item:first-child {
      margin-left: 1rem; }
    .horizontal_list_item_container .horizontal_list_item:last-child {
      margin-right: 1rem; }
  .horizontal_list_item_container .game_item {
    height: 100%;
    max-height: none; }

.horizontal_list.full_width .horizontal_list_item_container .horizontal_list_item {
  width: 100%; }

.horizontal_list_button_left, .horizontal_list_button_right {
  display: none; }

@media (min-width: 600px) {
  .horizontal_list {
    position: relative; }

  .horizontal_list_item_container {
    margin-right: 0;
    margin-left: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: 23rem; }
    .horizontal_list_item_container .horizontal_list_item {
      width: 13rem;
      height: 100%; }
      .horizontal_list_item_container .horizontal_list_item:last-child {
        margin-right: 0; }
      .horizontal_list_item_container .horizontal_list_item:first-child {
        margin-left: 0; }

  .horizontal_list_button_left, .horizontal_list_button_right {
    z-index: 3;
    display: block;
    position: absolute;
    top: 0.5rem;
    bottom: 1rem;
    width: 2rem;
    background-color: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s, background-color 0.1s;
    border: none; }
    .horizontal_list_button_left.active, .horizontal_list_button_right.active {
      opacity: 0.5;
      cursor: pointer;
      pointer-events: auto; }
      .horizontal_list_button_left.active:hover, .horizontal_list_button_right.active:hover {
        opacity: 1;
        background-color: rgba(215, 206, 199, 0.05); }
    .horizontal_list_button_left svg, .horizontal_list_button_right svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 30px; }
      .horizontal_list_button_left svg *, .horizontal_list_button_right svg * {
        fill: #D7CEC7; }

  .horizontal_list_button_left {
    left: -2rem; }

  .horizontal_list_button_right {
    right: -2rem; } }
.news_modal .news ul, .news_modal .news p, .news_screen .news ul, .news_screen .news p {
  font-size: 0.9em; }
.news_modal .news h6, .news_screen .news h6 {
  color: #D9B310; }
.news_modal .news .main_title, .news_screen .news .main_title {
  color: #D9B310;
  text-align: center; }
.news_modal .news h5, .news_screen .news h5 {
  font-size: 1em;
  color: white;
  margin-bottom: 1em; }
.news_modal .news:not(.active), .news_screen .news:not(.active) {
  border-top: solid 1px #D7CEC7; }
.news_modal .big_title, .news_screen .big_title {
  font-size: 1.5em;
  color: white; }
.news_modal .body, .news_screen .body {
  display: flex;
  flex-direction: column; }
  .news_modal .body b, .news_screen .body b {
    font-weight: bold; }
  .news_modal .body .top_pane, .news_screen .body .top_pane {
    flex: 0;
    display: flex;
    border-bottom: solid 1px #707070;
    align-items: center;
    padding-bottom: 1em; }
    .news_modal .body .top_pane button, .news_screen .body .top_pane button {
      margin-right: 1.5em; }
    .news_modal .body .top_pane .icon, .news_screen .body .top_pane .icon {
      height: 40px; }
  .news_modal .body .bottom_pane, .news_screen .body .bottom_pane {
    flex: 1; }
  .news_modal .body .image_container, .news_screen .body .image_container {
    display: block;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 1em; }
  .news_modal .body img, .news_screen .body img {
    max-width: 100%;
    border: solid 1px #707070; }
  .news_modal .body .picture_label, .news_screen .body .picture_label {
    margin-top: 0.5em;
    font-size: 0.6em;
    display: block;
    text-align: center;
    margin-bottom: 0; }
  .news_modal .body .highlighted, .news_screen .body .highlighted {
    color: #D9B310; }
  .news_modal .body .support, .news_screen .body .support {
    cursor: pointer; }
.news_modal .signature, .news_screen .signature {
  font-size: 0.8em; }

.game_item {
  display: flex;
  padding: 1rem;
  position: relative;
  background: rgba(60, 60, 62, 0.6);
  border: solid 1px rgba(255, 255, 255, 0.1);
  border-radius: 4px; }
  .game_item .item_menu {
    z-index: 1; }
  .game_item .left_side {
    display: flex;
    flex-direction: column;
    width: 7em;
    flex: 0;
    font-size: 0.8em;
    padding-right: 1rem;
    text-align: center; }
    .game_item .left_side .game_icon {
      width: 70%;
      margin: 0 auto 1em auto; }
      .game_item .left_side .game_icon .main_icon {
        opacity: 0.5; }
    .game_item .left_side .join_button, .game_item .left_side .preview_button {
      margin-top: 1em; }
  .game_item.checked .game_icon {
    position: relative; }
    .game_item.checked .game_icon .checked_feedback {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 50%; }
      .game_item.checked .game_icon .checked_feedback svg * {
        fill: white; }
    .game_item.checked .game_icon .main_icon {
      opacity: 0.3; }
  .game_item .right_side {
    flex: 2;
    display: flex;
    flex-direction: column; }
  .game_item .new_game_feedback {
    display: inline;
    color: #D9B310;
    padding: 0.5em;
    border: solid 1px #D9B310;
    border-radius: 5px;
    margin-right: 0.5em;
    font-size: 0.5em;
    position: relative;
    top: -0.6em; }
  .game_item button:not(.highlighted) .notification {
    display: none; }
  .game_item .notification {
    color: #D9B310;
    font-size: 0.6em; }
  .game_item .game_title {
    font-size: 1.1em;
    color: white;
    position: relative; }
    .game_item .game_title .game_name {
      right: 40px;
      max-width: 100%;
      margin-bottom: -0.5em; }
    .game_item .game_title .author {
      cursor: pointer; }
      .game_item .game_title .author:hover {
        transition: opacity 0.25s;
        opacity: 1; }
        .game_item .game_title .author:hover .name {
          color: white; }
    .game_item .game_title .author, .game_item .game_title .timestamp {
      display: inline-block;
      font-size: 0.6em;
      opacity: 0.6;
      margin-top: -0.2em; }
      .game_item .game_title .author .by, .game_item .game_title .timestamp .by {
        opacity: 0.5; }
    .game_item .game_title .timestamp {
      margin-left: 1em; }
  .game_item .update_timestamp {
    color: white;
    opacity: 0.6;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 0.6em; }
    .game_item .update_timestamp svg {
      height: 1em;
      margin-right: 0.3em; }
  .game_item .long {
    display: none; }
  .game_item .game_more_info {
    margin-left: 0.5em;
    font-size: 0.6em; }
    .game_item .game_more_info .pace {
      font-weight: 400; }
      .game_item .game_more_info .pace.pace_0 {
        color: #328cc1; }
      .game_item .game_more_info .pace.pace_1 {
        color: #cd8f5c; }
      .game_item .game_more_info .pace.pace_2 {
        color: #d9b310; }
    .game_item .game_more_info .beginner_badge {
      margin-left: 2em;
      color: white; }
  .game_item .game_description {
    margin-top: 0.5em;
    font-size: 0.7em;
    word-break: break-word; }
  .game_item:not(.extended) {
    max-height: 20rem; }
    .game_item:not(.extended) .game_description {
      cursor: pointer;
      max-height: 7em;
      overflow: hidden;
      mask-image: linear-gradient(to bottom, #000, #000 5em, transparent);
      -webkit-mask-image: linear-gradient(to bottom, #000, #000 5em, transparent); }
  .game_item.extended .preview_button {
    margin: 1em auto 1em auto;
    font-size: 0.8em;
    width: 80%; }
  .game_item .counts {
    opacity: 0.5;
    margin-top: 0.5em;
    font-size: 0.9em; }
    .game_item .counts .counter:not(:first-child) {
      margin-left: 1.2em; }
    .game_item .counts .counter svg {
      margin-right: 0.2em;
      height: 1em; }
  .game_item .tag_list {
    margin-top: 0.5em;
    font-size: 0.5em;
    color: #D9B310; }
  .game_item.narrow:not(.extended) {
    height: 15em; }
    .game_item.narrow:not(.extended) .right_side .game_description {
      height: initial;
      max-height: initial;
      flex: 1;
      mask-image: linear-gradient(to bottom, #000, #000 calc(100% - 2em), transparent);
      -webkit-mask-image: linear-gradient(to bottom, #000, #000 calc(100% - 2em), transparent); }

.game_item_modal .game_item {
  padding: 0;
  border: none;
  background-color: transparent; }
  .game_item_modal .game_item .flow_buttons {
    margin-top: 2.5em;
    margin-bottom: 0.5em; }

.game_preview {
  background: url(../../images/backgrounds/game_preview_background.png) no-repeat, #1b1e26;
  background-size: cover;
  align-items: center; }
  .game_preview.desktop {
    display: none; }
  .game_preview.mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(125px);
    opacity: 0.9; }
    .game_preview.mobile .characters {
      height: 12em; }
  .game_preview .characters {
    display: flex;
    flex: 1;
    height: 11em;
    justify-content: center;
    align-items: center; }
    .game_preview .characters .portrait {
      height: 100%;
      width: 100%;
      margin: 0 auto; }
    .game_preview .characters .name {
      z-index: 0;
      position: relative;
      text-align: center;
      color: #D7CEC7;
      max-width: 7em;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
      margin: 0 auto; }
      .game_preview .characters .name:before {
        z-index: -1;
        content: " ";
        position: absolute;
        width: 150%;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(to right, transparent, rgba(60, 60, 62, 0.7), rgba(60, 60, 62, 0.7), transparent); }
    .game_preview .characters .character_side {
      height: 50%;
      width: 5em; }
      .game_preview .characters .character_side .name {
        font-size: 0.8em; }
    .game_preview .characters .character_center {
      height: 80%; }

.game_lines_preview {
  margin-top: 1em;
  margin-bottom: 0.5em; }
  .game_lines_preview:not(.empty) {
    min-height: 30em; }
  .game_lines_preview.empty #preview_scroll_area {
    overflow: hidden; }
  .game_lines_preview .lines_scroller {
    font-size: 0.8em;
    animation: fade_in 0.5s;
    padding-right: 0; }
    .game_lines_preview .lines_scroller .line > .container {
      padding-left: 0;
      padding-right: 0; }
  .game_lines_preview .next_button_container {
    text-align: center; }
    .game_lines_preview .next_button_container .next_button {
      margin-top: 0.5em;
      padding-left: 2em;
      padding-right: 2em; }

.featured_game_cover {
  position: relative;
  min-height: 15rem;
  width: 100%;
  cursor: pointer;
  background-size: cover;
  background-position: top center;
  margin-bottom: 1rem;
  outline: 2px solid transparent;
  transition: outline-color 0.2s; }
  .featured_game_cover h2.h2 {
    color: white; }
  .featured_game_cover.open {
    outline-color: rgba(215, 206, 199, 0.7); }
  .featured_game_cover .cover_content {
    position: relative;
    z-index: 2;
    padding: 4rem 1rem 2rem;
    text-shadow: 0px 2px 2px #3C3C3E; }
  .featured_game_cover .featured_title {
    color: #D9B310; }
  .featured_game_cover .markdown_text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .featured_game_cover .player_count {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.2em; }
  .featured_game_cover .avatar {
    display: inline-block;
    margin: 0.5rem 0.2rem 1rem 0;
    width: 2.5rem;
    height: 2.5rem; }

.featured_game_container {
  margin: 0 -1rem 1rem; }

@media (min-width: 600px) {
  .featured_game_cover .cover_content {
    padding: 4rem 2rem 2rem; }
  .featured_game_cover .player_count {
    font-size: 2rem; }

  .featured_game_container {
    margin: 0; } }
.game_grid .game_cover {
  height: 75vw;
  margin-bottom: 1rem; }
  @media (min-width: 768px) {
    .game_grid .game_cover {
      height: 15rem;
      margin-top: 1rem; } }

.game_cover {
  font-size: 14px;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  animation: fade_in 0.5s;
  transition: outline-color 0.2s;
  outline: 2px solid transparent; }
  .game_cover .cover_image {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: auto 90%;
    background-position: top center; }
  .game_cover .cover_content {
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100%;
    bottom: 0;
    text-align: right; }
    .game_cover .cover_content .button_more_info {
      position: absolute;
      bottom: 2.25rem;
      padding: 0.5rem;
      width: 2.5rem;
      height: 2.5rem;
      left: 0; }
    .game_cover .cover_content > div {
      padding: 0.5rem; }
    .game_cover .cover_content svg {
      display: inline-block;
      width: 1rem;
      height: 1rem; }
    .game_cover .cover_content .player_count svg {
      height: 0.8rem; }
  .game_cover .badges {
    position: absolute;
    top: 0; }
    .game_cover .badges > * {
      margin-right: 0.5rem; }
  .game_cover .game_name {
    display: block;
    position: relative;
    padding: 0.5rem;
    font-weight: bold;
    text-align: center;
    background: #20243C;
    color: #D7CEC7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
    .game_cover .game_name.has_news {
      color: #D9B310; }
      .game_cover .game_name.has_news::after {
        content: "•";
        position: absolute;
        top: 0;
        right: 0.5rem; }
  .game_cover.tagged {
    border: solid 2px indianred; }
    .game_cover.tagged .game_name.has_news {
      color: indianred; }
  .game_cover .open_button {
    position: absolute;
    bottom: 3.5rem;
    left: 0.5rem;
    min-width: 6em;
    opacity: 0;
    transition: opacity 0.2s; }
  .game_cover:hover .open_button {
    opacity: 1; }

@media (min-width: 768px) {
  .game_cover:active, .game_cover:focus, .game_cover.selected {
    outline-color: rgba(215, 206, 199, 0.7); }

  .game_cover::after {
    content: "";
    position: absolute;
    bottom: calc(-0.5rem - 2px);
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-top: 0.5rem solid transparent;
    transition: border-top-color 0.2s; }

  .game_cover.selected::after {
    border-top-color: rgba(215, 206, 199, 0.7); } }
.game_details_container {
  background-size: auto 20rem;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative; }
  .game_details_container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: -1rem;
    left: 0;
    background: linear-gradient(to bottom, rgba(17, 11, 25, 0.75), #110B19 20rem); }

.game_details {
  font-size: 14px;
  position: relative;
  padding: 2rem 1rem 1rem; }
  .game_details .game_title {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 0; }
  .game_details .game_details_content {
    position: relative; }
  .game_details .game_description {
    margin-top: 2rem; }
  .game_details .game_description, .game_details .game_rules {
    margin-bottom: 2rem; }
  .game_details h3.h3 {
    font-size: 1.5rem;
    margin-bottom: 2.5rem; }
  .game_details h3.h3, .game_details h6.h6 {
    color: white; }
  .game_details .game_tags {
    color: #D9B310; }
  .game_details .game_pace, .game_details .game_updated {
    color: #FBD225; }
  .game_details .game_pace_icon svg {
    width: 100%;
    height: auto; }
  .game_details .game_beginner_friendly {
    color: #78c478; }
  .game_details .beginner_friendly_icon svg * {
    fill: #78c478; }
  .game_details p {
    margin-bottom: 0.1rem; }
  .game_details .game_stats {
    margin-bottom: 0.25rem; }
    .game_details .game_stats .game_number {
      opacity: 0.6;
      font-size: 1.1em;
      display: flex;
      align-items: center; }
      .game_details .game_stats .game_number:not(:last-child) {
        margin-bottom: 0.5rem; }
      .game_details .game_stats .game_number .value {
        text-align: left;
        margin-left: 0.5em; }
      .game_details .game_stats .game_number .svg {
        height: 1em;
        width: 1em; }
  .game_details .game_created {
    opacity: 0.5; }
  .game_details .game_action_buttons {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem; }
    .game_details .game_action_buttons .button_base {
      min-width: 10em; }
  .game_details .game_pace_icon, .game_details .beginner_friendly_icon {
    float: left;
    margin-right: 0.5rem;
    display: inline-flex;
    margin-top: 0.25em;
    height: 1em;
    width: 1em; }
  .game_details .player_count {
    font-size: 1.5rem;
    margin-bottom: 1.5rem; }
  .game_details .coin_value_compact {
    font-size: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem; }
  .game_details .tab_game_overview {
    min-height: 80vh; }

.foldout_mobile .game_details_container {
  height: 100%; }

.foldout_mobile .game_details {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth; }

@media (min-width: 600px) {
  .game_details_container::after {
    background: linear-gradient(to bottom, rgba(17, 11, 25, 0.85), #110B19 20rem); }

  .game_details {
    padding: 2rem 2rem 0; }
    .game_details .game_title {
      font-size: 2.4rem;
      margin-bottom: 0.5em; }
    .game_details .player_count {
      text-align: left;
      font-size: 3.1rem; }
    .game_details .game_stats {
      text-align: right; }
    .game_details .game_stats svg {
      height: 1em;
      width: 1em;
      display: inline-flex;
      margin-right: 0.5em; }
    .game_details .game_stats .game_number {
      display: inline-flex;
      margin-top: 1.5em;
      opacity: 0.6;
      font-size: 1.5em; }
      .game_details .game_stats .game_number:not(:last-child) {
        margin-right: 0.25em;
        margin-bottom: 0; }
    .game_details .coin_value_compact {
      margin-top: 1rem; }
    .game_details .game_pace_icon, .game_details .beginner_friendly_icon {
      margin-right: 0;
      margin-left: -1.5rem; }
    .game_details .game_action_buttons {
      margin-top: 1.5rem;
      margin-bottom: 0; }
      .game_details .game_action_buttons .button_base {
        width: 12rem; }
        .game_details .game_action_buttons .button_base + .button_base {
          margin-left: 1rem; }
    .game_details .tab_game_overview {
      min-height: auto; }
      .game_details .tab_game_overview .player_icon, .game_details .tab_game_overview .lock_icon {
        width: 1em;
        height: 1em; }
    .game_details .tab_game_preview {
      overflow-y: auto;
      margin-right: -2rem;
      padding-right: 2rem; }
    .game_details .game_details_footer .select_tab_buttons {
      text-align: center; }
      .game_details .game_details_footer .select_tab_buttons div {
        cursor: pointer;
        user-select: none;
        display: inline-block;
        color: #D7CEC7;
        padding: 0.5rem;
        border-bottom: 0.25rem solid transparent;
        transition: color 0.2s, border-color 0.2s;
        margin-bottom: -1px; }
        .game_details .game_details_footer .select_tab_buttons div.disabled {
          opacity: 0.2;
          cursor: initial;
          pointer-events: none; }
        .game_details .game_details_footer .select_tab_buttons div.active {
          color: #D9B310;
          border-color: #D9B310; } }
.foldout {
  overflow: hidden;
  position: relative;
  transition: height 0.2s, outline-color 0.2s, margin-bottom 0.2s;
  outline: 2px solid transparent;
  margin-bottom: 0; }
  .foldout .foldout_content {
    position: absolute;
    width: 100%;
    height: 100%; }
  .foldout > button {
    color: #D7CEC7;
    position: absolute;
    z-index: 1;
    text-align: right;
    font-size: 2rem;
    text-shadow: 0 2px 2px #3C3C3E;
    right: 0;
    top: 0;
    padding: 1.5rem 2rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer; }
  .foldout .game_cover {
    height: 100%; }
  .foldout.foldout_open {
    outline-color: rgba(215, 206, 199, 0.4);
    margin-bottom: 1rem; }
  .foldout:not(.foldout_open) {
    height: 0 !important; }

.foldout_mobile {
  position: fixed;
  z-index: 100;
  left: 100%;
  top: 0;
  bottom: 0;
  width: 100%;
  transition: left 0.2s;
  overflow: hidden;
  pointer-events: auto;
  background: linear-gradient(to bottom, black, black 0%, #1b1e26 20rem); }
  .foldout_mobile > button {
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    right: 0;
    top: 0;
    padding: 1rem;
    background: transparent;
    border: none;
    cursor: pointer; }
    .foldout_mobile > button > svg, .foldout_mobile > button > span {
      display: block;
      width: 1em;
      height: 1em; }
  .foldout_mobile.foldout_mobile_open {
    left: 0; }

.tutorials_page {
  font-size: 14px;
  padding-top: 5rem; }
  .tutorials_page .sub_heading {
    margin: 3rem 0; }
  .tutorials_page .button_create_tutorial {
    margin-bottom: 3rem; }
  .tutorials_page h2, .tutorials_page h3 {
    color: white; }

.tutorial_game_settings {
  padding-top: 4rem; }
  .tutorial_game_settings .info_block {
    padding: 1rem;
    outline: 1px solid #707070;
    margin-bottom: 3rem; }
    .tutorial_game_settings .info_block p {
      margin-bottom: 0; }
    .tutorial_game_settings .info_block svg {
      display: block;
      position: absolute;
      left: 0.5rem;
      right: 0.5rem;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: auto; }
  .tutorial_game_settings .grouped {
    margin-bottom: 3rem; }

.tutorial_grid .horizontal_list_item_container, .tutorial_list .horizontal_list_item_container {
  height: 60vw; }
.tutorial_grid .game_cover, .tutorial_list .game_cover {
  outline: 2px solid #707070; }
  .tutorial_grid .game_cover.selected::after, .tutorial_list .game_cover.selected::after {
    border-top-color: #707070; }
  .tutorial_grid .game_cover .cover_image, .tutorial_list .game_cover .cover_image {
    background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.07), rgba(102, 0, 255, 0.26)) !important;
    background-size: 100%; }
  .tutorial_grid .game_cover .cover_content .button_more_info, .tutorial_list .game_cover .cover_content .button_more_info {
    bottom: 0; }
  .tutorial_grid .game_cover .game_name, .tutorial_list .game_cover .game_name {
    background: none;
    white-space: normal;
    text-align: center;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%); }
    .tutorial_grid .game_cover .game_name small, .tutorial_list .game_cover .game_name small {
      display: block;
      font-size: 0.8em;
      opacity: 0.7; }
  .tutorial_grid .game_cover .game_body, .tutorial_list .game_cover .game_body {
    position: absolute;
    width: 100%; }
  .tutorial_grid .game_cover .open_button, .tutorial_list .game_cover .open_button {
    bottom: 0.5rem; }
  .tutorial_grid .game_cover .gm_username, .tutorial_list .game_cover .gm_username {
    opacity: 0.7; }
  .tutorial_grid .game_cover .coin_value_compact, .tutorial_list .game_cover .coin_value_compact {
    font-size: 0.75em; }
    .tutorial_grid .game_cover .coin_value_compact .coin, .tutorial_list .game_cover .coin_value_compact .coin {
      width: 1.5rem;
      height: 1.5rem; }

.tutorial_grid {
  margin-bottom: 2rem; }
  .tutorial_grid .game_cover {
    height: 50vw; }

.tutorial_tabs .tab_toggle {
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.5rem;
  margin-right: 1.5rem;
  transition: color 0.2s; }
  .tutorial_tabs .tab_toggle.selected {
    color: #D9B310; }
.tutorial_tabs .button_base {
  min-height: 2.5em; }

.tutorial_search {
  margin-top: 2rem;
  margin-bottom: 1rem; }
  .tutorial_search .search_input {
    padding: 1rem 1rem 0.5rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem; }
  .tutorial_search .collapse_button {
    display: inline-block;
    margin-right: 2rem; }
    .tutorial_search .collapse_button:hover, .tutorial_search .collapse_button.opened {
      color: white; }
    .tutorial_search .collapse_button .title, .tutorial_search .collapse_button .icon {
      display: inline-block; }
    .tutorial_search .collapse_button .icon {
      margin-left: 1rem;
      opacity: 0.6;
      height: 0.8em; }
  .tutorial_search .search_options_buttons {
    margin-top: 1rem;
    margin-bottom: 1rem; }
  .tutorial_search .search_bar {
    border: 1px solid rgba(215, 206, 199, 0.4);
    border-radius: 0.25rem;
    height: 2rem; }
    .tutorial_search .search_bar input {
      background: none;
      height: 2rem;
      margin: 0;
      padding: 0.5rem; }
    .tutorial_search .search_bar .icon {
      height: 1rem;
      margin: 0.5rem; }
  .tutorial_search .tag_picker .option_bar {
    background: none; }
    .tutorial_search .tag_picker .option_bar .option_bar_element {
      padding: 0;
      background: none;
      border: 1px solid rgba(215, 206, 199, 0.4);
      border-radius: 0.25rem;
      height: 2rem; }
      .tutorial_search .tag_picker .option_bar .option_bar_element input {
        background: none;
        height: 2rem;
        margin: 0;
        padding: 0.5rem; }
  .tutorial_search .tag_picker .selected_tag_item {
    background-color: transparent; }
  .tutorial_search .sorting {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; }
    .tutorial_search .sorting input {
      opacity: 0;
      pointer-events: none;
      position: absolute; }
    .tutorial_search .sorting label {
      padding: 0.5em;
      position: relative;
      padding-bottom: 8px;
      text-align: center; }
      .tutorial_search .sorting label.active, .tutorial_search .sorting label.selected {
        color: #D9B310; }
        .tutorial_search .sorting label.active:after, .tutorial_search .sorting label.selected:after {
          opacity: 1;
          width: 60%;
          left: 20%; }
      .tutorial_search .sorting label.disabled {
        opacity: 0.3;
        pointer-events: none; }
      .tutorial_search .sorting label:after {
        position: absolute;
        bottom: 15%;
        display: block;
        content: " ";
        left: 30%;
        width: 40%;
        height: 4px;
        background-color: #D9B310;
        border-radius: 5px;
        opacity: 0;
        transition: all 0.25s; }

@media (min-width: 600px) {
  .tutorial_list .horizontal_list_item_container {
    height: 20rem; }

  .tutorial_tabs .tab_toggle {
    font-size: 1.5rem; }

  .tutorial_grid .game_cover {
    height: 14rem; }

  .tutorials_page .button_create_tutorial {
    margin-bottom: 0; }

  .tutorial_game_settings {
    padding-top: 3rem; }
    .tutorial_game_settings .svg {
      position: static; } }
.coin_value_compact {
  flex-direction: row-reverse;
  display: flex;
  font-size: 0.75rem; }
  .coin_value_compact .coin {
    text-shadow: 0px 0px 2px #3C3C3E;
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: -0.5rem;
    overflow: visible;
    text-align: center; }
    .coin_value_compact .coin span {
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%, -50%); }
    .coin_value_compact .coin img {
      display: inline-block;
      height: 100%;
      width: auto; }

@media (min-width: 600px) {
  .coin_value_compact {
    font-size: 1rem; }
    .coin_value_compact .coin {
      width: 2rem;
      height: 2rem; } }
.player_count {
  color: white; }
  .player_count > * {
    display: inline-block;
    vertical-align: middle; }
  .player_count .player_icon {
    display: inline-flex;
    height: 0.8em;
    margin-left: 0.25em; }
  .player_count .lock_icon {
    height: 0.8em;
    margin-right: 0.25em; }
  .player_count.inverted .player_icon {
    margin-left: 0;
    margin-right: 0.5em; }

.profile_setup {
  text-align: center;
  padding: 0;
  font-size: 0.9em; }
  .profile_setup h3 {
    font-size: 1.3em; }
  .profile_setup .progress_bar {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    height: 1em; }
    .profile_setup .progress_bar .circle {
      height: 1em;
      width: 1.1em;
      border-radius: 5px;
      background-color: rgba(215, 206, 199, 0.2); }
      .profile_setup .progress_bar .circle:not(:last-child) {
        margin-right: 10px; }
    .profile_setup .progress_bar.stage_0 {
      display: none; }
    .profile_setup .progress_bar.stage_0 .circle:nth-child(0) {
      animation: flashProgress 0.25s 0.1s both;
      box-shadow: 0 0 3px 1px rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_1 .circle:nth-child(0) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_1 .circle:nth-child(1) {
      animation: flashProgress 0.25s 0.1s both;
      box-shadow: 0 0 3px 1px rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_2 .circle:nth-child(0) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_2 .circle:nth-child(1) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_2 .circle:nth-child(2) {
      animation: flashProgress 0.25s 0.1s both;
      box-shadow: 0 0 3px 1px rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_3 .circle:nth-child(0) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_3 .circle:nth-child(1) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_3 .circle:nth-child(2) {
      background-color: rgba(217, 179, 16, 0.6); }
    .profile_setup .progress_bar.stage_3 .circle:nth-child(3) {
      animation: flashProgress 0.25s 0.1s both;
      box-shadow: 0 0 3px 1px rgba(217, 179, 16, 0.6); }
  .profile_setup .panel_picture {
    padding: 30px 0 30px 0;
    height: 25vh;
    margin-bottom: 15px; }
    .profile_setup .panel_picture svg {
      height: 100%; }
  .profile_setup .panel_content {
    margin-top: 3em;
    display: flex;
    flex-direction: column; }
  .profile_setup .panel_title {
    color: #D9B310;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
  .profile_setup .buttons_area {
    margin-top: 20px; }
    .profile_setup .buttons_area button {
      display: inline-flex;
      padding: 10px 30px;
      width: 80%; }
  .profile_setup .list {
    padding: 20px 0;
    margin-bottom: 20px;
    background-color: rgba(215, 206, 199, 0.1); }
    .profile_setup .list ul {
      list-style: none;
      padding: 0 20px;
      font-size: 0.9em; }
      .profile_setup .list ul li {
        padding: 10px; }
        .profile_setup .list ul li:not(:last-child) {
          margin-bottom: 10px; }
  .profile_setup .tags_list {
    margin-top: 10px;
    height: 50vh;
    margin-bottom: 2em; }

@keyframes flashProgress {
  from {
    background-color: rgba(215, 206, 199, 0.2); }
  10% {
    background-color: white; }
  to {
    background-color: #D9B310; } }
.account_upgrade .page_content > .container {
  margin-bottom: 70px; }
.account_upgrade .account_status_banner {
  padding: 0.5em;
  border: solid 1px #707070;
  background-color: #252627;
  margin-bottom: 1em;
  text-align: center; }
.account_upgrade .upgrade_options {
  margin-top: 1em; }
.account_upgrade .function_bar {
  margin: 20px 0;
  text-align: center;
  display: flex;
  justify-content: center; }
.account_upgrade .discord_link_button, .account_upgrade .update_payment_info, .account_upgrade .invite_link {
  width: 7em;
  height: 6em; }
.account_upgrade .discord_link_button a, .account_upgrade .update_payment_info a {
  font-size: 0.7em;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  justify-content: center;
  height: 100%; }
  .account_upgrade .discord_link_button a svg, .account_upgrade .update_payment_info a svg {
    height: 3em;
    margin-right: 0; }
.account_upgrade .discord_link_button .discord_user {
  height: 100%;
  font-size: 0.7em;
  display: flex;
  flex-direction: column;
  justify-content: center; }
  .account_upgrade .discord_link_button .discord_user label {
    display: none; }
  .account_upgrade .discord_link_button .discord_user img {
    height: 4em;
    margin-bottom: 1em; }
.account_upgrade .update_payment_info.disabled {
  pointer-events: none;
  opacity: 0.5; }
.account_upgrade .update_payment_info a {
  height: 100%; }
.account_upgrade .invite_link {
  margin-left: 1em;
  margin-right: 1em; }
  .account_upgrade .invite_link button {
    height: 100%;
    width: 100%;
    flex-direction: column-reverse;
    font-size: 0.7em;
    justify-content: center; }
    .account_upgrade .invite_link button .icon {
      height: 3em;
      margin-bottom: 1em; }
    .account_upgrade .invite_link button .button_title {
      flex: initial; }
.account_upgrade .downgrade_modal {
  font-weight: 400; }
  .account_upgrade .downgrade_modal .confirmation_message {
    margin-bottom: 1.5em; }
  .account_upgrade .downgrade_modal .price {
    text-align: center;
    margin-bottom: 2em; }
  .account_upgrade .downgrade_modal .loading_icon {
    text-align: center; }
  .account_upgrade .downgrade_modal .buttons button {
    height: 3em;
    width: 100%; }
    .account_upgrade .downgrade_modal .buttons button:first-child {
      margin-bottom: 1em; }
.account_upgrade .section_title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  margin-bottom: 1.5em; }
.account_upgrade .coupon {
  margin-top: 2em;
  margin-bottom: 2em; }

.account_upgrade_option .price, .downgrade_modal .price {
  color: #D9B310;
  position: relative;
  text-align: right; }
  .account_upgrade_option .price.discounted, .downgrade_modal .price.discounted {
    color: white; }
  .account_upgrade_option .price .symbol, .downgrade_modal .price .symbol {
    font-weight: 400;
    font-size: 0.9em;
    position: relative;
    margin-right: 0.2em;
    vertical-align: top;
    display: inline-block; }
  .account_upgrade_option .price .value, .downgrade_modal .price .value {
    font-weight: 600;
    font-size: 1.2em;
    display: inline-block;
    margin-right: 0.2em; }
  .account_upgrade_option .price .recurrence, .downgrade_modal .price .recurrence {
    font-weight: 400;
    font-size: 0.8em;
    display: inline-block; }
  .account_upgrade_option .price .discount, .downgrade_modal .price .discount {
    font-size: 0.6em;
    color: #D9B310;
    margin-bottom: 1em;
    margin-top: -0.5em; }
  .account_upgrade_option .price .original_price, .downgrade_modal .price .original_price {
    display: inline-block;
    margin-right: 0.5em;
    opacity: 0.6; }
    .account_upgrade_option .price .original_price .value, .account_upgrade_option .price .original_price .symbol, .downgrade_modal .price .original_price .value, .downgrade_modal .price .original_price .symbol {
      font-weight: initial;
      text-decoration: line-through; }

.account_upgrade_option {
  margin-bottom: 2em;
  padding: 0.7em;
  border: solid 1px #707070; }
  .account_upgrade_option.current {
    border: solid 2px #D9B310; }
  .account_upgrade_option .rank_name {
    text-align: center;
    font-size: 1em;
    margin-bottom: 0.5em;
    font-weight: bold; }
  .account_upgrade_option .subscribers {
    font-size: 0.6em;
    opacity: 0.6;
    text-align: center; }
  .account_upgrade_option .content {
    display: flex; }
  .account_upgrade_option .left_pane {
    flex: 0;
    min-width: 6.5em;
    margin-right: 2em;
    text-align: center; }
    .account_upgrade_option .left_pane button {
      font-size: 0.9em;
      min-width: 5em; }
  .account_upgrade_option .right_pane {
    flex: 1; }
    .account_upgrade_option .right_pane ul {
      padding-left: 1em; }
  .account_upgrade_option .illustration {
    margin-bottom: 1.5em; }
    .account_upgrade_option .illustration img {
      height: 6em; }
  .account_upgrade_option .description, .account_upgrade_option .purse_description {
    font-size: 0.9em; }
    .account_upgrade_option .description .no .rank_name, .account_upgrade_option .purse_description .no .rank_name {
      color: #D7CEC7; }
    .account_upgrade_option .description .no .portrait_box svg #shade1 *, .account_upgrade_option .description .no .background_box svg #shade1 *, .account_upgrade_option .purse_description .no .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .no .background_box svg #shade1 * {
      fill: #D7CEC7 !important; }
    .account_upgrade_option .description .no .portrait_box svg #shade2 *, .account_upgrade_option .description .no .background_box svg #shade2 *, .account_upgrade_option .purse_description .no .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .no .background_box svg #shade2 * {
      fill: #c2b4a9 !important; }
    .account_upgrade_option .description .no .portrait_box svg #shade3 *, .account_upgrade_option .description .no .background_box svg #shade3 *, .account_upgrade_option .purse_description .no .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .no .background_box svg #shade3 * {
      fill: #ad9a8c !important; }
    .account_upgrade_option .description .no .portrait_box svg #shade4 *, .account_upgrade_option .description .no .background_box svg #shade4 *, .account_upgrade_option .purse_description .no .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .no .background_box svg #shade4 * {
      fill: #a28d7d !important; }
    .account_upgrade_option .description .co .rank_name, .account_upgrade_option .purse_description .co .rank_name {
      color: #f19d40; }
    .account_upgrade_option .description .co .portrait_box svg #shade1 *, .account_upgrade_option .description .co .background_box svg #shade1 *, .account_upgrade_option .purse_description .co .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .co .background_box svg #shade1 * {
      fill: #f19d40 !important; }
    .account_upgrade_option .description .co .portrait_box svg #shade2 *, .account_upgrade_option .description .co .background_box svg #shade2 *, .account_upgrade_option .purse_description .co .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .co .background_box svg #shade2 * {
      fill: #ed8511 !important; }
    .account_upgrade_option .description .co .portrait_box svg #shade3 *, .account_upgrade_option .description .co .background_box svg #shade3 *, .account_upgrade_option .purse_description .co .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .co .background_box svg #shade3 * {
      fill: #bd6a0e !important; }
    .account_upgrade_option .description .co .portrait_box svg #shade4 *, .account_upgrade_option .description .co .background_box svg #shade4 *, .account_upgrade_option .purse_description .co .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .co .background_box svg #shade4 * {
      fill: #a55d0c !important; }
    .account_upgrade_option .description .si .rank_name, .account_upgrade_option .purse_description .si .rank_name {
      color: #A4C9DF; }
    .account_upgrade_option .description .si .portrait_box svg #shade1 *, .account_upgrade_option .description .si .background_box svg #shade1 *, .account_upgrade_option .purse_description .si .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .si .background_box svg #shade1 * {
      fill: #A4C9DF !important; }
    .account_upgrade_option .description .si .portrait_box svg #shade2 *, .account_upgrade_option .description .si .background_box svg #shade2 *, .account_upgrade_option .purse_description .si .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .si .background_box svg #shade2 * {
      fill: #7eb3d2 !important; }
    .account_upgrade_option .description .si .portrait_box svg #shade3 *, .account_upgrade_option .description .si .background_box svg #shade3 *, .account_upgrade_option .purse_description .si .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .si .background_box svg #shade3 * {
      fill: #599cc4 !important; }
    .account_upgrade_option .description .si .portrait_box svg #shade4 *, .account_upgrade_option .description .si .background_box svg #shade4 *, .account_upgrade_option .purse_description .si .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .si .background_box svg #shade4 * {
      fill: #4691be !important; }
    .account_upgrade_option .description .go .rank_name, .account_upgrade_option .purse_description .go .rank_name {
      color: #D9B310; }
    .account_upgrade_option .description .go .portrait_box svg #shade1 *, .account_upgrade_option .description .go .background_box svg #shade1 *, .account_upgrade_option .purse_description .go .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .go .background_box svg #shade1 * {
      fill: #D9B310 !important; }
    .account_upgrade_option .description .go .portrait_box svg #shade2 *, .account_upgrade_option .description .go .background_box svg #shade2 *, .account_upgrade_option .purse_description .go .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .go .background_box svg #shade2 * {
      fill: #aa8c0c !important; }
    .account_upgrade_option .description .go .portrait_box svg #shade3 *, .account_upgrade_option .description .go .background_box svg #shade3 *, .account_upgrade_option .purse_description .go .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .go .background_box svg #shade3 * {
      fill: #7a6509 !important; }
    .account_upgrade_option .description .go .portrait_box svg #shade4 *, .account_upgrade_option .description .go .background_box svg #shade4 *, .account_upgrade_option .purse_description .go .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .go .background_box svg #shade4 * {
      fill: #625107 !important; }
    .account_upgrade_option .description .pl .rank_name, .account_upgrade_option .purse_description .pl .rank_name {
      color: #dcf6f7; }
    .account_upgrade_option .description .pl .portrait_box svg #shade1 *, .account_upgrade_option .description .pl .background_box svg #shade1 *, .account_upgrade_option .purse_description .pl .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .pl .background_box svg #shade1 * {
      fill: white !important; }
    .account_upgrade_option .description .pl .portrait_box svg #shade2 *, .account_upgrade_option .description .pl .background_box svg #shade2 *, .account_upgrade_option .purse_description .pl .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .pl .background_box svg #shade2 * {
      fill: #e6e6e6 !important; }
    .account_upgrade_option .description .pl .portrait_box svg #shade3 *, .account_upgrade_option .description .pl .background_box svg #shade3 *, .account_upgrade_option .purse_description .pl .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .pl .background_box svg #shade3 * {
      fill: #cccccc !important; }
    .account_upgrade_option .description .pl .portrait_box svg #shade4 *, .account_upgrade_option .description .pl .background_box svg #shade4 *, .account_upgrade_option .purse_description .pl .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .pl .background_box svg #shade4 * {
      fill: #bfbfbf !important; }
    .account_upgrade_option .description .le .rank_name, .account_upgrade_option .purse_description .le .rank_name {
      color: #a962f5; }
    .account_upgrade_option .description .le .portrait_box svg #shade1 *, .account_upgrade_option .description .le .background_box svg #shade1 *, .account_upgrade_option .purse_description .le .portrait_box svg #shade1 *, .account_upgrade_option .purse_description .le .background_box svg #shade1 * {
      fill: #a962f5 !important; }
    .account_upgrade_option .description .le .portrait_box svg #shade2 *, .account_upgrade_option .description .le .background_box svg #shade2 *, .account_upgrade_option .purse_description .le .portrait_box svg #shade2 *, .account_upgrade_option .purse_description .le .background_box svg #shade2 * {
      fill: #8f32f2 !important; }
    .account_upgrade_option .description .le .portrait_box svg #shade3 *, .account_upgrade_option .description .le .background_box svg #shade3 *, .account_upgrade_option .purse_description .le .portrait_box svg #shade3 *, .account_upgrade_option .purse_description .le .background_box svg #shade3 * {
      fill: #750ee3 !important; }
    .account_upgrade_option .description .le .portrait_box svg #shade4 *, .account_upgrade_option .description .le .background_box svg #shade4 *, .account_upgrade_option .purse_description .le .portrait_box svg #shade4 *, .account_upgrade_option .purse_description .le .background_box svg #shade4 * {
      fill: #690dcb !important; }
    .account_upgrade_option .description .less, .account_upgrade_option .purse_description .less {
      opacity: 0.5; }
  .account_upgrade_option .explanation {
    padding-left: 1.1em;
    padding-right: 2em;
    opacity: 0.6;
    font-size: 0.7em; }
  .account_upgrade_option .purse_description .title {
    cursor: pointer;
    padding-left: 1em;
    border-bottom: solid 1px #707070;
    margin-bottom: 0.5em; }
    .account_upgrade_option .purse_description .title svg, .account_upgrade_option .purse_description .title img {
      margin-right: 0.8em;
      height: 1.15em; }
      .account_upgrade_option .purse_description .title svg *, .account_upgrade_option .purse_description .title img * {
        fill: #FF9900; }
  .account_upgrade_option .purse_description .purse_explanation_button {
    margin-left: 0.5em;
    font-size: 0.9em;
    opacity: 0.6; }
    .account_upgrade_option .purse_description .purse_explanation_button:hover {
      opacity: 1; }
  .account_upgrade_option .purse_description .nota_bene {
    padding-left: 6em;
    padding-right: 0; }
  .account_upgrade_option .coins_list {
    padding-left: 0.8em; }
    .account_upgrade_option .coins_list .coin_item .coin_item {
      display: flex; }
    .account_upgrade_option .coins_list .coin_item img {
      height: 1.25em;
      margin-right: 0.5em; }
  .account_upgrade_option.rank_0 {
    background: linear-gradient(to right, rgba(215, 206, 199, 0.37), transparent); }
  .account_upgrade_option.rank_1 {
    background: linear-gradient(to right, rgba(241, 157, 64, 0.37), transparent); }
  .account_upgrade_option.rank_2 {
    background: linear-gradient(to right, rgba(164, 201, 223, 0.37), transparent); }
  .account_upgrade_option.rank_3 {
    background: linear-gradient(to right, rgba(217, 179, 16, 0.37), transparent); }
  .account_upgrade_option.rank_4 {
    background: linear-gradient(to right, rgba(220, 246, 247, 0.37), transparent); }
  .account_upgrade_option.rank_5 {
    background: linear-gradient(to right, rgba(169, 98, 245, 0.37), transparent); }
  .account_upgrade_option .highlighted {
    color: #D9B310; }

#invite_box {
  font-size: 0.8em; }
  #invite_box .link {
    overflow: hidden;
    text-align: center;
    margin: 5px 0; }
    #invite_box .link a {
      font-weight: 400;
      font-size: 1.1em; }
  #invite_box label {
    opacity: 0.8; }
  #invite_box .counter {
    margin: 5px 0 5px 5px; }
    #invite_box .counter .count {
      font-weight: bold; }
  #invite_box .reward_buttons {
    margin-top: 15px; }
    #invite_box .reward_buttons .redeem_button {
      width: 100%;
      margin-bottom: 5px; }
  #invite_box .more_info_title {
    text-align: right;
    font-weight: 400;
    cursor: pointer;
    margin: 10px 0; }
  #invite_box #reward_info {
    padding-top: 10px; }
    #invite_box #reward_info li {
      line-height: 1.2em;
      margin-bottom: 10px;
      list-style: square; }
  #invite_box .warning {
    color: indianred;
    font-weight: 400; }

.option_bar {
  background-color: rgba(32, 32, 32, 0.5);
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  position: relative; }
  .option_bar a {
    text-decoration: none; }
  .option_bar .bar_content {
    display: inline-flex; }
  .option_bar.disabled {
    pointer-events: none;
    opacity: 0.5; }
  .option_bar .extended_content {
    font-size: 0.8em;
    padding: 11px;
    white-space: pre-line; }
    .option_bar .extended_content textarea {
      color: #C8C8C8;
      background-color: transparent;
      width: 100%;
      font-size: 0.9em;
      padding: 0; }
  .option_bar label.hint {
    display: block;
    text-align: right;
    font-size: 0.7em;
    opacity: 0.5;
    position: absolute;
    bottom: -0.8em;
    transform: translateY(100%);
    margin-bottom: 0;
    right: 0; }
  .option_bar .option_bar_element {
    padding: 0.3em;
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden; }
    .option_bar .option_bar_element:not(.no_separator):not(:last-child):before {
      content: "";
      display: block;
      height: 50%;
      width: 2px;
      background-color: #707070;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      z-index: 1; }
    .option_bar .option_bar_element.clickable:hover {
      cursor: pointer; }
  .option_bar .option_bar_input {
    flex: 1; }
    .option_bar .option_bar_input input {
      color: #C8C8C8;
      background-color: transparent;
      width: 100%; }
  .option_bar .option_bar_radio_group {
    position: relative;
    width: 100%; }
    .option_bar .option_bar_radio_group > div {
      width: 100%; }
    .option_bar .option_bar_radio_group input {
      opacity: 0;
      pointer-events: none;
      position: absolute; }
    .option_bar .option_bar_radio_group label {
      line-height: 3.5rem;
      text-align: center;
      margin-bottom: 0; }
      .option_bar .option_bar_radio_group label.selected {
        color: #D9B310; }
  .option_bar .option_bar_icon, .option_bar .option_bar_avatar, .option_bar .option_bar_vote {
    overflow: initial;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-align: center;
    justify-content: center;
    background-color: #2D2F30;
    padding: 0.7em 0.3em; }
  .option_bar .option_bar_icon {
    width: 50px; }
    .option_bar .option_bar_icon svg, .option_bar .option_bar_icon img {
      height: 1em; }
      .option_bar .option_bar_icon svg *, .option_bar .option_bar_icon img * {
        fill: #707070 !important; }
    .option_bar .option_bar_icon.is_text {
      font-size: 1em;
      color: #707070; }
  .option_bar .option_bar_avatar {
    padding: 0 0.2em; }
    .option_bar .option_bar_avatar .portrait {
      width: 40px;
      height: 40px; }
  .option_bar .option_bar_token {
    flex: 0 1 auto;
    width: 50px;
    padding: 0 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(32, 32, 32, 0.5); }
    .option_bar .option_bar_token .character_token {
      height: 30px;
      width: 30px;
      background-color: transparent; }
  .option_bar .option_bar_label, .option_bar .option_bar_level {
    display: inline-flex;
    flex-direction: column;
    padding-left: 1em;
    padding-right: 1em;
    color: #C8C8C8;
    background-color: #202020;
    justify-content: center; }
    .option_bar .option_bar_label.has_sub, .option_bar .option_bar_level.has_sub {
      font-size: 0.8em; }
    .option_bar .option_bar_label .sub_label, .option_bar .option_bar_level .sub_label {
      font-size: 0.8em;
      opacity: 0.6;
      margin-top: -0.2em; }
    .option_bar .option_bar_label .highlighted, .option_bar .option_bar_level .highlighted {
      color: #D9B310; }
    .option_bar .option_bar_label.one_liner .main_label, .option_bar .option_bar_label.one_liner .sub_label, .option_bar .option_bar_level.one_liner .main_label, .option_bar .option_bar_level.one_liner .sub_label {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap; }
  .option_bar .option_bar_choice {
    position: relative;
    padding-bottom: 8px;
    text-align: center;
    cursor: pointer;
    background-color: #202020;
    justify-content: center;
    align-items: center;
    height: 2.7em; }
    .option_bar .option_bar_choice.active, .option_bar .option_bar_choice.selected {
      color: #D9B310; }
      .option_bar .option_bar_choice.active:after, .option_bar .option_bar_choice.selected:after {
        opacity: 1;
        width: 60%;
        left: 20%; }
    .option_bar .option_bar_choice.disabled {
      opacity: 0.3;
      pointer-events: none; }
    .option_bar .option_bar_choice:after {
      position: absolute;
      bottom: 15%;
      display: block;
      content: " ";
      left: 30%;
      width: 40%;
      height: 4px;
      background-color: #D9B310;
      border-radius: 5px;
      opacity: 0;
      transition: all 0.25s; }
    .option_bar .option_bar_choice:hover {
      color: white; }
  .option_bar .option_bar_checkbox {
    align-items: center;
    justify-content: flex-end;
    flex: 0 0.5 auto;
    background-color: #202020;
    padding-right: 1.5em; }
    .option_bar .option_bar_checkbox .switch_box {
      display: flex;
      align-items: center; }
      .option_bar .option_bar_checkbox .switch_box label.switch {
        height: 1.8em;
        width: 3em; }
      .option_bar .option_bar_checkbox .switch_box .slider:before {
        height: calc(100% - 4px);
        width: 40%; }
    .option_bar .option_bar_checkbox input:checked + .slider:before {
      transform: translateX(calc(3em - 100% - 6px)); }
  .option_bar .option_bar_vote {
    text-align: center;
    flex-direction: column;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    min-width: 2em; }
    .option_bar .option_bar_vote.voted {
      color: #D9B310; }
      .option_bar .option_bar_vote.voted .vote_button {
        cursor: pointer; }
        .option_bar .option_bar_vote.voted .vote_button svg * {
          fill: #D9B310; }
    .option_bar .option_bar_vote .vote_count {
      flex: 1; }
  .option_bar .option_bar_level {
    flex-direction: row;
    align-items: center; }
    .option_bar .option_bar_level .labels {
      flex: 1; }
    .option_bar .option_bar_level .level_bar {
      display: flex;
      flex: 0; }
      .option_bar .option_bar_level .level_bar .level {
        cursor: pointer;
        height: 30px;
        width: 20px;
        background-color: #707070;
        border-radius: 5px;
        transition: background-color 0.25s; }
        .option_bar .option_bar_level .level_bar .level:hover {
          background-color: #757575; }
        .option_bar .option_bar_level .level_bar .level:not(:last-child) {
          margin-right: 5px; }
        .option_bar .option_bar_level .level_bar .level.selected {
          animation: flash 0.25s both;
          background-color: #D9B310; }
    .option_bar .option_bar_level.no_edit .level_bar .level {
      cursor: initial; }
  .option_bar.selected .option_bar_element:not(:last-child):before {
    transition: all 0.4s;
    animation: selection_bounce 0.25s forwards;
    background-color: #D9B310; }

.background_dark .option_bar .option_bar_input {
  background-color: #3b4045; }

.App.keyboard_opened .option_bar.hide_non_focused_when_keyboard {
  margin: 0; }
  .App.keyboard_opened .option_bar.hide_non_focused_when_keyboard .option_bar_element:not(.focused), .App.keyboard_opened .option_bar.hide_non_focused_when_keyboard .hint {
    display: none !important; }

.chat_menu button.chat_option {
  font-size: 0.6em;
  display: inline-block;
  min-width: 4em; }
  .chat_menu button.chat_option.transparent.enabled {
    background-color: rgba(215, 206, 199, 0.6);
    border-color: transparent; }
  .chat_menu button.chat_option.transparent.selected {
    background-color: #D7CEC7;
    border-color: #D7CEC7; }
  .chat_menu button.chat_option.transparent.selected, .chat_menu button.chat_option.transparent.enabled {
    color: #1b1e26; }
  .chat_menu button.chat_option:not(:last-child) {
    margin-right: 0.2em; }
  .chat_menu button.chat_option .badge {
    font-size: 0.9em; }

.screen_menu, .item_menu {
  min-width: 40px; }
  .screen_menu hr, .item_menu hr {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; }
  .screen_menu > button.icon_only, .item_menu > button.icon_only {
    border: none;
    min-height: initial;
    height: initial;
    width: 100%; }
    .screen_menu > button.icon_only .icon, .item_menu > button.icon_only .icon {
      transform: rotate(-90deg);
      margin-right: 0; }

.item_menu {
  display: flex;
  align-items: center;
  justify-content: center; }
  .item_menu button.icon_only.open_button {
    font-size: 0.8em;
    height: 30px;
    width: 30px;
    border: none; }
  .item_menu .popover_custom {
    padding: 0; }

.game_browsers {
  flex-direction: column;
  min-height: 100vh; }
  .game_browsers .upper_tabs {
    flex: 0 0 auto; }

.game_browsers .foldout_game_list, .join_game_screen .foldout_game_list {
  margin-bottom: 1em; }
  .game_browsers .foldout_game_list .horizontal_list_item_container, .join_game_screen .foldout_game_list .horizontal_list_item_container {
    display: flex;
    justify-content: center;
    overflow: hidden; }
  .game_browsers .foldout_game_list .horizontal_list_item, .join_game_screen .foldout_game_list .horizontal_list_item {
    width: 50%; }
    @media (min-width: 768px) {
      .game_browsers .foldout_game_list .horizontal_list_item, .join_game_screen .foldout_game_list .horizontal_list_item {
        width: 50%; } }
    @media (min-width: 992px) {
      .game_browsers .foldout_game_list .horizontal_list_item, .join_game_screen .foldout_game_list .horizontal_list_item {
        width: 33%; } }
    @media (min-width: 1200px) {
      .game_browsers .foldout_game_list .horizontal_list_item, .join_game_screen .foldout_game_list .horizontal_list_item {
        width: 25%; } }

.foldout_game_list.small .horizontal_list_item_container {
  height: 19rem; }

.about .page_content {
  padding-top: 1em; }
.about a {
  display: block;
  color: #D7CEC7; }
.about hr {
  margin-bottom: 2em; }
.about .section_title {
  opacity: 0.6;
  margin-bottom: 1.5em; }
.about .navigation_button {
  margin-bottom: 0.5em; }
  .about .navigation_button a {
    color: #D9B310;
    display: block;
    background-color: rgba(32, 32, 32, 0.3);
    padding: 1em;
    width: 100%; }

.coin_notifier_menu .rank_0 .name, .selectRewardMenu .rank_0 .name, .user_notification .rank_0 .name, .transaction_item .rank_0 .name {
  color: #D7CEC7; }
.coin_notifier_menu .rank_1 .name, .selectRewardMenu .rank_1 .name, .user_notification .rank_1 .name, .transaction_item .rank_1 .name {
  color: #f19d40; }
.coin_notifier_menu .rank_2 .name, .selectRewardMenu .rank_2 .name, .user_notification .rank_2 .name, .transaction_item .rank_2 .name {
  color: #A4C9DF; }
.coin_notifier_menu .rank_3 .name, .selectRewardMenu .rank_3 .name, .user_notification .rank_3 .name, .transaction_item .rank_3 .name {
  color: #D9B310; }
.coin_notifier_menu .rank_4 .name, .selectRewardMenu .rank_4 .name, .user_notification .rank_4 .name, .transaction_item .rank_4 .name {
  color: #dcf6f7; }
.coin_notifier_menu .rank_5 .name, .selectRewardMenu .rank_5 .name, .user_notification .rank_5 .name, .transaction_item .rank_5 .name {
  color: #a962f5; }

.selectRewardMenu .coins_list {
  display: flex;
  justify-content: center; }
  .selectRewardMenu .coins_list .coin {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    flex: 1;
    font-size: 0.8em; }
    .selectRewardMenu .coins_list .coin .icon {
      height: 4em; }
      .selectRewardMenu .coins_list .coin .icon img {
        height: 100%;
        width: auto; }
    .selectRewardMenu .coins_list .coin.disabled {
      opacity: 0.3;
      cursor: initial; }
    .selectRewardMenu .coins_list .coin:not(.disabled):hover {
      background-color: #2D2F30; }
    .selectRewardMenu .coins_list .coin .amount {
      font-size: 0.8em;
      opacity: 0.6; }

.coin_notifier_menu .purse_explanation_button {
  margin-left: 0.5em;
  font-size: 0.9em;
  opacity: 0.6; }
  .coin_notifier_menu .purse_explanation_button:hover {
    opacity: 1; }
.coin_notifier_menu #coin_notifier_button {
  border: none;
  width: initial;
  height: initial;
  min-height: initial; }
  .coin_notifier_menu #coin_notifier_button > .icon {
    height: 1.2em; }
    .coin_notifier_menu #coin_notifier_button > .icon img {
      height: 100%;
      width: auto; }
  .coin_notifier_menu #coin_notifier_button .badge {
    right: 0.5em; }

#coin_notifier_popover {
  width: 21em;
  max-width: 80vw; }
  #coin_notifier_popover .popover_custom_content {
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  #coin_notifier_popover label {
    margin-bottom: 0; }
  #coin_notifier_popover .trove {
    border-radius: 5px;
    display: flex;
    flex: 0 0 auto;
    cursor: pointer; }
    #coin_notifier_popover .trove label {
      display: block;
      margin-left: 0;
      margin-bottom: 0; }
    #coin_notifier_popover .trove .purse, #coin_notifier_popover .trove .chest {
      flex: 1;
      display: flex;
      flex-direction: column; }
    #coin_notifier_popover .trove .purse label {
      text-align: left; }
    #coin_notifier_popover .trove .purse .coin_list_container {
      position: relative;
      border-radius: 5px;
      background: linear-gradient(to right, rgba(215, 206, 199, 0.2), transparent 50%, transparent); }
      #coin_notifier_popover .trove .purse .coin_list_container:before {
        content: " ";
        position: absolute;
        opacity: 0.2;
        background: url("../../images/accounts/purse.svg") no-repeat;
        height: 80%;
        width: 100%;
        background-position: center;
        top: 0.5em; }
    #coin_notifier_popover .trove .chest {
      margin-left: 1em; }
      #coin_notifier_popover .trove .chest label {
        text-align: right; }
      #coin_notifier_popover .trove .chest .coin_list_container {
        position: relative;
        border-radius: 5px;
        background: linear-gradient(to left, rgba(215, 206, 199, 0.2), transparent 50%, transparent); }
        #coin_notifier_popover .trove .chest .coin_list_container:before {
          content: " ";
          position: absolute;
          opacity: 0.2;
          background: url("../../images/accounts/chest.svg") no-repeat;
          height: 80%;
          width: 100%;
          background-position: center;
          top: 0.5em; }
    #coin_notifier_popover .trove .coin_list_container {
      height: 5em;
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%; }
    #coin_notifier_popover .trove .coins_list {
      width: 6em;
      margin: auto;
      text-align: center; }
      #coin_notifier_popover .trove .coins_list img {
        height: 2.5em; }
      #coin_notifier_popover .trove .coins_list .coin {
        display: inline-block;
        margin: -0.4em; }
        #coin_notifier_popover .trove .coins_list .coin .icon {
          position: relative; }
        #coin_notifier_popover .trove .coins_list .coin .amount {
          position: absolute;
          top: 50%;
          left: 50%;
          text-align: center;
          transform: translate(-50%, -50%);
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
          font-weight: bold; }
  #coin_notifier_popover .notifications {
    margin-top: 1em;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; }

@keyframes new_notification {
  from {
    background-color: #3C3C3E; }
  50% {
    background-color: rgba(255, 255, 255, 0.2); }
  to {
    background-color: #3C3C3E; } }
.user_notification {
  margin-bottom: 0.5em; }
  .user_notification .timestamp {
    opacity: 0.4;
    font-size: 0.6em;
    text-align: right;
    margin-bottom: 0.3em; }
  .user_notification .content {
    padding: 0.5em;
    background-color: transparent;
    border-radius: 5px; }
  .user_notification .username {
    display: inline;
    font-weight: bold; }
  .user_notification .coin {
    display: inline-flex;
    align-items: baseline; }
    .user_notification .coin .icon {
      position: relative;
      top: 0.15em;
      display: flex;
      margin-right: 0.3em; }
      .user_notification .coin .icon img {
        height: 1em; }
  .user_notification .preview {
    display: inline;
    opacity: 0.6; }
  .user_notification.coin_3 .content {
    border: solid 1px #D9B310; }
  .user_notification.coin_4 .content {
    border: solid 1px #dcf6f7; }
  .user_notification.coin_5 .content {
    border: solid 1px #a962f5; }
  .user_notification.new .content {
    animation: new_notification 1.5s;
    background-color: #3C3C3E; }

.current_value {
  display: flex;
  font-size: 0.8em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  justify-content: flex-end;
  cursor: pointer; }
  .current_value .value {
    margin-right: 0.1em;
    background-color: #3C3C3E;
    border-radius: 0.4em;
    padding-left: 0.3em;
    padding-right: 0.3em;
    display: flex;
    align-items: center; }
    .current_value .value img {
      height: 1em;
      width: auto;
      display: inline-block;
      margin-left: 0.1em; }

.transaction_item {
  display: flex;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-bottom: 4px;
  background-color: #2D2F30;
  border-radius: 5px;
  box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.3); }
  .transaction_item .sender {
    flex: 1;
    display: flex;
    align-items: center; }
  .transaction_item .coin {
    display: flex;
    align-items: center;
    margin-right: 0.5em; }
    .transaction_item .coin .amount {
      font-size: 0.9em;
      margin-right: 0.3em; }
    .transaction_item .coin .name {
      font-size: 0.9em;
      margin-right: 0.5em; }
    .transaction_item .coin .icon {
      flex: 0 0 auto;
      display: flex; }
      .transaction_item .coin .icon img {
        height: 2em; }

.coin_history_modal .modal_custom.coin_history_modal .body {
  padding: 0; }
.coin_history_modal #history_scroll_list {
  padding-bottom: 2em;
  flex: 1; }
.coin_history_modal .footer_info {
  display: flex;
  flex: 0 0 auto; }
  .coin_history_modal .footer_info button {
    flex: 0; }
.coin_history_modal .current_value .value {
  background-color: transparent; }

.coins_tutorial h5 {
  font-size: 1em;
  color: white;
  margin-bottom: 1em; }
.coins_tutorial .image_container {
  display: block;
  text-align: center;
  margin-bottom: 1em;
  margin-top: 1em; }
  .coins_tutorial .image_container img {
    max-width: 100%; }
  .coins_tutorial .image_container .picture_label {
    margin-top: 0.5em;
    font-size: 0.6em;
    display: block;
    text-align: center;
    margin-bottom: 0; }

.App.under_maintenance {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: white;
  height: 100vh; }
  .App.under_maintenance .half {
    flex: 0.5; }
  .App.under_maintenance .block {
    display: flex;
    flex-direction: column;
    flex: 1; }
    .App.under_maintenance .block .big {
      font-size: 1.6em; }
    .App.under_maintenance .block .small {
      font-size: 1.1em; }
  .App.under_maintenance .app_logo {
    height: 9rem;
    margin-bottom: 0.5em; }
    .App.under_maintenance .app_logo svg {
      height: 100%;
      width: auto;
      max-width: 100%; }
  .App.under_maintenance .message {
    flex: 1; }
    .App.under_maintenance .message .big {
      font-size: 1.4em; }
    .App.under_maintenance .message .small {
      opacity: 0.4;
      font-size: 0.6em; }

.youtube_video {
  background-color: rgba(36, 36, 36, 0.9);
  position: relative; }
  .youtube_video .video_card {
    height: 100%;
    padding: 1em 35px;
    animation: fade_in 0.5s;
    position: relative;
    font-size: 0.8em; }
  .youtube_video .left_pane {
    display: flex;
    flex-direction: column;
    overflow: hidden; }
  .youtube_video .video_info {
    flex: 0 0 auto;
    color: white;
    text-align: left;
    margin-bottom: 3em; }
    .youtube_video .video_info .video_title {
      font-size: 1.2em;
      animation: fade_in 0.5s;
      margin-bottom: 0.5em; }
    .youtube_video .video_info .loading_icon {
      height: 1em; }
  .youtube_video .sub_info {
    font-size: 0.8em; }
  .youtube_video .author {
    opacity: 0.8;
    margin-right: 1em; }
    .youtube_video .author .by {
      opacity: 0.6; }
  .youtube_video .beginner_badge {
    display: inline-block; }
  .youtube_video .content {
    display: flex;
    margin-right: 0.5em; }
    .youtube_video .content .summary {
      flex: 1; }
  .youtube_video .thumbnail {
    flex: 1.5; }
    .youtube_video .thumbnail img {
      width: 100%; }
  .youtube_video .video_viewer {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: opacity 2s; }
    .youtube_video .video_viewer.hidden {
      display: none;
      opacity: 0; }

.headline {
  padding: 1em 35px;
  background-color: rgba(36, 36, 36, 0.9);
  height: 100%;
  text-align: center; }
  .headline .headline_title {
    display: block;
    font-size: 1em;
    color: white; }
  .headline .content {
    display: flex;
    flex-direction: column; }
  .headline .left_pane img {
    width: 80%;
    margin: 20px 0; }
  .headline .right_pane {
    flex: 1; }
    .headline .right_pane .button_link {
      width: 17em; }
  .headline .avatars_listing {
    text-align: center;
    margin: 1em 2em;
    padding: 2em 0;
    border: solid 1px #707070;
    border-radius: 4px;
    box-shadow: black 2px 2px 5px 0px; }
    .headline .avatars_listing .portrait {
      display: inline-block;
      height: 70px;
      width: 70px; }

#headline_modal b {
  font-weight: initial;
  color: white; }
#headline_modal li {
  color: white; }
  #headline_modal li p {
    color: #D7CEC7; }
#headline_modal h4 {
  color: #D9B310;
  font-size: 1.1em; }
#headline_modal img {
  max-width: 100%;
  margin-bottom: 30px; }

.headline.christmas img {
  width: 100%; }
.headline.christmas button.button_base {
  margin-top: 10px; }

#stage_portal {
  flex: 1;
  display: flex;
  flex-direction: column; }
  #stage_portal .speech_feedback, #stage_portal .action_feedback {
    top: 0;
    height: 5px;
    z-index: 1; }
  #stage_portal .speech_feedback {
    position: absolute;
    background-color: white;
    left: 0;
    right: 0;
    border: solid 2px transparent;
    border-radius: 0 0 5px 5px;
    border-top: none; }
    #stage_portal .speech_feedback.description {
      background-color: #40464B; }
      #stage_portal .speech_feedback.description .chat_arrow {
        display: none; }
    #stage_portal .speech_feedback.fake {
      opacity: 0.2; }
    #stage_portal .speech_feedback.whispered {
      background-color: transparent;
      border-color: #707070; }
    #stage_portal .speech_feedback.background {
      opacity: 0.5; }
    #stage_portal .speech_feedback.intro_playing {
      z-index: 1000; }
      #stage_portal .speech_feedback.intro_playing .chat_arrow {
        animation: fade_in 2s 3s backwards; }
  #stage_portal .action_feedback {
    position: absolute;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgba(50, 140, 193, 0.2), transparent 65%); }
    #stage_portal .action_feedback.color_1 {
      background: linear-gradient(to right, rgba(215, 206, 199, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_2 {
      background: linear-gradient(to right, rgba(165, 165, 176, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_3 {
      background: linear-gradient(to right, rgba(164, 201, 223, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_4 {
      background: linear-gradient(to right, rgba(50, 140, 193, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_5 {
      background: linear-gradient(to right, rgba(118, 124, 203, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_6 {
      background: linear-gradient(to right, rgba(95, 158, 160, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_7 {
      background: linear-gradient(to right, rgba(120, 196, 120, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_8 {
      background: linear-gradient(to right, rgba(205, 192, 156, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_9 {
      background: linear-gradient(to right, rgba(217, 179, 16, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_10 {
      background: linear-gradient(to right, rgba(195, 140, 174, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_11 {
      background: linear-gradient(to right, rgba(205, 92, 92, 0.3), transparent 65%), #1b1e26; }
    #stage_portal .action_feedback.color_12 {
      background: linear-gradient(to right, rgba(205, 143, 92, 0.3), transparent 65%), #1b1e26; }
  #stage_portal .user_tagged:not(.user_line) .speech_feedback, #stage_portal .user_tagged:not(.user_line) .action_feedback {
    left: 7px;
    right: 7px; }
  #stage_portal .user_tagged.user_line .speech_feedback, #stage_portal .user_tagged.user_line .action_feedback {
    left: 7px;
    right: 7px; }

.stage_background {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  height: 100%;
  max-height: 240px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer; }
  .stage_background img {
    position: absolute;
    top: 0;
    opacity: 0.6;
    min-height: 100%;
    mask-image: linear-gradient(to bottom, #000, #000 180px, rgba(0, 0, 0, 0.2) 220px, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000, #000 180px, rgba(0, 0, 0, 0.2) 220px, transparent); }

#stage_portal .story_stage.angry .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
#stage_portal .story_stage.angry .tone {
  color: indianred; }
#stage_portal .story_stage.annoyed .tone_border {
  border-color: #905757;
  border-left-width: 3px; }
#stage_portal .story_stage.annoyed .tone {
  color: #905757; }
#stage_portal .story_stage.anxious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
#stage_portal .story_stage.anxious .tone {
  color: #5F9EA0; }
#stage_portal .story_stage.affectionate .tone_border {
  border-color: #f796c6;
  border-left-width: 3px; }
#stage_portal .story_stage.affectionate .tone {
  color: #f796c6; }
#stage_portal .story_stage.alarmed .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
#stage_portal .story_stage.alarmed .tone {
  color: #D9B310; }
#stage_portal .story_stage.amused .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
#stage_portal .story_stage.amused .tone {
  color: lightskyblue; }
#stage_portal .story_stage.brooding .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
#stage_portal .story_stage.brooding .tone {
  color: #D7CEC7; }
#stage_portal .story_stage.cheerful .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
#stage_portal .story_stage.cheerful .tone {
  color: #328CC1; }
#stage_portal .story_stage.confident .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
#stage_portal .story_stage.confident .tone {
  color: #8a80cb; }
#stage_portal .story_stage.confused .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
#stage_portal .story_stage.confused .tone {
  color: #A5A5B0; }
#stage_portal .story_stage.curious .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
#stage_portal .story_stage.curious .tone {
  color: #5F9EA0; }
#stage_portal .story_stage.disappointed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
#stage_portal .story_stage.disappointed .tone {
  color: cadetblue; }
#stage_portal .story_stage.disgusted .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
#stage_portal .story_stage.disgusted .tone {
  color: darkseagreen; }
#stage_portal .story_stage.desperate .tone_border {
  border-color: #C4751E;
  border-left-width: 3px; }
#stage_portal .story_stage.desperate .tone {
  color: #C4751E; }
#stage_portal .story_stage.doubtful .tone_border {
  border-color: #D7CEC7;
  border-left-width: 3px; }
#stage_portal .story_stage.doubtful .tone {
  color: #D7CEC7; }
#stage_portal .story_stage.excited .tone_border {
  border-color: #D9B310;
  border-left-width: 3px; }
#stage_portal .story_stage.excited .tone {
  color: #D9B310; }
#stage_portal .story_stage.impressed .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
#stage_portal .story_stage.impressed .tone {
  color: #767CCB; }
#stage_portal .story_stage.pensive .tone_border {
  border-color: #EDECEB;
  border-left-width: 3px; }
#stage_portal .story_stage.pensive .tone {
  color: #EDECEB; }
#stage_portal .story_stage.playful .tone_border {
  border-color: lightskyblue;
  border-left-width: 3px; }
#stage_portal .story_stage.playful .tone {
  color: lightskyblue; }
#stage_portal .story_stage.sad .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
#stage_portal .story_stage.sad .tone {
  color: cadetblue; }
#stage_portal .story_stage.sarcastic .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
#stage_portal .story_stage.sarcastic .tone {
  color: #CD8F5C; }
#stage_portal .story_stage.scared .tone_border {
  border-color: #8dccce;
  border-left-width: 3px; }
#stage_portal .story_stage.scared .tone {
  color: #8dccce; }
#stage_portal .story_stage.seductive .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
#stage_portal .story_stage.seductive .tone {
  color: #767CCB; }
#stage_portal .story_stage.serious .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
#stage_portal .story_stage.serious .tone {
  color: #7e7e89; }
#stage_portal .story_stage.surprised .tone_border {
  border-color: #e2ca49;
  border-left-width: 3px; }
#stage_portal .story_stage.surprised .tone {
  color: #e2ca49; }
#stage_portal .story_stage.suspicious .tone_border {
  border-color: #a5a5b0;
  border-left-width: 3px; }
#stage_portal .story_stage.suspicious .tone {
  color: #a5a5b0; }
#stage_portal .story_stage.threatening .tone_border {
  border-color: indianred;
  border-left-width: 3px; }
#stage_portal .story_stage.threatening .tone {
  color: indianred; }
#stage_portal .story_stage.nervous .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
#stage_portal .story_stage.nervous .tone {
  color: cadetblue; }
#stage_portal .story_stage.worried .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
#stage_portal .story_stage.worried .tone {
  color: cadetblue; }
#stage_portal .story_stage.apologetic .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
#stage_portal .story_stage.apologetic .tone {
  color: #5F9EA0; }
#stage_portal .story_stage.baffled .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
#stage_portal .story_stage.baffled .tone {
  color: darkseagreen; }
#stage_portal .story_stage.embarrassed .tone_border {
  border-color: cadetblue;
  border-left-width: 3px; }
#stage_portal .story_stage.embarrassed .tone {
  color: cadetblue; }
#stage_portal .story_stage.fascinated .tone_border {
  border-color: #d9a02f;
  border-left-width: 3px; }
#stage_portal .story_stage.fascinated .tone {
  color: #d9a02f; }
#stage_portal .story_stage.friendly .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
#stage_portal .story_stage.friendly .tone {
  color: #328CC1; }
#stage_portal .story_stage.haughty .tone_border {
  border-color: #4ec19a;
  border-left-width: 3px; }
#stage_portal .story_stage.haughty .tone {
  color: #4ec19a; }
#stage_portal .story_stage.mocking .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
#stage_portal .story_stage.mocking .tone {
  color: #CD8F5C; }
#stage_portal .story_stage.passionate .tone_border {
  border-color: #dcba08;
  border-left-width: 3px; }
#stage_portal .story_stage.passionate .tone {
  color: #dcba08; }
#stage_portal .story_stage.panicked .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
#stage_portal .story_stage.panicked .tone {
  color: #cd691b; }
#stage_portal .story_stage.panting .tone_border {
  border-color: #a97268;
  border-left-width: 3px; }
#stage_portal .story_stage.panting .tone {
  color: #a97268; }
#stage_portal .story_stage.puzzled .tone_border {
  border-color: #A5A5B0;
  border-left-width: 3px; }
#stage_portal .story_stage.puzzled .tone {
  color: #A5A5B0; }
#stage_portal .story_stage.proud .tone_border {
  border-color: #8a80cb;
  border-left-width: 3px; }
#stage_portal .story_stage.proud .tone {
  color: #8a80cb; }
#stage_portal .story_stage.pressing .tone_border {
  border-color: #cb5837;
  border-left-width: 3px; }
#stage_portal .story_stage.pressing .tone {
  color: #cb5837; }
#stage_portal .story_stage.relieved .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
#stage_portal .story_stage.relieved .tone {
  color: darkseagreen; }
#stage_portal .story_stage.remorseful .tone_border {
  border-color: skyblue;
  border-left-width: 3px; }
#stage_portal .story_stage.remorseful .tone {
  color: skyblue; }
#stage_portal .story_stage.sleepy .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
#stage_portal .story_stage.sleepy .tone {
  color: darkseagreen; }
#stage_portal .story_stage.shy .tone_border {
  border-color: #5F9EA0;
  border-left-width: 3px; }
#stage_portal .story_stage.shy .tone {
  color: #5F9EA0; }
#stage_portal .story_stage.suffering .tone_border {
  border-color: #cd691b;
  border-left-width: 3px; }
#stage_portal .story_stage.suffering .tone {
  color: #cd691b; }
#stage_portal .story_stage.tense .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
#stage_portal .story_stage.tense .tone {
  color: #7e7e89; }
#stage_portal .story_stage.tired .tone_border {
  border-color: darkseagreen;
  border-left-width: 3px; }
#stage_portal .story_stage.tired .tone {
  color: darkseagreen; }
#stage_portal .story_stage.admiring .tone_border {
  border-color: #767CCB;
  border-left-width: 3px; }
#stage_portal .story_stage.admiring .tone {
  color: #767CCB; }
#stage_portal .story_stage.detached .tone_border {
  border-color: #7e7e89;
  border-left-width: 3px; }
#stage_portal .story_stage.detached .tone {
  color: #7e7e89; }
#stage_portal .story_stage.condescending .tone_border {
  border-color: #CD8F5C;
  border-left-width: 3px; }
#stage_portal .story_stage.condescending .tone {
  color: #CD8F5C; }
#stage_portal .story_stage.kind .tone_border {
  border-color: #328CC1;
  border-left-width: 3px; }
#stage_portal .story_stage.kind .tone {
  color: #328CC1; }

.story_stage {
  display: flex;
  position: relative; }
  .story_stage:not(.folded).menu_open {
    max-height: initial;
    height: initial; }
  .story_stage .avatar {
    overflow: initial; }
  .story_stage .chat_arrow {
    position: absolute;
    top: 3px;
    width: 20px; }
    .story_stage .chat_arrow:after {
      left: 50%;
      top: 100%;
      border: solid transparent;
      content: " ";
      position: absolute;
      pointer-events: none;
      border-top-color: white;
      border-width: 10px;
      margin-left: -10px; }
  .story_stage .characters_row {
    display: flex;
    align-items: flex-end;
    flex: 1;
    max-height: 120px;
    height: 25vh;
    padding: 0 20px;
    cursor: pointer; }
    .story_stage .characters_row .players {
      display: flex;
      align-items: flex-end;
      position: relative; }
    .story_stage .characters_row .character {
      position: relative;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      max-width: calc(60vw / var(--characters, 1));
      transition: margin-bottom 0.5s ease-in;
      margin-bottom: 10px; }
      .story_stage .characters_row .character.speaking {
        margin-bottom: 20px; }
      .story_stage .characters_row .character:after {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 50%;
        pointer-events: none;
        transform: translateX(-50%);
        height: 130px;
        width: 100%;
        border: solid 1px transparent;
        border-radius: 6px;
        transition: border-color 0.25s; }
        @media (max-height: 600px) {
          .story_stage .characters_row .character:after {
            bottom: 0;
            height: 100px; } }
      .story_stage .characters_row .character.selected:after {
        border-color: #D9B310; }
      .story_stage .characters_row .character .chat_bubble {
        position: absolute;
        height: 20px;
        top: 25px;
        right: 0;
        animation: fade_in 0.25s; }
        .story_stage .characters_row .character .chat_bubble img, .story_stage .characters_row .character .chat_bubble svg {
          height: 20px;
          width: auto; }
      .story_stage .characters_row .character .character_name {
        text-align: center;
        width: 70px;
        max-width: calc(60vw / var(--characters, 1));
        font-size: 0.5em;
        margin-bottom: 0.5em;
        max-height: 3em;
        overflow: hidden;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.2); }
      .story_stage .characters_row .character .portrait {
        height: 70px;
        width: 70px;
        max-width: calc(60vw / var(--characters, 1));
        max-height: calc(60vw / var(--characters, 1)); }
  .story_stage .row_controls {
    display: flex;
    position: absolute;
    z-index: 1;
    justify-content: space-evenly;
    transform: translateX(-50%);
    left: 33%;
    bottom: -10px;
    border-radius: 6px;
    background-color: rgba(27, 30, 38, 0.8); }
    .story_stage .row_controls .row_dot {
      position: relative;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      border: solid 1px #707070; }
      .story_stage .row_controls .row_dot:not(:last-child) {
        margin-right: 10px; }
      .story_stage .row_controls .row_dot:after {
        content: " ";
        width: 65%;
        height: 65%;
        border-radius: 100%;
        position: absolute;
        background-color: transparent;
        transition: background-color 0.25s;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
      .story_stage .row_controls .row_dot.selected:after {
        background-color: #D9B310; }
  .story_stage .more_options {
    position: absolute;
    right: 0;
    top: -5px; }
    .story_stage .more_options #more_options_button {
      background: none;
      z-index: 1; }
  .story_stage.folded {
    align-items: center; }
    .story_stage.folded .unfold_button {
      position: relative;
      background: none; }
  .story_stage.tutorial_on .characters_row {
    opacity: 0;
    pointer-events: none; }
  .story_stage.tutorial_on .speech_feedback {
    display: none; }

.stage_intro_panel {
  background-color: #1D2731;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  will-change: background-color; }
  .stage_intro_panel.fast {
    animation: stage_intro_fade_out 2s 0.5s both; }
    .stage_intro_panel.fast .stage_background {
      animation: fade_in 0.5s backwards, fade_out 2s 0.5s forwards; }
  .stage_intro_panel.slow {
    animation: stage_intro_fade_out 1s 2.5s both; }
    .stage_intro_panel.slow .scene_info {
      will-change: opacity;
      animation: fade_in backwards 2s 0.5s, fade_out 1s 3.75s forwards; }
    .stage_intro_panel.slow .stage_background {
      animation: fade_in 1s backwards, fade_out 1s 2.5s forwards; }
  .stage_intro_panel .scene_info {
    margin-bottom: 50px;
    text-align: center;
    position: relative; }
    .stage_intro_panel .scene_info .title {
      color: #D9B310; }
    .stage_intro_panel .scene_info .scene_name {
      font-size: 1.4em; }
  .stage_intro_panel .stage_background {
    will-change: opacity; }
    .stage_intro_panel .stage_background img {
      opacity: 0.4; }

@keyframes stage_intro_fade_out {
  from {
    background-color: #1b1e26; }
  to {
    background-color: transparent; } }
.stage_opened_menu {
  overflow: auto;
  background: #1b1e26;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--bottom-content-height, 10px);
  padding-bottom: 30px;
  z-index: 1; }
  .stage_opened_menu .character_sheet {
    font-size: 16px; }
  .stage_opened_menu .open_external {
    position: fixed;
    top: 50px;
    right: 1em; }

.App.keyboard_opened .stage_opened_menu {
  height: 100vh; }

.token_menu {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 43px; }
  .token_menu .menu_title {
    margin-bottom: 10px; }
  .token_menu .hint {
    opacity: 0.6; }
    .token_menu .hint.small {
      font-size: 0.8em;
      margin-top: 0.5em; }
    .token_menu .hint svg * {
      fill: #D9B310; }
  .token_menu .current_tokens .character_token {
    font-size: 8px; }
    .token_menu .current_tokens .character_token .token_content {
      font-weight: bold; }
  .token_menu .current_tokens .character_token, .token_menu .current_tokens .add_token_button {
    margin-right: 5px;
    margin-bottom: 5px; }
  .token_menu .current_tokens .add_token_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #707070;
    vertical-align: top; }
  .token_menu .token_options .option {
    display: inline-flex;
    flex-direction: column;
    margin-right: 1em; }
    .token_menu .token_options .option .title {
      font-size: 0.8em;
      margin-bottom: 0.5em;
      opacity: 0.6;
      text-align: center; }
  .token_menu .token_options .token_color {
    margin-right: 1.5em; }
  .token_menu .token_options .token_label {
    margin-right: 1.5em; }
    .token_menu .token_options .token_label .title {
      text-align: left; }
    .token_menu .token_options .token_label input {
      width: 3em; }
  .token_menu .token_options .option_bar_checkbox {
    height: 45px;
    display: flex;
    align-items: center; }
    .token_menu .token_options .option_bar_checkbox .switch_box label.switch {
      height: 1.8em;
      width: 3em; }
    .token_menu .token_options .option_bar_checkbox .switch_box .slider:before {
      height: calc(100% - 4px);
      width: 40%; }
    .token_menu .token_options .option_bar_checkbox input:checked + .slider:before {
      transform: translateX(calc(3em - 100% - 6px)); }
  .token_menu .buttons_area {
    font-size: 0.7em;
    margin-top: 1em; }
    .token_menu .buttons_area button {
      margin-right: 1em;
      min-width: 5em; }
  .token_menu .line_preview {
    margin-top: 1em;
    font-size: 0.8em;
    max-height: 3em;
    overflow: hidden; }

.token_menu .character_token, .token_menu .add_token_button, .token_menu .color_option, .token_selection_modal .character_token, .token_selection_modal .add_token_button, .token_selection_modal .color_option, .select_color_modal .character_token, .select_color_modal .add_token_button, .select_color_modal .color_option {
  padding: 5px;
  border: solid 1px #707070;
  border-radius: 2px;
  height: 45px;
  width: 45px;
  cursor: pointer;
  background-color: transparent; }
  .token_menu .character_token:hover:not(.selected), .token_menu .add_token_button:hover:not(.selected), .token_menu .color_option:hover:not(.selected), .token_selection_modal .character_token:hover:not(.selected), .token_selection_modal .add_token_button:hover:not(.selected), .token_selection_modal .color_option:hover:not(.selected), .select_color_modal .character_token:hover:not(.selected), .select_color_modal .add_token_button:hover:not(.selected), .select_color_modal .color_option:hover:not(.selected) {
    border-color: white; }
  .token_menu .character_token.selected, .token_menu .add_token_button.selected, .token_menu .color_option.selected, .token_selection_modal .character_token.selected, .token_selection_modal .add_token_button.selected, .token_selection_modal .color_option.selected, .select_color_modal .character_token.selected, .select_color_modal .add_token_button.selected, .select_color_modal .color_option.selected {
    border-color: #D9B310; }
.token_menu .color_option, .token_selection_modal .color_option, .select_color_modal .color_option {
  padding: 0;
  display: inline-block;
  height: 45px;
  width: 45px;
  position: relative; }
  .token_menu .color_option:after, .token_selection_modal .color_option:after, .select_color_modal .color_option:after {
    content: "";
    height: calc(100% - 8px);
    width: calc(100% - 8px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .token_menu .color_option.color_1:after, .token_selection_modal .color_option.color_1:after, .select_color_modal .color_option.color_1:after {
    background-color: #D7CEC7; }
  .token_menu .color_option.color_2:after, .token_selection_modal .color_option.color_2:after, .select_color_modal .color_option.color_2:after {
    background-color: #a5a5b0; }
  .token_menu .color_option.color_3:after, .token_selection_modal .color_option.color_3:after, .select_color_modal .color_option.color_3:after {
    background-color: #a4c9df; }
  .token_menu .color_option.color_4:after, .token_selection_modal .color_option.color_4:after, .select_color_modal .color_option.color_4:after {
    background-color: #328CC1; }
  .token_menu .color_option.color_5:after, .token_selection_modal .color_option.color_5:after, .select_color_modal .color_option.color_5:after {
    background-color: #767ccb; }
  .token_menu .color_option.color_6:after, .token_selection_modal .color_option.color_6:after, .select_color_modal .color_option.color_6:after {
    background-color: cadetblue; }
  .token_menu .color_option.color_7:after, .token_selection_modal .color_option.color_7:after, .select_color_modal .color_option.color_7:after {
    background-color: #78C478; }
  .token_menu .color_option.color_8:after, .token_selection_modal .color_option.color_8:after, .select_color_modal .color_option.color_8:after {
    background-color: #cdc09c; }
  .token_menu .color_option.color_9:after, .token_selection_modal .color_option.color_9:after, .select_color_modal .color_option.color_9:after {
    background-color: #D9B310; }
  .token_menu .color_option.color_10:after, .token_selection_modal .color_option.color_10:after, .select_color_modal .color_option.color_10:after {
    background-color: #c38cae; }
  .token_menu .color_option.color_11:after, .token_selection_modal .color_option.color_11:after, .select_color_modal .color_option.color_11:after {
    background-color: indianred; }
  .token_menu .color_option.color_12:after, .token_selection_modal .color_option.color_12:after, .select_color_modal .color_option.color_12:after {
    background-color: #CD8F5C; }

.token_selection_modal.modal_custom_container.bottom_slider .modal_custom .body, .select_color_modal.modal_custom_container.bottom_slider .modal_custom .body {
  display: block; }

.character_token {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  height: calc(80px / var(--tokens-total, 4));
  width: calc(80px / var(--tokens-total, 4));
  font-size: calc((80px / var(--tokens-total, 4)) / 4);
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 100%; }
  .character_token svg {
    height: 100%;
    width: 100%; }
  .character_token.color_1 svg * {
    fill: #D7CEC7; }
  .character_token.color_2 svg * {
    fill: #a5a5b0; }
  .character_token.color_3 svg * {
    fill: #a4c9df; }
  .character_token.color_4 svg * {
    fill: #328CC1; }
  .character_token.color_5 svg * {
    fill: #767ccb; }
  .character_token.color_6 svg * {
    fill: cadetblue; }
  .character_token.color_7 svg * {
    fill: #78C478; }
  .character_token.color_8 svg * {
    fill: #cdc09c; }
  .character_token.color_9 svg * {
    fill: #D9B310; }
  .character_token.color_10 svg * {
    fill: #c38cae; }
  .character_token.color_11 svg * {
    fill: indianred; }
  .character_token.color_12 svg * {
    fill: #CD8F5C; }
  .character_token .token_content {
    user-select: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    word-wrap: break-word;
    color: white;
    font-size: calc(5em / var(--content-length, 2)); }
  .character_token .hidden_feedback {
    position: absolute;
    bottom: -5px;
    right: 0;
    width: calc(40px / var(--tokens-total, 4)); }
    .character_token .hidden_feedback svg * {
      fill: #D9B310; }

.avatar .tokens_container {
  position: absolute;
  bottom: 0;
  line-height: 0.5em;
  transform: translateY(40%); }

.app_content > .stage_parameters_menu {
  overflow: hidden; }

.stage_parameters_menu {
  margin-top: 43px;
  padding-top: 20px; }
  .stage_parameters_menu .no .rank_name {
    color: #D7CEC7; }
  .stage_parameters_menu .no .portrait_box svg #shade1 *, .stage_parameters_menu .no .background_box svg #shade1 * {
    fill: #D7CEC7 !important; }
  .stage_parameters_menu .no .portrait_box svg #shade2 *, .stage_parameters_menu .no .background_box svg #shade2 * {
    fill: #c2b4a9 !important; }
  .stage_parameters_menu .no .portrait_box svg #shade3 *, .stage_parameters_menu .no .background_box svg #shade3 * {
    fill: #ad9a8c !important; }
  .stage_parameters_menu .no .portrait_box svg #shade4 *, .stage_parameters_menu .no .background_box svg #shade4 * {
    fill: #a28d7d !important; }
  .stage_parameters_menu .co .rank_name {
    color: #f19d40; }
  .stage_parameters_menu .co .portrait_box svg #shade1 *, .stage_parameters_menu .co .background_box svg #shade1 * {
    fill: #f19d40 !important; }
  .stage_parameters_menu .co .portrait_box svg #shade2 *, .stage_parameters_menu .co .background_box svg #shade2 * {
    fill: #ed8511 !important; }
  .stage_parameters_menu .co .portrait_box svg #shade3 *, .stage_parameters_menu .co .background_box svg #shade3 * {
    fill: #bd6a0e !important; }
  .stage_parameters_menu .co .portrait_box svg #shade4 *, .stage_parameters_menu .co .background_box svg #shade4 * {
    fill: #a55d0c !important; }
  .stage_parameters_menu .si .rank_name {
    color: #A4C9DF; }
  .stage_parameters_menu .si .portrait_box svg #shade1 *, .stage_parameters_menu .si .background_box svg #shade1 * {
    fill: #A4C9DF !important; }
  .stage_parameters_menu .si .portrait_box svg #shade2 *, .stage_parameters_menu .si .background_box svg #shade2 * {
    fill: #7eb3d2 !important; }
  .stage_parameters_menu .si .portrait_box svg #shade3 *, .stage_parameters_menu .si .background_box svg #shade3 * {
    fill: #599cc4 !important; }
  .stage_parameters_menu .si .portrait_box svg #shade4 *, .stage_parameters_menu .si .background_box svg #shade4 * {
    fill: #4691be !important; }
  .stage_parameters_menu .go .rank_name {
    color: #D9B310; }
  .stage_parameters_menu .go .portrait_box svg #shade1 *, .stage_parameters_menu .go .background_box svg #shade1 * {
    fill: #D9B310 !important; }
  .stage_parameters_menu .go .portrait_box svg #shade2 *, .stage_parameters_menu .go .background_box svg #shade2 * {
    fill: #aa8c0c !important; }
  .stage_parameters_menu .go .portrait_box svg #shade3 *, .stage_parameters_menu .go .background_box svg #shade3 * {
    fill: #7a6509 !important; }
  .stage_parameters_menu .go .portrait_box svg #shade4 *, .stage_parameters_menu .go .background_box svg #shade4 * {
    fill: #625107 !important; }
  .stage_parameters_menu .pl .rank_name {
    color: #dcf6f7; }
  .stage_parameters_menu .pl .portrait_box svg #shade1 *, .stage_parameters_menu .pl .background_box svg #shade1 * {
    fill: white !important; }
  .stage_parameters_menu .pl .portrait_box svg #shade2 *, .stage_parameters_menu .pl .background_box svg #shade2 * {
    fill: #e6e6e6 !important; }
  .stage_parameters_menu .pl .portrait_box svg #shade3 *, .stage_parameters_menu .pl .background_box svg #shade3 * {
    fill: #cccccc !important; }
  .stage_parameters_menu .pl .portrait_box svg #shade4 *, .stage_parameters_menu .pl .background_box svg #shade4 * {
    fill: #bfbfbf !important; }
  .stage_parameters_menu .le .rank_name {
    color: #a962f5; }
  .stage_parameters_menu .le .portrait_box svg #shade1 *, .stage_parameters_menu .le .background_box svg #shade1 * {
    fill: #a962f5 !important; }
  .stage_parameters_menu .le .portrait_box svg #shade2 *, .stage_parameters_menu .le .background_box svg #shade2 * {
    fill: #8f32f2 !important; }
  .stage_parameters_menu .le .portrait_box svg #shade3 *, .stage_parameters_menu .le .background_box svg #shade3 * {
    fill: #750ee3 !important; }
  .stage_parameters_menu .le .portrait_box svg #shade4 *, .stage_parameters_menu .le .background_box svg #shade4 * {
    fill: #690dcb !important; }
  .stage_parameters_menu .background_option {
    position: relative;
    cursor: pointer;
    margin-bottom: 0.5em;
    border: solid 1px #707070;
    transition: border-color 0.15s;
    height: 150px;
    overflow: hidden; }
    .stage_parameters_menu .background_option.no {
      border-color: #707070; }
      .stage_parameters_menu .background_option.no:hover {
        border-color: #a3a3a3; }
    .stage_parameters_menu .background_option.co {
      border-color: #f19d40; }
      .stage_parameters_menu .background_option.co:hover {
        border-color: #f8ce9f; }
    .stage_parameters_menu .background_option.si {
      border-color: #A4C9DF; }
      .stage_parameters_menu .background_option.si:hover {
        border-color: #eff6fa; }
    .stage_parameters_menu .background_option.go {
      border-color: #D9B310; }
      .stage_parameters_menu .background_option.go:hover {
        border-color: #f3d65c; }
    .stage_parameters_menu .background_option.pl {
      border-color: #dcf6f7; }
      .stage_parameters_menu .background_option.pl:hover {
        border-color: white; }
    .stage_parameters_menu .background_option.le {
      border-color: #a962f5; }
      .stage_parameters_menu .background_option.le:hover {
        border-color: #dec2fb; }
    .stage_parameters_menu .background_option .upgrade_warning {
      animation: fade_in 0.15s, fade_out 1s 2s;
      position: absolute;
      bottom: 4px;
      right: 30px;
      color: #D9B310;
      font-size: 0.8em;
      display: flex; }
      .stage_parameters_menu .background_option .upgrade_warning .icon {
        height: 0.8em;
        margin-right: 0.5em; }
        .stage_parameters_menu .background_option .upgrade_warning .icon svg path {
          fill: #D9B310; }
    .stage_parameters_menu .background_option img {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -10px); }
    .stage_parameters_menu .background_option .coin {
      position: absolute;
      bottom: 15px;
      right: 15px; }
      .stage_parameters_menu .background_option .coin img {
        opacity: 1;
        display: inline;
        height: 15px;
        width: auto; }
  .stage_parameters_menu .rank_separator {
    padding: 0.2em;
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    align-items: center; }
    .stage_parameters_menu .rank_separator.co {
      background: linear-gradient(to right, rgba(241, 157, 64, 0.37), transparent); }
    .stage_parameters_menu .rank_separator.si {
      background: linear-gradient(to right, rgba(164, 201, 223, 0.37), transparent); }
    .stage_parameters_menu .rank_separator.go {
      background: linear-gradient(to right, rgba(217, 179, 16, 0.37), transparent); }
    .stage_parameters_menu .rank_separator.pl {
      background: linear-gradient(to right, rgba(220, 246, 247, 0.37), transparent); }
    .stage_parameters_menu .rank_separator.le {
      background: linear-gradient(to right, rgba(169, 98, 245, 0.37), transparent); }
    .stage_parameters_menu .rank_separator .coin {
      margin-right: 0.2em; }
      .stage_parameters_menu .rank_separator .coin img {
        height: 1.5em; }
    .stage_parameters_menu .rank_separator .rank_name {
      margin-top: 0;
      font-size: 1em; }
    .stage_parameters_menu .rank_separator .coming_soon {
      font-size: 0.6em;
      opacity: 0.6; }

.infocard {
  position: absolute;
  font-size: 14px;
  display: flex;
  top: 40px;
  flex-direction: column;
  width: 100%; }
  .infocard .message {
    align-items: center;
    display: flex; }
    .infocard .message .icon {
      height: 3.5em; }
      .infocard .message .icon svg * {
        fill: #D9B310; }
    .infocard .message .text {
      color: white; }
  .infocard .hint {
    opacity: 0.6;
    font-size: 0.8em;
    text-align: right; }

.email_verified {
  margin-top: 40px;
  padding-top: 2em;
  text-align: center;
  color: white; }
  .email_verified h3 {
    color: #D9B310; }
  .email_verified button {
    margin-top: 2em; }
  .email_verified .card {
    background-color: rgba(37, 38, 39, 0.9);
    padding: 2em; }
  .email_verified .error {
    color: black; }

.please_verify {
  top: 50px;
  width: 100vw;
  z-index: 1000;
  position: fixed;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #252627;
  border: solid 2px #af931e; }

.dice_menu .page_content {
  display: flex;
  flex-direction: column; }
.dice_menu .screen_title {
  text-align: center;
  color: #D9B310;
  font-size: 1.2em; }
.dice_menu .screen_subtitle {
  text-align: center; }
.dice_menu .page_content {
  margin-top: 1em;
  background: none; }
.dice_menu .footer {
  margin-top: 1em;
  margin-bottom: 2em;
  text-align: right;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse; }
  .dice_menu .footer.left {
    flex-direction: row; }
  .dice_menu .footer .button_base {
    min-width: 8em; }

.dice_set_browser .search_bar {
  margin: 0 0 1em 0; }

.die_template_item, .die_symbol_name, .symbols_interaction, .die_face_item, .dice_set_item {
  cursor: pointer;
  margin-bottom: 11px; }
  .die_template_item:hover.option_bar .option_bar_label, .die_template_item:hover .option_bar .option_bar_label, .die_symbol_name:hover.option_bar .option_bar_label, .die_symbol_name:hover .option_bar .option_bar_label, .symbols_interaction:hover.option_bar .option_bar_label, .symbols_interaction:hover .option_bar .option_bar_label, .die_face_item:hover.option_bar .option_bar_label, .die_face_item:hover .option_bar .option_bar_label, .dice_set_item:hover.option_bar .option_bar_label, .dice_set_item:hover .option_bar .option_bar_label {
    color: white; }
  .die_template_item .bar_content, .die_symbol_name .bar_content, .symbols_interaction .bar_content, .die_face_item .bar_content, .dice_set_item .bar_content {
    height: 50px; }

.symbols_interaction, .dice_set_item, .die_face_item {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .symbols_interaction .option_bar, .dice_set_item .option_bar, .die_face_item .option_bar {
    flex: 1;
    margin-right: 2em; }
  .symbols_interaction .delete_item_button, .dice_set_item .delete_item_button, .die_face_item .delete_item_button {
    height: 20px;
    width: 20px;
    opacity: 0.6; }
    .symbols_interaction .delete_item_button:hover, .dice_set_item .delete_item_button:hover, .die_face_item .delete_item_button:hover {
      opacity: 1;
      cursor: pointer; }

.symbols_interaction .option_bar_label {
  text-align: center; }
.symbols_interaction .option_bar_element:nth-child(1) {
  flex: 0 0 auto;
  text-align: left; }
.symbols_interaction .option_bar_element:nth-child(2), .symbols_interaction .option_bar_element:nth-child(4) {
  padding-left: 0;
  padding-right: 0;
  flex: 1 0 auto; }
.symbols_interaction .option_bar_element:nth-child(3) {
  padding-left: 0;
  padding-right: 0; }
.symbols_interaction .option_bar_element:not(:nth-child(1)):before {
  content: none; }

.create_symbol_interaction_modal .hint {
  text-align: center;
  opacity: 0.6; }
.create_symbol_interaction_modal .symbol_row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 2em auto;
  max-width: 15em; }
  .create_symbol_interaction_modal .symbol_row .die_face_symbol {
    display: flex;
    border: solid 1px #D7CEC7;
    background-color: #2D2F30;
    height: 60px;
    width: 60px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    cursor: pointer; }
    .create_symbol_interaction_modal .symbol_row .die_face_symbol:hover {
      border-color: white; }

.add_symbol_modal .hint {
  text-align: center;
  opacity: 0.6; }
.add_symbol_modal .character_token {
  background-color: transparent;
  height: 50px;
  width: 50px;
  padding: 0.5em;
  border: solid 1px #D7CEC7;
  border-radius: 0;
  cursor: pointer; }
  .add_symbol_modal .character_token:hover {
    border-color: white; }
.add_symbol_modal .tab_content {
  margin-top: 1em;
  text-align: center; }
  .add_symbol_modal .tab_content input {
    text-align: left; }
.add_symbol_modal .footer {
  margin-top: 3em; }

.select_symbol_modal .die_face_symbol {
  display: flex;
  text-align: center;
  height: 40px;
  align-items: center;
  margin-bottom: 1em;
  cursor: pointer;
  border-radius: 5px; }
  .select_symbol_modal .die_face_symbol:hover {
    background-color: #3b4045; }
  .select_symbol_modal .die_face_symbol .character_token {
    margin-right: 1.5em;
    height: 30px;
    width: 30px; }

.die_face_symbol {
  text-align: center;
  display: inline-flex;
  margin: 0 0.3em;
  flex-direction: column;
  align-items: center; }
  .die_face_symbol .symbol_name {
    font-size: 0.8em;
    opacity: 0.8;
    color: #D7CEC7; }
  .die_face_symbol .character_token {
    background-color: transparent; }
  .die_face_symbol.cancelled {
    opacity: 0.2; }
    .die_face_symbol.cancelled svg * {
      fill: indianred; }

.edit_dice_set_menu .dice_set_name {
  font-size: 1.2em;
  margin: 1em 0 0 0;
  color: #D9B310; }
  .edit_dice_set_menu .dice_set_name svg {
    display: inline-block;
    height: 20px;
    margin: 0.1em 0.5em 0 0; }
.edit_dice_set_menu .dice_set_description {
  margin: 0.5em 0 1em 0; }
.edit_dice_set_menu textarea {
  width: 100%;
  background-color: #3b4045;
  padding: 0.5em;
  margin: 1em 0; }

.edit_die_template_menu.preview .screen_title {
  display: flex;
  align-items: center; }
  .edit_die_template_menu.preview .screen_title .character_token {
    margin-right: 1em; }
.edit_die_template_menu .token_menu {
  flex-direction: row;
  justify-content: space-around; }
  .edit_die_template_menu .token_menu .box {
    text-align: center; }
    .edit_die_template_menu .token_menu .box .character_token, .edit_die_template_menu .token_menu .box .color_option {
      height: 100px;
      width: 100px; }

.die_face_item {
  display: inline-flex;
  align-items: center;
  margin-bottom: 11px; }
  .die_face_item .index {
    margin-right: 1em;
    padding-right: 1em;
    border-right: solid 1px #D7CEC7; }
  .die_face_item .faces_list {
    flex: 1;
    display: inline-flex; }
  .die_face_item .symbols {
    display: flex;
    flex-wrap: wrap; }
  .die_face_item .value, .die_face_item .die_face_symbol {
    margin-right: 11px;
    height: 50px;
    width: 50px;
    border: solid 1px #D7CEC7;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9; }
    .die_face_item .value:hover, .die_face_item .die_face_symbol:hover {
      cursor: pointer;
      opacity: 1; }
  .die_face_item .character_token {
    height: 40px;
    width: 40px;
    background-color: transparent; }
  .die_face_item .delete_item_button {
    flex: 0 1 auto; }
  .die_face_item .add_symbol_button svg {
    height: 10px;
    width: 10px;
    opacity: 0.6; }

.die_face_symbol .empty_symbol {
  content: " ";
  width: 1em;
  height: 1em; }

.dice_macro_item {
  margin-bottom: 5px; }

.interaction_area_mobile {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-direction: column; }
  .interaction_area_mobile.stage_unfolded:before {
    content: " ";
    display: block;
    height: 0;
    max-height: 0;
    transition: height 1s, max-height 1s; }
    @media (min-height: 600px) {
      .interaction_area_mobile.stage_unfolded:before {
        height: 20px;
        max-height: 20px; } }
  .interaction_area_mobile .chat_buttons {
    max-width: 300px;
    transition: opacity 0.25s 0.15s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    width: 100%; }
  .interaction_area_mobile .button_base.button_circle {
    height: 60px;
    width: 50px;
    border: transparent; }
    .interaction_area_mobile .button_base.button_circle .icon {
      height: 30px;
      width: 30px; }
  .interaction_area_mobile .button_base.open_menu_button {
    height: 50px;
    width: 50px; }
    .interaction_area_mobile .button_base.open_menu_button .icon {
      height: 100%;
      width: 100%; }
  .interaction_area_mobile .button_base.close_menu_button {
    height: 50px;
    width: 50px; }
    .interaction_area_mobile .button_base.close_menu_button .icon {
      opacity: 0.8; }
      .interaction_area_mobile .button_base.close_menu_button .icon svg {
        height: 30%;
        width: 30%;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%); }
  .interaction_area_mobile .stage_menu_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: absolute;
    transform: translateY(50%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s, opacity 0.25s; }
    .interaction_area_mobile .stage_menu_bar:before {
      content: " "; }
    .interaction_area_mobile .stage_menu_bar:after {
      content: " "; }
  .interaction_area_mobile #stage_menu_bar_portal {
    position: relative;
    width: 100%; }

.interaction_area_mobile.stage_menu_opened .stage_menu_bar {
  transform: translateY(0%);
  opacity: 1;
  pointer-events: initial;
  transition: transform 0.5s, opacity 0.5s; }
.interaction_area_mobile.stage_menu_opened .chat_buttons {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s; }

.chat_input_dark_cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #1b1e26;
  opacity: 0.8;
  transition: opacity 0.15s;
  z-index: 1; }
  .chat_input_dark_cover.away {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s; }

.chat_menu_mobile {
  position: relative;
  z-index: 1; }
  .chat_menu_mobile .chat_button, .chat_menu_mobile .avatar {
    animation: fade_in 0.15s;
    position: absolute;
    font-size: 14px;
    min-width: 6em;
    background-color: #1b1e26;
    z-index: 1; }
  .chat_menu_mobile #describe_button {
    left: -2em;
    top: -50px;
    transform: translateX(-100%); }
  .chat_menu_mobile #say_button {
    left: 50%;
    top: -60px;
    transform: translateX(-50%); }
  .chat_menu_mobile #chat_button {
    right: -2em;
    top: -50px;
    transform: translateX(100%); }
  .chat_menu_mobile #done_button {
    right: -3em;
    bottom: 0;
    transform: translateX(100%); }
  .chat_menu_mobile .avatar {
    height: 2.9em;
    left: -3em;
    display: flex;
    justify-content: center;
    bottom: 0;
    transform: translateX(-100%);
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.2); }
    .chat_menu_mobile .avatar .avatar_icon {
      width: 2.9em; }

.chat_input_field_mobile {
  z-index: 1;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #1b1e26;
  max-height: 100vh; }
  .chat_input_field_mobile .field_row {
    position: relative;
    display: flex;
    margin: 5px; }
    .chat_input_field_mobile .field_row.add_margin_top {
      margin-top: 1.5em; }
  .chat_input_field_mobile .button_circle {
    border: none;
    height: 35px; }
  .chat_input_field_mobile .chat_options {
    display: flex;
    overflow: hidden;
    align-items: flex-end;
    transition: width 0.25s;
    margin-bottom: 2px; }
  .chat_input_field_mobile .hidden_options {
    transition: opacity 0.25s;
    display: flex; }
  .chat_input_field_mobile .slider_opened.size_1 {
    width: 45px; }
  .chat_input_field_mobile .slider_opened.size_2 {
    width: 90px; }
  .chat_input_field_mobile .slider_opened.size_3 {
    width: 135px; }
  .chat_input_field_mobile .slider_opened.size_4 {
    width: 180px; }
  .chat_input_field_mobile .slider_opened .open_slider_button {
    display: none; }
  .chat_input_field_mobile .slider_closed {
    width: 45px; }
    .chat_input_field_mobile .slider_closed .hidden_options {
      position: absolute;
      opacity: 0;
      pointer-events: none; }
  .chat_input_field_mobile .textarea_container {
    flex: 1;
    display: flex;
    border-radius: 6px;
    border: solid 1px transparent;
    overflow: hidden; }
    .chat_input_field_mobile .textarea_container button.button_circle .icon svg * {
      fill: #1b1e26 !important; }
    .chat_input_field_mobile .textarea_container textarea {
      margin: 5px 0;
      flex: 1;
      height: 25px;
      background-color: transparent;
      resize: none; }
    .chat_input_field_mobile .textarea_container .avatar {
      height: 35px;
      width: 45px;
      margin-right: -10px; }
      .chat_input_field_mobile .textarea_container .avatar svg {
        display: flex; }
    .chat_input_field_mobile .textarea_container .input_area {
      display: flex;
      overflow: auto;
      max-height: 50vh;
      flex: 1; }
    .chat_input_field_mobile .textarea_container .tone_area {
      display: flex;
      align-items: flex-end;
      height: 100%; }
      .chat_input_field_mobile .textarea_container .tone_area #tone_button {
        margin-left: -10px; }
      .chat_input_field_mobile .textarea_container .tone_area .tone_search_container {
        width: 0;
        transition: width 0.25s;
        overflow: hidden; }
      .chat_input_field_mobile .textarea_container .tone_area.search_mode {
        background-color: #40464B; }
        .chat_input_field_mobile .textarea_container .tone_area.search_mode .tone_search_container {
          width: 5em; }
        .chat_input_field_mobile .textarea_container .tone_area.search_mode #tone_button {
          margin-left: 0; }
          .chat_input_field_mobile .textarea_container .tone_area.search_mode #tone_button svg * {
            fill: #D7CEC7 !important; }
      .chat_input_field_mobile .textarea_container .tone_area input {
        background-color: transparent;
        width: 100%;
        padding: 0;
        color: #D7CEC7;
        margin-bottom: 5px; }
  .chat_input_field_mobile.description .textarea_container {
    background-color: #40464B; }
  .chat_input_field_mobile:not(.whisper).dialogue .textarea_container, .chat_input_field_mobile:not(.whisper).chat .textarea_container {
    background-color: white; }
    .chat_input_field_mobile:not(.whisper).dialogue .textarea_container textarea, .chat_input_field_mobile:not(.whisper).chat .textarea_container textarea {
      color: black; }
      .chat_input_field_mobile:not(.whisper).dialogue .textarea_container textarea::placeholder, .chat_input_field_mobile:not(.whisper).chat .textarea_container textarea::placeholder {
        color: rgba(0, 0, 0, 0.7); }
  .chat_input_field_mobile.whisper .textarea_container {
    background-color: rgba(27, 30, 38, 0.95);
    border: solid 1px #707070; }
    .chat_input_field_mobile.whisper .textarea_container #tone_button svg * {
      fill: #D7CEC7 !important; }
  .chat_input_field_mobile .chat_input_bottom_menu {
    background-color: #252627;
    max-height: 50vh;
    height: 300px;
    overflow: auto;
    display: flex;
    flex-direction: column; }
    .chat_input_field_mobile .chat_input_bottom_menu .title {
      opacity: 0.6;
      margin-bottom: 0.5em;
      font-size: 0.8em; }
    .chat_input_field_mobile .chat_input_bottom_menu:empty {
      height: 0; }
  .chat_input_field_mobile .menu_arrow {
    position: absolute;
    bottom: 15px;
    width: 15px; }
    .chat_input_field_mobile .menu_arrow:after {
      left: 50%;
      top: 100%;
      border: solid transparent;
      content: " ";
      position: absolute;
      pointer-events: none;
      border-bottom-color: #252627;
      border-width: 10px;
      margin-left: -10px; }
  .chat_input_field_mobile .chat_button_area {
    display: flex;
    align-items: flex-end; }
  .chat_input_field_mobile .send_area {
    display: flex;
    align-items: flex-end;
    transition: width 0.25s;
    width: 45px;
    margin-bottom: 2px; }
    .chat_input_field_mobile .send_area.away {
      width: 11px;
      overflow: hidden; }
      .chat_input_field_mobile .send_area.away .send_button {
        opacity: 0; }
  .chat_input_field_mobile .tone {
    position: absolute;
    top: -1.5em;
    right: 45px; }
  .chat_input_field_mobile .language_indicator {
    position: absolute;
    top: -1.5em;
    left: 45px;
    color: #328CC1; }

.interaction_area_mobile.reader_mode {
  margin-bottom: 15px; }
  .interaction_area_mobile.reader_mode.stage_unfolded:before {
    height: 140px;
    max-height: 0; }
    @media (min-height: 400px) {
      .interaction_area_mobile.reader_mode.stage_unfolded:before {
        max-height: 5vh; } }
    @media (min-height: 600px) {
      .interaction_area_mobile.reader_mode.stage_unfolded:before {
        max-height: 12vh; } }
  .interaction_area_mobile.reader_mode .chat_buttons {
    justify-content: initial;
    align-items: flex-end; }
  .interaction_area_mobile.reader_mode .button_base.button_circle {
    height: 30px;
    width: 40px; }
  .interaction_area_mobile.reader_mode .next_button {
    height: 3.5em;
    font-size: 0.9em;
    min-width: 6em; }
  .interaction_area_mobile.reader_mode .join_button {
    font-size: 0.8em; }
  .interaction_area_mobile.reader_mode .left_side, .interaction_area_mobile.reader_mode .right_side {
    display: flex;
    align-items: flex-end;
    flex: 1; }
  .interaction_area_mobile.reader_mode .right_side {
    justify-content: flex-end; }

.interaction_area_desktop {
  position: relative;
  margin-bottom: 50px;
  margin-top: 30px;
  text-align: right; }
  .interaction_area_desktop .button_base {
    display: inline-flex;
    height: 35px;
    min-height: initial;
    min-width: initial;
    font-size: 11px; }
    .interaction_area_desktop .button_base.button_circle {
      border: transparent; }
  .interaction_area_desktop .interaction_row .chat_buttons {
    display: flex;
    align-items: center;
    flex-direction: row-reverse; }
  .interaction_area_desktop .character_option {
    margin-right: 11px;
    height: 35px;
    width: 35px; }
    .interaction_area_desktop .character_option > .portrait {
      height: inherit;
      width: inherit; }
  .interaction_area_desktop .chat_menu {
    margin-right: 11px; }
    .interaction_area_desktop .chat_menu .chat_button {
      min-width: 6em; }
      .interaction_area_desktop .chat_menu .chat_button:not(:last-child) {
        margin-right: 11px; }
      .interaction_area_desktop .chat_menu .chat_button.highlighted {
        background-color: #D7CEC7; }
        .interaction_area_desktop .chat_menu .chat_button.highlighted .button_title {
          color: black; }
  .interaction_area_desktop .chat_mode_options {
    display: flex; }
    .interaction_area_desktop .chat_mode_options .popover_container {
      display: flex; }
    .interaction_area_desktop .chat_mode_options .badge {
      font-size: 1em;
      right: 0; }
    .interaction_area_desktop .chat_mode_options .option_bar .badge {
      position: absolute;
      right: 0.2em;
      background: red;
      border-radius: 100%;
      font-size: 0.8em;
      top: 50%;
      transform: translateY(-50%); }
  .interaction_area_desktop .chat_arrow {
    position: absolute;
    bottom: 53px;
    width: 20px; }
    .interaction_area_desktop .chat_arrow:after {
      left: 50%;
      top: 100%;
      border: solid transparent;
      content: " ";
      position: absolute;
      pointer-events: none;
      border-top-color: white;
      border-width: 13px;
      margin-left: -13px; }
    .interaction_area_desktop .chat_arrow.description:after {
      border-top-color: #40464B; }
  .interaction_area_desktop .tone {
    position: absolute;
    bottom: -21px;
    left: 11px;
    font-size: 12px;
    font-weight: bold; }
  .interaction_area_desktop .send_button {
    min-width: 70px;
    flex: 0 0 auto; }
  .interaction_area_desktop .join_button {
    margin-left: 11px; }
  .interaction_area_desktop button.done_button {
    animation: glow 1.5s 1s; }
    .interaction_area_desktop button.done_button .icon {
      top: 40%; }
      .interaction_area_desktop button.done_button .icon svg * {
        animation: svg_glow 1.5s 1s; }
    .interaction_area_desktop button.done_button .button_title {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%, 50%);
      opacity: 0.5; }
  .interaction_area_desktop:before {
    content: " ";
    display: block;
    height: 0;
    max-height: 0;
    transition: height 0.5s, max-height 0.5s; }

.interaction_area_desktop.reader_mode.stage_folded {
  display: none; }
.interaction_area_desktop.reader_mode:before {
  height: 150px;
  max-height: 0; }
  @media (min-height: 400px) {
    .interaction_area_desktop.reader_mode:before {
      max-height: 5vh; } }
  @media (min-height: 700px) {
    .interaction_area_desktop.reader_mode:before {
      max-height: 12vh; } }
.interaction_area_desktop.reader_mode .next_button {
  font-size: 18px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 40px;
  height: initial;
  transition: all 0s; }

#input_field_portal {
  position: absolute;
  bottom: 50px;
  left: 11px;
  right: 11px;
  display: inline-flex;
  align-items: flex-end; }

.chat_input_field_desktop {
  flex: 1;
  min-height: 30px;
  max-height: 130px;
  border-radius: 6px;
  padding: 8px;
  margin-right: 11px;
  border: solid 3px transparent;
  display: flex; }
  .chat_input_field_desktop .textarea_container {
    overflow: auto;
    flex: 1; }
  .chat_input_field_desktop textarea {
    font-size: 16px;
    height: 30px;
    width: 100%;
    background-color: transparent;
    resize: none; }
  .chat_input_field_desktop .chat_options {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start; }
    .chat_input_field_desktop .chat_options .button_base.button_circle {
      font-size: 11px;
      display: flex;
      flex-direction: column-reverse;
      width: 5em; }
      .chat_input_field_desktop .chat_options .button_base.button_circle .button_title {
        position: initial;
        opacity: 0.6; }
      .chat_input_field_desktop .chat_options .button_base.button_circle .icon {
        position: initial;
        margin: 0;
        transform: none; }
    .chat_input_field_desktop .chat_options .popover_container {
      display: inline-block; }
    .chat_input_field_desktop .chat_options .popover_custom {
      max-height: 500px; }
    .chat_input_field_desktop .chat_options #tone_popover {
      font-size: 13px; }
      .chat_input_field_desktop .chat_options #tone_popover .list_item {
        padding: 10px; }
      .chat_input_field_desktop .chat_options #tone_popover .tone_filter {
        display: flex;
        flex: 0 0 auto;
        background-color: #1b1e26;
        height: 2em;
        padding: 0;
        border-radius: 0 0 15px 15px; }
        .chat_input_field_desktop .chat_options #tone_popover .tone_filter svg {
          flex: 0 1 auto;
          width: auto;
          height: 100%;
          padding: 0.5em;
          background-color: white;
          border-radius: 2px 0 0 0; }
          .chat_input_field_desktop .chat_options #tone_popover .tone_filter svg * {
            fill: #707070; }
        .chat_input_field_desktop .chat_options #tone_popover .tone_filter input {
          flex: 1;
          width: 100%;
          padding-left: 0;
          background-color: white;
          color: #1b1e26;
          border-radius: 0 2px 2px 0; }
  .chat_input_field_desktop .language_indicator {
    position: absolute;
    top: 11px;
    right: 41px;
    color: #328CC1;
    font-size: 12px;
    font-weight: bold; }
  .chat_input_field_desktop ::-webkit-scrollbar {
    width: 5px; }
  .chat_input_field_desktop.description {
    background-color: #40464B; }
    .chat_input_field_desktop.description ::-webkit-scrollbar-thumb {
      background: rgba(215, 206, 199, 0.8); }
      .chat_input_field_desktop.description ::-webkit-scrollbar-thumb:hover {
        background: #D7CEC7; }
  .chat_input_field_desktop:not(.whisper).dialogue, .chat_input_field_desktop:not(.whisper).chat {
    background-color: white; }
    .chat_input_field_desktop:not(.whisper).dialogue textarea, .chat_input_field_desktop:not(.whisper).chat textarea {
      color: black; }
      .chat_input_field_desktop:not(.whisper).dialogue textarea::placeholder, .chat_input_field_desktop:not(.whisper).chat textarea::placeholder {
        color: rgba(0, 0, 0, 0.7); }
    .chat_input_field_desktop:not(.whisper).dialogue .chat_options .button_base.button_circle svg *, .chat_input_field_desktop:not(.whisper).chat .chat_options .button_base.button_circle svg * {
      fill: #40464B !important; }
    .chat_input_field_desktop:not(.whisper).dialogue .chat_options .button_base.button_circle .button_title, .chat_input_field_desktop:not(.whisper).chat .chat_options .button_base.button_circle .button_title {
      color: #40464B; }
    .chat_input_field_desktop:not(.whisper).dialogue ::-webkit-scrollbar-thumb, .chat_input_field_desktop:not(.whisper).chat ::-webkit-scrollbar-thumb {
      background: rgba(11, 60, 93, 0.2); }
      .chat_input_field_desktop:not(.whisper).dialogue ::-webkit-scrollbar-thumb:hover, .chat_input_field_desktop:not(.whisper).chat ::-webkit-scrollbar-thumb:hover {
        background: #0B3C5D; }
  .chat_input_field_desktop:not(.whisper) ::-webkit-scrollbar-track {
    background: transparent; }
  .chat_input_field_desktop.whisper {
    background-color: rgba(27, 30, 38, 0.95);
    border: solid 3px #707070; }

.interaction_area_desktop.stage_folded {
  margin-top: 0;
  display: flex;
  flex-direction: column; }
  .interaction_area_desktop.stage_folded #input_field_portal {
    position: static;
    width: 100%; }
    .interaction_area_desktop.stage_folded #input_field_portal:empty {
      display: none; }
    .interaction_area_desktop.stage_folded #input_field_portal .chat_input_field_desktop {
      margin-bottom: 11px; }

@media (max-width: 1200px) {
  .interaction_area_desktop.stage_menu_opened .chat_buttons {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s; }

  .interaction_area_desktop .chat_buttons {
    transition: opacity 0.25s 0.15s; } }
.interaction_area_desktop .stage_menu_bar {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s, opacity 0.25s; }

.interaction_area_desktop.stage_menu_opened .stage_menu_bar {
  transform: translate(-50%, 0%);
  opacity: 1;
  pointer-events: initial;
  transition: transform 0.5s, opacity 0.5s; }

.stage_menu_bar {
  display: inline-flex;
  align-items: center;
  justify-content: center; }
  .stage_menu_bar button:not(:first-child) {
    margin-left: 2px; }
  .stage_menu_bar .button_base {
    display: inline-flex;
    height: 35px;
    min-height: initial;
    min-width: initial; }
    .stage_menu_bar .button_base.close_button {
      position: absolute;
      bottom: 0;
      transform: translateY(100%); }
      .stage_menu_bar .button_base.close_button .icon svg {
        height: 50%;
        width: 50%;
        top: 50%;
        left: 50%;
        position: relative;
        transform: translate(-50%, -50%);
        opacity: 0.2; }
      .stage_menu_bar .button_base.close_button:hover svg {
        opacity: 1; }

.home_screen.screen .partner_section {
  margin-bottom: 2rem; }
  .home_screen.screen .partner_section #main {
    cursor: pointer;
    position: relative;
    margin: 0 -1rem;
    height: 283px;
    overflow: hidden;
    display: flex;
    flex-direction: column; }
    .home_screen.screen .partner_section #main #title_bar {
      padding-left: 1em;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
      padding-bottom: 1em; }
    .home_screen.screen .partner_section #main h3 {
      color: white;
      margin: 0.5em 0 0.2em 0;
      font-size: 1.5em; }
    .home_screen.screen .partner_section #main p {
      margin: 0; }
    .home_screen.screen .partner_section #main img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0; }
  @media (min-width: 600px) {
    .home_screen.screen .partner_section #main {
      margin: 0; } }

@media (min-width: 600px) {
  .partner_details {
    padding-bottom: 1.5em; }
    .partner_details hr {
      display: none; }
    .partner_details #preview_picture {
      margin-bottom: 1em;
      border: solid 1px #D7CEC7; } }
.partner_details a {
  word-break: initial; }
.partner_details p {
  margin-bottom: 1em; }
.partner_details h4 {
  font-size: 1em; }
.partner_details #preview_picture {
  width: 100%; }
  @media (min-width: 600px) {
    .partner_details #preview_picture {
      width: auto;
      height: 300px; } }
.partner_details .highlighted {
  color: #D9B310; }

.character_tag_selector {
  font-size: 0.8em;
  display: flex;
  background-color: #1b1e26;
  position: fixed;
  bottom: 0;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
  left: 0;
  right: 0;
  z-index: 1; }
  @media (min-width: 600px) {
    .character_tag_selector {
      padding-bottom: 30px; } }

.character_tag_button {
  cursor: pointer;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5em;
  color: #D9B310;
  border: solid 1px #707070;
  border-radius: 6px;
  height: 40px; }
  .character_tag_button:hover {
    color: #efcb2d; }

button.button_base.icon_only.tag_clear_button {
  height: 40px;
  width: 40px;
  margin-right: 5px;
  border: solid 1px #707070; }

.character_tag_search {
  display: flex; }
  .character_tag_search .input_field {
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    border: solid 1px #707070;
    align-items: center; }
    .character_tag_search .input_field input {
      padding: 0 0.5em; }
    .character_tag_search .input_field .icon {
      height: 20px;
      margin: 0 1em; }

.character_tag_list {
  position: absolute;
  left: 0;
  bottom: 5px;
  right: 0;
  padding: 5px 0;
  border-radius: 6px;
  border: solid 1px #707070;
  background-color: #252627;
  z-index: 1;
  max-height: 50vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; }

.character_tag_list .separator, .characters_list .separator, #character_menu_popover .characters_list .separator {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 0.8em;
  width: 80%;
  margin: auto; }
  .character_tag_list .separator hr, .characters_list .separator hr, #character_menu_popover .characters_list .separator hr {
    margin-top: 2px; }

.character_tag_item {
  display: flex;
  align-items: center; }
  .character_tag_item button.button_base.transparent.icon_only {
    border: transparent;
    height: 30px;
    width: 30px; }
    .character_tag_item button.button_base.transparent.icon_only svg {
      height: 10px; }
  .character_tag_item .name {
    flex: 1;
    color: #D9B310;
    transition: opacity 0.5s;
    cursor: pointer; }
  .character_tag_item.hidden .name {
    opacity: 0.5; }

.top_list {
  overflow: auto; }

.recent_items {
  flex: 1 0 auto; }

.character_tag_pill {
  cursor: pointer;
  color: #D9B310;
  border-radius: 10px;
  padding: 0.5em;
  display: inline-flex;
  background-color: #202020;
  font-size: 0.8em;
  border: solid 1px transparent; }
  .character_tag_pill:hover {
    color: #efcb2d; }
  .character_tag_pill:not(:first-child) {
    margin-left: 5px; }
  .character_tag_pill .icon {
    margin-right: 0.5em;
    height: 0.7em; }
  .character_tag_pill.selected {
    border-color: #D9B310; }

.modal_custom.character_tag_manager_modal {
  overflow: initial; }
  .modal_custom.character_tag_manager_modal .body {
    overflow: initial; }
  .modal_custom.character_tag_manager_modal .footer {
    justify-content: flex-end; }
    .modal_custom.character_tag_manager_modal .footer button.button_base {
      flex: 0;
      min-width: 8em; }

.character_tags_input {
  margin-bottom: 10px; }
  .character_tags_input .option_bar label.hint {
    right: initial;
    bottom: 0; }

.characters_list {
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.gold_banner {
  background-color: #D9B310;
  color: #2C2C2C;
  padding: 0.5em; }
  .gold_banner.center {
    text-align: center; }
  .gold_banner .small {
    font-size: 0.7em; }

.request_avatar {
  position: relative; }
  .request_avatar .page_content {
    display: flex;
    flex-direction: column; }
  .request_avatar .banner_avatar {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    height: 50px; }
    .request_avatar .banner_avatar h6 {
      margin-bottom: 0.3rem; }
    .request_avatar .banner_avatar.medium {
      margin-top: 3em;
      height: 80px; }
    .request_avatar .banner_avatar.large {
      height: 150px; }
    .request_avatar .banner_avatar svg {
      height: 100%; }
  .request_avatar h5.title {
    margin-top: 1em;
    text-align: center;
    margin-bottom: 1em; }
  .request_avatar .form_field {
    display: flex;
    flex-direction: column; }
    .request_avatar .form_field .title {
      text-align: center;
      font-size: 0.8em;
      margin: 2em 0; }
    .request_avatar .form_field pre {
      color: #D7CEC7;
      padding: 1em;
      background-color: #202020;
      text-align: left; }
    .request_avatar .form_field textarea {
      background-color: #202020;
      padding: 10px;
      min-height: 100px; }
      .request_avatar .form_field textarea.highlighted {
        color: #D7CEC7;
        border: solid 1px #D9B310; }
      .request_avatar .form_field textarea::placeholder {
        text-align: center;
        opacity: 0.6; }
  .request_avatar .terms {
    margin-top: 3em;
    display: block;
    text-align: center;
    color: #D9B310; }
    .request_avatar .terms:hover {
      color: #eec515; }
  @media (max-width: 600px) {
    .request_avatar {
      padding-bottom: 80px; } }
  .request_avatar .footer {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5em;
    padding-bottom: 1em;
    background-color: #1b1e26; }
    .request_avatar .footer button.button_base {
      min-width: 6em; }
    @media (max-width: 600px) {
      .request_avatar .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0; } }

.request_terms_and_conditions {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto; }
  .request_terms_and_conditions h5 {
    color: #D9B310; }

.autocomplete {
  text-align: left;
  z-index: 1;
  background-color: #252627;
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-100%); }
  .autocomplete .autocomplete_option:not(.option_bar) {
    padding: 0.5em 0;
    cursor: pointer; }
    .autocomplete .autocomplete_option:not(.option_bar) .highlighted {
      color: #D9B310; }
    .autocomplete .autocomplete_option:not(.option_bar):hover, .autocomplete .autocomplete_option:not(.option_bar).selected {
      background-color: #57595b; }

.select_macro_group .hint {
  opacity: 0.6;
  font-size: 0.9em;
  margin-bottom: 11px; }
.select_macro_group .footer {
  margin-top: 1em; }

.dice_macro_group_item {
  margin-bottom: 11px; }

.edit_macro_group .page_content, .edit_macro .page_content, .view_macro .page_content {
  display: flex;
  flex-direction: column; }
  @media (max-width: 600px) {
    .edit_macro_group .page_content, .edit_macro .page_content, .view_macro .page_content {
      padding-bottom: 80px; } }
  .edit_macro_group .page_content .add_button, .edit_macro .page_content .add_button, .view_macro .page_content .add_button {
    margin-top: 1em; }
.edit_macro_group .hint, .edit_macro .hint, .view_macro .hint {
  opacity: 0.6;
  font-size: 0.9em;
  margin-bottom: 11px; }
.edit_macro_group .token_menu, .edit_macro .token_menu, .view_macro .token_menu {
  margin-top: 0;
  flex-direction: row;
  justify-content: space-around;
  padding: 0;
  flex: initial; }
  .edit_macro_group .token_menu .box, .edit_macro .token_menu .box, .view_macro .token_menu .box {
    text-align: center; }
.edit_macro_group .option_bar:not(.dice_macro_item), .edit_macro .option_bar:not(.dice_macro_item), .view_macro .option_bar:not(.dice_macro_item) {
  margin-top: 1em; }
.edit_macro_group textarea, .edit_macro textarea, .view_macro textarea {
  background-color: #3b4045;
  padding: 0.5em;
  margin: 1em 0;
  width: 100%; }
.edit_macro_group .autocomplete, .edit_macro .autocomplete, .view_macro .autocomplete {
  top: 1em; }
.edit_macro_group .footer, .edit_macro .footer, .view_macro .footer {
  padding-top: 1.5em;
  padding-bottom: 1em;
  display: flex;
  justify-content: space-around;
  background-color: #1b1e26; }
  @media (max-width: 600px) {
    .edit_macro_group .footer, .edit_macro .footer, .view_macro .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0; } }
  .edit_macro_group .footer button.button_base, .edit_macro .footer button.button_base, .view_macro .footer button.button_base {
    min-width: 6em; }

.view_macro .macro_name {
  margin-top: 1em; }
.view_macro .page_content img {
  margin-bottom: 1em; }

@media (max-width: 600px) {
  .edit_macro .page_content {
    padding-bottom: 160px; } }
.edit_macro .macro_visualization {
  margin-bottom: 2em; }
  @media (max-width: 600px) {
    .edit_macro .macro_visualization {
      font-size: 14px; } }
  .edit_macro .macro_visualization .pool_command {
    color: #D7CEC7; }
  .edit_macro .macro_visualization .sheet_label {
    color: #328CC1;
    font-weight: bold;
    font-size: 1.2em; }

.macro_visualization {
  overflow: auto; }
  .macro_visualization .pool_command {
    color: #328CC1; }
    .macro_visualization .pool_command span {
      display: inline-block; }
  .macro_visualization .sheet_label {
    cursor: pointer;
    color: grey; }
    .macro_visualization .sheet_label.has_character {
      color: #819EFF; }
    .macro_visualization .sheet_label.selected {
      color: #D9B310;
      font-weight: bold;
      margin: 0 10px; }

.contest_page h3 {
  cursor: pointer;
  color: #D9B310; }
  .contest_page h3:hover {
    color: #efcb2d; }

@media (min-width: 600px) {
  /* width */
  ::-webkit-scrollbar {
    width: 10px; }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #1b1e26; }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(215, 206, 199, 0.2); }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #0B3C5D; }

  .container_desktop {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 100%; } }
@media (min-width: 600px) and (min-width: 576px) {
  .container_desktop {
    max-width: 540px; } }
@media (min-width: 600px) and (min-width: 768px) {
  .container_desktop {
    max-width: 720px; } }
@media (min-width: 600px) and (min-width: 992px) {
  .container_desktop {
    max-width: 960px; } }
@media (min-width: 600px) and (min-width: 1200px) {
  .container_desktop {
    max-width: 1140px; } }
@media (min-width: 600px) {
  .screen {
    font-size: 20px;
    margin-top: 39px; }

  .mobile {
    display: none; }

  .container_mobile {
    margin: 0;
    width: initial;
    padding-left: 0;
    padding-right: 0; } }
  @media (min-width: 600px) and (min-width: 768px) {
    .container_mobile {
      width: initial; } }
  @media (min-width: 600px) and (min-width: 992px) {
    .container_mobile {
      width: initial; } }
  @media (min-width: 600px) and (min-width: 1200px) {
    .container_mobile {
      width: initial; } }

@media (min-width: 600px) {
  html {
    background-size: cover;
    background-attachment: fixed; } }
  @media (min-width: 600px) and (min-width: 1630px) {
    html {
      background-size: cover; } }

@media (min-width: 600px) {
  body {
    overflow-y: scroll; }
    body .noscroll {
      overflow-y: hidden; }

  .App .app_content {
    background-attachment: fixed; }
  .App .page_content {
    padding-top: 15px; }
  .App .screen_title {
    box-shadow: none; }

  .character_sheet .avatar_area .portrait {
    height: 90px;
    width: 90px; }
  .character_sheet .upper_tabs.count_5, .character_sheet .upper_tabs.count_6, .character_sheet .upper_tabs.count_7 {
    font-size: 1em; }
  .character_sheet .sheet_picture svg, .character_sheet .sheet_picture img {
    max-height: 20vh; }
  .character_sheet .section .title_input {
    min-height: 46px; }
  .character_sheet .section .section .section .title_input {
    min-height: 34px; }

  .App.no_access .button_container {
    text-align: center; }
    .App.no_access .button_container button {
      width: 200px; }

  .map_screen .map_square, .line.open_map .map_square {
    height: 51px;
    width: 51px; }
    .map_screen .map_square .square_menu .add_detailed_map, .line.open_map .map_square .square_menu .add_detailed_map {
      width: 190px; }
      .map_screen .map_square .square_menu .add_detailed_map svg, .line.open_map .map_square .square_menu .add_detailed_map svg {
        height: 14px;
        width: auto; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #0B3C5D;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2 {
        width: 50px;
        height: 25px;
        background: #0B3C5D;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #0B3C5D; }
      .map_screen .map_square .layered_data .tile_icon.color_0.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_3 {
      width: 50px;
      height: 50px;
      background: #0B3C5D;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #0B3C5D;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #0B3C5D; }
    .map_screen .map_square .layered_data .tile_icon.color_0.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_0.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #0B3C5D;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #EDECEB;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2 {
        width: 50px;
        height: 25px;
        background: #EDECEB;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #EDECEB; }
      .map_screen .map_square .layered_data .tile_icon.color_1.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_3 {
      width: 50px;
      height: 50px;
      background: #EDECEB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #EDECEB;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #EDECEB; }
    .map_screen .map_square .layered_data .tile_icon.color_1.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_1.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #EDECEB;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #D7CEC7;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2 {
        width: 50px;
        height: 25px;
        background: #D7CEC7;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #D7CEC7; }
      .map_screen .map_square .layered_data .tile_icon.color_2.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_3 {
      width: 50px;
      height: 50px;
      background: #D7CEC7;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #D7CEC7;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #D7CEC7; }
    .map_screen .map_square .layered_data .tile_icon.color_2.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_2.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #D7CEC7;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #A5A5B0;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2 {
        width: 50px;
        height: 25px;
        background: #A5A5B0;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #A5A5B0; }
      .map_screen .map_square .layered_data .tile_icon.color_3.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_3 {
      width: 50px;
      height: 50px;
      background: #A5A5B0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #A5A5B0;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #A5A5B0; }
    .map_screen .map_square .layered_data .tile_icon.color_3.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_3.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #A5A5B0;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #A4C9DF;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2 {
        width: 50px;
        height: 25px;
        background: #A4C9DF;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #A4C9DF; }
      .map_screen .map_square .layered_data .tile_icon.color_4.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_3 {
      width: 50px;
      height: 50px;
      background: #A4C9DF;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #A4C9DF;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #A4C9DF; }
    .map_screen .map_square .layered_data .tile_icon.color_4.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_4.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #A4C9DF;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #328CC1;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2 {
        width: 50px;
        height: 25px;
        background: #328CC1;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #328CC1; }
      .map_screen .map_square .layered_data .tile_icon.color_5.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_3 {
      width: 50px;
      height: 50px;
      background: #328CC1;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #328CC1;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #328CC1; }
    .map_screen .map_square .layered_data .tile_icon.color_5.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_5.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #328CC1;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #767CCB;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2 {
        width: 50px;
        height: 25px;
        background: #767CCB;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #767CCB; }
      .map_screen .map_square .layered_data .tile_icon.color_6.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_3 {
      width: 50px;
      height: 50px;
      background: #767CCB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #767CCB;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #767CCB; }
    .map_screen .map_square .layered_data .tile_icon.color_6.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_6.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #767CCB;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #5F9EA0;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2 {
        width: 50px;
        height: 25px;
        background: #5F9EA0;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #5F9EA0; }
      .map_screen .map_square .layered_data .tile_icon.color_7.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_3 {
      width: 50px;
      height: 50px;
      background: #5F9EA0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #5F9EA0;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #5F9EA0; }
    .map_screen .map_square .layered_data .tile_icon.color_7.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_7.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #5F9EA0;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #78C478;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2 {
        width: 50px;
        height: 25px;
        background: #78C478;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #78C478; }
      .map_screen .map_square .layered_data .tile_icon.color_8.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_3 {
      width: 50px;
      height: 50px;
      background: #78C478;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #78C478;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #78C478; }
    .map_screen .map_square .layered_data .tile_icon.color_8.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_8.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #78C478;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #CDC09C;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2 {
        width: 50px;
        height: 25px;
        background: #CDC09C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #CDC09C; }
      .map_screen .map_square .layered_data .tile_icon.color_9.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_3 {
      width: 50px;
      height: 50px;
      background: #CDC09C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #CDC09C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #CDC09C; }
    .map_screen .map_square .layered_data .tile_icon.color_9.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_9.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #CDC09C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #D9B310;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2 {
        width: 50px;
        height: 25px;
        background: #D9B310;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #D9B310; }
      .map_screen .map_square .layered_data .tile_icon.color_10.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_3 {
      width: 50px;
      height: 50px;
      background: #D9B310;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #D9B310;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #D9B310; }
    .map_screen .map_square .layered_data .tile_icon.color_10.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_10.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #D9B310;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #C38CAE;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2 {
        width: 50px;
        height: 25px;
        background: #C38CAE;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #C38CAE; }
      .map_screen .map_square .layered_data .tile_icon.color_11.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_3 {
      width: 50px;
      height: 50px;
      background: #C38CAE;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #C38CAE;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #C38CAE; }
    .map_screen .map_square .layered_data .tile_icon.color_11.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_11.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #C38CAE;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #CD5C5C;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2 {
        width: 50px;
        height: 25px;
        background: #CD5C5C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #CD5C5C; }
      .map_screen .map_square .layered_data .tile_icon.color_12.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_3 {
      width: 50px;
      height: 50px;
      background: #CD5C5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #CD5C5C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #CD5C5C; }
    .map_screen .map_square .layered_data .tile_icon.color_12.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_12.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #CD5C5C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #CD8F5C;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2 {
        width: 50px;
        height: 25px;
        background: #CD8F5C;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #CD8F5C; }
      .map_screen .map_square .layered_data .tile_icon.color_13.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_3 {
      width: 50px;
      height: 50px;
      background: #CD8F5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #CD8F5C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #CD8F5C; }
    .map_screen .map_square .layered_data .tile_icon.color_13.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_13.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #CD8F5C;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #C4751E;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2 {
        width: 50px;
        height: 25px;
        background: #C4751E;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #C4751E; }
      .map_screen .map_square .layered_data .tile_icon.color_14.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_3 {
      width: 50px;
      height: 50px;
      background: #C4751E;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #C4751E;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #C4751E; }
    .map_screen .map_square .layered_data .tile_icon.color_14.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_14.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #C4751E;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_0, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_0 {
      width: 50px;
      height: 50px;
      background-color: #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_1, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_1 {
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-bottom-color: #1D2731;
      position: relative;
      top: -25px; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_1:after, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_1:after {
      content: "";
      position: absolute;
      left: -25px;
      top: 25px;
      width: 0;
      height: 0;
      border: 25px solid transparent;
      border-top-color: #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2 {
      margin-top: 12.5px; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2 {
        width: 50px;
        height: 25px;
        background: #1D2731;
        position: relative; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2:before, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2:before {
        content: "";
        position: absolute;
        top: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-bottom: 12.5px solid #1D2731; }
      .map_screen .map_square .layered_data .tile_icon.color_15.shape_2:after, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_2:after {
        content: "";
        position: absolute;
        bottom: -12.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 25px solid transparent;
        border-right: 25px solid transparent;
        border-top: 12.5px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_3, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_3 {
      width: 50px;
      height: 50px;
      background: #1D2731;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_4, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_4 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_5, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_5 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-left: 50px solid #1D2731;
      border-bottom: 25px solid transparent; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_6, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_6 {
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-top: 50px solid #1D2731; }
    .map_screen .map_square .layered_data .tile_icon.color_15.shape_7, .line.open_map .map_square .layered_data .tile_icon.color_15.shape_7 {
      width: 0;
      height: 0;
      border-top: 25px solid transparent;
      border-right: 50px solid #1D2731;
      border-bottom: 25px solid transparent; }
  .map_screen .horizontal_display .navigate_option, .line.open_map .horizontal_display .navigate_option {
    min-height: 50px;
    min-width: 50px; }
    .map_screen .horizontal_display .navigate_option.add:after, .line.open_map .horizontal_display .navigate_option.add:after {
      min-height: 50px;
      min-width: 50px; }
    .map_screen .horizontal_display .navigate_option.add svg, .line.open_map .horizontal_display .navigate_option.add svg {
      width: 15px;
      height: 15px; }
    .map_screen .horizontal_display .navigate_option.nav_up, .line.open_map .horizontal_display .navigate_option.nav_up {
      margin-bottom: 0; }
      .map_screen .horizontal_display .navigate_option.nav_up.add:after, .line.open_map .horizontal_display .navigate_option.nav_up.add:after {
        width: 357px; }
    .map_screen .horizontal_display .navigate_option.nav_down, .line.open_map .horizontal_display .navigate_option.nav_down {
      margin-top: 0; }
      .map_screen .horizontal_display .navigate_option.nav_down .preview, .line.open_map .horizontal_display .navigate_option.nav_down .preview {
        top: 0; }
      .map_screen .horizontal_display .navigate_option.nav_down.add:after, .line.open_map .horizontal_display .navigate_option.nav_down.add:after {
        top: 0;
        left: 0;
        width: 357px; }
    .map_screen .horizontal_display .navigate_option.nav_left, .line.open_map .horizontal_display .navigate_option.nav_left {
      margin-right: 0; }
      .map_screen .horizontal_display .navigate_option.nav_left .preview, .line.open_map .horizontal_display .navigate_option.nav_left .preview {
        top: 50px; }
      .map_screen .horizontal_display .navigate_option.nav_left.add:after, .line.open_map .horizontal_display .navigate_option.nav_left.add:after {
        top: 50px;
        height: 357px; }
    .map_screen .horizontal_display .navigate_option.nav_right, .line.open_map .horizontal_display .navigate_option.nav_right {
      margin-left: 0; }
      .map_screen .horizontal_display .navigate_option.nav_right .preview, .line.open_map .horizontal_display .navigate_option.nav_right .preview {
        top: 50px;
        left: 0; }
      .map_screen .horizontal_display .navigate_option.nav_right.add:after, .line.open_map .horizontal_display .navigate_option.nav_right.add:after {
        top: 50px;
        left: 0;
        height: 357px; }
    .map_screen .horizontal_display .navigate_option .preview, .line.open_map .horizontal_display .navigate_option .preview {
      min-height: 50px;
      min-width: 50px; }
    .map_screen .horizontal_display .navigate_option .timeline_area .dots .timeline_dot, .line.open_map .horizontal_display .navigate_option .timeline_area .dots .timeline_dot {
      width: 30px;
      height: 30px; }
  .map_screen .is_preview .map_square, .line.open_map .is_preview .map_square {
    height: 31px;
    width: 31px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #0B3C5D;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2 {
        width: 30px;
        height: 15px;
        background: #0B3C5D;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #0B3C5D; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_3 {
      width: 30px;
      height: 30px;
      background: #0B3C5D;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #0B3C5D; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_0.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_0.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #0B3C5D;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #EDECEB;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2 {
        width: 30px;
        height: 15px;
        background: #EDECEB;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #EDECEB; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_3 {
      width: 30px;
      height: 30px;
      background: #EDECEB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #EDECEB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_1.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_1.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #EDECEB;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D7CEC7;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2 {
        width: 30px;
        height: 15px;
        background: #D7CEC7;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D7CEC7; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_3 {
      width: 30px;
      height: 30px;
      background: #D7CEC7;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D7CEC7; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_2.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_2.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D7CEC7;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A5A5B0;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2 {
        width: 30px;
        height: 15px;
        background: #A5A5B0;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A5A5B0; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_3 {
      width: 30px;
      height: 30px;
      background: #A5A5B0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A5A5B0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_3.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_3.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A5A5B0;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #A4C9DF;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2 {
        width: 30px;
        height: 15px;
        background: #A4C9DF;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #A4C9DF; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_3 {
      width: 30px;
      height: 30px;
      background: #A4C9DF;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #A4C9DF; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_4.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_4.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #A4C9DF;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #328CC1;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2 {
        width: 30px;
        height: 15px;
        background: #328CC1;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #328CC1; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_3 {
      width: 30px;
      height: 30px;
      background: #328CC1;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #328CC1; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_5.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_5.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #328CC1;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #767CCB;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2 {
        width: 30px;
        height: 15px;
        background: #767CCB;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #767CCB; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_3 {
      width: 30px;
      height: 30px;
      background: #767CCB;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #767CCB; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_6.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_6.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #767CCB;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #5F9EA0;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2 {
        width: 30px;
        height: 15px;
        background: #5F9EA0;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #5F9EA0; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_3 {
      width: 30px;
      height: 30px;
      background: #5F9EA0;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #5F9EA0; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_7.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_7.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #5F9EA0;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #78C478;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2 {
        width: 30px;
        height: 15px;
        background: #78C478;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #78C478; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_3 {
      width: 30px;
      height: 30px;
      background: #78C478;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #78C478; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_8.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_8.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #78C478;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CDC09C;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2 {
        width: 30px;
        height: 15px;
        background: #CDC09C;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CDC09C; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_3 {
      width: 30px;
      height: 30px;
      background: #CDC09C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CDC09C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_9.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_9.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CDC09C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #D9B310;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2 {
        width: 30px;
        height: 15px;
        background: #D9B310;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #D9B310; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_3 {
      width: 30px;
      height: 30px;
      background: #D9B310;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #D9B310; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_10.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_10.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #D9B310;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C38CAE;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2 {
        width: 30px;
        height: 15px;
        background: #C38CAE;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C38CAE; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_3 {
      width: 30px;
      height: 30px;
      background: #C38CAE;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C38CAE; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_11.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_11.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C38CAE;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD5C5C;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD5C5C;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD5C5C; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD5C5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD5C5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_12.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_12.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD5C5C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #CD8F5C;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2 {
        width: 30px;
        height: 15px;
        background: #CD8F5C;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #CD8F5C; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_3 {
      width: 30px;
      height: 30px;
      background: #CD8F5C;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #CD8F5C; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_13.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_13.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #CD8F5C;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #C4751E;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2 {
        width: 30px;
        height: 15px;
        background: #C4751E;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #C4751E; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_3 {
      width: 30px;
      height: 30px;
      background: #C4751E;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #C4751E; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_14.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_14.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #C4751E;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_0, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_0 {
      width: 30px;
      height: 30px;
      background-color: #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_1, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_1 {
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-bottom-color: #1D2731;
      position: relative;
      top: -15px; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_1:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_1:after {
      content: "";
      position: absolute;
      left: -15px;
      top: 15px;
      width: 0;
      height: 0;
      border: 15px solid transparent;
      border-top-color: #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2 {
      margin-top: 7.5px; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2 {
        width: 30px;
        height: 15px;
        background: #1D2731;
        position: relative; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:before, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:before {
        content: "";
        position: absolute;
        top: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 7.5px solid #1D2731; }
      .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:after, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_2:after {
        content: "";
        position: absolute;
        bottom: -7.5px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-top: 7.5px solid #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_3, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_3 {
      width: 30px;
      height: 30px;
      background: #1D2731;
      -moz-border-radius: 100%;
      -webkit-border-radius: 100%;
      border-radius: 100%; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_4, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_4 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 30px solid #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_5, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_5 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-left: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_6, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_6 {
      width: 0;
      height: 0;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 30px solid #1D2731; }
    .map_screen .is_preview .map_square .layered_data .tile_icon.color_15.shape_7, .line.open_map .is_preview .map_square .layered_data .tile_icon.color_15.shape_7 {
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-right: 30px solid #1D2731;
      border-bottom: 15px solid transparent; }
  .map_screen .is_preview .frame_descriptions, .line.open_map .is_preview .frame_descriptions {
    font-size: 1.4em; }
  .map_screen .is_preview .timeline_area .dots .timeline_dot, .line.open_map .is_preview .timeline_area .dots .timeline_dot {
    height: 12px;
    width: 12px; }

  .screen_title {
    font-size: 1em; }
    .screen_title .back_button svg {
      width: 25px; }

  .nav_tabs .party_tabs, .nav_tabs .party_split_notification {
    font-size: 1em; }
  .nav_tabs.fullscreen {
    height: 70vh; }
  .nav_tabs .sliding_pane {
    min-height: 40px; }

  .party_split_notification .icon, .merge_indicator .icon, .party_info .members .icon {
    margin-right: 7px; }
    .party_split_notification .icon svg, .merge_indicator .icon svg, .party_info .members .icon svg {
      height: 13px;
      width: auto; }

  .party_info .sibling_parties_listing, .party_info .story_of {
    font-size: 1em; }

  .modal_custom_container .manage_party_menu.modal_custom .character_item .name {
    font-size: 0.8em; }

  .interactive_helper {
    width: 400px; }
    .interactive_helper .panel_content {
      margin-bottom: 1em; }
    .interactive_helper .panel_options {
      font-size: 0.8em; } }
@media (min-width: 600px) and (min-width: 1100px) {
  .App {
    display: flex; }
    .App .app_content {
      flex: 1; }

  .screen_title > .container > .icon {
    display: inline-flex;
    height: 1em;
    width: 1em;
    margin-right: 0.5em; }
    .screen_title > .container > .icon img {
      width: 100%; }
  .screen_title .menu_icon {
    display: none; }

  .navigation_backdrop:not(.helper_backdrop) {
    display: none; } }
@media (min-width: 600px) and (min-width: 1300px) {
  .helper_backdrop {
    display: none; }

  .interactive_helper {
    position: sticky;
    top: 0;
    flex: 0 1 auto; }
    .interactive_helper .close {
      display: block; }
    .interactive_helper.closed {
      transform: translateX(0); }

  .nav_tabs.helper_opened {
    width: calc(100vw - 400px); }

  .game_screen.helper_opened #screen_bottom {
    padding-right: 400px; } }
@media (min-width: 600px) {
  .story_index .story_marker .marker_info {
    font-size: 1.2em; }
  .story_index .story_marker.scene .marker_info {
    font-size: 1em; }
  .story_index .story_marker.scene, .story_index .story_marker .description {
    font-size: 1em; }
  .story_index .story_marker button {
    font-size: 1em; }

  .write_box {
    margin-bottom: 15px; }
    .write_box .input_area textarea {
      font-size: 0.8em; }
    .write_box .vertical_pane .menu button.icon_only {
      height: 50px;
      width: 50px; }

  .account_upgrade {
    font-size: 0.8em; }
    .account_upgrade .upgrade_options {
      margin-top: 0; }
      .account_upgrade .upgrade_options .account_upgrade_option {
        display: inline-flex;
        flex-direction: column;
        width: calc(50% - 2em);
        min-height: 432px;
        margin-left: 1em;
        margin-right: 1em;
        vertical-align: top; }
        .account_upgrade .upgrade_options .account_upgrade_option.rank_1, .account_upgrade .upgrade_options .account_upgrade_option.rank_0 {
          min-height: 343px; }
        .account_upgrade .upgrade_options .account_upgrade_option.rank_4, .account_upgrade .upgrade_options .account_upgrade_option.rank_5 {
          min-height: 650px; }
    .account_upgrade .invite_link .short_explanation {
      text-align: center; }

  .loading_icon.size2 {
    height: 1.5em; }

  .home_screen .menu {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.7em;
    display: block; }
    .home_screen .menu button {
      width: 12em; }
      .home_screen .menu button:first-child {
        margin-right: 2em; }
  .home_screen .section_title {
    font-size: 0.5em; }
    .home_screen .section_title.with_bar {
      border-top: solid 1px #707070; }
  .home_screen .game_browsers {
    font-size: 0.95em;
    margin-top: 1.5em; }
    .home_screen .game_browsers .opened_list {
      margin-bottom: 1em; }
    .home_screen .game_browsers .upper_tab {
      justify-content: left;
      flex: 0 0 auto;
      margin-right: 1em; }
      .home_screen .game_browsers .upper_tab:not(:first-child) {
        padding-left: 1em; }

  .home_screen.landing_page .landing_page_content {
    background: none; }
  .home_screen.landing_page .app_logo {
    height: 12rem; }
  .home_screen.landing_page .first_block {
    flex-direction: row-reverse;
    text-align: left;
    justify-content: center; }
    .home_screen.landing_page .first_block .introduction {
      margin-right: 20px; }
      .home_screen.landing_page .first_block .introduction .dynamic_text {
        width: 100%;
        font-weight: 600; }
  .home_screen.landing_page .panel {
    height: 60vh; }
  .home_screen.landing_page .feature_picture {
    display: flex;
    align-items: flex-start; }
    .home_screen.landing_page .feature_picture img {
      max-width: 25em;
      margin-right: 1.5em; }
  .home_screen.landing_page .feature_title.desktop {
    display: block;
    text-align: left;
    margin-top: 0; }
    .home_screen.landing_page .feature_title.desktop:after {
      left: 1em; }
  .home_screen.landing_page .feature_details {
    text-align: left;
    margin-top: 0; }
  .home_screen.landing_page .feature_section {
    padding-top: 3em;
    padding-bottom: 3em; }
    .home_screen.landing_page .feature_section.reverse .feature_picture {
      flex-direction: row-reverse; }
      .home_screen.landing_page .feature_section.reverse .feature_picture img {
        margin-right: 0;
        margin-left: 1.5em; }
    .home_screen.landing_page .feature_section.complex {
      background: linear-gradient(to right, transparent, rgba(27, 30, 38, 0.9) 20%), url(../../images/backgrounds/game_preview_background.png) no-repeat fixed;
      background-size: cover; }

  .game_item {
    font-size: 0.9em; }
    .game_item.extended {
      font-size: 20px; }
    .game_item.narrow:not(.extended) {
      height: 10em; }
    .game_item .game_title {
      font-size: 1em; }
    .game_item .game_more_info {
      font-size: 0.7em; }
    .game_item .tag_list {
      font-size: 0.7em; }

  .game_preview.desktop {
    display: flex;
    flex: 1.7;
    margin-left: 2em; }
  .game_preview.mobile {
    display: none; }

  .game_lines_preview .lines_scroller {
    font-size: 16px; }

  .join_game_screen .search_input {
    font-size: 0.8em; }

  .modal_custom_container .modal_custom {
    font-size: 18px; }
    .modal_custom_container .modal_custom .footer {
      display: block;
      text-align: right; }
      .modal_custom_container .modal_custom .footer button {
        min-width: 8em;
        min-height: 2.3em; }

  .button_header {
    font-size: 0.8em; }

  .flow_buttons {
    font-size: 0.8em;
    justify-content: left; }
    .flow_buttons button {
      flex: 0 0 auto;
      width: 12em; }

  .youtube_video .video_card {
    display: flex; }
  .youtube_video .left_pane {
    flex: 1;
    margin-right: 1em; }
    .youtube_video .left_pane button {
      width: 3em; }
  .youtube_video .thumbnail {
    flex: 1; }
    .youtube_video .thumbnail img {
      max-height: 100%; }

  .history_scroll_list {
    font-size: 0.8em; }

  .avatars_list .portrait {
    height: 50px;
    width: 50px; }

  .popover_custom {
    font-size: 14px; }
    .popover_custom .popover_custom_content {
      max-height: 50vh; }

  .nav_tabs #current_game {
    display: flex; } }
@media (min-width: 600px) and (min-width: 900px) {
  .nav_tabs {
    flex: 0 1 auto;
    font-size: 19px; }
    .nav_tabs .tab {
      flex: 0 0 auto; }
      .nav_tabs .tab:not(:last-child) {
        margin-right: 2em; }
      .nav_tabs .tab.selected:after {
        width: 80%;
        left: 20%; }
      .nav_tabs .tab .icon {
        width: auto;
        margin-right: 0.5em; }
      .nav_tabs .tab .tab_title {
        display: inline-block; }
      .nav_tabs .tab#current_game .tab_title {
        display: none; } }
      @media (min-width: 600px) and (min-width: 900px) and (min-width: 1000px) {
        .nav_tabs .tab#current_game .tab_title {
          display: inline-block; } }
@media (min-width: 600px) and (min-width: 900px) {
      .nav_tabs .tab#avatar_menu .upgrade_arrow {
        transform: translateX(-20%); }
        .nav_tabs .tab#avatar_menu .upgrade_arrow svg, .nav_tabs .tab#avatar_menu .upgrade_arrow img {
          height: 0.8em; }
      .nav_tabs .tab.highlighted:not(.selected) > .icon > svg * {
        fill: white !important; }
      .nav_tabs .tab.selected > .icon > svg * {
        fill: #D9B310 !important; }
    .nav_tabs .container_desktop > .title, .nav_tabs .container > .title {
      font-size: 1em; }
    .nav_tabs .container_desktop > .title_container .subtitle, .nav_tabs .container > .title_container .subtitle {
      font-size: 0.55em;
      margin-bottom: -1.1em;
      margin-top: -0.5em; }
    .nav_tabs .container_desktop > .title_container .title, .nav_tabs .container > .title_container .title {
      font-size: 1em; }
    .nav_tabs.no_back_button .container_desktop > .title, .nav_tabs.no_back_button .container > .title, .nav_tabs.no_back_button .title_container {
      margin-left: 0; }
    .nav_tabs .space {
      display: block; }
    .nav_tabs .coin_notifier_menu {
      flex: 0 0 auto;
      margin-right: 1em; }
      .nav_tabs .coin_notifier_menu #coin_notifier_button > .icon {
        margin-right: 0; }
    .nav_tabs .mobile_separator {
      display: none; } }
@media (min-width: 600px) {
  .page_title {
    display: none; }

  .headline .content {
    flex-direction: row;
    height: 100%; }
  .headline .right_pane {
    display: flex;
    flex-direction: column;
    text-align: left; }
  .headline .headline_details {
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 18px; }
  .headline .left_pane {
    flex: 0.5; }
    .headline .left_pane img {
      height: initial;
      width: initial;
      margin: 0; }
  .headline .avatars_listing {
    display: flex;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    justify-content: center;
    height: 100%;
    align-items: center; }
  .headline button.button_base {
    max-width: 8em; }

  .game_screen.screen {
    margin-top: 40px;
    min-height: calc(100vh - 40px); }
    .game_screen.screen .jump_to {
      position: static; }
    .game_screen.screen.stage_folded .jump_to_bottom_container {
      bottom: calc(var(--bottom-content-height, 110px) + 5px); }
    .game_screen.screen.stage_unfolded .jump_to_bottom_container {
      bottom: calc(var(--input-pane-height, 270px) + .5em); }
    .game_screen.screen .jump_to_bottom_container {
      width: 100vw;
      position: fixed;
      z-index: 10; }
      .game_screen.screen .jump_to_bottom_container .jump_to_bottom {
        position: static;
        height: 0; }
        .game_screen.screen .jump_to_bottom_container .jump_to_bottom button {
          position: relative;
          bottom: 3em; }
    .game_screen.screen .lines_scroller {
      font-size: 0.8em;
      padding-top: 0; }
    .game_screen.screen .typing_feedback .dots {
      top: -35px; }

  .story_stage .characters_row {
    flex: 0 0 auto;
    margin: auto;
    max-width: 700px;
    width: 100%; }
    .story_stage .characters_row .character {
      margin-bottom: 0; }
      .story_stage .characters_row .character.speaking {
        margin-bottom: 10px; }
  .story_stage .menu_bar {
    font-size: 0.7em; }
  .story_stage .row_controls {
    bottom: -30px; }

  .stage_intro_panel .scene_info {
    margin-bottom: 100px; }

  #helpers_menu_popover {
    width: 300px; }

  .headline.christmas {
    background: url(../../images/news/2018-12-24/christmas_special_banner.png?1) no-repeat;
    background-size: auto;
    min-height: 360px;
    display: flex;
    flex-direction: column-reverse; }
    .headline.christmas img {
      display: none; }
    .headline.christmas button.button_base {
      width: 10em;
      max-width: 10em;
      bottom: 0;
      left: 0;
      margin-bottom: 25px; }

  .line.action .horizontal_content {
    padding-bottom: 0.5em; }

  .profile_page .page_content {
    padding-top: 0; }
  .profile_page .nav_tabs.secondary {
    justify-content: center; }
    .profile_page .nav_tabs.secondary .tab {
      flex-direction: row; }
      .profile_page .nav_tabs.secondary .tab .tab_title {
        margin-top: 0;
        font-size: 1em;
        opacity: 1; } }

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