/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 2, 2013, 2:57:40 AM
    Author     : And
*/

#canvas {
    padding: 0;
    margin: 0;
}

#container {
    height: auto;
    overflow: hidden;
    position: relative;
    border: 1px solid #cbcbcb;
    margin-top: 10px;
}


div.filter ul {
    padding: 0;
    margin: 0;
    text-align: right;
    margin-top: 3px;

}

.ae-hide {
    display: none;
}

.time-periods-menu li {
    width: 100%;
}

.filter ul li {
    list-style: none;
    display: inline-block;
    padding: 2px 0 2px 3px;
    vertical-align: top;
}

.filter3 > span,
.filter ul > .stepli span {
    font-size: 0.75rem;
}

.filter ul li:last-child {
    padding-right: 0;
}

.filter ul li:first-child {
    border-left: none;
}

.filter ul li.stepli_noborder:last-child {
    font-size: 0.75rem;
}

body[dir=rtl] .filter ul li {
    padding: 2px 3px 2px 0;
}

body[dir=rtl] .filter ul li:last-child {
    padding-left: 0;
}

body[dir=rtl] .filter ul li:first-child {
    border-right: none;
}

.filtered {
    color: var(--bs-success);
    margin-left: 5px;
    clear: both;
    display: none;
}

#container .filter img {
    cursor: pointer;
}

.filter img {
    cursor: pointer;
}

#container .ui-slider-handle {
    background: url("http://code.jquery.com/ui/1.9.2/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png") repeat-x scroll 50% 50% var(--ifc-gray-100);
    background-size: 100% 100%;
    border: 1px solid #D3D3D3;
    color: #555555;
    font-weight: normal;
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

.slider {
    position: relative;
}

.zoom {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC");
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: 5px 40px;
    height: 18px;
    padding-top: 5px;
    margin-left: 5px;
    width: 640px;
}

.filter {
    position: relative;
    margin-bottom: 5px;
}

.loading {
    height: 32px;
    position: absolute;
    width: 32px;
    display: inline-block;
    background-origin: initial;
    background-image: url("/images/front/charts/loading-blue.gif");
    background-size: 32px 32px;
}

/*addons*/
#addons {
    margin-top: 10px;
}

#addons img {
    margin-left: 5px;
}

#crosshair {
    cursor: pointer;
    border-radius: 13px;
}

.crosshair_active {
    background-color: var(--ifc-blue-400);
}

.canvas_crosshair {
    cursor: crosshair;
}

/*end addons*/

#timezone {
    margin-top: 8px;
}

/*notification*/

.notification {
    color: red;
    padding: 5px;
    text-align: center;
    font-size: 0.875rem;
    margin-top: 5px;
}

/*datepicker*/
.datepicker {
    background: url("/images/calendar_icon.gif") no-repeat scroll right center #FFFFFF;
    border: 1px solid var(--ifc-gray-200);
    cursor: pointer;
    float: right;
    font-size: 0.75rem;
    height: 20px;
    width: 100px;
}

.left_right {
    bottom: 0;
    cursor: pointer;
    float: left;
    position: absolute;
    right: 3px;
}

.start_end {
    float: right;
    margin-top: 3px;
}

.start_end label {
    float: right;
    height: 20px;
    margin-right: 10px;
    overflow: hidden;
}

.start_end span {
    display: block;
    float: left;
    margin-top: 4px;
    cursor: pointer;
}

.start_end input {

}

.button_orange img {
    position: absolute;
}

.charts_orange span {
    overflow: hidden;
    position: relative;
    float: right;
}

.leaders {
    clear: both;
    margin-bottom: 20px;
}

.commodities_desc img {
    width: 42px;
    height: 42px;
}

