/* helpers */
.text-red {color: var(--color-red)!important;}

.fsb {
	display: flex;
	justify-content: space-between;
}
.flex {display: flex}
.flex-column {flex-direction: column}
.flex-hcenter {justify-content: center}
.flex-vcenter {align-items: center}
.fwrap {flex-wrap: wrap}

.bg-lightblue {background-color: var(--color-lightblue)}
.bg-cream {background-color: var(--color-cream)}
.bg-white {background-color: white}

/* border */
.br5 {border-radius: .5rem;}
.br10 {border-radius: 1rem;}

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

.text-blue-light {color: var(--color-blue-light)}
.text-blue {color: var(--color-blue)}
.text-blue-dark {color: var(--color-blue-dark)}
.text-blue-dark2 {color: var(--color-blue-dark2)}
.text-lightblue {color: var(--color-lightblue)}
.text-cream-light {color: var(--color-cream-light)}
.text-cream-light--force {color: var(--color-cream-light) !important;}
.text-cream {color: var(--color-cream)}
.text-cream-dark {color: var(--color-cream-dark)}
.text-white {color: var(--color-white)}
.text-pink-light {color: var(--color-pink-light)}
.text-pink-light2 {color: var(--color-pink-light2)}
.text-pink {color: var(--color-pink)}
.text-red {color: var(--color-red)}
.text-green {color: var(--color-green)}

.strikethrough {text-decoration: line-through;}

/* font weight */
.fw300 {font-weight: 300}
.fw400 {font-weight: 400}
.fw500 {font-weight: 500}
.fw600 {font-weight: 600}
.fw700 {font-weight: 700}
.fw800 {font-weight: 800}

/* font size */
.fs12 {font-size: 1.2rem}
.fs14 {font-size: 1.4rem}
.fs16 {font-size: 1.6rem}
.fs18 {font-size: 1.8rem}
.fs20 {font-size: 2rem}
.fs22 {font-size: 2.2rem}
.fs24 {font-size: 2.4rem}
.fs26 {font-size: 2.6rem}
.fs28 {font-size: 2.8rem}
.fs3 {font-size: 3rem}
.fs4 {font-size: 4rem}
.fs5 {font-size: 5rem}
.fs6 {font-size: 6rem}

/* Margin */
.m0 {margin: 0}
.mx0 {margin-left: 0; margin-right: 0}
.my0 {margin-top: 0; margin-bottom: 0}

.m0 {margin: 0}
.m10 {margin: 1rem}
.m15 {margin: 1.5rem}
.m20 {margin: 2rem}
.m25 {margin: 2.5rem}
.m30 {margin: 3rem}

.mb0 {margin-bottom: 0}
.mb10 {margin-bottom: 1rem}
.mb15 {margin-bottom: 1.5rem}
.mb20 {margin-bottom: 2rem}
.mb25 {margin-bottom: 2.5rem}
.mb30 {margin-bottom: 3rem}

.mr0 {margin-right: 0}
.mr10 {margin-right: 1rem}
.mr15 {margin-right: 1.5rem}
.mr20 {margin-right: 2rem}
.mr25 {margin-right: 2.5rem}
.mr30 {margin-right: 3rem}

.ml0 {margin-left: 0}
.ml10 {margin-left: 1rem}
.ml15 {margin-left: 1.5rem}
.ml20 {margin-left: 2rem}
.ml25 {margin-left: 2.5rem}
.ml30 {margin-left: 3rem}

.mt0 {margin-top: 0}
.mt10 {margin-top: 1rem}
.mt15 {margin-top: 1.5rem}
.mt20 {margin-top: 2rem}
.mt25 {margin-top: 2.5rem}
.mt30 {margin-top: 3rem}

/* Padding */
.p0 {padding: 0}
.px0 {padding-left: 0; padding-right: 0}
.py0 {padding-top: 0; padding-bottom: 0}

.p0 {padding: 0}
.p10 {padding: 1rem}
.p15 {padding: 1.5rem}
.p20 {padding: 2rem}
.p25 {padding: 2.5rem}
.p30 {padding: 3rem}

.pb0 {padding-bottom: 0}
.pb10 {padding-bottom: 1rem}
.pb15 {padding-bottom: 1.5rem}
.pb20 {padding-bottom: 2rem}
.pb25 {padding-bottom: 2.5rem}
.pb30 {padding-bottom: 3rem}

.pr0 {padding-right: 0}
.pr10 {padding-right: 1rem}
.pr15 {padding-right: 1.5rem}
.pr20 {padding-right: 2rem}
.pr25 {padding-right: 2.5rem}
.pr30 {padding-right: 3rem}

.pl0 {padding-left: 0}
.pl10 {padding-left: 1rem}
.pl15 {padding-left: 1.5rem}
.pl20 {padding-left: 2rem}
.pl25 {padding-left: 2.5rem}
.pl30 {padding-left: 3rem}

.pt0 {padding-top: 0}
.pt10 {padding-top: 1rem}
.pt15 {padding-top: 1.5rem}
.pt20 {padding-top: 2rem}
.pt25 {padding-top: 2.5rem}
.pt30 {padding-top: 3rem}

/* Width */
.w50p {width: 50%}
.w100p {width: 100%}

/* min width */
.minw50p {min-width: 50%}
.minw100p {min-width: 100%}

/* max width */
.maxw30 {max-width: 3rem}
.maxw80 {max-width: 8rem}
.maxw100 {max-width: 10rem}
.maxw100p {max-width: 100%}
.maxw50p {max-width: 50%}

/* cursor */
.c-pointer {cursor: pointer}

/* Overflow behaviours */
.overflow-x-scroll {overflow-x: scroll}

.box-shadow20 {
	box-shadow: 0 0 1rem rgba(0,0,0,.2);
}