@import "tailwind.css";
h1:focus {
    outline: none;
}

body {
    margin: 0;
    
    position: relative;
}


.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* From Uiverse.io by Spacious74 */
.container {
    border: solid 1px #8d8d8d;
    padding: 20px;
    border-radius: 20px;
    background-color: #fff;
}

    .container .heading {
        font-size: 1.3rem;
        margin-bottom: 20px;
        font-weight: bolder;
    }

.form {
    max-width: 40vw;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .form .btn-container {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .form .btn {
        padding: 10px 20px;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        border-radius: 10px;
        border: solid 1px #1034aa;
        border-bottom: solid 1px #90c2ff;
        background: linear-gradient(135deg, #0034de, #006eff);
        color: #fff;
        font-weight: bolder;
        transition: all 0.2s ease;
        box-shadow: 0px 2px 3px #000d3848, inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;
    }

        .form .btn:active {
            box-shadow: inset 0px 4px 5px #0070f0, inset 0px -4px 5px #002cbb;
            transform: scale(0.995);
        }

.input-field {
    position: relative;
}

    .input-field label {
        position: absolute;
        color: #8d8d8d;
        pointer-events: none;
        background-color: transparent;
        left: 15px;
        transform: translateY(0.6rem);
        transition: all 0.3s ease;
    }

    .input-field input {
        padding: 10px 15px;
        font-size: 1rem;
        border-radius: 8px;
        border: solid 1px #8d8d8d;
        letter-spacing: 1px;
        width: 100%;
        color:black;
    }

        .input-field input:focus,
        .input-field input:valid {
            outline: none;
            border: solid 1px #0034de;
        }

            .input-field input:focus ~ label,
            .input-field input:valid ~ label {
                transform: translateY(-51%) translateX(-10px) scale(0.8);
                background-color: #fff;
                padding: 0px 5px;
                color: #0034de;
                font-weight: bold;
                letter-spacing: 1px;
                border: none;
                border-radius: 100px;
            }

.form .passicon {
    cursor: pointer;
    font-size: 1.3rem;
    position: absolute;
    top: 6px;
    right: 8px;
}

.form .close {
    display: none;
}


/* width */
::-webkit-scrollbar {
    width: 30px;
    height: 30px !important;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: red;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
        width: 30px;
    }









.colorcontainer-items {
    display: flex;
    transform-style: preserve-3d;
    transform: perspective(1000px);
    gap: 10px;
    padding:5px;
}

.item-color {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 20px;
    border: none;
    outline: none;
    transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
    cursor: pointer;
}

    .item-color::after {
        position: absolute;
        content: "";
        inset: 0;
        width: 20px;
        height: 20px;
        background-color: var(--color);
        border-radius: 6px;
        
        pointer-events: none;
        transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
    }

    .item-color::before {
        position: absolute;
        content: attr(aria-color);
        left: 65%;
        bottom: 52px;
        font-size: 8px;
        line-height: 12px;
        transform: translateX(-50%);
        padding: 2px 0.25rem;
        background-color: #ffffff;
        border-radius: 6px;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
    }

    .item-color:hover {
        transform: scale(1.1);
        z-index: 99999;
    }

        .item-color:hover::before {
            opacity: 1;
            visibility: visible;
        }

    .item-color:active::after {
        transform: scale(1.1);
    }

    .item-color:focus::before {
        content: "Copy";
    }

    /* Sibling hover effects */
    .item-color:hover + * {
        transform: scale(1.2);
        z-index: 9999;
    }

        .item-color:hover + * + * {
            transform: scale(1.15);
            z-index: 999;
        }

    /* :has() is not widely supported yet in all browsers */
    .item-color:has(+ *:hover),
    .item-color:has(+ * + *:hover) {
        transform: scale(1.3);
        z-index: 9999;
    }










/* From Uiverse.io by Smit-Prajapati */
.radio-container {
    --main-color: #f7e479;
    --main-color-opacity: #f7e47929;
    --total-radio: 3;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 0.5rem;
    min-width: 200px;
    overflow: clip;
}

    .radio-container input {
        cursor: pointer;
        appearance: none;
    }

    .radio-container .glider-container {
        position: absolute;
        left: 2px;
        top: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(27, 27, 27, 1) 50%, rgba(0, 0, 0, 0) 100%);
        width: 1.5px;
    }

        .radio-container .glider-container .glider {
            position: relative;
            height: calc(100% / var(--total-radio));
            width: 100%;
            background: linear-gradient( 0deg, rgba(0, 0, 0, 0) 0%, var(--main-color) 60%, rgba(0, 0, 0, 0) 100% );
            transition: transform 0.5s cubic-bezier(0.37, 1.95, 0.66, 0.56);
        }

            .radio-container .glider-container .glider::before {
                content: "";
                position: absolute;
                height: 60%;
                width: 300%;
                top: 50%;
                transform: translateY(-50%);
                background: var(--main-color);
                filter: blur(10px);
            }

            .radio-container .glider-container .glider::after {
                content: "";
                position: absolute;
                left: 0;
                height: 100%;
                width: 300px;
                background: linear-gradient( 90deg, var(--main-color-opacity) 0%, rgba(0, 0, 0, 0) 100% );
            }

    .radio-container label {
        cursor: pointer;
        padding: 1rem;
        position: relative;
        color: #aba6a6;
        transition: all 0.3s ease-in-out;
    }

    .radio-container input:checked + label {
        color: var(--main-color);
    }

    .radio-container input:nth-of-type(1):checked ~ .glider-container .glider {
        transform: translateY(0);
    }

    .radio-container input:nth-of-type(2):checked ~ .glider-container .glider {
        transform: translateY(100%);
    }

    .radio-container input:nth-of-type(3):checked ~ .glider-container .glider {
        transform: translateY(200%);
    }

    .radio-container input:nth-of-type(4):checked ~ .glider-container .glider {
        transform: translateY(300%);
    }

    .radio-container input:nth-of-type(5):checked ~ .glider-container .glider {
        transform: translateY(400%);
    }

    .radio-container input:nth-of-type(6):checked ~ .glider-container .glider {
        transform: translateY(500%);
    }

    .radio-container input:nth-of-type(7):checked ~ .glider-container .glider {
        transform: translateY(600%);
    }

    .radio-container input:nth-of-type(8):checked ~ .glider-container .glider {
        transform: translateY(700%);
    }

    .radio-container input:nth-of-type(9):checked ~ .glider-container .glider {
        transform: translateY(800%);
    }

    .radio-container input:nth-of-type(10):checked ~ .glider-container .glider {
        transform: translateY(900%);
    }





.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-animation: fadeIn 1s ease both;
    animation: fadeIn 1s ease both;
    z-index: 50;
    backdrop-filter: blur(30px) brightness(0.5);
}

.dialog-box {
    border-radius: 8px;
    position: relative;
    /* backdrop-filter: brightness(0.5); */
    width: 100%;
    color: white;
    max-width: fit-content;
    box-shadow: 0 2px 10px rgb(0 0 0);
    
    border-radius: 20px;
    border: 1px solid #ffffff4d;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
    -webkit-animation: fadeIn 1s ease both;
    animation: fadeIn 1s ease both;
   
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
}

    .dialog-header h3 {
        margin: 0;
    }

.close-button {
    background: #ff00005e;
    border: none;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 0px;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid red;
    padding: 2px 5px;
    top: -45px;
}


.dialog-box .x {
    filter: grayscale(1);
    border: none;
    background: none;
    position: absolute;
    top: 4px;
    right: 15px;
    transition: ease filter, transform 0.3s;
    cursor: pointer;
    transform-origin: center;
    z-index:5;
}

    .dialog-box .x:hover {
        filter: grayscale(0);
        transform: scale(1.1);
    }

.dialog-body {
    padding: 20px;
}

.dialog-footer {
    border-top: 1px solid #ccc;
    text-align: right;
    position: relative;
}


@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.dialog-title {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.5);
    
    
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    width: 100%;
    text-align: center;
    opacity: .9;
    
}








