/*==========================================================
    ITSY CSS - LOGICALLY GROUPED

    This pass reorganizes the existing CSS into labeled groups.
    No selector declarations or property values were intentionally
    changed in this pass.

    IMPORTANT:
    CSS cascade order can matter when different selectors overlap.
    Same-named variants remain in their original relative order
    within each logical group.
==========================================================*/


/*==========================================================
    ROOT / GLOBAL
==========================================================*/

:root {

        /*------------------------------------------------------
            Brand
        ------------------------------------------------------*/

        --itsy-navy: rgb(8,33,78);
        --itsy-orange: rgb(255,106,0);
        --itsy-orange-light: rgb(255,180,120);
        --itsy-orange-lighter: rgb(255,220,190);
        --itsy-orange-pale: rgb(255,240,225);
        --itsy-orange-whisper: rgb(255,248,242);


        /*------------------------------------------------------
            Backgrounds
        ------------------------------------------------------*/

        --bg: #FCFCFB;
        --bg-panel: #FFFFFF;
        --bg-soft: #F8F9FB;
        --bg-hover: #F3F5F8;


        /*------------------------------------------------------
            Text
        ------------------------------------------------------*/

        --text: #223041;
        --text-light: #6D7580;
        --text-faint: #A5ACB8;


        /*------------------------------------------------------
            Borders
        ------------------------------------------------------*/

        --line: rgba(8,33,78,.08);
        --line-hover: rgba(8,33,78,.14);


        /*------------------------------------------------------
            Shadows
        ------------------------------------------------------*/

        --shadow-xs: 0 1px 2px rgba(8,33,78,.03);
        --shadow-sm: 0 4px 16px rgba(8,33,78,.05);
        --shadow-md: 0 10px 28px rgba(8,33,78,.08);


        /*------------------------------------------------------
            Radius
        ------------------------------------------------------*/

        --radius: 18px;
        --radius-small: 12px;
        --radius-pill: 999px;
    }

/*==========================================================
    SCROLLBARS
==========================================================*/

* {
	scrollbar-width: thin;
	scrollbar-color: #FF6A00 #FFF2E8;
}

*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-track {
	background: #FFF2E8;
}

*::-webkit-scrollbar-thumb {
	background: #FF6A00;
	border-radius: 10px;
	border: 2px solid #FFF2E8;
}

*::-webkit-scrollbar-thumb:hover {
	background: #F57C00;
}

*::-webkit-scrollbar-corner {
	background: #FFF2E8;
}


/*==========================================================
    TYPOGRAPHY / LINKS
==========================================================*/

span {
        font-family: Quicksand,sans-serif;
        font-weight: 500;
        color: var(--itsy-navy);
    }

a {
        color: var(--itsy-navy);
        text-decoration: none;
        transition: .18s;
    }

a:hover {
        color: var(--itsy-orange);
    }

.title_bar {
        font-size: 16px;
        font-weight: bold;

        font-family: Quicksand,sans-serif;

        color: var(--itsy-navy);
    }

#itsy_info_bar {
        position: fixed;

        top: -60px;
        left: 50%;

        transform: translateX(-50%);

        z-index: 99999;

        min-width: 300px;
        max-width: 700px;

        padding: 14px 22px;

        background: #FFFFFF;
        color: var(--itsy-orange);

        border: 1px solid #E5EAF2;
        border-radius: 0 0 14px 14px;

        font-family: Quicksand,sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-align: center;

        box-shadow:
            0 12px 32px rgba(0,0,0,.12);

        opacity: 0;
        pointer-events: none;

        transition:
            top .25s ease,
            opacity .25s ease;
    }

#itsy_info_bar.show {
        top: 0;
        opacity: 1;
    }

#itsy_info_bar i {
        color: var(--itsy-orange);
        margin-right: 10px;
    }

.floating_pill {
        padding: 7px 16px;
        border-radius: var(--radius-small);
        background: #FF6A00;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: bold;
        white-space: nowrap;
        box-shadow:
            0 1px 2px rgba(0,0,0,.18),
            0 3px 10px rgba(0,0,0,.12);
    }

.floating_pill_hover {
        cursor: pointer;
        transition:
            background .2s ease,
            transform .2s ease,
            box-shadow .2s ease;
    }

.floating_pill_hover:hover {
        background: #E85F00;
        transform: translateY(-1px);
        box-shadow:
            0 2px 4px rgba(0,0,0,.18),
            0 5px 14px rgba(0,0,0,.14);
    }

.orange {
	color: #FF6A00;
}

.orange_background {
        background: var(--itsy-orange-pale);
    }

.text_faint {
        color: var(--text-faint);
    }

.gap10 {
        gap: 10px;
    }

.gap20 {
        gap: 20px;
    }

h3 {
		margin: 20px 0 10px 0;
		font-size: 24px;
	}

p {
		margin: 0 0 5px 0;
		font-size: 16px;
	}

.itsy_description {
		flex: 1 1 0;
		width: 100%;
		height: 100%;
		min-height: 0;

		resize: none;
		box-sizing: border-box;
	}

.page {
		display: grid;
		grid-template-rows: 31px 1fr;
		width: 100%;
		height: 100%;
	}

