div.modal-title {
    text-align: left;
    padding-top:    26px;
    padding-bottom: 12px;
    padding-right:  0;
    padding-left:   0;
    margin-bottom:  14px;
    padding-left:   8pt;   /* TEMPORARY until all contents can be re-styled with no left padding */
}

.modal-title p,
div.modal-title p,
span.modal-title,
span.modal-title-emphasis {
    font-family:    Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:    500;
    font-size:      16pt;
    color:          #000000;
}

/*  THIS HAS A NAME CONFLICT WITH bootstrap.min.css */
p.modal-title {
    /* if we remove the X close button from modal windows, remove this margin */
    margin: 0 36px 0 0;
}

span.modal-title-emphasis {
    color:          #5fac5a;
}

/* modal contents:
 * we can't put left/right padding in any of the wrappers,
 * either outside iframe/contents or inside them.
 * specs call for horizontal gainsboro lines between
 * sections of the contents.  left/right padding must be
 * handled within each one of those sections.
 */

/* this is the wrapper of the entire vex modal contents */
div.modal-wrapper-outer {
    padding-bottom: 1em;
    padding-left:   1em;
    padding-right:  1em;
    /* NOTE: when all contents are restyled without padding, adjust left/right to 2em */
}

/* if no title was used, pad the space extra for what's missing from the rule line */
div.modal-wrapper-outer-notitle {
    padding-top:    1.5em;
}

/* this is the wrapper outside the iframe, applied in openModal */
div.modal-wrapper-iframe {
    /* "text-align: center" is somehow necessary for resizing vex
     * vertically, but it doesn't affect the layout of the contents
     */
    text-align:     center;
}

/* HTML content interiors are sometimes not manually padded or margined.
 * use this for that.
 */
div.modal-content-interior {
    padding-left:   14px;  /* TEMPORARY until all contents can be re-styled with no left padding */
    padding-right:  14px;
}

div.modal-button-fancydialog {
    text-align:     right;
    margin-top:     1.5em;
    margin-bottom:  1.5em;
}

hr.modal-rule-line {
    width:          auto;
    margin:         0;
    padding:        0;
    margin-left:    -1em;
    margin-right:   -1em;
    margin-bottom:  1.5em;
    height:         0;
    border:         0;
    border-top:     1pt solid rgba(0,0,0,0.1);
    border-bottom:  1pt solid rgba(255,255,255,0.3);
}

/* temporary body wrapper to add padding to content until permanent solultion */
div.temp-modal-body {
    padding: 0 17px 13px 13px;
}

div.temp-modal-body-with-button { /* when modal creates button itself, want to avoid extra padding on bottom */
    padding: 0 17px 0 13px;
}

/* use this for rule lines inside a fancydialog */
hr.modal-rule-line-fancydialog {
    margin-left:    0;
    margin-right:   0;
}

table.modal-iframe,
div.modal-iframe canvas,
div.modal-iframe div,
div.modal-iframe table
{
    margin-left:    auto;
    margin-right:   auto;
    text-align:     center;
}

div.modal-iframe canvas#statGraph {
    padding-right:  2em;
}

div.modal-iframe {
    padding: 0;
    margin: 0;
}

div.modal-iframe-interior {
    /* adjust sections within a modal using style="margin-top: 1em;" etc */
    min-width: 750px;
}

p.modal-message {
    font-size:      12pt;
    font-weight:    400;
    text-align:     center;
}

p.modal-notice {
    font-size:      14pt;
    font-weight:    600;
    text-align:     center;
}

div.modal-button {
    margin-left:    18px;
    margin-right:   12px;
    padding-bottom: 8px;
    margin-top:     22px;
    text-align:     right;
}

div.modal-dialog div.vex-modal-content {
    margin-left:    12px;
    margin-right:   16px;
    margin-bottom:  24px;
}


div.vex-modal-alert div.vex-modal-content {
    margin-left:    12px;
    margin-right:   12px;
}


/* used to line up button in fancydialog modals without poking HR into horizontal scroll */
input.button-fancydialog {
    margin-right:   2em;
}

/* prevent hiding of scrollbars, which causes page movement and is default vex style */
body.vex-open {
    overflow: inherit !important;
}