.gui-overlay {
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.90);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
}

.gui-overlay .overlay-inner {
  height: 100%;
  margin: 0 50px;
  position: relative;
}

@media all and (max-width: 768px) {
  .gui-overlay .overlay-inner {
    margin: 0 20px;
  }
}

.gui-modal {
  position: absolute;
  max-width: 1024px;
  width: 100%;
  background-color: #fff;
  top: 50%;
  left: 50%;
  padding: 0;
  opacity: 0;
  border-radius: 8px;
  -webkit-transform: translate(-50%, -55%);
     -moz-transform: translate(-50%, -55%);
          transform: translate(-50%, -55%);
 -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
         transition: 0.3s;
  border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
      border-top-left-radius: 8px;
}

.modal-inner {
	border-radius: 8px;
	box-shadow: 3px 3px 25px rgba(0,0,0,0.5);
}

.modal-controls {
	display: none;
}

/*
 *  Height and Width alterations
 */

/*
 *  Height
 */

.gui-modal.modal-large {
  height: 100%;
}
.gui-modal.modal-medium {
  height: 75%;
}
.gui-modal.modal-small {
  height: 50%;
}

/*
 *  Width
 */

.gui-modal.modal-tablet {
  max-width: 1024px;
}
.gui-modal.modal-mini {
  max-width: 768px;
}

/*
 *  Height & Width
 */

.gui-modal.modal-large_tablet {
  height: 100%;
  max-width: 1024px;
}
.gui-modal.modal-large_mini {
  height: 100%;
  max-width: 768px;
}

.gui-modal.modal-medium_tablet {
  height: 75%;
  max-width: 1024px;
}
.gui-modal.modal-medium_mini {
  height: 75%;
  max-width: 768px;
}

.gui-modal.modal-small_tablet {
  height: 50%;
  max-width: 1024px;
}
.gui-modal.modal-small_mini {
  height: 50%;
  max-width: 768px;
}

.gui-modal.modal-form {
	height: 60%;
	max-width: 340px;
}
.gui-modal.modal-form-short {
	height: 320px;
	max-width: 340px;
}
.gui-modal.modal-form-small {
	height: 350px;
	max-width: 340px;
}
.gui-modal.modal-list {
	height: 90%;
	max-width: 500px;
}

.gui-modal.modal-portrait {
	height: 60%;
	max-width: 400px;
}
.gui-modal.modal-landscape {
	max-height: 400px;
	max-width: 60%;
}


.modal-inner {
  height: 100%;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.modal-inner iframe {
  width:100%;
  height:100%;
}

html.browser-safari.os-ipad .modal-inner,
html.browser-safari.os-iphone .modal-inner {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.modal-controls {
  position: absolute;
  top: -24px;
  right: 0;
  padding: 0 10px;
  border-radius: 8px 8px 0 0;
  width: auto;
  background-color: #000;
}
.modal-controls a {
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  margin: 0;
  padding: 0 10px;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
  opacity: 0.7;
}
.modal-controls a:hover, .modal-controls a:focus {
  opacity: 1;
}
.modal-controls .modal-toggle {
  position: relative;
  top: 1px;
}

.gui-overlay {
  opacity: 1;
  -webkit-transition: 0.4s;
     -moz-transition: 0.4s;
          transition: 0.4s;
}

.remove .gui-overlay {
  opacity: 0;
}

.gui-modal.active {
  opacity: 1;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
    z-index: 100;
}

/*	
 *	// =============================================
 *	// Jimz Bits - TBD! (Including positioning below) *********
 *	// =============================================
 */	

/*
.gui-modal {
	border-radius : 8px;
}

.gui-overlay {
	background: rgba(255, 255, 255, 0.90);
}

.modal-inner {
	box-shadow: 3px 3px 25px rgba(0,0,0,0.5);
}

*/

/*
 *	// =============================================
 *	// modal window positioning
 *	// =============================================
 */
.autofill-root-iframe-modal {
	height: 100%;
}

body.bodymode-iframe {
	position: relative;
	overflow:hidden;
	height: 100%;
	padding: 0;
}

.modal_table {
	display: table;
	height: 100%;
	width: 100%;
}

.modal_row {
	display: table-row;
}

/* header */
.modal_header {
	display: table-cell;
	height: 1px;
}

/* body */
.modal_body_cell {
	display: table-cell;
}

.modal_body_inner {
	position:relative;
	height: 100%;
}

.modal_body {
	overflow-y: auto;
	position: absolute;
	top: 0;
	right:0;
	bottom: 0;
	left: 0;
	padding: 2em;
}

/* footer */
.modal_footer {
	display: table-cell;
	background-color: $white;
	height: 40px;
	vertical-align: middle;
	padding: 0.6em;
	box-shadow: 0px -1px 4px rgba(0,0,0,0.1);
	border-top: 1px solid #DBDBDB;
}