@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;
    }
@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-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;
}

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

.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 #090df15e;
    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;
}

.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;
}

.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-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-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 */
}

@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
}