.modal {
    background: white;
    border: solid 3px var(--bg-color);
    border-radius: 3px;
    box-shadow: 0 0 10px #000;
    color: black;
    padding: 0;
    max-height: calc(100vh - 20px); /* EM: 20px is what bPopup seems to always leave at the top above the modal */
    overflow: auto;
}

.modal:not(dialog) {
    display: none;
}

.modal .modal-header,
.modal .modal-content,
.modal .modal-footer {
    margin: 0;
    padding: 15px;
}

.modal .modal-content {
    padding-bottom: 0;
    overflow: auto;
}

    .modal .modal-content.scroll {
        padding-right: 0;
    }

.modal .modal-header {
    align-items: center;
    background: #59a5c0;
    display: flex;
    height: 54px;
    justify-content: space-between;
    padding-bottom: 0;
    padding-top: 0;
    overflow: visible;
}

    .modal .modal-header .header-container {
        font-size: inherit;
    }

    .modal .modal-header h3 {
        background: none;
        border: none;
        display: inline-block;
        font-size: 180%;
        letter-spacing: -.5px;
        line-height: 100%;
        margin: 0;
        padding: 0;
    }

    .modal .modal-header .tools {
        /*background: #C7E3EC;*/
        color: var(--app-color-4);
        flex-grow: 2; /* Evgeny: this is to push it left right next to the modal header */
        font-weight: normal;
        padding-left: 1em;
        text-shadow: none;
    }

.cancel.close.x.o {
    --button-hover-background-color: #e5e5e569;
    --button-pressed-background-color: #e5e5e5aa;
    --size: 28px;
    --padding: 3px;
}

/*.preview-product-images div.cancel.close {
    cursor: pointer;
    float: right;
    height: 21px;
    overflow: hidden;
    padding-top: 11px;
    position: relative;
    width: 22px;
    z-index: 10001;
}

.modal .modal-header div.cancel.close {*/
/*cursor: pointer;
    font-size: 150%;
    height: 21px;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 22px;*/
/*}

    .modal .modal-header div.cancel.close:hover:after,
    .modal .modal-header div.cancel.close:hover:before,
    .preview-product-images div.cancel.close:hover:before,
    .preview-product-images div.cancel.close:hover:after {
        background: var(--bg-color);
        opacity: 1;
    }

    .modal .modal-header div.cancel.close:before, .modal .modal-header div.cancel.close:after,
    .preview-product-images div.cancel.close:after,
    .preview-product-images div.cancel.close:before {
        background: var(--bg-color);
        content: '';
        left: 0;
        opacity: .7;
        position: absolute;
        top: 10px;
        width: 22px;
    }

    .modal .modal-header div.cancel.close:before,
    .preview-product-images div.cancel.close:before {
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .modal .modal-header div.cancel.close:after,
    .preview-product-images div.cancel.close:after {
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .modal .modal-header div.cancel.close:before, .modal .modal-header div.cancel.close:after,
    .preview-product-images div.cancel.close:before, .preview-product-images div.cancel.close:after {
        height: 2px;
    }*/


body .modal .modal-content {
    height: calc(100% - 58px - 54px);
}

body .modal.scrollable .modal-content {
    padding-right: 0;
}


.modal .modal-content {
    margin: 0px !important;
    min-height: 80px;
    min-width: 330px;
}

.modal #content {
    height: 100%; /* Evgeny: some modals have this redundant wrapping div inside because they get loaded
            over ajax and this content div serves as the container for what is going to be pulled off the resulting
            html and put into the modal, so it ends up there, and therefore needs to be as "transparent" as possible
        */
}

@media screen and (max-width: 700px) {
    body div.modal {
        bottom: 5px !important;
        height: auto !important;
        left: 5px !important;
        min-height: initial !important;
        min-width: initial !important;
        opacity: .97 !important;
        right: 5px !important;
        top: 5px !important;
        width: auto !important;
    }

        body .modal .modal-header h3 {
            font-size: 18px;
            padding: 0;
            /*width: calc(100% - 30px);*/
        }

        body .modal .modal-header,
        body .modal .modal-content,
        html body .modal .modal-footer {
            padding: 10px;
        }

    html body .modal .modal-header {
        padding-bottom: 0;
        padding-top: 0;
    }

    html body div.modal .modal-content {
        padding-right: 0;
    }

    body .modal .modal-content {
        height: calc(100% - 44px - 48px);
        min-height: initial;
        min-width: initial;
    }

    body .modal .modal-header {
        height: 44px;
        overflow: hidden;
    }

    body .modal .modal-footer {
        height: 48px;
        overflow: hidden;
    }
}

