@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



body {
    font-family: "Roboto", Microsoft yahei, Arial !important;
	font-size: 16px !important;
	color: #000000 !important;
	font-weight: normal;
	background: transparent !important;
	margin: 0;
	padding: 0;
	width: 99.8% !important;
}

body {
	margin: 0px;
	-webkit-text-size-adjust: 100% !important;
}

table {
	border-collapse: collapse;
}

td,
th {
	padding: 0px;
}

.LegendColorBox_2 {
	width: 13px;
	height: 17px;
}

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
*/
	background-color: #fff;
	border-top-left-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-radius: 0px \0/;

	/*
		NB! - ALL of the above code (starding from [background-color]) is required for cross browser compadible CSS gradient!
	*/
	border-bottom: 0 none;
	padding-top: 3px;
	padding-bottom: 3px;
	border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom: 0 none;
    border-bottom-color: currentcolor;
  background: linear-gradient(181deg,#d71820 .56%,#7c0109 99.44%);
  color: #FFFFFF;
  border-color: #D71820;
  -webkit-text-fill-color: #fff !important;
}

table.Header {
	/*
	The Header Table for the FinCalendarObject
*/

	height: 17px;
	font-size: 10px;
	line-height: 17px;
}

div.CurrentValue {
	/*
	In the HeaderObject, the current month marker
*/
	text-align: center;
	color: #509db4;
	font-size: 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 0px 20px;
	text-align: center;
}
.Next {
  padding: 0px 20px 0px 3px !important;
}
a.link {
	/*
	The calendar moving links
*/
	text-decoration: none;
	color: #3D4F59;
}

a.link:hover {
	/*
	The calendar moving links
*/
	text-decoration: underline;
	color: #3D4F59;
}

div.LegendContainer {
	/*
	The LegendObject's container
*/
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	padding: 0;
	padding-top: 0px;
	width: 630px;
	height: 40px;
	margin-top: 10px;
	margin-left: 30px;
}

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 #000000;
}

div.LegendContainer td.LegendName {
	/*
	The marker for the Legend Items name i.e. the text part of the legend
*/
	text-align: left;
	padding-left: 4px;
	white-space: nowrap;
	color: #575757;
	font-size: 14px;

}

div.CalendarContainer {
	/*
	The Container DIV for the CalendarObject
*/
	border-top: 0px solid #D4DBE5;
	border-bottom: 1px solid #D4DBE5;
	padding: 0px 0px 0px 0px;
}

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: 20px !important;
	/* (100% / 7) == ~14.28%  - in essence this gives equal distributation between the days*/
}

table.Calendar th {
	font-weight: normal;
	font-size: 16px;
}

table.Calendar td.Day {
	/*
	The individual Day cell inside the calendar
*/
	border-bottom: 0px solid #E7EAEE;
	background: #ffffff;
}

table.Calendar th {
	text-align: center;
	background: #ffffff;
	color: #000000;
	width: 50px;
	font-size: 18px;
	font-weight: 600 !important;
}

div.DateNumber {
	/*
	The DIV inside the DayObject that holds the day's number
*/
	text-align: center;
	font-size: 16px;
}

/*
	The Marker for a not active Day cell in the Calendar
*/

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: transparent;
}

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: #FFF;
}

td.Today {
	/*
	The Marker for a today's cell in the Calendar
*/
	/* background-color: #D71820 !important; */
	font-weight: bold;
	color: #fff;
	border-radius: 50px;
	margin: 0px auto;
  display: table;
}

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: #dddddd;
}

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: 10px;
	height: 10px;
	margin: 1px;
	border-radius: 5px;
}

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 #E9E9E9;
	margin-left: 15%;
  margin-right: 15%;
	font-size: 12px;

}

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: 0px;
	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: #3D4F59;
}

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: #3D4F59;
	padding: 10px 10px 5px 10px;
}

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 #E9E9E9;
	color: #000000;
	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: 0px 10px 5px 10px;
}

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 #E9E9E9;
	margin-bottom: 5px;
	padding: 5px;
}

div.Event b {
	color: #3D4F59;
}

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-color: #08287f;
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif !important;
	font-size: 16px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 0px solid #E9E9E9;
	color: #000000;
	cursor: pointer;
	font-weight: bold;
}

div.Footer input:hover {
	cursor: pointer;
}

/* .LegendContainer tbody tr {
    font-size: 11.4px;
} */

table.Calendar th {
	font-weight: normal;
	height: 25px;
}

/* 
td.Next, td.Previous {
    padding: 0px 10px 0px 10px;
    text-align: center;
    color: #000;
}


td.Previous {
    background: url(img/arrow-left.png) no-repeat center center;
}

td.Next {
    background: url(img/arrow-right.png) no-repeat center center;
} */