.top {
		width: 100%;
		border-bottom: 1px solid #E2E8F0;
	}

.base {
		width: 100%;
		min-height: 0;
		overflow: hidden;
	}

.circle-btn:active {
			transform: translateY(0);
		}

#itsy_page_fade {
		position: fixed;
		inset: 0;
		z-index: 2147483647;
		background: #000000;
		opacity: 1;
		pointer-events: none;
		transition: opacity 0.6s ease;
	}

#itsy_page_fade.itsy_visible {
		opacity: 0;
	}

#itsy_page_fade.itsy_leaving {
		opacity: 1;
		pointer-events: all;
	}

.little_title{
        font-size:28px;
        font-weight:600;
        line-height:1.2;
        color:#17375E;
    }

.no_title{
        font-size:32px;
        font-weight:600;
        line-height:1.2;
        color:#17375E;
    }

body.fade_out{
        opacity:0;
    }

/* ===== ITSY MESSAGE ===== */

.itsy_message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 12px 55px;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid rgba(16, 45, 82, .12);
	box-shadow: 0 12px 35px rgba(16, 45, 82, .16);
	color: #102D52;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .5px;
	text-align: center;
	opacity: 0;
	transform: translateY(-100%);
	pointer-events: none;
	cursor: pointer;
	z-index: 10000;
	transition: transform .35s ease, opacity .35s ease;
}

	.itsy_message.show {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.itsy_message i {
		margin-right: 9px;
		color: #FF6A00;
		font-size: 12px;
	}

@media (max-width: 600px) {

	.itsy_message {
		padding: 11px 20px;
		font-size: 13px;
		line-height: 1.45;
	}
}



/*==========================================================
    BUTTONS / CONTROLS
==========================================================*/

.button_soft {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        padding: 8px 16px;

        font-family: Quicksand,sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;

        text-decoration: none;
        white-space: nowrap;

        color: var(--itsy-navy);

        background:
            linear-gradient(
                180deg,
                #FFFFFF 0%,
                #FAFBFD 100%
            );

        border: 1px solid #E2E8F0;
        border-radius: 10px;

        cursor: pointer;
        user-select: none;

        box-shadow:
            0 1px 2px rgba(0,0,0,.04),
            0 4px 12px rgba(0,0,0,.05);

        transition:
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

.button_soft:hover {
        color: var(--itsy-orange);
        border-color: rgba(255,106,0,.35);

        box-shadow:
            0 4px 12px rgba(0,0,0,.07),
            0 0 0 4px rgba(255,106,0,.08);

        transform: translateY(-1px);
    }

.button_soft:active {
        transform: translateY(0);

        box-shadow:
            0 1px 3px rgba(0,0,0,.08),
            inset 0 1px 2px rgba(0,0,0,.05);
    }

.button_soft:disabled {
        opacity: .55;
        cursor: default;
        pointer-events: none;
    }

.button_soft_dummy {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        padding: 8px 10px;

        font-family: Quicksand,sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;

        text-decoration: none;
        white-space: nowrap;

        color: lightslategrey;
        background: #FFFFFF;

        border: 1px solid #E2E8F0;
        border-radius: 10px;

        user-select: none;
        opacity: .7;
    }

.button_orange {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;

        padding: 8px 16px;

        font-family: Quicksand,sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .2px;

        text-decoration: none;
        white-space: nowrap;

        color: #FFFFFF;

        background:
            linear-gradient(
                180deg,
                #FF7A1A 0%,
                #FF6A00 100%
            );

        border: 1px solid #F26400;
        border-radius: 10px;

        cursor: pointer;
        user-select: none;

        box-shadow:
            0 1px 2px rgba(0,0,0,.05),
            0 4px 12px rgba(255,106,0,.18);

        transition:
            background .18s ease,
            border-color .18s ease,
            color .18s ease,
            transform .18s ease,
            box-shadow .18s ease;
    }

.button_orange:hover {
        color: #FFFFFF;

        background:
            linear-gradient(
                180deg,
                #FF852E 0%,
                #FF7412 100%
            );

        border-color: #FF6A00;

        box-shadow:
            0 4px 12px rgba(255,106,0,.25),
            0 0 0 4px rgba(255,106,0,.10);

        transform: translateY(-1px);
    }

.button_orange_active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 16px;
	font-family: Quicksand, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	text-decoration: none;
	white-space: nowrap;
	color: #FFFFFF;
	background: linear-gradient( 180deg, #FF852E 0%, #FF7412 100% );
	border: 1px solid #F26400;
	border-radius: 10px;
	outline: 1px solid #FF6A00;
	outline-offset: 2px;
	cursor: pointer;
	user-select: none;
}



.button_orange:active {
        transform: translateY(0);
        background: #F26400;

        box-shadow:
            0 1px 3px rgba(0,0,0,.10),
            inset 0 1px 2px rgba(0,0,0,.08);
    }

.button_orange:disabled {
        opacity: .55;
        cursor: default;
        pointer-events: none;
    }

.button_orange_top {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-width: 90px;
        padding: 6px 15px;

        font-family: Quicksand,sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .2px;

        text-decoration: none;
        white-space: nowrap;

        border: none;
        border-right: 2px solid #E85F00;

        color: #FFFFFF;
        background: #FF6A00;

        cursor: pointer;
        user-select: none;
    }

.button_orange_top:hover {
        color: #FFFFFF;

        background:
            linear-gradient(
                180deg,
                #E85F00 0%,
                #C94F00 100%
            );
    }

.button_move {
	font-family: Quicksand,sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	text-decoration: none;
	white-space: nowrap;
	color: var(--itsy-navy);
	background: linear-gradient( 180deg, #FFFFFF 0%, #FAFBFD 100% );
	border: 1px solid #E2E8F0;
	border-radius: 10px;
	cursor: move;
	user-select: none;
	display: table;
	padding: 5px 10px;
}

.go_to_ai {
		position: absolute;

		left: 50%;
		top: 50%;

		transform: translate(-50%, -50%);

		z-index: 100;
		margin: 0;
	}

.version_button {
		flex: 0 0 auto;
	}

.button_version {
        width: 120px;
        margin: 3px; 
		display: inline-flex;
		justify-content: left;
		gap: 6px;
		padding: 5px 12px;
		font-family: Quicksand,sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: .2px;
		text-decoration: none;
		white-space: nowrap;
		color: var(--itsy-navy);
		background: linear-gradient(180deg,#FFFFFF 0%,#FAFBFD 100%);
		border: 1px solid #E2E8F0;
		border-radius: 10px;
		cursor: pointer;
		user-select: none;
        box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 2px 6px rgba(0,0,0,.025);
        transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
	}

.button_version:hover {
			color: var(--itsy-orange);
			border-color: rgba(255,106,0,.35);
			box-shadow: 0 4px 12px rgba(0,0,0,.07), 0 0 0 4px rgba(255,106,0,.08);
			transform: translateY(-1px);
		}

.account_button {
		width: 100%;
		height: 48px;
		margin-top: 8px;
		border: 0;
		border-radius: 10px;
		background: #FF6A00;
		color: #FFFFFF;
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .15s ease, box-shadow .15s ease;
	}

.account_button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(255, 106, 0, .25);
	}

.review_button {
		width: 100%;
		height: 28px;
		margin-top: 0px;
		border: 0;
		border-radius: 10px;
		background: #FF6A00;
		color: #FFFFFF;
		font-family: inherit;
		font-size: 13px;
		font-weight: 700;
		cursor: pointer;
		transition: transform .15s ease, box-shadow .15s ease;
	}

.review_button:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 16px rgba(255, 106, 0, .25);
	}

.delete_circle {

			position:absolute;
			top:6px;
			left:6px;

			width:28px;
			height:28px;
			border-radius:50%;
			border:1px solid #E2B5B5;
			background:linear-gradient(to bottom,#FFF5F5,#FFE3E3);
			display:flex;
			align-items:center;
			justify-content:center;
			cursor:pointer;
			box-shadow:
				0 2px 5px rgba(0,0,0,.08),
				inset 0 1px 0 rgba(255,255,255,.7);
			transition:all .15s ease;
			user-select:none;
			z-index:100;
		}

.delete_circle:hover{
			background:linear-gradient(to bottom,#FFDADA,#FFC3C3);
			transform:translateY(-1px);
			box-shadow:
				0 4px 10px rgba(0,0,0,.12),
				inset 0 1px 0 rgba(255,255,255,.7);
		}

.delete_circle span{
			color:#C94A4A;
			font-size:1.8em;
			line-height:1;
		}

#itsy_confirm_buttons{
			display:flex;
			justify-content:center;
			gap:14px;
			margin-top:28px;
		}

.itsy_confirm_button{
			min-width:120px;
			padding:10px 18px;
			border-radius:9px;
			border:none;
			font-family:Quicksand,sans-serif;
			font-size:14px;
			font-weight:600;
			cursor:pointer;
			transition:.15s;
		}


/*==========================================================
    FORMS / INPUTS
==========================================================*/

input[type=text],
    input[type=password],
    textarea,
    select {
        width: 100%;
        padding: 8px 12px;

        background: #FFFFFF;
        color: var(--text);

        border: 1px solid var(--line);
        border-radius: var(--radius-small);

        font-family: Quicksand,sans-serif;
        font-size: 14px;

        transition: .18s;
        box-sizing: border-box;
    }

textarea {
        resize: vertical;
    }

input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: rgba(255,106,0,.45);
        box-shadow: 0 0 0 4px rgba(255,106,0,.10);
    }

.itsy_checkbox {
        display: flex;
        align-items: center;
        gap: 10px;

        cursor: pointer;
        user-select: none;

        font-family: Quicksand,sans-serif;
        font-size: 14px;

        color: #4F5D6E;
    }

.itsy_checkbox input {
        display: none;
    }

.itsy_checkbox .checkmark {
        width: 20px;
        height: 20px;

        border: 2px solid #D9E2EC;
        border-radius: 6px;

        background: #FFFFFF;

        transition: all .18s ease;

        position: relative;
        flex-shrink: 0;
    }

.itsy_checkbox:hover .checkmark {
        border-color: #5C85B7;
        box-shadow: 0 0 0 4px rgba(92,133,183,.10);
    }

.itsy_checkbox input:checked + .checkmark {
        background: var(--itsy-orange);
        border-color: var(--itsy-orange);
    }

.itsy_checkbox input:checked + .checkmark:after {
        content: "";

        position: absolute;
        left: 6px;
        top: 2px;

        width: 5px;
        height: 10px;

        border: solid #FFFFFF;
        border-width: 0 2px 2px 0;

        transform: rotate(45deg);
    }

.itsy_checkbox input:focus + .checkmark {
        box-shadow: 0 0 0 4px rgba(255,106,0,.18);
    }

.checkbox_text {
        line-height: 1.2;
    }

.itsy_color_picker {
        display: flex;
        align-items: center;
        gap: 12px;

        font-family: Quicksand,sans-serif;
        font-size: 14px;
    }

.itsy_color_picker label {
        min-width: 140px;

        /*
            FIXED TYPO FROM ORIGINAL:

            Original:
                var(--itsy_navy)

            Defined variable:
                var(--itsy-navy)

            CSS custom property names are exact, so the underscore
            version does NOT refer to --itsy-navy.
        */
        color: var(--itsy-navy);

        font-weight: 600;
    }

.itsy_color_picker input[type=color] {
        width: 80px;
        height: 25px;

        border: none;
        padding: 0;

        background: none;

        cursor: pointer;
    }

.itsy_color_picker input[type=color]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

.itsy_color_picker input[type=color]::-webkit-color-swatch {
        border: 1px solid #D6DCE8;
        border-radius: 10px;
    }

.itsy_color_picker input[type=color]::-moz-color-swatch {
        border: 1px solid #D6DCE8;
        border-radius: 10px;
    }

.itsy_color_picker span {
        font-family: Quicksand,sans-serif;
        font-size: 13px;

        /*
            Same --itsy_navy typo existed here.
            Corrected to --itsy-navy.
        */
        color: var(--itsy-navy);
    }

.right_side form {
		flex: 1 1 0;
		min-height: 0;

		display: flex;
		flex-direction: column;

		margin: 0;
	}

.account_form {
		width: 520px;
		flex: 0 0 520px;
		margin: 40px 0;
		padding: 30px;
		box-sizing: border-box;
	}

.subscription_form {
		width: 590px;
		flex: 0 0 590px;
		margin: 40px 0;
		padding: 30px;
		box-sizing: border-box;
	}

.account_field {
		margin-bottom: 20px;
	}

.account_label {
		display: block;
		font-size: 12px;
		font-weight: 700;
		color: #102D52;
		margin: 0 0 7px 4px;
	}

.account_input {
		width: 100%;
		height: 48px;
		box-sizing: border-box;
		border: 1px solid #DDDDDD;
		border-radius: 10px;
		background: #FFFFFF;
		padding: 0 14px;
		font-family: inherit;
		font-size: 15px;
		color: #102D52;
		outline: none;
		transition: border-color .2s ease, box-shadow .2s ease;
	}

.account_input:focus {
		border-color: #FF6A00;
		box-shadow: 0 0 0 3px rgba(255, 106, 0, .10);
	}

.password_holder {
		position: relative;
	}

.password_holder .account_input {
		padding-right: 48px;
	}

.password_eye {
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		border: 0;
		background: transparent;
		color: #102D52;
		font-size: 16px;
		cursor: pointer;
		padding: 5px;
	}

.password_eye:hover {
		color: #FF6A00;
	}

.handle_holder {
		position: relative;
	}

.handle_prefix {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: #999999;
		pointer-events: none;
	}

.handle_holder .account_input {
		padding-left: 83px;
	}

.email_input {
		width: 400px;
		padding: 12px 16px;
		font-family: Quicksand, sans-serif;
		font-size: 22px;
		color: #444;
		border: none;
		outline: none;
		border-radius: 12px;
		background: #F3F6FA;
		box-shadow:
			inset 2px 2px 4px rgba(0,0,0,.06),
			inset -2px -2px 4px rgba(255,255,255,.95);
		transition:
			box-shadow .18s ease,
			background .18s ease;
	}

.email_input:focus {
		background: #F8FAFC;
		box-shadow:
			inset 2px 2px 5px rgba(0,0,0,.08),
			inset -2px -2px 5px rgba(255,255,255,.98);
	}




/*----------------------------------------------------------
    LOGIN
----------------------------------------------------------*/

.login_field {
	margin-bottom: 10px;
}

.login_input {
	width: calc(100% - 32px);
	padding: 12px 16px;
	font-family: Quicksand, sans-serif;
	font-size: 22px;
	color: #444;
	border: none;
	outline: none;
	border-radius: 12px;
	background: #F3F6FA;
	box-shadow:
		inset 2px 2px 4px rgba(0,0,0,.06),
		inset -2px -2px 4px rgba(255,255,255,.95);
	transition:
		box-shadow .18s ease,
		background .18s ease;
}

.login_input:focus {
	background: #F8FAFC;
	box-shadow:
		inset 2px 2px 5px rgba(0,0,0,.08),
		inset -2px -2px 5px rgba(255,255,255,.98);
}

.password_container {
	position: relative;
	display: inline-block;
}

.password_container .login_input {
	width: 400px;
	box-sizing: border-box;
	padding-right: 42px;
	font-size: 22px;
}

.password_toggle {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: #8A97A8;
	font-size: 18px;
	cursor: pointer;
	transition: color .18s ease, transform .18s ease;
	z-index: 2;
}

.password_toggle:hover {
	color: var(--itsy-orange);
	transform: translateY(-50%) scale(1.08);
}

.remember_row {
	display: flex;
	justify-content: center;
	margin: 15px 0;
}

.password_recovery {
	text-align: center;
	margin-top: 20px;
	font-family: Quicksand, sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: var(--itsy-navy);
	cursor: pointer;
	transition:
		color .18s ease,
		transform .18s ease;
}

.password_recovery:hover {
	color: #3D6F9E;
	transform: translateY(-1px);
}

.itsy_popup {
	position: fixed;
	top: 44px;
	left: 50%;
	transform: translateX(-50%) translateY(-15px);
	background: #FFFFFF;
	color: #4F5D6E;
	border: 1px solid #E5EAF2;
	border-radius: 14px;
	padding: 14px 22px;
	font-family: Quicksand,sans-serif;
	font-size: 14px;
	box-shadow:
		0 12px 32px rgba(0,0,0,.12);
	opacity: 0;
	pointer-events: none;
	transition: .25s;
	z-index: 9999;
}

.itsy_popup.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.itsy_popup i {
	color: var(--itsy-orange);
	margin-right: 8px;
}


/*==========================================================
    LAYOUT / CONTAINERS
==========================================================*/

.page_border {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;
        bottom: 0;

        overflow: hidden;

        display: flex;
        flex-direction: column;

        justify-content: center;
        align-items: center;
    }

.horizontal_pen {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: flex-start;
	align-self: flex-start;
	width: fit-content;
	gap: 10px;
}

	.horizontal_pen > div {
		flex: none;
		width: fit-content;
	}

.horizontal_pen_top_menu {
        position: absolute;

        top: 0;
        left: 50%;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        z-index: 100;
    }

.footer {
        position: absolute;

        bottom: 5px;
        left: 50%;

        transform: translateX(-50%);

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 10px;

        z-index: 100;
    }

.vertical_pen {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

.page_border_2 {
		flex: 1;
		min-height: 0;
		margin-top: 20px;
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		text-align: center;
	}

.holder {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: stretch;
}

.left_panel {
	width: 400px;
	flex: 0 0 400px;
}

.right_panel {
	flex: 1 1 auto;
	min-width: 0;
}

.div_scroll {
		flex: 1 1 auto;
		min-height: 0;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
		box-sizing: border-box;
	}

.horizontal_pen_scroll {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 500px));
        gap: 10px;
        align-items: stretch;
        justify-content: start;
    }

.div_scroll {
		width: 90%;
		height: 600px;
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 10px;
		margin-top: 0px;
		padding: 10px; 
	}

.left_panel {
		flex: 0 0 auto;
		width: auto;
		display: flex;
		flex-direction: column;
		min-width: 0;
		min-height: 0;
	}

.right_panel {
		flex: 1 1 0;
		min-width: 0;
		min-height: 0;
		display: flex;
		padding: 0;
		overflow: hidden;
	}

.div_scroll {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
	}

.div_scroll > * {
		max-height: none !important;
		overflow: visible !important;
	}

.grid_24 {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 10px;
		width: 100%;
		align-items: start;
		white-space: nowrap;
	}

.grid_24 > div {
		border-radius: 8px;
		padding: 6px;
		min-height: 0;
		white-space: nowrap;
		min-width: 80px;
	}

.horizontal_pen {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 20px;
		width: 100%;
		box-sizing: border-box;
	}


/*==========================================================
    PANELS / CARDS
==========================================================*/

.itsy_panel {
        background: #FFFFFF;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 24px;
        box-shadow: var(--shadow-xs);
    }


/*==========================================================
    MENUS / NAVIGATION
==========================================================*/

.navy {
        color: var(--itsy-navy);
    }

.menu-wrapper-left {
		position: absolute;
		top: 0px; 
		left: 0px;
		margin: 0px; 
		display: flex;
		gap: 0px; 
		z-index: 10001;
	}

.menu-popup {
		position: fixed;
		top: 32px;
		left: 1px;
		min-width: 300px;
		padding: 10px;
		background: #FF6A00;
		border: 1px solid #E85F00;
		display: none;
		z-index: 999999;
		box-shadow: 0 5px 12px rgba(16, 45, 82, 0.80);
	}

.menu-popup.show {
		display: block;
	}

.menu-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding-left: 15px;
		padding-right: 15px;
		font-family: Quicksand, sans-serif;
		font-size: 14px;
		font-weight: 600;
		color: #FFFFFF;
		cursor: pointer;
		white-space: nowrap;
		border-left: none;
		border-right: none;
	}