.indices_desc {
    color: #040404;
    font-size: 0.625rem;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.active_step {
    cursor: default;
    color: #fff !important;
    background: var(--bs-success, #4C7B00);
    border-radius: 4px;
    text-decoration: none;
}

.stepli > span {
    border-radius: 4px;
}

.stepli > span:hover {
    color: var(--ifc-dark, #000) !important;
    background: var(--bs-success, #4C7B00);
}

.filter ul li > span:hover {
    color: #005580;
    text-decoration: none;
}

.filter ul li > span {
    text-decoration: none;
    padding: 4px 6px;
}

.category_items, .category_group {
    max-width: 100%;
    height: 36px;
    cursor: pointer;
}

.category_group {
    min-width: 140px;
}

.category_items {
    width: 361px;
}

.category_items option, .category_group option {
    cursor: pointer;
}

body[dir=rtl] .category-items-container > .category_items {
    float: right;
}

.bt_desc span {
    color: var(--bs-success);
}

.bt_desc {
    font-size: 0.875rem;
    margin-bottom: 10px;
}

/* SPETIFICATION CSS 4 */

.prev {
    background-image: url("/images/front/charts/prev.png");
}

.now {
    background-image: url("/images/front/charts/now.png");
}

.next {
    background-image: url("/images/front/charts/next.png");
}

.prev, .now, .next {
    display: inline-block;
    width: 23px;
    height: 18px;
    background-origin: initial;
    background-size: 23px 18px;
}

.filter .stepli > span {
    color: var(--ifc-green-600, #385A00);
    font-weight: bold;
    text-indent: 0;
    cursor: pointer;
}

.Wfll {
    min-width: 310px;
}

#ifc_widgetcharts {
    width: 100%;
}

.filter_category_group_wg {
    display: inline-block;
}

.filter_category_item_wg {
    display: inline-block;
}

/*.Wcontent {overflow:hidden; width:745px;padding-left: 5px;}*/
.line.chartsw {
    width: 90%;
    height: 1px;
    margin-bottom: 10px;
}

.gray.chartsw {
    border-top: 1px solid var(--ifc-gray-200);
}

#ifc_nedcharts {
    border: 1px solid var(--ifc-gray-200);
    width: 100%;
    margin-bottom: 5px;
    text-align: right;
}

#ifc_nedcharts a {
    margin-right: 5px;
}

#canvas p {
    font-size: 1.5625rem;
    color: red;
}

.button_with_plus_a {
    color: black !important;
    float: right;
    margin: 10px 0;
    vertical-align: middle;
    height: 28px;
}

.button_with_plus {
    height: 25px;
    background-color: var(--bs-success);
    border: 1px solid var(--bs-success);
    padding: 0 0 0 0 !important;
    display: inline-block;
    overflow: hidden;
    color: #fff;
}

/* END specification CSS 4 */

.button_with_plus span.orange {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(/images/front/charts/market-data-sprite.png) no-repeat;
    background-position: -634px 0px;
}

.button_with_plus span.regular {
    float: right;
    line-height: 25px;
    padding: 0 4px 0 3px;
    font-weight: normal;
}

.button_with_plus:hover {
    background-color: var(--ifc-gray-900);
    border: 1px solid var(--ifc-gray-900);
}

.button_with_plus:hover span.orange {
    background-position: -662px 0px;
}

.filter .control {
    display: inline-block;
}

div.filter ul:not(.ae-hide) {
    display: inline-block;
    float: right;
}

body[dir=rtl] div.filter ul {
    text-align: left;
    direction: initial;
}

.filter_category, .filter_category_wg {
    width: 100%;
    display: flex;
    justify-content: space-between;
    min-height: 40px;
}

.filter_category_wg {
    justify-content: flex-end;
}

@media (max-width: 550px) {
    .filter_category {
        flex-direction: column-reverse;
    }

    .currency_selects {
        margin-bottom: 15px;
    }

    .flex-column .curr_type > div:first-child {
        margin-bottom: 20px;
    }
}

.currency_selects {
    display: flex;
}

.filter_category select {
    outline: 0;
    border: solid 1px var(--ifc-gray-200);
    padding: 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: currentColor;
}

.dark-theme .filter_category select,
.dark-theme .filter_category_wg select {
    background-color: var(--ifc-gray-700);
    border: solid 1px var(--ifc-gray-500);
}

.filter_category_wg select {
    border: 1px solid #b5c6da;
    height: 36px;
    padding: 5px;
    min-width: 150px;
}


.category-group-container.ifcm_select:after,
.category-items-container.ifcm_select:after {
    top: 12px;
}

body[dir=rtl] .category-group-container:before,
body[dir=rtl] .category-items-container:before {
    right: auto;
    left: 12px;
}

.filter_category_item_wg {
    margin-left: 10px;
    margin-right: 5px;
}

#container {
    direction: ltr;
}

