/* PROMPT/GENERATE PAGE - OLD FOR AB TEST */

        .generate-canvas-settings-container.old {
            background-color: white;
        }

        #select-model-widget-between-wrapper {
            position: relative;
            margin-top: min(175px, 6vw);
        }

        #select-model-widget-between-wrapper > div:first-child, #old-advanced-settings > div:first-child {
            background: white;
            width: calc(100% + 30px);
            height: calc(100% + 20px);
            position: absolute;
            top: -15px;
            left: -15px;
            border-radius: 10px;
            z-index: -1;
            display: none;
        }

        #select-model-widget-between-wrapper #select-model-widget-between-container {
            margin-bottom: 20px;
        }

        #select-model-widget-between-wrapper #select-model-widget-between-container.old {
            max-width: 100%;
            width: calc(100vw - 60px - 15px);
        }

        #negative-description-mobile {
            font-size: 16px;
        }

        #old-random-prompt-btn {
            height: 38px;
            margin: auto 6px;
            overflow: hidden;
            border-radius: 50px;
            min-width: 38px;
            position: relative;
            cursor: pointer;
            box-shadow: none;
            background: white;
        }

        #old-random-prompt-btn:hover {
            background-color: #e7e7e7 !important;
        }

        #old-random-prompt-btn > img {
            position: absolute;
            height: 35px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 5px;
            border-radius: 30px;
        }

        #upscale-prompt-form .upscale-form-input.old {
            padding: 15px 22px 15px 5px;
        }

        #old-advanced-settings {
            margin-top: 30px;
            cursor: pointer;
            position: relative;
        }

        .old-advanced-title {
            padding-bottom: 10px;
            border-bottom: 1px solid #DEDEDE;
        }

        .old-advanced-title > h3 {
            color: #3C3C3C;
            font-size: 12px;
            font-weight: 400;
            margin: 0;
            line-height: 1.15;
        }

        #generate-old-settings-arrow {
            margin-left: 7px;
            transition: transform 0.35s ease;
        }

        #old-advanced-settings > div:last-child {
            display: none;;
        }

        .old-advanced-settings-container {
            display: flex;
            gap: 30px;
            padding-top: 15px;
        }

        .old-advanced-settings-container .generate-settings-inner-smaller-container {
            flex: 1;
        }

        .generate-canvas-limiter .generate-creation-area-wrapper {
            padding-top: 60px;
        }

        #generate-inbetween-section.old {
            height: 7vw;
            max-height: 120px;
        }

        #generate-error-popup.old {
            left: 50%;
        }

        @media screen and (max-width: 767px) {
            #select-model-widget-between-wrapper {
                margin-top: 0px;
            }

            #select-model-widget-between-wrapper #select-model-widget-between-container.old {
                max-width: 100%;
                width: calc(100vw - 4vw - 15px);
            }

            #old-advanced-settings {
                display: none;
            }

            .old-advanced-settings-container {
                flex-direction: column;
            }

            #old-random-prompt-btn {
                display: none;
            }

            #generate-inbetween-section.old {
                height: 25vw;
                max-height: unset;
            }
        }


        /**************************
        ////      OLD TUTORIAL   ////
        **************************/
        
        #old-tutorial-background {
            position: fixed;
            background: #000000b2;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 2;
            display: none;
        }

        #old-tutorial-background .upload-model-popup-container {
            max-width: 780px;
            max-height: min(712px, 90vh);
            height: unset;
        }

        #old-tutorial-background .upload-model-section > div:first-child {
            overflow: hidden;
        }

        #old-tutorial-background .upload-model-section > div:first-child > video {
            height: 100%;
            object-fit: cover;
            width: 100%;
            border-radius: 10px;
            object-position: center 20%;
            clip-path: inset(1px 1px);
        }

        .old-tutorial-text-container {
            padding-top: 30px;
            flex: 1;
            justify-content: space-around;
            display: flex;
            flex-direction: column;
        }

        .old-tutorial-text-container > p {
            max-width: 500px;
            text-align: center;
            margin: 0 auto;
            line-height: 1.25;
            padding-top: 10px;
            color: black;
        }

        #old-tutorial-background .upload-model-section > video {
            width: 100%;
            object-fit: contain;
            clip-path: inset(1px 1px);
        }

        .old-tutorial-reference-wrapper {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .old-tutorial-reference-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .old-tutorial-reference-title > img {
            width: 45px;
        }

        .old-tutorial-reference-title > h3 {
            font-size: 20px;
            margin: 0;
            line-height: 1;
        }

        .old-tutorial-reference-wrapper > p {
            text-align: center;
            color: black;
            margin: 0;
            line-height: 1.15;
            padding-bottom: 10px;
            padding-top: 5px;
        }

        .old-tutorial-reference-container {
            display: flex;
            width: 100%;
            overflow: hidden;
            justify-content: space-between;
            padding: 0 10%;
        }

        .old-tutorial-reference-container > img {
            width: 22%;
            aspect-ratio: 1;
            object-fit: contain;
            border-radius: 5px;
        }

        #old-tutorial-background .upload-model-section > img {
            width: 100%;
            object-fit: contain;
            border-radius: 10px;
        }

        #old-tutorial-back-btn {
            border: 2px solid #dedede;
        }

        #old-tutorial-back-btn:hover {
            background: #F5F5F5;
        }

        #old-tutorial-continue-btn {
            color: white;
            background: black;
        }

        #old-tutorial-continue-btn:hover {
            opacity: 0.85;
        }

        .old-tutorial-dots-container {
            display: flex;
            padding-top: 15px;
            justify-content: center;
            gap: 10px;
        }

        .old-tutorial-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #DEDEDE;
            cursor: pointer;
            transition: 0.15s all ease-in-out;
        }

        .old-tutorial-dot.active, .old-tutorial-dot:hover {
            background: #f99300;
        }

        #old-tutorial-background .upload-model-popup-container.dark {
            background: black;
        }

        .upload-model-popup-container.dark .upload-model-section .upload-model-step-title, .upload-model-popup-container.dark .old-tutorial-text-container > p {
            color: white;
        }

        #old-tutorial-background .upload-model-button-container button {
            transition: 0.15s opacity ease-in-out;
        }

        .upload-model-popup-container.dark #old-tutorial-back-btn {
            border-color: #ABABAB;
            color: #DDDDDD;
            background-color: transparent;
        }

        .upload-model-popup-container.dark #old-tutorial-back-btn:hover {
            background-color: #161616;
        }

        .upload-model-popup-container.dark #old-tutorial-continue-btn {
            color: black;
            background: white;
        }

        /**************************
        ////      OLD TUTORIAL   ////
        **************************/

        #free-model-popup-background {
            position: fixed;
            background: #000000b2;
            width: 100%;
            height: 100%;
            top: 0;
            z-index: 2;
            display: none;
        }

        #free-model-popup-background .upload-model-popup-container {
            max-width: 413px;
            max-height: min(712px, 90vh);
            height: unset;
            padding: 0 0 20px;
        }

        #free-model-section p {
            text-align: center;
            line-height: 1.25;
            color: black;
            max-width: 300px;
            margin: 0 auto;
            padding-top: 30px;
            padding-bottom: 15%;
        }

        #free-model-back-btn {
            border: 2px solid #dedede;
        }

        #free-model-back-btn:hover {
            background: #F5F5F5;
        }

        #free-model-continue-btn {
            color: white;
            background: black;
        }

        #free-model-continue-btn:hover {
            opacity: 0.85;
        }

        .free-model-close-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 45px;
            padding: 15px;
            display: inline-flex;
            cursor: pointer;
        }




/* UPLOAD MODEL POPUP */

	#upload-model-background .upload-model-section {
		opacity: 0;
		transition: 0.15s opacity linear;
	}

	#upload-model-background .upload-model-section.active {
		opacity: 1;
	}

/* PROMPT/GENERATE TUTORIAL */

.page-tutorial-widget-arrow {
	border-left-style: solid;
	border-bottom-style: solid;
	border-right-style: solid;
}