.menu-item:hover {
		background: #FFE8D6;
		color: #FF6A00;
	}

.menu-wrapper {
			position: fixed;
			top: 10px;
			left: 10px;
			display: inline-block;
			z-index: 10001;
		}

.menu-popup {
			position: fixed;
			top: 60px;
			left: 8px;
			min-width: 280px;
			padding: 10px;
			background: rgba(255,255,255,.96);
			border: 1px solid rgba(0,0,0,.14);
			border-radius: 12px;
			box-shadow:
				0 2px 6px rgba(0,0,0,.08),
				0 12px 32px rgba(0,0,0,.16);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			display: none;
			z-index: 999999;
		}

.menu-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 8px 14px;
			font-family: Quicksand, sans-serif;
			font-size: 13px;
			font-weight: 600;
			color: #202020;
			border-radius: 9px;
			cursor: pointer;
			white-space: nowrap;
			margin: 2px; 
		}

.menu-item:hover {
			background: #E2E2E2;
			color: #000000;
		}

.menu-item-active {
			background: #E2E2E2;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 8px 14px;
			font-family: Quicksand, sans-serif;
			font-size: 13px;
			font-weight: 600;
			color: #000000;
			border-radius: 9px;
			cursor: pointer;
			white-space: nowrap;
			margin: 2px;
		}


