:root {
	--dialogHeaderBg   : #292929;
	--colorDialogHeader: #FFF;
}

.custom-dialog-overlay {
	display         : flex;
	flex-flow       : column nowrap;
	align-items     : center;
	justify-content : center;
	min-width       : 0;
	min-height      : 0;
	overflow        : hidden;
	position        : fixed;
	top             : 0;
	left            : 0;
	width           : 100vw;
	height          : 100vh;
	z-index         : 10001;
	background-color: rgba(0, 0, 0, 0.6);
	padding         : 32px;

	.custom-dialog {
		display         : flex;
		flex-flow       : column nowrap;
		width           : 100%;
		max-width       : 400px;
		min-height      : 0;
		max-height      : 100%;
		overflow        : auto;
		background-color: var(--contentBg);
		font-size       : 16px;

		.custom-dialog-header {
			padding         : 16px;
			color           : var(--colorDialogHeader);
			background-color: var(--dialogHeaderBg);
			font-weight     : 600;
			font-size       : 1em;
			text-transform  : uppercase;
			border-bottom   : 1px solid var(--border);
		}

		.custom-dialog-body {
			padding              : 16px 16px 0;
			display              : grid;
			max-height           : 100%;
			min-height           : 80px;
			min-width            : 0;
			overflow             : auto;
			font-size            : 1em;
			grid-template-columns: max-content 1fr;
			align-content        : start;
			align-items          : baseline;
			grid-gap             : 16px;

			&::after {
				content          : "";
				display          : block;
				min-height       : 1px;
				grid-column-end  : -1;
				grid-column-start: 1;
			}

			.custom-dialog-content {
				grid-column-end  : -1;
				grid-column-start: 1;
				color            : var(--color);
				align-self       : baseline;
			}

			>label {
				color    : var(--color);
				padding  : 8px 0;
				font-size: 1em;
			}

			>input[type="text"],
			>input[type="password"],
			>textarea {
				color           : var(--color);
				padding         : 8px;
				font-size       : 1em;
				border          : 1px solid var(--border);
				background-color: var(--contentBg);
				min-width       : 0;
			}

			.checkbox-field {
				color            : var(--color);
				font-size        : 1em;
				display          : flex;
				flex-flow        : row nowrap;
				padding          : 0;
				grid-column-start: 1;
				grid-column-end  : -1;
				cursor           : pointer;

				&:hover,
				&:focus {
					text-decoration      : underline;
					text-decoration-color: var(--main);
				}

				>input[type="checkbox"] {
					margin-right: 8px;
				}
			}

			>textarea {
				height    : 6em;
				min-height: 37px;
				resize    : vertical;
			}

			>.suggestion {
				position        : absolute;
				display         : block;
				padding         : 8px;
				background-color: var(--contentBg);
				border          : 1px solid var(--border);
				color           : var(--color);
				font-size       : 0.9em;
			}
		}

		.custom-dialog-footer {
			padding        : 16px;
			display        : flex;
			flex-flow      : row wrap;
			justify-content: flex-end;
			border-top     : 1px solid var(--border);

			>a {
				padding       : 0 8px;
				font-size     : 0.9em;
				font-weight   : 600;
				color         : var(--color);
				text-transform: uppercase;

				&:hover,
				&:focus {
					outline: none;
					color  : var(--main);
				}
			}

			>i.fa-spinner.fa-spin {
				width      : 19px;
				line-height: 19px;
				text-align : center;
				color      : var(--color);
			}
		}
	}
}