body{
  font-family: Microsoft Yahei, Arial, sans-serif;
  font-size: 12px;
  color: #545454;
  background: transparent!important;
  margin: 0;
  padding: 0;
  width: 99.8%!important;
}
table {
  border-collapse: collapse;
}
div.FinCalendar {
/*
  The Container for the FinCalendarObject itself, in essence controlls the with of the tool. (All CSS should be OK for this element)
*/
  /* width: 100%; */
  /* max-width: 466px; */
  /* border: 1px solid #dddddd; */
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: transparent!important;
  margin: 0 auto;
}
div.HeaderContainer {
/*
  The container element for the HeaderObject
*/
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  background-color: #035c8b;
  /*
  /*
      NB! - ALL of the above code (starding from [background-color]) is required for cross browser compadible CSS gradient!
  */
  border-bottom: 2px solid #eff0f2;
  height: 30px;
  box-sizing: border-box;
}
table.Header {
/*
  The Header Table for the FinCalendarObject
*/
  
  height: 30px;
}
div.CurrentValue {
/*
  In the HeaderObject, the current month marker
*/
  text-align: center;
  color: #FFF;
  font-size: 13px;
  font-weight: normal;
  line-height: 16px;
}
td.Next,
td.Previous {
/*
  [td.Next] - In the HeaderObject, the container for the next-months link
  [td.Previous] -In the HeaderObject, the container for the previous-months link
*/
  
  padding: 0px 3px;
  text-align: center;
  font-size: 13px;
}
a.link {
/*
  The calendar moving links
*/	
  text-decoration: none;
  color: transparent;
}

div.LegendColorBox {
/*
  The marker for the ColorBox in the legend.
  NOTE! - The [background-color] is set by the JS
*/
  width: 7px;
  height: 7px;
  border-radius: 5px;
  margin-left: 0;
  overflow: visible !important;
}
div.LegendContainer {
/*
  The LegendObject's container
*/
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  padding: 0;
  padding-top: 2px;
  /* border-top: 1px solid #dddddd; */
}
div.LegendContainer table {
/*
   The legend Table it self
*/
  border-collapse: collapse;
  width: 100%;
}
div.LegendContainer table td {
/*
  The cell of the Legend Table, the TD element holds the color marker and the TD.LegendName holds the name of the legend Item.
*/
  border: 0px solid #E8EBEF;
}
div.LegendContainer td.LegendName {
/*
  The marker for the Legend Items name i.e. the text part of the legend
*/
  text-align: left;
  padding: 2px 0 2px 4px;
  white-space: nowrap;
  overflow: visible !important;
  position: relative;
}

.zh-CN .LegendName.LegendName_2[title="资本市场开放日"]:after {
  content: "资本市场开放日";
}
.zh-TW .LegendName.LegendName_2[title="資本市場開放日"]:after {
  content: "資本市場開放日";
}
.LegendName.LegendName_2[title="资本市场开放日"] > span, 
.LegendName.LegendName_2[title="資本市場開放日"] > span {
  display: none;
}
table.Calendar {
/*
  The actual calendar itself as a table.
  the TH elements are the weekday markers and the TD elements are the day cells 
*/
  border-collapse: separate;
  border-spacing: 0;
}
table.Calendar td.Day, 
table.Calendar th {
  width: unset; /* (100% / 7) == ~14.28%  - in essence this gives equal distributation between the days*/
  line-height: 17px !important;
  box-sizing: border-box;
}
table.Calendar td.Day {
  height: 28px;
  padding: 0;
}
table.Calendar th {
  font-weight: normal;
}
table.Calendar td.Day {
  border-bottom: 1px solid #E8EBEF;
  background: white;
}
table.Calendar th {
  text-align: center;
  background: transparent;
  padding-right: 0;
  border-bottom: 1px solid #E8EBEF;
  height: 28px;
  color: #304155;
  font-weight: bold;
}
div.DateNumber {
/*
  The DIV inside the DayObject that holds the day's number
*/
  text-align:center;
  padding-right: 0;
}
table.Calendar td.NotActive {
/*
  The Marker for a not active Day cell in the Calendar
*/
  background: #ffffff;
  color: #c8c8ce;
}
table.Calendar td.Weekend {
/*
  The Marker for a weekend Day cell in the Calendar
  NOTE! - The [.Weekend] class is also on the TH elements of the Calendar Object i.e. on the weekday markers
*/
  background: #ffffff;
  border-color: #dddddd;
}
table.Calendar td.WeekendNotActive {
/*
  The Marker for a weekend Day cell in the Calendar on a day, that is not active i.e. not in the set month
*/
  background: #ffffff;
  background: #ffffff;
}

.Next a, .Previous a {
position: relative;
}

  .Previous a {
	background: url('left.png');
	content: url('left.png');
	/*! position: absolute; */
	left: 2px;
	top: -2px;
  }
  
  .Next a {
	background: url('right.png');
	content: url('right.png');
	/*! position: absolute; */
	right: 2px;
	top: -2px;
  }
