@import "../../../css/chart-v2.0.css";
body {
    font-family: kyrial-sans-pro, sans-serif;
    overflow-y: auto;
    font-style: normal;
    font-weight: normal;
    color: #747474;
}
.clearfix{
  clear: both;
}
select,
input {
    font-family: kyrial-sans-pro, sans-serif;
    border: #cbcfd4 1px solid;
    color: #747474;
}

select:focus,
input:focus {
    outline: 0;
}

#error-wrapper {
    display: none;
}

#MainWrapper {}

#wrapper {
    border: 0px solid #fff;
    position: relative;
}

.left_wrapper, .footer-view-left {
    width: 30%;
    padding-right: 1%;
    float: left;
}

.right_wrapper, .footer-view-right {
  width: 68%;
  float: right;
}

#wrapper #top,
#wrapper #navigation,
#wrapper #chart-header>div,
#wrapper #chart,
#wrapper #chart-footer,
#wrapper #bottom,
#wrapper #footer {
    border: 1px solid #fff;
    padding-right: 0px;
    padding-left: 0px;
}

#top-table tr {
    float: none;
    width: 100%;
}

#top-table td {
    display: inline;
    float: none;
}

#top-table {
    padding-top: 4px;
}

#top-table td {
    padding: 0.3em 0;
}

#top-table .row1 .col2 strong {
    font-size: 32px;
    line-height: 34px;
}

.alteration-equal {
    color: #A09D9D;
}

.alteration-up {
    color: #0c0;
}

.alteration-down {
    color: #c00;
}

input[type="checkbox"]+label {
    display: inline;
}

#navigation li {
    width: 12.5%;
    float: left;
}

#navigation li:nth-child(8n) a {
    margin-right: 0;
}

#navigation a {
    margin-right: 2px;
    margin-bottom: 2px;
    color: #fff;
    background-color: #00a2b0;
    transition: background-color 0.3s ease 0s;
}

#navigation .active a {
    border-bottom: 1px solid #c2c2c2;
    color: #c4c924;
    background-color: #fff;
}

#navigation a:hover {
    color: #c4c924;
    background-color: #fff;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
}

#navigation span {
    display: block;
    margin: 0px auto;
    width: 80px;
}

.dropdown select {
    height: 32px;
    padding: 0 0 0 1em;
}

#chart-footer h3 {
    font-family: kyrial-sans-pro, sans-serif;
    color: #f05500;
}

#range-selector li a {
    white-space: nowrap;
}

#range-selector li:last-child a {
    margin-right: 0px;
}

#range-selector li {
    padding: 0 5px 2px 0;
}

#range-selector a {
    margin: 0;
    border: 1px solid #f48040;
}

#range-selector li a {
    border-radius: 2px;
    color: #7c7c7d;
    background-color: #fff;
    border: solid 1px #cbcfd4;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
}

#range-input {
    width: 100%;
    margin-bottom: 10px;
}

.history-download {
    width: 100%;
    padding-bottom: 10px;
    display: inline-block;
}
.history-download h3{
  font-size: 14px;
}
.history-download .download-options{
  width: 70%;
  float: left;
}
.history-download .select-format{
  width: 97%;
}

#range-input .submit,
#chartexport a,
.history-download a {
    border-radius: 2px;
    color: #fff;
    background-color: #a6a6a6;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
    border: 1px solid #a6a6a6;
}

.history-download a {
    display: block;
    height: 34px;
    line-height: 30px;
    text-align: center;
    padding: 0px 1em;
    width: 30%;
    float: left;
}

#range-selector li.active a {
    color: #f05500;
    background-color: #fff;
    border: 1px solid #f05500;
}

#range-selector li.active a:hover {
    color: #f05500;
    background-color: #fff;
    border: 1px solid #f05500;
}

#range-selector li a:hover {
    border-radius: 1px;
    color: #fff;
    text-decoration: none;
    background-color: #a6a6a6;
    border: 1px solid #a6a6a6;
}

