/* roboto-condensed-300 - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: local(''),
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-regular - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: local(''),
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* roboto-condensed-700 - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: local(''),
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('fonts/roboto-condensed/roboto-condensed-v24-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



/* inter-300 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('fonts/inter/inter-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/inter/inter-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('fonts/inter/inter-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/inter/inter-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* inter-700 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('fonts/inter/inter-v8-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/inter/inter-v8-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



:root {
    --accent-color: #1dd1a1;
    --accent-color--active: #10ac84;
    --switch-color: #ff6b6b;
    --switch-color--active: #ee5253;
    --secondary-color: #8b9bb4;
    --card-radius: 16px;
    --card-size: 300px;
}



* {
    box-sizing: border-box;

    accent-color: var(--accent-color);
    color-scheme: dark;
}

body {
    font-family: var(--font-stack-ui);
    font-size: 1em;
    background-color: #262b44;
    color: #ffffff;
    margin: 0;
}
input[type="button"],
input[type="color"],
select,
button {
    font-family: inherit;
    font-weight: 400;
    font-size: 15px;
    padding: 8px 16px;
    cursor: pointer;
}
input[type="color"] {
    padding: 2px;
}

.cryptid,
textarea {
    font-family: var(--font-stack-mono);
    background-color: #333333;
    color: #ffffff;
}

table,
tr,
td {
    border: 1px solid black;
}

table {
    border-collapse: collapse;
    /*
    margin: 0 auto;
    /**/
}

tr {
    height: 20px;
    margin: 0;
    padding: 0;
}

td {
    width: 20px;
    margin: 0;
    padding: 0;
    background-color: rgb(48, 48, 48);
}

td:hover {
    cursor: crosshair;
}

.editor--main {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.editor--cell {
    flex: 1;
    flex-basis: 100%;

    margin: 0;
    padding: 0;
}

@media all and (max-width: 768px) {
    .editor--main {
        flex-wrap: wrap;
    }
    .editor--cell {
        flex-basis: 100%;
    }
}

.editor--cell h3 {
    margin-top: 0;
    color: #c8d6e5;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
}

h2 {
    margin: 0;
    font-weight: 300;
}













:root {
    --pixel-size: 16px;
    --wrapper-size: calc(var(--pixel-size) * 16);
}


:root {
    --card-background: #3c40c6;
    --card-accent: #6ab04c;
}

.bot--card-inner,
.ogre--card-inner {
    position: relative;
    padding: 20px;
    color: #fff;
    width: calc(300px + 20px + 20px);
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--card-background);

    backdrop-filter: blur(8px) saturate(50%);
}
.ogre--card-inner {
    width: 296px;
}

.bot--card-inner--after,
.ogre--card-inner--after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(to bottom right, var(--card-background) 14%, transparent),
                linear-gradient(to bottom right, var(--card-background), var(--card-accent));
}




