/* ---------------------------------------------------
    MODAL STYLE
----------------------------------------------------- */
.modal {
    margin-top: var(--navigation-height);
    height: calc(100% - var(--navigation-height) - 1px);
}

.modal-backdrop {
    background-color: rgb(245, 245, 242);
}

    .modal-backdrop.show {
        opacity: .9;
    }

.modal-content {
    border-radius: 0;
    box-shadow: 0 8px 16px 0 rgba(0,0,0, 0.16), 0 0 16px 0 rgba(0, 0, 0, 0.08);
    border: none;
}

.modal-header {
    padding: 0;
    margin: 24px 0 22px 0;
    border: none;
    border-top: 2px solid var(--color-main-heavy);
    border-bottom: 2px solid var(--color-main-heavy);
    border-radius: 0;
    display: inherit;
}

.modal-body {
    padding: 0 0 0 0;
    margin: 0 0 24px 0;
    border-bottom: 2px solid var(--color-main-heavy);
}

    .modal-body a {
        color: #888579;
        text-decoration: underline;
    }

    .modal-body br {
        vertical-align: top;
        display: block;
        content: "";
        margin-top: 0.5em;
    }

    .modal-body .p-info-message-text {
        padding-bottom: 24px;
    }

.fc-modal-body-footer {
    padding: 24px 0 24px 0;
    margin: 24px 0 0 0;
    border-top: none;
    border-radius: 0;
}

    .fc-modal-body-footer button {
        margin: 0;
    }

.modal-link {
    color: var(--color-main);
    text-decoration: underline;
}

    .modal-link:hover, .modal-link:focus {
        color: var(--color-main);
        text-decoration: underline;
    }


.modal-description {
    font-size: var(--font-size-normal-medium);
    margin-bottom: 20px
}

/* BP1: Small devices */
@media (min-width: 0px) and (max-width: 719.98px) {

    .modal {
        padding: 0 !important;
        margin-left: var(--margin-x-page-bp1);
        margin-right: var(--margin-x-page-bp1);
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        background-color: var(--color-main-bg);
    }

    .modal-dialog {
        padding: 0;
        margin: 0;
        min-width: 100%;
        min-height: 100%;
        display: flex;
    }

    .modal-header {
        margin-top: 4px;
        border-top: none;
        margin-bottom: 14px;
        display: block;
    }

    .modal-content {
        min-height: 100%;
        border: 0 none;
        box-shadow: none;
        background-color: var(--color-main-bg);
        overflow: auto;
    }

        .modal-content .container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

    .modal-body {
        border-bottom: none;
        display: flex;
        flex-direction: column;
    }

    .fc-modal-body-footer {
        padding: 8px 0 44px 0;
        border-top: 1px solid var(--color-main-heavy);
    }
}

/* BP2: Medium devices */
@media (min-width: 720px) and (max-width: 1023.98px) {
    .modal {
        margin-left: 0;
    }

    .modal-dialog {
        max-width: 624px;
        padding: 0;
    }
}
/* BP3: Large devices  */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .modal-dialog:not(.fc-center) {
        max-width: calc(680px + var(--navigation-width));
        padding-left: var(--navigation-width);
    }

    .modal-dialog {
        max-width: 680px;
    }
}
/* BP4: Extra large devices */
@media (min-width: 1280px) {
    .modal-dialog:not(.fc-center) {
        max-width: calc(728px + var(--navigation-width));
        padding-left: var(--navigation-width);
    }

    .modal-dialog {
        max-width: 728px;
    }
}

/* ---------------------------------------------------
    TOAST STYLE
----------------------------------------------------- */
.toast {
    background-color: var(--color-main);
    padding: 0;
    margin: 0 0 0 -32px;
    position: fixed;
    z-index: 1;
    bottom: 47px;
    min-width: 100%;
    border-radius: 0px;
    border: none;
}

    .toast:not(:last-child) {
        margin-bottom: 0;
    }

.toast-centered {
    position: fixed;
    bottom: 47px;
    display: flex;
    justify-content: center;
    z-index: 9999;
}

.toast-centered .toast {
    position: relative;
    left:0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: 0;
}

.toast-body {
    color: var(--color-control-bg);
}

/* BP1: Small devices */
@media (min-width: 0px) and (max-width: 719.98px) {
    .toast {
        right: 9px;
        left: 9px;
        bottom: 8px;
        min-width: calc(100% - 18px);
        margin: 0;
    }

        .toast:not(:last-child) {
            margin-bottom: 0;
        }
}

/* BP2: Medium devices */
@media (min-width: 720px) and (max-width: 1023.98px) {
    .toast {
        min-width: 624px;
        margin-left: -24px;
    }
}

/* BP3: Large devices  */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .toast {
        min-width: 680px;
        margin-left: -24px;
    }
}

/* BP4: Extra large devices */
@media (min-width: 1280px) {
    .toast {
        min-width: 728px;
    }
}