.tabs {
    display: flex;
    gap: 8px;
}

.tab-group input {
    appearance: none;
}

.tab-group label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    line-height: 1.6;
    border: 1px solid #cccccc;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    position: relative;
    background-color: transparent;
    transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

    .tab-group label::after {
        content: "";
        position: absolute;
        bottom: -32px;
        left: 50%;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #0a3cff;
        transform: translateX(-50%);
        transform-origin: 0 0;
        scale: 0;
        opacity: 0;
        z-index: -1;
        transition: all 0.48s 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .tab-group label::before {
        content: "";
        position: absolute;
        top: -24px;
        left: 50%;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background-color: #0a3cff;
        transform: translate(-50%, -50%);
        z-index: -1;
        opacity: 0;
        scale: 0;
        transform-origin: 0 0;
        transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .tab-group label:hover {
        border-color: #0a3cff;
        color: #0a3cff;
    }

.tab-group input:checked + label {
    border-color: transparent;
    color: #ffffff;
    scale: 1.1;
}

    .tab-group input:checked + label::after {
        bottom: -16px;
        opacity: 1;
        scale: 1;
        box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1), 0rem 24px 24px rgba(10, 60, 255, 0.09), 0rem 55px 33px rgba(10, 60, 255, 0.05), 0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
    }

    .tab-group input:checked + label::before {
        opacity: 1;
        scale: 1;
        top: 50%;
        box-shadow: 0rem 6px 13px rgba(10, 60, 255, 0.1), 0rem 24px 24px rgba(10, 60, 255, 0.09), 0rem 55px 33px rgba(10, 60, 255, 0.05), 0rem 97px 39px rgba(10, 60, 255, 0.01), 0rem 152px 43px rgba(10, 60, 255, 0);
    }

.mud-collapse-container {
    justify-content: start;
}

.mud-collapse-wrapper-inner {
    margin-left: 20px;
}


.colorselected
{
    
}

    .colorselected::after {
        position: absolute;
        content: "";
        width: 25px;
        height: 25px;
        background-color: var(--color);
        box-shadow: white 0px 0px 4px 2px inset;
        pointer-events: none;
        inset: 0px;
        border-radius: 6px;
        border: 1px solid white;
        transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
    }




.BlankHover {
    width: 150px;
    height: 130px;
    border: 1px solid green;
    background: #0557051f;
    box-shadow: inset 0 0 15px #f5f5f53b, inset 2px 0px 15px #1edc00, inset -6px 0 25px #04cc00, inset 6px 0 80px #00cc44, inset -6px 0 80px #00cccc, 0 0 15px #dddddd7d, -3px 0 40px #3ccc005c, 3px 0 25px #66cc00ad;
}

    .BlankHover:hover {
        transform: scale(1.1);
        filter: saturate(2);
    }







.plus {
    --b: 10px;
    --c: #0000 90deg, #00ff28 0;
    width: 100%;
    /* padding: 50px; */
    aspect-ratio: 1;
    background: conic-gradient(from 90deg at var(--b) var(--b), var(--c)) calc(100% + var(--b) / 2) calc(100% + var(--b) / 2) / calc(50% + var(--b)) calc(50% + var(--b));
    display: inline-block;
    /* margin: 10px; */
    vertical-align: middle;
    transition: transform 0.3s ease, background 0.3s ease;
}

    .plus:hover {
        transform: rotate(10deg);
        --c: #0000 90deg, #ff00aa 0; /* changes green to pink on hover */
    }






/* Chromium/Edge/Safari (WebKit/Blink) */
.scrollbox::-webkit-scrollbar {
    width: 8px; /* vertical scrollbar width */
    height: 8px; /* horizontal scrollbar height */
}

.scrollbox::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollbox::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 4px;
}

    .scrollbox::-webkit-scrollbar-thumb:hover {
        background: #9e9e9e;
    }