input[type="checkbox"]+label::before {
    bottom: -2px;
}

input[type="checkbox"]:checked+label:before {
    color: #f05500;
}

#range-input .submit:hover,
#chartexport a:hover,
.history-download a:hover {
    border-radius: 1px;
    color: #fff;
    background-color: #f05500;
    text-decoration: none;
    transition: background-color 0.3s ease 0s;
    border: 1px solid #f05500;
}

#range-input .title {
    line-height: 26px;
    font-weight: normal;
    color: #f05500;
}
.range-input-section{
  width: 70%;
  float: left;
  font-size: 14px;
}
#range-input .range-wrap {
    margin-right: 0;
    width: 48%;
    max-width: 48%;
}

#range-input .submit {
    max-width: 100%;
    width: 30%;
    float: left;
}

#top-table td {
    white-space: nowrap;
    font-size: 13px;
}

.footer_wrapper {
    display: none;
}

#bottom-table>tbody>tr>td,
#bottom-table>tbody>tr>th,
#bottom-table>tfoot>tr>td,
#bottom-table>tfoot>tr>th,
#bottom-table>thead>tr>td,
#bottom-table>thead>tr>th {
    border-top: 1px solid #fff;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
}

#chart-footer>div:nth-child(4n+5) {
    padding-left: 0.25em;
}

#bottom-table th {
    font-family: kyrial-sans-pro, sans-serif;
    border-color: -moz-use-text-color -moz-use-text-color -moz-use-text-color #fff;
    font-weight: 100;
    color: #f05500;
    padding: 2px 5px;
    background-color: #fff;
    font-size: 14px;
    border: solid 1px #cbcfd4;
    /*font-weight:bold;*/
}

#bottom-table tr.row1 .col5 {
    text-align: center;
}

#top-table .row3 td {
    border-bottom: medium none;
    padding-bottom: 1em;
}

#top-table .row4 td,
#top-table .row5 td,
#top-table .row6 td,
#top-table .row7 td,
#top-table .row8 td,
#top-table .row9 td,
#top-table .row10 td,
#top-table .row11 td,
#top-table .row12 td {
    height: 30px;
}

#top {
    padding: 0;
}

#chart-footer>div {
    width: 100%;
}

#chart-footer {
    border: none;
    font-size: 13px;
}

#bottom-table td {
    padding-left: 10px;
    color: #747474;
    border-bottom: solid 1px #f05500;
}

#bottom-table tr td {
    font-size: 12px;
    text-align: left;
    padding-left: 5px;
}

#bottom-table .row2 th.col5 {
    text-align: left;
}

.is-today .pika-button {
    color: #fff;
}
.benchmark-checkbox{
  margin-bottom: 10px;
}
/* .benchmark-checkbox label {
    white-space: nowrap;
} */

.is-selected .pika-button {
    background: #fff;
    box-shadow: 0 0 0px #FFFFFF inset;
    color: #f05500;
    border-radius: 3px;
}


/*New Header*/

.top_nav_links {
    border-bottom: 4px solid #fff;
    padding-left: 6px;
    display: inline;
}

#top-table-new tr {
    float: none;
    width: 100%;
}

#top-table-new td {
    border-bottom: 1px solid #cbcfd4 ;
    display: table-cell;
    float: none;
    width: auto;
    border-right: 10px soild #fff;
    line-height: normal;
    padding: 8px 0 3px;
}

#top-table-new table td,
#top-table-new .col2 {
    text-align: left;
    width: 50%;
    white-space: normal;
}

#top-table-new table td.col1 {
    padding-right: 15px;
}

#top-table-new .col2 div,
#top-table-new table tr.row11 td.col1 div {
    text-align: left;
    height: 21px;
    font-size: 12px;
}

#top-table-new .col2 div span,
#top-table-new table tr.row11 td.col1 div span {
    float: right;
    display: inline-block;
    font-weight: normal;
}

.top-info {
    display: table;
    width: 100%;
    border-bottom: 1px solid #cbcfd4;
    padding: 6px 0 3px;
    font-size: 14px;
}

