.content.rooms{
	color: white;
	max-width: unset;
}

.rooms-container {
  display: grid;
  grid-template-columns: 70px auto;
  grid-template-rows: auto;
  gap: 0 0;
  grid-template-areas:
    ". header"
    "cal-times main";
	overflow: scroll;
	height: calc(100vh - 143px);
}

.cal-headers {
  display: grid;
	/* 25 rooms */
  grid-template-columns: repeat(25, 100px);

  color: white;
  border-right: 1px solid black;

  background: var(--darkred);
  grid-area: header;
	position: sticky;
	top: 0;
	z-index: 5;
}

.cal-headers div{ 
	padding: 10px 5px;
	text-align: center;
	border-left: 1px solid black;
	border-right: 1px solid black;
}
.cal-times div{ 
	padding: 10px 5px;
	height: 60px;
	text-align: center;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}
.cal-times {
  background: var(--darkred);
  grid-area: cal-times;
  justify-items: left;

  display: flex;
  flex-direction: column;
  align-items: center;
	position: sticky;
	left: 0;
	z-index: 5;
}



.sessions-container {
  display: grid;
	/* 25 rooms */
  grid-template-columns: repeat(25, 1fr);
	/* 29 hours open */
  grid-template-rows: repeat(calc(4*29), 1fr);
  background: rgb(222, 223, 231);
  grid-area: main;
  position: relative;
  white-space: nowrap;
  background-size: 100px 60px;
  background-image:
    linear-gradient(to right, grey 1px, transparent 1px),
    linear-gradient(to bottom, grey 1px, transparent 1px);
}

.cal-session {
  position: absolute;
  /* overflow: hidden; */
  background: #2d034d;
  border-radius: 15px;
  z-index: 2;
  margin-top: 1px;
  outline: none;
	width: 100px;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	font-size: 12px;
	padding: 3px;
	border: 2px solid black;
	outline: 2px solid white;
	z-index: 3;
}
.cal-session:hover{
	z-index: 1000;
	border: 5px solid black;
}

.test{
	height: 60px; /* 1px per min */
	grid-row: 3;
	grid-column: 7;
}


/* .cal-times div::after {
	content: "";
  position: absolute;
  left: 0;
  width: 100vw;
  height: 1px;
  background: #afafaf;
  z-index: 1;
	transform: translateY(-30px);
}
.cal-times div.start::after {height: 3px}
.cal-headers div::after {
  content: "";
  position: absolute;
  top: 0px;
  width: 1px;
  height: 100vh;
  background: #afafaf;
  z-index: 1;
	transform: translateX(36px); /*not perfect but it'll do
} */