app.css

/* ==========================
	setting the default website layout
========================== */

body,
html {
	margin: 0 !important;
	background-color: var(--white);
	scroll-behavior: smooth !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* margin: 0 0 0.5em 0; */
	font-weight: 400;
	line-height: 1.2;
}

body {
	color: var(--black);
	background-color: var(--whitev2);
	margin: 0 !important;
	font-family: Roboto;
	font-size: 14px;
	line-height: 1.5;
	/* 
    MOBILE 
    disable pinchin & user zooming on */
	/* touch-action: pan-x pan-y; */
	/* 
    SAFARI */
	-webkit-text-size-adjust: none;
}

* {
	box-sizing: border-box;
}

/* ==========================
  declaring global app CSS variables
========================== */

/* to learn more -> 
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties */
:root {
	/* 
    dimensions */
	--app-height: 100%;
	/* 
	main app colors */
	--white: #ffffff;
	--whitev2: #f2f2f2;
	--primary: #f5620f;
	--primary-fade: #f77c42;
	--secondary: #37474f;
	--blue: #0085ff;
	--red: #c62828;
	--red-bright: #ff3c3c;
	--theme-color: #e3e3e3;
	--grey-color: #e6e6e6;
	--grey-shade: #cccccc;
	/* 
	dark theme colors */
	--black: #000000;
	--dark: #121212;
	--grey: #8c8c8c;
	--background-surface: #121212;
	--dark-theme: #292929;
	--dark-theme-1: #4b4b4b;
  --dark-theme-1-shade: #616161;
  --dark-theme-1-2-shade: #737373;
	/* 
  breakpoints */
	--mobile: 375;
	--tablet: 767;
	--desktop: 1440;
	/* 
  other [fades] */
	--oragne-pale-bg: rgba(247, 124, 66, 0.2);
}

a {
	text-decoration: none !important;
	color: inherit;
	display: flex;
}

p {
	font-style: normal;
	font-weight: 400; /* 400 / 500 */
	line-height: 150%;
	margin: 0;
	color: var(--dark-theme);
}

/* ==========================
  VARIABLE FONT SIZES 
  & other STYLES for text
========================== */

/* DEFAULT BETARENA CSS VALUES */

h1 {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
	line-height: 140%;
}
h2 {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 150%;
}
h3 {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
}
h4 {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 150%;
}
h5 {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 150%;
}

