/* DEFINED FONT SIZES */

.stw-fs-1 {
    font-size: 14px;
}

.font-roboto {
    font-family: 'Roboto Condensed', sans-serif;
}

.ace_editor, .ace_editor * {
    font-family: monospace !important;
}


.gradient-text {
    background: linear-gradient(105deg, rgb(255, 255, 255) 0%, rgb(97, 106, 115) 100%) text !important;
    -webkit-box-decoration-break: clone !important;
    -webkit-text-fill-color: transparent !important;
    color: unset !important;
    padding-bottom: 0.13em !important;
}

.gradient-text-animated {
    background: linear-gradient(
        to right,
        var(--stw-gray-3) 50%,
        var(--stw-gray-4) 60%,
        var(--stw-gray-4) 70%,
        var(--stw-gray-3) 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 200% auto; /* Adjusted for animation */
    animation: textShine 5s linear infinite; /* Smooth left-to-right animation */
}

/* Keyframes for the animation */
@keyframes textShine {
    0% {
        background-position: 100% 0; /* Start off-screen left */
    }
    100% {
        background-position: -100% 0; /* Move to off-screen right */
    }
}

.activate_in_side_bar {
    color: rgb(207, 45, 67) !important;
    text-shadow: 
        0 0 5px rgba(207, 45, 67, 0.5), 
        0 0 10px rgba(207, 45, 67, 0.4), 
        0 0 15px rgba(207, 45, 67, 0.3),
        0 0 20px rgba(207, 45, 67, 0.2), 
        0 0 25px rgba(207, 45, 67, 0.1) !important; 
    animation: pulsate 0.5s infinite alternate !important; 
}

@keyframes pulsate {
    0% {
        text-shadow: 
            0 0 5px rgba(207, 45, 67, 0.1), 
            0 0 10px rgba(207, 45, 67, 0.05), 
            0 0 15px rgba(207, 45, 67, 0); 
    }
    100% {
        text-shadow: 
            0 0 15px rgba(207, 45, 67, 1),  
            0 0 30px rgba(207, 45, 67, 0.95), 
            0 0 50px rgba(207, 45, 67, 0.9), 
            0 0 70px rgba(207, 45, 67, 0.85), 
            0 0 100px rgba(207, 45, 67, 0.8);
    }
}

.activate_in_side_bar svg {
    filter: drop-shadow(0 0 5px rgba(207, 45, 67, 0.5))
            drop-shadow(0 0 10px rgba(207, 45, 67, 0.4))
            drop-shadow(0 0 15px rgba(207, 45, 67, 0.3))
            drop-shadow(0 0 20px rgba(207, 45, 67, 0.2))
            drop-shadow(0 0 25px rgba(207, 45, 67, 0.1)) !important;
    animation: pulsateSvg 0.5s infinite alternate !important;
}

@keyframes pulsateSvg {
    0% {
        filter: drop-shadow(0 0 5px rgba(207, 45, 67, 0.1))
                drop-shadow(0 0 10px rgba(207, 45, 67, 0.05))
                drop-shadow(0 0 15px rgba(207, 45, 67, 0));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(207, 45, 67, 1))
                drop-shadow(0 0 30px rgba(207, 45, 67, 0.95))
                drop-shadow(0 0 50px rgba(207, 45, 67, 0.9))
                drop-shadow(0 0 70px rgba(207, 45, 67, 0.85))
                drop-shadow(0 0 100px rgba(207, 45, 67, 0.8));
    }
}

.title-bar {
    --color : var(--stw-red-color);
    min-width: 4px;
    min-height: 40px;
    border-radius: 9999px;
    background: var(--color);
    box-shadow: 0 0 5px var(--color), 0 0 10px var(--color), 0 0 15px var(--color), 0 0 20px var(--color);
    filter: brightness(1);
}

.group:hover .arrow {
    color: var(--stw-red-color);
    text-shadow: 0 0 5px var(--color), 0 0 10px var(--color), 0 0 15px var(--color), 0 0 20px var(--color);
}