#tourDialog {
    border: none;
    border-radius: 10px;
    padding: 2rem 4rem 3rem;
    min-width: max(50%, 750px);

    &[open] {
        display: flex;
        flex-direction: column;
    }

    .header {
        position: sticky;
        top: 0;
        background-color: var(--contentContainerBackground);
        align-items: center;
        margin: 0 -1rem 0 0;

        .closeDialogButton {
            color: black;
            font-size: 2rem;

            &:hover {
                color: var(--matteRed);
            }

            &:focus {
                outline: none;
            }
        }

        #resizeSlideButton {
            .minimizeIcon {
                width: 0.8rem;
                height: 0.8rem;
                border-top: solid 0.4rem var(--bodyBackground);
                border-left: solid 0.4rem transparent;
                border-right: solid 0.4rem transparent;
                border-bottom: solid 0.4rem transparent;

            }

            &:hover .minimizeIcon {
                border-top: solid 0.4rem var(--matteRed);
            }
        }
    }

    .body {
        overflow-y: auto;
        scrollbar-color: var(--lightgrey) var(--contentContainerBackground);

        #tourImageContainer {
            &.loading {
                height: 300px;
                background: linear-gradient(70deg, var(--contentContainerBackground), var(--lightergrey), var(--contentContainerBackground), var(--lightergrey));
                background-size: 400%;
                animation: color-shift 2s infinite;
            }

            img {
                min-width: 0;
                max-width: 100%;
                margin-bottom: 0.5rem;

                &[src=""] {
                    display: none;
                }
            }
        }

        p {
            font-family: sans-serif;
            font-weight: 200;

            .symbol {
                padding: 0.1rem 0.5rem;
                background-color: var(--lightergrey);
            }

            .icon {
                display: inline-block;
            }

            .noteIcon {
                width: 0.8rem;
                height: 0.8rem;
            }
        }
    }

    .divider {
        height: 1rem;
    }

    #tourButtonContainer {
        display: flex;
        align-items: end;
        flex-grow: 1;
        margin-left: -1rem;
        margin-right: -1rem;

        .navigationButton {
            color: black;
            font-size: 1.5rem;
            border: none;
            background-color: none;
            border-radius: 50%;
            padding: 0.25rem;
            width: 2.25rem;

            &:hover {
                color: var(--matteRed);
            }
        }
    }
}

#minimizedTourIcon {
    display: none;
    position: absolute;
    bottom: var(--dialogBottom);
    right: var(--dialogRight);
    width: var(--dialogWidth);
    height: var(--dialogHeight);
    border-radius: 10px;
    border: solid 1px var(--lightgrey);
    padding: 1rem 1rem;
    background-color: var(--contentContainerBackground);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.16);
    z-index: 100;

    strong {
        pointer-events: none;
    }

    &.minimized {
        display: flex;
        position: fixed;
        align-items: center;
        justify-content: center;
        border-radius: 25%;
        right: 1rem;
        bottom: 1rem;
        width: 75px;
        height: 75px;
        animation: minimizeAnimation 0.4s ease-out;
    }
}

@media screen and (max-width: 900px) {
    #tourDialog {
        min-width: 90%;


        img {
            max-height: 450px;
        }
    }
}

@media screen and (max-width: 750px) {
    #tourDialog {
        padding: 2rem 2rem 3rem;
    }
}

@media screen and (max-width: 620px) {
    #tourDialog {
        padding: 2rem 0.5rem 3rem;
        border-radius: 0;

        .header {
            margin: 0;
        }

        #tourButtonContainer {
            margin: 0 1rem;
        }
    }
}


@keyframes minimizeAnimation {
    0% {
        bottom: var(--dialogBottom);
        right: var(--dialogRight);
        width: var(--dialogWidth);
        height: var(--dialogHeight);
    }

    50% {}

    100% {

        right: 1rem;
        bottom: 1rem;
        width: 70px;
        height: 70px;
    }
}

@keyframes color-shift {
    0%{background-position:100% 50%}
    100%{background-position:0% 50%}
}