@font-face {
    font-family: 'Proxima Nova';
    src: url('/quote/css/fonts/proximanova-regular-webfont.eot');
    src: url('/quote/css/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/quote/css/fonts/proximanova-regular-webfont.woff2') format('woff2'), url('/quote/css/fonts/proximanova-regular-webfont.woff') format('woff'), url('/quote/css/fonts/proximanova-regular-webfont.ttf') format('truetype'), url('/quote/css/fonts/proximanova-regular-webfont.svg#proxima_novaregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/quote/css/fonts/proximanova-bold-webfont.eot');
    src: url('/quote/css/fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/quote/css/fonts/proximanova-bold-webfont.woff2') format('woff2'), url('/quote/css/fonts/proximanova-bold-webfont.woff') format('woff'), url('/quote/css/fonts/proximanova-bold-webfont.ttf') format('truetype'), url('/quote/css/fonts/proximanova-bold-webfont.svg#proxima_novabold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('/quote/css/fonts/proximanova-extrabld-webfont.eot');
    src: url('/quote/css/fonts/proximanova-extrabld-webfont.eot?#iefix') format('embedded-opentype'), url('/quote/css/fonts/proximanova-extrabld-webfont.woff2') format('woff2'), url('/quote/css/fonts/proximanova-extrabld-webfont.woff') format('woff'), url('/quote/css/fonts/proximanova-extrabld-webfont.ttf') format('truetype'), url('/quote/css/fonts/proximanova-extrabld-webfont.svg#proxima_novaextrabold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/** ===========================
 *  Общие стили
 *  ===========================
*/

body {
    font-family: 'Proxima Nova', 'helvetica neue', arial, helvetica, sans-serif;
    height: 100vh;
    margin: 0;
}

    body.hide-scroll {
        overflow: hidden;
    }

[data-modal] {
    cursor: pointer;
}

body.fix {
    pointer-events: none;
}

    body.fix > * {
        pointer-events: auto;
    }

    body.fix > div[style^="height"]:first-child:empty {
        pointer-events: none;
    }

a {
    text-decoration: none;
    color: #00848c;
}

img,
iframe {
    border: 0px;
}

img {
    font-size: 12px;
    color: #808080;
}

h1,
h2,
h3 {
    margin: 0px;
}

[hidden] {
    display: none;
}

.display-block {
    display: block !important;
}

.display-flex {
    display: flex !important;
}

.counters__block {
    overflow: hidden;
    height: 0px;
    position: relative;
}

    .counters__block > div {
        position: absolute;
        left: -10000px;
        top: 0;
        height: 0px;
        opacity: 0;
    }

.list {
    padding: 0;
    margin: 0;
    display: flex;
    list-style-type: none;
}

.heading {
    margin: 0;
    font-weight: bold;
}

.button {
    font-family: 'Proxima Nova';
    font-size: 18px;
    line-height: 22px;
    color: #03858C;
    border: 2px solid #00848C;
    margin: 0;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-label {
    color: #00848C;
    border-bottom: 1px dashed #00848C;
}

/* Трехцветная линия график */

.colored-bar {
    position: relative;
    width: 75px;
    height: 2px;
    display: flex;
    margin: auto;
    align-items: center;
}

.colored-bar__ball {
    display: block;
    width: 10px;
    height: 10px;
    margin-right: -5px;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    margin-left: -5px;
}

.colored-bar__ball-value {
    display: flex;
    flex-direction: column;
    position: absolute;
    height: auto;
    margin-right: -5px;
    min-height: 50px;
    top: -8px;
    left: auto;
    /*left: 5px;*/
}
.colored-bar div {
    flex-grow: 1;
    padding-top: 2px;
}

.colored-bar div:nth-child(odd) {
    background-color: #C9CED6;
}

.colored-bar div:nth-child(2) {
    background-color: #E0E0E0;
}

.colored-bar__yellow,
.colored-bar div.colored-bar__yellow {
    background-color: #FFC000;
    border-color: #FFC000;
    color: #FFC000;
}

.colored-bar__green,
.colored-bar div.colored-bar__green {
    background-color: #009CA6;
    border-color: #009CA6;
    color: #009CA6;
}

.colored-bar__red,
.colored-bar div.colored-bar__red {
    background-color: #F82323;
    border-color: #F82323;
    color: #F82323;
}


.colored-bar_large {
    /*max-width: 420px;*/
    width: 100%;
    height: 54px;
    margin-top: 8px;
}
.colored-bar_large div {
    flex-grow: 1;
    padding: 0;
    height: 6px;
}
.colored-bar__value {
    background-color: transparent;
    /*margin-left: auto;*/
}
.colored-bar_large .colored-bar__ball {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /*margin-left: auto;*/
    /* position: absolute; */
    /* top: 0; */
    /* margin-left: -26px; */
    background-color: #fff;
    border-style: solid;
    border-width: 3px;
    font-size: 16px;
    font-weight: bold;
    line-height: 19px;
    align-items: center;
    position: static;
    margin-left: calc(100% - 5px);
}
    .colored-bar_large .colored-bar__ball.colored-bar__green,
    .colored-bar_large .colored-bar__value.colored-bar__green {
        margin-left: auto;
    }
    .colored-bar__value {
        font-size: 16px;
        font-weight: bold;
        margin-left: calc(100% - 5px);
    }
/* Класс для центрирования блока(вместо стилей bootstrap) */
.block-center {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/** ===========================
 *  Блок error
 *  Класс .error добавляем к .block-center
 *  ===========================
*/
/* Текст предупреждения */
.text-danger {
    color: rgb(220, 53, 69);
}
.error h1,
.error h2 {
    font-weight: 500;
    line-height: 1.2;
}
.error h1 {
    font-size: 5rem;
}
/** ===========================
 *  Форма проверки орфографии
 *  ===========================
*/
.spellCheck {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background: url('/quote/icons/pages/opacity.png');
    z-index: 1000000;
    display: none;
}

    .spellCheck div {
        width: 460px;
        margin: 125px auto;
        background: #fff;
        padding: 30px 40px;
        border-radius: 15px;
        border: 3px solid #00848c;
    }

        .spellCheck div iframe {
            width: 490px;
            height: 410px;
            background: #fff;
            border: 0px;
            overflow: hidden;
        }

.spellCheckFrame {
    border-width: 0px;
}

.sticky {
    position: fixed;
    z-index: 101;
}

.hideScroll {
    overflow: hidden;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.showScroll {
    overflow: hidden auto;
    position: initial;
}

.stop {
    position: relative;
    z-index: 101;
}

.h {
    display: none;
}

/** ===========================
 *  Постраничная навигация
 *  ===========================
*/

.allPNav {
    margin: 29px 0px 15px 0px;
}

    .allPNav span {
        color: #9b9f9f;
        display: inline-block;
        margin-right: 20px;
    }

    .allPNav a {
        font: 15px pb, sans-serif;
        color: #00848c;
        display: inline-block;
        margin-right: 20px;
    }

        .allPNav a.active {
            color: #1f2829;
        }


/** ===========================
 *  Стили для таблиц
 *  ===========================
*/

.font-small * {
    font-size: 0.9rem !important;
}

.font-smaller * {
    font-size: 0.75rem !important;
}

.font-normal * {
    font-size: 1rem !important;
}

.font-big * {
    font-size: 1.1rem !important;
}

.font-bigger * {
    font-size: 1.25rem !important;
}

.table-coloredlines tbody tr:nth-child(even) td {
    background: #f5f5f5 !important;
}


/** ===========================
 *  Иконки шаринга в социальные сети
 *  ===========================
*/

.scrolled .header__soc span.soc__tg:before {
    background: url('/quote/icons/social_nets/telegram.svg') center;
}

.scrolled .header__soc span.soc__tw:before {
    background: url('/quote/icons/social_nets/twitter.svg') center;
}

.scrolled .header__soc span.soc__vk:before {
    background: url('/quote/icons/social_nets/vkontakte.svg') center;
}

.scrolled .header__soc span.soc__ok:before {
    background: url('/quote/icons/social_nets/odnoklassniki.svg') center;
}

.scrolled .header__soc span.soc__wa:before {
    background: url('/quote/icons/social_nets/whatsapp.svg') center;
}

.scrolled .header__soc span.soc__vb:before {
    background: url('/quote/icons/social_nets/viber.svg') center;
}

.scrolled .header__soc span.soc__em:before {
    background: url('/quote/icons/social_nets/mail.svg') center;
}

/* Стрелочка в ячейках сортированнной таблицы */

.modal__table-sort th[data-asc]::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 10px;
    background-image: url('/icons/pages/arrow_2.svg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 1px;
    transform: scaleY(-1);
}

.modal__table-sort th[data-asc="false"]::after {
    transform: scaleY(1);
}

/* таблица */
.table-secondary {
    border-collapse: collapse;
    width: 100%;
}

    .table-secondary td {
        border-top: 1px solid #EBEBEB;
    }

        .table-secondary td:first-child {
            font-size: 16px;
            line-height: 19px;
            color: #828282;
            font-family: 'Proxima Nova';
            padding: 10px 10px 10px 0;
        }

        .table-secondary td:last-child {
            font-size: 18px;
            line-height: 22px;
            color: #202736;
            padding: 10px 0 10px 10px;
            text-align: right;
            white-space: nowrap;
        }

.table-secondary_indicators tr:last-child td {
    padding-bottom: 0;
}

[data-field] {
    cursor: pointer;
}

/* Всплывающая подсказка на графике */

.chart-tooltip {
    border-color: #0F3A3D80 !important;
    padding: 8px !important;
}

    .chart-tooltip:empty {
        display: none;
    }

    .chart-tooltip::before,
    .chart-tooltip::after {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 6px;
        position: absolute;
    }

    .chart-tooltip[data-arrow-position="top"]::before {
        top: -17px;
        left: 50%;
        margin-left: -6px;
        border: 8px solid transparent;
        border-bottom: 9px solid #0F3A3D80;
    }

    .chart-tooltip[data-arrow-position="top"]::after {
        top: -15px;
        left: 50%;
        margin-left: -6px;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
    }

    .chart-tooltip[data-arrow-position="bottom"]::before {
        top: 100%;
        left: 50%;
        margin-left: -6px;
        border: 8px solid transparent;
        border-bottom: 9px solid #0F3A3D80;
        transform: scaleY(-1);
    }

    .chart-tooltip[data-arrow-position="bottom"]::after {
        top: calc(100% - 1px);
        left: 50%;
        margin-left: -6px;
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
        transform: scaleY(-1);
    }

.chart-tooltip__date {
    color: #9A9A9A;
    font-family: 'Proxima Nova';
    font-size: 14px;
    margin-bottom: 7px;
}

.chart-tooltip__value {
    font-family: 'Proxima Nova';
    font-size: 20px;
    color: #202736;
}

/* переключатель цены */

.prices__switch [data-type="trading"] {
    display: none;
}

.prices__switch_trading [data-type="prices"] {
    display: none;
}

.prices__switch_trading [data-type="trading"] {
    display: inline-block;
}

.tooltip-candles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: #202736;
}
