.fancy-list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #ddd;
}

.fancy-list-item {
    padding: 4px 6px;
    background: #2a2a2a;
    cursor: pointer;
    border-radius: 3px;
    text-align: center;
    transition: background 0.15s ease;
}

.fancy-list-item:hover {
    background: #3c3c3c;
    color: #fff;
}

.refresh_me {
    position: absolute;
    width: 50px;
    height: 50px;
    right: -20px;
    top: 50px;
    background-color: green;
    z-index: 1000;
    color: white;
}
.shoot_button {
    width: 50px;
    height: 50px;
 background-color: #d9d9b4;
    position: absolute;
    left: 110px;
    bottom: 50px;
    z-index: 1200;
}
.fanim-slider-outputtext
{
    display: inline-block;
    color: white;
    font-size: 140%;
}
.fanim-slider {
    display: inline-block;
    width: 200px;
}
.fanim-editor {
    position: absolute;
    z-index: 1100;
    top: 20px;
    left: 10px;
}

.drive_div {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0;
    pointer-events: none;
}
.accel_bg {
    position: relative;
    width: 100%;
    height: 100%;
    right: 0;
    background-color: blue;
    opacity: 0;
    border: 1px solid black;
    pointer-events: none;
}
.accel_button {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
}
.fps_div {
    position: absolute;
    left: 10px;
    top: 5px;
    color: yellow;
    text-shadow: 2px 2px black;
    z-index: 1000;
}

.login-background {
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    position: absolute;
    pointer-events: none;
    background: linear-gradient(-45deg, rgba(0, 0, 0, 1), #652876, #6f1616, #126054);
    background-size: 400% 400%;
    animation: gradient 12s ease-in-out infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.login-container {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    padding-top: 20px;
    pointer-events: auto;
}
.login-background-content {
    width: 100vw;
    text-align: center;
    font-family: Alef, sans-serif;
    font-size: 0px;
    font-weight: 100;
    color: rgba(0, 0, 0, 1);
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    line-height: 2em;
    letter-spacing: 15.9px;
    text-shadow: 0px 0px 21px rgba(211, 27, 224, 1);


}

.login-background-content-wide {
    font-size: 100px;
    transition: 5s;
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 0px 20px #2ba3f2, 0px -5px 35px rgba(255,255,255,0.3);
}
.loginx {
    text-shadow: 0px 0px 100px ;
}

.card-offset
{
    margin-top: 9vh;
    margin-left: 9vw;
}
.container
{
    max-width: 100vw;
}
.login-card
{
    border-radius: 0px;
    background-color: #0005;
    color: white;
    border-top-left-radius: 30px;

}
.card-header
{
    background-color: #0000;
    text-align: center;
    font-size: 2em;
    letter-spacing: 4px;
    font-weight: bold;
    color: gray;
}
.login-box
{
    border: 2px solid lightgray;
    margin: 10px;
    width: 100%;
    position: relative;
    padding: 30px;
    border-bottom-right-radius: 30px;
}
.btn-login {
    width: 100%;
    background-color: #2ba3f2;
    font-size: 1em;
    font-weight: bold;
    border: 0;
    border-radius: 0;
    padding: 1em;
    transition: .3s;
}
.btn-login:hover
{
    background-color: #1580c7;
}
.k-node-menu {
    background: linear-gradient(145deg, #556272, #3a4a5a); /* Subtle gradient background */
    border: 1px solid #3a4a5a; /* Sleek border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Soft shadow for depth */
    border-radius: 10px; /* Smooth rounded corners */
    padding: 0px; /* Comfortable padding */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font */
    color: #ffffff; /* Crisp white text */
    font-size: 0.9em; /* Optimal text size for readability */
    max-width: 350px; /* Ideal max width */
    box-sizing: border-box; /* Include padding and border in the box's size */
    position: absolute; /* Positioned relative to the clicked node */

    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for pop-up */
    transform: translateY(-10px); /* Slight upward pop on appearance */
    width: 120px;
    pointer-events: none;
    user-select: none;

}

.k-node-menu.active {
    display: block; /* Show when active */
    opacity: 1; /* Transition to visible */
    transform: translateY(0); /* Settle into place */
}

.k-node-menu h3 {
    margin-top: 0;
    color: #a8dadc; /* Light accent color for headings */
}

.k-node-menu button {
    background-color: #1abc9c; /* Stylish button color */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.k-node-menu-tooltip {
    background-color: #6d6d66;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    height: 20px;
    width: 40px;
}

.k-node-menu-show {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #4a5a6a;
    position: absolute;
    right: 5px;
    top: 5px;

    transition: transform 0.2s ease, border-top-color 0.2s ease;
    pointer-events: auto;

}
.k-node-menu-show:hover {
    border-bottom-color: #bacbd8;
}
.k-node-menu-show:active {
    transform: translateY(2px);
}

.k-node-menu-collapse {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #4a5a6a; /* Color of the caret */
    position: absolute;
    right: 5px;
    top: 5px;
    transition: transform 0.2s ease, border-top-color 0.2s ease;
    pointer-events: auto;
}

.k-node-menu-collapse:hover {
    border-top-color: #bacbd8; /* Slightly lighter color on hover */

}

.k-node-menu-collapse:active {
    transform: translateY(2px); /* 'Pressed down' effect on active state */
}

.k-node-menu button:hover {
    background-color: #16a085; /* Button hover effect */
}

.k-node-header {
    background-color: rgba(255,255,255, .2);
    height: 20px;
    padding: 14px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    pointer-events: none;
}
.k-object-text {
    color: #cbcbcb;
}
.k-level-text {
    color: darkslateblue;;
    font-size: 90%;
}
.k-node-body {
    padding-top: 10px;
    color: #6cc9c9;
    margin-left: 4px;
    margin-right: 4px;
    min-height: 100px;
    /* overflow: hidden; */
    pointer-events: none;
}
.k-node-body::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image:
            radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
            radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    opacity: 0.4;
    z-index: 0;
}

.k-node-node {
    width: 36px; /* Slightly larger than the gem to represent the socket */
    height: 36px;
    background-color: #606060; /* Darker color for contrast */
    border-radius: 50%; /* Circular shape */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); /* Inner shadow for a recessed look */
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;
    position: relative; /* For absolute positioning of the gemstone inside */
}

/* Style adjustments if you want to add the gemstone as a child of the socket */
.k-node-node .k-node-gem {
    position: absolute;
    top: 2px; /* Centering the gemstone in the socket */
    left: 2px;
}
.k-node-gem:hover {
    transform: scale(1.1); /* Slightly enlarge the gemstone on hover */
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.6); /* Add a glow effect */
}



.k-node-connector {
    width: 18px; /* Width of the connector */
    height: 6px; /* Height of the connector */
    background-color: #454545; /* Default color of the connector */
    position: relative;
    display: inline-block;
    top: -14px;
    margin-right: 0px;
    padding-right: 0px;

}

.k-node-synergy {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, transparent);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s;
}

/* When the connector is in 'filled' state */
.k-node-connector.filled .k-node-synergy {
    background: linear-gradient(to right, red, blue); /* Synergy colors */
    opacity: 1; /* Show the synergy effect */
}