/*==========================================================
    POPUPS / OVERLAYS / DIALOGS
==========================================================*/

.style_overlay {
		position: fixed;
		inset: 0;
		z-index: 999999;

		display: flex;
		align-items: center;
		justify-content: center;

		background: rgba(16, 45, 82, .18);
		backdrop-filter: blur(2px);

		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

.style_overlay.show {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
	}

.style_popup {
		width: 520px;
		height: 600px;
		max-width: calc(100vw - 40px);
		max-height: calc(100vh - 40px);

		display: flex;
		flex-direction: column;

		background: #FFFFFF;
		border: 1px solid rgba(255, 106, 0, .25);
		border-radius: 14px;

		box-shadow:
			0 4px 12px rgba(16, 45, 82, .08),
			0 20px 50px rgba(16, 45, 82, .15);

		overflow: hidden;
	}

.style_popup_header {
		flex: 0 0 46px;

		display: flex;
		align-items: center;
		justify-content: space-between;

		padding: 0 16px;

		font-family: Quicksand, sans-serif;
		font-size: 14px;
		font-weight: 600;

		color: #FFFFFF;
		background: #FF6A00;

		cursor: pointer;
		transition: background .2s ease;
	}

.style_popup_header:hover {
		background: #E85F00;
	}

.style_popup_header .fa-xmark {
		font-size: 17px;
	}

.style_popup_frame {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;

		border: 0;
		background: #FFFFFF;
	}

.style_popup{

        position:fixed;

        top:20px;
        right:20px;

        width:750px;
        height:750px;
        padding: 10px; 

        display:none;

        background:#FFF7EE;
        border:1px solid #F5BE7A;
        border-radius:16px;

        overflow:hidden;

        z-index:999999;

    }

#itsy_confirm_overlay{
			display:none;
			position:fixed;
			inset:0;
			background:rgba(0,0,0,.30);
			backdrop-filter:blur(4px);
			z-index:50000;
		}

