html {
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;    
    background-blend-mode: multiply;
    background-image: url('/images/cobble.png');
    background-color: #666;
    background-size: 64px 64px;
}

button {
    margin-left:5px;
    margin-right:5px;
    padding: 5px;
}

.container {
    position:relative;
    width: 800px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#loading-symbol {
    margin-top: 140px;
    width: 90px;
    height: 90px;
}

.content {
    display:inline-block;
    width:100%;
    background-color: rgb(0,0,0,0.2);
    min-height: 450px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.full {
    width: 100%;
}

.centered {
    margin-left: auto;
    margin-right: auto;
}

.bcell {
    text-align: center;
}

.bheader {
    padding:5px;
}

.header {
    position:relative;
    width: 100%;
    height: 300px;
    background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.897) 0%,rgba(0, 0, 0, 0) 100%), url("/images/banner.webp") ;
    background-size: cover;
}

.title {
    position: absolute;
    bottom: 40px;
    width: 300px;
    height: 80px;
}

.light {
    background-color: white;
}

.logo-circle-gradient {
    background: linear-gradient(180deg, rgb(207, 171, 10) 0%,rgb(240, 200, 21) 50%, rgb(237, 255, 76) 100%);
}

.title-box-gradient {
    background: linear-gradient(0deg, rgb(215, 218, 214) 0%,rgb(231, 231, 231) 20%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);
}

.engraved-text {
    color: rgb(240, 189, 21);
    text-shadow: 0px -0.8px 0.2px black;
    opacity:80%;
}

.padded {
    padding:2px;
}

.title-box {
    position:absolute;
    left:40px;
    top:10px;
    width:280px;
    height:80px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.title-text {
    padding-left: 30px;
    line-height: 80px;
    text-align: center;
    font-size: 20pt;
    letter-spacing: 1px;
}

.nuosu-sil-regular {
    font-family: "Nuosu SIL", "Times New Roman", serif;
    font-weight: 400;
    font-style: normal;
}  

.logo {
    position:absolute;
    bottom:-10px;
    left:-10px;
    width: 90px;
    height: 90px;
    border-radius: 50px;
    border-width: 5px;
    border-color: rgb(231, 231, 231);
    border-style: solid;
}

.logo-contained-item {
    position:absolute;
    left:12px;
    top:13px;
    opacity: 100%;
}

.nav-box {
    position:absolute;
    right:0px;
    width: 400px;
    height: 50px;
}

.nb1 {
    bottom: 20px;
}

.nb2 {
    bottom: -28px;
}


.nav {
    position:relative;
    float:right;
    height: 40px;
    line-height:40px;
    padding: 0 18px;
    margin-left:18px;
    
}

.btn {
    border-radius:5px;
}

.top-btn {
    padding-top: 10px;
    border-radius: 0px 0px 5px 5px;
}

.nav-box-gradient {
    background-image: linear-gradient(0deg, rgb(215, 218, 214) 0%,rgb(231, 231, 231) 20%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);
}

.nav-box-gradient:hover {
    background-image: linear-gradient(180deg, rgb(194, 197, 193) 0%,rgb(185, 185, 185) 20%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);
}

.nav-text {
    font-size:16px;
    color:black;
}

.osm-link {
    position:absolute;
    top:0px;
    right:0px;
    width: 100%;
}

.btn-icon {
    vertical-align: middle;
    margin-right:5px;
}

.options {
    position: relative;
    height: 65px;
    background-color: #111;
}

.recent-options {
    padding-left:171px;
}

.listing-options {
    padding-left: 28px;

}

.listing-option {
    position:relative;
    float:left;
    margin-top:15px;
    font-size: 18px;
    height:35px;
    line-height: 35px;
    padding: 0 20px;
    color:#ccc;
}

.line {
    border-style: solid;
    border-width: 0 1px 0 0;
    border-color: grey;
}

.listing-grid {
    float:left;
}

.listing-grid-description {
    position:relative;
    color:#ddd;
    width: 65%;
    padding-top:20px;
}

.sell-count {
    color:rgb(196, 79, 79);
    font-weight:bold;
}
.buy-count {
    color:rgb(0, 102, 219);
    font-weight: bold;
}

.item-box-img {
    width: 52px;
    height: 52px;
    padding: 4px 0 0 5px;
}

.item-box {
    position:relative;
    float:left;
    margin:20px 0 0 21.25px;
    width: 90px;
    height:60px;
    background-image: linear-gradient(0deg, rgb(215, 218, 214) 0%,rgb(231, 231, 231) 20%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);
    border-radius: 8px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.2);
    font-size: 12pt;
}

