/* familytree-events css */
/* miscellaneous classes for pages, cards, events, etc.... *
/* Does not include the list trees and chart trees */
/* CSS for Family Pages */
/* dunkin orange #FF671F magenta #DA1884  Brown #653819 #946931 Blue: */
/* baskin Name: Medium Persian Blue #005EA6, Name: Raspberry Pink #DE5B9E */
:root {
    --male: #005EA6;
    --female: #DE5B9E;
    --pet: #653819;
    --chartline: #191970;
    --charthover: green;
	--blueish:#005EA6;
	--blueish2: #107896;
	--redish:#DE5B9E;
	--orangeish: #FF671F;
	--darkish:#653819;
	--lightish:#d1e5fb;
}

/* Mostle event cards below but useful for other things to 
   These need tweaking some time because some themes use grid and some use flex...
*/
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    word-wrap: break-word;
}
.card-month{
	font-size:1.0rem;
    width: 45%;
    margin: 6px;
    padding: 4px 4px 4px 4px;
    text-align: left;
	color: var(--darkish);
    border: 2px solid var(--orangeish);
	border-radius: 4px;
}

.card-month p.eventmonthname{
font-size:1.4rem;
font-weight:600;
border-radius: 4px 4px 0px 0px;
padding-bottom: 2px;
margin-bottom: 1px;
margin: 0px; padding: 0px;
background-color: var(--redish);
color: white;
text-align: center;
}
.card-month .eventmonthname a{
color: white;
text-decoration: none
}

.widget .card-month{
	width: 100%;
	font-size: 0.9rem;
	xline-height: 0.9rem;
}
.widget .card-month p.eventmonthname a {
font-size:1.0rem;
margin: 2px;
}

.card-month .eventmonthname a:hover{
color: var(--blueish);
text-decoration: none
}
.card-month ul.eventmonth{
margin: 0px;
padding: 0px;
            display: contents; 
            list-style-type: none; 
}
ul.eventmonth li{
xlist-style-type: none;	
width: 100%;
margin-left: 0px;
padding-left: 0px;
}
.card-month ul.eventmonth li:nth-child(odd) {
  background-color: var(--lightish);
}
.eventmonth li i.fa {
	width: 1.2rem;
	padding: 0 1px 0 5px;
}
.eventmonth  a{
	text-decoration: none;
	color: var(--blueish);
}
.eventmonth a:hover {
	text-decoration: underline;
	color: var(--redish);
}

@media (max-width: 600px) {
        .card-month {
            width: 100%;
            margin: 10px 0;
        }
    }