html {
    box-sizing: border-box;
    background-color: #454A51;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #f3f3f3;
    font-size: 1.2em;
}

.navbar {
    background-color: rgb(40, 47, 47)!important;
}

.container>.navbar .navbar-brand, .navbar>.container .navbar-brand{
    margin-left: 20px;
}

.is-dark {
    background-color:  #3A3F47!important;
}

.typeahead__container {
    width: 100%;
}

.item-search-container {
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
}

.discord-text {
    margin-left: 10px;
}

.nav-title {
    padding-left: 0;
}

.login {
    margin: auto;
    width: 100%;
}

.burger-menu {
    margin-right: 0!important;
}


.divider {
    background-color: #ACACAC;
    height: 1px;
    margin-top: 0.5em;
    margin-bottom: 2em;
}

.no-pad-bottom {
    margin-bottom: 0;
}

.popular-item {
    color: inherit;
    text-decoration: none;
    padding: 0.3em 0.0em 0.2em;
}

.popular-item:hover > a {
    color: #9fc8df;
}

.popular-item-row {
    padding-left: 1em;
    padding-right: 1em;
}

.navbar-link:hover {
    color: #9fc8df;
}

.server:hover {
    color: #9fc8df!important;
}

.link-soft {
    color: inherit;
    text-decoration: none;
}
.link-soft:hover {
    color: #9fc8df!important;
}

.popular-item-title {
    color: #f3f3f3;
    font-size: 1.5em;
}

.server-select {
    font-size: 20px;
}

.server {
    font-size: 18px;
}

.item-search {
    background-color: #ffffff;
    color: #000000;
}
.typeahead__list {
    background-color: #1a1a1a;
    color: #ffffff;
}
.typeahead__item > a {
    background-color: #1a1a1a;
    color: #ffffff;
}
.typeahead__item.active {
    background-color: #ff7575;
    color: #ffffcc;
}

.item-search::placeholder {
    color: #6c6b6bc4;
}
.item-search-alerts::placeholder {
    color: #6c6b6bc4;
}
.item-search-alerts {
    background-color: #ffffff;
    color: #000000;
}

.lowest-price-text {
    font-size: 4.3em;
}
.highest-buyorder-text {
    font-size: 0.9em;
     color: #1d72aa;
    margin-top: -15px;
    align-self: center;
}


.item {
    display:flex;
    flex-direction:column;
}

.lowest-price-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.1em;
}

.lowest-price-item {
    align-self: center;
}

.lowest-price-item.top {
    margin-bottom: auto;
}

.lowest-price-item.middle {
    margin: auto;
}

.lowest-price-item.bottom {
    margin-top: auto;
}
.left-container {
    display: block;
    position: fixed;
    width: 180px;
    height: calc(100% - 80%)
}
.right-container {
    display: block;
    position: fixed;
    inset: 20px 0 auto auto;
    width: 320px;

}
#video1 {
    position: fixed;
    inset: auto 10px 10px auto;
    width: 320px;
    height: 180px;
}
.blue_text{
  color: lightsteelblue;
}
.yellow_text{
  color: darkkhaki;
}
.grey_text {
  color: #b9b9b9;
}

.full-height {
    height:100%;
}
.overlay_timestamp_column {
    flex: none;
    width: 30%
}
.hidden {
    display: none!important;
}
.red-dot {
  height: 15px;
  width: 15px;
  background-color: #9a0303;
  border-radius: 50%;
  display: inline-block;

}
.green-dot {
  height: 15px;
  width: 15px;
  background-color: #22881f;
  border-radius: 50%;
  display: inline-block;

}
.orange-dot {
  height: 15px;
  width: 15px;
  background-color: #9f4c1c;
  border-radius: 50%;
  display: inline-block;

}
.tab-pane {
    display: none
}
.is-active {
    display: initial
}
.news_li li{
    margin-left: 50px;
    list-style: disc;
}
.accordions .accordion .accordion-header, .accordion{
    background-color: #32363d !important;
}
.accordions .accordion .accordion-header+.accordion-body{

    border-color:#32363d !important;
}
.accordion-content{
    color: #ffffff;
    background-color: #454a51!important;
}
.ph-item {
    background-color: transparent!important;
    border-color: transparent!important;
}


@media only screen and (max-width: 600px) {
  .no-pad-mobile {
    padding: 0;
  }
}
@media screen and (min-width: 1408px) {
    .container {
        max-width: 1152px
    }
}
@media screen and (max-width: 1670px) {
    .right-container {
        display: none;
    }
}
.typeahead__list {
    background-color: rgb(40, 47, 47);
    border-color: #f3f3f3;
    border-bottom-color: #f3f3f3;
}

.typeahead__item > a {
    color: #f3f3f3!important;
    background-color: rgb(40, 47, 47);
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    color: #9fc8df;
}

.column-title {
    font-weight: bold;
    font-size: 18px;
}

.discord-img {
    border-radius: 50%;
    border: 2px solid white;
    height: 100px;
    width: 100px;
}

.highlight {
    color: #f9ffbf;
}

.password-input {
    background-color: #1a1a1a;
    color: #ffffff;
    height: 2em;
    width: 15em;
}

.password-submit {
    height: 2em;
    padding-top: 2px;
}

.dashboard-table{
    background-color: transparent;

}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.custom-item-selection-modal .navbar-item {
    background-color: transparent!important;
}
.custom-item-selection-modal .item-search-container {
    margin: auto!important;
}
.custom-item-selection-modal .delete{
    display: none;
}

.notification-container{
    position: fixed;
    z-index: 32;
    top:10%;left:50%;transform:translate(-50%, -50%);

}
@supports (position: sticky) {
  .notification {
    position: sticky;
    z-index: 32;
    top: 0%; // Threshold is required
  }
}

