@import url('../../../Content/EventViewDefaultStyle.css');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body.en-GB,
td.en-GB,
th.en-GB {
	font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: #313e48;
    margin: 0;
    background: transparent !important;
}

body.ar-AE,
td.ar-AE,
th.ar-AE {
	font-family: "Poppins", sans-serif;
    font-size: 18px;
    color: #313e48;
    margin: 0;
    direction: rtl;
    /* background: #D3DEE3; */
    background: transparent !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: 622px;
    border: 0px solid #A3A4AC;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background: transparent;
    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: transparent;
    color: #313e48;
    text-transform: uppercase;
    /* 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: 1px solid #88745f; */
}

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

    height: 39px;
}

div.CurrentValue {
    /*
	In the HeaderObject, the current month marker
*/
    text-align: center;
    color: #8A7967;
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
}

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
*/
    position: relative;
    padding: 0px 3px 0px 3px;
    text-align: center;
}

td.Next {
    right: 3em;
    z-index: 1;
}

td.Previous {
    left: 3em;
    z-index: 1;
}

/* body.ar-AE td.Next {
	left: 15em;
	z-index: 1;
}
body.ar-AE td.Previous {
	right: 15em;
	z-index: 1;
} */
td.Previous a::before {
    content: "";
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid #8A7967;
    position: absolute;
    bottom: 15px;
    left: -1em;
}

td.Next a::before {
    content: "";
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 8px solid #8A7967;
    position: absolute;
    bottom: 15px;
    right: -1em;
}

a.link {
    /*
	The calendar moving links
*/
    text-decoration: none;
    color: transparent;
}

div.LegendColorBox {
    width: 10px !important;
    height: 10px !important;
    border-radius: 5px;
    margin-left: 5px;
}

div.LegendContainer {
    /*
	The LegendObject's container
*/
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding: 2px;
    padding-top: 5px;
    border-top: 0px solid #A3A4AC;
}

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 #313e48;
}

div.LegendContainer td.LegendName {
    /*
	The marker for the Legend Items name i.e. the text part of the legend
*/
    text-align: left;
    padding-left: 5px;
    font-size: 18px;
    line-height: 22px;
}



div.CalendarContainer {
    padding: 0 3px;
    background: transparent;
    box-sizing: border-box;
    /* height: 302px; */

}

/* table.Calendar {

	The actual calendar itself as a table.
	the TH elements are the weekday markers and the TD elements are the day cells 

} */
table.Calendar td.Day,
table.Calendar th {
    min-width: 10%;
    /* (100% / 7) == ~14.28%  - in essence this gives equal distributation between the days*/
    line-height: 34px !important;
}

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

table.Calendar td.Day {
    border: 0px solid #dddddd;
    background: transparent;
    text-align: center !important;
}

table.Calendar th {
    text-align: center;
    padding-right: 7px;
    height: 37px;
    background: transparent;
    color: #8A7967 !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1em;
}

table.Calendar th.Weekend {
    color: #c22;
}

div.DateNumber {
    text-align: center;
    height: 8px;
}

td.Today div div.DateNumber {
    background: #8A7967;
    border: 0px solid #8A7967;
    border-radius: 100px;
    position: absolute;
    width: 35px;
    height: 35px;
    line-height: 32px;
    color: #fff;
    padding: 0px;
    box-sizing: border-box;
    right: 24px;
    bottom: 19px;
}

table.Calendar td.NotActive {
    background: transparent;
    color: #dddddd;
}

table.Calendar td.Weekend {
    background: #ffffff;
    border-color: #dddddd;
}

table.Calendar td.WeekendNotActive {
    background: transparent;
}

td.Today {
    color: #88745f;
    position: relative;
}

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: #E7DED5;
    color: #8A7967;
}

table.EventMarkers {
    float: right;
}

td.EventTypeMarker div {
    width: 10px;
    height: 10px;
    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 #cccccc;
    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: #313e48;
}

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: #313e48;
    padding: 10px 5px 5px 5px;
    font-size: 13px;
}
.ar-AE table.EventsHeading TH {
    text-align: right;
}
table.EventsHeading TD.CloseButton {
    padding-right: 5px;
}

