div.modalContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    right: 0;
    margin: 0;
    /*overflow: hidden;*/ /* remove so resize options will be visible and resize handles will be targetable (when hidden, handles are only 2px because 5px sits outside the modal) */
    padding-bottom: 0;
    z-index: 9998; /* lower than .modalBackground, lower than the last .modalContainer in the dom */
    background-color: #F2F2F2;
    /*box-shadow: 10px 10px 5px 1px rgba(0,0,0,0.20);*/ /* Marshall's original */
    box-shadow: 2px 2px 20px #666666;
    padding-top: 15px; /*Height of the drag handle*/
    border: 1px solid gray;
    border-radius: var(--sherpa-dialog-border-radius);
    overflow: hidden;
}

.modalContainer.top { /* note: :last-child and last-of-type do not work consistently */
    z-index: 10000; /* higher than modalBackground, higher than all other modals */
}

.modalContainer.ui-draggable .modalDragHandle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px; /* TODO: find a good number for reals */
    z-index: 9997; /* directly below .modalbackground */
    cursor: move;
    /* AC: Rebranding */
    /*background-image: url('./obout/styles/style_4/record_group_header.gif');*/ /* Marshall's original */
    background-color: #cccccc;
    background-color: var(--sherpa-dialog-titlebar-background-color);
}

.modalContainer.ui-draggable-dragging .modalDragHandle {
    cursor: move;
}

.modalContent {
    position: relative;
    border-width: 0;
    background-color: #F2F2F2;
    top: 0px;
    left: 0px;
}

.modalbackground {
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.25;
    z-index: 9998; 
}

.modalbackground.willTheRealModalBackgroundPleaseStandUp {
    z-index: 9999;
    background-color: black;
}

/* Alfred: The following selectors below are meant for pages inside the iframe, which have called main.resizeModalDialogToIframeElement(). */

/* Add this to the iframe's body. */
.modalIframe-body {
    font-family: var(--sherpa-font-family);
    font-size: var(--sherpa-font-base-size);
    color: var(--sherpa-font-base-color);
}

.modalIframe-content {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 400px; /* Override the width in the element's style. */
    border: 0px solid red;
}

.modalIframe-body .modalIframe-content-region {
    position:relative;
    left:0px;
    top:0px;
    width:calc(100% - 30px);
    height:calc(100% - 0px);
    margin:0px;
    padding:15px;
    overflow-wrap:break-word;
}

.modalIframe-body input[type=button] {
    font: (--sherpa-button-normal-font-size) var(--sherpa-font-family);
    font-weight: var(--sherpa-button-normal-font-weight);
    height: var(--sherpa-button-normal-height);
    background-color: var(--sherpa-button-normal-background-color);
    color: var(--sherpa-button-normal-text-color);
    border: var(--sherpa-button-normal-border);
    border-radius: var(--sherpa-button-normal-border-radius);
    cursor: var(--sherpa-button-normal-cursor);
}

.modalIframe-body input[type=button]:hover {
    background-color: var(--sherpa-button-hover-background-color);
    color: var(--sherpa-button-hover-text-color);
    border: var(--sherpa-button-normal-border);
}

.modalIframe-body .button-standard{
    width:100px;
}

.modalIframe-body .button-standard-center {
    position: relative;
    left: calc(50% - 50px);
    top: 0px;
    width: 100px;
}

.modalIframe-body .button-standard-top-right {
    position: absolute;
    left: calc(100% - 115px);
    top: 15px;
    width: 100px;
}

.modalIframe-body .button-add-files {
    padding-left:25px;
    background-position: 4px 4px;
    background-size: 15px 15px;
    background-image: url(/images/icon_add20x20.png);
    background-repeat:no-repeat;
}

.modalIframe-body input[type=text] {
    border: 1px solid var(--sherpa-textbox-normal-border-color);
    background-image: linear-gradient(var(--sherpa-textbox-normal-background-color1) 0%, var(--sherpa-textbox-normal-background-color2) 50%, var(--sherpa-textbox-normal-background-color3) 100%);
    vertical-align: middle;
    box-shadow: var(--sherpa-textbox-normal-box-shadow);
    border-radius: 4px;
    position: relative;
    top: -1px;
    height: calc(var(--sherpa-button-normal-height) - 2px);
    padding: 0px 6px 0px 6px;
    margin: 0px;
    font-size: calc(var(--sherpa-font-base-size) - 1px);
    color: rgb(43, 76, 97);
}

.modalIframe-body input[type=text]:hover {
    border: 1px solid var(--sherpa-textbox-hover-border-color);
    background-image: linear-gradient(var(--sherpa-textbox-hover-background-color1) 0%, var(--sherpa-textbox-hover-background-color2) 50%, var(--sherpa-textbox-hover-background-color3) 100%);
    box-shadow: var(--sherpa-textbox-hover-box-shadow);
}

.modalIframe-body input[type=text]:focus {
    outline: none !important;
    border: 1px solid var(--sherpa-textbox-focus-border-color);
    background-image: linear-gradient(var(--sherpa-textbox-focus-background-color1) 0%, var(--sherpa-textbox-focus-background-color2) 50%, var(--sherpa-textbox-focus-background-color3) 100%);
    box-shadow: var(--sherpa-textbox-focus-box-shadow);
}

.modalIframe-body .text-search-files {
    float: right;
    width:125px;
}

.modalIframe-body h1 {
    margin: 0px;
    font-family: var(--sherpa-font-family);
    font-size: 17pt;
    font-weight: 400;
}

.modalIframe-body small { 
    font-size: 8pt;
    font-weight: 400;
    margin:5px 0px 5px 0px;
}

.modalIframe-body hr {
    margin: 0px;
    border-top: 1px solid var(--sherpa-blue2);
    border-radius: 4px;
}

.modalIframe-body p {
    margin:0px;
    height:15px;
}

.modalIframe-body .dialog-footer {
    border: 1px solid var(--sherpa-greyA4); /*#e5ab35*/
    border-radius:4px;
    display: block /*table*/;
    /*border-spacing: 10px;*/
    width: 100%;
    height: 55px;
    background-image: linear-gradient(var(--sherpa-greyB4), var(--sherpa-greyB2)); /*, #fbf7f0, #faf0de, #ffe2a6*/
    background-size: 2px 55px;
}