.calendar-title {
    font-weight: 900;
    font-size: 1.2rem;
    color: #3F495E;
    text-align: center;
    padding: 5px;
}

    .calendar-title:hover {
        color: #ffbb00;
        border-color: #000000;
    }

.card-title-solar {
    display:flex;
    flex-wrap:wrap;
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to right, #3F495E 85%,#808080);
    color: #ffffff;
	margin-top: 0px;
	margin-bottom:0px;
    padding: 0 10px;
}

.solar-title-left {
    text-align:left;
}

.solar-title-left:hover,.solar-title-right:hover{
	color: #ffbb00;
	 animation: zoom-in-zoom-out-120 1s ease infinite;
}

.solar-title-right {
    text-align: right;
}

.calendar-nav {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

    .calendar-nav .calendar-nav-btn {
        margin: 0px 10px;
    }

        .calendar-nav .calendar-nav-btn:hover {
			color: #ffbb00;
            animation: zoom-in-zoom-out-200 1s ease infinite;  
        }


.solar-title-left, .solar-title-right, .calendar-nav {
    flex: 1;
    margin: 10px 14px;
    font-size: 1.5rem;
    font-weight:bold;
    text-wrap: nowrap;
}

.card-title-lunar {
    border-radius: 5px 5px 0 0;
    background: linear-gradient(to right, #B8860B 85%,#ffbb00);
    color: #ffffff;
    text-align: center;
}

.card-border-solar {
    border: 1px solid #808080 90%;
    border-radius: 10px;
    box-shadow: 0.3rem 0.3rem rgba(0,0,0,.1) !important;
    transition: height 4s;
}

.card-border-lunar {
    border: 1px solid #ffbb00;
    border-radius: 5px;
    box-shadow: 0.3rem 0.3rem rgba(0,0,0,.1);
}

.calendar {
    padding: 5px 11px;
    border-radius: 4px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.solar-date-container {
    margin-bottom: 15px;
}

.lunar-date-container {
    display: none;
    color: #3F495E;
    font-size: 1rem;
    border-top: 1px solid #3F495E;
    padding: 20px 5px 20px 15px;
    margin-right: 12px;
}

.solar-date-header, .lunar-date-header {
    padding-top: 5px;
}

.lunar-date-header {
    font-weight: bold;
    font-size: 1.1rem;
    border-bottom: 3px double #3F495E;
}

.view-detail {
    width: 120px;
    display: block;
    font-size: 1rem;
    font-style: italic;
    margin-top: 30px;
    color: #3F495E;
    text-decoration:none!important;
    text-align : center;
}

    .view-detail:hover {
        color: #fff;
        background-color: #ffbb00;
    }


.lunar-info {
    text-align: left;
    display: block;
}

.date {
    display: flex;
    flex-wrap: wrap;
    color: #3F495E;
}

.day-name {
    font-weight: bold;
    border-bottom: 3px double #ffbb00;
}

.day {
    border-bottom: 1px solid #ffbb00;
    line-height: 400%;
    color: #000!important;
}


.day, .day-name {
	position: relative;
    width: 14%;
    vertical-align: middle;
    text-align: center;
    font-size: 1.2rem;
    padding: 2px;
    text-decoration: none!important;
}

.day-name {
    line-height: 200%;
}

.day.active {
    font-weight: bold;
    border: solid 1.5px #ff0000;
    border-radius: 5px;
    color: #ff0000;
}

.sunday {
    color: red!important;
}

    .day:hover {
        color: #ffffff!important;
		background-color:#ffbb00 ;
        border: dashed 1.5px #ffbb00;
		animation: zoom-in-zoom-out-120 1s ease infinite
    }

.day:hover .lunar-days {
	color: #ffffff!important;
}

 .lunar-days{
    position: absolute;
    /*padding-top:20px;
    padding-left: 40px;*/
	top: 24px;
	 right: 10px;
    font-size: 0.8rem;
    color: #3F495E;
} 

.lunar-title {
    font-weight:bold;
}


@keyframes zoom-in-zoom-out-120 {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}


@keyframes zoom-in-zoom-out-200 {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(2, 2);
    }

    100% {
        transform: scale(1, 1);
    }
}