.k-node-gem {
     width: 32px;
     height: 32px;
     background: linear-gradient(135deg, #d8a7a7 25%, #f2c2c2 50%, #d8a7a7 75%);
     position: relative;
     border-radius: 50%;
     box-sizing: border-box;
     z-index: 10;
     pointer-events: auto;
 }

.k-node-gem-desc {
    position: absolute;
    bottom: 100%; /* Position above the gem */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */
    background-color: #333e; /* Tooltip background */
    color: #fff; /* Text color */
    padding: 5px 10px; /* Padding around the text */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    white-space: nowrap; /* Keep the tooltip text on one line */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Ensures it doesn't interfere when not shown */
    transition: opacity 0.3s, visibility 0.3s; /* Smooth transition for appearance */
    z-index: 100; /* Ensures it appears above other elements */
    pointer-events: none;
}
.k-ui-gem:hover .k-node-gem-desc {
    opacity: 1; /* Show the tooltip */
    visibility: visible; /* Make it visible */
}
.k-ui-gem:active .k-node-gem-desc {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.k-node-gem-desc-header {
    color: white;
}
.k-gem-desc-header-title {
    display: inline-block;

}
.k-gem-desc-header-level {
    float: right;
    font-size: 70%;
    color: #2ba3f2;
}

.k-node-gem-desc-body {
    color: lightgray;
    font-size: 90%;

}

.k-node-texture {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
}

.k-node-texture:nth-child(2) {
    top: auto;
    left: 20%;
    bottom: 10%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
}

.k-node-texture:nth-child(3) {
    top: 10%;
    left: auto;
    right: 10%;
    background: linear-gradient(225deg, transparent, rgba(255, 255, 255, 0.1));
}
.k-node-gem1 {
    background: linear-gradient(135deg, #c3d8a7 25%, #e4f2c2 50%, #a7d8ca 75%);
}
.k-node-gem2 {
    background: linear-gradient(135deg, #b6a7d8 25%, #d4c2f2 50%, #baa7d8 75%);
}
.k-node-gem3 {
    background: linear-gradient(135deg, #3c80d7 25%, #8eb3c9 50%, #28567b 75%);
}

.k-node-empty {

}

.k-node-gemlib {
    width: 200px; /* Width of the sidebar */
    height: 100%; /* Full height of the viewport */
    position: fixed; /* Fixed positioning to stay in place */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left side of the screen */
    background-color: #6d6d66; /* Manilla paper color */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); /* Subtle shadow on the right edge */
    overflow-y: auto; /* Enable vertical scrolling if content is too long */
    z-index: 0;
    overflow-x: hidden;
    word-break: break-word;
    max-width: 200px;
}
.k-node-gemlib::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
            linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 5px 5px, 5px 5px;
    opacity: 0.5;
    z-index: -1;
}

.k-node-gemlib-header {
    background-color: #e4e4d2; /* Slightly darker for the header */

    text-align: center;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid #ccc; /* Separates the header from the body */
}

.k-tower-baseui-onscreen-icon {
    width: 20px;
    height: 20px;
    color: white;
    background-color: lime;
    cursor: pointer;
}
.k-tower-baseui-onscreen-icon:hover {
    background-color: green;
    color: black;
    transform: scale(1.1);
}
.k-tower-baseui-offscreen-icon {
    width: 20px;
    height: 20px;
    color: yellow;
    background-color: red;
    cursor: pointer;
}
.k-tower-baseui-full {
    background: linear-gradient(145deg, #556272, #3a4a5a); /* Subtle gradient background */
    border: 1px solid #3a4a5a; /* Sleek border */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); /* Soft shadow for depth */
    border-radius: 10px; /* Smooth rounded corners */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font */
    color: #ffffff; /* Crisp white text */
    font-size: 0.9em; /* Optimal text size for readability */
    max-width: 350px; /* Ideal max width */
    box-sizing: border-box; /* Include padding and border in the box's size */
    position: absolute; /* Positioned relative to the clicked node */

    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; /* Smooth transition for pop-up */
    transform: translateY(-10px); /* Slight upward pop on appearance */
    width: 120px;

    position: absolute;
    pointer-events: none;
    padding: 10px;
}
.k-tower-baseui-header {

}
.k-tower-baseui-title {
    display: inline-block;
}
.k-tower-baseui-full-close {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #b0b5c0; /* Color of the caret */
    position: absolute;
    right: 7px;
    top: 8px;
    transition: transform 0.2s ease, border-top-color 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
}
.k-tower-baseui-full-close:hover {
    border-top-color: white;
}
.k-node-gemlib-body {
    padding: 10px;
    width: 100%;
}
.k-tower-baseui-body {
    position: relative;
}
.k-baseui-node {
    display: inline-block;

    width: 30px;
    height: 30px;
    margin: 10px;
    pointer-events: auto;
    position: relative;

    background-color: #606060; /* Darker color for contrast */
    border-radius: 50%; /* Circular shape */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); /* Inner shadow for a recessed look */
    display: inline-block;
    justify-content: center;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;
    position: relative; /* For absolute positioning of the gemstone inside */
}
.k-baseui-node:hover {
    background-color: lightgreen;
}



.k-ui-gem {
    background-color: red;
    width: 28px;
    height: 28px;
    margin: 1px;
    border-radius: 100%;
    cursor: pointer;
    z-index: 1000;
}

.k-ui-gem:hover {

    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 182, 193, 0.6); /* Add a glow effect */

}

.k-health-ui {
    background-color: black;
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.k-health-0 {
    background-color: green;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.k-health-1 {
    background-color: red;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
body {
}

.p-ready-holder {
    width: 100%;
    height: 100%;
    background-color: rgba(40, 29, 12, 0.19);
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.p-ready-logo {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 300%;
    top: 40%;
    color: white;
    text-shadow: 3px 3px 3px black;

    pointer-events: none;
}
.p-levelcomplete-title {
    display: flex;
    flex-direction: column;
    align-items: center; /* centers each word horizontally */
    gap: 1rem; /* space between words */
    text-align: center;
}
.p-levelcomplete-word {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap; /* keep letters together */
        max-width: 100%; /* responsive */
        overflow-wrap: break-word;
        transform-origin: center;
        scale:  clamp(0.3, 80vw / (1000px), 1);
}
.p-kidletter {
    margin: -70px 0;
}
.p-level-complete-holder {
    position: relative;
    width: 100%;
    text-align: center;
    top: 5vh;
    pointer-events: none;
}
.p-level-complete-title {
    font-size: 3em;
    color: red;

}
.p-level-complete-value {
    font-size: 2em;
    color: green;
}


.p3-fullscreen-fade {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
}
.p3-curtain-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;              /* full screen width */
    height: 100vh;             /* full screen height */
   background-color: #9f2814;
    transform-origin: left center;  /* pivot like a door or curtain */
    transform: perspective(800px) rotateY(0deg) rotateZ(-2deg); /* slight tilt */
    transition: transform 1s ease-in-out;
    pointer-events: none;      /* let clicks pass through if needed */
}
.p3-pip-dialog {
    position: absolute;
    left: 0;
    top: 0;
    background-color: green;
}
.p3-input-color-row {

}
.p3-input-color-box {
    position: relative;
    width: 160px;
    height: 160px;
    display: inline-block;
    z-index: 10000;
}
.p3-input-color-sat {
    display: inline-block;
    width: 20px;
    height: 160px;
}

.p-ping {
    position: absolute;
    right: 10px;
    top: 5px;
    text-shadow: #1e1e1e 3px 3px 1px;
    font-size: 40%;
}
/* Overall chat container */
.p-online-status {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh; /* Chat takes up 15% of the viewport height */
    background-color: rgba(30, 30, 30, 0.24);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
}

/* Output box - where the messages will appear */
.p-online-status-output {
    flex: 1;
    padding: 10px;
    background-color: rgba(40, 40, 40, 0.11);
    color: #ddd;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    overflow-y: auto;
    border-bottom: 2px solid #444;
    box-sizing: border-box;
    max-height: calc(100% - 50px); /* Make sure output area doesn't exceed available space */
}

/* Input box - where the user types */
.p-online-status-input {
    background-color: #333;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #444;
}

/* Input field (where user types message) */
.p-online-status-inputbox {
    width: 100%;
    padding: 8px 12px;
    background-color: #444;
    border: 1px solid #555;
    border-radius: 20px;
    color: #ddd;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    outline: none;
    transition: background-color 0.3s, border 0.3s;
}

/* On focus, input changes slightly for interaction */
.p-online-status-inputbox:focus {
    background-color: #555;
    border: 1px solid #66aaff;
}

/* Placeholder styling */
.p-online-status-inputbox::placeholder {
    color: #aaa;
}

/* Optional: Add some interactivity to the input box */
.p-online-status-input button {
    background-color: #66aaff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.p-online-status-input button:hover {
    background-color: #5599e6;
}

/* Chat system button (Optional) */
.p-online-status-input button {
    display: none; /* Hide button if not needed */
}

/* Add message bubbles to output */
.p-online-status-output .message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    max-width: 70%;
}

.p-online-status-output .message.sent {
    background-color: #66aaff;
    color: white;
    align-self: flex-end;
}

.p-online-status-output .messagereceived {
    background-color: #4444;
    color: white;
    align-self: flex-start;
}
.p-online-status-output .error {
    color: rgba(200, 50, 50, 1.0);
}
.p-online-status-output .messageSubmitted {
    background-color: #4444;
    color: darkgray;
    align-self: flex-start;
}

/* Scrollbar styling */
.p-online-status-output::-webkit-scrollbar {
    width: 8px;
}

.p-online-status-output::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.p-online-status-output::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Optional: Chat bubble animation */
.p-online-status-output .message {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsiveness: Adjust for screens smaller than 600px */
@media (max-width: 600px) {
    .p-online-status {
        height: 20vh; /* Increase slightly for very small screens */
        border-radius: 10px 10px 0 0;
    }

    .p-online-status-output {
        padding: 8px;
        font-size: 12px;
    }

    .p-online-status-inputbox {
        width: 75%;
        font-size: 12px;
    }

    .p-online-status-input {
        padding: 8px;
    }
}

body {
    left: 0;
    top: 0;
    -webkit-touch-callout: none; /* Safari */
    -webkit-user-select: none; /* Chrome */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}
.p-loading-screen {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    text-align: center;
    padding: 2em;
    border-radius: 8px;
    backdrop-filter: blur(6px);
}

.p-loading-screen .p-intro-text {
    font-size: 1.2em;
    margin-bottom: 1em;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.p-status {
    display: inline-block;
    width: 70px;
    font-weight: bold;
    font-size: 1.2em;
    margin-right: 0.5em;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.p-status.p-ok {
    color: #57ff57;
}

.p-status.p-not-ok {
    color: #ff5757;
}

.p-status-label {
    display: inline-block;
    font-size: 0.95em;
    opacity: 0.85;
}

.p-legal {
    margin-top: 1.5em;
    font-size: 0.8em;
    color: rgba(255,255,255,0.9);
}

.p-accept-btn {
    margin-left: 10px;
    padding: 0.4em 1em;
    background: linear-gradient(135deg, #136554, #0077ff);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.p-accept-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}



.p3-editor-button-div {
    background-color: green;
    width: 100%;
    height: 0px;
    position: absolute;
    top: -80px;
    left: 0px;
    display: inline-block;
}
.p3-game-ui {
    background-color: rgba(75, 75, 75, 0.71);
    border: inset 4px blue;
    top: 10px;
    left: 10px;
    right: 10px;
    position: absolute;
    text-align: center;

    vertical-align: top;
    z-index: 1001;
    margin: 20px;
    padding-top: 30px;
    border-radius: 20px;
}
.p3-game-ui-arrow {
    position: relative;
    display: inline-block;
    border: 1px solid white;
    font-size: 200%;
    margin: 10px;
    width: 40px;
    color: white;
}
.p3-game-ui-close {
    border-radius: 20px;
    margin: 20px;
    background-color: #4444;
    border: 1px solid gray;
    font-size: 150%;
    color: white;
}
.p3-game-ui-left {
    left: 30px;
    float: left;
}
.p3-game-ui-right {
    right: 30px;
    float: right;

}
.p3-menu-achievement {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 1px solid #333;
    background: gray;
    margin: 10px;

}
.p3-menu-achievement-text {
    position: relative;
    background-color: #3338;
    border: 1px solid gray;
    border-radius: 10px;
    margin: 20px;

    color: white;
    padding: 20px;
    z-index: 1005;
}
.p3-menu-achievement-desc {
    font-size: 70%;
    margin-top: 1em;
    color: #eee;
}
.p3-menu-achievement-collected {
    border: 1px solid white;
    background: goldenrod;
}
.p3-loading-background {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    z-index: 1004;
    background-color: #22332e;
}
.p3-loading-text {
    font-size: 300%;
    color: #1a2e50;
    text-shadow: 1px 1px 10px #485753;
    width: 100%;
    text-align: center;
}
.p3-game-ui-logo {

    padding-top: 3vw;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 200%;
    text-shadow: 0px 0px 4px black;
    display: inline-block;
    width: 300px;
}
.p3-game-ui-credits {
    color: lightgray;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 90%;
    text-shadow: 0px 0px 3px black;

}
.p3-gameui-section-holder {
    width: 80%;
    text-align: left;
    left: 10%;
    position: relative;
    padding-top: 1vw;
    border-bottom: 1px solid gray;
    line-height: 2em;
}
.p3-gameui-section-header {

    position: relative;
    left: 0;
    text-align: left;
    color: white;
    text-shadow: 4px 4px black;
    font-weight: bold;
    padding-righT: 1vw;
    font-size: 80%;

    display: inline-block;
}
.p3-gameui-section-content {
    color: lightgray;
    text-align: right;
    position: relative;
    right: 0;

    float: right;
    text-shadow: 2px 2px #1e1e1e;
    font-size: 150%;
    display: inline-block;

}
.p3-qr-code {
    margin-top: 3vw;
    width: 120px;
    height: 120px;
    background-color: white;
    display: inline-block;
}
.p3-qr-code > img {
    width: 100%;
    height: 100%;
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}
.p3-no-touch {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    background-color: #000000 !important;

}

.p3-editor-button {
    background-color: red;
    width: 40px;
    height: 40px;
    position: absolute;
    display: inline-block;
    border: 1px solid black;
}
.p3-editor-button:hover {
    border: 1px solid gray;
    cursor: pointer;
}
.p3-editor-button:active {
    left: 5px;
    top: 5px;
}
.p3-editor-button-image {
    width: 100%;
    height: 100%;
    position: relative;
}
.p3-editor-image-button {
    pointer-events: none;
}

.p3-editor-data-div {
    background-color: green;
    width: 200px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: -200px;
    display: inline-block;
}
.p3-editor-xyz {
    background-color: lightgray;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 40px;
    padding-top: 10px;
}
.p3-editor-xyz-title {
    display: inline-block;
    width: 20px;
    height: 40px;
    margin-left: 5px;
    font-weight: bold;
    font-size: 120%;
}
.p3-editor-xyz-data {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    font-size: 80%;
}
.p3-window {
    background-color: darkgray;
    max-height: 100%;
    overflow-y: scroll;
}
.p3-window-title {
    font-weight: bold;
}
.p3-window-title:hover {
    cursor: pointer;
    background-color: #2a2a2a;
    color: #bbbbbb;
}
.p3-window-label {
    font-size: 75%;
    font-weight: bold;
    display: inline-block;
}
.p3-window-header {

}
.p3-window {
    position: relative;
    overflow-x: hidden;
}
.p3-input-large {
    width: 50%;
    left: 50%;
    position: absolute;
}
.p3-input-lr {
    cursor: ew-resize;
}
.p3-input-short {
    width: 50%;
    margin-left: 10px;
}
.p3-input-small {
    width: 30px;
    margin-right: 5px;
}
.p3-window-divider {
    background-color: black;
    height: 4px;
    margin: 4px;
}
.p3-window-enabledbox {
    float: right;
    position: relative;
    top: -20px;
}
.p3-editor-window {
    position: absolute;
    border: inset 2px gray;
    background-color: #5f5e5e;
    width: 200px;
    height: 200px;
    display: inline-block;
    color: black;
    z-index: 2000;
}
.p3-editor-window-header {
    position: relative;
    height: 20px;
    width: 100%;
    background-color: darkblue;
    color: white;
    cursor: grab !important;
}
.p3-editor-window-grower {
    position: absolute;
    height: 15px;
    width: 15px;
    right: 0px;
    bottom: 0px;
    display: inline-block;
    background-color: slategray;
    border-top-left-radius: 100%;
    cursor: nwse-resize
}
.p3-editor-material-window-box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 5px 5px 15px;
    border: 1px solid black;
    background-color: #888888;
    display: inline-block;
}
.p3-editor-button-alt {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    font-size: 70%;
    background-color: rgba(211, 211, 211, 0.6);
    font-weight: bold;
}
.p3-editor-window-inside {
    position: absolute;
    top: 20px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    overflow: scroll;
}
.p3-editor-material-window-box-name {
    width: 100%;
    position: absolute;
    height: 10px;
    color: black;
    bottom: -10px;

}
.p3-editor-material-edit-button {
    margin: 5px;

}
.p3-editor-error {
    border: 2px solid red !important;
    background-color: #fdd;
}

.p3-achievement-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 20px;
    left: 0;
    pointer-events: none;
}
.p3-achievement {
    width: 80%;
    height: 3em;
    left: 5%;
    margin-top: 10px;
    background: linear-gradient(90deg, rgba(201, 174, 93, 0.5) 25%, rgba(224, 198, 135, 0.5) 50%, rgba(201, 174, 93, 0.5) 75%);
    border-radius: 3px;
    border: 1px solid gold;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1em;
    box-shadow: 0 0 6px rgba(224, 198, 135, 0.4);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    position: relative;
}
.p3-achievement::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* Softer light */
    transform: skewX(-20deg);
    animation: shimmer 3s infinite;
}
@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}
.p3-physics-watch {
    z-index: 2000;
    position: absolute;
    left: 10px;
    right: 10px;
    color: red;
}
.p3-achievement-img {
    flex-shrink: 0;
    margin-right: 1em;
    height: 2em;
    width: 2em;
    display: flex;
    align-items: center;
    background-color: goldenrod;
    border-radius: 100%;
    border: 1px solid white;
}
.p3-achievement-img > img {
    height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.p3-achievement-text {
    flex-grow: 1;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
}

.fade-in {
    opacity: 1;
}

.fade-out {
    opacity: 0;
}
.p3-pause-button, .p3-chat-button {
    background-color: red;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    bottom: 100px;
    display: inline-block;
    border: 1px solid darkblue;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 3px white;
    font-size: 100%;
}
.p3-ham-line {
    position: relative;
    width: 70%;
    height: 10%;
    margin: 15%;
    top: -115%;
    background-color: white;
    pointer-events: none;
}
.p3-ability-bar {
    position: absolute;
    bottom: 10px;
    height: 250px;
    right: 0px;
    width: 80px;
}
.p3-ability-button {
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 2px;
    display: inline-block;;
}
.p3-bomb-glowrim {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid white;
    width: 80px; /* Change size based on your icon */
    height: 80px; /* Change size based on your icon */
    background-color: rgba(0, 255, 0, 0.5); /* Example glow color */
    border-radius: 50%; /* Make it circular */
    transform: translate(-50%, -50%); /* Center it */
    opacity: .5; /* Start invisible */
    animation: pulse 1.5s infinite; /* Define the animation */
    z-index: 0; /* Ensure glow is below the icon */
}

@keyframes pulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2); /* Scale to 1.2 for effect */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1); /* Return to original */
    }
}

/* Active effect styles, visible only when ammo is not empty */
.active .p3-bomb-glowrim {
    opacity: 1; /* Make the glow visible */
}
.p3-ability-button-img {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    pointer-events: none;
}
.p3-ability-sepia {

}
.p3-ability-button-exp {
    position: absolute;
    right: 20px;
    top: -10px;
    width: 70vw;
    height: auto;
    background-color: #7777;
    border: 1px solid lightgray;
    box-shadow: 3px 3px #1e1e1e88;
    border-radius: 10px;
    z-index: 999;
    color: papayawhip;
    text-shadow: 0px 0px 5px white ;
    padding: 2px;
    display: none;
    pointer-events: none;
}

.p3-song-window-header {
    background-color: #0f73c7;
    height: 70px;
    position: absolute;
    top: 0;
}
.p3-song-window-header-block {
    height: 80px;
}
.p3-song-row {
    background-color: rgba(32,173,47,0.32);
    display: block;
    height: 20px;
}
.p3-song-cell {
    background-color: rgba(167,173,172,0.31);
    display: inline-block;
    width: 15px;
    height: 18px;
    border: 1px solid black;
}
.p3-song-timedivider {
    width: 2px;
    display: inline-block;
    background-color: black;
}
.p3-song-c {
    background-color: #5f5e5e;
}
.p3-song-black {
    background-color: rgba(64,64,64,0.36);
}
.p3-song-white {
    background-color: rgba(160,159,187,0.36);
}
.p3-song-playing {
    background-color: yellow !important;
}
.p3-song-cell:hover {
    background-color: rgba(162,170,173,0.78);
}
.p3-song-cell-on {
    background-color: blue !important;
}

.SCamera_mouseLock {
    width: 1em;
    margin-left: -.5em;
    height: 1em;
    margin-top: .5em;
    background-color: gray;
    border-radius: 100%;
    border: 3px solid white;
    position: absolute;
    pointer-events: none;
}
.s-ui {
    position: relative;
    display: inline-block;
    color: white;
    text-shadow: 2px 2px 2px #1e1e1e ;
    margin-left: 1em;
    font-size: 150%;
    pointer-events: none;
}

.s-ui-holder {
    position: absolute;
    top: 2em;
    left: 1em;
    pointer-events: none;
}

.s-ui-dialogHolder {
    position: absolute;
    top: 40%;
    height: 0;
    width: 0;
    left: 50%
;
}
.s-ui-dialog {
    width: 300px;
    height: 200px;
    background-color: white;
    position: absolute;
    left: -150px;
    top: -100px;
    padding: 20px;
    box-shadow: 2px 2px 2px #00000073;

}

.s-ui-dialog-name {
    font-size: 150%;
    font-weight: bold;
}
.s-ui-levelGoalDialog-goals {

}
.s-ui-levelGoalDialog-goalTitle {
    padding-top: 0.5em;
    color: #555500;
    font-size: 125%;
    padding-left: 10%;
}
.s-ui-levelGoalDialog-goalList {

}
.s-ui-levelGoal {
    height: 2em;
    width: 100%;
    overflow: visible;
}
.s-ui-goalCheck {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 10px;
    overflow: visible;
    font-size: 180%;
    line-height: 0.2em;
    border: 1px solid black;
    border-radius: 0 20% 0 20%;

}
.s-ui-goalName {
    display: inline-block;
}
.s-ui-levelGoalDialog-play {
    border: 1px outset black;
    font-size: 140%;
    font-weight: bold;
    margin: 10px;
    padding: 10px;
    position: absolute;
    bottom: 10px;

    background-color: rgba(210, 210, 210, 0.6);
}
.s-ui-levelGoalDialog-play:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}
.s-ui-button {
    background-color: gray;
    border: 1px outset black;
    position: absolute;
    top: 0;
    right: 0;
}
.s-ui-button:hover {
    background-color: lightgray;
}
.s-ui-button:active {
    border: 1px inset black;
    background-color: lightblue;
}
/* --- Layout and Structure --- */
.p3-room-statui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    color: #fff;
    font-family: "Segoe UI", sans-serif;
    background: rgba(0, 0, 0, 0.5);
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* --- Header / Data --- */
.p3-room-statui-header {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 6px;
}

.p3-room-statui-data {
    font-size: 16px;
    color: #ffd700;
    margin-bottom: 12px;
    display: inline-block;
    padding-right: 20px;
}

.p3-room-statui-besttime {
    font-size: 14px;
    color: #ccc;
    margin-bottom: 10px;
    display: inline-block;
}

/* --- Time Graph --- */
.p3-room-statui-timegraph {
    position: relative;
    width: 100%;
    height: 120px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
}

/* line at bottom */
.p3-room-statui-timegraphbottom {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #f8f100, #aaa, #777);
    border-radius: 2px;
}

/* --- Ring Markers --- */
.p3-room-statui-ring {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 9px;
    color: #fff;
    font-weight: bold;
    transform: translateX(-50%);
    border: 2px dashed black;
    background-color: #8888;
}

/* Colored rings */
.p3-room-statui-ringred { border-color: #e74c3c; }
.p3-room-statui-ringblue { border-color: #3595d3; }
.p3-room-statui-ringgreen { border-color: #2ecc71; }
.p3-room-statui-ringpink { border-color: #b72ecc; }
.p3-room-statui-ringorange { border-color: #cc752e; }

/* --- Participants --- */
.p3-room-statui-participant {
    position: relative;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.p3-room-statui-ballholder {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 20px;
}

/* Player ball color marker */
.p3-room-statui-ball {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 6px;
    border: 1px solid #fff;
    position: absolute;
    left: 3px;
    top: 0;
}

.p3-room-statui-ballshadow{
    width: 16px;
    height: 8px;
    border-radius: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #1e1e1e;
}
.p3-room-statui-ballhighlight {
    width: 3px;
    height: 3px;
    border-radius: 100%;
    position: absolute;
    left: 14px;
    top: 4px;
    background-color: ghostwhite;
}

/* --- Placement Badges --- */
.p3-room-statui-place {
    font-size: 18px;
    margin-right: 8px;
    font-weight: bold;
    transform: rotate(-5deg);
    display: inline-block;

}
.p3-room-statui-participant-line {
    position: absolute;
    width: 80%;
    left: 15%;

    height: 4px;
    top: 1em;
}

.p3-room-statui-place1 {
    color: #ffd700; /* gold */
    transform: rotate(-10deg);
}

.p3-room-statui-place2 {
    color: #c0c0c0; /* silver */
    transform: rotate(5deg);
}

.p3-room-statui-place3 {
    color: #cd7f32; /* bronze */
    transform: rotate(-7deg);
}

/* --- Participant Names --- */
.p3-room-statui-participant-name {
    font-size: 14px;
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 1px #000;
    z-index: 3
}
/* --- attempt + time display --- */
.p3-room-statui-participant-info {
    margin-top: 4px;
    font-size: 13px;
    color: #ddd;
    z-index: 3;
}

.p3-room-statui-participant-attempt {
    color: #8ec7ff;
    margin-left: 8px;
    font-style: italic;
}

.p3-room-statui-participant-finaltime {
    color: #aaa;
    margin-left: 6px;
}

/* --- rings above name --- */
.p3-room-statui-ringline {
    height: 20px;
    margin-bottom: 3px;
}

/* --- highlight for YOU --- */
.p3-room-statui-you {
    background: rgba(0, 128, 255, 0.15);
    border-left: 3px solid #4aa3ff;
    border-radius: 4px;
    padding-left: 4px;
}

/* --- highlight for NEW 1st place --- */
.p3-room-statui-newfirst {
    color: #ffef5a !important;
    text-shadow: 0 0 8px #ffb300;
}



body {
    overflow: hidden;
    margin: 0;
    background-color: black;
    color: white;
}
.statemachine-debug {
    background-color: green;
    position: absolute;
    top: 30px;
    left: 20px;
    width: 200px;
    color: white;
    font-weight: bold;
}
.cc-setup-div {
    position: absolute;
    top: 0;
    left: 0;
}
.cc-setup-button {
    display: block;
    position: relative;
    background-color: white;
    margin: 5px;
    border: 1px solid black;
    padding: 5px;
}
.cc-setup-button-off {
    background-color: lightcoral;
}
.cc-setup-button-on {
    background-color: #1abc9c;
}

.c-card {
    position: absolute;
    top: 10px;
    left: 10%;
    min-height: 20px;
    font-size: 100px;
    background-color: #b945;
    color: black;
}

.ccard-div {
    position: absolute;
    margin-top: 2%;
    margin-left: 10%;
    width: 80%;
    min-height: 20px;
    background-color: rgba(145, 144, 144, 0.87);
    color: black;
    top: 0;
    padding-bottom: 10px;
}

.ccard-level {
    position: absolute;
    right: 2px;
    top: 2px;
    padding: 4px;
    border-left: 1px solid dimgray;
    border-right: 1px solid dimgray;
}
.ccard-mandcard {
    background: #1444;
    border: 1px solid lightgray;
    margin: 1px;
    padding: 4px;
    font-size: 300%;
    line-height: 1.1em;
    display: inline-block;
}

.ccard-pronunctiation {
    background: #1555;
    border: 3px solid #ffffff;
    margin: 2px;
    padding: 5px;
    font-size: 120%;
    display: inline-block;
}

.ccard-sentence {
    margin-top: 5px;
    color: #222;
    padding-right: 8em;
    background-color: rgba(0, 0, 0, 0.15);
    font-size: 70%;
    padding: 3px;
}
.ccard-sm {
    font-size: 200%;
    opacity: .9;
}
.ccard-altxx {
    font-size: 150%;
    top: 4px;
    position: relative;
}
.ccard-smselected {
    font-size: 240%;
    text-shadow: 0 0  2px #3d3d3d;
}
.ccard-rel {
    font-size: 80%;
    background-color: #bbbbbb;
    margin-right: 20%;
    padding-right: 5px;

}
.ccard-rel-m {
font-size: 160%;
}
.ccard-sm1 {
    color: #2c2929;
}
.ccard-sm2 {
    color: #2a2d2b;
}
.ccard-sm3 {
    color: #2c2d2f;
}
.ccard-sm4 {
    color: #2a282c;
}
.ccard-sm5 {
    color: #2f2f2f;
}
.ccard-meaning {
    padding-right: 8em;
    font-size: 80%;
}
.c-backgroundhanzi {
    position: absolute;
    background-color: #333;

    left: 0;
    right: 0;
    top: 140px;
    bottom: 0px;

    font-size: 60%;
    line-height: 1em;
}


:root {
    --pron-1: #e1401d;
    --pron-2: #5dec2d;
    --pron-3: #30bcef;
    --pron-4: #a925f0;
    --pron-5: #4d4d4d;

    --pron-1bg: #7d0a0a;
    --pron-2bg: #2a561a;
    --pron-3bg: #195b8e;
    --pron-4bg: #584496;
    --pron-5bg: #616161;
}
.ccard-pron-1 {
    border-color: var(--pron-1);
}
.ccard-mand-1 {
    color: var(--pron-1);
    background-color: #3222;
}
.ccard-pron-2 {
    border-color: var(--pron-2);
}
.ccard-mand-2 {
    color: var(--pron-2);
}
.ccard-pron-3 {
    border-color: var(--pron-3);
}
.ccard-mand-3 {
    color: var(--pron-3);
}
.ccard-pron-4 {
    border-color: var(--pron-4);
}
.ccard-mand-4 {
    color: var(--pron-4);
}
.ccard-pron-5 {
    border-color: var(--pron-5);
}
.ccard-mand-5 {
    color: var(--pron-5);
}
.ccard-examplesentence {
    display: inline-block !important;

}
.ccard-esmand {
    display: inline-block !important;
    font-size: 130%;
}
.c-reviewlist {
    background-color: #2a2a2a;
    position: absolute;
    bottom: 60px;
}
.c-reviewlist-char {
    margin: 3px;
}
.c-b-hanzi-shared {
}
.ccard-words {
    font-size: 60%;
    position: absolute;
    right: 2px;
    top: 20px;
    width: 8em;
    background-color: rgba(68, 68, 68, 0.78);
    bottom: 20px;
    overflow-y: scroll;
    z-index: 2000;
    pointer-events: all;
}
.ccard-matching-word {
    color: #5ce3c5;
}
.ccard-other-word {
    color: #b7337e;
}


.ccard-shared {
    position: absolute;
    right: 3em;
    text-align: right;
    top: 1em;
    width: 20px;
    height: 20px;
}
.ccard-shared-obj {
    max-width: 80px;
    width: 2em;
    margin: 5px;
    color: #292929;
}
.ccard-shared-table {
    top: 0px;
    left: 0px;
    margin: auto;
    color: #545454;
    padding-bottom: 5px;
}
.ccard-shared-1 {
    background-color: var(--pron-1bg);
    vertical-align: bottom;
    text-align: center;
}
.ccard-shared-2 {
    background-color: var(--pron-2bg);
    text-align:right;
    vertical-align: center;
}
.ccard-shared-3 {
    background-color: var(--pron-3bg);
    vertical-align: top;
    text-align: center;
}
.ccard-shared-4 {
    background-color: var(--pron-4bg);
    text-align: left;
    vertical-align: center;
}
.ccard-shared-5 {
    background-color: var(--pron-5);
}
.ccard-shared-char {
    display: inline-block;
    font-size: 95%;
}
.c-spinner-card {
    background-color: #888888;
    border: 2px solid black;
    text-align: center;
    font-size: 300%;
    line-height: 1.5em;
    text-shadow: 1px 1px lightgray;
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
}
.c-spinner-bg {
    position: absolute;
    font-size: 80%;
    left: 80px;
    top: 0px;
}
.c-spinner-card-tiny {
    position: absolute;
    top: 10px;
    color: white;
    font-size: 15%;
    width: 10px;
    height: 10px;
    line-height: 1em;
}

.s-statemachine {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 400px;
    height: 400px;
    background-color: #6666;
}
.s-contextMenu {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    display: none;
    z-index: 1000;
}
.s-edge-title {
    font-size: 200%;
    color: #0d9dda;
    text-shadow: 2px 2px black;
}
.s-edge-editor-title {
    color: white;
    font-size: 140%;
    text-shadow: 2px 2px black;
}
.s-statemachine-label {
    color: white;
    text-shadow: 1px 1px black;
    background-color: #222e;
    padding: 3px;
    border-radius: 6px;
    width: 80px;
}
.s-state-action-header {
    font-size: 120%;
    color: darkgray;
    text-shadow: 2px 2px black;
    display: inline-block;
    width: 200px;
}
.s-contextMenu div {
    padding: 8px 12px;
    cursor: pointer;
}

.s-contextMenu div:hover {
    background: #eee;
}
.s-edge-div {
    position: absolute;
    right: 30px;
    top: 440px;
    height: 300px;
    width: 400px;
    background-color: #6666;
}
.s-statemachine-state {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid #2d298e;
    box-shadow: 3px 3px #222222;
    background-color: #422488;
}
.s-statemachine-state-primary {
    border-color: white;
}
.s-statemachine-edge {
    position: absolute;
    height: 2px;
    background-color: yellow;
}
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  overflow: scroll;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
}

:root {
    --blue-sf: rgb(11,157,218);
    --strong-blue: rgb(1, 118, 211);
    --dark-blue: rgb(1,92,171);
    --darkest-blue: rgb(5,45,120);
    --light-blue: rgb(234,245,254);
    --light-blue-2: #D5EBFD;
    --light-blue-3: #EAF5FE;
    --light-blue-4: rgb(187,211,229);
    --border-bottom-hover-blue: #BAD0E1;
    --icon-blue: #0d9dda;
    --dark-gray: #59575C;
    --light-gray: rgb(204,204,204);
    --lighter-gray: rgb(235,235,235);
    --lightest-gray: rgb(245,245,245);
    --lightest-yellow: rgb(254,248,226);
    --yellow: rgba(251,226,153,0.5);
    --light-red: rgb(255,170,160);
    --trans-gray: rgb(0,0,0, 0.4);
    --green-gb: #0B827C;
    --light-brownish-gray: #F5F2F2;
}

html, body {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #5f5e5e;
    border-radius: 20px;
    border: 6px solid #76767685;
    background-clip: content-box;
}


body, html
{
    overscroll-behavior-x: none;
    background-color: #c2c8cc;
}
.window-container {
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    position: absolute;
    pointer-events: none;
}


.window-inner {

    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    
    padding-top: 20px;
    pointer-events: auto;

}

.window-header {
    position: absolute;
    padding: 5px;
    left: 0px;
    top: 0px;
    cursor: grab;
    width: 100%;
    height: 32px;
    background: #0f73c7;
    color: white;
    border: 1px solid black;
}
.window-default-modal-style {
    background-color: white;
    border-radius: 20px;
    box-shadow: 5px 5px 20px #333;
    padding: 20px;
    padding-top: 50px;
}

.window-close-button {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 32px;
    padding: 5px;
    height: 32px;
    cursor: pointer;
    text-align: center;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    background-color: #0f73c7;
    z-index: 4;
}
.window-close-button:hover {
 
    background-color: #4a96d7;
}
.window-close-button:active
{
    background-color: #6f9ec6;
}


.window-map-option
{
    padding: 3px;
}

.window-combo-editor-internal
{
    min-height: 400px;
    padding: 20px;
    border: 1px solid lightgray;
    min-width: 800px;
    min-height: 600px;
}
.window-combo-action-block
{
    display: inline-block;
    background-color: #f1f2f7;
    margin: 4px;
    padding: 4px;
}


body {
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: black;
    color: white;
}

/* width */
::-webkit-scrollbar {
    border-radius: 5px;
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.editor-play-fullscreen
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 0.49);
    z-index: 1000;
}
.editor-gamecontainer 
{
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    padding-top: 20px;
    pointer-events: auto;
}
.editor-gamecontainer-mobile {
	pointer-events: auto;
    display: flex;
}
.editor-gamewindow
{
    width: 1540px;
    height: 904px;
    border: 2px solid white;
    box-shadow: 10px 10px 10px black;
}
.editor-gamewindow-mobile {
	width: 100vw;
	height: 100vh;
	
}
.editor-mouseDebug
{    
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
}
.editor-debugConsole {
    position: absolute;
    top: 30px;
    left: 200px;
    color: red;
    text-shadow: 2px 2px black;
}
.editor-debugConsole-mobile {
    position: absolute;
    top: 30px;
    left: 30px;
    color: red;
    text-shadow: 2px 2px black;
    word-wrap: anywhere;
    font-size: 60%;
    font-weight: bold;
}
.ability-ui {
    display: inline-block;
    position: relative;
    top :0px;
    left: -20px;
    height: 0px;

}
.ability-ui-mobile {
	display: inline-block;
	position: absolute;
	top: 20px;
	left: 10px;
	height: 0px;
}

.ability-icon {
    background-color: black;
    border-radius: 10px;
    display: inline-block;
    
    margin-right: 20px;
    vertical-align: top;
	margin-bottom: 10px;
}
.ability-icon-standard {
	position: relative;
    width: 80px;
    height: 80px;
}

.ability-icon-cover {

    position: relative;
    top: 0px;
    left: 0px;
    border-radius: 8px;
    
}
.ability-icon-mobile {
		width: 40px;
		height: 40px;
		
		
}
.ability-title {
    font-size: 120%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0px 0px 6px black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    width: 140px;
    margin-top: 10px;
    pointer-events: none;
    border-right: 2px solid black;
    
}
.ability-exp {
    position: relative;   
    padding: 10px;
    width: 200px;
    font-size: 150%;
    border-radius: 10px;
    border-top-left-radius: 0px;
    text-shadow: 0px 0px 10px black;
    pointer-events: none;
    color: white;
    text-align: center;
}
.ability-title-mobile {
	position: absolute;
	left: 10px;
	top: 30vw;
	height: 12vw;
	font-size: 8vw;
	width: 80vw;
}
.ability-exp-mobile {
	position: absolute;
	left: 10px;
	top: 42vw;
	width: 90vw;
	font-size: 6vw;
	
	
}


.ability-image {
    position: relative;
    left: 0px;
    top: 0px;
    border-radius: 10px;
    background-color: white;
}
.ability-disabled {
    background-color: #00000088;
    opacity: 0.2;
    border: 1px solid black;
}
.ability-enabled {
    background-color: #0033ffff;
    border: 1px solid white;
}
.editor-gamebutton {
    background-color: lightcyan;
    width: 200px;
    padding: 20px;
    color: black;
    font-size: 90%;
    border-radius: 20px;
}
.editor-gamebutton:disabled {
    background-color: #111 !important;
}
.editor-gamebutton-mobile {
    width: 60vw;
    height: 10vh;
    font-size: 150%;
    border-radius: 5vw;
}
.editor-gamebutton-mobile:disabled {
    background-color: #111 !important;
    color: #333;
    border: 2px solid #333;
}
.editor-gamebutton-retry {
    width: 400px;
    height: 100px;
    font-size: 110%;
    background-color: #81d1ff;
}
.editor-gamebutton-retry-mobile {
    width: 80vw;
    font-size: 110%;
    background-color: #81d1ff;
}

.editor-gamebutton:hover {
    background-color: cyan;
}

.goal-ui {
    position: absolute;
    top: -10px;
    right: 0px;
    pointer-events: none;
}
.goal-ui-mobile {
	position: absolute;
	pointer-events: none;
	right: 10px;
	bottom: 10px;
	
}
.goal-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding-top: 10px;
    text-align: center;
    margin: 10px;
    border-radius: 10px;
    font-size: 150%;
    color: #9b834e;
    float: right;
    font-family: sans-serif;
}
.points-div {
    color: white;
    font-size: 200%;
    text-align: right;
    padding-right: 30px;
    pointer-events: none;
}
.goal-enabled {
    border: 2px solid white;
    background-color: gold;
   font-weight: bold;
   color: black;
    
}
.goal-disabled {
    border: 2px solid #8080806b;
    background-color: #8b451357;
}

.editor-popup-window-comboselect {
    width: 1080px!important;
    
}
.editor-notification {
    color: white;
    background-color: #00002288;
    width: 500px;
    position: absolute;
    margin: auto;
    left: 50%;
    top: 50%;
    font-size: 200%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 15px 4px 4px #33333333;
    text-align: center;
}
.editor-tutorialMessageText {
    padding-top: 1em;
}
.editor-notification-mobile {
	    color: white;
    background-color: #00002288;
    width: 80vw;
    position: absolute;
    margin: auto;
    left: 50%;
    top: 50%;
    font-size: 10vw;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid gray;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 15px 4px 4px #33333333;
    text-align: center;
	z-index: 1000;
}
.editor-tutorialContinue {
    display: inline-block;
    width: 100%;

}
.editor-notification-tutorial {
    left: 25% !important;
    top: 20% !important;
    text-align: center;
}
.editor-notification-tutorial-mobile {
    position: absolute;
    left: 0px;
    bottom: 25px;
    width: 80vw;
    background-color: #000000af;
    color: white;
    margin: 4vw;
    padding: 4vw;
    border-radius: 4vw;
    text-align: center;
}
.editor-combo-selector
{
    margin-top: 20px;
    width: 1050px;
    height: 650px;
    overflow-y: scroll;
    position: relative;
}
.editor-combo-selector-window {
    animation-name: editor-combo-selector-main;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.window-combo-editor-window-img
{
    width: 84px;
    height: 84px;
}

@keyframes editor-combo-selector-main {
    from {
        border-color: red;
    }

    to {
        border-color: yellow;
    }
}
.editor-combo-selector-mouse {
    animation-name: editor-combo-selector-mouse-anim;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes editor-combo-selector-mouse-anim {
    from {
        border-color: lime;
    }

    to {
        border-color: blue;
    }
}


.editor-dungeon-popup {
    width: 900px !important;
    height: 900px !important;
}
.editor-dungeon-layer-area {
    position: relative;
    width: 360px;
    height: 770px;
    overflow-y: scroll;
    background-color: #0008;
    padding-top: 16px;
    padding-bottom: 16px;
}
.editor-dungeon-layer {
    pointer-events: none;
    position: relative;
    width: 320px;
    height: 320px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    margin-left: 16px;
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
    background-size: 32px 32px;
    margin-bottom: 32px;
}
.editor-dungeon-layer:last-child
{
    margin-bottom: 0px;
}
.editor-dungeon-layer-label
{
    position: relative;
    display: inline-block;
    top: -20px;
    font-size: .8em;
}
.editor-dungeon-layer-delete
{
    position: relative;
    float: right;
    top: -20px;
    font-size: .8em;
    width: 20px;
    transition: .1s;
    background-color: #f003;
    text-align: center;

}
.editor-dungeon-layer-delete:hover
{
    cursor: pointer;
    background-color: red;
    color: black;
}
.editor-dungeon-cursor {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 32px;
    height: 32px;
    background-color: rgb(240 16 242 / 0.3);
    pointer-events: none;
}

.editor-overworld-popup {
    width: 1320px !important;
    height: 900px!important;
}

.editor-overworld-editor-background {
    position: relative;
    width:770px;
    height: 770px;
    overflow: hidden;
    background-size: 48px 48px;
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
    border: inset 1px;
}
.editor-overworld-cursor
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 48px;
    height: 48px;
    background-color: rgb(240 16 242 / 0.3);
    pointer-events: none;
}
.editor-overworld-moveable-map
{
    pointer-events: none;
    position: absolute;
    background-color: #ddd8;
}

.editor-playbar
{
    position: absolute;
    left: 257px;
    top: 0px;
    width: 190px;
    height: 40px;
    background-color: #000c;
    padding: 5px;
    z-index: 1001;
}
.editor-playbar > button
{
    width: 80px;
    text-align: center;
    margin-left: 10px;

}
.window-combo-editor
{
    position: absolute;
    left: 30px;
    top: 30px;
    height: 600px;
    min-width: 1000px;
    padding: 40px;
    margin: 30px;
    background-color: orange;
}
.window-combo-editor-window
{
    display: inline-block;
    width: 90px;
    height: 90px;
    background-color: black;
    margin-right: 20px;
    position: relative;    
    cursor: pointer;
}
.window-combo-editor-window:hover
{    
    background-color: #666;   
}
.window-combo-editor-window:active
{
    background-color: darkblue;
}
.window-editor
{
    padding: 30px;
    padding-top: 40px;
    pointer-events: auto;
}
#collision-window
{
    position: relative;
}
.editor-coll
{
    position: absolute;
    width: 42px;
    height: 42px;
    cursor: pointer;
    background-color: orange;
}
.editor-coll:hover
{
    border: 1px solid red;
}
.editor-coll-ul
{
    top: 0;
    left: 0;
}
.editor-coll-ur
{
    top: 0;
    right: 0;
}
.editor-coll-dr
{
    bottom: 0;
    right: 0;
}
.editor-coll-dl
{
    bottom: 0;
    left: 0;
}
.window-editormain
{
    background-color: white;
    border: 1px solid gray;
}

.window-project
{
    position: absolute;
    right: 0px;
    width: 200px;
    height: 99vh;
    overflow-y: scroll;
}

.window-combos
{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 256px;
    
}
.window-mapeditor
{
    position: absolute;
    left: 260px;
    top: 50px;
    bottom: 10px;
    right: 210px;

}
.window-editor-map-options
{
    position: absolute;
    top: 0px;
    left: 450px;
    min-width: 700px;

}
.map-option-control
{
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
}
.window-map-option
{
    display: inline-block;
    font-size: 80%;

}
.window-map-flag-list
{
    display: inline-block;
}
.window-map-flag
{
    display: inline-block;
    width: 40px;
    height: 32px;
    margin: 3px;
    font-size: .6em;
    border: 1px solid gray;
    border-top-right-radius: 20px;
    cursor: pointer;
    vertical-align: bottom;
    position: relative;
    top: 6px;
    line-height: 4;
}
.window-map-flag-active
{
    border-color: cyan;
}

#flag-player-start
{
    background-color: rgb(243 106 106 / 0.45)
}
#flag-2
{
    background-color: rgb(12 44 200 / 0.45);
}
#flag-doorway
{
    background-color: rgb(0 255 127 / 0.45);
}
#flag-treasure {
    background-color: rgb(212 175 55 / 0.45);
}
#flag-secret {
    background-color: pink;
}
.editor-popup-container {
    top: 0%;
    left: 0%;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 2000;
}
.editor-overworld-moveable-name-container {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    position: relative;
}


.editor-popup {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);

}

.editor-popup-button-area
{
    right: 20px;
    position: absolute;
    bottom: 20px;
    text-align: center;
}
.editor-popup-button
{
    position: relative;
    background-color: #222;
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 40px;
    transition: .2s;
    color: white;
    font-weight: bold;
    padding-left:20px;
    padding-right: 20px;
    margin-left: 20px; 
    margin-right: 20px;
    

}
.editor-popup-button:hover
{
    background-color: #444;
    border: 1px solid #eee;
    
}
.editor-popup-button:active
{
    background-color: #666;
    border: 1px solid white;
    top: 2px;
    left: 2px;
}
.editor-popup-button-cancel
{
    background-color: #c229;
}
.editor-popup-window
{
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    position: relative;
    width: 600px;
    height: 400px;
    background-color: #000b;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    padding: 20px;

    color: white;
}
.editor-popup-window-big
{
    width: 800px;
    height: 850px;
}
.editor-popup-content
{
    margin: 20px;
    display: flex;
    flex-direction: row;

}
.editor-popup-content > .form-row
{
    margin: 10px;
}



.editor-popup-title
{
    padding-bottom:12px;
    font-size: 1.5em;
    color: white;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #666;
}
.editor-popup-left
{
    display: inline-block;
    padding-right: 30px;
}
.editor-popup-right
{
    display: inline-block;
    position: relative;
    flex: 1;

}
.editor-overworld-moveable-map-name
{
    width: 100%;
    text-align: center;
    color: white;
    text-shadow: 0px 0px 10px black;
    overflow-wrap: break-word;
    font-size: 60%;
}

.editor-gov-container {
    padding-top: 20px;
    padding-left: 20px;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 260px;
    background-color: dimgray;
    color: white;
    width: 170px;
    font-size: 80%;
    z-index: 1000;
    display: none;
}
.editor-gov-container ul {
    padding-inline-start: 10px;
}
.editor-gov-children-hidden {
    display: none;
}
.editor-gov-gameObj
{
    position: relative;
    cursor: pointer;
    min-height: 12px;
}
.editor-gov-selected {
    background-color: rgba(173, 173, 119, 0.32) !important;
    font-weight: bold;
}
.editor-gov-clickable:hover {
    background-color: white;
    color: black;
}
.editor-gov-nosave {
    color: red !important;
}
.editor-gov-gameObj > .caret
{
}
.editor-gov-spacer {
    position: relative;
    height: 12px;
    display: inline-block;
}

.editor-sprite-popup {
    width: 900px !important;
    height: 600px !important;
}
.editor-sprite-tree
{
    background-color: white;
    width: 250px;
    height: 400px;
    color: black;
    border: 2px inset;
    padding-left: 4px;
}
.popup-window-help
{
    background-color: white;
    border-radius: 40px;
    width: 20px;
    height: 20px;
    color: orange;
    text-shadow: 0px 0px 1px red;
    font-weight: bold;
    text-align: center;
    line-height: 1.2em;
    cursor: pointer;
}

.popup-help-text
{
    position: absolute;
    min-width: 300px;

    background-color: #000d;
    border-radius: 10px;
    
    border: 2px solid white;
    right: 20px;
    bottom: 30px;
    color: white;

   font-weight: 100;
   text-shadow: none;
   margin: 10px;
   padding: 10px;

   opacity: 0;
   transition: .2s;
   text-align: left;
   pointer-events: none;
}

.popup-window-help:hover .popup-help-text
{
   opacity: 1;
}
.click_sprite_image
{
    display: inline-block;
     max-width: 20px;
     max-height: 20px;
     margin-right: 4px;
   
}

.editor-context-menu-container
{
    width: 100vw;
    height: 100vh;
    z-index: 50000;
    position: absolute;
}
.editor-context-menu
{
    background-color: #f1f3f4;
    border: 1px outset;
    padding: 2px;
    position: relative;
    width: 200px;
    word-break: keep-all;
}
.editor-context-menu-option
{
    border-radius: 3px;
    padding: 3px;
    cursor: pointer;
}
.editor-context-menu-option:hover
{
    background-color: rgb(0 60 255 / 0.12);
}
.editor-context-menu-option:active
{
    background-color: rgb(0 60 255 / 0.4);
}