/* fonts */
@media screen{

	/* samarakan */

	@font-face
	{
		font-family: Samarakan;
		src: url(../assets/fonts/samarakan.TTF);
		font-weight: 400;
	}

	/* redhat display */

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: RedHatDisplay;
		src: url(../assets/fonts/RedHatDisplay-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	/* redhat text */
	
	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: RedHatText;
		src: url(../assets/fonts/RedHatText-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	/* roboto */

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Thin.ttf);
		font-weight: 200;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-ThinItalic.ttf);
		font-weight: 200;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Light.ttf);
		font-weight: 300;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-LightItalic.ttf);
		font-weight: 300;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Regular.ttf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-RegularItalic.ttf);
		font-weight: 400;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Medium.ttf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-MediumItalic.ttf);
		font-weight: 500;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Bold.ttf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-BoldItalic.ttf);
		font-weight: 600;
		font-style: italic;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-Black.ttf);
		font-weight: 700;
	}

	@font-face
	{
		font-family: Roboto;
		src: url(../assets/fonts/Roboto-BlackItalic.ttf);
		font-weight: 700;
		font-style: italic;
	}

	/* SF */

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Ultralight.otf);
		font-weight: 100;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Thin.otf);
		font-weight: 200;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Light.otf);
		font-weight: 300;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Regular.otf);
		font-weight: 400;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Medium.otf);
		font-weight: 500;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Semibold.otf);
		font-weight: 600;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Bold.otf);
		font-weight: 700;
	}

	@font-face
	{
		font-family: SFPro;
		src: url(../assets/fonts/SanFranciscoDisplay-Black.otf);
		font-weight: 700;
	}

}

/* basic */
@media screen{
	*{
		box-sizing: border-box;
		vertical-align: middle;
	}

	html{
		-webkit-text-size-adjust: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-color: #ffffff;
	}

	body{
		margin:0;
		padding-top: calc(16vw + var(--top-safe-space));	/* to leave space for header */
		padding-bottom: calc(20vw + var(--bottom-safe-space));
		width: 100vw;
		min-height: 100vh;

		font-family: RedHatDisplay;
		font-size: 3.5vw;
		line-height: 1.5;

		--top-safe-space: env(safe-area-inset-top);
		--bottom-safe-space: env(safe-area-inset-bottom);
		--left-safe-space: env(safe-area-inset-left);
		--right-safe-space: env(safe-area-inset-right);

		animation-duration: 0.15s;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-name: zerozero;

		overflow: scroll;
		-webkit-overflow-scrolling: touch;
	}
	body::-webkit-scrollbar {display: none;}

	a{
		display: block;
		text-decoration: none;
		color: inherit;
	}

	svg{
		fill: #000;
	}
	
	/* input */
	input{
		width: 100%;
		border-radius: 1vw;
		border-style: solid;
		border-width: 0.5vw;
		transition-duration: 0.3s;
		-webkit-appearance: none;
	}
	input:disabled{
		opacity: 1;
		border-width: 0;
		padding: 0;
	}
	input:focus{
		outline: none;
	}

	.vertical_centered{
		position: relative; 
		top: 50%; 
		transform: translateY(-50%);
	}
}

