$inner_spacing: .5rem;

.wpcrm-dashboard-calendar {
	background: white;
	border: 1px solid #ddd;
	
	table {
		width: 100%;
		table-layout: fixed;
	}
	
	thead {
		background: #fff;

		.calendar-row:first-child {
			@media screen and (max-width: 540px) {
				// display: flex;
				
				.calendar-day-head {
					a {
						position: relative;
						font-size: 0;
					}

					&:first-child {
						a::before {
							content: '<<';
							padding-left: 5px;
							position: absolute;
							left: 50%;
							transform: translateX(-60%);
							font-size: 0.75rem;
						}
					}
					&:last-child {
						a::before {
							content: '>>';
							left: 50%;
							transform: translateX(-50%);
							position: absolute;
							font-size: 0.75rem;
						}
					}
				}
			}
		
		}

		.calendar-row:nth-child(2) .calendar-day-head {
			text-align: center;
		}

		.calendar-day-head {
			border-bottom: 1px solid #ddd;
			font-weight: 500;
			padding-top: 1em;
			padding-bottom: 1em;
		}
	}

    tbody {
		background-color: #fafafa;
		background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");

		.calendar-row:nth-child(1) .calendar-day {
			border-bottom: none;
			border-left: 1px solid #ddd;
		}

        .calendar-row:nth-child(2) .calendar-day {
			border-top: 1px solid #ddd;
		}

		.calendar-row:last-child .calendar-day {
			border-bottom: none;
		}

		.calendar-day {
			background: white;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;

			&:last-child {
				border-right: none;
			}

			&:first-child {
				border-left: none;
			}

			&:hover {
				background: #fafafa;

				.day-number {
					background: red;
					color: white;
				}
			}
		}
    }
	
	td {
		// We use this to position the day.
		position: relative;
		
		padding: $inner_spacing;
	}
	
	.calendar-day-np {
		// Will equalize the grid
		width: 130px;
		// background: #fafafa;
	}
	
	.calendar-day-head {
		a {
			display: block;
			background: #fafafa;
			font-size: 12px;
			color: #333;
			border-radius: 3px;
			padding: 1em .5em;
			text-decoration: none;
			border: 1px solid #ddd;
			text-align: center;

			&:hover {
				color: white;
				background: #253C55;
				border-color: #253C55;
			}
		}
		
		h3 {
			text-align: center;
			margin: 0;
		}
	}
	
	.day-number {
		font-size: 12px;
		height: 2em;
		width: 2em;
		line-height: 2;
		background: #eee;
		color: #333;
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
	}
}