td.Today div div.DateNumber {
background: #035C8B;
border: 1px solid #035C8B;
border-radius: 67%;
margin: 0 auto;
position: relative;
width: 22px;
}
table.Calendar td.HasEvents:Hover {
/*
  The [TD.HasEvents] is given to the individual cell buy it's DayObject, but only if it actually has any events on it.
*/
  background-color: #ffffff;
}
table.EventMarkers {
/*
  The Table inside a DayObject that holds the individual Event markers for set day.
*/
  float: right;
}
td.EventTypeMarker div {
/*
  The marker for the individual Event a day cell.
  NOTE! - The [background-color] is set by the JS
*/	
  width: 4px;
  height: 4px;
}
div.Info {
/*
  The Container DIV for the HoverMessages
*/
  background: #ffffff;
  
  -webkit-box-shadow: 0px 0px 10px 3px #cccccc;
  -moz-box-shadow: 0px 0px 10px 3px #cccccc;
  box-shadow: 0px 0px 10px 3px #cccccc;
      
  border: 1px solid #dddddd;
  margin-left: 7px;
  margin-right: 7px;
}
html.IE7_8 div.Info {
  margin-left: 0px;
  margin-right: 0px;
}
div.QuickInfo {
/*
  The DIV container element into with the quick info is made
  PS! - The 100% width is needed for the Quick Info, because of IE6 & IE7 that otherwise do not give this div a width of 100% for some reason.
*/
  padding: 5px;
  width: 100%;
}
div.QuickInfo b {
/*
  The heading of the QuickInfo.
  NB! - Besides this tag there is only the "Click for more info..." text avalible.
*/
  color: #333;
}
table.EventsHeading {
/*
  The Heading for the Events itself (holds the date) and the close button (if needed).
  The TH element holds the Events' Heading while the [TD.CloseButton] element holds the close Button
*/
  margin-bottom: 0px;
  width: 100%;
}
table.EventsHeading TH {
  width: 100%;
  text-align: left;
  color: #333;
  padding: 10px 5px 5px 5px;
  font-size: 12px;
}
table.EventsHeading TD.CloseButton {
  padding-right: 5px;
}
table.EventsHeading TD.CloseButton input {
/*
  The Actuale close button element
*/
  background-color: #9e0b0f;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#9e0b0f)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #ed1c24, #9e0b0f); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #ed1c24, #9e0b0f); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #ed1c24, #9e0b0f); /* IE10 */
  background-image:      -o-linear-gradient(top, #ed1c24, #9e0b0f); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #ed1c24, #9e0b0f);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ed1c24', EndColorStr='#9e0b0f'); /* IE6-IE9 */
  
  border: 1px solid #77080b;
  color: #545454;
  font-weight: bold;
  padding: 0px 5px 0px 5px;
  
}
div.Events {
/*
  The Container Element for all of the events that are displayed in the Hover info box
*/
  padding: 5px;
}
div.Event {
/*
  An individual event inside the [div.Events] element. The B element holds the event's heading while the P element holds the events text. Inside the B element there can also be a "I" (italic) element that holds aider the time of the event or the date range of the event.
*/
  background: #f3f3f3;
  border: 1px solid #dddddd;
  margin-bottom: 5px;
  padding: 5px;
  font-size: 12px;
}
div.Event b {
  color: #333;
}
div.Event p {
  margin: 0px;
}
div.Event i {
  font-style: normal;
}
div.Footer {
/*
  The Events' Footer Eelement, holds the "Go to main tool" button
*/ 
  padding: 0px 5px 10px 5px;
}
div.Footer input {
/*
  The actuale "Go to main tool" button.
*/
  width: 100%;
  background: #969696;
  border: 1px solid #393939;
  color: #545454;
}  

table.Calendar td.Weekend, table.Calendar th.Weekend {
  background: #f5f5f5;
}


td.Weekend.Today.Day {
background: #E60000;
color: #fff;
}

td.Today {
color: #fff!important;
}
table.Calendar {
width: 100%!important;
}

/* @media(max-width:750px){
body {
  width: 99.5%!important;
}
} */

div#Main {
max-height: 246px !important;
height: 246px !important;
max-width: 335px !important;
width: 100% !important;
}
.CalendarContainer table.Calendar {
height: 196px !important;
}
@media(max-width:580px){
  .en-GB .CalendarContainer > div {
    height: 280px!important;
  }
}
.LegendContainer tbody tr {
display: inline-block;
font-size: 12px;
width: 50%;
}
div[style="overflow: hidden;"] {
  overflow: visible !important;
}
td.EventTypeMarker div {
  width: 10px!important;
  height: 10px;
  border-radius: 30px;
}

td.EventTypeMarker div {
width: 6px!important;
height: 7px;
border-radius: 30px;
}
.LegendColorBox_2 {
  width: 13px;
  height: 17px;
}

.CalendarContainer > div, .CalendarContainer > div > div, .CalendarContainer > div > div > div {
  height: 196px !important;
}

td[style="width: 100%;"] div {
  width: 270px !important;
}