body.format-fresk {
    .modal.show {
        .modal-dialog[tabindex="0"].focus .modal-content,
        .modal-dialog[tabindex="0"]:focus .modal-content {
            box-shadow: none;
        }
        .modal-dialog.modalfresk_section {
            width: 95%;
            max-width: 830px;
            .modalfresk_header {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-end;
                align-items: center;
                border: 0;
                padding: 10px 28px 0;
                h5.modal-title {
                    display: none;
                }
                .section_navigation {
                    display: none;
                    flex-flow: row nowrap;
                    justify-content: flex-start;
                    align-items: center;
                    .navigation_button {
                        width: 40px;
                        height: 40px;
                        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .06);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
                .btn-close {
                    margin: 0;
                    width: 30px;
                    height: 30px;
                    color: var(--fresk-dm-text-emphasis, #000);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 13px;
                }
            }
            .modal-body {
                .activity {
                    margin-bottom: 0em;
                }
                .section .activity {
                    padding: 0;
                }
                .imageiconactivity.modtype_label{
                    box-shadow: none !important;
                    .activityimage-container{
                        display: none;
                    }
                    .noimage.w-100{
                        padding: 15px;
                        [data-region="activity-type"] {
                            font-size: 0 !important;
                        }
                    }
                }
                .imageiconactivity.activity-wrapper {
                    max-width: 100%;
                    height: auto;
                    border: 0;
                    box-shadow: 0 0 10px rgb(0, 0, 0, .1);
                    border-radius: 8px;
                    padding-top: 0;
                    margin-top: .50rem;
                    .activityimage-container{
                        width: 320px;
                        height: 10em;
                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 8px 0 0 0;
                            object-fit: cover;
                        }
                    }
                    .activityimage-container.customeimage{
                        height: 100% !important;
                    }
                }

                .noimage {
                    height: 100%;

                    .activity-item {
                        height: 100%;
                        align-content: center;
                        border-radius: 0 8px 8px 0;
                        box-shadow: none !important;
                        .activity-grid.d-flex {
                            display: grid !important;
                            align-items: center;
                            grid-template-columns: min-content 1fr min-content min-content min-content;
                            grid-template-rows: 1fr repeat(5, min-content);
                            grid-template-areas:
                                "icon name groupmode completion actions"
                                "icon type groupmode completion actions"
                                "icon dates groupmode completion actions"
                                "icon altcontent altcontent altcontent altcontent"
                                "icon afterlink afterlink afterlink afterlink"
                                "icon availability availability visibility visibility";
                            .activity-type {
                                grid-area: type;
                                font-weight: 400;
                                color: var(--fresk-dm-text-muted, #9594A7);
                                text-transform: uppercase;
                            }
                            .activityname {
                                grid-area: name;
                                font-size: x-large;
                                font-weight: 600;
                            }
                        }

                    }
                    .activity-icon.activityiconcontainer {
                        display: none !important;
                    }
                }
                margin-bottom: 40px;
                padding: 0 28px;
                .fresk-modal#modal-header {
                    display: flex;
                    flex-flow: row nowrap;
                    height: fit-content;
                    .modal-img-top{
                        min-width: 220px;
                        min-height: 130px;
                        border-radius: 8px;
                        margin-right: 10px;
                        &.fresk-image-dimmed {
                            filter: grayscale(1);
                        }
                    }
                    .modal-header-content {
                        width: 70%;
                        padding: 8px 0 0 0;
                        min-height: 130px;
                        display: flex;
                        align-items: center;
                        .section-content {
                            width: 100%;
                            .title {
                                h3 {
                                    color: var(--fresk-dm-text-emphasis, black) !important;
                                    font-size: 21px;
                                }
                            }
                            .section_availability {
                                .availabilityinfo {
                                    .showmore-container {
                                        [data-action="toggle-content"] {
                                            display: none;
                                        }
                                        .collapsed-content {
                                            font-size: 12px;
                                            display: none;
                                        }
                                        .expanded-content {
                                            font-size: 12px;
                                            display: block;
                                        }
                                    }
                                }
                            }
                            .card-bottom-content {
                                width: 50%;
                            }
                        }
                        .fresk-progress-bar {
                            background-color: var(--fresk-dm-surface-recessed, #c9c9c99e);
                            width: 90%;
                        }
                        .progress-percent {
                            margin-left: 0.75rem;
                            color: var(--fresk-dm-text-emphasis, black);
                            width: 10%;
                        }
                    }
                }
                .modal-content {
                    max-height: unset !important;
                    border: 0 !important;
                    overflow: visible;
                    [data-for="sectioninfo"] {
                        margin: 0 !important;
                    }
                    [data-for="cmlist"] {
                        .activity {
                            padding: 0;
                            margin-bottom: 1em;
                            margin-top: map-get($spacers, 1);
                            border-top: 0;
                            .activity-item {
                                border: 0 !important;
                                box-shadow: 0 0 10px 0 rgba(0, 0, 0, .10);
                                margin-bottom: 14px;
                                &.activityinline {
                                    padding: 0;
                                    box-shadow: none;
                                }
                                .activity-altcontent.activity-description {
                                    width: 100%;
                                }
                                .activity-availability.availabilityinfo.isrestricted.isfullinfo{
                                    width: 100%;
                                }
                                .activity-basis {
                                    margin-left: 0 !important;
                                    .d-flex.flex-row.flex-nowrap.flex-md-row.w-100.align-self-start {
                                        align-items: center !important;
                                    }
                                    &.noname-grid {
                                        display: block;
                                    }
                                    .activityiconcontainer {
                                        width: 52px !important;
                                        height: 52px !important;
                                        align-self: unset !important;
                                        .activityicon {
                                            width: 24px !important;
                                            height: 24px !important;
                                        }
                                    }
                                    .activity-name-area {
                                        align-self: center;
                                        .activitytitle {
                                            .media-body {
                                                small {
                                                    text-transform: uppercase;
                                                    font-size: 10px;
                                                    color: var(--fresk-dm-text-muted, #9594a7);
                                                }
                                                .activityname {
                                                    a {
                                                        font-size: 16px;
                                                        color: var(--fresk-dm-text, #333) !important;
                                                        font-weight: bold;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .activity-completion {
                                        margin-left: auto !important;
                                    }
                                }
                                .description {
                                    .activity-altcontent {
                                        margin-top: 10px;
                                        border-top: 1px solid var(--fresk-dm-border-alpha, rgba(0, 0, 0, .1));
                                        padding-top: 8px;
                                        .description-inner {

                                        }
                                    }
                                    .activity-availability {
                                        font-size: 12px;
                                        margin-top: .5em;
                                    }
                                }
                            }
                            &.modtype_label {
                                .description {
                                    .activity-altcontent {
                                        margin-top: 0;
                                        border-top: none;
                                        padding-top: 0;
                                    }
                                }
                            }
                            &.modtype_subsection {
                                .activity-item {
                                    border: 0 !important;
                                    box-shadow: 0 0 10px 0 rgb(0 0 0 / .1);
                                }
                                [data-for="cmlist"] {
                                    margin-top: 20px !important;
                                }
                            }
                        }
                    }
                }
            }
            .modal-footer {
                display: none;
            }
        }
    }
}

body.format-fresk {
    .modal.show{
        .modal-dialog.modalfresk_section{
            .modal-body{
                @media (max-width: 565px){
                #modal-header{
                    flex-flow: column !important;
                    height: fit-content;
                        .modal-img-top{
                            min-height: 150px !important;
                            width: 100% !important;
                        }
                        .modal-header-content{
                            min-height: 0 !important;
                            width: 100% !important;
                        }
                    }
                }
            }
        }
    }
}

.activity-item .activity-completion button.btn.dropdown-toggle {
    &:hover,
    &:focus {
        border-color: var(--fresk-secondary-ui) !important;
        color: var(--fresk-secondary-text) !important;
        background-color: transparent !important;
    }
}

@media (max-width: 500px) {
    body.format-fresk {
        .modal.show{
            .modal-body{
                .modal-content{
                    [data-for="cmlist"] {
                        .activity{
                            display: flex;
                            flex-direction: column;
                            .activityimage-container{
                                width: 100% !important;
                                .activityimage{
                                    border-radius: 8px 8px 0 0 !important;
                                }
                            }
                        }
                    }
                }
            }
            .modal-dialog.modalfresk_section{
                .modal-body{
                    .noimage{
                        .activity-item{
                            .activity-grid.d-flex{
                                display: flex !important;
                                flex-direction: column !important;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 850px) and (min-width: 501px) {
    body.format-fresk {
        [data-for="cmlist"] {
            .activityimage-container{
                max-width: 30%;
            }
            .noimage{
                max-width: 70%;
                overflow-x: auto;
            }
        }
    }
}

body.format-fresk {
    .modalfresk_header {
        .close.close_section {
            display: none !important;
        }
        padding-bottom: 10px !important;
    }
}

@include fresk-m503 {
    body.format-fresk .modal .modal-dialog.modalfresk_section {
        --bs-modal-bg: var(--fresk-dm-surface, #fff);
    }
}