.modal-bg {
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 100000;
}
.modal-box {
	background: white;
	position: absolute;
	float: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding-top: $gap-large;
	width: 600px;

}

.modal-content { // iframed content
	width: 100%;
	background: white;
	height: 100vh;
    overflow: scroll;
    padding: 0 $gap-large $gap-large;
    header {
	    margin-bottom: $gap-large;
    }
	h1 {
		margin: $gap-default 0;
		font-size: 24px;
		font-weight: 700;
		text-transform: uppercase;
	}
	h2 {
		margin: 0 0 $gap-default 0;
		padding-top: $gap-default;
		font-size: 20px;
		font-weight: 600;
	}
	h3 {
		margin: 0 0 $gap-tiny 0;
		font-size: 16px;
		font-weight: 600;
	}
	p {
		margin: 0 0 $gap-default;
	}
	label {
		display: block;
	}
	.skins, .dictionary {
		margin-bottom: $gap-medium;
	}
	.skins {
		.skin {
			cursor: default;
		}
		span {
			margin-right: $gap-small;
		}
	}
}
	
	
#splash {
	button {
		font-size: 16px;
		background: $c-secondary;
		color: $fc-light;
		min-width: 130px;
		&:hover {
			background: $c-secondary-dark;
			color: $fc-light;
		}
	}
}


.hide-modal {
	position: absolute;
    top: 4px;
    right: 4px;
}


  ////////////////////////
 /// HELP / PAGE INFO ///
////////////////////////

.page-info {
	ul {
		padding: 0 0 0 20px;
	}
	li {
		list-style-type: disc;
		padding: $gap-small 0;
		font-weight: 600;
		a {
			font-weight: 600;
		}
	}
	li li {
		list-style-type: circle;
		padding: 2px 0;
		font-weight: 400;
	}
}	

  ///////////////////////
 /// OTHER POSITIONS ///
///////////////////////

#edit-positions {
	height: 0;
	.modal-content {
		height: auto;
		max-height: 90vh;
	}
	.modal-box {
		width: 450px;
	}
}
.add-teaser {
	text-align: right;
	margin: $gap-default 0; 
}
.reset-submit {
	float: right;
	margin-top: $gap-default;
	.reset {
		margin-right: $gap-default;
	}
}
.teaser-positions {
	padding: 0;
	li {
		list-style-type: none;
		margin-bottom: $gap-small;
		padding: 0;
		.teaser-numbering {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding: $gap-small $gap-default;
		    border-radius: 4px;
			transition: opacity .2s ease-in-out;
			span {
				font-size: 20px;
				align-self: center;
				margin-right: $gap-tiny;
				color: $fc-dark-medium;
			}
			input {
				font-size: 20px;
				color: $fc-dark-medium;
				font-weight: 600;
			    width: 55px;
			    padding: 4px;
			    border-radius: 3px;
			    text-align: right;
				&:focus {
					outline: none;
					border: 1px solid #000;
				}
			}
		}
	}
}

  ////////////////////
 /// ADD STREAMER ///
////////////////////

#add-streamer {
	height: 0;
	.modal-content {
		height: auto;
		max-height: 90vh;
	}
	.modal-box {
		width: 450px;
	}
}
.add-teaser {
	text-align: right;
	margin: $gap-default 0; 
}
.reset-submit {
	float: right;
	margin-top: $gap-default;
	.reset {
		margin-right: $gap-default;
	}
}
.teaser-positions {
	padding: 0;
	li {
		list-style-type: none;
		margin-bottom: $gap-small;
		padding: 0;
		.teaser-numbering {
			display: flex;
			justify-content: space-between;
			position: relative;
			padding: $gap-small $gap-default;
		    border-radius: 4px;
			transition: opacity .2s ease-in-out;
			span {
				font-size: 20px;
				align-self: center;
				margin-right: $gap-tiny;
				color: $fc-dark-medium;
			}
			input {
				font-size: 20px;
				color: $fc-dark-medium;
				font-weight: 600;
			    width: 55px;
			    padding: 4px;
			    border-radius: 3px;
			    text-align: right;
				&:focus {
					outline: none;
					border: 1px solid #000;
				}
			}
		}
	}
}