/* template ni angelo */
.f-center { display: flex; justify-content: flex-start; align-items: center; gap: 5px;}
.f-row-center { display: flex; justify-content: center; align-items: center; gap: 5px;}
.f-row-between { display: flex; justify-content: space-between; align-items: center; gap: 5px;}
.f-row-between-end { display: flex; justify-content: end; align-items: center; gap: 5px;}
.f-row-between-end { display: flex; justify-content: end; align-items: center; gap: 5px;}
.f-row-between-top { display: flex; justify-content: space-between; align-items: start; gap: 5px;}
.f-row-between-bottom { display: flex; justify-content: space-between; align-items: end; gap: 5px;}
.f-row-start-top { display: flex; justify-content: flex-start; align-items: start; gap: 5px;}
.f-row-end { display: flex; justify-content: flex-end; align-items: center;}
.f-column-end { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; }
.f-column-start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.f-column-center { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.f-column-between { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 5px;}
.f-evenly { display: flex; justify-content: space-evenly; align-items: center; }
.f-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.f-column-reverse { display: flex; flex-direction: column-reverse; }
.f-row-reverse { display: flex; flex-direction: row-reverse; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end;}
/* Text Alignment */
.text-left { text-align: left; } 
.text-center { text-align: center; } 
.text-right { text-align: right; }

.w100p-auto {width: 100%; max-width: 100%; margin: auto;}
.w100p {width: 100%; max-width: 100%;}
.mx-auto { margin-left: auto; margin-right: auto; }
.max-size {max-width: max-content;}
/* Positioning Utilities: */

.fixed-top { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }

/* Sticky top */
.sticky-top { position: sticky; top: 0; }

/* separator box for inner */

.separator {height: 30px;}