.grid-item {
	padding: 0px;
	border: 1px solid #e9ecef;

	.empty-rooms-message {
		padding: 10px;
		text-align: center;
		color: #757575;
	}

	.item-subheader {
		background-color: #f8f9fa;
		padding: 5px 15px;
		margin: 0;
		display: flex;
		justify-content: space-between;
		border: 1px solid #e9ecef;

		.subheader-button {
			align-content: center;
			button {
				border-radius: 4px !important;
			}
		}
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 10px;
		border-radius: 4px;
		background-color: #fff;
		cursor: pointer;
		transition: box-shadow 0.3s;

		&:hover {
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.list-icon-container {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60px;
			height: 60px;
			border-radius: 4px;
			background-color: #f5f5f5;
			margin: 0 10px;
		}

		.item-title {
			font-size: 1.2em;
			font-weight: 600;
			flex-grow: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.list-icon {
			font-size: 28px;
		}

		.item-details {
			display: flex;
			align-items: center;

			> div {
				display: flex;
				align-items: center;
				margin-top: 5px;
				margin-right: 10px;
				font-size: 0.8rem;
				color: #757575;

				.icon {
					font-size: 20px;
					text-align: center;
				}
			}
		}

		.button-container {
			position: absolute;
			top: 25%;
			right: 15px;

			display: flex;
			gap: 10px;

			button {
				background-color: rgb(189, 189, 189);
				width: 40px;
				height: 40px;
				border-radius: 4px;
				color: #fff;
			}

			.delete-button {
				background-color: #e23e3e;
				color: #fff;
			}
		}
	}
}
