/* Modal  *****************************************************************************************************************/
.modal {
    z-index: 2000;
    padding-right: 0px !important;
}

.modal-open {
    /* !important krävs för att slå bootstrap.js setScrollbar() som sätter padding-right inline på body.
       Den kompensationen behövs inte här eftersom vi låter sidans scrollbar vara kvar när en modal öppnas. */
    padding-right: 0px !important;
    overflow: visible;
    /* auto istället för scroll, annars får korta sidor en extra scrollbar när en modal öppnas */
    overflow-y: auto;
}

.modal-header .close,
.modal-body .close {
    margin-top: -2px;
    text-decoration: none;
    font-size: 30px;
}


.modal-title {
    font-size: 21px;
    letter-spacing:-0.4px;
    font-family: Inter;
    line-height: 130%;
}

/* Every heading in a modal is set in Inter at -1px, whatever headline font and spacing the team's
   theme picks (the theme sheets style bare h1-h6, which this outranks). The modal title keeps its
   own -0.4px. */
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6,
.modal .h1, .modal .h2, .modal .h3, .modal .h4, .modal .h5, .modal .h6 {
    font-family: Inter, Roboto, Arial, sans-serif;
}

.modal h1:not(.modal-title), .modal h2:not(.modal-title), .modal h3:not(.modal-title),
.modal h4:not(.modal-title), .modal h5:not(.modal-title), .modal h6:not(.modal-title),
.modal .h1:not(.modal-title), .modal .h2:not(.modal-title), .modal .h3:not(.modal-title),
.modal .h4:not(.modal-title), .modal .h5:not(.modal-title), .modal .h6:not(.modal-title) {
    letter-spacing: -1px;
}


.modal-body {
    padding: 20px;
}

    .modal-body p {
        margin-bottom: 5px;
    }

    .modal-body legend {
        padding-bottom: 5px;
        margin-bottom: 10px;
    }

    .modal-body .checkbox-group .btn {
        padding: 5px 8px 3px 8px;
    }

    .modal-body .checkbox-group .btn {
        font-size: 13px;
    }

.modal-footer, .modal-header {
    padding: 15px 20px;
}


.modal-alert.alert {
    border-width: 0px;
    border-radius: 0px;
    margin: 0px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 13px;
}

.modal .modal-toolbar {
    border-width: 1px 0px 1px;
    padding: 10px 20px;
    overflow: hidden;
}

    /* Invite modal :: Dropdown filters */
        .modal .modal-toolbar.dropdown-filters > div {
            padding-left: 10px;
            white-space: nowrap;
        }

            .modal .modal-toolbar.dropdown-filters > div:first-child {
                padding-left: 0;
            }

            .modal .modal-toolbar.dropdown-filters > div .form-control {
                min-width: 160px;
            }



    .modal .modal-toolbar p {
        font-size: 13px;
        font-weight: bold;
    }

    .modal .modal-toolbar a {
        text-decoration: none;
    }

.modal.modal-small .modal-dialog {
    width: 400px;
}

    .modal.modal-small .modal-dialog .modal-header {
        border-bottom: 1px solid #ddd;
    }


@media (max-width: 768px) {
    .modal .modal-toolbar.dropdown-filters {
        flex-wrap: wrap;
    }

        .modal .modal-toolbar.dropdown-filters > div {
            width: 100%;
            padding-left: 0;
        }

    .modal .invite-filter {
        margin-bottom: 10px;
    }
}

/* .modal-sheet-mobile: on phones the modal is a full-width sheet sliding up from the bottom,
   10px short of the top at most, with rounded top corners; a long body scrolls inside it.
   Replaces Bootstrap's drop-in from above (.modal.fade / .modal.in). */
@media (max-width: 767px) {
    .modal.modal-sheet-mobile .modal-dialog {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        max-height: calc(100% - 10px);
        margin: 0;
    }

    .modal.modal-sheet-mobile .modal-content {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border: 0;
        border-radius: 7px 7px 0 0;
        box-shadow: none;
        overflow: hidden;
    }

    .modal.modal-sheet-mobile .modal-body {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .modal.modal-sheet-mobile.fade .modal-dialog {
        transform: translate(0, 100%);
        transition: transform 0.3s ease-out;
    }

    .modal.modal-sheet-mobile.in .modal-dialog {
        transform: translate(0, 0);
    }

    /* While the sheet is open the page behind it stays put (overrides .modal-open's
       overflow-y: auto above), and scrolling the sheet's body never carries over to the page. */
    html:has(.modal.modal-sheet-mobile.in),
    html:has(.modal.modal-sheet-mobile.in) body {
        overflow: hidden;
    }

    .modal.modal-sheet-mobile,
    .modal.modal-sheet-mobile .modal-body {
        overscroll-behavior: contain;
    }

    /* Only the sheet's body scrolls. Bootstrap sizes the backdrop (inside .modal) to the modal's
       scroll height, which made .modal itself scrollable: a scroll outside the body moved the
       sheet off screen. */
    .modal.modal-sheet-mobile {
        overflow: hidden !important;
    }

    .modal.modal-sheet-mobile .modal-backdrop {
        height: 100% !important;
    }
}
















/*
.modal.vocation fieldset {
    border-top: 1px solid #eee;
    font-size: inherit;
    width: 100%;
    position: relative;
    margin-bottom: 8px;
}

    .modal.vocation fieldset legend {
        margin: 0px;
        padding: 0px 10px 0px 0px;
        border-width: 0px;
        font-size: inherit;
        width: auto;
    }

        .modal.vocation fieldset legend .pull-right {
            position: absolute;
            right: 0px;
            padding-left: 10px;
            background: #fff;
        }
        */