.top-info div {
    display: table-cell !important;
}
#top-table-new .col1 .date-time{
  font-size: 14px;
}

.top-share-info-wkn {
    float: left;
    padding-right: 10px;
    text-align: right;
    width: 36%;
}

.top-share-info {
    text-align: right;
    padding-right: 3px;
}

#top-table-new {
    padding: 3px 0 10px 0;
    border-bottom: 0px solid transparent;
}

#top-table-new .col1 .date-time {
    /*color: #7F7F91;
  font-size: 12px;*/
}

#top-table-new .col1 .price {
    color: #f05500;
    font-size: 46px;
    font-weight: bold;
    padding: 4px 0;
}

#top-table-new .col1 .changes {
    font-size: 14px;
}

#top-table-new .col1 .changes span {
    padding-left: 6%;
}

#top-table-new .col1 .changes .fa-lg {
    font-size: 28px;
    vertical-align: -27%;
}

#bottom-table tr td:first-child {
    word-break: break-all;
}

#wrapper #chart {
    width: 100%;
    float: left;
}

body {
    -webkit-text-size-adjust: none;
}

tbody,
tbody tr.row1 .col5 {
    text-align: right!important;
}

tbody tr td {
    padding-right: 5px!important;
}

#bottom-table thead tr:last-child th,
.bottom-table thead tr:last-child th {
    border-bottom: solid 1px #cbcfd4;
}

#bottom-table tr:last-child td,
.bottom-table tr:last-child td {
    border: solid 1px #cbcfd4;
    border-top: none;
}

#footer {
    font-size: 12px;
    color: #a7a7a7;
    margin-top: 40px;
}

#range-input .submit {
    height: 34px;
    line-height: 30px;
    margin-top: 17px;
}

.pika-table abbr {
    cursor: default;
}


.pika-button:hover {
    background: #f05500 !important;
}

.is-today .pika-button {
    color: #f05500;
}

.dropdown {
    border: solid 1px #cbcfd4;
}

#bottom-table td:before,
.bottom-table td:before {
    font-weight: normal;
}

input[type="checkbox"] + label:before{
    top: 3px;
}


.exchange-text-box{
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    font-family: kyrial-sans-pro, sans-serif;
    height: 32px;
    padding: 0 0 0 1em;
    border: #f05500 1px solid;
    pointer-events: none;
}
#range-input .range-wrap .calendar-icon{
    bottom: 8px;
}
.last-open{
  padding-right: 10px;
}
#chart-footer .select-exchanges{
  display: none;
}
.mobile-view-footer{
  display: none;
}
/*New Header end*/

@media screen and (max-width: 1300px) {
    /*#top-table tr{width:50%;}*/
    #top-table .row5 td:first-child,
    #top-table .row6 td:first-child,
    #top-table .row7 td:first-child,
    #top-table .row9 td:first-child,
    #top-table .row10 td:first-child,
    #top-table .row11 td:first-child,
    #top-table .row13 td:first-child {
        margin-left: 0%;
        width: 50%;
    }
    #top-table .row4 td:last-child,
    #top-table .row5 td:last-child,
    #top-table .row8 td:last-child,
    #top-table .row9 td:last-child,
    #top-table .row12 td:last-child,
    #top-table .row13 td:last-child {
        margin-right: 0;
        width: 46%;
    }
    #top-table .row9 td:last-child,
    #top-table .row5 td:last-child {
        width: 50%;
    }
    #range-input, .history-download {
        width: 100%;
    }

}




@media screen and (max-width: 800px) {
    #bottom-table tr td {
        padding-left: 6px;
    }
    #bottom-table thead tr:last-child th {
        padding: 10px 0.5em;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    #range-selector li:nth-child(4) {
        padding: 0 0 2px 0;
    }
}

@media screen and (max-width: 767px) {

}

@media screen and (min-width: 480px) and (max-width: 1024px) {
    #navigation li {
        width: 25%;
    }
    #navigation li:nth-child(4n) a {
        margin-right: 0;
    }
}

