@font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-VariableFont_wdth,wght.ttf")
}

.container {
    padding: 30px;
}

.body-override {
    background-color: #1C131C;
}

@media (max-width: 576px) {
    .container {
        padding: 20px 10px 10px 10px;
    }
}


@media (max-width: 576px) {
    .small-full {
        width: 100% !important;
    }
}
/* ------------------------ Header ------------------------ */

header {
    font-family: "Roboto";
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    color: white;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* Wrapper for the text blocks */
.header-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.header-left {
    display: flex;
    flex-direction: row;
    align-items: center; /* Align items to middle */
    gap: 16px;
}

/* Title and subtitle blocks with sample sizes and borders */
.title {
    font-size: 24px;
    font-weight: 900;
}

.subtitle {
    font-size: 20px;
    font-weight: 400;
}

.header-right h1 {
    flex-grow: 1;
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

#app-name {
    flex-grow: 1;
    margin: 0 20px;
    font-size: 32px;
    font-weight: 400;
}

.right-top {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.right-bottom {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    font-size: 14px;
}

/* ------------------------ Market ------------------------ */

.market-status {
    display: flex;
    align-items: center;
    font-family: 'Roboto';
    gap: 5px;
    font-size: 0.9rem;
}

.dot-green, .dot-red {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot-green {
    background-color: #49983A;
}

.dot-red {
    background-color: #EB5757;
}

/* ------------------------ Metrics ------------------------ */

.icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid #AC95AB;

    background-color: #501E53;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-circle.high {
    background-color: #49983A;
}

.icon-circle.low {
    color: #E53935;
    border-color: #ffff;
    background-color: #EB5757;
    transform: rotate(180deg);
}

.icon-circle.low img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
    
}

/* ------------------------ Filter Button ------------------------ */


#searchModal .modal-header, .modal-body{
    background-color: #D7D1D766;
}

#searchModal .modal-title {
    color: #281B28;
}

#searchInput {
    color: #4B484BB2;
    background-color: #521E5133;
}

/* Item Title Styling */
.search-item h6 {
    color: #281B28;
}


/* ------------------------ body ------------------------ */

/* Charts */
#area-chart, #candle-chart {
    min-height: 300px;
}

.btn-group .btn:hover {
    background-color: #5a6268;
    color: #ffffff;
}

.btn-group .active {
    background-color: #5a6268;
    color: #ffffff;
}