/* 
~~~~~~~~~~~~
FONT COLOURS 
*/
.color-primary {
	color: #f5620f !important;
}
.color-black-2 {
	color: var(--dark-theme);
}
.color-secondary {
	color: var(--secondary);
}
.color-grey {
	color: var(--grey);
}
.color-red {
	color: var(--red);
}
.color-red-bright {
	color: var(--red-bright) !important;
}
.color-white {
	color: var(--white);
}
.color-blue {
	color: var(--blue);
}
.color-grey-shade {
	color: var(--grey-shade);
}
.color-blue-green-gradient {
	background: -webkit-linear-gradient(
		rgba(0, 255, 117, 1),
		rgba(0, 163, 255, 1)
	);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.color-error {
	color: #ff0000;
}
.color-success {
	color: #009406;
}
/* 
~~~~~~~~~~~~
FONT EXTRA STYLES 
*/
.no-wrap {
	white-space: nowrap;
}
.underline {
	text-decoration: underline !important;
}
.bold {
	font-style: normal;
	font-weight: bold;
}
.not-bold {
	font-weight: normal;
}
.uppercase {
	text-transform: uppercase;
}
.text-center {
	text-align: center;
	text-align: -webkit-center;
	text-align: -moz-center;
}
.text-left {
	text-align: left;
	text-align: -webkit-left;
	text-align: -moz-left;
}
.place-center {
	place-self: center;
}
.cursor-pointer {
	cursor: pointer;
}
.cursor-not-allowed {
	cursor: not-allowed !important;
}
.display-none {
	display: none;
}
/* 
~~~~~~~~~~~~
FONT WEIGHT 
*/
.w-400 {
	font-weight: 400;
}
.w-500 {
	font-weight: 500;
}
.w-normal {
	font-weight: normal;
}
/* 
~~~~~~~~~~~~
FONT SIZES
	font-size: calc(100vw / (var(--mobile) / 10));
*/
.s-10 {
	font-size: 10px;
}
.s-12 {
	font-size: 12px;
}
.s-14 {
	font-size: 14px;
}
.s-16 {
	font-size: 16px;
}
.s-18 {
	font-size: 18px;
}
.s-20 {
	font-size: 20px;
}
.s-22 {
	font-size: 22px;
}
.s-32 {
	font-size: 32px;
}

.x-large,
p.x-large,
span.x-large {
	font-size: 18px;
}
.large,
p.large,
span.large {
	font-size: 16px;
}
.medium,
p.medium,
span.medium {
	font-size: 14px;
}
.small,
p.small {
	font-size: 12px;
}
.s_small,
p.s_small {
	font-size: 12px;
}

/* 
page titles */
.s-42 {
	font-size: 42px;
	/* margin-bottom: calc(100vw / (var(--mobile) / 26)); */
}

@media only screen and (min-width: 768px) {
	.s-t-16 {
		font-size: 16px;
	}

	.large,
	p.large,
	span.large {
		font-size: 18px;
	}
}

/* ##########################
    DEFAULT MARGIN STYLES
########################## */
.m-0 {
	margin: 0;
}
/* 
~~~~~~~~~~
top-margins 
*/
.m-t-5 {
	margin-top: 5px;
}
.m-t-10 {
	margin-top: 10px;
}
.m-t-15 {
	margin-top: 15px;
}
.m-t-20 {
	margin-top: 20px;
}
.m-t-25 {
	margin-top: 25px;
}
.m-t-30 {
	margin-top: 30px;
}
.m-t-35 {
	margin-top: 35px;
}
.m-t-40 {
	margin-top: 40px;
}
.m-t-45 {
	margin-top: 45px;
}
.m-t-80 {
	margin-top: 80px;
}

/* 
~~~~~~~~~~
right-margins 
*/
.m-r-5 {
	margin-right: 5px;
}
.m-r-6 {
	margin-right: 6px;
}
.m-r-8 {
	margin-right: 8px;
}
.m-r-10 {
	margin-right: 10px;
}
.m-r-12 {
	margin-right: 12px;
}
.m-r-15 {
	margin-right: 15px;
}
.m-r-16 {
	margin-right: 16px;
}
.m-r-20 {
	margin-right: 20px;
}
.m-r-24 {
	margin-right: 24px;
}
.m-r-30 {
	margin-right: 30px;
}
.m-r-32 {
	margin-right: 32px;
}

/* 
~~~~~~~~~~
bottom-margins 
*/
.m-b-5 {
	margin-bottom: 5px;
}
.m-b-8 {
	margin-bottom: 8px;
}
.m-b-10 {
	margin-bottom: 10px;
}
.m-b-12 {
	margin-bottom: 12px;
}
.m-b-15 {
	margin-bottom: 15px;
}
.m-b-16 {
	margin-bottom: 16px;
}
.m-b-20 {
	margin-bottom: 20px;
}
.m-b-24 {
	margin-bottom: 24px;
}
.m-b-25 {
	margin-bottom: 25px;
}
.m-b-30 {
	margin-bottom: 30px;
}
.m-b-35 {
	margin-bottom: 35px;
}
.m-b-40 {
	margin-bottom: 40px;
}
.m-b-50 {
	margin-bottom: 50px;
}
.m-b-55 {
	margin-bottom: 55px;
}

/* 
~~~~~~~~~~
left-margins 
*/

.m-l-8 {
	margin-left: 8px;
}

.m-l-10 {
	margin-left: 10px;
}

.m-l-24 {
	margin-left: 24px;
}

/*
##########################
    CONTAINER STYLE
##########################
*/

section {
	min-height: calc(100vh - 128px);
	padding: 22px 16px;
	padding-bottom: 100px !important;
	margin: auto;
}
@media only screen and (min-width: 768px) {
	section {
		padding: 26px 34px;
		margin: auto;
	}
}
@media only screen and (min-width: 1025px) {
	section {
		padding: 26px 34px;
		margin: auto;
	}
}

/* FLEX DISPLAY */
.row-space-out {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
}
.row-space-even {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-evenly;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
}
.row-space-start {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: start;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
}
.row-space-out-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
}
.row-space-center {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
}
.row-space-end {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: end;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
}

/*
============
GRID / COLUMN DISPLAY */
.column-space-center {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 100%;
	flex-direction: column;
	flex-wrap: nowrap;
}
.column-space-start {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	width: 100%;
	flex-direction: column;
	flex-wrap: nowrap;
}
.column-space-stretch {
	display: flex;
	align-content: center;
	width: 100%;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
}
.column-start-grid {
	display: grid;
	justify-content: center;
}
.column-start-grid-start {
	display: grid;
	width: 100%;
	/* justify-content: start; */
	justify-items: start;
}