/* Firefox */
.scrollbox {
    /* options: auto | thin | none */
    scrollbar-width: thin; /* reduces thickness */
    scrollbar-color: #bdbdbd #f1f1f1; /* thumb color | track color */
}

/* Optional: only horizontal scrollbar height (if needed) */
.scrollbox {
    overflow: auto; /* already set inline, but ok here too */
}





.FieldEditor {
    grid-area: FieldEditor;
    display: flex;
    gap: 10px;
    min-width: 300px;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.FieldEditor-Component {
    width: 100%;
    padding: 10px;
    justify-content: center;
    align-items: center;
    align-self: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    max-height: 200px;
    height: 200px;
    overflow: auto;
}




@media (max-width: 450px) {
    .category-card {
        width: 100%;
        min-width: 100%;
    }

    :deep(.category-card) {
        width: 100%;
    }
}





@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.skew-menu ul li span {
    display: block;
    padding: .4em .6em;
    color: inherit;
    text-decoration: none;
    transform: skew(25deg);
}


.selected li {
    color: tomato;
}

.menu-item-inactive {
    filter: brightness(0.6);
    border-right: 1px solid #99a800cc;
}

    .menu-item-inactive:hover {
        filter: brightness(1);
    }

.menu-item-active {
    background: #ffaf0082;
}



.skew-menu {
    text-align: center;
    width: max-content;
    font-size: .85em;
    margin-bottom: -7px;
}

    .skew-menu ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        list-style: none;
        transform: skew(-35deg);
    }

        .skew-menu ul li {
            float: left;
            border-right: 1px solid #00dbff4d;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            text-transform: uppercase;
            color: white;
            cursor: pointer;
            font-weight: bolder;
            transition: all 0.3s linear;
        }

            .skew-menu ul li:first-child {
                border-radius: 3px 0 0 3px;
            }

            .skew-menu ul li:last-child {
                border-right: none;
                border-radius: 0 3px 3px 0;
            }







