.slidein-wrapper {
	pointer-events: none;
}

.slidein-backdrop {
	position: fixed;
	top: 1px;
	bottom: 1px;
	left: 1px;
	right: 1px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
	background: var(--background-color-transparent04);
	z-index: 1100;

	.slidein {
		position: relative;
		background: var(--background-color);
    border-top: 1px solid var(--accent-color);
    margin-top: calc(var(--navigationbar-height) + 30px);
		height: calc(100% - var(--navigationbar-height) + 30px);
		width: 100%;
		bottom: 0;
		right: 0;
		color: var(--text-color);
		font: 13px/14px "Source Sans Pro";
		letter-spacing: 0.03em;

		&::before {
			position: absolute;
			display: block;
			content: "";
			width: calc(100% - 10px);
			height: 3px;
			border: 1px solid var(--accent-color);
			top: -5px;
			left: 4px;
			right: 4px;
			z-index: 1099;
		}

		.slidein-close {
			width: 36px;
			height: 36px;
			display: block;
			position: absolute;
			border-radius: 50%;
			background: var(--background-color);
			border: 1px solid var(--accent-color);
			right: 24px;
			top: -21px;
			z-index: 1100;

			&::before {
				display: block;
				position: absolute;
				content: "";
				height: 11px;
				width: 44px;
				top: 11px;
				right: -6px;
				border: 1px solid var(--accent-color);
				z-index: 1099;
			}

			> div {
				border: 2px solid var(--accent-color);
				border-radius: 50%;
				color: var(--accent-color);
				margin: 2px;
				font: 18px/26px Material;
				text-align: center;
				background: var(--background-color);
				position: absolute;
				z-index: 1100;
				width: 30px;
			}

			&:hover {
				cursor: pointer;

				> div {
					border-color: var(--headings-color);
					color: var(--headings-color);
				}
			}
		}

		.slidein-content {
			position: relative;
			height: 100%;
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;

			// .gm-scrollbar {
			// 	z-index: 22;
			// }

			> .scroll {
				flex: 1 1 100%;
				margin-left: 24px;
			}

			> .scroll, > .main-content > .scroll {
				.scroll-inner {
					padding: 24px 24px 24px 0;
				}
			}

			// .scroll-list {
			// 	table {
			// 		width: 100%;
			// 		border-collapse: collapse;
			// 		white-space: nowrap;

			// 		td {
			// 			padding: 5px 5px 5px 11px;

			// 			&.name {
			// 				width: 100%;
			// 			}

			// 			&.name, &.fw {
			// 				color: #f0e6d2;
			// 			}
			// 		}

			// 		thead {
			// 			font: bold 13px/22px Alegreya SC;

			// 			tr td {
			// 				border-bottom: 1px solid transparentize(white, .925);
			// 			}
			// 		}

			// 		tbody {
			// 			tr {
			// 				&:not(:last-child) td {
			// 					height: 36px;
			// 					border-bottom: 1px solid transparentize(white, .925);
			// 				}

			// 				&:hover {
			// 					background: transparentize(white, .975);
			// 				}

			// 				td {
			// 					height: 36px;

			// 					&.name {
			// 						vertical-align: middle;

			// 						h2 {
			// 							font: 500 15px/15px Alegreya Sans;
			// 							text-transform: none;
			// 							color: #f0e6d2;
			// 							display: inline-block;
			// 						}
			// 					}

			// 					&.check, &.skt {
			// 						font: 13px/13px Alegreya SC;
			// 					}

			// 					&.inc {
			// 						font-weight: 500;

			// 						.btn {
			// 							padding: 0 14px 3px;
			// 							min-width: auto;
			// 							font-size: 16px;
			// 						}
			// 					}

			// 					.textfield, .dropdown {
			// 						width: 200px;
			// 					}
			// 				}
			// 			}
			// 		}
			// 	}
			// }

			h4 {
				font-size: 13px;
				letter-spacing: 0.075em;
				line-height: 40px;
			}
		}
	}
}