#itsy_confirm_box{
			display:none;
			position:fixed;
			top:50%;
			left:50%;
			transform:translate(-50%,-50%) scale(.92);
			width:420px;
			max-width:92vw;
			background:#FFF;
			border:1px solid #E7ECF3;
			border-radius:18px;
			box-shadow:0 24px 60px rgba(0,0,0,.22);
			padding:26px;
			z-index:50001;
			font-family:Quicksand,sans-serif;
			transition:.18s;
		}

#itsy_confirm_box.show{
			transform:translate(-50%,-50%) scale(1);
		}

#itsy_confirm_title{
			font-size:22px;
			font-weight:700;
			color:#23395D;
			text-align:center;
			margin-bottom:10px;
		}

#itsy_confirm_message{
			font-size:15px;
			line-height:1.6;
			color:#666;
			text-align:center;
			white-space:pre-line;
		}

.itsy_confirm_cancel{
			background:#F3F5F8;
			color:#4F5D6E;
		}

.itsy_confirm_cancel:hover{
			background:#E8EDF4;
		}

.itsy_confirm_delete{
			background:#FF6A00;
			color:#FFF;
		}

.itsy_confirm_delete:hover{
			filter:brightness(.95);
		}

.ow_popup_overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:
			radial-gradient(
				ellipse at center,
				rgba(125, 182, 230, 0.78) 0%,
				rgba(180, 215, 245, 0.55) 35%,
				rgba(230, 241, 251, 0.35) 65%,
				rgba(255,255,255,0.92) 75%
			);
		backdrop-filter: blur(3px);
		z-index: 9998;
	}

