/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */
/* https://htmlcolorcodes.com/color-names/ */

/* ================= picasso-button ==================== */

.coin-picasso-button {
    width: 140px;
    height: 60px;
    background-color: thistle;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coin-picasso-button span:first-child {
    font-size: 20px;
    font-weight: bold;
    color: yellow;
}

.coin-picasso-button span:last-child {
    font-size: 12px;
    color: blue;
    opacity: 0.8;
}

/* ================= background-color ==================== */

/* 1-20 */
.coin-background-color-red { background-color: red; }
.coin-background-color-green { background-color: green; }
.coin-background-color-blue { background-color: blue; }
.coin-background-color-yellow { background-color: yellow; }
.coin-background-color-cyan { background-color: cyan; }
.coin-background-color-magenta { background-color: magenta; }
.coin-background-color-brown { background-color: brown; }
.coin-background-color-pink { background-color: pink; }
.coin-background-color-orange { background-color: orange; }
.coin-background-color-goldenrod { background-color: goldenrod; }
.coin-background-color-purple { background-color: purple; }
.coin-background-color-gray { background-color: gray; }
.coin-background-color-white { background-color: white; }
.coin-background-color-black { background-color: black; }
.coin-background-color-teal { background-color: teal; }
.coin-background-color-turquoise { background-color: turquoise; }
.coin-background-color-lime { background-color: lime; }
.coin-background-color-lightgreen { background-color: lightgreen; }
.coin-background-color-indigo { background-color: indigo; }
.coin-background-color-maroon { background-color: maroon; }
.coin-background-color-silver { background-color: silver; }
.coin-background-color-gold { background-color: gold; }
.coin-background-color-olive { background-color: olive; }
.coin-background-color-navy { background-color: navy; }
.coin-background-color-violet { background-color: violet; }
.coin-background-color-plum { background-color: plum; }
.coin-background-color-coral { background-color: coral; }
.coin-background-color-crimson { background-color: crimson; }
.coin-background-color-skyblue { background-color: skyblue; }
.coin-background-color-salmon { background-color: salmon; }
.coin-background-color-khaki { background-color: khaki; }
.coin-background-color-cadetblue { background-color: cadetblue; }
.coin-background-color-mediumslateblue { background-color: mediumslateblue; }
.coin-background-color-mediumseagreen { background-color: mediumseagreen; }
.coin-background-color-dodgerblue { background-color: dodgerblue; }
.coin-background-color-orchid { background-color: orchid; }
.coin-background-color-darkorange { background-color: darkorange; }
.coin-background-color-darkgreen { background-color: darkgreen; }
.coin-background-color-darkcyan { background-color: darkcyan; }
.coin-background-color-lightcoral { background-color: lightcoral; }

/* 41-60 */
.coin-background-color-lightseagreen { background-color: lightseagreen; }
.coin-background-color-mediumvioletred { background-color: mediumvioletred; }
.coin-background-color-palegoldenrod { background-color: palegoldenrod; }
.coin-background-color-lightpink { background-color: lightpink; }
.coin-background-color-lightsalmon { background-color: lightsalmon; }
.coin-background-color-lightyellow { background-color: lightyellow; }
.coin-background-color-lavender { background-color: lavender; }
.coin-background-color-powderblue { background-color: powderblue; }
.coin-background-color-hotpink { background-color: hotpink; }
.coin-background-color-lightsteelblue { background-color: lightsteelblue; }
.coin-background-color-mintcream { background-color: mintcream; }
.coin-background-color-linen { background-color: linen; }
.coin-background-color-seashell { background-color: seashell; }
.coin-background-color-honeydew { background-color: honeydew; }
.coin-background-color-beige { background-color: beige; }
.coin-background-color-antiquewhite { background-color: antiquewhite; }
.coin-background-color-cornsilk { background-color: cornsilk; }
.coin-background-color-blanchedalmond { background-color: blanchedalmond; }
.coin-background-color-bisque { background-color: bisque; }
.coin-background-color-moccasin { background-color: moccasin; }

/* 61-80 */
.coin-background-color-navajowhite { background-color: navajowhite; }
.coin-background-color-peachpuff { background-color: peachpuff; }
.coin-background-color-papayawhip { background-color: papayawhip; }
.coin-background-color-lavenderblush { background-color: lavenderblush; }
.coin-background-color-mistyrose { background-color: mistyrose; }
.coin-background-color-azure { background-color: azure; }
.coin-background-color-aliceblue { background-color: aliceblue; }
.coin-background-color-lightcyan { background-color: lightcyan; }
.coin-background-color-palegreen { background-color: palegreen; }
.coin-background-color-paleturquoise { background-color: paleturquoise; }
.coin-background-color-palevioletred { background-color: palevioletred; }
.coin-background-color-mediumaquamarine { background-color: mediumaquamarine; }

.coin-background-color-darkmagenta { background-color: darkmagenta; }
.coin-background-color-darkslateblue { background-color: darkslateblue; }
.coin-background-color-darkslategray { background-color: darkslategray; }
.coin-background-color-darksalmon { background-color: darksalmon; }
.coin-background-color-lightskyblue { background-color: lightskyblue; }
.coin-background-color-lightblue { background-color: lightblue; }
.coin-background-color-lightgoldenrodyellow { background-color: lightgoldenrodyellow; }
.coin-background-color-aquamarine { background-color: aquamarine; }
.coin-background-color-lawngreen { background-color: lawngreen; }



/* ================= fonts ==================== */
.coin-outline-3px-solid-blue { outline: 3px solid blue; }
.coin-outline-3px-solid-yellow { outline: 3px solid yellow; }


/* ================= fonts ==================== */
/* ================= fonts ==================== */
/* ================= fonts ==================== */


.coin-font-size-12px { font-size: 12px; }
.coin-font-size-14px { font-size: 14px; }
.coin-font-size-16px { font-size: 16px; }
.coin-font-size-18px { font-size: 18px; }
.coin-font-size-20px { font-size: 20px; }
.coin-font-size-24px { font-size: 24px; }
.coin-font-size-28px { font-size: 28px; }
.coin-font-size-32px { font-size: 32px; }
.coin-font-size-40px { font-size: 40px; }
.coin-font-size-48px { font-size: 48px; }


/* ================= coin-grid-dim-start ==================== */
/* ================= coin-grid-dim-start ==================== */
/* ================= coin-grid-dim-start ==================== */

.coin-grid-dim-140-60-v1 {
    /* עצמו cshtml מסוג זה לתוך הדף css rule יכול להיות שבהמשך אעדיף להכניס  */
    /* עצמו cshtml מסוג זה לתוך הדף css rule יכול להיות שבהמשך אעדיף להכניס  */
    /* עצמו cshtml מסוג זה לתוך הדף css rule יכול להיות שבהמשך אעדיף להכניס  */
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    width: 140px;
    height: 60px;
    font-size: 14px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    outline: 3px solid blue; /* זמני במטרה לזהות שזאת המחלקהה שבשימוש*/
}


.coin-grid-dim-140-60-v1:hover {
    /* empty for now*/
}

.coin-grid-dim-140-60-v1:active {
    transform: scale(0.97);
}

.coin-grid-dim-140-60-v2 {
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    /* note this css rule should not contain colors */
    width: 140px;
    height: 60px;
    font-size: 14px;
    /*border-radius: 5px;*/
    /*border: none;*/
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}


.coin-grid-dim-140-60-v2:hover {
    /* empty for now*/
}

.coin-grid-dim-140-60-v2:active {
    transform: scale(0.97);
}




.coin-display-block-button_v1-obsolete-obsolete-obsolete-obsolete {
    /*---------------------------------------------------------------------------------*/
    /*  display-block-button את הכללים מסוג coins בתאריך 15.2.26 החלטנו להוריד מקובץ ה */
    /*                                               והעברנו אותם לדפים שבהם הם נמצאים */
    /*---------------------------------------------------------------------------------*/
    display: block;
    width: 90%;
    margin: auto;
    padding: 12px;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.coin-display-block-button_v1-obsolete-obsolete-obsolete-obsolete:hover {
    /*---------------------------------------------------------------------------------*/
    /*  display-block-button את הכללים מסוג coins בתאריך 15.2.26 החלטנו להוריד מקובץ ה */
    /*                                               והעברנו אותם לדפים שבהם הם נמצאים */
    /*---------------------------------------------------------------------------------*/
    outline: 3px solid #ff4b2b;
}

.coin-display-block-button_v1-obsolete-obsolete-obsolete-obsolete:active {
    /*---------------------------------------------------------------------------------*/
    /*  display-block-button את הכללים מסוג coins בתאריך 15.2.26 החלטנו להוריד מקובץ ה */
    /*                                               והעברנו אותם לדפים שבהם הם נמצאים */
    /*---------------------------------------------------------------------------------*/
    transform: scale(0.97);
}


/* ================= Aurora 40 Color Buttons ==================== */


/* dos צבעים מסוג coin-aurora להזכירך : בתאריך 18.3.2026 הוספנו ל */
/* dos צבעים מסוג coin-aurora להזכירך : בתאריך 18.3.2026 הוספנו ל */
/* dos צבעים מסוג coin-aurora להזכירך : בתאריך 18.3.2026 הוספנו ל */
/* dos צבעים מסוג coin-aurora להזכירך : בתאריך 18.3.2026 הוספנו ל */
/* dos צבעים מסוג coin-aurora להזכירך : בתאריך 18.3.2026 הוספנו ל */


.coin-aurora-button-palette-dos-black { background-color: rgb(0,0,0); color: white; }
.coin-aurora-button-palette-dos-black:hover { background-color: rgb(40,40,40); }

.coin-aurora-button-palette-dos-blue { background-color: rgb(0,0,128); color: white; }
.coin-aurora-button-palette-dos-blue:hover { background-color: rgb(0,0,170); }

.coin-aurora-button-palette-dos-green { background-color: rgb(0,128,0); color: white; }
.coin-aurora-button-palette-dos-green:hover { background-color: rgb(0,170,0); }

.coin-aurora-button-palette-dos-cyan { background-color: rgb(0,128,128); color: white; }
.coin-aurora-button-palette-dos-cyan:hover { background-color: rgb(0,170,170); }

.coin-aurora-button-palette-dos-red { background-color: rgb(128,0,0); color: white; }
.coin-aurora-button-palette-dos-red:hover { background-color: rgb(170,0,0); }

.coin-aurora-button-palette-dos-magenta { background-color: rgb(128,0,128); color: white; }
.coin-aurora-button-palette-dos-magenta:hover { background-color: rgb(170,0,170); }

.coin-aurora-button-palette-dos-brown { background-color: rgb(255,128,0); color: black; }
.coin-aurora-button-palette-dos-brown:hover { background-color: rgb(255,160,40); }

.coin-aurora-button-palette-dos-lightgray { background-color: rgb(192,192,192); color: black; }
.coin-aurora-button-palette-dos-lightgray:hover { background-color: rgb(220,220,220); }

.coin-aurora-button-palette-dos-darkgray { background-color: rgb(128,128,128); color: white; }
.coin-aurora-button-palette-dos-darkgray:hover { background-color: rgb(160,160,160); }

.coin-aurora-button-palette-dos-lightblue { background-color: rgb(0,0,255); color: white; }
.coin-aurora-button-palette-dos-lightblue:hover { background-color: rgb(80,80,255); }

.coin-aurora-button-palette-dos-lightblue-almost { background-color: rgb(120,120,255); color: black; }
.coin-aurora-button-palette-dos-lightblue-almost:hover { background-color: rgb(150,150,255); }

.coin-aurora-button-palette-dos-lightgreen { background-color: rgb(0,255,0); color: black; }
.coin-aurora-button-palette-dos-lightgreen:hover { background-color: rgb(80,255,80); }

.coin-aurora-button-palette-dos-lightcyan { background-color: rgb(0,255,255); color: black; }
.coin-aurora-button-palette-dos-lightcyan:hover { background-color: rgb(80,255,255); }

.coin-aurora-button-palette-dos-lightred { background-color: rgb(255,0,0); color: white; }
.coin-aurora-button-palette-dos-lightred:hover { background-color: rgb(255,80,80); }

.coin-aurora-button-palette-dos-lightmagenta { background-color: rgb(255,0,255); color: white; }
.coin-aurora-button-palette-dos-lightmagenta:hover { background-color: rgb(255,80,255); }

.coin-aurora-button-palette-dos-yellow { background-color: rgb(255,255,0); color: black; }
.coin-aurora-button-palette-dos-yellow:hover { background-color: rgb(255,255,80); }

.coin-aurora-button-palette-dos-white { background-color: rgb(255,255,255); color: black; }
.coin-aurora-button-palette-dos-white:hover { background-color: rgb(240,240,240); }

.coin-aurora-button-palette-dos-moca { background-color: rgb(244,224,180); color: black; }
.coin-aurora-button-palette-dos-moca:hover { background-color: rgb(255,235,200); }

.coin-aurora-button-palette-dos-orange { background-color: rgb(244,98,0); color: white; }
.coin-aurora-button-palette-dos-orange:hover { background-color: rgb(255,130,40); }

.coin-aurora-button-palette-dos-pink { background-color: rgb(255,128,192); color: black; }
.coin-aurora-button-palette-dos-pink:hover { background-color: rgb(255,160,210); }

.coin-aurora-button-palette-dos-paleorange { background-color: rgb(255,189,145); color: black; }
.coin-aurora-button-palette-dos-paleorange:hover { background-color: rgb(255,210,170); }

.coin-aurora-button-palette-dos-turkiz { background-color: rgb(24,207,166); color: black; }
.coin-aurora-button-palette-dos-turkiz:hover { background-color: rgb(60,220,190); }

.coin-aurora-button-palette-dos-nescoffee { background-color: rgb(157,79,0); color: white; }
.coin-aurora-button-palette-dos-nescoffee:hover { background-color: rgb(190,110,40); }

.coin-aurora-button-palette-dos-offwhite { background-color: rgb(255,240,225); color: black; }
.coin-aurora-button-palette-dos-offwhite:hover { background-color: rgb(255,250,240); }

.coin-aurora-button-palette-dos-lightpink { background-color: rgb(251,125,129); color: black; }
.coin-aurora-button-palette-dos-lightpink:hover { background-color: rgb(255,150,150); }

.coin-aurora-button-palette-dos-ancientpink { background-color: rgb(255,128,192); color: black; }
.coin-aurora-button-palette-dos-ancientpink:hover { background-color: rgb(255,160,210); }

.coin-aurora-button-palette-dos-abcdef { background-color: rgb(171,205,239); color: black; }
.coin-aurora-button-palette-dos-abcdef:hover { background-color: rgb(200,220,255); }

.coin-aurora-button-palette-dos-mustard { background-color: rgb(215,215,0); color: black; }
.coin-aurora-button-palette-dos-mustard:hover { background-color: rgb(235,235,80); }


.coin-aurora-button-palette-red { background-color: red; color: white; }
.coin-aurora-button-palette-red:hover { background-color: darkred; }

.coin-aurora-button-palette-green { background-color: green; color: white; }
.coin-aurora-button-palette-green:hover { background-color: darkgreen; }

.coin-aurora-button-palette-blue { background-color: blue; color: white; }
.coin-aurora-button-palette-blue:hover { background-color: darkblue; }

.coin-aurora-button-palette-yellow { background-color: yellow; color: black; }
.coin-aurora-button-palette-yellow:hover { background-color: gold; }

.coin-aurora-button-palette-cyan { background-color: cyan; color: black; }
.coin-aurora-button-palette-cyan:hover { background-color: #00cccc; }

.coin-aurora-button-palette-magenta { background-color: magenta; color: white; }
.coin-aurora-button-palette-magenta:hover { background-color: #cc00cc; }

.coin-aurora-button-palette-brown { background-color: brown; color: white; }
.coin-aurora-button-palette-brown:hover { background-color: #5a2e0d; }

.coin-aurora-button-palette-pink { background-color: pink; color: black; }
.coin-aurora-button-palette-pink:hover { background-color: #e55a9b; }

.coin-aurora-button-palette-orange { background-color: orange; color: black; }
.coin-aurora-button-palette-orange:hover { background-color: darkorange; }

.coin-aurora-button-palette-goldenrod { background-color: goldenrod; color: black; }
.coin-aurora-button-palette-goldenrod:hover { background-color: #e6c200; }

.coin-aurora-button-palette-purple { background-color: purple; color: white; }
.coin-aurora-button-palette-purple:hover { background-color: indigo; }

.coin-aurora-button-palette-gray { background-color: gray; color: white; }
.coin-aurora-button-palette-gray:hover { background-color: dimgray; }

.coin-aurora-button-palette-white { background-color: white; color: black; }
.coin-aurora-button-palette-white:hover { background-color: #f0f0f0; }

.coin-aurora-button-palette-black { background-color: black; color: white; }
.coin-aurora-button-palette-black:hover { background-color: #111111; }

.coin-aurora-button-palette-teal { background-color: teal; color: white; }
.coin-aurora-button-palette-teal:hover { background-color: #004d4d; }

.coin-aurora-button-palette-turquoise { background-color: turquoise; color: black; }
.coin-aurora-button-palette-turquoise:hover { background-color: #40e0d0; }

.coin-aurora-button-palette-lime { background-color: lime; color: black; }
.coin-aurora-button-palette-lime:hover { background-color: #32cd32; }

.coin-aurora-button-palette-lightgreen { background-color: lightgreen; color: black; }
.coin-aurora-button-palette-lightgreen:hover { background-color: #32cd32; }

.coin-aurora-button-palette-indigo { background-color: indigo; color: white; }
.coin-aurora-button-palette-indigo:hover { background-color: #2e0854; }

.coin-aurora-button-palette-maroon { background-color: maroon; color: white; }
.coin-aurora-button-palette-maroon:hover { background-color: #500000; }

/* 21-40 */
.coin-aurora-button-palette-silver { background-color: silver; color: black; }
.coin-aurora-button-palette-silver:hover { background-color: #bfbfbf; }

.coin-aurora-button-palette-gold { background-color: gold; color: black; }
.coin-aurora-button-palette-gold:hover { background-color: #d4af37; }

.coin-aurora-button-palette-olive { background-color: olive; color: white; }
.coin-aurora-button-palette-olive:hover { background-color: #3d3d00; }

.coin-aurora-button-palette-navy { background-color: navy; color: white; }
.coin-aurora-button-palette-navy:hover { background-color: #000080; }

.coin-aurora-button-palette-violet { background-color: violet; color: black; }
.coin-aurora-button-palette-violet:hover { background-color: #8a2be2; }

.coin-aurora-button-palette-plum { background-color: plum; color: black; }
.coin-aurora-button-palette-plum:hover { background-color: #dda0dd; }

.coin-aurora-button-palette-coral { background-color: coral; color: black; }
.coin-aurora-button-palette-coral:hover { background-color: #ff7f50; }

.coin-aurora-button-palette-crimson { background-color: crimson; color: white; }
.coin-aurora-button-palette-crimson:hover { background-color: #8b0000; }

.coin-aurora-button-palette-skyblue { background-color: skyblue; color: black; }
.coin-aurora-button-palette-skyblue:hover { background-color: #00bfff; }

.coin-aurora-button-palette-salmon { background-color: salmon; color: black; }
.coin-aurora-button-palette-salmon:hover { background-color: #fa8072; }

.coin-aurora-button-palette-khaki { background-color: khaki; color: black; }
.coin-aurora-button-palette-khaki:hover { background-color: #bdb76b; }

.coin-aurora-button-palette-cadetblue { background-color: cadetblue; color: white; }
.coin-aurora-button-palette-cadetblue:hover { background-color: #5f9ea0; }

.coin-aurora-button-palette-mediumslateblue { background-color: mediumslateblue; color: white; }
.coin-aurora-button-palette-mediumslateblue:hover { background-color: #7b68ee; }

.coin-aurora-button-palette-mediumseagreen { background-color: mediumseagreen; color: white; }
.coin-aurora-button-palette-mediumseagreen:hover { background-color: #3cb371; }

.coin-aurora-button-palette-dodgerblue { background-color: dodgerblue; color: white; }
.coin-aurora-button-palette-dodgerblue:hover { background-color: #1e90ff; }

.coin-aurora-button-palette-orchid { background-color: orchid; color: black; }
.coin-aurora-button-palette-orchid:hover { background-color: #da70d6; }

.coin-aurora-button-palette-darkorange { background-color: darkorange; color: black; }
.coin-aurora-button-palette-darkorange:hover { background-color: #ff8c00; }

.coin-aurora-button-palette-darkgreen { background-color: darkgreen; color: white; }
.coin-aurora-button-palette-darkgreen:hover { background-color: #006400; }

.coin-aurora-button-palette-darkcyan { background-color: darkcyan; color: white; }
.coin-aurora-button-palette-darkcyan:hover { background-color: #008b8b; }

.coin-aurora-button-palette-lightcoral { background-color: lightcoral; color: black; }
.coin-aurora-button-palette-lightcoral:hover { background-color: #f08080; }

.coin-aurora-button-palette-lightseagreen { background-color: lightseagreen; color: white; }
.coin-aurora-button-palette-lightseagreen:hover { background-color: #20b2aa; }

.coin-aurora-button-palette-mediumvioletred { background-color: mediumvioletred; color: white; }
.coin-aurora-button-palette-mediumvioletred:hover { background-color: #c71585; }

/* 41-60 */
.coin-aurora-button-palette-palegoldenrod { background-color: palegoldenrod; color: black; }
.coin-aurora-button-palette-palegoldenrod:hover { background-color: #eee8aa; }

.coin-aurora-button-palette-lightpink { background-color: lightpink; color: black; }
.coin-aurora-button-palette-lightpink:hover { background-color: #ffb6c1; }

.coin-aurora-button-palette-lightsalmon { background-color: lightsalmon; color: black; }
.coin-aurora-button-palette-lightsalmon:hover { background-color: #ffa07a; }

.coin-aurora-button-palette-lightyellow { background-color: lightyellow; color: black; }
.coin-aurora-button-palette-lightyellow:hover { background-color: #ffffe0; }

.coin-aurora-button-palette-lavender { background-color: lavender; color: black; }
.coin-aurora-button-palette-lavender:hover { background-color: #e6e6fa; }

.coin-aurora-button-palette-powderblue { background-color: powderblue; color: black; }
.coin-aurora-button-palette-powderblue:hover { background-color: #b0e0e6; }

.coin-aurora-button-palette-hotpink { background-color: hotpink; color: white; }
.coin-aurora-button-palette-hotpink:hover { background-color: #ff69b4; }

.coin-aurora-button-palette-lightsteelblue { background-color: lightsteelblue; color: black; }
.coin-aurora-button-palette-lightsteelblue:hover { background-color: #b0c4de; }

.coin-aurora-button-palette-mintcream { background-color: mintcream; color: black; }
.coin-aurora-button-palette-mintcream:hover { background-color: #f5fffa; }

.coin-aurora-button-palette-linen { background-color: linen; color: black; }
.coin-aurora-button-palette-linen:hover { background-color: #faf0e6; }

.coin-aurora-button-palette-seashell { background-color: seashell; color: black; }
.coin-aurora-button-palette-seashell:hover { background-color: #fff5ee; }

.coin-aurora-button-palette-honeydew { background-color: honeydew; color: black; }
.coin-aurora-button-palette-honeydew:hover { background-color: #f0fff0; }

.coin-aurora-button-palette-beige { background-color: beige; color: black; }
.coin-aurora-button-palette-beige:hover { background-color: #f5f5dc; }

.coin-aurora-button-palette-antiquewhite { background-color: antiquewhite; color: black; }
.coin-aurora-button-palette-antiquewhite:hover { background-color: #faebd7; }

.coin-aurora-button-palette-cornsilk { background-color: cornsilk; color: black; }
.coin-aurora-button-palette-cornsilk:hover { background-color: #fff8dc; }

.coin-aurora-button-palette-blanchedalmond { background-color: blanchedalmond; color: black; }
.coin-aurora-button-palette-blanchedalmond:hover { background-color: #ffebcd; }

.coin-aurora-button-palette-bisque { background-color: bisque; color: black; }
.coin-aurora-button-palette-bisque:hover { background-color: #ffe4c4; }

.coin-aurora-button-palette-moccasin { background-color: moccasin; color: black; }
.coin-aurora-button-palette-moccasin:hover { background-color: #ffe4b5; }

.coin-aurora-button-palette-navajowhite { background-color: navajowhite; color: black; }
.coin-aurora-button-palette-navajowhite:hover { background-color: #ffdead; }

.coin-aurora-button-palette-peachpuff { background-color: peachpuff; color: black; }
.coin-aurora-button-palette-peachpuff:hover { background-color: #ffdab9; }

/* 61-80 */
.coin-aurora-button-palette-papayawhip { background-color: papayawhip; color: black; }
.coin-aurora-button-palette-papayawhip:hover { background-color: #ffefd5; }

.coin-aurora-button-palette-lavenderblush { background-color: lavenderblush; color: black; }
.coin-aurora-button-palette-lavenderblush:hover { background-color: #fff0f5; }

.coin-aurora-button-palette-mistyrose { background-color: mistyrose; color: black; }
.coin-aurora-button-palette-mistyrose:hover { background-color: #ffe4e1; }

.coin-aurora-button-palette-azure { background-color: azure; color: black; }
.coin-aurora-button-palette-azure:hover { background-color: #f0ffff; }

.coin-aurora-button-palette-aliceblue { background-color: aliceblue; color: black; }
.coin-aurora-button-palette-aliceblue:hover { background-color: #f0f8ff; }

.coin-aurora-button-palette-lightcyan { background-color: lightcyan; color: black; }
.coin-aurora-button-palette-lightcyan:hover { background-color: #e0ffff; }

.coin-aurora-button-palette-palegreen { background-color: palegreen; color: black; }
.coin-aurora-button-palette-palegreen:hover { background-color: #98fb98; }

.coin-aurora-button-palette-paleturquoise { background-color: paleturquoise; color: black; }
.coin-aurora-button-palette-paleturquoise:hover { background-color: #afeeee; }

.coin-aurora-button-palette-palevioletred { background-color: palevioletred; color: white; }
.coin-aurora-button-palette-palevioletred:hover { background-color: #db7093; }

.coin-aurora-button-palette-mediumaquamarine { background-color: mediumaquamarine; color: white; }
.coin-aurora-button-palette-mediumaquamarine:hover { background-color: #66cdaa; }

.coin-aurora-button-palette-darkmagenta { background-color: darkmagenta; color: white; }
.coin-aurora-button-palette-darkmagenta:hover { background-color: #8b008b; }

.coin-aurora-button-palette-darkslateblue { background-color: darkslateblue; color: white; }
.coin-aurora-button-palette-darkslateblue:hover { background-color: #483d8b; }

.coin-aurora-button-palette-darkslategray { background-color: darkslategray; color: white; }
.coin-aurora-button-palette-darkslategray:hover { background-color: #2f4f4f; }

.coin-aurora-button-palette-darksalmon { background-color: darksalmon; color: black; }
.coin-aurora-button-palette-darksalmon:hover { background-color: #e9967a; }

.coin-aurora-button-palette-lightskyblue { background-color: lightskyblue; color: black; }
.coin-aurora-button-palette-lightskyblue:hover { background-color: #87cefa; }

.coin-aurora-button-palette-lightblue { background-color: lightblue; color: black; }
.coin-aurora-button-palette-lightblue:hover { background-color: #add8e6; }

.coin-aurora-button-palette-lightgoldenrodyellow { background-color: lightgoldenrodyellow; color: black; }
.coin-aurora-button-palette-lightgoldenrodyellow:hover { background-color: #fafad2; }

.coin-aurora-button-palette-deep-blue { background-color: rgb(27, 54, 93); color: rgb(255, 255, 255); }
.coin-aurora-button-palette-deep-blue:hover { background-color: rgb(18, 38, 66); }

/* ================= grid-aurora-end ==================== */
/* ================= grid-aurora-end ==================== */
/* ================= grid-aurora-end ==================== */
/* ================= grid-aurora-end ==================== */

/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/
/* =================*/




.coin-margin-0 {
    margin: 0px;
}

.coin-margin-bottom-2px {
    margin-bottom: 2px;
}

.coin-black-on-yellow {
    color: black;
    background-color: yellow;
}

.coin-text-align-center {
    text-align: center; 
}


.coin-black-on-cyan {
    color: black;
    background-color: cyan;
}


.coin-black-on-magenta-ea0bd6 {
    color: black;
    background-color: #ea0bd6;
}

.coin-black-on-red {
    color: black;
    background-color: red;
}




.coin-background-blue {
    background-color: blue;
}


.coin-background-red {
    background-color: red;
}


.coin-black-on-gray {
    color: black;
    background-color: gray;
}


.coin-background-wheat {
    background-color: wheat;
}

.coin-background-white {
    background-color: white;
}

.coin-background-black {
    background-color: black;
}

.coin-gray {
    color: gray
}


.coin-green {
    color: #00ff00; /* Green */
}

.coin-blue {
    color: blue
}


.coin-table-100-procent {
    width: 100%;
    background-color: wheat; /* Green */
}


.coin-yellow {
    color: yellow
}

.coin-cyan_00aaff {
    color: #00aaff; /* Blue */
  }



.coin-white-on-blue {
    color: white;
    background-color: blue;
}


.cl-orange-button {
    width: 140px; /* Narrower button */
    height: 60px; /* Taller button */
    font-size: 14px;
    /*font-weight: bold;*/
    background-color: orange;
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}







.coin-color-red {
    color: red;
}




.coin-background-green {
    background-color: #00ff00; /* Green */
}

.coin-background-cyan {
    background-color: cyan;
}

.coin-background-color-cyan {
    background-color: #abcdef;
}


.coin_red_16_px {
    font-size: 16px;
    font-weight: bold;
    color: red;
}

.coin-direction-ltr {
    direction: ltr;
}


.coin-direction-rtl {
    direction: rtl;
}


.coin-text-align-left {
    text-align: left;
}


.coin-text-align-right {
    text-align: right;
}

.coin-text-align-center {
    text-align: center;
}




.coin-background-cyan {
    background-color: cyan;
}



.coin-background-green {
    background-color: green;
}


.coin-display-block {
    display: block;
}


.coin-flex-column {
    /* חדש מתאריך 27.4.2026 */
    /* חדש מתאריך 27.4.2026 */
    display: flex;
    flex-direction: column;
}

.coin-flex-row {
    /* חדש מתאריך 27.4.2026 */
    /* חדש מתאריך 27.4.2026 */
    display: flex;
    flex-direction: row;
    /*padding: 4px;*/
    /*background-color: red;*/
}

.coin-flex-row-justify-content-center-align-item-center-gap-5px {
    /* צריך להסביר מה זה עושה */
    display: flex;
    flex-direction: row;
    /*padding: 4px;*/
    /*background-color: red;*/
    justify-content: center; /* select from: flex-start (default), flex-end, center, space-between, space-around, space-evenly (also stretch)*/
    align-items: center; /* select from: stretch (default) center, flex_start, flex_end, baseline, */
    gap: 5px; /* רווח בין הכפתורים */
}

.coin-flex-for-one-element-in-center-parent {
    /* messagebox מיועד למצב שבו יש אלמנט בודד בתוך אלמנט ורוצים שיהיה ממורכז בשני הצירים בדומה ל */
    /* messagebox מיועד למצב שבו יש אלמנט בודד בתוך אלמנט ורוצים שיהיה ממורכז בשני הצירים בדומה ל */
    /* messagebox מיועד למצב שבו יש אלמנט בודד בתוך אלמנט ורוצים שיהיה ממורכז בשני הצירים בדומה ל */
    /* messagebox מיועד למצב שבו יש אלמנט בודד בתוך אלמנט ורוצים שיהיה ממורכז בשני הצירים בדומה ל */
    display: flex;
    flex-direction: row;
    justify-content: center; /* select from: flex-start (default), flex-end, center, space-between, space-around, space-evenly (also stretch)*/
    align-items: center; /* select from: stretch (default) center, flex_start, flex_end, baseline, */
}


.coin-lightgray-for-disable {
    background-color: lightgray;
}

.coin-darkgray-for-disable {
    background-color: darkgray;
}





/* layers על פי ה css-rules שים לב לסדר החשוב של ה */
/* layers על פי ה css-rules שים לב לסדר החשוב של ה */
/* layers על פי ה css-rules שים לב לסדר החשוב של ה */
/* layers על פי ה css-rules שים לב לסדר החשוב של ה */

.coin-layer1-background-yellow {
    background-color: yellow;
}

.coin-layer2-background-lightblue {
    background-color: lightblue;
}

.coin-layer2-background-lightgray {
    background-color: lightgray;
}


.coin-layer2-background-papayawhip {
    background-color: papayawhip; /* try also: beige, lemonchiffon, antiquewhite, papayawhip */
}

.coin-layer2-background-lightmagenta {
    background-color: #ffccff; /* light magenta */
}


.coin-layer2-background-sandybrown {
    background-color: sandybrown; /* light magenta */
}


.coin-layer3-background-green {
    background-color: lightgreen;
}