td.Previous a {
	font-size: 0px;
	text-decoration: none !important;
}

.Previous a {
	background: url('left.svg');
	content: url('left.svg');
}

.Next a {
	background: url('right.svg');
	content: url('right.svg');
}

.Previous a:hover {
	background: url('left.svg');
	content: url('left.svg');
}

.Next a:hover {
	background: url('right.svg');
	content: url('right.svg');
}

td.Next a {
	font-size: 0px;
	text-decoration: none !important;
}

td.Next a:before {
	font-size: 16px;
	content: "";
	color: #000000;
}

td.Previous a:before {
	font-size: 16px;
	content: "";
	color: #000000;
}

div.CurrentValue {
	text-align: center;
	color: #000000;
	font-weight: 400;
	font-size: 20px;
}

/* 
a.link {
    display: none;
} */


div.HeaderContainer {
	padding: 10px;
	height: 50px;
	box-sizing: border-box;
}

table.Header {
	height: 28px;
	font-size: 16px;
	color: #000000;
	line-height: 28px;
}

div#Main {
	min-height: 374px !important;
	margin: 0 auto;
	height: 430px !important;
	max-width: 685px !important;
	width: 100% !important;
	-webkit-text-size-adjust: 100% !important;
}

div.FinCalendar>div {
	max-height: 496px !important;
	max-width: 685px !important;
	width: 100% !important;
	height: auto !important;
}

div.LegendContainer table {
	margin-top: 5px !important;
}

table.Calendar td.Day,
table.Calendar th {
	padding: 5px !important;
	height: 40px;
	box-sizing: border-box;
}

.CalendarContainer {
	/* height: 388.56px; */
	height: auto !important;
}

table.Calendar tr:nth-child(odd)>td.Day {
	background: #ffffff;
}

@media (max-width: 525px) {

	div.LegendContainer td.LegendName {
		text-align: left;
		white-space: initial !important;

	}
}


/**Responsive**/
div#Main,
.FinCalendar>div,
table.Calendar {
	width: 100% !important;
}

div.LegendColorBox {
	/*
	The marker for the ColorBox in the legend.
	NOTE! - The [background-color] is set by the JS
*/
	width: 8px !important;
	height: 8px;
	border-radius: 5px;
	margin-left: 5px;

}

@media (max-width: 390px) {
	table.Calendar th {
		font-size: 18px;
	}

	div.DateNumber {
		font-size: 16px;
	}

	table.Calendar td.Day,
	table.Calendar th {
		padding: 0px !important;
	}
}

/* div.Event {
    width: 80% !important;
    margin: 5px 7% !important;
} */

/* .FinCalendar > div > div:last-child > div > div {
    width: 70% !important;
} */
div.CalendarContainer>div,
td[style="width: 100%;"]>div,
div.CalendarContainer>div>div,
td[style="width: 100%;"]>div>div,
div.CalendarContainer>div>div>div {
	width: 100% !important;
}

.NotActive.Day {
	color: #b9b9b9;
}

.LegendName.LegendName_0 {
	width: 45% !important;
}

.LegendName.LegendName_1 {
	width: 45% !important;
}

.LegendName.LegendName_2 {
	width: 45% !important;
}

.LegendName.LegendName_3 {
	width: 45% !important;
}

.LegendContainer td {
	display: inline-block;
}

/* .LegendContainer > div > table > tbody > tr {
    display: inline-block;
	width: 35%;
} */
td.Day {
	height: 20px !important;
	min-height: 20px !important;
}

.LegendColorBox.LegendColorBox_2 {
	margin-top: 3PX;
}

td.Today.Day .DateNumber {
	background: #D71820 !important;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	position: inherit;
	margin-top: 0px;
}

@media(max-width:360px) {
	div.DateNumber {
		font-size: 14px;
		width: 45px !important;
	}
	table.Calendar td.Day > div {
		width: 10px !important;
	  }
	table.Calendar th {
		font-size: 13px;
		width: 25px !important;
		padding-right: 10px !important;
	}

	td.Today.Day .DateNumber {
		margin-left: 0px;
	}

	.LegendName.LegendName_0 {
		width: 20% !important;
	}

	.LegendName.LegendName_2 {
		width: 40% !important;
	}
	td.Today{
		margin: 0px;
	}
}
/* 
@media(max-width:480px) {
	div.Info {
		max-width: 150px;
	}
} */

table.EventsHeading TD.CloseButton input,
div.Footer input{
	background-color: #D71820 !important;
	color: #ffffff !important;
}
.Event > p {
  display: none;
}
@media(max-width:600px){
	.LegendName.LegendName_0 {
  width: 35% !important;
}
}
@media(max-width:480px){
	.LegendName.LegendName_0 {
  width: 25% !important;
}
}