@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
:root {
	/* Main Colors */
	--primaryOne: #a9dff2;
	--primaryTwo: #38aee4;
	--primaryThree: #1a3967;

	/* Secondary Colors */
	--secondary-blueberry: #1e77b9;
	--secondary-strawberry: #e54041;
	--secondary-peach: #faa84d;
	--secondary-grape: #a55ea6;
	--secondary-apple: #29b45d;
	--secondary-banana: #f9d374;
	--secondary-orange: #ea754b;

	/* Backgrounds */
	--backgroundOne: white;
	--backgroundTwo: white;
	--backgroundThree: white;
	--backgroundFour: white;

	--lightGrey: rgb(192, 192, 192);
	--darkGrey: rgb(63, 63, 63);

	/* Fonts Family*/
	--liftlife-fonts: 'Poppins', sans-serif;
	/* Font Sizes */
	--heading-semiBold: 800;
	--heading-meduim: 700;
	--heading-sub: 300;
	--body-regular: 200;
	--body-light: 100;

	/* Font Colors */

	/* Font Spacing */
	--std-font-size: 20px;

	/* Margins */
	--std-margin: 25px;

	/* Paddings */
	--std-padding: 9px;

	/* Grid Spacings */

	/* Animation */
	--transitionSpeed: 1s;
	--btnTransitionSpeed: 0.2s;
	--btnScale: scale(1.03);

	/* Drop Shadow */
	--dropshadow: 10px 10px 5px #5a5a5a1e;
	--dropshadowFull: 2px 3px 8px #5a5a5a46;
}

* {
	font-family: var(--liftlife-fonts);
	margin: 0;
	padding: 0;
}
body {
	/* background: var(--primaryTwo); */
	width: 100%;
	position: relative;
}
.text-light {
	font-weight: 100;
}
.text-normal {
	font-weight: 200;
}
.text-meduim {
	font-weight: 300;
}
.text-medhigh {
	font-weight: 500;
}

.heading-big {
}
.heading-meduim {
}
.heading-small {
}
.text-uppercase-first {
	text-transform: capitalize;
}
.text-u {
	text-decoration: underline;
}
.status-active {
	color: var(--secondary-apple);
}
.status-pending {
	color: var(--secondary-orange);
}
.status-paused {
	color: var(--secondary-blueberry);
}
.status-suspended {
	color: var(--secondary-strawberry);
}
.text-blue-light {
	color: var(--primaryOne);
}
.text-blue-meduim {
	color: var(--primaryTwo);
}
.text-blue-dark {
	color: var(--primaryThree);
}
.text-white {
	color: white;
}
.text-grey-light {
	color: var(--lightGrey);
}
.text-grey-dark {
	color: var(--darkGrey);
}
.text-green {
	color: var(--secondary-apple);
}
.text-orange {
	color: var(--secondary-orange);
}
.text-yellow {
	color: var(--secondary-banana);
}
.text-red {
	color: var(--secondary-strawberry);
}
/* Modal */
.modalBG {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 99999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.589); /* Black w/ opacity */
}
#image-modal button {
	justify-self: center;
	align-self: center;
	text-align: center;
	margin: 25px;
}
#image-modal {
	text-align: center;
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.897); /* Black w/ opacity */
}
.profile-img-modal-content {
	margin: auto;
	margin-top: 150px;
	display: block;
	width: 80%;
	max-width: 700px;
}
.modal-close-btn {
	position: absolute;
	top: 15px;
	right: 35px;
	color: white;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
	color: var(--primaryTwo);
	text-decoration: none;
	cursor: pointer;
}

.animate_modal {
	-webkit-animation: animate-popup 0.6s;
	animation: animate-popup 0.6s;
}

@-webkit-keyframes animate-popup {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}

@keyframes animate-popup {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

/* Input Fields */
.reg-inputfield {
	width: 100%;
	padding: 8px 12px;
	margin: 8px 0;
	outline: none;
	display: inline-block;
	border-radius: 10px;
	border: 1px solid var(--primaryThree);

	text-align: center;
	letter-spacing: 1.5px;
	align-self: center;
	font-size: 1em;
	box-sizing: border-box;
}

button a {
	color: white;
	text-decoration: none;
}

/* Common Buttons */
.btn-blue-dark {
	background-color: var(--primaryThree);
}
.btn-blue-meduim {
	background-color: var(--primaryTwo);
}
.btn-blue-light {
	background-color: var(--primaryOne);
}
.btn-purple {
	background-color: var(--secondary-grape);
}
.btn-yellow {
	background-color: var(--secondary-banana);
}
.btn-peach {
	background-color: var(--secondary-peach);
}

.btn-green {
	background-color: var(--secondary-apple);
}
.btn-red {
	background-color: var(--secondary-strawberry);
}
.btn-dark {
	background-color: var(--darkGrey);
}

.btn-small {
	height: auto;
	width: 50px;
}

.btn-meduim {
	height: auto;
	width: 100px;
}
.btn-meduim-large {
	height: auto;
	width: 150px;
}

.btn-large {
	height: auto;
	width: 250px;
}
.btn-full {
	height: auto;
	width: 100%;
}
.btn-fit-content {
	height: auto;
	width: fit-content;
}

.btn {
	color: white;
	border-radius: 8px;
	border: none;
	outline: none;
	padding: 8px 12px;
	margin-top: 20px;
	transition: var(--btnTransitionSpeed);
	cursor: pointer;
}
.btn:hover {
	transform: var(--btnScale);
	box-shadow: var(--dropshadowFull);
}
.btn:active {
	transform: scale(0.9);
	box-shadow: var(--dropshadowFull);
}

/* Tables */
.table,
.result-table,
.add-new-table {
	box-sizing: border-box;
	border-spacing: 0 15px;
	width: 100%;
	font-size: 0.9em;
}

.alert-box-green,
.alert-box-red,
.alert-box-blue {
	padding: 8px 12px;
	text-align: center;
	color: white;
	width: 100%;
	border-radius: 8px;
	margin: 15px 0;
}

.alert-box-green {
	background-color: var(--secondary-apple);
}
.alert-box-red {
	background-color: var(--secondary-strawberry);
}
.alert-box-blue {
	background-color: var(--secondary-blueberry);
}

.full-modal-container {
	position: fixed;
	top: 0;
	left: 0;
	padding-left: 325px;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #1a396788;
	z-index: 5555;
}
.password-modal {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
	background: white;
	box-shadow: var(--dropshadowFull);
	border-radius: 8px;
	padding: 25px;
}
.password-modal input {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid var(--primaryThree);
}

.close-modal-btn {
	font-size: 40px;
	color: white;
	transition: 0.25s ease-in;
	font-weight: 100;
}

.close-modal-btn:hover {
	cursor: pointer;
	color: var(--primaryTwo);
	transform: scale(1.2);
}
.default-modal {
	position: fixed;
	width: 0;
	height: 100%;
	min-height: 100vh;
	background: white;
	top: 0;
	right: -100%;
	transition: 0.5s ease-in;
	overflow: auto;
}
.default-modal.active {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: white;
	top: 0;
	right: 0;
}

.default-modal-content-container {
	padding: 25px;
	padding-left: 350px;
	width: 100%;
	height: 100%;
}

::-webkit-scrollbar {
	width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
	background: white;
	box-shadow: var(--dropshadowFull);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--primaryThree);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--primaryTwo);
}