/* Buttons */
button { cursor: pointer; border:none; font-weight: bold; }
.button-round { border-radius: 55px; }
.border-round { border-radius: 77px; }
.formIcons { font-size: 0.8rem; }

/* Generic style */
.italic { font-style: italic; }
.bold { font-weight: bolder; }
.bolder { font-weight: bolder; }
.smaller { font-size: smaller; }

/* Common color items */
.color-limegreen { color: limegreen; }
.color-green { color: limegreen; }
.color-green-dark { color: green; }
.color-blue { color: #007FFF; }
.color-lightblue { color: #0ea5e9}
.color-red { color: red; }
.color-orange { color: darkorange; }
.color-black { color:black; }
.color-white { color:white; }
.color-gray { color: gray;}
.color-gold { color: gold;}

/* Background-color items */
.bg-color-green { background-color: limegreen; }
.bg-color-blue { background-color: #007FFF; }
.bg-color-lightblue { background-color: #0ea5e9}
.bg-color-red { background-color: red; }
.bg-color-orange { background-color: orange; }
.bg-color-black { background-color:black; }
.bg-color-white { background-color:white; }
.bg-color-gray { background-color:gray; }

/* FLEX Styles */
.flex-row { display:flex; flex-wrap:nowrap; }
.flex-column { display:flex; flex-direction: column;}
.flex-flip-col-to-row { display:flex; flex-direction:column; }
.flex-flip-row-to-col { display:flex; flex-direction:row; }
.flex-wrap { flex-wrap: wrap;}
.flex-nowrap { flex-wrap: nowrap; }
.flex-space-between { justify-content: space-between; }
.flex-justify-space-between { justify-content: space-between; }
.flex-justify-left { justify-content: left;}
.flex-justify-right { justify-content: right;}
.flex-justify-center { justify-content: center;}
.flex-align-start { align-items: start; }
.flex-align-center { align-items: center; }
.flex-align-stretch { align-items: stretch; }
.flex-gap-5 { gap: 5px; } 
.flex-gap-10 { gap: 10px; }
.flex-gap-15 { gap: 15px; }
.flex-gap-20 { gap: 20px; }
.flex-gap-25 { gap: 25px; }
.flex-gap-30 { gap: 30px; }
.flex-break { flex-basis: 100%; height: 0; }

/* Width/height Dimensions */
.width-200 { width: 200%; }
.width-100 { width: 100%; }
.width-90 { width: 90%; }
.width-80 { width: 80%; }
.width-75 { width: 75%; }
.width-70 { width: 70%; }
.width-50 { width: 50%; }
.width-49 { width: 49%; }
.width-45 { width: 45%; }
.width-40 { width: 40%; }
.width-25 { width: 25%; }

/* Max-widths */
.max-width-100 { max-width: 100%; }
.max-width-90 { max-width: 90%; }
.max-width-80 { max-width: 80%; }
.max-width-75 { max-width: 75%; }
.max-width-70 { max-width: 70%; }
.max-width-50 { max-width: 50%; }
.max-width-49 { max-width: 49%; }
.max-width-45 { max-width: 45%; }
.max-width-40 { max-width: 40%; }
.max-width-25 { max-width: 25%; }

/* Min-widths */
.min-width-100 { min-width: 100%; }
.min-width-90 { min-width: 90%; }
.min-width-80 { min-width: 80%; }
.min-width-75 { min-width: 75%; }
.min-width-70 { min-width: 70%; }
.min-width-60 { min-width: 60%; }
.min-width-50 { min-width: 50%; }
.min-width-49 { min-width: 49%; }
.min-width-45 { min-width: 45%; }
.min-width-40 { min-width: 40%; }
.min-width-25 { min-width: 25%; }
.min-width-20 { min-width: 20%; }
.min-width-10 { min-width: 10%; }

/* Width dimensions meant for mobile (they shrink as page gets wider) */
.width-90-mobile { width: 90%; }
.width-80-mobile { width: 80%; }
.width-75-mobile { width: 75%; }
.width-70-mobile { width: 70%; }
.width-60-mobile { width: 60%; }
.width-50-mobile { width: 50%; }
.width-25-mobile { width: 25%; }


/* Margin & Padding */
.margin-auto { margin:auto; }
.margin-none { margin: 0px; }
.margin-1 { margin: 1%; }
.margin-2 { margin: 2%; }
.margin-0-1 { margin: 0% 1%; }

.margin-top-1 { margin-top: 1%; }
.margin-top-2 { margin-top: 2%; }
.margin-top-3 { margin-top: 3%; }
.margin-right-1 { margin-right: 1%; }
.margin-right-2 { margin-right: 2%; }
.margin-right-3 { margin-right: 3%; }
.margin-bottom-1 { margin-bottom: 1%; }
.margin-bottom-2 { margin-bottom: 2%; }
.margin-bottom-3 { margin-bottom: 3%; }
.margin-left-1 { margin-left: 1%; }
.margin-left-2 { margin-left: 2%; }
.margin-left-3 { margin-left: 3%; }

.pading-1-0{ margin: 1% 0%; }
.pading-1 { margin: 1%; }
.pading-2 { margin: 2%; }
.pading-0-1 { margin: 0% 1%; }
.pading-0-2 { margin: 0% 2%; }
.pading-1-0{ margin: 1% 0%; }

.padding-top-1 { padding-top: 1%; }
.padding-top-2 { padding-top: 2%; }
.padding-top-3 { padding-top: 3%; }
.padding-right-1 { padding-right: 1%; }
.padding-right-2 { padding-right: 2%; }
.padding-right-3 { padding-right: 3%; }
.padding-bottom-1 { padding-bottom: 1%; }
.padding-bottom-2 { padding-bottom: 2%; }
.padding-bottom-3 { padding-bottom: 3%; }
.padding-left-1 { padding-left: 1%; }
.padding-left-2 { padding-left: 2%; }
.padding-left-3 { padding-left: 3%; }

/* Alignment */
.align-center { text-align: center;}
.align-left { text-align: left;}
.align-right { text-align:right; }

/* Positions */
.position-relative { position:relative }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }
[class^="position-"] .top-0 { top: 0; }
[class^="position-"] .top-1 { top: 1%; }
[class^="position-"] .top-2 { top: 2%; }
[class^="position-"] .top-3 { top: 3%; }
[class^="position-"] .right-0 { right: 0; }
[class^="position-"] .right-1 { right: 1%; }
[class^="position-"] .right-2 { right: 2%; }
[class^="position-"] .right-3 { right: 3%; }

/* Media - Medium */
@media screen and (min-width: 768px) {
  /* Width dimensions meant for desktop (they grow as page gets wider) */
  .width-90-tablet { width: 90%; }
  .width-80-tablet { width: 80%; }
  .width-75-tablet { width: 75%; }
  .width-70-tablet { width: 70%; }
  .width-50-tablet { width: 50%; }
  .width-40-tablet { width: 40%; }
  .width-30-tablet { width: 30%; }
  .width-25-tablet { width: 25%; }
  .width-20-tablet { width: 20%; }
  .width-10-tablet { width: 10%; }

}

@media (min-width: 1024px) {
  /* Flex gaps */
  .flex-gap-5-desktop { gap: 5px; } 
  .flex-gap-10-desktop { gap: 10px; }
  .flex-gap-15-desktop { gap: 15px; }
  .flex-gap-20-desktop { gap: 20px; }
  .flex-gap-25-desktop { gap: 25px; }
  .flex-gap-30-desktop { gap: 30px; }

  /* Width dimensions meant for desktop (shrink a little when the screen is this big) */
  .width-90-desktop { width: 90%; }
  .width-80-desktop { width: 80%; }
  .width-75-desktop { width: 75%; }
  .width-70-desktop { width: 70%; }
  .width-50-desktop { width: 50%; }
  .width-40-desktop { width: 40%; }
  .width-30-desktop { width: 30%; }
  .width-25-desktop { width: 25%; }
  .width-20-desktop { width: 20%; }
  .width-10-desktop { width: 10%; }

  /* Gaps scaled for mobile; divided by 10 */
  .flex-gap-25 { gap: 25px; }
  .flex-gap-30 { gap: 30px; }
}