.product {
    overflow: hidden;
}

.modal-container .modal-content .upload-art-container form .student-art-left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    padding: 1.875rem 1rem 0;
    margin: 0;
    border: none
}

.modal-container .modal-content .upload-art-container form .student-art-left > div {
    margin: 0;
    padding: 0
}

.modal-container .modal-content .upload-art-container form .student-art-left .art-container {
    margin: 1.5rem 1.5rem 0 1.5rem;
    padding: 0;
    background: none
}

.modal-container .modal-content .upload-art-container form .student-art-left .art-container img {
    width: 100%
}

.modal-container .modal-content .upload-art-container form .student-art-left .drag-container img {
    width: 100%
}

.modal-container .modal-content .upload-art-container form .student-art-left .remove-art {
    display: block;
    margin-bottom: 1.875rem;
    color: #ea4f3d
}

.modal-container .modal-content .upload-art-container form .student-art-left .h-4-m {
    margin-bottom: 1rem
}

.modal-container .modal-content .upload-art-container form .student-art-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    width: 100%;
    padding: 1.875rem 1rem 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    .modal-container .modal-content .upload-art-container form .student-art-right .section-header {
        margin-bottom: 1.875rem
    }

    .modal-container .modal-content .upload-art-container form .student-art-right .section-sub-header {
        margin-bottom: 1rem;
        color: rgba(9, 33, 44, 0.5)
    }

    .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container {
            margin-right: 0.5rem;
            margin-bottom: 1rem;
            padding: 0.5rem;
            border: 1px solid rgba(9, 33, 44, 0.05);
            border-radius: 4px;
            text-align: center;
            cursor: pointer
        }

            .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container:last-child {
                margin-right: 0
            }

            .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container.selected {
                border-color: #31a8df;
                background: rgba(49, 168, 223, 0.1);
                color: #31a8df
            }

                .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container.selected .user-profile {
                    border-color: #31a8df
                }

            .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container .user-profile {
                width: 54px;
                height: 54px;
                margin-bottom: 0.5rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container.add-new {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                padding: 0.25rem;
                border: 1px dashed rgba(9, 33, 44, 0.05)
            }

                .modal-container .modal-content .upload-art-container form .student-art-right .user-profile-list .user-profile-container.add-new div {
                    border-radius: 2px;
                    padding: 1.5rem;
                    background: rgba(9, 33, 44, 0.05);
                    font-size: 2.25rem;
                    color: rgba(9, 33, 44, 0.25)
                }

    .modal-container .modal-content .upload-art-container form .student-art-right .optional-details {
        margin-bottom: 1rem;
        font-size: 16px
    }

    .modal-container .modal-content .upload-art-container form .student-art-right .field-group {
        margin-bottom: 1rem;
        text-align: left
    }

        .modal-container .modal-content .upload-art-container form .student-art-right .field-group label {
            display: block;
            margin-bottom: 0.25rem;
            color: rgba(9, 33, 44, 0.5)
        }

    .modal-container .modal-content .upload-art-container form .student-art-right .button-actions {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

        .modal-container .modal-content .upload-art-container form .student-art-right .button-actions input {
            margin-right: 0.5rem
        }

        .modal-container .modal-content .upload-art-container form .student-art-right .button-actions span {
            cursor: pointer
        }

    .modal-container .modal-content .upload-art-container form .student-art-right .record-audio {
        display: none
    }


#fullscreen {
    max-height: -webkit-fill-available;
    width: 100%;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    position: fixed;
    top: 0px;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow-x: hidden;
}

    #fullscreen .modal-content {
        height: 100%
    }

    #fullscreen .modal-header {
        height: 70px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        background-color: rgba(9, 33, 44, 0.05);
        color: rgba(9, 33, 44, 0.75);
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto
    }

        #fullscreen .modal-header .modal-header-close {
            width: 10%;
            padding: 0 1rem
        }

        #fullscreen .modal-header .modal-header-spacing {
            width: 80%;
            text-align: center
        }

        #fullscreen .modal-header .modal-header-logo {
            padding-left: 1rem;
            width: 10%
        }

        #fullscreen .modal-header .fa fa-times {
            font-size: 22px
        }

    #fullscreen #continue-shopping {
        width: 100%;
        height: 21px;
        padding-bottom: 10px
    }

        #fullscreen #continue-shopping .sticky-buttons {
            position: relative !important
        }

    #fullscreen .cart-totals {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 30px;
        width: 100%
    }

        #fullscreen .cart-totals div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            margin-right: 1rem
        }

    #fullscreen .cart-container {
        overflow-y: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    #fullscreen .fullscreen-modal-content {
        overflow-y: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

        #fullscreen .fullscreen-modal-content .art-actions .art-action {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 0.75rem 1rem;
            margin: 1rem;
            border: 1px solid rgba(9, 33, 44, 0.15);
            border-radius: 4px;
            cursor: pointer
        }

            #fullscreen .fullscreen-modal-content .art-actions .art-action i {
                font-size: 2.125rem;
                color: rgba(9, 33, 44, 0.25);
                margin-right: 1rem
            }

            #fullscreen .fullscreen-modal-content .art-actions .art-action .type-caption {
                color: rgba(9, 33, 44, 0.5)
            }

        #fullscreen .fullscreen-modal-content .share-art-container .back-arrow {
            position: absolute;
            left: 1.5rem;
            color: rgba(9, 33, 44, 0.2)
        }

    #fullscreen .shopping-cart-buttons {
        width: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 101px;
        flex: 0 0 101px;
        background: white
    }

    #fullscreen .flex-bottom {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        width: 100%
    }

    #fullscreen .order-code-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

        #fullscreen .order-code-container .form-container {
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center
        }

        #fullscreen .order-code-container .field-group-horizontal {
            width: 100%
        }

            #fullscreen .order-code-container .field-group-horizontal button {
                height: 100%
            }

        #fullscreen .order-code-container .search-results-container {
            background: white
        }

            #fullscreen .order-code-container .search-results-container .result-container {
                border: solid 1px rgba(9, 33, 44, 0.1);
                border-radius: 10px
            }

    #fullscreen .form-container {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    #fullscreen .login-form {
        width: 100%;
        padding: 1.5rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }

        #fullscreen .login-form form {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center
        }

            #fullscreen .login-form form .field-group {
                width: 100%
            }

            #fullscreen .login-form form div {
                text-align: center;
                margin-bottom: 1rem
            }

            #fullscreen .login-form form button {
                width: 100%
            }

            #fullscreen .login-form form .back-arrow {
                position: absolute;
                top: 0;
                text-align: left
            }

            #fullscreen .login-form form input {
                margin-bottom: 0.5rem
            }

    #fullscreen .report-problem-link {
        padding-bottom: 1.5rem
    }


