.fade {
    transition: opacity 0.15s linear;
}

.fade:not(.show) {
    opacity: 0;
}

.modal {
    --modal-zindex: 65557;
    --modal-width: 500px;
    --modal-padding: 1rem;
    --modal-margin: 0.5rem;
    --modal-color: ;
    --modal-bg: #f0f0f0;
    --modal-border-color: var(--border-color-translucent);
    --modal-border-width: 1px;
    --modal-border-radius: 0.3rem;
    --modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --modal-inner-border-radius: calc(0.3rem - 1px);
    --modal-header-padding-x: 1rem;
    --modal-header-padding-y: 1rem;
    --modal-header-padding: 1rem 1rem;
    --modal-header-border-color: var(--border-color);
    --modal-header-border-width: 1px;
    --modal-title-line-height: 1.5;
    --modal-footer-gap: 0.5rem;
    --modal-footer-bg: #f0f0f0;
    --modal-footer-border-color: var(--border-color);
    --modal-footer-border-width: 1px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--modal-margin);
    pointer-events: none;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: -webkit-transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, -50px);
                    transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }
}
.modal.show .modal-dialog {
    -webkit-transform: none;
                    transform: none;
}
.modal.modal-static .modal-dialog {
    -webkit-transform: scale(1.02);
                    transform: scale(1.02);
}

.modal-dialog-scrollable {
    height: calc(100% - var(--modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

.modal-dialog-centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
            -ms-flex-align: center;
                    align-items: center;
    min-height: calc(100% - var(--modal-margin) * 2);
}

.modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            -ms-flex-direction: column;
                    flex-direction: column;
    width: 100%;
    color: var(--modal-color);
    pointer-events: auto;
    background-color: var(--modal-bg);
    background-clip: padding-box;
    border: var(--modal-border-width) solid var(--modal-border-color);
    border-radius: var(--modal-border-radius);
    outline: 0;
}

.modal-backdrop {
    --backdrop-zindex: 65555;
    --backdrop-bg: #000;
    --backdrop-opacity: 0.7;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--backdrop-bg);
}
.modal-backdrop.fade {
    opacity: 0;
}
.modal-backdrop.show {
    opacity: var(--backdrop-opacity);
}

.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-box-align: center;
            -ms-flex-align: center;
                    align-items: center;
    -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                    justify-content: space-between;
    padding: var(--modal-header-padding);
    border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
    border-top-left-radius: var(--modal-inner-border-radius);
    border-top-right-radius: var(--modal-inner-border-radius);
}
.modal-header .btn-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: url(../images/closebox.png) no-repeat center;
    border: none;
    z-index: 1;
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--modal-title-line-height);
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
    padding: var(--modal-padding);
}

.modal-body iframe {
    background: url(../images/spinner.gif) no-repeat center;
    background-size: 20px 20px;
    max-height: calc(100vh - (var(--modal-padding) * 2) - (var(--modal-margin) * 2) - var(--modal-footer-gap) * 0.75);
}

.modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
            flex-shrink: 0;
    -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: center;
            -ms-flex-align: center;
                    align-items: center;
    -webkit-box-pack: end;
            -ms-flex-pack: end;
                    justify-content: flex-end;
    padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5);
    background-color: var(--modal-footer-bg);
    border-top: var(--modal-footer-border-width) solid var(--modal-footer-border-color);
    border-bottom-right-radius: var(--modal-inner-border-radius);
    border-bottom-left-radius: var(--modal-inner-border-radius);
}
.modal-footer > * {
    margin: calc(var(--modal-footer-gap) * 0.5);
}

@media (min-width: 576px) {
    .modal {
        --modal-margin: 1.75rem;
        --modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .modal-sm {
        --modal-width: 300px;
    }
}
@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --modal-width: 940px;
    }
    .modal-dialog {
        max-width: var(--modal-width);
        margin-right: auto;
        margin-left: auto;
    }
}
@media (min-width: 1200px) {
    .modal-xl {
        --modal-width: 1140px;
    }
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0;
}
.modal-fullscreen .modal-body {
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-md-down .modal-header,
    .modal-fullscreen-md-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-lg-down .modal-header,
    .modal-fullscreen-lg-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 1199.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-xl-down .modal-header,
    .modal-fullscreen-xl-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 1399.98px) {
    .modal-fullscreen-xxl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-xxl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-xxl-down .modal-header,
    .modal-fullscreen-xxl-down .modal-footer {
        border-radius: 0;
    }
    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto;
    }
}
.modal label {
    width: 100%;
}
.jviewport-height10 {
    height: 10vh;
}
.jviewport-height20 {
    height: 20vh;
}
.jviewport-height30 {
    height: 30vh;
}
.jviewport-height40 {
    height: 40vh;
}
.jviewport-height50 {
    height: 50vh;
}
.jviewport-height60 {
    height: 60vh;
}
.jviewport-height70 {
    height: 70vh;
}
.jviewport-height80 {
    height: 80vh;
}
.jviewport-height90 {
    height: 90vh;
}
.jviewport-height100 {
    height: 100vh;
}

[class*=jviewport-height] iframe {
    height: 100%;
}

.modal-dialog.jviewport-width10 {
    width: 10vw;
}
.modal-dialog.jviewport-width20 {
    width: 20vw;
    max-width: none;
}
.modal-dialog.jviewport-width30 {
    width: 30vw;
    max-width: none;
}
.modal-dialog.jviewport-width40 {
    width: 40vw;
    max-width: none;
}
.modal-dialog.jviewport-width50 {
    width: 50vw;
    max-width: none;
}
.modal-dialog.jviewport-width60 {
    width: 60vw;
    max-width: none;
}
.modal-dialog.jviewport-width70 {
    width: 70vw;
    max-width: none;
}
.modal-dialog.jviewport-width80 {
    width: 80vw;
    max-width: none;
}
.modal-dialog.jviewport-width90 {
    width: 90vw;
    max-width: none;
}
.modal-dialog.jviewport-width100 {
    width: 100vw;
    max-width: none;
}

@media (max-width: 767.98px) {
    .modal-dialog[class*=jviewport-width] {
        width: 90vw;
    }
}

iframe {
    border: 0;
}

.modal iframe {
    width: 100%;
}

.modal-header {
    padding: 0 15px;
}

.modal-body {
    overflow-y: initial;
}

.modal-title {
    font-weight: 400;
    line-height: 2.875rem;
}