.ow_popup {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 95%;
		max-width: 1800px;
		height: 95%;
		max-height: 1000px;
		background-color: #ffffff;
		border: 1px solid #cfcfcf;
		border-radius: 10px;
		box-shadow:
			0 10px 40px rgba(0,0,0,0.25),
			0 2px 8px rgba(0,0,0,0.12);
		overflow: hidden;
		z-index: 9999;
	}

.ow_popup_header {
		height: 52px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 18px;
		padding-right: 12px;
		background: linear-gradient(to bottom, #f8f8f8, #ececec);
		border-bottom: 1px solid #d8d8d8;
		cursor: pointer;
	}

.ow_popup_title {
		font-weight: bold;
		font-size: 1.05em;
	}

.ow_popup_close {
		width: 34px;
		height: 34px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.18s ease;
	}

.ow_popup_close:hover {
		background-color: #EDF6FD;
	}

.ow_popup_body {
		width: 100%;
		height: calc(100% - 53px);
		background-color: #ffffff;
	}


/*==========================================================
    HELP / STATUS
==========================================================*/

.help_content {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 30px;
	}

.help_content::after {
		content: "";
		display: table;
		clear: both;
	}

.help_image {
		float: right;
		max-width: 800px;
		height: auto;
		margin: 0 0 20px 30px;
		border-radius: 8px;
	}

.help_card {
        width: 100%;
        box-sizing: border-box;
    }

.help_card {
        width: 100%;
        height: 350px;
        box-sizing: border-box;
        box-sizing: border-box;
		background: #FFFFFF;
		border: 1px solid rgba(255,106,0,.25);
		border-radius: 10px;
		overflow: hidden;
		max-width: 500px; 
	}

.help_card_header {
		background: rgb(255,106,0);
		color: #FFFFFF;
		font-size: 20px;
		font-weight: bold;
		padding: 8px 12px;
		font-family: Quicksand,sans-serif;
	}

.help_card_body {
		padding: 12px;
		font-size: 13px;
		line-height: 1.5;
		color: var(--itsy-navy);
		font-family: Quicksand,sans-serif;
	}

.status_pill {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		width: 34px;
		height: 18px;
		padding: 2px;
		border-radius: 20px;
		background: darkgrey;
		border: 1px solid rgba(255,106,0,.30);
		box-sizing: border-box;
	}

.status_pill span {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: black;
	}

.status_pill.on {
		justify-content: flex-end;
	}

.status_pill.on span {
		background: greenyellow;
	}

.help_scroll {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		padding-right: 5px;
	}

.help_grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 12px;
		width: 100%;
	}

