:root {
  --modal-header-color: #16a085; /*var(--color-primary);*/
  --modal-header-height: 35px;
}
#rsModal{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: auto;
	height: 30px;
	z-index: 9;
}

#rsModal > .modal{
	top: 0px;
	left: 0px;
	z-index: 999999;
	position: fixed;
	min-width: 300px;
	min-height: 300px;
	max-width: 100%;
	max-height: 100%;
	border: 1px solid var(--color-primary-border);
	overflow: hidden;
}
#rsModal > .modal.ui-draggable-dragging{
	z-index: 9999999 !important
}
body.mobile > #rsModal > .modal{
	min-width: 100%;
	min-height: 100%;
	top: 0px;
	left: 0px;
}
#rsModal > .modal.mini{
	width: 30px !important;
	height: 30px !important;
	min-width: auto !important;
	min-height: auto !important;
	max-width: auto !important;
	max-height: auto !important;
	line-height: 30px;
	text-align: center;
	position: static;
	float: left;
	background-color: var(--modal-header-color);
	border: none;
	color: #FFF;
}
#rsModal > .modal.mini:before{
	content: '\f01c';
}
#rsModal > .modal.mini *{
	display: none;
}

.modal > .title{
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	height: var(--modal-header-height);
	line-height: var(--modal-header-height);
	background-color: var(--modal-header-color);
	color: #FFF;
	width: calc(100% - 30px);
	padding: 0px 15px;
	margin: 0px;
	font-size: 16px;
	cursor: all-scroll;
	border-bottom: 1px solid var(--color-primary-border);
}

.modal > .content{
	position: absolute;
	top: calc(var(--modal-header-height) + 1px);
	left: 0px;
	width: 100%;
	height: calc(100% - (52px + var(--modal-header-height)));
	overflow: auto;
	background-color: #FFF;
	outline: none;
}
.modal > iframe.content{
	border: none;
}
.modal.nofooter > .content{
	height: calc(100% - (1px + var(--modal-header-height)));
}
.modal > .content > .fullscreen{
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	overflow-y: hidden;
}

.modal > .footer{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: calc(100% - 20px);
	height: var(--button-height);
	padding: 10px;
	overflow: hidden;
	overflow-x: auto;
	background-color: var(--color-white);
	border-top: 1px solid var(--color-primary-border);
  white-space: nowrap; 
}
.modal > .footer > .button{
  display: inline-block;
  float: none;
}
.modal > .footer > .button{
	margin-right: 5px;
}

.modal > ul.menu{
	position: absolute;
	top: 0px;
	right: 0px;
	border-bottom-left-radius: 5px;
	z-index: 2;
	width: auto;
	height: 25px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
}
.modal > .menu > li{
	list-style-type: none;
	width: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 9px;
	position: relative;
	float: right;
	color: white;
	cursor: pointer;
}
.modal > .menu > li:hover{
	background: rgba(0, 0, 0, 0.2);
}
.modal > .menu > li.fa-close{
	font-size: 12px;
}
.modal > .menu > li.fa-close:hover{
	background: var(--color-red);
}