/* .calendar *******************************/

.calendar {
	border: 1px solid #ddd;
	border-radius: 5px;
	margin: 10px 0 30px 0;
	padding: 20px 10px;

	.selected {
		color: #133d5f;
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 10px;
		text-align: center;
	}

	.days {
		align-items: center;
		display: flex;
		gap: 10px;

		.day {
			color: #afbac6;
			font-size: 0.9rem;
			text-align: center;
			text-transform: uppercase;
			width: calc((100% - 60px) / 7)
		}
	}

	.weeks {

		.week {
			align-items: center;
			display: flex;
			gap: 10px;
			margin-top: 10px;

			.day {
				align-items: center;
				color: #afbac6;
				display: flex;
				font-size: 0.9rem;
				justify-content: center;
				width: calc((100% - 60px) / 7);

				button {
					align-items: center;
					background-color: #e7eef7;
					border: 1px solid #e7eef7;
					border-radius: 50px;
					color: #133d5f;
					display: flex;
					font-weight: 600;
					justify-content: center;
					height: 40px;
					outline: 0;
					transition: all ease 0.2s;
					width: 40px;

					&:hover {
						background-color: #cdd5e0;
					}

					&.today {
						border-color: #224a6c;
					}

					&.active {
						background-color: #00b9f2;
						border-color: #00b9f2;
						color: #fff;
					}
				}
			}
		}
	}
}