:root {
    --menu: #0d102d;    /*rgb(56, 125, 132);*/
}

/* Materials */
.frost_glass {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.5);
}

.frosted {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.white_glass {
    background-color: rgba(255, 255, 255, 0.5);
}

.white_board {
    background-color: white;
}

.material_black {
    background-color: black;
}

.dark {
    background-color: rgba(0, 0, 0, 0.5);
}

.shadow {
    box-shadow: 0 0.3em 0.6em -0.3em black;
}

.small_shadow {
    box-shadow: 0 0.2em 0.4em -0.2em black;
}

.flat_shadow {
    box-shadow: 0 0 0.0 0.05em #00000021;
}

.backdrop_shadow {
    filter: drop-shadow(0 0.1em 0.1em rgba(0, 0, 0, 0.5));
}

.no_shadow {
    box-shadow: 0 0 0 transparent;
}

.rounded {
    border-radius: 1em;
}

.roundish {
    border-radius: 0.5em;
}

.sharp {
    border-radius: 0 !important;
}

.white_border {
    box-shadow: 0 0 0 0.1em white;
}

.black_border {
    box-shadow: 0 0 0 0.1em black;
}

.text_shine {
    text-shadow: 0 0 0.5em white;
}

.blueish {
    background-color: #173e5614;
}

.red {
    background-color: #f6193b;
    color: white;
}
.green {
    background-color: #3da25c;
    color: white;
}

.invert_color {
    background: #505050;
    color: white;
}

.bw_filter {
    filter: grayscale(1);
}

.white_filter > img {
    filter: contrast(0) brightness(2);
}

.white_icon {
    box-shadow: 0 0 0em 0.05em white;
    background-color: #00000078;
}
.white_icon > img {
    filter: brightness(1.0) !important;
}

/* Turns white icons blue */
.blue_icon > img {
    filter: sepia(1) saturate(45) hue-rotate(110deg) brightness(0.6) !important;
}

.no_events {
    pointer-events: none;
}

.no_overflow {
    overflow: hidden;
}

.draggable img {
    pointer-events: none;
}

.recessed:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0 0.3em 0.6em -0.3em black;
    pointer-events: none;
}

.text_shadow {
   text-shadow: 0 0.2em 0.2em BLACK; 
}

.raised {
    box-shadow: 0 0.3em 0.6em -0.3em black;
}

.slot {
    border: 0.15em dotted black;
}

.rotate45 {
    transform: rotateY('45deg');
    transition-duration: 300ms;
}

.right_corner {
    background-color: #0000007d;
    border-bottom-left-radius: 0.5em;
}

.fade_text {
    background: linear-gradient(90deg, rgba(255,255,255,1) 95%, rgba(255,255,255,0) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.header_select {
    background-color: black;
}
.header_select > img {
    filter: brightness(1.0) !important;
}
.header_select > p {
    color: white;
}

/* ----- */

.fail_animation {
    background-color: rgb(255, 0, 89);
	-webkit-animation: vibrate 0.3s linear infinite both;
	        animation: vibrate 0.3s linear infinite both;
}
@-webkit-keyframes vibrate {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
  }
  @keyframes vibrate {
    0% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
    20% {
      -webkit-transform: translate(-2px, 2px);
              transform: translate(-2px, 2px);
    }
    40% {
      -webkit-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
    }
    60% {
      -webkit-transform: translate(2px, 2px);
              transform: translate(2px, 2px);
    }
    80% {
      -webkit-transform: translate(2px, -2px);
              transform: translate(2px, -2px);
    }
    100% {
      -webkit-transform: translate(0);
              transform: translate(0);
    }
}





.header {
    margin-top: 0.5em;
    box-shadow: 0 0.5em 1em -0.5em black;
    border-radius: 1em;
}


.banner > .selector {
    border-radius: 10em;
    margin: 0.25em;
    box-shadow: 0 0.5em 1em -0.5em black;
}
.banner > .selector > .option {
    border-radius: 10em;
    background-color: #ffffff91;
    transition-duration: 300ms;
}
.banner > .selector > .option.select {
    background-color: white;
    box-shadow: 0 0 0.7em 0.4em white;
    transition-duration: 300ms;
}


.page_background {
    background-color: #d2ebeb;
}

.basic_box {
    border-radius: 1em;
}


.scrollbar {
    border-radius: 1em;
    background-color: #ffffff8f;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 0.2em 0.4em -0.2em black;
}
.scrollbar.mini {
    background-color: black;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    width: 0.1em;
}



.market_item_info {
    width: 100%;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: #ffffff38;
    border-radius: 1em;
}
.market_item_info > .other {
    position: relative;
    width: calc(100% - 0.5em);
    padding-right: 0.5em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
    color: white;
}
.market_item_info > .other > p:nth-child(1) {
}
.market_item_info > .other > p:nth-child(2) {
    font-weight: 500;
    font-size: 1.2em;
    text-align: right;
}

.space_item_info {
    width: 100%;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: #ffffff38;
    border-radius: 1em;
}
.space_item_info > .other {
    position: relative;
    width: calc(100% - 0.5em);
    padding-right: 0.5em;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-end;
    color: white;
}
.space_item_info > .other > p:nth-child(1) {
}
.space_item_info > .other > p:nth-child(2) {
    font-weight: 500;
    font-size: 1.1em;
    text-align: right;
}


.picture_card.pinned {
    position: fixed;
    z-index: 10;
}