body .modal .content .view-note {
    background: #FFF4A3;
    font-weight: 700;
    margin: 0 0 15px 0;
    padding: 7px 0 7px 12px;
}

    body .modal .content .view-note .icon-truck-right:before, body .modal .content .view-note .icon-doc-text-inv:before {
        color: #444;
        font-size: 130%;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }

.modal .empty {
    font-size: 120%;
}

    .modal .empty .action {
        margin-top: 10px;
    }

        .modal .empty .action a {
            font-size: 110%;
            font-weight: bold;
        }

div.modal.wait {
    min-height: 180px;
}

.modal .content.wait {
    opacity: .5 !important;
}

body .modal h3 {
    background: rgb(199, 227, 236);
    border-bottom: solid 1px rgb(220, 235, 240);
    font-size: 180%;
    letter-spacing: -.5px;
    margin-bottom: 0;
    margin-top: 0;
    padding: 15px 20px;
}

.modal h4 {
    font-size: 100%;
    font-weight: bold;
    padding: 0 0 .1em 0;
}

.modal h3:before {
    left: -4px;
    margin-right: 0;
    position: relative;
}

.modal h3.icon-star:before {
    font-size: 107%;
}

.modal div, .modal strong {
    color: black;
}

body .modal .modal-form.with-vertical-scroll {
    margin-right: 0;
}

.modal .modal-form .prompt {
    margin-right: 0px;
}

#chatPopup.modal .modal-form.has-iframe {
    margin: 0px;
}

.modal iframe,
.modal .iframe {
    max-width: 100%;
}

.modal .content.wait {
    background-position: 50% 50% !important;
}

.modal .content div#uniform-undefined {
    margin: 0;
}

.modal .content div.radio {
    margin: 0;
}

.modal .subtitle {
    font-size: 110%;
    font-weight: normal;
    line-height: 140%;
}

.modal .status {
    font-weight: normal;
    margin: 1em 0 0 0;
}

    .modal .status .error, .error, .error span, .warning {
        color: red;
    }

.modal .default-button {
    font-weight: bold;
    padding: 5px 20px;
}

.modal .content .cancel,
.modal .modal-footer .cancel {
    font-size: 100%;
    font-weight: normal;
    position: static;
}

.modal .content button + .cancel,
.modal .modal-footer button + .cancel,
.modal .content input + .cancel,
.modal .modal-footer input + .cancel {
    margin-left: 10px;
}

.modal.wait {
    background: white url(/images/wait.gif) no-repeat 50% 50%;
}

.modal .footer.wait {
    background: white url(/images/wait.gif) no-repeat 0 50%;
}

.modal-footer .side-action {
    float: right;
    font-size: 90%;
    /*margin-right: 20px; removed it because it created redundant margin in address book modal */
}

    .modal-footer .side-action:after {
        content: '>';
        font-size: 100%;
        font-weight: bold;
        margin-left: 3px;
        position: relative;
        text-decoration: none !important;
        top: 1px;
    }

    .modal-footer .side-action:hover {
        border-bottom: solid 1px var(--bg-color);
        text-decoration: none;
    }

    .modal-footer .side-action:after:hover {
        border-bottom: none;
        content: '>';
        text-decoration: none !important;
    }

.modal .footer .side-action.compact {
    position: relative;
    top: 7px;
}

.modal.wait.loading {
    background-position: 50% 50%;
}

.b-modal {
    opacity: .5;
}

.modal .payment-methods li.payment-profile {
    /*height: 142px;*/
    border: solid 1px #ddd;
    border-radius: 3px;
    margin: 0 5px 5px 0;
    min-width: 140px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 140px;
}

.modal .payment-methods li.payment-profile-new-card {
    /*height: 142px;*/
    border: solid 1px #ddd;
    border-radius: 3px;
    margin: 0 5px 5px 0;
    min-width: 75px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 75px;
}

.modal .payment-methods li.select-funds {
    border-color: var(--bg-color);
    border-width: 3px;
    font-weight: bold;
    padding: 8px;
}

.modal .payment-methods li ul {
    cursor: pointer;
}


.modal .modal-content .section,
.modal .modal-content section {
    margin-bottom: 1em;
}

.modal .modal-content .subsection {
    margin-bottom: .5em;
}

.modal .modal-directions {
    left: 16px;
}

.activity-attributes .attributeValue {
    margin-right: 0px;
}

.activity-attributes .eventAttributeCopy {
    padding-right: 5px;
}

body.hide-cancel-close div.modal div.cancel.close.thick {
    display: none;
}

#compareModal {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

    #compareModal iframe {
        display: block;
    }