/* colours

!
! Text: #000000
!
! Peach yellow colour: #fff5e0;
! Grey line on top of peach/yellow: #807d76;
! Grey lines running horizontally: #e2e2e2;
! Blue of zoom/month function: #e6ebf5;
! Grey heading at the bottom (time thing): #f5f5f5;
!
!
!
!
!
!
*/


.feed_code {
  font-size: 18px;
  color: red;
  font-weight: bold;
}

body {
  margin: 0;
}

td,
th,
p {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  color:  #767676;
  font-weight: 400;
  text-align: left;
  line-height: 135%;
}

table {
  border-collapse: collapse;
}

b {
  font-weight: bold;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.table_left {
  padding: 6px 0px 6px 8px;
}

.table_left_ {
  padding: 6px 0px 6px 8px;
  font-size:10px;
}

.table_left_flat {
  padding: 0px 0px 0px 8px;
}

.table_left_no_bottom {
  padding: 6px 0px 0px 8px;
}

.table_left_no_top {
  padding: 0px 0px 6px 8px;
}

.table_center {
  text-align: center;
}

.table_right {
  text-align: right;
  padding: 6px 8px 6px 0px;
}

.table_right_flat {
  text-align: right;
  padding: 0px 8px 0px 0px;
}

.table_head {
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  padding: 5px 0px 5px 8px;
  background-color: #000000;
}


.column_head_left {
  font-weight: bold;
  text-align: left;
  padding: 5px 0px 2px 8px;
}

.column_head_center {
  font-weight: bold;
  text-align: center;
  padding: 5px 0px 2px 0px;
}

.column_head_right {
  font-weight: bold;
  text-align: right;
  padding: 5px 8px 2px 0px;
}

.section_head_left {
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  padding: 5px 0px 2px 8px;
  background-color: #000000;
}

.section_head_right {
  color: #ffffff;
  font-weight: bold;
  text-align: right;
  padding: 5px 8px 2px 0px;
  background-color: #000000;
}

.price-row {
  height: 68px;
}

a:link,
a:visited {
   color: #000000;
  text-decoration: none;
}
a:hover,
a:active {
  font-weight: bold;
  color: #000000;
  text-decoration: none;
}

.poweredby {
  font-size: 8px;
  color: #999999;
  text-align: right;
  padding-right: 8px;
  padding-top: 10px;
  letter-spacing: 2px;
  height: 0px;
}

.poweredby .poweredby-img {
  height: 10px;
}

a.powered:link,
a.powered:visited {
  color: #666666;
  font-size: 8px;
  text-decoration: none;
  font-weight: bold;
}

a.powered:hover,
a.powered:active {
  color: #999999;
  font-size: 8px;
  text-decoration: none;
  font-weight: bold;
}

.rule {
  height: 10px;
  font-size: 1px;
}

.last_rule {
  height: 10px;
  /* padding-top: 12px; */
  font-size: 1px;
}

hr {
  color: #0571c6;;
  background-color: #0571c6;;
  height: 1px;
  border: 0px;
  width: 100%;
  margin: 0px;
}

.spacer_xs {
  height: 4px;
  font-size: 1px;
}

.spacer_s {
  height: 8px;
  font-size: 1px;
}

.spacer {
  height: 8px;
  font-size: 1px;
}

.spacer_l {
  height: 18px;
  font-size: 1px;
}

.spacer_xl {
  height: 25px;
  font-size: 1px;
}

.price {
  font-size: 26px;
  font-weight: 600;
  padding-left: 8px;
  padding-top: 0px;
  padding-bottom: 0px;
  color: #0571c6;
}

.graph {
  text-align: right;
  padding: 3px 8px 3px 0px;
}

.notes {
  font-size: 10px;
  padding-left: 8px;
}

sup {
  font-size: 8px;
  vertical-align: super;
  line-height: 0;
  padding-right: 2px;
}

#e03_pc,
#e03_mob {
  margin-top: 20px;
}


/*  T01 starts  */

#t01 p {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
  background-color: #000000;
}


#t01 .marquee {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  font-weight: normal;
}

#t01 img{
  width: auto;
  height: 10px;
  margin-bottom: -1px;
}

#t01 .ticker_sml {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

#t01 a:link,
#t01 a:visited {
  color: #ffffff;
  text-decoration: none;
}
#t01 a:hover,
#t01 a:active {
  color: #999999;
  text-decoration: none;
}

