@media (max-width: 767.98px)
{
    .jf-DesktopView
    {
        display: none;
    }
}

/* Hide cards on larger screens */
@media (min-width: 768px)
{
    .jf-MobileView
    {
        display: none;
    }
}

/*Width of div as width of media */
.jf-mediawidth
{
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 0.4em;
    grid-row-gap: 0.4em;
    grid-auto-rows: minmax(100px,auto);
    padding: 0em;
}

    .jf-mediawidth > div
    {
        padding: 0em;
        background: #eee;
    }

.jf-column-container
{
    display: flex !important; /* Forces flex behavior */
    flex-direction: row; /* Ensures items are in a line */
    --column-gap: 2px;
    --alignitems: start; /* [center | end | start | stretch] */
    gap: var(--column-gap);
    width: 100%;
    align-items: var(--alignitems);
}

.jf-column-auto
{
    flex: 0 1 auto; /* Only takes up as much space as the content needs */
    white-space: nowrap; /* Prevents text from wrapping to a second line */
}

.jf-column-full
{
    flex: 1; /* Tells the div to grow and fill the rest of the parent */
}

.jf-scroll
{
    --jf-scroll-height: 300px;
    border: 1px solid #e0e0e0;
    overflow: auto;
    box-sizing: border-box;
    height: var(--jf-scroll-height);
}

    .jf-scroll.y
    {
        border: 1px solid #e0e0e0;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .jf-scroll.x
    {
        border: 1px solid #e0e0e0;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .jf-scroll.h10
    {
        border: 1px solid #e0e0e0;
        overflow: auto;
        box-sizing: border-box;
        height: 10vh;
    }

    .jf-scroll.h20
    {
        border: 1px solid #e0e0e0;
        overflow: auto;
        box-sizing: border-box;
        height: 20vh;
    }

    .jf-scroll.h30
    {
        border: 1px solid #e0e0e0;
        overflow: auto;
        box-sizing: border-box;
        height: 30vh;
    }

    .jf-scroll.h40
    {
        border: 1px solid #e0e0e0;
        overflow: auto;
        box-sizing: border-box;
        height: 40vh;
    }

    .jf-scroll.h50
    {
        border: 1px solid #e0e0e0;
        overflow: auto;
        box-sizing: border-box;
        height: 50vh;
    }

@media(min-width:700px)
{
    .jf-mediawidth
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 0.4em;
        grid-row-gap: 0.4em;
        grid-auto-rows: minmax(100px,auto);
        padding: 0.2em;
    }
}

@media(min-width: 768px)
{
    .jf-mediawidth
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 0.4em;
        grid-row-gap: 0.4em;
        grid-auto-rows: minmax(100px,auto);
        padding: 0.2em;
    }
}


@media(min-width: 992px)
{
    .jf-mediawidth
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
        grid-auto-rows: minmax(200px,auto);
        padding: 1em;
    }
}

@media(min-width:1200px)
{
    .jf-mediawidth
    {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
        grid-auto-rows: minmax(300px,auto);
        padding: 1em;
    }
}

.jf-black
{
    background-color: black;
    color: white;
}

.jf-blue
{
    background-color: blue;
    color: white;
}

.jf-green
{
    background-color: green;
    color: white;
}

.jf-gold
{
    background-color: goldenrod;
    color: darkgoldenrod;
}

.jf-red
{
    background-color: red;
    color: white;
}



.jf-Labele-md
{
    font-size: medium;
    font-weight: bold;
}

.jf-Labele-lg
{
    font-size: large;
    font-weight: bold;
}

.jf-MiddleAligin
{
    display: flex;
    align-items: center;
}

.jf-TopAligin
{
    display: flex;
    align-items: start;
}

.jf-BottomAligin
{
    display: flex;
    align-items: end;
}

.jf-LeftAligin
{
    display: flex;
    justify-content: left;
}

.jf-RightAligin
{
    display: flex;
    justify-content: right;
}

.jf-CenterAligin
{
    display: flex;
    justify-content: center;
}

.jf-center
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.jf-notifcation
{
    width: 50px;
    height: 50px;
    padding-top: 10px;
    background-color: red;
    border-radius: 50%;
    border: 3px solid yellow;
    color: blue;
}

.jf-Button-sm
{
    padding: 4px;
    font-size: small;
    min-width: 60px;
}

.jf-Button-md
{
    padding: 8px;
    font-size: medium;
    min-width: 80px;
}


.jf-Button-lg
{
    padding: 15px;
    font-size: large;
    min-width: 100px;
}


.jf-Button-icon-md img
{
    display: inline-block;
    width: 32px;
    height: 32px;
}

.jf-Button-icon-md span
{
    display: inline-block;
    font-size: medium;
    color: red;
}

.jf-Button-icon-lg img
{
    display: inline-block;
    width: 80px;
    height: 80px;
}

.jf-Button-icon-lg span
{
    display: inline-block;
    font-size: large;
    color: red;
}

.jf-Button-xlg
{
    padding: 10px 26px 10px 26px;
    font-size: large;
}

