/* =========================================
   ELEMENTUM QUOTES / METAL TICKER
========================================= */


/* контейнер */

.quotes-ticker {

    position: relative;
    z-index: 5;

    border-bottom:1px solid #D4AF37;

    width:100%;

    margin:0;

    padding:12px 0;

    box-sizing:border-box;

}


/* единица измерения */

.quote-unit {

    font-weight:normal;

    opacity:.8;

    margin-left:2px;

}


/* заголовок */

.quote-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 16px;

    margin-bottom:6px;

    flex-wrap:nowrap;

}


.quote-title {

    color:#2c3e50;

    white-space:nowrap;

    font-size:13px;

}


.quote-date {

    font-size:14px;

    color:#676767;

    white-space:nowrap;

}



/* контейнер значений */

.quotes-container {

    display:flex;

    flex-wrap:nowrap;

    align-items:center;

    padding:0 8px;

    overflow:hidden;

}



/* отдельная котировка */

.quote-item {

    display:inline-flex;

    align-items:center;

    gap:6px;

    text-decoration:none;

    color:inherit;

    font-size:14px;

    white-space:nowrap;

    padding:0 12px;

    border-right:1px solid #D4AF37;

    transition:color .2s ease;

}


.quote-item:last-child {

    border-right:none;

}


.quote-item:hover {

    cursor:pointer;

}


.quote-name {

    font-weight:500;

    color:#2c3e50;

}


.quote-value {

    font-weight:600;

    color:#000 !important;

}



/* =========================
   MOBILE
========================= */


@media(max-width:991px){


    .quotes-ticker {

        display:block;

        padding:12px 0;

    }


    .quote-header {

        display:flex;

        justify-content:space-between;

        padding:0 16px;

        margin-bottom:6px;

    }


    .quotes-container {

        display:flex;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        padding:0 8px;

    }


    .quotes-container::-webkit-scrollbar {

        display:none;

    }


    .quote-item {

        font-size:13px;

        padding:0 10px;

        border-right:1px solid #D4AF37;

    }


}



/* =========================
   DESKTOP
========================= */


@media(min-width:992px){


    .quotes-ticker {

        display:flex;

        align-items:center;

        justify-content:flex-start;

        gap:16px;

        padding:12px 16px;

    }


    .quote-header {

        display:flex;

        align-items:center;

        gap:12px;

        margin-bottom:0;

        padding:0;

    }


    .quote-title {

        font-weight:600;

        font-size:16px;

        line-height:1.8;

        color:#2c3e50;

        white-space:nowrap;

        font-family:inherit;

    }


    .quotes-container {

        display:flex;

        flex-wrap:nowrap;

        gap:16px;

        padding:0;

        overflow:hidden;

    }


    .quote-item {

        border-right:1px solid #D4AF37;

        padding:0 12px;

    }


    .quote-item:first-child {

        border-left:1px solid #D4AF37;

    }


    .quote-date {

        margin-left:auto;

        font-size:14px;

        color:#676767;

        white-space:nowrap;

    }


}