.help_card {
		background: #FFFFFF;
		border: 1px solid rgba(255,106,0,.25);
		border-radius: 10px;
		overflow: hidden;
	}

.help_card_header {
		background: rgb(255,106,0);
		color: #FFFFFF;
		font-size: 14px;
		font-weight: bold;
		padding: 8px 12px;
		font-family: Quicksand,sans-serif;
	}


/*==========================================================
    MEDIA / IMAGES / VIDEO
==========================================================*/

.itsy_logo {
        position: absolute;

        top: 5px;
        right: 25px;

        z-index: 1000;
    }

.itsy_logo img {
        height: 50px;
        width: auto;
        display: block;
    }

.youtube_thumb {
	width: 240px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.youtube_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.page_frame {
		flex: 1 1 0;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		border: 0;
		display: block;
	}

.style_iframe{

        width:100%;
        height:100%;

        border:0;
        background:white;

    }

.base iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
	}

@keyframes lyricFloat {

		0% {
			transform: translateY(0) scale(.85);
			opacity: 0;
		}

		10% {
			transform: translateY(-10px) scale(1);
			opacity: 1;
		}

		75% {
			opacity: 1;
		}

		100% {
			transform: translateY(-300px) scale(1.05);
			opacity: 0;
		}

	}

@keyframes fall {

		0% {
			transform: translateY(-10vh) rotate(0deg);
			opacity: 0;
		}

		6% {
			opacity: 0.95;
		}

		50% {
			opacity: 0.95;
		}

		100% {
			transform: translateY(110vh) rotate(360deg) translateX(40px);
			opacity: 0.92;
		}

	}


/*==========================================================
    ACCOUNT / SUBSCRIPTION
==========================================================*/

.account_title {
		font-size: 28px;
		font-weight: 700;
		color: #102D52;
		margin-bottom: 6px;
	}

.account_subtitle {
		font-size: 14px;
		color: #777777;
		margin-bottom: 28px;
	}


/*==========================================================
    WORKSPACE / PAGE EDITOR
==========================================================*/

.side_container {
		display: flex;
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;

		align-items: stretch;
		gap: 10px;

		box-sizing: border-box;
	}

.left_side {
		flex: 0 0 auto;
		min-width: 0;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
	}

.right_side {
		flex: 1 1 0;
		min-width: 0;
		min-height: 0;

		display: flex;
		flex-direction: column;

		overflow: hidden;
	}

.prompt_area {
		position: relative;

		flex: 1 1 0;
		min-height: 0;

		display: flex;
	}

.horizontal_dump {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 3px;
	}

.outside_border {
		position: fixed;
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
		display: flex;
		flex-direction: row;
		gap: 10px;
		box-sizing: border-box;
	}

.version_list {
		flex: 1 1 0;
		min-height: 0;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: hidden;
	}


/*==========================================================
    AUDIO / PLAYER
==========================================================*/