.leveltoshowheader {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    /*left: 50%;
                background-image: url(img/black-orchid.png) !important;
    background-color: #00255b4d;
            width: 100%;
            
            
                    
            border-radius: 20px 20px 0px 0px;
            border: 1px solid #ffea4c5c; height: 30px;

            */
    padding: 5px;
}

.leveltoshowcontainer {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -0px);
}


.leveltoshowsphere {
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 50%;
    display: block;
    -moz-appearance: none;
    transition: opacity 0.3s ease-in-out;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: -webkit-linear-gradient(238deg, rgb(112 222 255) 48%, transparent 100%);
}

    .leveltoshowsphere:active {
        box-shadow: inset 0px 0px 5px 1px rgb(99 219 255);
        background: #fff6f636;
        opacity: 1 !important;
    }

    .leveltoshowsphere:hover {
        box-shadow: inset 0px 0px 5px 1px rgb(99 219 255);
        background: #fff6f636;
        opacity: 1 !important;
    }




.leveltoshowlink {
    opacity: 1;
    width: 50px;
    height: 1.5px;
    position: relative;
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.3s ease-in-out;
    appearance: none;
    box-shadow: 0px 0px 3px 2px #00c4ff;
    background-image: -webkit-linear-gradient(59deg, rgb(129 226 255) 10%, #62ff77a6 20%, #00989a 30%, #00fcff 40%, #68ffb2 60%, #7cf4f5a6 80%, #00fdff 100%);
}



/* Positioning pipes position through CSS variables */
.leveltoshowlink,
.leveltoshowsphere {
    transform: translate( var(--align-dx, 0px), var(--align-dy, 0px) );
    will-change: transform;
}

/* Your base layout */
.leveltoshowlink {
    grid-column: 1 / -1;
    left: 20px;
    height: 2px;
    width: calc(100% + 130px);
}

.leveltoshowsphere {
    position: absolute;
}

/* Visual state (Blazor toggles these classes) */
.is-active {
    opacity: 1;
    filter: none;
}

.is-inactive {
    opacity: 0.8;
    filter: grayscale(1);
}
    
    .leveltoshowlink-pending {
    opacity: 1;
    width: 50px;
    height: 1.5px;
    position: relative;
    display: block;
    -moz-appearance: none;
    -webkit-appearance: none;
    /* Glow animation */
    animation: glowPulse 2s ease-in-out infinite;
    appearance: none;
    box-shadow: 0px 0px 3px 2px #00c4ff;
    background-image: -webkit-linear-gradient(59deg, rgb(129 226 255) 10%, #62ff77a6 20%, #00989a 30%, #00fcff 40%, #68ffb2 60%, #7cf4f5a6 80%, #00fdff 100%);
}

.leveltoshowsphere-pending {
    width: 20px;
    height: 20px;
    position: relative;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    /* Keep your existing appearance resets */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    /* Existing gradient background */
    background-image: -webkit-linear-gradient(238deg, rgb(197 220 0) 48%, transparent 100%);
    /* Smooth opacity transitions as you had */
    /* Glow animation */
    animation: glowPulse 2s ease-in-out infinite;
    /* Initial glow so it looks lit even at rest */
    box-shadow: rgb(0 88 255 / 60%) 0px 0px 6.05456px 0px, rgb(123 212 255 / 67%) 0px 0px 12.1091px 0px, rgb(77 180 255 / 20%) 0px 0px 12.1091px 0px !important;
}


/* Keyframes to pulse the glow subtly */
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 1px 2px rgba(123, 212, 255, 0.6), 0 0 6px rgba(123, 212, 255, 0.35), 0 0 12px rgba(123, 212, 255, 0.2);
        filter: drop-shadow(0 0 2px rgba(123, 212, 255, 0.3));
    }

    50% {
        box-shadow: 0 0 1px 5px rgba(123, 212, 255, 0.85), 0 0 10px rgba(123, 212, 255, 0.6), 0 0 16px rgba(123, 212, 255, 0.4);
        filter: drop-shadow(0 0 3px rgba(123, 212, 255, 0.5));
    }

    100% {
        box-shadow: 0 0 1px 3px rgba(123, 212, 255, 0.6), 0 0 6px rgba(123, 212, 255, 0.35), 0 0 12px rgba(123, 212, 255, 0.2);
        filter: drop-shadow(0 0 2px rgba(123, 212, 255, 0.3));
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .glow-dot {
        animation: none;
    }
}


.griddygrid {
    display: grid;
    grid-template-areas: "a b c"
        "d e f"
        "g h i";
}

.circle {
    background: blue;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}



.checkbox-wrapper-51 input[type="checkbox"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-51 .toggle {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
}

    .checkbox-wrapper-51 .toggle:before {
        content: "";
        position: relative;
        top: 1px;
        left: 1px;
        width: 40px;
        height: 22px;
        display: block;
        background: #c8ccd4;
        border-radius: 12px;
        transition: background 0.2s ease;
    }

    .checkbox-wrapper-51 .toggle span {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        display: block;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(154,153,153,0.75);
        transition: all 0.2s ease;
    }

        .checkbox-wrapper-51 .toggle span svg {
            margin: 7px;
            fill: none;
        }

            .checkbox-wrapper-51 .toggle span svg path {
                stroke: #c8ccd4;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 24;
                stroke-dashoffset: 0;
                transition: all 0.5s linear;
            }

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle:before {
    background: #52d66b;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span {
    transform: translateX(18px);
}

    .checkbox-wrapper-51 input[type="checkbox"]:checked + .toggle span path {
        stroke: #52d66b;
        stroke-dasharray: 25;
        stroke-dashoffset: 25;
    }






.drawer {
    position: absolute;
    left: -500px;
    width: fit-content;
}

.drawer-toggle {
    width: fit-content;
    position: sticky;
    left: 0px;
}

body {
    margin: 0;
    min-height: 100dvh;
    height: 100dvh;
    background-image: url(img/black-orchid.png) !important;
    background-color: #00425d !important;
}



.page-content {
}


.page-content-toggle {
}

body {
    margin: 0px !important;
    padding: 0px;
}

.radio-wrapper-20 input[type="radio"]:focus {
    outline: 0;
    border-color: #2260ff;
    box-shadow: 0 0 0 4px #b5c9fc;
}

.radio-wrapper-20 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-content: flex-start;
}

    .radio-wrapper-20 input[type="radio"] {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

        .radio-wrapper-20 input[type="radio"]:checked + span {
            box-shadow: 0 0 0 0.0625em red;
            background: repeating-linear-gradient(45deg, red, #ffffff00 .97px);
            font-size: 1.1em;
            color: white;
        }

    .radio-wrapper-20 label span {
        display: block;
        cursor: pointer;
        position: relative;
        font-size: .8em;
        letter-spacing: .05em;
        color: lightgrey;
        text-align: center;
        transition: background-color .5s ease;
    }

    .radio-wrapper-20 label:first-child span {
        border-radius: .375em 0 0 .375em;
    }

    .radio-wrapper-20 label:last-child span {
        border-radius: 0 .375em .375em 0;
    }














/* From Uiverse.io by vinodjangid07 */
.buttonpublish {
    width: 110px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: rgb(161, 255, 20);
    border-radius: 30px;
    color: rgb(19, 19, 19);
    font-weight: 600;
    border: none;
    position: relative;
    cursor: pointer;
    transition-duration: .2s;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.116);
    padding-left: 8px;
    transition-duration: .5s;
}

.svgIconpublish {
    height: 25px;
    transition-duration: 1.5s;
}

.bellpublish path {
    fill: rgb(19, 19, 19);
}

.buttonpublish:hover {
    background-color: rgb(192, 255, 20);
    transition-duration: .5s;
}

.buttonpublish:active {
    transform: scale(0.97);
    transition-duration: .2s;
}

.buttonpublish:hover .svgIcon {
    transform: rotate(250deg);
    transition-duration: 1.5s;
}


.homecontainer {
    display: grid;
    grid-template-areas: "homeside hometitle"
        "homeside homebody";
    grid-template-rows: auto 1fr;
    color: white;
    margin-right: 20px;
    gap: 10px;
    grid-template-columns: auto 1fr;
    margin-right: 2vw;
    margin-left: 1vw;
    margin-bottom: 1vw;
}

.homeside {
    grid-area: homeside;
}

body {
    margin: 0;
    padding: 0;
    min-width: 100vw; /* Prevent horizontal scroll from affecting the menu */
}


.menu-bar {
    position: fixed;
    top: 0;
    padding: 0px 10px 0px 10px;
    border-radius: 0px 0px 10px 10px;
    /* left: 0; */
    /* width: 100%; */
    /* background-color: #333; */
    color: white;
    height: 40px;
    z-index: 1000;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    backdrop-filter: blur(10px);
    /* background: #0D2923; */
    overflow: hidden;
    box-shadow: 0 1px 2px 2px rgb(0 0 0 / 60%);
    z-index: -1;
}

    .menu-bar.scrolled {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.4); /* slightly more visible */
    }




.project-container {
    max-width: 1200px;
    margin: auto;
}

/* Category Card */
.category-card {
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
    width: max-content;
    min-width: 200px;
    background: #00008b21;
    border: 1px solid #ffffff57;
}




/* Fancy Gradient Header */
.category-header {
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    padding: 5px;
    color: white;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
}

    .category-header h2 {
        font-size: 1.5rem;
        margin: 0;
        text-align: center;
    }

/* Subcategory */
.subcategory {
    padding: 5px;
    border-top: 1px solid #eee;
}

    .subcategory h3 {
        font-size: 1.2rem;
        color: #ffffff;
    }

/* Projects Grid */
.projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 5px;
}

