/**
 * Heads and tails
 *
 * class definitions doing just one thing...
 */

/* display/visibility */
.hidden { visibility: hidden; }
.visible { visibility: visible; }
.none { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.initial { display: initial; }

/* flex */
.flex { display: flex; }
.flex-col,
.flex-direction-column { flex-direction: column; }
.flex-direction-row-reverse { flex-direction: row-reverse; }

.flex-wrap { flex-wrap: wrap; }

.flex-grow-0 { flex-grow: 0; }
.flex-grow,
.flex-grow-1   { flex-grow: 1; }
.flex-grow-5   { flex-grow: 5; }

.flex-row { flex-direction: row; }
.flex-shrink   { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-2 { flex-shrink: 2; }

.items-center   { align-items: center; }
.items-flex-end { align-items: flex-end; }

.align-self-start   { align-self: start; }
.align-self-center  { align-self: center; }

.justify-between    { justify-content: space-between; }
.justify-center     { justify-content: center; }
.justify-flex-start { justify-content: flex-start; }
.justify-flex-end   { justify-content: flex-end; }

.gap-5 { gap: 5px; }
.gap-10 { gap: 10px; }
.gap-20 { gap: 20px; }
.gap-35 { gap: 35px; }

/* position */
.relative { position: relative; }
.absolute { position: absolute; }

/* z-index */
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-100  { z-index: 100; }
.z-1000  { z-index: 1000; }

/* font/text */
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.italic, .cursive { font-style: italic; }
.bold { font-family: "Open Sans Bold"; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.text-meta { font-size: var(--font-size-xs); font-weight: bold; }
.font-size { font-size: var(--font-size); }
.font-size-s { font-size: var(--font-size-s); }
.font-size-xs { font-size: var(--font-size-xs); }
.no-wrap { white-space: nowrap; }

/* cursors */
.pointer { cursor: pointer; }

/* borders */
.border { border: 1px solid var(--border-color); }
.border-1 { border-width: 1px; border-style: solid; }
.no-border { border: 0; }
.border-rounded { border-radius: 3px; }

/* box-sizing */
.border-box { box-sizing: border-box;}

/* width */
.w-auto { width: auto; }
.w-fifty-pct { width: 50%; }
.w-full { width: 100%; }
.w-fill { width: -webkit-fill-available; }
.w-fit { width: fit-content; }
.w-10 { width: 10px; }
.max-w-400 { max-width: 400px; }
.max-w-640 { max-width: 640px; }
.max-w-768 { max-width: 768px; }
.fit-content { width: fit-content; }

/* height */
.h-full { height: 100%; }
.h-10 { height: 10px; }
.min-h-150 { min-height: 150px; }

/* colors */
.root-only { background-color:  var(--highlight-color-success); }

.background-color-white { background-color: var(--color-white); }
.background-color-error { background-color: var(--highlight-color-error); }
.background-color-highlight { background-color: var(--highlight-color-primary); }
.background-color-success { background-color: var(--highlight-color-success); }
.background-color-warning { background-color: var(--highlight-color-warning); }
.background-color-transparent { background-color: transparent; }
.background-color-black, .background-color-A { background-color: black; }
.background-color-red,   .background-color-B { background-color: red; }
.background-color-blue,  .background-color-C { background-color: blue; }
.background-color-green, .background-color-D { background-color: green; }

.border-color-orange { border-color: var(--highlight-color-warning); }
.border-color-white { border-color: var(--color-white); }
.border-color-highlight { border-color: var(--highlight-color-primary); }
.border-color-error { border-color: var(--highlight-color-error); }

.text-color-black { color: #000; }
.text-color-decoration {color: var(--decoration-color-primary); }
.text-color-error,
.text-color-red { color: var(--highlight-color-error); }
.text-color-success,
.text-color-green { color: var(--highlight-color-success); }
.text-color-warning,
.text-color-orange { color: var(--highlight-color-warning); }
.text-color-white { color: var(--color-white); }
.text-color { color: var(--highlight-color-primary); }

/* margings */
.margin-0 { margin: 0 }
.margin-negative-padding { margin: -10px -35px; }

.margin-x-auto { margin-left: auto; margin-right: auto; }
.margin-x-0 { margin-left: 0; margin-right: 0; }
.margin-x-5 { margin-left: 5px; margin-right: 5px; }
.margin-y-10 { margin-top: 10px;  margin-bottom: 10px; }

.margin-top-0 { margin-top: 0; }
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-35 { margin-top: 35px; }
.margin-top-50 { margin-top: 50px; }

.margin-right-0  { margin-right: 0px; }
.margin-right-5  { margin-right: 5px; }
.margin-right-10 { margin-right: 10px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-35 { margin-right: 35px; }
.margin-right-50 { margin-right: 50px; }

.margin-bottom-5  { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-35 { margin-bottom: 35px; }
.margin-bottom-50 { margin-bottom: 50px; }

.margin-left-0  { margin-left: 0px; }
.margin-left-5  { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-35 { margin-left: 35px; }
.margin-left-50 { margin-left: 50px; }


/* paddings */
.padding { padding: 10px 35px; }
.padding-thinner { padding: 10px 20px; }
.padding-0 { padding: 0; }
.padding-2 { padding: 2px; }
.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }

.padding-x-0 { padding-left: 0px; padding-right: 0px; }
.padding-x-5 { padding-left: 5px; padding-right: 5px; }
.padding-x-10 { padding-left: 10px; padding-right: 10px; }
.padding-y-2 { padding-top: 2px; padding-bottom: 2px; }
.padding-y-5 { padding-top: 5px; padding-bottom: 5px; }

.padding-top-10 { padding-top: 10px; }
.padding-top-20 { padding-top: 20px; }
.padding-top-35 { padding-top: 35px; }
.padding-top-50 { padding-top: 50px; }

.padding-right-5  { padding-right: 5px; }
.padding-right-10 { padding-right: 10px; }
.padding-right-20 { padding-right: 20px; }
.padding-right-35 { padding-right: 35px; }
.padding-right-50 { padding-right: 50px; }

.padding-bottom-10 { padding-bottom: 10px; }
.padding-bottom-20 { padding-bottom: 20px; }
.padding-bottom-35 { padding-bottom: 35px; }
.padding-bottom-50 { padding-bottom: 50px; }

.padding-left-0  { padding-left: 0px; }
.padding-left-5  { padding-left: 5px; }
.padding-left-10 { padding-left: 10px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-35 { padding-left: 35px; }
.padding-left-50 { padding-left: 50px; }

@media all and (max-width: 640px) {
  .padding-sm-y-5 { padding-top: 5px; padding-bottom: 5px; }
  .margin-sm-right-5 { margin-right: 5px; }
}