.jf-Button-icon-xlg img
{
    display: inline-block;
    width: 100px;
    height: 100px;
}

.jf-Button-icon-xlg span
{
    display: inline-block;
    font-size: x-large;
    color: red;
}


.jf-Button-xlg
{
    padding: 15px 30px 15px 30px;
    font-size: x-large;
}

.jf-animation-shake:hover
{
    background-position: right;
    transform: scale(1.02);
    transition-duration: 2s;
    animation: shake 1s;
}

.jf-animation-rotating360:hover
{
    background-position: right;
    transform: scale(1.02);
    transition-duration: 2s;
    animation: rotate 1s linear normal;
}

.jf-animation-scaleout:hover
{
    background-position: right;
    transform: scale(1.001);
    transition-duration: 0.1s;
}


.jf-animation-Colorflicker:hover
{
    background-position: right;
    transform: scale(1.02);
    transition-duration: 2s;
    animation: Colorflicker 2s linear normal;
}



.jf-column
{
    margin: 5px;
    text-align: justify;
    column-gap: 10px;
    column-rule: 1px solid #ccc;
}

/* Adjust for tablets */
@media (min-width: 768px)
{
    .jf-column
    {
        column-width: 300px; /* Fixed width, browser decides how many columns fit */
    }
}

/* Adjust for larger screens */
@media (min-width: 1024px)
{
    .jf-column
    {
        column-width: 400px; /* Wider columns on desktops */
    }
}