/* Project Card */
.project-card {
    /* background-color: #fafafa; */
    border-radius: 10px;
    padding: 15px;
    border: 1px solid;
    color: white;
    transition: all 0.3s ease;
    padding: 5px;
    padding-left: 10px;
    cursor: pointer;
    width: 100%;
    color: #ffffff94;
}

.svghover {
    color: #ff00009c;
}

    .svghover:hover {
        color: red;
    }

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.project-card h4 {
    font-size: 1rem;
    /* margin-bottom: 8px; */
    color: goldenrod;
}

.project-card p {
    font-size: 0.95rem;
    color: #555;
}


.iconhover {
}

    .iconhover:hover {
        filter: drop-shadow(0px 2px 3px black) invert(1);
    }





.workflownamehover {
    cursor: pointer;
}


    .workflownamehover:hover {
        text-shadow: 0px -1px 8px #ffffff;
    }

.logo {
    background-image: url(img/Logo.svg);
    width:50px;
    height:50px

}






@property --a {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: true;
}

.rotatingbox {
    position: relative;
    width: 20rem;
    height: 20rem;
    border-radius: 10px;
    background: repeating-conic-gradient(from var(--a),#00abf0 0%, #00abf0 5%, transparent 5%, transparent 40%, #00abf0 50%);
    animation: animate 4s linear infinite;
}

@keyframes animate {
    0% {
        --a: 0deg;
    }

    100% {
        --a: 360deg;
    }
}

.rotatingbox::before {
    content: '';
    position: absolute;
    width: 110%;
    height: 110%;
    top:-5%;
    left:-5%;
    border-radius: 10px;
    background: repeating-conic-gradient(from var(--a),#00abf0 0%, #00abf0 5%, transparent 5%, transparent 40%, #00abf0 50%);
    animation: animate 4s linear infinite;
    animation-delay: -1s;
}

.rotatingbox::after {
    content: '';
    position: absolute;
    width: 96%;
    height: 96%;
    background: #1a3142;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}