.item-alert-row{
    border-bottom: 2px solid #282f2f;
    padding-bottom: 15px;

}

.password-input::placeholder {
    color: #6c6b6bc4;
}

.black-background {
    background-color: black!important;
}

.box {
    background-color:  #3A3F47;
}
.tracked-item{
    padding: 10px;
    box-shadow: 0 0.5em 0.7em -0.125em rgb(10 10 10 / 15%), 0 0 0 1px rgb(10 10 10 / 5%);
}
.lock-icon{
    max-width: 70%;
    margin-left: 15%

}
.tabs {
    margin-bottom: -1px !important;
    justify-content: left;
}
.tab-content {

    padding-top: 10px;
}
.tab-pane {
    display: none
}
.is-active {
    display: initial
}
/* tracked items in custom dashboard*/
/*-------------------------------------*/
.item-name { grid-area:item-name; }
.updated { grid-area: updated; }
.mini-graph { grid-area: mini-graph;
    display: flex;
    align-items: center;
    justify-content: center;
}
.price { grid-area: price;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
}
.change { grid-area: change; text-align: right;}

.grid-container {
  display: grid;
  grid-template-areas:
    'item-name mini-graph price'
    'updated mini-graph change';

  gap: 10px;
  padding: 10px;
  row-gap: 0px;
    width:100%;
}


/*--------------------------------*/
/*Item alerts in custom dashboard*/
.container-custom-alerts {  display: grid;
  grid-template-columns: 0.4fr 0.4fr 0.4fr 0.4fr 1fr 1fr 0.6fr 0.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 10px;
  grid-auto-flow: row;
  grid-template-areas:
    "item-name       item-name           item-name        item-name          price-below price-above perc-decrease perc-increase active-toggle delete-btn"
    "low-price-title current-price-title high-price-title price-change-title price-below price-above perc-decrease perc-increase active-toggle delete-btn"
    "low-price       current-price       high-price       price-change       price-below price-above perc-decrease perc-increase active-toggle delete-btn";
    align-items: center;

}
.container-custom-alerts a{
    color: #1abc9c!important;
    text-decoration: none!important;
    transition: all 200ms ease!important;
}
.container-custom-alerts div{
    font-size: 14px;
}

.container-custom-alerts .item-name {
    font-size: 20px;
}

.item-name-alerts { grid-area: item-name; }

.low-price-title { grid-area: low-price-title; }

.high-price-title { grid-area: high-price-title; }

.current-price-title { grid-area: current-price-title; }

.low-price { grid-area: low-price; }

.current-price { grid-area: current-price; }

.high-price { grid-area: high-price; }

.price-above { grid-area: price-above;}

.price-below { grid-area: price-below; }

.perc-increase { grid-area: perc-increase; margin-left: -20px;}

.perc-decrease { grid-area: perc-decrease; }

.active-toggle { grid-area: active-toggle; justify-self: center;}

.delete-btn { grid-area: delete-btn; justify-self: center;}


.grid-container > div {
  padding: 0px 0;

}

.typeahead__list{
    max-height: 230px;
    overflow-y: scroll;

}
/*--------------------------------*/
.timestamp{
    font-size: 0.5em;
}
.highcharts-container {
    overflow: visible !important;
}
.tooltip {
    position: relative;
    z-index: 50;
    border: 1px solid rgb(0, 108, 169);
    border-radius: 2px;
    background-color: #ffffff;
    padding: 0px;
    font-size: 7pt;
}

.navbar, .navbar-item {
    background-color:  #3A3F47!important;

}

.column.p-3 {
    padding-bottom: 0em!important;
}

.full-width {
    width: 100%;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex: 1 1 0px
}

@media all and (max-width: 1215px) {
    .flex-container {
        flex-wrap: wrap;
    }

    #competitive-bar-column {
        width: 100%;
        flex-basis: 100%;
    }

    .lowest-price-text {
        font-size: 3.3em;
    }
     .highest-buyorder-text {
        font-size: 0.75em;
         color: #1d72aa;
         align-self: center;
    }

    .items-column {
        flex-basis: 400px;
    }
}

@media only screen and (max-width: 1024px) {
    .lowest-price-text {
        font-size: 2.8em;
    }
       .highest-buyorder-text {
        font-size: 0.6em;
         color: #1d72aa;
           align-self: center;
    }
}
@media only screen and (max-width: 1024px) {
    .left-container{
        display: none;
    }
}

@media only screen and (min-width: 1024px) {
    .item-search-container {
        max-width: 320px;
        width: 100%;
    }

    .white-border {
        border: 1px solid #ACACAC;
    }

    .mt-4-desktop {
        margin-top: 1rem;

    }

    .mt-1-desktop {
        margin-top: 0.25rem;
    }

    .pr-1-desktop {
        padding-right: 20px;
    }
}
@media only screen and (max-width: 1980px) {
    .mt-4-desktop {
        margin-left: 180px;
        margin-right: 340px;
    }
}
@media only screen and (max-width: 1024px) {
    .mt-4-desktop {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media only screen and (max-width: 1024px) {
    .mt-4-desktop {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media all and (min-width: 1216px) {
    #competitive-bar-column {
        max-width: 33%;
    }


}
@media all and (min-width: 1776px) {

    .item-search-container {
        max-width: 509px;

    }
}
@media all and (max-width: 424px) {

    .nav-title {
        font-size: 1.0rem!important;

    }
}
.card {
    background-color: #3A3F47;
}

.media-content {
    overflow-y: hidden;
}
.modal-card-title {
    font-size: 1.3rem;

}