/*
*  CSS Modal windows
*/

@import "variables.less";

.modal{
	position: fixed;
	color: @mod-font-color;
	background: @mod-bgr-color;
	opacity: 0;
	width: 45%;
	padding: 20px;
	top: -400%;
	left: 50%;
	transform: translate(-50%);
	border-radius: @border-radius;
	box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: opacity .3s linear,top .3s ease-out;
	transition: opacity .3s linear,top .3s ease-out;
	z-index: 99999;
}
.modal:target {
	opacity: 1;
	top: 10%;
	
}
.modal > .css-close-button {
	position: absolute;
	top: 5px;
	right: 10px;
}
.modal-header {
    margin: -20px -20px 15px -20px;
    padding: 20px;
	color: @mod-head-font-color;
    border-bottom: @mod-border;
    border-radius: @border-radius @border-radius 0 0;
    background: @mod-head-bgr-color;
}
.modal-footer {
    margin: 15px -20px -20px -20px;
    padding: 20px;
	color: @mod-foot-font-color;
    border-top: @mod-border;
    border-radius: 0 0 @border-radius @border-radius;
    background: @mod-foot-bgr-color;
}
.modal p {
	overflow-y: auto;
	overflow-x: hidden;
}
.modal pre {
	height: inherit;
}
.modal.modal-wide {
	width: 90%;
}
.modal.modal-tall {
	height: 80%;
}
.css-close-button {
    float: right;
	margin: 0;
    border: none;
    overflow: visible;
    font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
    color: inherit;
    text-transform: none;
    padding: 0;
    display: inline-block;
    box-sizing: content-box;
    width: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    opacity: .3;
	cursor: pointer;
}
.css-close-button:hover {
	opacity: .6;
}
.css-close-button::after {
    content: "x";
}