/* fear and greed chart style */

div.cfg-chart-container {
    max-width: 850px;
    border: 1px solid #e8e8e8;
    border-bottom: 8px solid #e8e8e8;
    padding: 24px;
    padding-bottom: 13px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    width: 100%;
    container-type: inline-size;
    container-name: widget;
    box-sizing: border-box;
}

div.cfg-chart-container * {
    box-sizing: border-box;
}

@container widget (max-width: 849px) {

    .cfg-chart-holder {
        overflow-x: auto;
        height: calc(450px + 4px); /* value applied from js to child */
        /* firefox */
        /*scrollbar-width: thin; !* "auto" or "thin" *!*/
        /*scrollbar-color: #888888 #f0f0f0; !* thumb track *!*/
    }

    /* webkit - chrome, safari, opera */
    .cfg-chart-holder::-webkit-scrollbar {
        height: 4px;
    }

    .cfg-chart-holder::-webkit-scrollbar-track {
        background: #e8e8e8;
    }

    .cfg-chart-holder::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        border-radius: 0;
        border: none;
        transition: background-color 0.3s ease-in-out;
    }

    .cfg-chart-holder::-webkit-scrollbar-thumb:hover {
        background: #000000;
    }
}

#cfg-chart-body {
    width: 800px !important;
    height: 450px !important;
    /*margin-top: -8px;*/
    position: relative;
    overflow: hidden;
}

.cfg-chart-holder {
    position: relative;
}

#cfg-chart-body:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIzNzkiIHZpZXdCb3g9IjAgMCA4IDM3OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzEzOUExOCIvPgo8cmVjdCB4PSIzIiB5PSI5IiB3aWR0aD0iMiIgaGVpZ2h0PSI2OCIgZmlsbD0iIzEzOUExOCIvPgo8cmVjdCB5PSI3OCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iIzEzOUExOCIvPgo8cmVjdCB4PSIzIiB5PSI4NyIgd2lkdGg9IjIiIGhlaWdodD0iNjEiIGZpbGw9IiM5MEUyOUEiLz4KPHJlY3QgeT0iMTQ5IiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjOTBFMjlBIi8+CjxyZWN0IHg9IjMiIHk9IjE1OCIgd2lkdGg9IjIiIGhlaWdodD0iNjIiIGZpbGw9IiNFMkIyMDMiLz4KPHJlY3QgeT0iMjIxIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjRTJCMjAzIi8+CjxyZWN0IHg9IjMiIHk9IjIzMCIgd2lkdGg9IjIiIGhlaWdodD0iNjMiIGZpbGw9IiNGNzkzMUEiLz4KPHJlY3QgeT0iMjk0IiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjRjc5MzFBIi8+CjxyZWN0IHg9IjMiIHk9IjMwMyIgd2lkdGg9IjIiIGhlaWdodD0iNjciIGZpbGw9IiNERDFDMzYiLz4KPHJlY3QgeT0iMzcxIiB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjREQxQzM2Ii8+Cjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    opacity: 1;
    transform: scale(0.88) translate(10px, 26px);
    pointer-events: none;
    z-index: 1;
}

.cfg-top-content-holder {
    display: flex;
    justify-content: space-between;
    height: 36px;
}

.cfg-chart-title {
    margin: 0 0 8px 0;
}

.cfg-tooltip {
    display: flex !important;
    flex-direction: column;
    gap: 7px;
}

.cfg-time-range-selector {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #dfeff6;
    gap: 8px;
    /*transform: translate(12px, -4px);*/
}

.cfg-time-range-selector span {
    /*margin: 0 10px;*/
    margin: 0;
    padding: 2px 9px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #211b2e;
    cursor: pointer;
    transition: color 0.3s, border-bottom-color 0.3s;
    background-color: transparent;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    border-radius: 0;
    height: 36px;
}

.cfg-time-range-selector span:first-child {
    margin-left: 0;
}

.cfg-time-range-selector span:last-child {
    margin-right: 0;
}

.cfg-time-range-selector span:hover {
    color: #888;
}

.cfg-time-range-selector span.active {
    border-bottom-color: #888;
}

#cfg-alltime {
    white-space: nowrap;
}

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

    .cfg-chart-container {
        overflow-x: auto;
    }
}

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

    div.cfg-chart-container {
        padding: 14px;
    }

    .cfg-top-content-holder {
        flex-direction: column;
        height: auto;
    }

    .cfg-time-range-selector {
        justify-content: space-around;
        margin-bottom: 20px;
        transform: translate(0px, 0px);
    }

    .cfg-time-range-selector span {
        margin: 0;
    }
}