body.resize {
	
	background-image: var(--resize);
	background-repeat: no-repeat;
	background-position: right bottom;
}

header {
	
	padding: 10px 40px;
	background-color: var(--modal-header);
	color: var(--text-color);
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.scroll {
	
	position: fixed;
	top: 38px;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
}

form {
	
	padding: 20px 40px 0;
	
	ul {
		
		list-style-type: none;
		
		li {
			
			padding-bottom: 10px;
			
			label {
				
				color: var(--text);
				display: block;
				float: left;
				width: 80px;
				text-align: right;
				padding-right: 10px;
				font-size: 13px;
				line-height: 28px;
				
				&[for="child"] { line-height: 22px; }
				
				&::after {
					
					content: ':';
				}
			}
			
			input,
			textarea {
				
				display: block;
				padding-left: 10px;
				padding-right: 28px;
				width: calc(100% - 80px);
				color: var(--input-color);
				background-color: var(--input-background);
				border: 1px solid var(--input-border);
				background-position: right 6px top 6px;
				background-repeat: no-repeat;
				
				transition: background-color .15s;
				
				&[required] {
				
					&:invalid:not(:placeholder-shown) {
						
						background-image: var(--error);
					}
					
					&:valid {
						
						background-image: var(--check);
					}
				}
			}
			
			input {
				
				height: 28px;
			}
			
			textarea {
				
				height: 44px;
				resize: none;
			}
			
			.select-container {
				
				position: relative;
				
				&::after {
					
					content: var(--select-arrow);
					position: absolute;
					top: 0;
					right: 8px;
					pointer-events: none;
				}
			}
			
			select {
				
				appearance: none;
				height: 22px;
				width: calc(100% - 80px);
				padding: 0 6px;
				font-size: 12px;
				background: var(--select);
				border: 1px solid var(--select-border);
				color: var(--input-color);
				border-radius: 3px;
			}
			
			.select2-container--custom .select2-selection {
				
				box-shadow: none;
				color: var(--input-color);
				background-color: var(--input-background);
				border: 1px solid var(--input-border);
			}
			
			.select2-container--custom.select2-container--focus .select2-selection,
			.select2-container--custom.select2-container--open .select2-selection {
				
				box-shadow: inset 0 0 1px var(--accent), 0 0 3px 2px var(--accent);
				transition: box-shadow ease-in-out 0.15s;
				border-color: var(--accent);
			}
		}
	}
}

footer {
	
	text-align: right;
	padding: 15px 0 0;
	
	button {
		
		padding: 4px 8px;
		border: 1px solid #C5C3C5;
		border-bottom-color: #9F9E9F;
		background: #fff;
		border-radius: 4px;
		
		&:active {
			
			color: #fff;
			border-color: #237DFE;
			border-bottom-color: #0240DD;
			background-image: linear-gradient(-180deg, #4A97FD 0%, #0968E5 100%);
		}
	}
}

[data-theme="dark"] {
	
	form {
		
		ul {
			
			li {
				
				input,
				textarea,
				.select2-container--custom .select2-selection {
					
					border-top: 0;
					border-left: 0;
					border-right: 0;
					
					box-shadow:
						inset 0 0 1px rgba(255,255,255,.5),
						inset 0 6px 4px -4px rgba(0,0,0,.2);
				}
				
				.select2-container--custom .select2-selection--multiple .select2-search--inline .select2-search__field {
					
					box-shadow: none;
				}
				
				.select2-container--custom.select2-container--focus .select2-selection,
				.select2-container--custom.select2-container--open .select2-selection {
					
					box-shadow: inset 0 0 1px var(--accent), 0 0 3px 2px var(--accent);
					transition: box-shadow ease-in-out 0.15s;
					border-color: var(--accent);
					border-top: none;
				}
			}
		}
	}
}
