/* Mobile View */
@media screen and (max-width: 45rem){

#filter_seasonal_calendar-wrapper{
float:left;
display:block;
width:100%;
position:relative;
top:-6.75rem;
left:0;
z-index:100;
background:var(--base-background-color);
}

#filter_seasonal_calendar{
display:none;
width:100%;
height:auto;
border:#ff0000 0px solid;
background:var(--base-background-color);
}

#filter_seasonal_calendar .header{
border:#ff00ff 0px solid;
display:flex;
justify-content:space-between;
align-items:baseline;
}

#filter_seasonal_calendar .header button{
all:revert;
background:var(--asset-background-color);
}

#filter_seasonal_calendar .header .box:first-of-type{
all:revert;
float:left;
border:#ff00ff 0px solid;
width:auto !important;
}

#filter_seasonal_calendar .header .box:last-of-type{
all:revert;
float:right;
border:#ffff00 0px solid;
width:auto !important;
}

#filter_seasonal_calendar .header button{
display:inline-block;
width:auto;
margin:.25em;
padding:.25em .75em;
}

#filter_seasonal_calendar .content{
display:block;
width:100%;
}

#filter_seasonal_calendar .content .calendar_seasonal{
display:block;
width:100%;
margin:.5rem .25rem .5rem 0rem;
padding:0;
text-align:left;
background:var(--base-background-color);
border-spacing:0;
}

#filter_seasonal_calendar .content .calendar_seasonal th,
#filter_seasonal_calendar .content .calendar_seasonal td{
width:100vw;
height:2rem;
text-align:center;
}

#filter_seasonal_calendar .content .calendar_seasonal td span{
display:block;
text-align:center;
border:#00ff00 0px solid;
}


#filter_seasonal_calendar .content .calendar_seasonal button{
all:revert;
display:block;
width:100%;
height:2rem;
margin:0;
padding:0;
background:transparent;
border:#ff00ff 0px solid;
font-weight:bold;
color:var(--base-font-color);
font-size:var(--s-font-size);
}

#filter_seasonal_calendar .content .calendar_seasonal .selected_start,
#filter_seasonal_calendar .content .calendar_seasonal .selected,
#filter_seasonal_calendar .content .calendar_seasonal .selected_end{
background:var(--calendar-selected-background-color) !important;
color:#fff;
}

#filter_seasonal_calendar .content .calendar_seasonal .selected button{
color:#fff;
}

#filter_seasonal_calendar .footer{
display:block;
border:#ff00ff 0px solid;
}

#filter_seasonal_calendar .footer button{
all:revert;
}

#filter_seasonal_calendar .footer button{
float:right;
display:block;
width:auto;
margin:.25em;
padding:.25em .75em;
}

}


/* Tablet && Desktop View */
@media screen and (min-width: 45rem){

#filter_seasonal_calendar-wrapper{
display:flex;
justify-content:center;
align-items:baseline;
border:#ff0000 0px solid;
width:100%;
}

#filter_seasonal_calendar{
display:none;
width:44rem;
height:auto;
max-height:25rem;
border:#ff0000 0px solid;
background:var(--base-background-color);
border:var(--base-border-color) 1px solid;
z-index:100;
}

#filter_seasonal_calendar .header{
border:#ff00ff 0px solid;
display:flex;
justify-content:space-between;
align-items:baseline;
padding:.25rem 0 0 0;
}

#filter_seasonal_calendar .header .box:first-of-type{
all:revert;
float:left;
border:#ff00ff 0px solid;
width:auto !important;
}

#filter_seasonal_calendar .header .box:last-of-type{
all:revert;
float:right;
border:#ffff00 0px solid;
width:auto !important;
}

#filter_seasonal_calendar .header button{
all:revert;
}

#filter_seasonal_calendar .header button{
display:inline-block;
width:auto;
margin:.25rem;
padding:.15rem .75rem;
border:#ffff00 1px solid;
}

#filter_seasonal_calendar .content{
display:flex;
justify-content:center;
align-items:baseline;
height:18rem;
overflow:auto;
border:#ffff00 0px solid;
}

#filter_seasonal_calendar .content .calendar_seasonal{
position:relative;
display:inline-block;
width:21rem;
min-width:21rem;
height:16rem;
margin:.5rem .30rem .5rem .15rem;
padding:0;
background:var(--asset-background-color);
border-spacing:0;
border:#ffff00 0px solid;
}

#filter_seasonal_calendar .content .calendar_seasonal th,
#filter_seasonal_calendar .content .calendar_seasonal td{
width:3rem;
padding:.15rem 0;
text-align:center;
}

#filter_seasonal_calendar .content .calendar_seasonal td span{
display:block;
text-align:center;
border:var(--asset-background-color) 1px solid;
}

#filter_seasonal_calendar .content .calendar_seasonal button{
all:revert;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
background:transparent;
border:#ff00ff 0px solid;
font-weight:bold;
color:var(--base-font-color);
font-size:var(--s-font-size);
}

#filter_seasonal_calendar .content .calendar_seasonal .selected_start,
#filter_seasonal_calendar .content .calendar_seasonal .selected,
#filter_seasonal_calendar .content .calendar_seasonal .selected_end{
background:var(--calendar-selected-background-color) !important;
color:#fff;
}

#filter_seasonal_calendar .content .calendar_seasonal .selected button{
color:#fff;
}

#filter_seasonal_calendar .footer{
display:block;
border:#ff00ff 0px solid;
}

#filter_seasonal_calendar .footer .btn_reset{
all:revert;
}

}


#filter_seasonal_calendar .header button{
cursor:pointer;
font-weight:bold;
font-size:var(--s-font-size);
border:var(--dark-border-color) 1px solid;
background:var(--dark-background-color);
color:var(--asset-font-color);
border-radius:.25rem;
}

#filter_seasonal_calendar .header button:hover{
color:var(--dark-font-color);
border:var(--light-theme-color) 1px solid;
background:var(--light-theme-color);
}

/*
#filter_seasonal_calendar .footer button{
cursor:pointer;
font-weight:bold;
font-size:var(--s-font-size);
border:var(--dark-border-color) 1px solid;
background:var(--dark-background-color);
color:var(--asset-font-color);
}

#filter_seasonal_calendar .footer button:hover{
color:var(--asset-font-color);
border:var(--light-theme-color) 1px solid;
background:var(--light-theme-color);
}
*/

#filter_seasonal_calendar .footer .btn_reset,
#filter_seasonal_calendar .footer .btn_reset:hover{
float:right;
display:inline-block;
width:auto;
margin:.25rem;
padding:.25rem .75rem;
background:transparent;
border:0;
color:var(--base-font-color);
}

#filter_seasonal_calendar .footer .btn_reset:hover{
text-decoration: underline;
}