@media screen and (max-width: 600px) {
    #bottom-table td {
        border-bottom: 1px solid #c2c2c2;
    }
    #chart-footer>div:nth-child(2n+2) {
        padding-left: 0;
    }
    #range-input .range-wrap {
        width: 49.5%;
        max-width: 49.5%;
    }
    #range-input .submit{
      width:100%;
    }
    .left_wrapper, .footer-view-left{
      width: 100%;
      padding-right: 0;
      float: none;
    }
    .right_wrapper, .footer-view-right{
      width: 100%;
      float: none;
    }
    .range-input-section{
      width: 100%;
      float: none;
    }
    .history-download .download-options, .history-download .select-format{
      width: 100%;
      float: none;
    }
    .history-download a{
      width: 100%;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    #range-selector ul{
      display: flex;
      justify-content: space-between;
      float: none;
      margin: 0px;
      padding: 0px;
    }
    #range-selector ul li{
      float: none;
      margin: 0px;
    }
    .mobile-view-footer{
      display: block;
    }
    .desktop-view-footer{
      display: none;
    }
    #bottom-table tr {
        border-top: 1px solid #cbcfd4;
    }
    .top-info{
      font-size: 12px;
      line-height: 21px;
    }
    #top-table-new .col1 .date-time{
      font-size: 13px;
    }
    #chart-footer>div:nth-child(4n+5){
      padding-left: 0px;
      padding-right: 0px;
    }
}

@media screen and (max-width: 599px) {
    .top-share-info-wkn {
        float: right;
    }
    #bond-data-table th:first-child {
        width: 100%;
        font-size: 1em;
    }
    #bond-data-table td,
    #bond-data-table a {
        font-size: 0.8em;
    }
    .sma-0,
    .sma-1 {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    #top-table td {
        font-size: 12.5px;
        white-space: nowrap;
    }

    #bottom-table tr.row1 .col5 {
        text-align: left;
    }


}


/*#chart{
	background: transparent url("images/logo.png") no-repeat scroll 45% 20%;
}*/

@media screen and (max-width: 480px) {
    #wrapper #top,
    #wrapper #chart-header>div,
    #wrapper #chart,
    #wrapper #chart-footer,
    #wrapper #bottom,
    #wrapper #footer {
        /*border: 1px solid #fff;*/
        padding-right: 0px;
        padding-left: 0px;
    }
    #navigation li {
        width: 50%;
    }
    #navigation li:nth-child(2n) a {
        margin-right: 0;
    }
    #range-selector ul,
    #range-selector ul li {
        border: none;
    }
    /*#range-input .submit{
		width:100px;
	}*/
    .benchmark-0,
    .benchmark-1 {
        width: 98%;
    }
    #range-input {
        width: 100%;
    }
    .history-download {
        padding-top: 0;
    }
    #wrapper #chart {
        background-size: 40% !important;
        background-position: 40% 35% !important;
        width: 98%;
    }
    #info-footer, #chartinfo{
        font-size: 12px;
    }

}

@media screen and (max-width: 430px) {
    #range-input .range-wrap {
        width: 100%;
    }
    #range-input .submit {
        width: 100%;
    }
	.calender-range, .historical-download-data{
		display: block;
	}
	#range-input .range-wrap.range-begin, #range-input .range-wrap, .history-download .select-format, .history-download a{
		max-width:100%;
		width:100%;
		float: none;
	}
	.history-download a{
		margin-left: 0px;
		margin-top: 10px;
	}
}

@media screen and (max-width: 410px) {
    #top-table-new table td,
    #top-table-new .col2 {
        display: block;
        width: 100%;
    }
    #top-table-new table td.col1 {
        padding-right: 0;
    }
    .last-open{
        padding-right: 0px;
    }
}

@media screen and (max-width: 340px) {
    div.history-download {
        width: 100%;
        padding-left: 0;
    }
    #wrapper {
        width: 100%;
        padding-left: 0;
        float: left;
    }
}