/* colours */
@media screen{

	/* light mode colours */
	.svgwhite{fill: #fff;}
	.whitetext{color: #fff;}
	.whitebackground{background-color: #fff;}
	.whiteborder{border-color: #fff;}
	.whitesvg{fill: #fff;}
	.whitefill{fill: #fff;}
	.openlywhitetext{color: #f7f7f7;}
	.openlywhitebackground{background-color: #f7f7f7;}
	.openlywhiteborder{border-color: #f7f7f7;}
	.greytext{color: #9c9c9c;}
	.greybackground{background-color: #9c9c9c;}
	.greyborder{border-color: #9c9c9c;}
	.greyfill{fill: #9c9c9c;}
	.openlyblacktext{color: #444;}
	.openlyblackbackground{background-color: #222;}
	.openlyblackborder{border-color: #444;}
	.openlyblackfill{fill: #444;}
	.blacktext{color: #000;}
	.blackbackground{background-color: #000;}
	.blackborder{border-color: #000;}
	.svgblack{fill: #000;}
	.blackfill{fill: #000;}
	.blackshadowbackground{background-color: #000000a0;}
	.shadow1{box-shadow: 0 1vw 3vw 0 #00000020;}
	.shadow2{box-shadow: 0 1vw 2vw 0 #00000010;}

	/* dark mode colours */
	/* @media (prefers-color-scheme: dark){
		.svgwhite{fill: #000;}
		.whitetext{color: #000;}
		.whitebackground{background-color: #000;}
		.whiteborder{border-color: #000;}
		.whitesvg{fill: #000;}
		.openlywhitetext{color: #0a0a0a;}
		.openlywhitebackground{background-color: #0a0a0a;}
		.openlywhiteborder{border-color: #0a0a0a;}
		.greytext{color: #9c9c9c;}
		.greybackground{background-color: #9c9c9c;}
		.greyborder{border-color: #9c9c9c;}
		.greyfill{fill: #9c9c9c;}
		.openlyblacktext{color: #eee;}
		.openlyblackbackground{background-color: #eee;}
		.openlyblackborder{border-color: #eee;}
		.openlyblackfill{fill: #eee;}
		.blacktext{color: #fff;}
		.blackbackground{background-color: #fff;}
		.blackborder{border-color: #fff;}
		.svgblack{fill: #fff;}
		.blackfill{fill: #fff;}
		.blackshadowbackground{background-color: #ffffff2a;}
		.shadow1{box-shadow: 0 2vw 6vw 0 #ffffff20;}
		.shadow2{box-shadow: 0 2vw 4vw 0 #ffffff10;}
	} */

	/* non dark mode */

	.svgwhitenochange{fill: #fff;}
	.whitetextnochange{color: #fff;}
	.whitebackgroundnochange{background-color: #fff;}
	.whitebordernochange{border-color: #fff;}
	.whitesvgnochange{fill: #fff;}
	.openlywhitetextnochange{color: #eee;}
	.openlywhitebackgroundnochange{background-color: #eee;}
	.openlywhitebordernochange{border-color: #eee;}
	.greytextnochange{color: #9c9c9c;}
	.greybackgroundnochange{background-color: #9c9c9c;}
	.greybordernochange{border-color: #9c9c9c;}
	.openlyblacktextnochange{color: #444;}
	.openlyblackbackgroundnochange{background-color: #222;}
	.openlyblackbordernochange{border-color: #444;}
	.blacktextnochange{color: #000;}
	.blackbackgroundnochange{background-color: #000;}
	.blackbordernochange{border-color: #000;}
	.blackshadowbackgroundnochange{background-color: #000000a0;}
	.svgblacknochange{fill: #000;}

	.purpletext{color: #C840E9;}
	.purplebackground{background-color: #C840E9;}
	.purpleborder{border-color: #C840E9;}
	.purplefill{fill: #C840E9;}
	.bluetext{color: #0078fa;}
	.bluebackground{background-color: #0078fa;}
	.blueborder{border-color: #0078fa;}
	.bluefill{fill: #0078fa;}
	.greentext{color: #4CD964;}
	.greenbackground{background-color: #4CD964;}
	.greenborder{border-color: #4CD964;}
	.greenfill{fill: #4CD964;}
	.yellowtext{color: #FFCC00;}
	.yellowbackground{background-color: #FFCC00;}
	.yellowborder{border-color: #FFCC00;}
	.yellowfill{fill: #FFCC00;}
	.orangetext{color: #ff9028;}
	.orangebackground{background-color: #ff9028;}
	.orangeborder{border-color: #ff9028;}
	.orangefill{fill: #ff9028;}
	.redtext{color: #ff2851;}
	.redbackground{background-color: #ff2851;}
	.redborder{border-color: #ff2851;}
	.redfill{fill: #ff2851;}
	.openlydarkgreytext{color: #666;}
	.openlygreytext{color: #888;}

}

/* colours */
@media screen{

	/* backgrounds */
	.whitebackground{background-color: #ffffff;}
	.offwhitebackground{background-color: #f5f5f5;}
	.lightgreybackground{background-color: #f0f0f0;}
	.greybackground{background-color: #808080;}

	/* borders */
	.whiteborder{border-color: #ffffff;border-style: solid;border-width: 0.3vw;}
	.offwhiteborder{border-color: #f5f5f5;border-style: solid;border-width: 0.3vw;}
	.lightgreyborder{border-color: #f0f0f0;border-style: solid;border-width: 0.3vw;}
	.greyborder{border-color: #808080;border-style: solid;border-width: 0.3vw;}
	.blackborder{border-color: #000000;border-style: solid;border-width: 0.3vw;}

	/* shadows */
	.shadow1{box-shadow: 0 1vw 3vw 0 #00000020;}
	.shadow1up{box-shadow: 0 -1vw 3vw 0 #00000020;}
	.shadow2{box-shadow: 0 1vw 2vw 0 #00000010;}
	.shadow2up{box-shadow: 0 -1vw 2vw 0 #00000010;}
	.shadow3{box-shadow: 0 1vw 1.5vw 0.5vw #00000005;}
	.shadow3up{box-shadow: 0vw -1vw 1.5vw 0.5vw #00000005;}

	/* input */
	input{
		color: #000;
		border-color: #f0f0f0;
		background-color: #fafafa;
		box-shadow: inset 0 1vw 1vw 0 #0000000a;
	}
	input:disabled{
		background-color: #ffffff00;
		box-shadow: unset
	}
	input:focus{
		border-color: #0078fa;
	}
}

/* text */
@media screen{

	/* header stuff */

	.headertext{
		font-size: 6vw;
		font-weight: 500;
	}

	.headercaption{
		font-size: 4vw;
		font-weight: 500;
	}


	/* table stuff */

	.tableheading{
		font-size: 5vw;
		font-weight: 500;
	}

	.tablecaption{
		font-size: 3.5vw;
		font-weight: 400;
	}

	.textheading{
		font-size: 4vw;
		font-weight: 500;
	}

	.smalltext{
		font-size: 2.5vw;
		font-weight: 400;
	}

	.textdetails{
		font-size: 3.5vw;
		font-weight: 400;
	}
	
	.card .textdetails{
		font-weight: 500;
	}

	.textsmallheading{
		font-size: 4vw;
		font-weight: 400;
	}

	.inputtext{
		font-size: 5vw;
		font-weight: 400;
	}

	.inputtext:placeholder-shown{
		font-size: 4vw;
		line-height: 5vw;
		font-weight: 400;
	}
	

	/* button stuff */

	.buttontext{
		font-size: 4vw;
		font-weight: 600;
	}


	/* modal stuff */

	.modalheading{
		font-size: 6vw;
		font-weight: 500;
	}

	.modaltext{
		font-size: 5vw;
		font-weight: 400;
	}

	.modalcaption{
		font-size: 3.5vw;
		font-weight: 400;
	}


	/* normal stuff */
	.heading{
		font-size: 5.5vw;
		font-weight: 500;
	}

	.caption{
		font-size: 4vw;
	}

	.text{
		font-size: 4vw;
	}
}

/* header */
@media screen{
	#header{
		position: fixed;
		top: 0; left: 0; right: 0;
		display: flex;
		height: 16vw;
		width: 100%;
		padding-top: var(--top-safe-space);
		box-sizing: content-box;
		z-index: 10;
	}

		#header_back{
			flex-shrink: 0;
			padding: 4vw;
			height: 16vw;
			border-radius: 6vw;
			transition-duration: 0.3s;
		}
		#header_back:active{
			transform: scale(0.9);
		}

		#header_heading{
			flex-grow: 1;
			padding-left: 5vw;
			height: 16vw;
			line-height: 16vw;
			overflow: hidden;
		}

		#header_action{
			flex-shrink: 0;
			padding: 4vw;
			height: 16vw;
			line-height: 8vw;
			transition-duration: 0.3s;
		}
		#header_action:active{
			transform: scale(0.9);
		}

		#header_action_cancel{
			display: none;
			flex-shrink: 0;
			padding-right: 5vw;
			padding-left: 5vw;
			height: 16vw;
			line-height: 16vw;
			transition-duration: 0.3s;
		}
		#header_action_cancel:active{
			transform: scale(0.9);
		}
}

/* table view */
@media screen{

	.table_view{
		margin-top: 8vw;
	}

		.table_view_heading{
			margin: 5vw;
		}

		.table_view_caption{
			margin: 5vw;
		}

		.table_view_contents{
			margin-top: 5vw;
			padding: 5vw;
			box-shadow: 0 0 2vw 0 #00000010;
		}

			.table_view_contents_heading{
				margin-bottom: 2vw;
			}

			.table_view_contents_text{
				margin-bottom: 5vw;
			}

			.table_view_contents_input{
				margin-bottom: 5vw;
				padding: 3vw;
			}

			/* more tab layout */
			.table_view_image_item{
				display: flex;
				margin-bottom: 5vw;
			}

				.table_view_image{
					flex-shrink: 0;
					padding: 2.5vw;
					margin-right: 5vw;
					height: 12vw;
					width: 12vw;
					border-radius: 6vw;
				}

				.table_view_image_details{
					flex-grow: 1;
					margin-top: 0.5vw;
				}

}

/* checkbox */
@media screen{

	.checkbox{
		height: 5vw;
		width: 5vw;
		margin-right: 3vw;
		border-style: solid;
		border-width: 0.75vw;
		border-radius: 2.5vw;
	}
	.checked{
		padding: 0.5vw;
		background-color: #0078fa;
		background-clip: content-box;
	}
}

/* buttons & lables */
@media screen{

	.button{
		margin: auto;
		height: 10vw;
		width: 25vw;
		line-height: 9vw;
		text-align: center;
		border-radius: 1vw;
		border-style: solid;
		border-width: 0.5vw;
		transition-duration: 0.1s;
	}
	.button:active{
		transform: scale(0.9);
	}

	.disabledbutton{
		margin: auto;
		height: 10vw;
		width: 25vw;
		line-height: 9vw;
		text-align: center;
		font-size: 3.5vw;
		border-radius: 1vw;
		border-style: solid;
		border-width: 0.5vw;
		transition-duration: 0.1s;
	}

	.bigbutton{
		margin: auto;
		margin-top: 20vw;
		width: 50vw;
		height: 15vw;
		line-height: 14vw;
		text-align: center;
		border-radius: 1vw;
		border-style: solid;
		border-width: 0.5vw;
		transition-duration: 0.1s;
	}
	.bigbutton:active{
		transform: scale(0.9);
	}

	.label{
		display: inline;
		padding: 1vw 2vw 1vw 2vw;
		border-radius: 1vw;
	}
}

/* picker */
@media screen{

	.pickerview{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
	}

		.pickerbackground{
			height: 100vh;
			width: 100vw;
		}
	
		.pickerbody{
			position: fixed;
			top: 50vh;
			left: 50vw;
			transform: translate(-50%, -50%);
			padding: 5vw;
			max-height: 120vw;
			width: 90vw;
			border-radius: 1vw;
		}
	
			.pickerheading{
				margin-bottom: 2vw;
			}

			.pickercaption{
				margin-bottom: 5vw;
			}

			.pickercontent{
				margin-bottom: 5vw;
				max-height: 62vw;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
			}
	
				.pickeoptions{
					display: flex;
					margin-bottom: 5vw;
				}
					.pickeroptionscheckbox{
						margin-top: 1.1vw;
						flex-shrink: 0;
					}
	
			.pickerbutton{
				margin-left: auto;
				margin-right: 0;
			}
	
}

/* alert */
@media screen{

	#api_error_alert{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
	}
		#alertbackground{
			height: 100vh;
			width: 100vw;
		}
		#alertbody{
			position: fixed;
			top: 10vw;
			left: 50vw;
			transform: translate(-50%);
			padding: 5vw;
			width: 80vw;
			border-radius: 1vw;
		}
			#alertcontent{
				display: flex;
				align-items: center;
				flex-grow: 1;
			}
				#api_error_title{
					flex-grow: 1;
				}
				#api_error_button{
					flex-shrink: 0;
					padding: 1vw;
					width: 6vw;
					height: 6vw;
					border-radius: 3vw;
				}
			#api_error_code{
				margin-top: 2vw;
				word-wrap: break-word;
			}
			#api_error_description{
				margin-top: 2vw;
				word-wrap: break-word;
				text-align: center;
				font-size: 2vw;
				display: none;
			}

	#complete_form_alert{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
	}
		#complete_form_alert_background{
			height: 100vh;
			width: 100vw;
		}
		#complete_form_alert_body{
			position: fixed;
			top: 50vh;
			left: 50vw;
			transform: translate(-50%, -50%);
			padding: 5vw;
			width: 70vw;
			border-radius: 1vw;
			text-align: center;
		}
			#complete_form_alert_title{
				margin-bottom: 2vw;
			}
			#complete_form_alert_body{
				margin-bottom: 2vw;
			}
			#complete_form_alert_button{
				margin: auto;
				margin-top: 5vw;
			}
}

/* loading */
@media screen{
	#loading{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
	}
		#loadingbackground{
			height: 100vh;
			width: 100vw;
		}
		#loadingbody{
			position: fixed;
			top: 50vh;
			left: 50vw;
			transform: translate(-50%, -50%);
			padding: 5vw;
			width: 40vw;
			border-radius: 1vw;
			text-align: center;
		}
			#loadingimage{
				padding: 1vw;
				height: 10vw;
				width: 10vw;
				object-fit: contain;
			}
			#loadingtext{
				margin-top: 2vw;
			}
}

/* switch */
@media screen{

	.switchbody{
		margin: auto;
		height: 4vw;
		width: 10vw;
		border-radius: 2.5vw;
		background-color: #0078fa;
	}
		.switchbutton{
			margin-left: 5.5vw;
			height: 4vw;
			width: 4vw;
			border-radius: 2.5vw;
			background-color: white;
			box-shadow: 0 0.5vw 1.5vw 1vw #00000030;
			transition-duration: 0.3s;
		}
			.switchbuttoninner{
				height: 4vw;
				width: 4vw;
				border-radius: 2.5vw;
				background-color: white;
				box-shadow: 0 0 0 1vw white;
			}
}

/* pagination */
@media screen{
	.paginationcontainer{
		display: flex;
		justify-content: center;
	}
		.paginationmarker{
			margin: 1.5vw;
			margin-top: 0;
			margin-bottom: 0;
			height: 2vw;
			width: 2vw;
			border-radius: 1vw;
		}
}