html, body {
height: 100%;
width: 100%
}

.top-wrapper {
	height: 100%;
	width: 100%;
	background-color: #f5f6ce;
}

@keyframes fade-out {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.flash_message {
	animation-name: fade-out;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 50%;
	height: 10%;
	text-align: center;
	border: 1px solid #999999;
	z-index: 10;
	padding: 10px;
	font-size: 40px;
	background-color: white;
	
}

.top-header {
	height: 5%;
	display: flex;
	align-items: center;
	background-color: #f4c6c6;
}

.top-header img {
	height: 30px;
	width: 40px;
}

.top-header span {
	margin-left: 3px;
	font-weight: 900;
	color: #2ea1d6;
}

.top-header-button {
	margin-left: auto;
	margin-right: 2%;
}

.top-header-button a {
	margin-left: 5px;
	padding: 3px 10px;
}

.form-title{
	font-size: 25px;
	font-weight: bold;
}

.schedule-view {
	height: 100%;
	width: 100%;
	padding-right: 0;
	border: 1px solid #a4a4a4;
	background-color: white;
}

.schedule-view-main {
	height: 97%;
	background-color: #b8b8b8;
}

#schedule-date {
	font-size: 40px;
}

.schedule-space {
	margin-top: 20px;
}

.accordion-trigger {
	cursor: default;
	color: blue;
	font-size: 20px;
}

.accordion-trigger:hover {
	color: #0000CC;
	font-size: 21px;
}

.accordion-mark {
	display: inline-block;
}

.schedule-time {
	border-bottom: 1px solid blue;
	display: inline-block;
}

.accordion-content {
	margin: 10px 10px 0 20px;
	display: none;
}

.schedule-content {
	border: 1px solid black;
	font-size: 20px;
	height: 200px;
}

.schedule-button {
	margin: 10px 0 0 0;
	text-align: right;
}

.schedule-button a {
	width: 90px;
	padding: 5px
}

.calendar-view {
	height: 100%;
	padding-left: 0;
	border: 1px solid #a4a4a4;
	position: relative;
}

.calendar-view-header {
	top: 2%;
	left: 5%;
	width:90%;
	position: absolute;
}

.month-view {
	display: inline-block;
}

.insert-schedule-button {
	float: right;
	display: inline-block;
}

.calendar-table {
	border-collapse: collapse;
	position: absolute;
	top: 7%;
	left: 5%;
	height: 80%;
	width: 90%;
	background-color: white;
	border: 2px solid black;
}

.calendar-table th {
	height: 8%;
	color: black;
	border: 2px solid black;
	text-align: center;
	font-size: 20px;
}

.sunday {
	background-color: #f79f81;
}
.monday {
	background-color: #848484;
}
.tuesday {
	background-color: #fe2e2e;
}
.wednesday {
	background-color: #81bef7;
}
.thursday {
	background-color: #31b404;
}
.friday {
	background-color: #ffff00;
}
.saturday {
	background-color: #dba901;
}

.calendar-table td {
	font-size: 30px;
	color: #0101dd;
	vertical-align: top;
	width: 10%;
}

.deactive-date {
	background-color: #b8b8b8;
}

.comments {
	position: absolute;
	top: 88%;
	right: 5%;
}

form {
	margin: 0 30%;
}

table {
	width: 100%
}

.td-item {
	width: 20%
}

.td-content {
	width: 80%
}

.button-area {
	float: right;
}



.container-fluid,
.row {
	height: 100%;
	padding-right: 0;
	padding-left: 0;
}

.form-group {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 10% auto 5% auto;
	width: 100%;
	height: 10%;
}

.form-group p{
	margin-bottom: 0;
}


@media screen and (max-width: 991px) {
	.schedule-view{
		height: 50%;
	}
	.calendar-view {
		height: 50%;
	}

	.top-header img {
		height: 60px;
		width: 80px;
		margin-left: 2%;
	}
	
	.top-header span {
		font-size: 35px;
	}
	
	.top-header-button a {
		margin-left: 5px;
		padding: 4px 10px;
		width: 170px;
		height: 50px;
		font-size: 25px;
	}

	.calendar-view-header input {
		width: 260px;
		height: 60px;
		font-size: 22px;
	}

	.calendar-table {
		top: 12%;
	}

	.calendar-table td {
		font-size: 40px;
	}

	.comments {
		top: 93%;
		font-size: 20px;
	}

	.accordion-trigger {
		font-size: 30px;
	}

	.accordion-trigger:hover{
		font-size: 30px;
	}

	.schedule-button {
		font-size: 30px;
	}
}