@font-face {
  font-family: "co-arabic";
  src: url("https://use.typekit.net/af/72bcc2/00000000000000007735e27a/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/72bcc2/00000000000000007735e27a/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/72bcc2/00000000000000007735e27a/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n7&v=3") format("opentype");
  font-display: block;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "co-arabic";
  src: url("https://use.typekit.net/af/df182d/00000000000000007735e27b/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff2"), url("https://use.typekit.net/af/df182d/00000000000000007735e27b/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("woff"), url("https://use.typekit.net/af/df182d/00000000000000007735e27b/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n3&v=3") format("opentype");
  font-display: block;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "co-arabic";
  src: url("https://use.typekit.net/af/ce4204/00000000000000007735e27c/30/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/ce4204/00000000000000007735e27c/30/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/ce4204/00000000000000007735e27c/30/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3") format("opentype");
  font-display: block;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "Certo Sans";
  font-weight: normal;
  src: url("fonts/CertoSans-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Certo Sans";
  font-weight: bold;
  src: url("fonts/CertoSans-Heavy.otf") format("opentype");
}

@font-face {
  font-family: "Certo Sans";
  font-weight: normal;
  src: url("fonts/CertoSans-Light.otf") format("opentype");
}

@font-face {
  font-family: "Certo Sans";
  font-weight: bold;
  src: url("fonts/CertoSans-Regular.otf") format("opentype");
}

body{
    font-family: "Certo Sans", sans-serif;
    font-size: 16px;
    color: #313131;
    background: transparent!important;
    margin: 0;
    padding: 0;
    width: 99.8%!important;
    height: 320px;
  }
  body.ar-AE{
    font-family: "co-arabic", sans-serif;
}
@media(max-width:320px){
  body.ar-AE {
    /* font-size: 13px; */
  }
}
  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;
    width:100%;	
    max-width: 622px;
  }
  div.HeaderContainer {
  /*
    The container element for the HeaderObject
  */
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-radius:0px \0/;
    background-color: #003c34;
   /* box-shadow: inset 0px 5px 5px 0px gainsboro;
    /*
        NB! - ALL of the above code (starding from [background-color]) is required for cross browser compadible CSS gradient!
    */
    border-bottom: 0 none;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #FFF !important;
  }
  table.Header {
  /*
    The Header Table for the FinCalendarObject
  */
    
    height: 26px;
  }
  div.CurrentValue {
  /*
    In the HeaderObject, the current month marker
  */
    text-align: center;
    color: #FFFF;
    font-size: 16px;
    font-weight: normal;
  }
  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 3px;
    text-align: center;
  }
  a.link {
  /*
    The calendar moving links
  */	
    text-decoration: none;
    color: #FFF;
  }
  
  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;
    padding-left: 2.5px;
  }
  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-left: 4px;
  }
  
  div.CalendarContainer {
  /*
    The Container DIV for the CalendarObject
  
    padding: 3px;*/
  }
  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: 16px !important;
  }
  table.Calendar th {
    font-weight: normal;
  }
  table.Calendar td.Day {
    border-bottom: 1px solid #dddddd;
    background: white;
    border-right: 1px solid #dddddd;
  }
  table.Calendar th {
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px !important;
    background: transparent;
    padding-right: 0;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  table.Calendar th:first-child {
    border-left: 1px solid #dddddd;
  }
  table.Calendar th:nth-child(5),
  table.Calendar th:nth-child(6){
    color: #E60000;
  }
  div.Day {
  /*
    The individual DayObject inside a day cell of the calendar
  */
  }
  div.DateNumber {
  /*
    The DIV inside the DayObject that holds the day's number
  */
    text-align:center;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 0;
  }
  table.Calendar td.NotActive {
  /*
    The Marker for a not active Day cell in the Calendar
  */
    background: #ffffff;
    color: #313131;
  }
  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;
  }
  td.Today {
    color: #337BB4;
    border: 0;
    /*border-left: 2px solid #000!important;
    border-right: 2px solid #000!important;
    border-bottom: 2px solid #000!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: #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: #313131;
    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: #313131;
  }  
  
  /* div.Info {
      background: rgba(000,000,000,0.05) !important;
      box-shadow: none;
  }
  
  div.Events {
      background: rgba(000,000,000,0.05) !important;
  }
  div.Event { 
      border: 0;
      background:rgba(230,230,230,0.02) !important;
  }
  
  table.EventsHeading TH {
      color: #000!important;
  }
  
  table.EventsHeading {
      background: rgba(000,000,000,0.05) !important;
  }
  div.Event b {
        color: #000!important;
  } */
  
  /*
  td.LegendName.LegendName_1, td.LegendName.LegendName_3, td.LegendName.LegendName_5
  {
    width:60%!important;
  }
  td.LegendName.LegendName_0, td.LegendName.LegendName_2, td.LegendName.LegendName_4
  {
    width:40%!important;
  }
  td.LegendName.LegendName_5 span
  {
    width:100%;
  }*/


  table.Calendar > tbody > tr > td:nth-child(5),
  table.Calendar > tbody > tr > td:nth-child(6) {
    background: #f2f2f2;
    border-color: #dddddd;
    color: #E60000;
}


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

td.Today {
  color: #fff!important;
  border: 0;
  /* background: #F6630C !important; */
  background: #9a9a9a !important;
}

div#Main, .FinCalendar div {
  width: 100%!important;
  /*! height: 296px; */
}

table.Calendar {
  width: 100%!important;
  /* height: 380px; */
}

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

div#Main {
  height: 320px !important;
  /* height: auto!important; */
}

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

.CalendarContainer table.Calendar {
  height: 284px !important;
}

td.Day:nth-child(1) {
  border-left: 1px solid #dddddd;
}

.LegendContainer tbody tr {
  display: inline-block;
  width: 33.33%;
  font-size: 12px;
}

td.EventTypeMarker div {
    width: 10px!important;
    height: 10px;
    border-radius: 30px;
}

@media(max-width:445px){
  td.EventTypeMarker div {
    width: 6px!important;
    height: 7px;
    border-radius: 30px;
  }
}
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;
}
div.Event {
    width: 80% !important;
    margin: 5px 7% !important;
}
div#Main, .FinCalendar >  div, table.Calendar {
	width: 100%!important;
}