#container * {
    direction: ltr;
}

input#datepicker {
    text-align: left;
}

.top_btn {
    margin: 20px 0px 0px 15px !important;
}

.top_btn li {
    display: inline-block;
    width: 33%;
}

.top_btn li span {

    width: 85%;
}

ul.top_btn a span.btn-success {
    text-align: center;
    font-size: 0.6875rem !important;
}

.chart_desc {
    overflow: hidden;
}

.chart_desc img {
    margin-right: 0px;
    margin-top: 10px;
}

.instrumentside {
    overflow: hidden;
}

.instrumentside img {
    float: left;
    margin-right: 10px;
}

body[dir=rtl] .instrumentside img {
    float: right;
    margin-right: 0px;
    margin-left: 10px;
}

.chart_desc img.foreximage {
    margin-left: -57px;
}

.amChartsPanel a {
    display: none !important; /*remove annoying amchart link, which blocks buttons*/
}

.lichart {
    top: -50%;
    left: 50%;
    margin-left: -16px;
    margin-top: -16px;
    position: relative;
}

body[dir=rtl] .lichart {
    right: 50%;
    left: 0;
    margin-right: -16px;
    margin-left: 0;
}

.amChartsPeriodSelector {
    display: none;
}

#ifc_chartdiv > .filter2 {
    display: block;
    position: absolute;
    height: 40px;
    left: 0;
    top: 0px;
    z-index: 1;
}

body[dir=rtl] #ifc_chartdiv > .filter2 {
    text-align: left;
}

.chart_drawtype_container {
    display: inline-block;
    width: 24px;
    height: 24px;
    padding: 4px;
    background: #e8eaf2;
    border-radius: 3px;
    margin-right: 5px;
    cursor: pointer;
    box-sizing: border-box;
}

.chart_drawtype_container:hover {
    background: var(--ifc-blue-400, #0066cc);
}

.chart_drawtype_container:hover .icon_graph_line {
    background-position: -76px -4px;
}

.chart_drawtype_container:hover .icon_graph_candlestick {
    background-position: -76px -28px;
}

.chart_drawtype_container:hover .icon_graph_ohlc {
    background-position: -76px -52px;
}


.chart_drawtype_container .chart_drawtype {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(/images/front/charts/chart-icons.png);
    margin: 0;
}

.chart_drawtype_container .icon_graph_line {
    background-position: -52px -4px;
}

.chart_drawtype_container .icon_graph_candlestick {
    background-position: -52px -28px;
}

.chart_drawtype_container .icon_graph_ohlc {
    background-position: -52px -52px;
}

#ifc_chartdiv {
    position: relative;
    display: inline-block;
    background: #ffffff;
}

.dark-theme #ifc_chartdiv svg .amcharts-axis-grid {
    stroke: var(--ifc-white);
}

.dark-theme svg text {
    fill: var(--ifc-white);
}

body[dir=rtl] #ifc_chartdiv {
    direction: initial;
}

.ifc_chartdiv_wrapper {
    display: inline-block;
}

.ifc_chartdiv_wrapper .filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ifc_chartdiv_wrapper .ui-datepicker-trigger {
    margin-left: -20px;
    float: right;
    margin-top: 3px;
}

#chart_history_update_stop {
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.group_desc > .flag_32 {
    float: left;
    margin-left: -60px;
}

