/* ANIMATIONS */

@keyframes fade_out_room_status { 70% {opacity: 0.8} 100% {opacity: 0;} }

@keyframes common_item_appear {
    0% {color: greenyellow;}
    100% {color: var(--common-color);}
}
@keyframes uncommon_item_appear {
    0% {color: greenyellow;}
    100% {color: var(--uncommon-color);}
}
@keyframes rare_item_appear {
    0% {color: greenyellow;}
    100% {color: var(--rare-color);}
}
@keyframes epic_item_appear {
    0% {color: greenyellow;}
    100% {color: var(--epic-color);}
}
@keyframes legendary_item_appear {
    0% {color: greenyellow;}
    100% {color: var(--legendary-color);}
}

/* CLASSES */
.common {
    color: var(--common-color);
}
.common.item_appear {
    animation: common_item_appear ease forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}
.uncommon {
    color: var(--uncommon-color);
}
.uncommon.item_appear {
    animation: uncommon_item_appear ease forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}
.rare {
    color: var(--rare-color);
}
.rare.item_appear {
    animation: rare_item_appear ease forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}
.epic {
    color: var(--epic-color);
}
.epic.item_appear {
    animation: epic_item_appear ease forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}
.legendary {
    color: var(--legendary-color);
}
.legendary.item_appear {
    animation: legendary_item_appear ease forwards;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
  
.info {   
    width: fit-content;
    max-width: 270px;
    padding: 10px 20px;
    background: var(--primary-bg-color);
    border-radius: 3px;
    border-color: var(--primary-text-color);
    border-width: 1px;
    position: absolute;
    visibility: hidden;
    box-shadow: 0 0 50px 0 rgba(f,f,f,.5);
}

.arrow_down {
    position: absolute;
    margin-top: 10px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--primary-text-color);
}
.arrow_up {
    position: absolute;
    margin-bottom: 10px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--primary-text-color);
}

body {
    color: var(--primary-text-color);
    background-color: var(--primary-bg-color);
}

input[type=text] {
    padding-left: 2px;
    padding-right: 2px;
    color: var(--primary-bg-color) !important; 
}

input.token_amount_to_send {
    padding-left: 4px;
    padding-right: 4px;
    width: 4.5rem;
    text-align: end;
}

input.error {
    border-color: red !important;
    border-width: 1px !important;
}

button.error {
    border-color: red !important;
    border-width: 1px !important;
}

button {
    border: 1px solid var(--primary-text-color);
    padding-left: 6px !important;
    padding-right: 5px !important;
}

.offer {
    width: 100%;
    padding-left: 10px;
    padding-right: 8px;
    padding-top: 2px;
}
.locked {
    border: solid 1px gray;
    padding-left: 9px;
    padding-right: 7px;
    padding-top: 1px;
}

.accepted {
    border: solid 1px var(--primary-text-color) !important;
}

.bottom_row_tab_title {
    cursor: pointer;
}

.bottom_row_tab_title.deselected {
    color: gray;
}

.bottom_row_tab_title.selected {
    text-decoration: underline;
    color: var(--primary-text-color);
}

#full_map {
    border-width: 1px;
    border-color: var(--primary-text-color);
}

.selected_item {
    color: yellow;
}