.itsy_player {
		position: fixed;
		left: 12px;
		bottom: 12px;
		z-index: 999999;

		display: flex;
		align-items: center;
		gap: 10px;

		padding: 7px 15px 7px 7px;

		background: rgba(255,247,238,.96);
		border: 1px solid rgba(255,106,0,.25);
		border-radius: 999px;

		box-shadow:
			0 2px 5px rgba(0,0,0,.08),
			0 8px 22px rgba(16,45,82,.14);

		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);

		font-family: Quicksand, sans-serif;
		user-select: none;
	}

.itsy_play {
		width: 36px;
		height: 36px;

		display: flex;
		align-items: center;
		justify-content: center;

		padding: 0;

		background: #FF6A00;
		color: #FFFFFF;

		border: 0;
		border-radius: 50%;

		font-size: 12px;
		cursor: pointer;

		box-shadow: 0 3px 9px rgba(255,106,0,.25);

		transition:
			background .18s ease,
			transform .18s ease,
			box-shadow .18s ease;
	}

.itsy_play:hover {
		background: #F05F00;
		transform: scale(1.07);

		box-shadow: 0 4px 13px rgba(255,106,0,.38);
	}

.itsy_play:active {
		transform: scale(.96);
	}

.itsy_song_title {
		font-size: 12px;
		font-weight: 700;
		color: #102D52;
		white-space: nowrap;
	}

.itsy_song_status {
		margin-top: 3px;
		font-size: 9px;
		font-weight: 600;
		color: #FF6A00;
		white-space: nowrap;
	}


/*==========================================================
    UTILITIES
==========================================================*/

.green {
        color: #3FA66A;
    }

.greenyellow {
        color: greenyellow;
    }

.grey {
        color: #D6D9DD;
    }

.text_light {
        color: var(--text-light);
    }

.center {
        text-align: center;
    }

.right {
        text-align: right;
    }

.flex {
        display: flex;
    }

.no_holder{
        height:100%;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        padding-left: 20px; 
        padding-right: 20px; 
        padding-top: 20px; 
        padding-bottom: 100px; 
        box-sizing:border-box;
        font-family:Quicksand,sans-serif;
    }

.no_big{
        font-size:75px;
        font-weight:700;
        color:#FF6A00;
        line-height:.82;
    }

.no_row{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:10px;
        margin-top:20px;
    }

.no_box{
        padding:10px 16px;
        border-radius:30px;
        background:#FFF7EF;
        border:1px solid #FFD7B4;
        color:#5B6C81;
        font-size:18px;
        font-weight:bold;
    }


/*==========================================================
    RESPONSIVE / MEDIA QUERIES
==========================================================*/

@media (max-width: 800px) {

		.help_image {
			float: none;
			display: block;
			width: 100%;
			max-width: none;
			margin: 0 0 20px 0;
		}

	}


/*==========================================================
    OTHER / PAGE-SPECIFIC
==========================================================*/

html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        font-family: Quicksand,sans-serif;
        font-size: 14px;
    }

.to_itsy {
			position: fixed;
			top: 10px;
			right: 10px;
			display: inline-block;
			z-index: 10001;
			cursor: pointer;
			transition: transform .18s ease;
		}

.to_itsy:hover {
			transform: translateY(-3px) scale(1.04);
		}

.circle-btn {
			width: 40px;
			height: 40px;

			display: flex;
			align-items: center;
			justify-content: center;

			background: rgba(255,255,255,.94);
			color: #222222;

			border: 1px solid rgba(0,0,0,.18);
			border-radius: 50%;

			font-size: 16px;

			cursor: pointer;
			user-select: none;

			box-shadow:
				0 1px 3px rgba(0,0,0,.12),
				0 5px 16px rgba(0,0,0,.14);

			backdrop-filter: blur(8px);
			-webkit-backdrop-filter: blur(8px);

			transition:
				background .18s ease,
				color .18s ease,
				transform .18s ease,
				box-shadow .18s ease;
		}

.circle-btn:hover {
			background: #1F1F1F;
			color: #FFFFFF;
			transform: translateY(-2px);

			box-shadow:
				0 2px 5px rgba(0,0,0,.16),
				0 8px 20px rgba(0,0,0,.20);
		}

.itsy_song {
		line-height: 1.15;
		padding-right: 3px;
	}

.lyric_bubble {
		position: absolute;
		bottom: 40px;

		padding: 10px 18px;

		background: rgba(255, 255, 255, .92);
		color: #102D52;

		border: 2px solid #FF6A00;
		border-radius: 999px;

		font-size: 18px;
		font-weight: 600;

		box-shadow: 0 5px 20px rgba(16, 45, 82, .15);

		pointer-events: none;
		z-index: 9999;

		white-space: nowrap;

		animation: lyricFloat 5s ease-out forwards;
	}

.note-snow {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 9998;
		overflow: hidden;
	}

.note {
		position: absolute;
		top: -8%;
		text-shadow: 0 4px 12px rgba(0,0,0,0.6);
		will-change: transform, opacity;
		user-select: none;
	}

.update_option {
	display: grid;
	grid-template-columns: 45px 240px;
	column-gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 0;
}

	.update_option:first-of-type {
		margin-top: 5px;
	}

	.update_option iframe {
		display: block;
		width: 45px;
		height: 25px;
		border: 0;
	}

	.update_option span {
		font-size: 12px;
		font-weight: bold;
		color: #FF6A00;
	}