/*Green Button*/
.jf-Button-Green
{
    background: #2ea607;
    background-image: -webkit-linear-gradient(top, #2ea607, #f4fcf4);
    background-image: -moz-linear-gradient(top, #2ea607, #f4fcf4);
    background-image: -ms-linear-gradient(top, #2ea607, #f4fcf4);
    background-image: -o-linear-gradient(top, #2ea607, #f4fcf4);
    background-image: linear-gradient(to bottom, #2ea607, #f4fcf4);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: inline-block;
    border-radius: 6px;
    color: #5e5757;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border: solid #42de33 2px;
    text-decoration: none;
}

    .jf-Button-Green:hover
    {
        background: #e7f7e6;
        background-image: -webkit-linear-gradient(top, #e7f7e6, #2ea607);
        background-image: -moz-linear-gradient(top, #e7f7e6, #2ea607);
        background-image: -ms-linear-gradient(top, #e7f7e6, #2ea607);
        background-image: -o-linear-gradient(top, #e7f7e6, #2ea607);
        background-image: linear-gradient(to bottom, #e7f7e6, #2ea607);
        text-shadow: 0px 1px 3px #419441;
        -webkit-box-shadow: 1px 1px 7px #40d40f;
        -moz-box-shadow: 1px 1px 7px #40d40f;
        box-shadow: 1px 1px 7px #40d40f;
        text-decoration: none;
        color: blue;
        background-position: right;
        /*        transform: scale(1.05);
        transition-duration: 2s;*/
    }

    .jf-Button-Green:active
    {
        transform: scale(1);
        color: red;
        transition-duration: 2s;
    }


/*Red Button*/
.jf-Button-Red
{
    background: #fa0505;
    background-image: -webkit-linear-gradient(top, #fa0505, #f7bcc1);
    background-image: -moz-linear-gradient(top, #fa0505, #f7bcc1);
    background-image: -ms-linear-gradient(top, #fa0505, #f7bcc1);
    background-image: -o-linear-gradient(top, #fa0505, #f7bcc1);
    background-image: linear-gradient(to bottom, #fa0505, #f7bcc1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    color: yellow;
    cursor: pointer;
    text-shadow: 0px 1px 0px #ffee66;
    text-align: center;
    font-weight: bold;
    border: solid #f0939e 3px;
    text-decoration: none;
}

    .jf-Button-Red:hover
    {
        background: #f7e1e3;
        background-image: -webkit-linear-gradient(top, #f7e1e3, #c20606);
        background-image: -moz-linear-gradient(top, #f7e1e3, #c20606);
        background-image: -ms-linear-gradient(top, #f7e1e3, #c20606);
        background-image: -o-linear-gradient(top, #f7e1e3, #c20606);
        background-image: linear-gradient(to bottom, #f7e1e3, #c20606);
        text-decoration: none;
        color: blue;
        /*background-position: right;
        transform: scale(1.05);
        transition-duration: 2s;*/
    }


/*Gold Button*/
.jf-Button-Gold
{
    background: #fabc03;
    background-image: -webkit-linear-gradient(top, #fabc03, #f7eed2);
    background-image: -moz-linear-gradient(top, #fabc03, #f7eed2);
    background-image: -ms-linear-gradient(top, #fabc03, #f7eed2);
    background-image: -o-linear-gradient(top, #fabc03, #f7eed2);
    background-image: linear-gradient(to bottom, #fabc03, #f7eed2);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-weight: bold;
    text-shadow: 0px 1px 0px #ffee66;
    text-align: center;
    font-weight: bold;
    border: solid #f7d00d 2px;
    text-decoration: dotted;
}

    .jf-Button-Gold:hover
    {
        background: #f7eed2;
        background-image: -webkit-linear-gradient(top, #f7eed2, #fabc03);
        background-image: -moz-linear-gradient(top, #f7eed2, #fabc03);
        background-image: -ms-linear-gradient(top, #f7eed2, #fabc03);
        background-image: -o-linear-gradient(top, #f7eed2, #fabc03);
        background-image: linear-gradient(to bottom, #f7eed2, #fabc03);
        text-decoration: none;
        /*background-position: right;
        transform: scale(1.05);
        transition-duration: 2s;*/
    }


/*Blue Button*/
.jf-Button-Blue
{
    background: #1a5f8c;
    background-image: -webkit-linear-gradient(top, #1a5f8c, #48a3db);
    background-image: -moz-linear-gradient(top, #1a5f8c, #48a3db);
    background-image: -ms-linear-gradient(top, #1a5f8c, #48a3db);
    background-image: -o-linear-gradient(top, #1a5f8c, #48a3db);
    background-image: linear-gradient(to bottom, #1a5f8c, #48a3db);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    color: #ffffff;
    box-shadow: 1px 1px 7px #055081;
    text-shadow: 0px 1px 0px #ffee66;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

    .jf-Button-Blue:hover
    {
        background: #bddef2;
        background-image: -webkit-linear-gradient(top, #bddef2, #0e5682);
        background-image: -moz-linear-gradient(top, #bddef2, #0e5682);
        background-image: -ms-linear-gradient(top, #bddef2, #0e5682);
        background-image: -o-linear-gradient(top, #bddef2, #0e5682);
        background-image: linear-gradient(to bottom, #bddef2, #0e5682);
        -webkit-box-shadow: 1px 1px 7px #40d40f;
        -moz-box-shadow: 1px 1px 7px #40d40f;
        box-shadow: 1px 1px 7px #7ee5f7;
        text-decoration: none;
    }

.jf-Button-Blue2
{
    background: #0727a6;
    background-image: -webkit-linear-gradient(top, #071aed, #888df8);
    background-image: -moz-linear-gradient(top, #071aed, #888df8);
    background-image: -ms-linear-gradient(top, #071aed, #888df8);
    background-image: -o-linear-gradient(top, #071aed, #888df8);
    background-image: linear-gradient(to bottom, #071aed, #888df8);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: inline-block;
    border-radius: 6px;
    color: white;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border: solid #3366de 2px;
    text-decoration: none;
}

    .jf-Button-Blue2:hover
    {
        background: #a0ccf6;
        background-image: -webkit-linear-gradient(top, #888df8,#071aed);
        background-image: -moz-linear-gradient(top, #888df8,#071aed);
        background-image: -ms-linear-gradient(top, #888df8,#071aed);
        background-image: -o-linear-gradient(top,#888df8,#071aed);
        background-image: linear-gradient(to bottom,#888df8,#071aed );
        text-shadow: 0px 1px 3px #536786;
        -webkit-box-shadow: 1px 1px 7px #40d40f;
        -moz-box-shadow: 1px 1px 7px #40d40f;
        box-shadow: 1px 1px 7px #55b8f8;
        text-decoration: none;
        color: yellow;
        background-position: right;
        /*        transform: scale(1.05);
        transition-duration: 2s;*/
    }

    .jf-Button-Blue2:active
    {
        transform: scale(1);
        color: red;
        transition-duration: 2s;
    }


/*Pink Button*/
.jf-Button-Pink
{
    background: #1a5f8c;
    background-image: -webkit-linear-gradient(top, #8d1a8a, #d94ad6);
    background-image: -moz-linear-gradient(top, #8d1a8a, #d94ad6);
    background-image: -ms-linear-gradient(top, #8d1a8a, #d94ad6);
    background-image: -o-linear-gradient(top, #8d1a8a, #d94ad6);
    background-image: linear-gradient(to bottom, #8d1a8a, #d94ad6);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    display: inline-block;
    color: #ffffff;
    text-shadow: 0px 1px 0px #f16efb;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
}

    .jf-Button-Pink:hover
    {
        background: #bddef2;
        background-image: -webkit-linear-gradient(top, #d94ad6, #8d1a8a);
        background-image: -moz-linear-gradient(top, #d94ad6, #8d1a8a);
        background-image: -ms-linear-gradient(top, #d94ad6, #8d1a8a);
        background-image: -o-linear-gradient(top, #d94ad6, #8d1a8a);
        background-image: linear-gradient(to bottom, #d94ad6, #8d1a8a);
        -webkit-box-shadow: 1px 1px 7px #b393b5;
        -moz-box-shadow: 1px 1px 7px #b393b5;
        box-shadow: 1px 1px 7px #b393b5;
        text-decoration: none;
    }




/*Grey Button*/
.jf-Button-Grey
{
    background: #f5f2f5;
    background-image: -webkit-linear-gradient(top, #f5f2f5, #d1d1d1);
    background-image: -moz-linear-gradient(top, #f5f2f5, #d1d1d1);
    background-image: -ms-linear-gradient(top, #f5f2f5, #d1d1d1);
    background-image: -o-linear-gradient(top, #f5f2f5, #d1d1d1);
    background-image: linear-gradient(to bottom, #f5f2f5, #d1d1d1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    display: inline-block;
    border-radius: 6px;
    border: solid #dbddde 2px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

    .jf-Button-Grey:hover
    {
        background: #cdd1d4;
        background-image: -webkit-linear-gradient(top, #cdd1d4, #ededed);
        background-image: -moz-linear-gradient(top, #cdd1d4, #ededed);
        background-image: -ms-linear-gradient(top, #cdd1d4, #ededed);
        background-image: -o-linear-gradient(top, #cdd1d4, #ededed);
        background-image: linear-gradient(to bottom, #cdd1d4, #ededed);
        text-decoration: none;
        background-position: right;
        transition-duration: 2s;
    }



/*twitter Button*/
.jf-twitterButton
{
    box-shadow: 0px 1px 0px 0px #fff6af;
    background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color: #ffec64;
    border-radius: 6px;
    border: 1px solid #ffaa22;
    display: inline-block;
    cursor: pointer;
    color: #333333;
    font-size: large;
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0px 1px 0px #ffee66;
    text-align: center;
    text-decoration: none;
}

.twitterButton:hover
{
    background: linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
    background-color: #ffab23;
}

.jf-padding1
{
    padding: 1px;
}

.jf-padding2
{
    padding: 2px;
}

.jf-padding3
{
    padding: 3px;
}

.jf-padding4
{
    padding: 4px;
}

.jf-padding5
{
    padding: 5px;
}

.jf-padding6
{
    padding: 6px;
}

.jf-padding7
{
    padding: 7px;
}

.jf-padding8
{
    padding: 8px;
}

.jf-padding9
{
    padding: 9px;
}

.jf-padding10
{
    padding: 10px;
}

.jf-padding11
{
    padding: 11px;
}

.jf-padding12
{
    padding: 12px;
}

.jf-margin1
{
    margin: 1px;
}

.jf-margin2
{
    margin: 2px;
}

.jf-margin3
{
    margin: 3px;
}

.jf-margin4
{
    margin: 4px;
}

.jf-margin5
{
    margin: 5px;
}

.jf-margin6
{
    margin: 6px;
}

.jf-margin7
{
    margin: 7px;
}

.jf-margin8
{
    margin: 8px;
}

.jf-margin9
{
    margin: 9px;
}

.jf-margin10
{
    margin: 10px;
}

.jf-margin11
{
    margin: 11px;
}

.jf-margin12
{
    margin: 12px;
}


/* Base Card: Shared layout properties */
.jf-Card
{
    padding: 4px;
    border-radius: 6px; /* optional: soft rounded corners look great with this style */
    color: #1a1a1a;
}

/* Color Modifiers: Only gradients and matching shadows */
.jf-Card--gray
{
    background-image: linear-gradient(to bottom, #f5f3f3, #cdd1d4);
    box-shadow: 2px 2px 6px #797878;
}

.jf-Card--gold
{
    background-image: linear-gradient(to bottom, #fff4d0, #e0b84c);
    box-shadow: 2px 2px 6px #8c6e1e;
}

.jf-Card--purple
{
    background-image: linear-gradient(to bottom, #f2e6ff, #9b6bcc);
    box-shadow: 2px 2px 6px #59357d;
}

.jf-Card--blue
{
    background-image: linear-gradient(to bottom, #e3f2fd, #4a90e2);
    box-shadow: 2px 2px 6px #24528d;
}

.jf-Card-red
{
    background-image: linear-gradient(to bottom, #fa1e1e02, #fa1e1e14);
    box-shadow: 2px 2px 6px #c206065e;
    padding: 4px;
}

.jf-Card-green
{
    background-image: linear-gradient(to bottom, #047a0a0c, #047a0a26);
    box-shadow: 2px 2px 6px #06c21b5e;
    padding: 4px;
}

.jf-Card-blue
{
    background-image: linear-gradient(to bottom, #0604f80a,#0604f816);
    box-shadow: 2px 2px 6px #090df1c1;
    padding: 4px;
}

.jf-Card-gray
{
    background-image: linear-gradient(to bottom, #f5f3f3, #cdd1d4);
    box-shadow: 2px 2px 6px #797878;
    padding: 4px;
}


.jf-Card.jfshadow
{
    box-shadow: 2px 2px 3px;
}

    .jf-Card.jfshadow.red
    {
        box-shadow: 2px 2px 3px red;
    }

    .jf-Card.jfshadow.bule
    {
        box-shadow: 2px 2px 3px blue;
    }

    .jf-Card.jfshadow.green
    {
        box-shadow: 2px 2px 3px green;
    }

    .jf-Card.jfshadow.gold
    {
        box-shadow: 2px 2px 3px gold;
    }


.jf-Card.jflinear
{
    background-image: linear-gradient(to bottom, #f6f7f7, #c5c5c6);
}

    .jf-Card.jflinear.red
    {
        background-image: linear-gradient(to bottom, #f8f1ed, #fbbcab);
    }

    .jf-Card.jflinear.green
    {
        background-image: linear-gradient(to bottom, #e8fbe8,#b5f6a1);
    }

    .jf-Card.jflinear.blue
    {
        background-image: linear-gradient(to bottom, #0707f50a, #0b0bf72d);
    }


.jf-Card-Greenlinear
{
    background-image: linear-gradient(to bottom, #edfcec, #b1fbae);
    box-shadow: 2px 2px 6px #07941b;
}

.jf-Card-Green
{
    background-color: #d5fad6;
    box-shadow: 2px 2px 6px green;
    padding: 4px;
}

.jf-Card-Gray
{
    background-image: linear-gradient(to bottom, #f5f3f3, #cdd1d4);
    box-shadow: 2px 2px 6px #797878;
}


.jf-Card-Red
{
    background-image: linear-gradient(to bottom, #fe9c9c, #f80808);
    box-shadow: 2px 2px 6px red;
    padding: 4px;
}

.jf-Card-Red2
{
    background-color: #fbdbdb;
    box-shadow: 2px 2px 6px red;
}



.jf-linear-red
{
    background-image: linear-gradient(to bottom, #f8f1ed, #fbbcab);
}

.jf-linear-green
{
    background-image: linear-gradient(to bottom, #edfcec, #b1fbae);
}

.jf-linear-blue
{
    background-image: linear-gradient(to bottom, #eeeef1, #7a7afa);
}

.jf-linear-gold
{
    background-image: linear-gradient(to bottom, #faf3e8, #fbd496);
}

.jf-linear-grey
{
    background-image: linear-gradient(to bottom, #d8d8db26, #d8d8dbde);
}

.jf-shadow-red
{
    box-shadow: 2px 2px 3px red;
}

.jf-shadow-green
{
    box-shadow: 2px 2px 3px green;
}

.jf-shadow-blue
{
    box-shadow: 2px 2px 3px blue;
}

    .jf-shadow-blue.Dark
    {
        box-shadow: 2px 2px 2px 2px #071aed inset;
    }

.jf-shadow-grey
{
    box-shadow: 2px 2px 3px grey;
}

.jf-shadow-black
{
    box-shadow: 2px 2px 3px black;
}


.jf-shadow-gold
{
    box-shadow: 2px 2px 3px gold;
}




.jf-Round-sm
{
    border-radius: 5px;
}

.jf-Round-md
{
    border-radius: 8px;
}

.jf-Round-lg
{
    border-radius: 12px;
}

    .jf-Round-lg.left
    {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .jf-Round-lg.right
    {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

.jf-Round-xlg
{
    border-radius: 15px;
}

.jf-Round-xxlg
{
    border-radius: 20px;
}


.jf-modal-dialog
{
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    height: 100vh; /* full viewport height */
}


/*Start file-explorer============================================================================================*/
/*How to use tree*/
/*<div class="file-explorer" style="--jf-line-style:dashed;height:200px;--jf-line-color:red;" >
<details open >
<summary class="folder" > src</summary >
<details >
<summary class="folder" > components</summary >
<div class="file" > Header.jsx</div >
<div class="file" > Footer.jsx</div >
<div class="file" > Button.css</div >
</details >

<details open >
<summary class="folder" > assets</summary >
<details >
<summary class="folder" > images</summary >
<div class="file" > logo.png</div >
<div class="file" > avatar.jpg</div >
</details >

<div class="file" > styles.css</div >
</details >

<div class="file" > App.jsx</div >
<div class="file" > main.jsx</div >
<div class="file" > package.json</div >
</details >
</div >
*/

/* Base Container */
.file-explorer
{
    /* 1. Define the default line style here (solid, dashed, or dotted) */
    --jf-line-style: solid;
    --jf-line-color: #b8b8b8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 14px;
    color: #333333;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    max-width: 300px;
    border: 1px solid #e0e0e0;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
}

    .file-explorer details
    {
        padding-left: 16px;
        margin-left: 6px;
    }

        /* 2. Apply the dynamic line style variable to vertical lines */
        .file-explorer details details,
        .file-explorer details .file
        {
            border-left: 1px var(--jf-line-style) var(--jf-line-color);
        }

    /* Row styling and alignment */
    .file-explorer summary,
    .file-explorer .file
    {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        cursor: pointer;
        border-radius: 4px;
        position: relative;
    }

        .file-explorer summary:hover,
        .file-explorer .file:hover
        {
            background-color: #e9ecef;
        }

    /* Hide default browser disclosure triangle */
    .file-explorer summary
    {
        list-style: none;
    }

        .file-explorer summary::-webkit-details-marker
        {
            display: none;
        }

        /* Folder Icons */
        .file-explorer summary.folder::before
        {
            content: "📁";
            margin-right: 6px;
        }

    .file-explorer details[open] > summary.folder::before
    {
        content: "📂";
    }

    /* File Icons */
    .file-explorer .file
    {
        margin-left: 16px;
        padding-left: 14px;
    }

        .file-explorer .file::before
        {
            content: "📄";
            margin-right: 6px;
        }

        /* 3. Apply the dynamic line style variable to horizontal lines */
        .file-explorer .file::after
        {
            content: "";
            position: absolute;
            left: 0;
            top: 14px;
            width: 10px;
            border-top: 1px var(--jf-line-style) var(--jf-line-color);
        }
/*End file-Explorer============================================================================================*/


/*Start jf-tree============================================================================================*/
/*How to use tree*/
/*<div class="jf-tree" style="--jftree-line-style:dashed;height:200px;--jftree-line-color:red;" >
<details open >
<summary class="folder" > src</summary >
<details >
<summary class="folder" > components</summary >
<div class="file" > Header.jsx</div >
<div class="file" > Footer.jsx</div >
<div class="file" > Button.css</div >
</details >

<details open >
<summary class="folder" > assets</summary >
<details >
<summary class="folder" > images</summary >
<div class="file" > logo.png</div >
<div class="file" > avatar.jpg</div >
</details >

<div class="file" > styles.css</div >
</details >

<div class="file" > App.jsx</div >
<div class="file" > main.jsx</div >
<div class="file" > package.json</div >
</details >
</div >
*/

/* Base Container */
.jf-tree
{
    /* Define Var */
    --jftree-line-style: solid;
    --jftree-line-color: #b8b8b8;
    --jftree-folderClose-icon: "📁";
    --jftree-folderOpen-icon: "📂";
    --jftree-file-icon: "📄";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 14px;
    color: #333333;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    max-width: 100%;
    width: 100%;
    border: 1px solid #e0e0e0;
    /*max-height: 60vh;*/
    overflow-y: auto;
    box-sizing: border-box;
}

    /* ===================== LTR (Default) ===================== */

    .jf-tree details
    {
        padding-left: 16px;
        margin-left: 6px;
    }

        /* Vertical lines for nested items */
        .jf-tree details details,
        .jf-tree details .file
        {
            border-left: 1px var(--jftree-line-style) var(--jftree-line-color);
        }

    /* Row styling and alignment */
    .jf-tree summary,
    .jf-tree .file
    {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        cursor: pointer;
        border-radius: 4px;
        position: relative;
    }

        .jf-tree summary:hover,
        .jf-tree .file:hover
        {
            background-color: #e9ecef;
        }

    /* Hide default browser disclosure triangle */
    .jf-tree summary
    {
        list-style: none;
    }

        .jf-tree summary::-webkit-details-marker
        {
            display: none;
        }

        /* Folder Icons */
        .jf-tree summary.folder::before
        {
            content: var(--jftree-folderClose-icon);
            margin-right: 6px;
        }

    .jf-tree details[open] > summary.folder::before
    {
        content: var(--jftree-folderOpen-icon);
    }

    /* File Icons */
    .jf-tree .file
    {
        margin-left: 16px;
        padding-left: 14px;
    }

        .jf-tree .file::before
        {
            content: var(--jftree-file-icon);
            margin-right: 6px;
        }

        /* Horizontal connector line */
        .jf-tree .file::after
        {
            content: "";
            position: absolute;
            left: 0;
            top: 14px;
            width: 10px;
            border-top: 1px var(--jftree-line-style) var(--jftree-line-color);
        }


/* ===================== RTL (dir="rtl") ===================== */

[dir="rtl"] .jf-tree details
{
    padding-left: 0;
    margin-left: 0;
    padding-right: 16px;
    margin-right: 6px;
}

    /* Vertical lines for nested items - RTL */
    [dir="rtl"] .jf-tree details details,
    [dir="rtl"] .jf-tree details .file
    {
        border-left: none;
        border-right: 1px var(--jftree-line-style) var(--jftree-line-color);
    }

/* Folder Icons - RTL */
[dir="rtl"] .jf-tree summary.folder::before
{
    margin-right: 0;
    margin-left: 6px;
}

/* File Icons - RTL */
[dir="rtl"] .jf-tree .file
{
    margin-left: 0;
    padding-left: 8px;
    margin-right: 16px;
    padding-right: 14px;
}

    [dir="rtl"] .jf-tree .file::before
    {
        margin-right: 0;
        margin-left: 6px;
    }

    /* Horizontal connector line - RTL */
    [dir="rtl"] .jf-tree .file::after
    {
        left: auto;
        right: 0;
    }

/*Tree-dir----------------------------------------------------------*/
.jf-tree-dir
{
    /* Set default configuration */
    --jftree-dir: ltr;
    /* Theme Styles */
    --jftree-line-style: solid;
    --jftree-line-color: #b8b8b8;
    --jftree-folderClose-icon: "📁";
    --jftree-folderOpen-icon: "📂";
    --jftree-file-icon: "📄";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
    font-size: 14px;
    color: #333333;
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    max-width: 100%;
    width: 100%;
    border: 1px solid #e0e0e0;
    overflow-y: auto;
    box-sizing: border-box;
    /* Dynamic layout values mapped to direction */
    --pad-left: 16px;
    --pad-right: 0px;
    --mar-left: 6px;
    --mar-right: 0px;
    --b-left: 1px var(--jftree-line-style) var(--jftree-line-color);
    --b-right: none;
    --icon-m-left: 0px;
    --icon-m-right: 6px;
    --file-m-left: 16px;
    --file-m-right: 0px;
    --file-p-left: 14px;
    --file-p-right: 0px;
    --line-left: 0px;
    --line-right: auto;
}

    /* ======================================================== */
    /* 1. DIRECTION CONFIGURATION TRIGGER                      */
    /* ======================================================== */
    .jf-tree-dir[style*="--jftree-dir: rtl"],
    .jf-tree-dir[style*="--jftree-dir:rtl"],
    [dir="rtl"] .jf-tree-dir
    {
        direction: rtl;
        text-align: right;
        /* Flips the exact values that fixed your code */
        --pad-left: 0px;
        --pad-right: 16px;
        --mar-left: 0px;
        --mar-right: 6px;
        --b-left: none;
        --b-right: 1px var(--jftree-line-style) var(--jftree-line-color);
        --icon-m-left: 6px;
        --icon-m-right: 0px;
        --file-m-left: 0px;
        --file-m-right: 16px;
        --file-p-left: 8px;
        --file-p-right: 14px;
        --line-left: auto;
        --line-right: 0px;
    }

    /* ======================================================== */
    /* 2. LAYOUT RENDERING                                      */
    /* ======================================================== */
    .jf-tree-dir details
    {
        padding-left: var(--pad-left);
        padding-right: var(--pad-right);
        margin-left: var(--mar-left);
        margin-right: var(--mar-right);
    }

        /* Vertical guide lines */
        .jf-tree-dir details details,
        .jf-tree-dir details .file
        {
            border-left: var(--b-left);
            border-right: var(--b-right);
        }

    /* Row elements */
    .jf-tree-dir summary,
    .jf-tree-dir .file
    {
        display: flex;
        align-items: center;
        padding: 5px 8px;
        cursor: pointer;
        border-radius: 4px;
        position: relative;
    }

        .jf-tree-dir summary:hover,
        .jf-tree-dir .file:hover
        {
            background-color: #e9ecef;
        }

    .jf-tree-dir summary
    {
        list-style: none;
    }

        .jf-tree-dir summary::-webkit-details-marker
        {
            display: none;
        }

        /* Folders */
        .jf-tree-dir summary.folder::before
        {
            content: var(--jftree-folderClose-icon);
            margin-left: var(--icon-m-left);
            margin-right: var(--icon-m-right);
        }

    .jf-tree-dir details[open] > summary.folder::before
    {
        content: var(--jftree-folderOpen-icon);
    }

    /* Files */
    .jf-tree-dir .file
    {
        margin-left: var(--file-m-left);
        margin-right: var(--file-m-right);
        padding-left: var(--file-p-left);
        padding-right: var(--file-p-right);
    }

        .jf-tree-dir .file::before
        {
            content: var(--jftree-file-icon);
            margin-left: var(--icon-m-left);
            margin-right: var(--icon-m-right);
        }

        /* Horizontal connectors */
        .jf-tree-dir .file::after
        {
            content: "";
            position: absolute;
            top: 14px;
            width: 10px;
            border-top: 1px var(--jftree-line-style) var(--jftree-line-color);
            left: var(--line-left);
            right: var(--line-right);
        }
/*End jf-tree============================================================================================*/



/*Start jf-panel============================================================================================*/
/*base panel styles*/
.jf-panel
{
    --jf-border-color: #632d84;
    --jf-hover-color: #4a1f64;
    --jf-bg-color: #ffffff;
    /*--jf-panel-width: 50%;*/
   /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    max-width: var(--jf-panel-width);
    border: 1px solid var(--jf-border-color);
    background-color: var(--jf-bg-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

    .jf-panel.width-xsm
    {
        --jf-panel-width: 320px;
    }

    .jf-panel.width-sm
    {
        --jf-panel-width: 450px;
    }

    .jf-panel.width-md
    {
        --jf-panel-width: 600px;
    }

    .jf-panel.width-lg
    {
        --jf-panel-width: 700px;
    }

    .jf-panel.width-xlg
    {
        --jf-panel-width: 900px;
    }

    .jf-panel.width
    {
        --jf-panel-width: 100%;
    }

    .jf-panel.width100
    {
        --jf-panel-width: 100%;
    }

    .jf-panel.width50
    {
        --jf-panel-width: 50%;
    }

    .jf-panel.width60
    {
        --jf-panel-width: 60%;
    }


.jf-panel-darkchild
{
    background: color-mix(in srgb, var(--jf-bg-color) 80%, black 20%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 4px;
    margin: 3px;
}

.jf-panel-lightchild
{
    background: color-mix(in srgb, var(--jf-bg-color) 80%, grey 20%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 4px;
    margin: 3px;
}

.jf-panel.Round-sm
{
    border-radius: 5px;
}

.jf-panel.Round-md
{
    border-radius: 8px;
}

.jf-panel.Round-lg
{
    border-radius: 12px;
}

.jf-panel.Round-xl
{
    border-radius: 20px;
}
/* --- THEME VARIATIONS --- */
.jf-panel.black
{
    --jf-bg-color: lightgrey;
    --jf-border-color: black;
    --jf-hover-color: grey;
}


/* 1. Primary (Your original Purple) */
.jf-panel.primary
{
    --jf-bg-color: #e8d6f3;
    --jf-border-color: #632d84;
    --jf-hover-color: #4a1f64;
}

/* 2. Secondary (Cool Gray / Dark Slate) */
.jf-panel.secondary
{
    --jf-bg-color: #c4d3de;
    --jf-border-color: #5a6268;
    --jf-hover-color: #41464b;
}

/* 3. Success (Green) */
.jf-panel.success
{
    --jf-bg-color: #d3f8db;
    --jf-border-color: #1e7e34;
    --jf-hover-color: #115921;
}

/* 4. Warning (Amber / Dark Yellow - text needs to be readable!) */
.jf-panel.warning
{
    --jf-bg-color: #fff1c6;
    --jf-border-color: #d39e00;
    --jf-hover-color: #a07800;
}

/* 5. Danger (Red) */
.jf-panel.danger
{
    --jf-bg-color: #facace;
    --jf-border-color: #bd2130;
    --jf-hover-color: #8b141f;
}

/* --- REST OF YOUR CSS (STAYS EXACTLY THE SAME) --- */

.jf-panel-header
{
    background-color: var(--jf-border-color);
    color: #ffffff;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease; /* Smooth color changes */
}

    .jf-panel-header.sm
    {
        padding: 6px 12px;
    }

    .jf-panel-header.md
    {
        padding: 12px 16px;
    }

    .jf-panel-header.lg
    {
        padding: 20px 25px;
    }

.jf-panel-icon-Size
{
    font-size: 18px;
}

.jf-panel-content
{
    padding: 24px 24px 16px 24px;
}

.jf-panel-item
{
    margin-bottom: 24px;
}

.jf-panel-date
{
    color: #555555;
    font-size: 14px;
    margin-bottom: 4px;
}

.jf-panel-title
{
    color: var(--jf-border-color);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    line-height: 1.4;
    display: inline-block;
    cursor: pointer;
    transition: color 0.2s ease;
}

    .jf-panel-title:hover
    {
        color: var(--jf-hover-color);
    }

.jf-panel-footer
{
    /*background-color: #eeeeee;*/
    background-color: color-mix(in srgb, var(--jf-border-color) 60%, #ffffff);
    padding: 16px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    margin-top: 8px;
}

    .jf-panel-footer.p2
    {
        padding: 2px;
    }

    .jf-panel-footer a
    {
        color: #0066cc;
        text-decoration: underline;
    }
/*End  jf-panel============================================================================================*/



@keyframes shake
{
    10%, 90%
    {
        transform: translateX(-3px);
    }

    20%, 80%
    {
        transform: translateX(3px);
    }

    30%, 50%, 70%
    {
        transform: translateX(-2px);
    }

    40%, 60%
    {
        transform: translateX(2px);
    }
}



@keyframes rotate
{
    /*   from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(5deg);
    }*/

    10%, 30%, 50%, 70%,90%
    {
        transform: rotate(1deg);
    }

    15%, 35%, 55%, 75%,95%
    {
        transform: rotate(-1deg);
    }

    20%, 40%, 60%, 80%,100%
    {
        transform: rotate(0deg);
    }
}


@keyframes Colorflicker
{
    0%, 20%, 40%, 60%, 80%, 100%
    {
        background-color: teal; /* Original color */
        transform: scale(1); /* Normal scale */
    }

    10%
    {
        background-color: orange; /* Flicker color */
        transform: scale(1.1); /* Slightly scale up */
    }

    30%
    {
        background-color: red; /* Flicker color */
        transform: scale(0.9); /* Slightly scale down */
    }

    50%
    {
        background-color: yellow; /* Flicker color */
        transform: scale(1.1); /* Slightly scale up */
    }

    70%
    {
        background-color: orange; /* Flicker color */
        transform: scale(0.9); /* Slightly scale down */
    }
}



/* validate Inputs */
input:required:valid,
textarea:required:valid,
select:required:valid
{
    border-color: green !important;
    box-shadow: 0 0 5px green !important;
    transition: all 300ms !important;
}


    input:required:valid + .icon::after
    {
        content: "✔️" !important;
        color: green !important;
        font-size: 0.8rem
    }

    select:required:valid + .icon::after
    {
        content: "✔️" !important;
        color: green !important;
        font-size: 0.8rem
    }

input:required:invalid,
textarea:required:invalid,
select:required:invalid
{
    border-color: red !important;
    box-shadow: 0 0 5px red !important;
    transition: all 300ms !important;
}

    input:required:invalid + .icon::after
    {
        content: "❌" !important;
        color: red !important;
        font-size: 0.8rem
    }

    select:required:invalid + .icon::after
    {
        content: "❌" !important;
        color: red !important;
        font-size: 0.8rem
    }