/*  T01 ends  */

/*  n02 begins  */

#n02_pc img {
  margin-top: 12px;
}

#n02_mob img {
  margin-bottom: -3px;
}

/*  n02 ends  */

/*  T04 begins  */

#t04_pc img,
#t04_mob img {
  width: auto;
  height: 22px;
  margin-bottom: -2px;
}

/*  T04 ends  */

/*  E01 begins  */

#e01_pc .arrows,
#e01_mob .arrows {
  width: 32px;
  height: 32px;
 
}

/*  E01 ends  */

/*  t04 extra begins  */

#t04_extra_pc thead tr th:first-child,
#t04_extra_pc tbody tr td:first-child {
  width: 250px;
  min-width:250px;
  max-width:250px;
  word-break: break-all;
}

/*  t04 extra ends  */


/*---- SENS pop-up styles starts here ------*/

body.sens {
  margin-top: 20px;
}

.sens_head {
  font-size: 20px;
  color: #000000;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  height: 24px;
  padding-left: 20px;
}

.sens_date {
  height: 28px;

  padding-left: 20px;

  padding-bottom: 10px;
  border-bottom: solid #2a2a2a 1px;
}

.sens_body {
  text-align: justify;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
}

.sens_left {
  padding-left: 20px;
}

.mono_type {
  padding-left: 20px;
  padding-right: 20px;
}

/*---- SENS pop-up styles ends here ------*/


/*---- drop-down and checkbox selectors styles starts here ------*/

select {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-align: center;
  height: 40px;
  outline: none;
  border: 0px solid #999999;
  border-radius: 5px;
  cursor: hand;
  padding-left: 0px;
  padding-right: 0px;
  background: url(images/select_down_arrow.png) no-repeat right #e4dddd;
  background-position-x: calc(100% - 10px);
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

select {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
}

select[name="startdate"],
select[name="enddate"] {
  width: 100%;
  border: 0px solid #999999;
  padding-left: 8px;
}

select[name="CE"],
#n03b input[type="text"] {
  width: 265px;
  padding-left: 8px;
}

select[name="month"] {
  width: 110px;
  padding-left: 8px;
}

select[name="year"] {
  width: 80px;
  padding-left: 8px;
}

input {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  text-align: left;
  height: 40px;
  outline: none;
  border: 0px solid #999999;
  background-color: #e4dddd;
  border-radius: 5px;
  cursor: hand;
  padding-left: 8px;
  padding-right: 0px;
}

#quickperiod,
#fromA,
#toA,
#selectmenu {
  width: 100%;
  border: 0px solid #999999;
  padding-left: 8px;
}

#quickperiod:focus,
#fromA:focus,
#toA:focus,
#selectmenu:focus,
input[type="text"]:focus,
input[name="number"]:focus,
select[name="startdate"]:focus,
select[name="enddate"]:focus,
select[name="CE"]:focus,
input[name="keyword"]:focus,
select[name="month"]:focus,
select[name="year"]:focus  {
  border: 2px solid #000000;
  padding-left: 6px;
}

input[type="text"],
input[name="number"] {
  width: 100%;
  text-align: left;
  padding-left: 8px;
}

input[type="submit"],
input[name="calculate"] {
  text-align: center;
  border: 0px solid #999999;
  background-color: #000000;
  color: #ffffff;
  padding-left: 0px;
}

input[type="submit"] {
  width: 80px;
}

input[name="calculate"] {
  width: 120px;
}

input[type="radio"],
input[type="checkbox"] {
  width: 14px;
  height: 14px;
  line-height: -20px;
}

input[type="image"] {
  background-color: transparent;
}


input[name="PriceMovesAbove"] {
  text-align: right;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  width: 90px;
  
}

/*---- custom checkbox starts here ------*/

input[type=checkbox].css-checkbox {
	position:absolute;
	z-index:-1000;
	left:-1000px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	height:1px;
	width:1px;
	margin:-1px;
	padding:0;
  border:0;
}