.found-results #help-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .found-results #help-section .student-info {
        text-align: center;
        width: 70%;
        font-size: 0.75rem
    }

    .found-results #help-section button {
        font-size: 0.75rem;
        padding: 0.5rem
    }

.found-results .mobile-search-result {
    border-radius: 10px;
    margin-bottom: 1rem
}

    .found-results .mobile-search-result .result-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        display: -webkit-flex;
        padding: 1rem;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .found-results .mobile-search-result .result-container .result-image {
            width: 100px;
            text-align: center
        }

            .found-results .mobile-search-result .result-container .result-image img {
                max-width: 100px;
                max-height: 75px
            }

        .found-results .mobile-search-result .result-container .student-info {
            text-align: left;
            margin-left: 0.75rem;
            width: calc(100% - 134px)
        }

            .found-results .mobile-search-result .result-container .student-info #student-name {
                font-size: 1rem;
                font-weight: 600
            }

            .found-results .mobile-search-result .result-container .student-info .type-body {
                color: rgba(9, 33, 44, 0.5);
                font-size: 0.875rem
            }

        .found-results .mobile-search-result .result-container .add-button button {
            padding: 0.25rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

.modal-container .modal-content .search-results-container .found-results {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-item-align: start;
    align-self: flex-start;
    width: 100%;
    height: 100%
}

    .modal-container .modal-content .search-results-container .found-results swiper .swiper-pagination {
        bottom: -4px
    }

    .modal-container .modal-content .search-results-container .found-results .result-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        background: white;
        margin-bottom: 1rem;
        padding: 1rem
    }

        .modal-container .modal-content .search-results-container .found-results .result-container div {
            margin: auto
        }

        .modal-container .modal-content .search-results-container .found-results .result-container img {
            border-radius: 4px;
            height: 128px;
            margin: auto;
            width: auto
        }

        .modal-container .modal-content .search-results-container .found-results .result-container .student-info {
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
            margin: auto
        }

            .modal-container .modal-content .search-results-container .found-results .result-container .student-info .h-4 {
                text-align: center
            }

            .modal-container .modal-content .search-results-container .found-results .result-container .student-info .type-body {
                color: rgba(9, 33, 44, 0.5)
            }

        .modal-container .modal-content .search-results-container .found-results .result-container .art-action {
            text-align: center
        }

            .modal-container .modal-content .search-results-container .found-results .result-container .art-action .artwork-added {
                color: #00c189
            }