.curr_type {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.curr_type > div:first-child {
    margin-bottom: 40px;
    width: calc(100% - 340px);
    padding-right: 50px;
}

body[dir=rtl] .curr_type > div:first-child {
    padding-left: 20px;
    padding-right: 0;
}

@media (max-width: 992px) {
    .curr_type {
        flex-direction: column-reverse;
        margin-bottom: 30px;
    }

    .curr_type > div:first-child {
        width: 100%;
    }

    .curr_type > div:first-child,
    body[dir=rtl] .curr_type > div:first-child {
        padding: 0;
    }

}

.click_to_open_container_wrapp {
    display: flex;
    align-items: center;
}


body[dir=rtl] .group_desc > .flag_32 {
    float: right;
    margin-left: auto;
    margin-right: -60px;
}

body[dir=rtl] .top_container .block_val {
    float: left;
}

body[dir=rtl] .top_container .block_desc {
    float: right;
    border-right: none;
}

.stock_click_charts {

}

.stock_click_charts > a {
    display: block;
    font-size: 0.875rem !important;
}

.stock_click_orange a {
    width: 100% !important;;
    margin-top: 18px;
    font-size: 1.75rem !important;
    font-weight: bold !important;
}

.stock_click_charts > a > div {
    float: left;
}

.stock_click_charts > a > span.to_charts_sp {
    width: 15px;
    height: 19px;
    background: url(/images/front/charts/market-data-sprite.png) no-repeat;
    background-position: -818px 0;
    display: inline-block;
    margin-left: 5px;
}

.tradingconditions_ol {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}

.instrumentside p {
    text-indent: 0 !important;
}

.stock_click_right {
    position: absolute;
    font-size: 0.625rem;
    text-decoration: underline;
    color: var(--ifc-blue-400);
    bottom: 2px;
    right: 20px;
}

body[dir=rtl] .stock_click_right {
    left: 28px;
    right: auto;
}

.changes {
    padding-bottom: 5px;
}

.block_desc > .bt_desc {
    margin-bottom: 0;
    margin-top: 0;
    display: inline-block;
    padding-left: 0;
    margin-left: 0;
    width: 331px;
    text-align: center;
}

body[dir=rtl] .block_desc > .bt_desc {
    padding-left: 0;
    padding-right: 4px;
}

.forex_advantages_buttons {
    margin-bottom: 15px;
}

span.chart_desc_top_open_close {
    font-size: 0.9375rem !important;
}

.high_low_wrap {
    margin-top: 8px !important;
}

.inst_desc_right > p {
    width: 100%;
}

.inst_desc_left > img {
    margin-top: 11px;
}

.top_container .bl2 {
    margin-top: 20px !important;
}

.block_val.col-lg-3 .title_bl2_container {
    /*padding: 0 5px;*/
}

.block_val.col-lg-3 .title_bl2_container .bl2 .header {
    max-width: 92px;
}

.colored-block.red > .header {
    background: #d42b1f;
    background: rgba(0, 0, 0, .1);
}

.colored-block.green .header {
    background: #33aa43;
    background: rgba(0, 0, 0, .1);
}

.block_val.col-lg-3 .title_bl2_container .bl2 a {
    max-width: 153px;
    height: 77px;
}

.title_bl2_container .bl2 a {
    margin: 0;
    padding-left: 0px;
    padding-right: 0px;
    display: inline-block;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
}

.charts_click_stock > span {
    max-width: 220px;
}

.top_container {
    margin-top: 0 !important;
}

.block_desc > .inst_desc_left:nth-child(1) {
    margin-top: 30px !important;
    min-width: 54px !important;
}

.block_desc > .inst_desc_right:nth-child(2) {
    width: 240px;
    margin-top: 30px;
}

.analysis_text {
    margin-bottom: 35px;
}

/*NEW CODE*/

.chart_about_open,
.share_bt_open,
.share_button_open {
    display: none;
    margin-bottom: 70px;
}

.click_to_open > div > span,
.click_to_open .txt_with_icon,
#charts_click div {
    display: inline-block;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.875rem;
}

.click_to_open > div > span:hover,
.click_to_open .txt_with_icon:hover,
#charts_click div:hover {
    color: #005580 !important;
}

.chart_about > span > span {
    float: right;
    margin-left: 5px;
    width: 23px;
    height: 21px;
    background: url(/images/front/charts/market-data-sprite.png) no-repeat;
    background-position: -119px 0;
}

.chart_about > span > :first-child {
    display: inline-block;
    margin-right: 10px;
}

body[dir=rtl] .chart_about > span > :first-child {
    margin-left: 10px;
    margin-right: 0;
}

.btn_arrow {
    border: solid var(--ifc-blue-400);
    border-width: 0 2px 2px 0;
    padding: 3px;
    vertical-align: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display: inline-block;
}

.btn_arrow.active {
    border-width: 2px 0 0 2px;
    vertical-align: -2px;
}

.click_to_open > div > span:hover > .btn_arrow {
    border: solid #2d5789;
    border-width: 0 2px 2px 0;
}

.click_to_open > div > span:hover > .btn_arrow.active {
    border-width: 2px 0 0 2px;
}

