/*
 * Stylesheet for Kalender Musim Gorontalo
 *
 * Designed by ZulNs, @Gorontalo, Indonesia, 30 Agustus 2017
 * Based on Amirudin Dako's notes
 */

.calendar-wrap {
	width: 100%;
	font-family: Verdana, sans-serif;
	font-size: 18px;
	color: #2f2f2f;
}
.calendar-wrap * {
	box-sizing:border-box;
}
.calendar-wrap ul {
	list-style-type: none;
}
.calendar-wrap a {
	text-decoration: none;
}
.calendar-wrap .menu > a,
.calendar-wrap .year a,
.calendar-wrap .month a
{
	color: #efefef;
}
.calendar-wrap .menu > a:hover,
.calendar-wrap .year a:hover,
.calendar-wrap .month a:hover
{
	color: #ffffff;
}
.calendar-wrap .menu-item a {
	color: #efefef;
}
.calendar-wrap .menu-item li:hover {
	background: #6f6f6f;
}
.calendar-wrap .menu-item li:hover a {
	color: #2fcfaf;
}
.calendar-wrap .menu-item li {
	margin: 4px 0;
	padding: 10px 10px;
}
.calendar-wrap .menu,
.calendar-wrap .year,
.calendar-wrap .month {
	margin: 0;
	background: #2fcfaf;
}
.calendar-wrap .menu {
	position: relative;
	padding: 0;
	text-align: center;
	font-size: 20px;
}
.calendar-wrap .menu-item {
	margin: auto;
	padding: 0;
	background: #444;
	position: absolute;
	width: 280px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	cursor: pointer;
    z-index: -1;
    opacity: 0;
	visibility: hidden;
    transition: all linear 0.5s;
	font-size: 14px;
}
.calendar-wrap .show {
    z-index: 1 !important;
    opacity: 1 !important;
	visibility: visible !important;
}
.calendar-wrap .year {
	padding: 0 10px;
	letter-spacing: 4px;
	font-size: 1.5em;
}
.calendar-wrap .month {
	padding: 12px 10px;
	letter-spacing: 4px;
	font-size: 1.5em;
}
.calendar-wrap .year li,
.calendar-wrap .month li {
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
}
.calendar-wrap .prev,
.calendar-wrap .next {
	width: 10%;
}
.calendar-wrap .prev {
	float: left;
}
.calendar-wrap .next {
	float: right;
}
.calendar-wrap .weekdays {
	margin: 0;
	padding: 10px 0;
	background-color:#ddd;
	font-size: 1em;
}
.calendar-wrap .weekdays li {
	display: inline-block;
	width: 14.2857%;
	text-align: center;
}
.calendar-wrap .days {
	padding: 10px 0;
	background: #eee;
	margin: 0;
	font-size: 1.2em;
}
.calendar-wrap .days li {
	display: inline-block;
	width: 14.2857%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}
.calendar-wrap .friday {
	color: #46a049;
}
.calendar-wrap .sunday {
	color: #da190b;
}
.calendar-wrap .inactive-date {
	color: #bfbfbf;
}
.calendar-wrap .footer-date {
	font-size: 0.5em;
}
.calendar-wrap .styled {
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	   -moz-box-shadow: 0 1px 3px rgba(0,0,0,.5);
	        box-shadow: 0 1px 3px rgba(0,0,0,.5);
	background: var(--bg-color);
	color: var(--color);
}

.calendar-wrap .legend {
	margin: 0;
	padding: 0;
	font-size: 14px;
}
.calendar-wrap .legend .title {
	padding: 36px 6px 6px 6px;
	font-size: 16px;
}
.calendar-wrap .legend .title~ li {
	margin: 12px 0 0 6px;
	padding: 0;
}
.calendar-wrap .legend div:first-child {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border-radius: 4px;
	position: absolute;
	background: var(--bg-color);
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
	        box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.calendar-wrap .legend div:nth-child(2) {
	display: inline-block;
	padding-left: 32px;
	width: 100%;
}
.calendar-wrap .tualanga-sore,
.calendar-wrap .teduh,
.calendar-wrap .boleh-kawin,
.calendar-wrap .boleh-bangun-rumah {
	--bg-color: #4caf50;
	--color: #efefef;
}
.calendar-wrap .hulita-pobole,
.calendar-wrap .pancaroba {
	--bg-color: #333;
	--color: #efefef;
}
.calendar-wrap .tualanga-pagi,
.calendar-wrap .angin-timur,
.calendar-wrap .dilarang-kawin,
.calendar-wrap .dilarang-bangun-rumah {
	--bg-color: #f44336;
	--color: #efefef;
}
.calendar-wrap .tauwa,
.calendar-wrap .angin-barat {
	--bg-color: #2196f3;
	--color: #efefef;
}
.calendar-wrap .lowanga {
	--bg-color: #da190b;
	--color: #ffffff;
}
.calendar-wrap .current-date {
	--bg-color: #ff9800;
	--color: #efefef;
}
.calendar-wrap .specialz-date {
	--bg-color: #e68a00;
	--color: #ffffff;
}