@media only screen and (min-width: 768px) {
    .modal-container .modal-content .upload-art-container form .student-art-left {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0;
        margin-right: 1.5rem;
        border: 1px dashed rgba(9, 33, 44, 0.15);
        border-radius: 8px
    }

        .modal-container .modal-content .upload-art-container form .student-art-left.edit-art {
            border-color: #31a8df
        }

        .modal-container .modal-content .upload-art-container form .student-art-left > div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-flow: column;
            flex-flow: column;
            margin: 0.5rem;
            padding: 1rem
        }

        .modal-container .modal-content .upload-art-container form .student-art-left .drag-container {
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background: rgba(9, 33, 44, 0.03)
        }

            .modal-container .modal-content .upload-art-container form .student-art-left .drag-container .image-container {
                margin-bottom: 1rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .drag-container .drag-text {
                margin-top: 0;
                margin-bottom: 1rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .drag-container .button-container {
                margin-bottom: 1rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .drag-container .photo-tips {
                margin-bottom: 4rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .drag-container .image-types {
                margin: 0;
                color: rgba(9, 33, 44, 0.5)
            }

        .modal-container .modal-content .upload-art-container form .student-art-left .art-container {
            background: rgba(49, 168, 223, 0.07)
        }

            .modal-container .modal-content .upload-art-container form .student-art-left .art-container .image-container {
                margin-bottom: 1.5rem
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .art-container .type-body {
                margin: 0
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .art-container .type-caption {
                margin-top: 0;
                margin-bottom: 1.5rem;
                color: rgba(9, 33, 44, 0.5)
            }

            .modal-container .modal-content .upload-art-container form .student-art-left .art-container input {
                margin-right: 0.5rem
            }

                .modal-container .modal-content .upload-art-container form .student-art-left .art-container input:last-child {
                    margin-right: 0
                }

    .modal-container .modal-content .upload-art-container form .student-art-right {
        width: 50%;
        padding: 0
    }

    .modal-container .modal-content .upload-art-container form .student-art-right .record-audio {
        margin-bottom: 1rem
    }

    .modal-container .modal-content .upload-art-container form .student-art-right .button-actions button {
        margin-right: 0.5rem
    }

    #fullscreen {
        max-height: 100vh;
        max-height: -webkit-fill-available;
        min-height: unset;
        height: auto;
        width: auto
    }

    .found-results .mobile-search-result .result-container .student-info {
        width: calc(100% - 235px)
    }

    .found-results .mobile-search-result .result-container .add-button {
        width: 125px
    }

    .found-results .mobile-search-result .result-container .add-button button {
        width: 100%;
        height: auto;
        padding: 0.5rem
    }

    .modal-container .modal-content .search-results-container .found-results {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        -ms-flex-item-align: start;
        align-self: flex-start;
        width: 100%;
        height: 100%
    }

        .modal-container .modal-content .search-results-container .found-results .result-container {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-flow: row;
            flex-flow: row;
            background: white;
            margin-bottom: 1rem;
            padding: 0.5rem;
            border-radius: 10px
        }

            .modal-container .modal-content .search-results-container .found-results .result-container > div {
                margin-right: 1rem
            }

                .modal-container .modal-content .search-results-container .found-results .result-container > div:last-child {
                    margin-right: 0
                }

            .modal-container .modal-content .search-results-container .found-results .result-container img {
                border-radius: 4px
            }

            .modal-container .modal-content .search-results-container .found-results .result-container .student-info {
                -webkit-box-flex: 1;
                -ms-flex-positive: 1;
                flex-grow: 1
            }

                .modal-container .modal-content .search-results-container .found-results .result-container .student-info .h-4 {
                    margin-bottom: 0
                }

                .modal-container .modal-content .search-results-container .found-results .result-container .student-info .type-body {
                    color: rgba(9, 33, 44, 0.5)
                }

            .modal-container .modal-content .search-results-container .found-results .result-container .art-action {
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

                .modal-container .modal-content .search-results-container .found-results .result-container .art-action input {
                    margin-top: 0.5rem;
                    margin-right: 0.5rem
                }
}

.note-bar-red {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0.625rem;
    color: white;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #ea4f3d;
    text-align: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    color: white;
    line-height: 1.5rem;
}