input[type=checkbox].css-checkbox + label.css-label-checkbox, input[type=checkbox].css-checkbox + label.css-label-checkbox.clr {
	padding-left:18px;
	height:13px; 
	display:inline-block;
	line-height:13px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size: 13px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label-checkbox, input[type=checkbox].css-checkbox + label.css-label-checkbox.chk {
	background-position: 0 -13px;
}

label.css-label-checkbox {
	background-image:url(images/checkbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.button_low,
.button_low:hover {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #9b9c9c;
  text-align: center;
  font-weight: normal;
  padding-left: 0px;
  padding-right: 0px;
  width: 25px;
  height: 25px;
  background-color: #ffffff;
  border: 1px solid #a7a9ab;
  cursor: hand;
}

.button_no,
.button_no:hover {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  font-weight: normal;
  padding-left: 0px;
  padding-right: 0px;
  width: 25px;
  height: 25px;
  background-color: #a31a2d;
  border: 1px solid #a31a2d;
  cursor: hand;
}

.button_yes,
.button_yes:hover {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  font-weight: normal;
  padding-left: 0px;
  padding-right: 0px;
  width: 25px;
  height: 25px;
  background-color: #00954b;
  border: 1px solid #00954b;
  cursor: hand;
}

/*---- custom checkbox ends here ------*/

/*---- drop-down and checkbox selectors styles ends here ------*/

/* sens nav starts here  */

.sens_nav {
  border-style: solid;
  border-color: #000000;
  border-width:  0px 0px 1px 0px;
}

#n03b ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}

#n03b li {
  float: left;
}

#n03b li a {
  color: #000000;
  display: block;
  background-color: #ffffff;
  text-align: center;
  padding: 10px;
  width: 60px;
  text-decoration: none;
  margin-right: 0px;
  border-style: solid;
  border-color: #ffffff;
  border-width:  1px 1px 0px 1px;
}

#n03b li a:hover:not(.active) {
  color: #000000;
  border-style: solid;
  border-color: #000000;
  border-width:  1px 1px 0px 1px;
  font-weight: normal;
}

#n03b .active {
  background-color: #000000;
  color: #ffffff;
  border-style: solid;
  border-color: #000000;
  font-weight: bold;
}

@media only screen and (max-width: 660px) {
  #n03b li {
    float: none;
  }

  #n03b li a {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 0px;
    border-style: solid;
    border-color: #ffffff;
    border-width:  1px 1px 1px 1px;
  }

  #n03b li a:hover:not(.active) {
    border-width:  1px 1px 1px 1px;
  }

}

/* sens nav ends here  */





/*----------	tab size    ---------*/

@media only screen and (max-width: 800px) {
#e04 table td:nth-child(1n + 6) {
    display: none;
  }
}

/*----------	mob size    ---------*/

@media only screen and (max-width: 650px) {
#e04  table td:nth-child(0n + 3),
#e04  table td:nth-child(0n + 4),
#s05  table td:nth-child(0n + 3) {
    display: none;
  }
}



/*----------	PC size    ---------*/

#n02_mob {
  display: none;
}

#t04_mob {
  display: none;
}

#t04_extra_mob {
  display: none;
}

#e01_mob {
  display: none;
}

#e03_mob {
  display: none;
}

#s05 .mob {
  display: none;
}

#s01_mob {
  display: none;
}

#s02_mob {
  display: none;
}

#s06_mob {
  display: none;
}

#n03b_ticks_mob,
#n03b_period_mob,
#n03b_mob {
  display: none;
}

/*----------	Mob size    ---------*/

@media only screen and (max-width: 676px) {
  #n02_pc {
    display: none;
  }

  #n02_mob {
    display: block;
  }

  #t04_pc {
    display: none;
  }

  #t04_mob {
    display: block;
  }

  #t04_extra_pc {
    display: none;
  }

  #t04_extra_mob {
    display: block;
  }

  #e01_pc {
    display: none;
  }

  #e01_mob {
    display: block;
  }

  #e03_pc {
    display: none;
  }

  #e03_mob {
    display: block;
  }

  #s05 .pc {
    display: none;
  }

  #s05 .mob {
    display: block;
  }  

  #s01_pc {
    display: none;
  }

  #s01_mob {
    display: block;
  } 
  
  #s02_pc {
    display: none;
  }

  #s02_mob {
    display: block;
  }

  #s06_pc {
    display: none;
  }

  #s06_mob {
    display: block;
  }  

  #n03b_ticks_pc,
  #n03b_period_pc,
  #n03b_pc {
  display: none;
}

  #n03b_ticks_mob,
  #n03b_period_mob,
  #n03b_mob {
  display: block;
}
}