.bot-wrapper,
.wrapper {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    filter: drop-shadow(0 32px 32px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
}
.wrapper {
    width: 256px;
    height: 256px;
}
.has-glow .bot-wrapper::after,
.has-glow .wrapper::after {
    content: "";
    background: linear-gradient(
45deg, #ff0000 0%, #ff9a00 10%, #d0de21 20%, #4fdc4a 30%, #3fdad8 40%, #2fc9e2 50%, #1c7fee 60%, #5f15f2 70%, #ba0cf8 80%, #fb07d9 90%, #ff0000 100% ) repeat 0% 0% / 300% 100%;
    position: absolute;
    inset: -1px;
    border-radius: var(--card-radius);
    filter: blur(8px);
    animation: rgb 6s linear infinite;
    z-index: -1;
}

.pixel {
    width: var(--pixel-size);
    height: var(--pixel-size);
    background-color: gray;
}



.is-ogre {
    text-transform: uppercase;
}
.is-ogre-font {
    font-family: '04b_19';
    font-weight: normal;
}

.ui--wall--o-overlay,
.o-overlay {
    margin-top: -100px;
    position: relative;
    z-index: 1;
}
.ui--wall--o-title,
.o-title {
    font-family: '04b_19';
    font-weight: normal;
    text-transform: uppercase;
    mix-blend-mode: overlay;
    opacity: 0.42;

    font-size: 135px;
    line-height: 1;
    transform: translateY(-21px);
    position: relative;
    z-index: 1;
}
.o-title {
    font-size: 116px;
}
.ui--wall--o-rune,
.o-rune {
    display: flex;
    justify-content: center;
    font-weight: 400;
}
.ui--wall--o-rune-font,
.o-rune-font {
    font-family: 'runes';
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    display: inline-flex;
    margin: 0 6px;
}


.ui--wall--o-badge-container,
.o-badge-container {
    display: flex;
    justify-content: center;
    margin: 34px auto 0 auto;
}

.ui--wall--o-badge,
.o-badge {
    font-family: 'Roboto Condensed';
    display: inline-flex;
    line-height: 1;
    padding: 2px 8px 4px 8px;
    margin: 0 2px;
    font-size: 14px;
    text-shadow: 0 1px rgb(0 0 0 / 25%);
    border-radius: 0 16px 16px 16px;
}
.ui--wall--o-badge--type,
.o-badge--type {
    background-color: red;
}

.ui--wall--o-number,
.ui--wall--o-generation,
.ui--wall--o-rarity,
.ui--wall--o-description,
.o-number,
.o-generation,
.o-rarity,
.o-description {
    font-family: "Roboto Condensed";
}
.ui--wall--o-number,
.o-number {
    font-size: 12px;
}

.ui--wall--o-generation,
.ui--wall--o-rarity,
.o-generation,
.o-rarity {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.ui--wall--o-generation,
.o-generation {
    font-size: 16px;
}
.ui--wall--o-rarity,
.o-rarity {
    font-weight: 300;
}

.ui--wall--o-name,
.o-name {
    font-family: "Upheaval TT (BRK)";
    text-align: center;
    font-size: 54px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 16px;
    color: #ffffff;
    mix-blend-mode: overlay;
    text-shadow: 0 8px 16px rgb(0 0 0 / 42%);
}
.ui--wall--o-description,
.o-description {
    /** For now **/
    display: none;

    font-weight: 400;
    font-size: 13px;
    text-align: center;
    margin: 32px auto 0 auto;
    height: 48px;
    overflow: hidden;
}

.ui--wall--o-rune,
.ui--wall--o-name,
.ui--wall--o-description,
.o-rune,
.o-name,
.o-description {
    position: relative;
    z-index: 1;
}



.cube-wrapper-outer {
    perspective: 1000px;
}

.cube_wrapper {
	transform: rotateX(-30deg) translateX(-50%);
	margin: 100px auto;
	left: 50%;
	position: absolute;
	transform-style: preserve-3d;
    transform: rotate3d(1, 0, 0, 10deg);
}

.cube {
	transition: all 0.3s ease;
	height: 200px;
	width: 200px;
	transform: rotateY(-45deg);
	transform-style: preserve-3d;
	animation: cube_rotate 8s infinite cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.cube_face {
	background: rgb(50, 50, 50);
	position: absolute;
	transform-style: preserve-3d;
	box-sizing: border-box;
	backface-visibility: hidden;
	height: 200px;
	width: 200px;
}
.cube_face .cube_face_side {
    box-shadow: inset 0 0 0 0px rgb(0 0 0),
                inset 0 0 0 16px rgb(255 255 255 / 10%);
}

.cube_face img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 200px;
	width: 200px;
}

.cube .cube_face:nth-child(1) {
	transform: rotateX(90deg) rotateY(0deg) translateZ(100px);
	filter: brightness(90%);
}

.cube .cube_face:nth-child(2) {
	transform: rotateX(0deg) rotateY(0deg) translateZ(100px);
}

.cube .cube_face:nth-child(3) {
	transform: rotateX(0deg) rotateY(90deg) translateZ(100px);
}

.cube .cube_face:nth-child(4) {
	transform: rotateX(0deg) rotateY(180deg) translateZ(100px);
}

.cube .cube_face:nth-child(5) {
	transform: rotateX(0deg) rotateY(270deg) translateZ(100px);
}

.cube .cube_face:nth-child(6) {
	transform: rotateX(-90deg) rotateY(0deg) translateZ(100px);
}

@keyframes cube_rotate {
	0% {
        transform: rotateY(-15deg) rotateX(-90deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg);
    }
	100% {
        transform: rotateY(345deg) rotateX(-90deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg) rotateX(-90deg) rotateZ(90deg);
    }
}












.bot--card-tilt,
.ogre--card-tilt {
    perspective: 720px;
    transform-style: preserve-3d;
    width: calc(300px + 20px + 20px);
    user-select: none;

    /** Glass
    mix-blend-mode: screen;
    backdrop-filter: blur(2px);
    /**/
}
.ogre--card-tilt {
    width: 296px;
}

.bot--card,
.ogre--card {
  box-shadow: 0 1px 5px #00000099;
  border-radius: var(--card-radius);
  
  position: relative;
  
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;

  backface-visibility: hidden;
}

.ogre--card::after {
    content:"";
    background: linear-gradient(45deg,
                #ff0000 0%, 
                #ff9a00 10%,
                #d0de21 20%,
                #4fdc4a 30%, 
                #3fdad8 40%,
                #2fc9e2 50%, 
                #1c7fee 60%, 
                #5f15f2 70%, 
                #ba0cf8 80%, 
                #fb07d9 90%, 
                #ff0000 100%  )
                repeat 0% 0% / 300% 100%;
    position: absolute;
    inset: -2px;

    border-radius: var(--card-radius);

    filter: blur(48px);
    opacity: 0.5;
    /*
    transform: translateZ(-1px);
    /**/

    animation: rgb 6s linear infinite;
    z-index: -1;
    overflow: hidden;
}


.ogre--card[data-rarity="unique"] .ogre--card-inner--before {
    background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/82c7d4af-f961-4db5-ad23-d8fb05511d09/d5upc6y-ab469e1d-ed42-4b10-9d36-3bd995bbe90c.jpg/v1/fill/w_1307,h_611,q_70,strp/speed_painting___valley_city_by_antifan_real_d5upc6y-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODMxIiwicGF0aCI6IlwvZlwvODJjN2Q0YWYtZjk2MS00ZGI1LWFkMjMtZDhmYjA1NTExZDA5XC9kNXVwYzZ5LWFiNDY5ZTFkLWVkNDItNGIxMC05ZDM2LTNiZDk5NWJiZTkwYy5qcGciLCJ3aWR0aCI6Ijw9MTc3NyJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.otkP-FLxG_w_JREhWdtk4Dv4BPxhDWKCuA9heDEdqCA) no-repeat center center;
    image-rendering: pixelated;
}
.ogre--card[data-rarity="rare"] .ogre--card-inner--before {
    background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/3bc5a1a3-3b61-4863-80aa-470ae314a0f6/d720wmz-62a5a8eb-634b-40db-8557-9d11fe8cdf92.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzNiYzVhMWEzLTNiNjEtNDg2My04MGFhLTQ3MGFlMzE0YTBmNlwvZDcyMHdtei02MmE1YThlYi02MzRiLTQwZGItODU1Ny05ZDExZmU4Y2RmOTIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0._3rJO-loJzbpZqiCBWM8qwHL2hOB3nDW2KOoNw5dgSg) no-repeat center center;
    image-rendering: pixelated;
}


.bot--card-inner--before,
.ogre--card-inner--before {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;

    border-radius: var(--card-radius);
}

[data-has="black"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/black.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="rock"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/rock.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="relic"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/relic.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}

[data-has="frosted"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/frosted.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="glossy"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/glossy.jpg") no-repeat center center / cover;
    mix-blend-mode: overlay;
}
[data-has="brushed"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/brushed.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="oxi"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/oxi.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="wow"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/wow.jpg") repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="fire"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/fire.jpg") repeat center center / cover;
    mix-blend-mode: color-dodge;
}
[data-has="magma"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/magma.jpg") repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-has="cracks"] .ogre--card-inner--before {
    background: #282828 url("assets/backgrounds/cracks.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    filter: brightness(0.5);
}






.wrapper--before {
    content: '';
    right: 0px;
    bottom: 0px;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;

    border-radius: var(--card-radius);
}
[data-type="ogre-1"] .wrapper--before {
    background: url("assets/skins/ogre-1.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="ogre-1"] .ogre--card-inner--before {
    background: url("assets/skins/ogre-1.jpg") no-repeat center center / cover;
    mix-blend-mode: color-dodge;
}

[data-type="ogre-2"] .wrapper--before {
    background: url("assets/skins/ogre-2.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="ogre-2"] .ogre--card-inner--before {
    background: url("assets/skins/ogre-2.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

[data-type="ogre-3"] .wrapper--before {
    background: url("assets/skins/ogre-3.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="ogre-3"] .ogre--card-inner--before {
    background: url("assets/skins/ogre-3.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

[data-type="ogre-4"] .wrapper--before {
    background: url("assets/skins/ogre-4.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="ogre-4"] .ogre--card-inner--before {
    background: url("assets/skins/ogre-4.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

[data-type="ogre-5"] .wrapper--before {
    background: url("assets/skins/ogre-5.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="ogre-5"] .ogre--card-inner--before {
    background: url("assets/skins/ogre-5.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

[data-type="metal-1"] .wrapper--before {
    background: url("assets/skins/metal-1.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="metal-1"] .ogre--card-inner--before {
    background: url("assets/skins/metal-1.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}
[data-type="metal-2"] .wrapper--before {
    background: url("assets/skins/metal-2.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="metal-2"] .ogre--card-inner--before {
    background: url("assets/skins/metal-2.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}
[data-type="metal-3"] .wrapper--before {
    background: url("assets/skins/metal-3.png") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="metal-3"] .ogre--card-inner--before {
    background: url("assets/skins/metal-3.png") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}
[data-type="metal-4"] .wrapper--before {
    background: url("assets/skins/metal-4.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="metal-4"] .ogre--card-inner--before {
    background: url("assets/skins/metal-4.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}
[data-type="camo-1"] .wrapper--before {
    background: url("assets/skins/camo-1.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
}
[data-type="camo-1"] .ogre--card-inner--before {
    background: url("assets/skins/camo-1.jpg") no-repeat center center / cover;
    mix-blend-mode: soft-light;
    opacity: 0.5;
}




.has-tilt .ogre--card-back {
    display: none;
}


@keyframes rgb {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}


.ogre--card .glow {
        border-radius: var(--card-radius);

  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
  mix-blend-mode: overlay;
}



/**
 * viewer
 */
.editor--cell-viewer {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 48px 0;
    background-color: #1d162c;

    box-sizing: border-box;
    width: 100vw;
    max-width: initial;
    left: 50%;
    right: 50%;
    margin: 0 -50vw;
}

















.o-bot {
    display: inline-block;
    position: relative;
    image-rendering: pixelated;
    border-radius: var(--card-radius);
}






#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    margin: auto;
    background-color: #22a6b3;
    color: #fff;
    text-align: center;
    border-radius: 2px;

    position: fixed;
    z-index: 1;
    left: 0;right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
}
#toast #img{
	width: 50px;
	height: 50px;
    
    float: left;
    
    padding-top: 16px;
    padding-bottom: 16px;
    
    box-sizing: border-box;

    
    background-color: #130f40;
    color: #fff;

    margin: 0;
    justify-content: center;
}
#toast #desc{

    
    color: #fff;
   
    padding: 16px;
    
    overflow: hidden;
	white-space: nowrap;
}

#toast.show {
    visibility: visible;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}

@keyframes shrink {
    from {min-width: 350px;} 
    to {min-width: 50px;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}




.ui--wall--bots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.ui--wall--bots .ui--wall--bot {
    margin-bottom: 48px;
    flex-basis: 100%;
}
.ui--wall--bots .ui--wall--time {
    color: #8395a7;
}
.ui--wall--bots .ui--wall--user-role,
.ui--badge {
    font-family: var(--font-stack-ui);
    letter-spacing: 0;
    display: inline-block;
    margin: 0 8px;
    padding: 1px 0.35em;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.26;
    text-decoration: none;
}
.ui--badge.ui--badge-beta {
    color: #000000;
    background: #00FF00;
}
.ui--badge.ui--badge-alpha {
    color: #000000;
    background: gold;
}