.item-box-count {
    position:absolute;
    height:30px;
    border-style: solid;
    border-color: #333;
    width: 30%;
    line-height: 30px;
    right: 0;
    text-align: center;
    font-style:normal;
    text-decoration: none;
}

.item-box-count:hover {
    background-image: linear-gradient(180deg, rgb(194, 197, 193) 0%,rgb(185, 185, 185) 20%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);

}

.item-box-sell {
    border-width: 0 0 1px 1px;
    border-radius: 0 8px 0 0;
    background-image: linear-gradient(0deg,rgb(231, 231, 231) 0%,rgb(231, 231, 231) 80%, rgb(236, 247, 255) 100%);
    top: 0;
}

.item-box-buy {
    border-width: 1px 0 0 1px;
    background: linear-gradient(0deg, rgb(215, 218, 214) 0%,rgb(231, 231, 231) 20%,rgb(231, 231, 231) 100%);
    border-radius: 0 0 8px 0;
    bottom: 0;
}

.item-details {
    float:left;
    position:relative;
    padding-top: 10px;
    width:100%;
}

.back-button {
    position: absolute;
    left: 20px;
    top: 30px;
    height: 40px;
    line-height:40px;
    padding: 0 18px;   
    color:black;
    text-decoration: none;
}

.item-details-name {
    text-align: center;
    color: #ddd;
    font-weight: bolder;
    font-size: 24pt;
    margin-top:28px;
}

.item-details-icon {
    position:relative;
    width: 120px;
    margin-top: 35px;
    margin-bottom: 35px;
    margin-left:auto;
    margin-right: auto;
}

#item-img {
    width:120px;
    height:120px;
}

.item-details-info {
    position:absolute;
    top: -5px;
    right:-10px;
    height: 25px;
    color:white;
    background-color: rgb(0, 102, 219);
    border-color:white;
    border-width:1px;
    border-style: solid;
    border-radius: 13px;
    font-weight:bold;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
    text-decoration: none;
    padding: 0 8px;
    font-family: 'Courier New', Courier, monospace;
}

.item-details-tabs {
    width:760px;
    height: 50px;
    margin-left:auto;
    margin-right:auto;
    background-color: #aaa;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.table-tab {
    float: left;
    width: 200px;
    height:49px;
    background-color: #ddd;
    line-height: 50px;
    text-align: center;
    margin-right:1px;
    border-width: 0 0 1px 0;
    border-color: #ccc;
    border-style: solid;
    color:#222;
    font-size: 18px;
    text-decoration: none;
}

.table-tab:hover {
    background-color: #eee;
}

.item-details-table {
    width: 750px;
    min-height: 100px;
    border-radius: 0 0 6px 6px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5px 25px 5px;
    background-color: #eee;
    color: #222;
}

.selected-tab {
    background-color: #eee;
    font-weight:bold;
}

.listing-table {
    border-collapse: collapse;
}

.listing-table-header > th {
    height: 35px;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #aaa;
}

.help {
    padding: 20px;
}

.listing-table-cell {
    height: 28px;
    position: relative;
    border-width: 1px 0;
    border-style: solid;
    border-color: #aaa;
    text-align: center;
}

.first-cell {
    padding-left: 15px;
}

.left-align-cell {
    text-align: left;
}

.right-rule-cell {
    border-right-width: 1px;
    border-right-style: dashed;
}

.listing-table-stock {
    line-height:26px;
}



.table-icon {
    display: inline;
    margin-top:3px;
    height: 20px;
    padding: 0 5px;
}

.hide-btn {
    display: inline-block;
    height: 25px;

}

.listing-hidden {
    opacity: 50%;
}

.help-title {
    color: #daa520;
    font-style: italic;
    font-size: 24px;
}

.help-content {
    color: #bbb;
    font-size: 18px;
    margin-bottom: 15px;
    text-decoration: none;
}

