@font-face {
    font-family: 'LetoSans';
    src: url("LetoSans.otf") format("opentype");
}
@font-face {
    font-family: 'LetoSans Bold';
    font-weight: bold;
    src: url("LetoSans-Bold.otf") format("opentype");
}
html {
    display: block;
    position: absolute;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: none;
    overflow: auto;
}
body {
    display: block;
    position: relative;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    border: none;
    font-size: 12px;
    font-family: 'LetoSans', sans-serif;
    overflow: auto;
    /*max-width: 1152px;*/
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 10px;
}

::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(102,102, 102, 1);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

/*sort*/
.js_sort_item {
    cursor: pointer;
}
.sort_ab,
.sort_ba{
    position: relative;
    padding-right: 22px;
}
.sort_ab:after,
.sort_ba:after{
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 10px;
}
.sort_ab:after{
    content: '▲';
}
.sort_ba:after{
    content: '▼';
}
.clear{ clear: both; }
.cb_hidden {
    display: none !important;
}
.field_announced_volume {
    white-space: nowrap;
}

td.field_maturity_period,
td.field_announced_volume,
td.field_coupon_rate,
td.field_nominal_price,
td.field_price,
td.field_yield,
td.field_duration {
    text-align: right;
}

/*new style*/
.ui-widget-content,
.ui-widget-header,
.ui-widget.ui-widget-content{
    border: none;
    background: #ffffff;
}
#cbSoverBondsYieldCurve_form{
    position: relative;
    max-width: 300px;
    border-bottom: 2px solid #e2e2e2;
    background: #eeeff1;
}
#cbSoverBondsYieldCurve_form .ttl{
    padding: 7px 7px 0;
    font-size: 12px;
    color: #9898A0;
}
#sbyc_kind{
    width: 96%;
    padding: 5px;
    color: #1b2733;
    font-size: 14px;
    line-height: 20px;
    border:none;
    background: #eeeff1;
}
#cbSoverBondsYieldCurve_form .select{
    position: relative;
    width: 100%;
}
#cbSoverBondsYieldCurve_form .switch{
    display: block;
    padding: 5px 7px;
    color: #1b2733;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    background: url(../img/arrow_bottom.svg) no-repeat 94% 50%;
    background-size: 8px 8px;
}
#cbSoverBondsYieldCurve_form .wrapper{
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #eeeeee;
    background: #ffffff;
    z-index: 10;
    box-sizing: border-box;
}
#cbSoverBondsYieldCurve_form .wrapper li{
    display: block;
}
#cbSoverBondsYieldCurve_form .wrapper .item{
    display: block;
    padding: 10px 5px;
    font-size: 14px;
    color: #1b2733;
    line-height: 20px;
    font-family: 'San Francisco Pro Regular', sans-serif;
    text-decoration: none;
}
#cbSoverBondsYieldCurve_table_head{
    margin-top: 10px;
}
#cbSoverBondsYieldCurve_table_head table{
    border: none;
    border-spacing: 0;
}
#cbSoverBondsYieldCurve_table_head thead tr{
    background: #ffffff;
}
#cbSoverBondsYieldCurve_table_head tbody tr:hover{
    background: #E1E8F8;
}
#cbSoverBondsYieldCurve_table_head thead th,
#cbSoverBondsYieldCurve_table_head td{
    padding: 7px 12px 7px 5px;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #c5c6c8;
}
#cbSoverBondsYieldCurve_table_head thead th{
    color: #3c3c3c;
    border-bottom: 1px solid #c5c6c8;
    font-family: 'LetoSans', sans-serif;
    font-weight: 700;
}
#cbSoverBondsYieldCurve_table_head td{
    color: #242729;
    font-family: 'LetoSans', sans-serif;
    border-bottom: 0px solid #eeeeee;
    font-size: 15px;
}
#cbSoverBondsYieldCurve_table_head .prospectus{
    margin-bottom: 5px;
}
#cbSoverBondsYieldCurve_table_head td a{
    color: #919399;
    text-decoration: none;
    border-bottom: 1px solid;
    border-color: rgba(85,95,100,.3);
}
a:focus, a:hover {
    text-decoration: none;
    color: #dd0a34 !important;
}
#link_to_cbonds{
    color: #242729;
    margin-top: 15px;
    margin-left: 5px;
}
#cbSoverBondsYieldCurve_foot,
#cbSoverBondsYieldCurve_foot a{
    font-size: 15px;
    line-height: 20px;
    font-family: 'LetoSans', sans-serif;
}
#cbSoverBondsYieldCurve_foot a{
    color: #919399;
    text-decoration: none;
    border-bottom: 1px solid;
    border-color: rgba(85,95,100,.3);
}
.item_switch{
    position: relative;
    padding: 10px 20px 10px 5px;
    font-size: 16px;
    line-height: 24px;
    border-bottom: 1px solid #c5c6c8;
    font-family: 'LetoSans';
    cursor: pointer;
}
.item_switch:after {
    position: absolute;
    display: block;
    width: 24px;
    height: 13px;
    top: 16px;
    right: 10px;
    content: '';
    background: url(../img/arrow_bottom.svg) no-repeat 0 0;
    background-size: 22px 13px;
}
.item_switch_wrapper{
    padding-bottom: 10px;
    border-bottom: 1px solid #c5c6c8;
}
.item_switch_wrapper .item{ padding: 0 7px; }
.item_switch_wrapper .lnk{
    margin: 5px;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    color: #555fa0;
    text-decoration: none;
    border-bottom: 1px solid;
    border-color: rgba(85,95,160,.3);
}
.item_switch_wrapper .ttl,
.item_switch_wrapper .value{
    position: relative;
    float: left;
    width: 50%;
    padding: 5px 0;
    background: #ffffff;
}
.item_switch_wrapper .ttl{
    font-size: 15px;
    line-height: 22px;
    font-family: 'LetoSans';
}
.item_switch_wrapper .value{
    font-size: 15px;
    line-height: 22px;
}
.item_switch_wrapper .ttl:after{
    position: absolute;
    width: 100%;
    top: 18px;
    left: 0;
    height: 1px;
    content: '';
    background: url(../img/point_line.png) 0 0 repeat-x;
    z-index: 1;
}
.item_switch_wrapper .txt{
    position: relative;
    background: #ffffff;
    z-index: 2;
}
#cbSoverBondsYieldCurve_foot{
    margin-top: 20px;
}

#cbSoverBondsYieldCurve_foot .duration_calc {
    margin-left: 5px;
    margin-top: 5px;
    font-size: 15px;
}

@media screen and (max-width: 1023px) {
    html { width: 100%; }
}
@media screen and (max-width: 680px) {
    #cbSoverBondsYieldCurve_form{
        max-width: 100%;
    }
}