.live_chart_link > span > span {
    float: right;
    width: 19px;
    height: 19px;
    margin-left: 5px;
    background: url(/images/front/charts/market-data-sprite.png) no-repeat;
    background-position: -304px 0;
}

.share_button > span > span {
    float: right;
    width: 20px;
    height: 21px;
    margin-left: 5px;
    background: url(/images/front/social_share_buttons/social_share_sprite.png) no-repeat;
    background-position: -266px 0;
}

.right_txt {
    display: inline-block;
}

.category-group-container {
    margin-right: 10px;
}

body[dir=rtl] .category-group-container {
    margin-left: 10px;
    margin-right: 0;
}

.category-group-container,
.category-items-container {
    position: relative
}

.block_chart_diag .time-periods-select {
    display: none;
}

.ifc_widgetcharts .time-periods-dropdown {
    display: none;
}

@media (max-width: 768px) {
    .filter ul li {
        padding-left: 0 !important;
    }

    .filter ul li a {
        padding: 4px 3px;
        font-size: 0.625rem;
    }

    .top_container .bl2 {
        margin-top: 5px !important;
    }

    .block_val.col-lg-3 .title_bl2_container .bl2 a {
        height: 63px;
    }

    .click_to_open_container_wrapp .click_to_open:nth-child(2) {
        display: none;
    }

    .click_to_open_container {
        margin-top: 20px;
    }

    .filter3 > span, .filter ul > .stepli span {
        font-size: 0.625rem;
    }

    .ifc_chartdiv_wrapper {
        height: auto !important;
        margin-bottom: inherit;
    }

    .category-group-container,
    .category-items-container,
    .chart_desc_top .value,
    .chart_desc_top .calculate {
        font-size: 0.875rem;
    }

    .instrumentside {
        padding: 0 !important;
    }

    #timezone {
        display: none;
        margin-top: 0;
    }

    .filter .filter3 li.stepli:nth-child(2),
    .filter .filter3 li.stepli:nth-child(4) {
        display: none;
    }

    .chart_about_open,
    .share_bt_open,
    .share_button_open {
        margin-bottom: 40px;
    }

    .filter ul li a {
        width: 100%;
        display: block;
    }

    .filter3 > span, .filter ul > .stepli span {
        font-size: 0.875rem;
        font-weight: normal;
        color: var(--ifc-dark);
        font-family: var(--bs-body-font-family);
    }

    .ifc_chartdiv_wrapper .filter {
        align-items: flex-start;
        margin-bottom: 5px;
    }

    .time-periods-dropdown,
    .time-periods {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .time-periods {
        position: absolute;
        background-color: #fff;
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        color: var(--ifc-dark);
        border-radius: 4px;
        font-size: 0.875rem;
        line-height: 1.4;
        outline: 0;
        transition-property: transform, visibility, opacity;
        top: 51px;
        z-index: 1;
        width: 150px;

    }

    .filter2 {
        display: flex;
    }

    .time-periods .time-periods-menu {
        padding: 5px 9px;
    }

    .active_step {
        background: transparent;
    }

    .chart_drawtype_container {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .block_chart_diag .time-periods-select {
        background-color: var(--ifc-gray-200);
        color: var(--ifc-dark);
        border-radius: 4px;
        font-size: 1.125rem;
        font-weight: 500;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 7px;
        min-width: 70px;
        font-family: var(--bs-body-font-family);
    }

    .time-periods-select-content {
        margin-right: 10px;
    }

    body[dir=rtl] .time-periods-select-content {
        margin-left: 10px;
        margin-right: 0;
    }

    .time-periods-select .arrow-down {
        border: solid var(--ifc-dark);
        border-width: 0 1px 1px 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        display: inline-block;
        margin-top: -3px;
        padding: 4px;
    }

    .time-periods-select .arrow-down.active {
        border-width: 1px 0 0 1px;
        margin-top: 3px;

    }
}

@media (max-width: 480px) {
    .category-group-container,
    .category-items-container,
    .category-group-container > div,
    .category-items-container > div,
    .filter_category select, .filter_category_wg select {
        width: 100% !important;
    }

    .click_to_open_container {
        padding: 0 0;
    }

    .stock_click_charts > a {
        float: right;
    }
}