
.day {
	height:      20%;
	text-align:  left; 
	margin:      8px 4px;
	color: 		 #8c9094;
}

.extra-days {
	color: #dcdce1;
}

.event {
	height: 85%;
}

.btn-annual-event {
	width: 	2px; 
	height: 10px; 
	border: none; 
	margin: 1px; 
	border-radius: 50%;
}

.btn-monthly-event {
	border: none; 
	margin: 1px; 
	font-size: 10px;
	padding: 1px;
	cursor: pointer;
	text-align: left;
	background-color: transparent;
}

.annual-event {
	background-color: #cecece; 
	padding:          2px 4px; 
	border-radius:    50%;
}

.btn-show-month {
	cursor: pointer;
	background-color: transparent;
	border: none;
}

.select-calendar-type {
	width: 100%; 
	padding: 4px;
}

.select-event {
	padding: 4px;
	width  : 100%;
}

.calendar-annual-header {
	color: #70757a; 
	font-size: 24px; 
	padding: 4px;
}

.table-event-list {
	margin-top: 12px;
}

#btn-list {
	padding: 4px;
	cursor: pointer;
}

#btn-search {
	padding: 4px;
	cursor: pointer;
}

.list-item {
	padding: 4px;
	cursor: pointer;
}

.list-header {
	color: 		#70757a; 
	font-size: 	24px; 
	padding: 	12px; 
	margin: 	4px;"
}

.calendar-table {
	width: 100%; 
	margin: auto;
}

.calendar-row {
	text-align: center;
}

.calendar-month-header{
	color: #70757a; 
	padding: 4px;
}

.calendar-day-header {
	text-align:center; 
	color: #8c9094; 
	font-size: 12px;
	border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
}

.calendar-month-header-mes{
  border: 1px solid #cecece;
}

.calendar-day-sunday-header{
    border-right: 1px solid #cecece;
    border-left: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
}

.day-body-mes {
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
}

.day-body-sunday-mes {
    border-right: 1px solid #cecece;
    border-left: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
} 


.grid-container{
	display:				grid;
	grid-gap: 				10px 4px;
	grid-template-columns:	auto auto auto auto;
	padding: 				10px;
}

.grid-container-div-1{
	text-align: left
}

.grid-container-div-1>table{
	margin-right:	auto;
	margin-left: 	20px;
}

.grid-container-div-2{
	text-align: left;
}

.grid-container-div-2>table{
	margin-right: auto;
}

.grid-container-div-3{
	text-align: left;
}

.grid-container-div-3>table{
	margin-left:  auto;
	margin-right: auto;
}

.grid-container-div-4{
	text-align: left;
}

.grid-container-div-4>table{
	margin-left:	auto;
	margin-right:	auto;
}

@media only screen and (max-device-width:1075px){

	#legenda-eventos {
		display:none;
		
	}
}

@media only screen and (max-device-width:900px) {

	.grid-container-div-1{
		grid-column-start:1;
		grid-column-end:4;
		text-align:center!important;
		font-size: 12px !important;		
	}
	
	.grid-container-div-1>table{
		margin-left:auto!important;
		margin-right:auto!important;
	}
	
	.grid-container-div-2{
		grid-column-start:1;
		grid-column-end:4;
		text-align:center!important;
		font-size: 12px !important;
	}
	
	.grid-container-div-2>table{
		margin-left:auto!important;
		margin-right:auto!important;
	}	
	
	.grid-container-div-3{
		grid-column-start:1;
		grid-column-end:4;
		text-align: center!important;
		font-size: 12px !important;
	}
	.grid-container-div-3>table{
		margin-left:auto!important;
		margin-right:auto!important;
		
	}

	.grid-container-div-4{
		grid-column-start:1;
		grid-column-end:4;
		text-align:center!important;
		font-size: 12px !important;
	}
	
	.grid-container-div-4>table{
		margin-left:auto!important;
		margin-right:auto!important;
	}
					
}