#last-updated {
    float:right;
    font-size: 10px;
    color: #888;
}

.stock-red {
    font-weight:bold;
    color: rgb(177, 0, 0);
}

.hover-cell {
    position:absolute;
    top:1px;
    left:0px;
    height:27px;
    line-height:27px;
    width: 100%;
    background-color:#eee;
    display: none;
}

.listing-table-cell:hover > .hover-cell {
    display: block;
}

.hover-text {
    text-decoration: underline dotted #888;
    text-decoration-thickness: 1px;
}

.recent-log {
    display: inline-block;
    width: 100%;
}

.recent-log-header {
    display: block;
    background-color:#eee;
    width: 750px;
    height:35px;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0px;
    border-radius: 10px 10px 0 0;
    border-width: 0 0 1px 0;
    border-color: #aaa;
    border-style:solid;

}

.include-title {
    display: inline-block;
    line-height:65px;
    color:#ddd;
    font-size:18pt;
    margin-right:10px;

}

.recent-tag {
    display:inline-block;
    padding: 0 10px;
    height:34px;
    font-size: 14px;
    border-radius: 5px;
    color: #eee;
    font-weight:bold;
    text-shadow: 0 1px 2px rgba(0,0,0, 0.5);
    line-height:34px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    width:90px;
    text-align:center;
}

.log-gradient {
    background-color:#eee;
}

.log-new {
    background-color:rgb(231, 241, 228)
}

.log-gradient:hover {
    background-color:#ddd;
}

.recent-tag-inline {
    flex-shrink:0;
    justify-content: flex-end;
    margin-top:8px;
    margin-left:10px;
    margin-right:8px;
    opacity: 1;
}

.recent-time {
    color: #222;
    position:relative;
    flex-shrink:0;
    justify-content: flex-end;
    height:34px;
    line-height:34px;
    margin-top:8px;
    margin-left:15px;
    margin-right:6px;
    font-size:14px;
    font-weight: bold;
}

.include-option {
    display:inline-block;
    vertical-align: top;
    margin-top:14px;
    margin-left: 12px;
    text-decoration: none;

}

.rlog {
    position:relative;
    display: flex;
    flex-direction: row;
    margin-left: auto;
    margin-right:auto;
    margin-top:0px;
    min-height:50px;
    width: 742px;
    text-decoration: none;
    border-style: solid;
    border-width: 0 0 1px 8px;
    border-color: #aaa;
}

.log-text {
    color: #222;
    padding: 12px 0;
    line-height: 25px;
    flex-grow:4;
    font-size:11pt;
    margin-left:12px;
}

.recent-icon {
    width:38px;
    height:38px;
    margin-top: 6px;
    margin-left: 12px;
    margin-right: 3px;
}

.new-shop {
    background-color: rgba(0, 94, 202, 0.9);
}

.new-shop-border {
    border-left-color: rgba(0, 94, 202, 0.7);
}

.out-of-stock {
    background-color: rgba(206, 0, 0, 0.9);
}

.out-of-stock-border {
    border-left-color: rgba(206, 0, 0, 0.7);
}

.restocked {
    background-color: rgba(40, 199, 0, 0.9);
}

.restocked-border {
    border-left-color: rgba(40, 199, 0, 0.7);
}

.improved-prices {
    background-color: rgba(3, 161, 223, 0.9);
}

.improved-prices-border {
    border-left-color: rgba(3, 161, 223, 0.7);

}

.removed {
    background-color: rgba(223, 120, 3, 0.9);
}

.removed-border {
    border-left-color: rgba(223, 102, 3, 0.7);

}

.include-option:hover {
    color: #c5c5c5;
    background-color: #aaa;
}

.filter-disabled {
    color: #888;
    background-color: #313131;
}

.divider {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    height:35px;
}

#recent-offers-count {
    position:absolute;
    top: -12px;
    right:-10px;
    height: 25px;
    color:white;
    background-color: rgb(0, 102, 219);
    border-color:white;
    border-width:1px;
    border-style: solid;
    border-radius: 13px;
    font-weight:bold;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    text-decoration: none;
    padding: 0 9px;
    letter-spacing: -0.6px;
    font-family: 'Courier New', Courier, monospace;
}

.italic {
    font-weight:bold;
}