/* page dividers */

hr {
	width: 100%;
	margin: 16.17px 0;
	opacity: 0.25;
	border: 1.46983px solid #ff5555;
	background-color: #ff5555;
}

/* ==========================
        BUTTON STYLES 
========================== */

button {
	/* 
    removing pre-set CSS, */
	outline: none !important;
	border: none !important;
	/* 
    general button design, */
	/* box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); */
	/* padding: 5px 10px !important; */
	/* border-radius: 3.5px; */
	opacity: 1;
	cursor: pointer;
	transition: all 0.3s ease;
	align-items: center;
	/* 
    fonts */
	white-space: nowrap;
	/* 
    for the icons separation */
	display: flex;
	justify-content: center;
}
button p {
	/* font-weight: 400; */
}
button:disabled {
	cursor: default;
}
/* 
~~~~~~~~~~~~~
BUTTON STYLES 
*/
.btn-primary {
	background: var(--primary);
}
.btn-primary p {
	color: var(--white);
}

.btn-secondary {
	background: var(--secondary);
}
.btn-secondary p {
	color: var(--white);
}

.btn-blue {
	background-color: var(--blue);
}
.btn-blue p {
	color: var(--white);
}
.btn-blue:hover {
	background-color: var(--white);
}
.btn-blue:hover p {
	color: var(--secondary);
}

.btn-white {
	background-color: var(--white);
}
.btn-white p {
	color: var(--black);
}

.btn-primary-v2 {
	background: var(--primary);
	border-radius: 8px;
	padding: 11.5px 24px;
	height: 44px;
	color: var(--white);
}
.btn-primary-v2:hover {
	background-color: var(--primary-fade);
}

.btn-hollow {
	background: transparent;
	border: 1px solid var(--grey-color) !important;
	border-radius: 8px;
	padding: 11.5px 20px;
	height: 44px;
	color: var(--dark-theme);
}
.btn-hollow:hover {
	border: 1px solid var(--primary) !important;
	color: var(--primary);
}
.btn-hollow.danger {
	border: 1px solid var(--red) !important;
}

/* 
~~~~~~~~~~~~~
BUTTON ICON IMG
*/
.btn-right-icon {
	padding: 5px 45px 5px 6px !important;
	background-position: right 11px top 50%;
	background-size: 16.17px 16.17px;
	background-repeat: no-repeat;
}
.btn-left-icon {
	padding: 5px 6px 5px 37px !important;
	background-position: left 11px top 50%;
	background-size: 16.17px 16.17px;
	background-repeat: no-repeat;
}

/* 
INPUT FORM CSS STYLE 
*/

form fieldset {
	outline: none;
	border: none;
	padding: 0;
	margin: 0;
}
form input,
form select {
	outline: none;
	border: none;
	opacity: 1;
	cursor: text;
	align-items: center;
	text-align: start;
	display: flex;
	transition: all 0.15s ease;
	/* background: #ffffff; */
	/* border: 0.5px solid #37474f; */
	box-sizing: border-box;
	border-radius: 7.34914px;
	padding: 7px;
}
input:focus {
	/* padding: 5px; */
	/* border: 2.5px solid #ff5555; */
}

/* 
=========================
ANIMATIONS FORM CSS STYLE 
=========================
*/

@keyframes flickerAnimation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
}
@-o-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes flickerAnimation {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.25;
	}
	100% {
		opacity: 1;
	}
}
.animation-target {
	-webkit-animation: flickerAnimation 1.5s
		infinite;
	-moz-animation: flickerAnimation 1.5s infinite;
	-o-animation: flickerAnimation 1.5s infinite;
	animation: flickerAnimation 1.5s infinite;
}

/* 
=========================
DARK-MODE FORM CSS STYLE 
=========================
*/

.dark-background {
	background-color: var(--dark-theme) !important;
}
.dark-background-1 {
	background-color: var(
		--dark-theme-1
	) !important;
}

.dark-background-1 .color-grey {
	color: #a8a8a8 !important;
}

.dark-background-1 .color-black-2 {
	color: #ffffff !important;
}

/* ... MOBILE VIEW OVERFLOW HIDDEN ... */

@media only screen and (max-width: 375px) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* ... zoom-out-mobiles-input-form ... */
/* https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone */
@supports (-webkit-overflow-scrolling: touch) {
	input:active {
		font-size: 16px !important;
	}
}