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

  body {
    font-family: Noto Sans, sans-serif;
	    font-size: 16px;
	    color: #221e20;
      font-weight: normal;
      background: transparent !important;
      margin: 0;    
      padding: 0;
  }
  
  body.ar-AE {
    font-family: Noto Sans, sans-serif;
    text-align: -webkit-right;
    text-align: -moz-right;
  }

  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-right-radius: 0px;
      background: transparent!important;
      margin: 0 auto;
  }
  div.HeaderContainer {
  /*
    The container element for the HeaderObject
  */
    background-color: #D7DEE8;
      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;
  }

  div.CurrentValue {
  /*
    In the HeaderObject, the current month marker
  */
    text-align: center;
    color: #008aab;
    font-size: 20px;
  }
  
  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 24px 0px 24px;
  text-align: center;
  }
  a.link {
  /*
    The calendar moving links
  */	
    text-decoration: none;
    color: #000000;
  }
  a.link:hover {
  /*
    The calendar moving links
  */	
    text-decoration: underline;
    color: #000000;
  }
  
  div.LegendContainer {
  /*
    The LegendObject's container
  */
  
  border-bottom-right-radius: 0px;
  padding: 0;
  padding-top: 0px;
  /* position: relative; */
  /* top: -11px; */
  }
  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;
    padding-bottom: 2px;
    padding-top: 5px;
  }
  div.LegendContainer td.LegendName {
  /*
    The marker for the Legend Items name i.e. the text part of the legend
  */
    text-align: left;
    padding-left: 10px;
    white-space: nowrap;
    color: #221e20;
    font-size: 12px;
  
  }
  
  div.CalendarContainer {
  /*
    The Container DIV for the CalendarObject
  */
    /* border: 0px solid #E; */
    padding: 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: unset; /* (100% / 7) == ~14.28%  - in essence this gives equal distributation between the days*/
  }
  table.Calendar th {
    font-weight: 700;
    font-size: 14.94px;
  }
  table.Calendar td.Day {
  /*
    The individual Day cell inside the calendar
  */
    border: 0px solid #E1E1E1;
    background: #D7DEE8;
  }
  table.Calendar th {
    text-align: center;
    background: #D7DEE8;
    color: #221E20;
    text-transform: uppercase;
    width: 50px;
  }
  div.DateNumber {
  /*
    The DIV inside the DayObject that holds the day's number
  */
  text-align:center;
  font-size: 16px;
  margin-top: 7px;
  /* vertical-align: middle !important; */
  }
  
  /*
    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
  */

  }
  td.Today {
  /*
    The Marker for a today's cell in the Calendar
  */
    color:#c22;
    font-weight: bold;
    border-radius: 0px;
    background: #D7DEE8 !important;
  }
  
  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: 5px;
    /* height: 5px; */
    /* margin: 1px; */
  }
  div.Info {
  /*
    The Container DIV for the HoverMessages
  */background: #D7DEE8;-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: 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: 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: #000000;
  }
  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: #000000;
    padding: 0px;
  }
  table.EventsHeading TD.CloseButton {
    padding-right: 5px;
  }
  table.EventsHeading TD.CloseButton input {
  /*
    The Actuale close button element
  */
    background-color:  #ED1C24;
    border: 1px solid #E1E1E1;
    color: #ffffff;
    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;}
  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 #E1E1E1;margin-bottom: 5px;padding: 5px;}
  div.Event b {
    color: #000000;
  }
  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:  #ED1C24;
      font-size: 16px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 0px solid #E9E9E9;
    color: #ffffff;
      cursor: pointer;
    font-weight: bold;
  }
  div.Footer input:hover {
    cursor: pointer;
  }
  
  /* .LegendContainer tbody tr {
      font-size: 11.4px;
  } */
  
  table.Calendar th {
      font-weight: bold;
      height: 40px;
  }
  
  /* 
  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 {
    content: "";
    background-image: url(new.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    top: 5px;
  }
  .Next a {
    content: "";
    background-image: url(new2.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    top: 5px;
    }
  td.Next a{
    font-size: 0px;
    text-decoration: none!important;
  }
  
  td.Next a:before {
      font-size: 16px;
      content: "";
      color: #FFFFFF;
  }
  
  td.Previous a:before{
      font-size: 16px;
      content: "";
      color: #FFFFFF;
  }
  
  div.CurrentValue {
    text-align: center;
    color: #221e20;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
  }
  /* 
  a.link {
      display: none;
  } */
  
  
  div.HeaderContainer {
    /* height: 60px; */
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
  }
  
  
  table.Header {
      /* height: 28px; */
      font-size: 16px;
      color: #000000;
      /* line-height: 22px; */
      width: 100% !important;
  }
  
  div#Main {
      /* min-height: 452px !important; */
      margin: 0 auto;
      /* height: 452px !important; */
      /* max-width: 605px !important; */
      width: 100% !important;
      /* height: 500px !important; */
      -webkit-text-size-adjust: 100% !important;
  }
  
  div.FinCalendar > div {
    /* min-height: 496px !important; */
    /* height: fit-content !important; */
    max-width: 643px !important;
    width: 100% !important;
  }
  
  div.LegendContainer table {
      /* margin-top: 5px!important; */
  }
  
   table.Calendar td.Day, table.Calendar th {
      padding: 1px !important;
      /* height: 50px; */
      box-sizing: border-box;
      /* vertical-align: -webkit-baseline-middle; */
  }
  
  .CalendarContainer {
      /* height: 388.56px; */
    /* height:auto !important; */
  }
  
  table.Calendar tr:nth-child(odd) > td.Day {
      background: #D7DEE8;
  }
  @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;
    background: transparent;
        /* height: 500px !important; */
  }
  div.LegendColorBox {
  /*
    The marker for the ColorBox in the legend.
    NOTE! - The [background-color] is set by the JS
  */
  width: 15px !important;
  height: 15px;
  border-radius: 0px;
  margin-left: 5px;
  
  }
  
  @media (max-width: 390px) {
    table.Calendar th {
      font-size: 16px;
    }
    div.DateNumber {
      font-size: 14px;
    }
    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: #221e20;
    border: 0px solid #E1E1E1 !important;
    opacity: 0.6;
    }
  
    /* .LegendName.LegendName_0{
    width: 30% !important;
    }
    .LegendName.LegendName_1{
    width: 59% !important;
    }
    .LegendName.LegendName_2{
    width: 30% !important;
    }
    .LegendName.LegendName_3{
    width: 30% !important;
    }
    .LegendContainer td {
    display: inline-block;
    } */
  

    /* td.Day {
    height: 50px !important;
    min-height: 50px !important;
    }
   */
    .LegendColorBox.LegendColorBox_2 {
    margin-top: -3px;
    }

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

  td.Today.Day {
    color: #ffffff;
    font-weight: normal;
    border-radius: 50%;
    width: 70%;
    margin: 0 auto;
    display: table;
}