/* table.EventsHeading TD.CloseButton input {
    background-color: #9e0b0f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#9e0b0f));
    background-image: -webkit-linear-gradient(top, #ed1c24, #9e0b0f);
    background-image: -moz-linear-gradient(top, #ed1c24, #9e0b0f);
    background-image: -ms-linear-gradient(top, #ed1c24, #9e0b0f);
    background-image: -o-linear-gradient(top, #ed1c24, #9e0b0f);
    background-image: linear-gradient(top, #ed1c24, #9e0b0f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ed1c24', EndColorStr='#9e0b0f');
    border: 1px solid #77080b;
    color: #ffffff;
    font-weight: bold;
    padding: 0px 5px 0px 5px;

} */

div.Events {
    padding: 5px;
}

div.Event {
    background: #f3f3f3;
    border: 1px solid #dddddd;
    margin-bottom: 5px;
    padding: 5px;
    font-size: 13px;
}

div.Event b {
    color: #313e48;
}

div.Event p {
    margin: 0px;
}

div.Event i {
    font-style: normal;
}

div.Footer {
    padding: 0px 5px 10px 5px;
}

div.Footer input {
    width: 100%;
    background: #969696;
    border: 1px solid #393939;
    color: #ffffff;
}

td.HasEvents.Day {
    background: #cfdfed;
}

.Events .Event p {
    display: none;
}

div.FinCalendar {

    width: 100% !important;
    max-width: 622px;
}

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

.ar-AE table.Calendar {
    width: 100%;
    max-width: 622px;
}

.ar-AE div.FinCalendar {
    width: 100%;
    max-width: 622px;
}


.ar-AE table.Calendar td.Day,
table.Calendar th {
    width: auto;
    padding: 0 !important;
}

.ar-AE .LegendContainer {
    direction: rtl;
}

.ar-AE div.LegendContainer td.LegendName {
    text-align: right;
}

.ar-AE .LegendContainer tbody tr {
    display: inline-block;
    width: 40%;
    font-size: 18px;
    margin-right: 33px;
    margin-left: 0;
}

.ar-AE td.Previous {
    left: unset;
    right: 3em;
}

.ar-AE td.Next {
    right: unset;
    left: 3em;
}

.ar-AE td.Previous a::before {
    content: "";
    border-right: 0px solid transparent;
    border-left: 8px solid #313e48;
    left: unset;
    right: -1em;
}

.ar-AE td.Next a::before {
    content: "";
    border-left: 0px solid transparent;
    border-right: 8px solid #313e48;
    right: unset;
    left: -1em;
}

.ar-AE div.LegendContainer td.LegendName {
    line-height: 25px;
}

table.Calendar td.Weekend {
    background: transparent;
    border-color: #313e48;
}

.LegendContainer tbody tr {
    display: inline-block;
    width: 40%;
    font-size: 18px;
    margin-left: 33px;
}

@media (max-width:480px) {
    .LegendContainer tbody tr {
        display: inline-block;
        width: 47%;
        font-size: 1em;
        margin-left: 0;
    }

    div.LegendContainer {
        padding: 0;
        padding-top: 0;
    }
}

div.DateNumber {
    text-align: center;
    font-size: 18px;
    padding-bottom: 3px;
    padding-top: 3px;
}

td.Today {
    color: #ff0000;
    border: 0px solid #ff0000 !important;
}

.event-bar {
    top: 27px !important;
    padding: 2px;
}
.en-GB .event-bar {
    left: 43%;
}
.ar-AE .event-bar {
    right: 43% !important;
}
.event-bar__inner {
  border-radius: 7px;
  width: 7px;
  height: 7px;
}
table.Calendar td.Day {
    vertical-align: bottom;
}

/* ADDITIONAL CSS */

.find-calendar-mode-event table.EventsHeading th {
    font-weight: 600;
    padding-bottom: 0px;
}

@media screen and (max-width: 425px) {
    body,
    td,
    table.Calendar th,
    div.DateNumber,
    div.LegendContainer td.LegendName {
        font-size: 16px;
    }

    div.CurrentValue {
        font-size: 18px;
    }

    td.Today div div.DateNumber {
        right: 13px;
    }
}

@media screen and (max-width: 375px) {
    body,
    td,
    table.Calendar th,
    div.DateNumber,
    div.LegendContainer td.LegendName {
        font-size: 14px;
    }

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

    td.Today div div.DateNumber {
        right: 10px;
    }
}

@media screen and (max-width: 318px) {
    td.Today div div.DateNumber {
        right: 6px;
    }
}