tr {
  background: #D7DEE8 !important;
}

table.Calendar tbody tr:first-child th {
  background-color: #ffffff !important;
}

.LegendColorBox.LegendColorBox_0, .LegendColorBox.LegendColorBox_2, .LegendColorBox.LegendColorBox_4 {
  margin-left: 34px;
}

td.LegendColorBox.LegendColorBox_2 {
  /* border-bottom-left-radius: 8px; */
}

div.LegendContainer table td:nth-child(3) {
  border-bottom-right-radius: 0px;
}


.LegendContainer > div {
  border-bottom-right-radius: 8px;
}

div.FinCalendar > div > div:nth-child(4) {
  max-width: 643px !important;
  width: 100% !important;
  display: none;
}
div.FinCalendar > div > div:last-child >div {
  width: 100% !important;
}
div.FinCalendar > div > div:last-child >div > div {
  width: 100% !important;
}
.LegendContainer div table tbody tr:last-child td:first-child{
border-bottom-left-radius: 8px !important;
}
.LegendContainer div table tbody tr:last-child{
  border-bottom-left-radius: 8px !important;
}
#Main div div:nth-child(4) {
  display: none !important;
}
.CalendarContainer div div div:nth-child(2) {
  display: none !important;
}
#main{
height: 495px;
}