altUI.css

html, body{
	margin: 0;
	padding: 0;
 	height: 100%;
	font-family: 'Source Sans Pro', Arial, sans-serif;
}
div{
	box-sizing: border-box
}
.altUI_AppSecHor{
	display: flex;
	padding: 8px;
	justify-content: space-around;
	flex: 1;
	box-sizing: border-box
}

.altUI_AppView{
	display: flex;
	flex:1;
	height: 100%;
	width: 100%
}

	.altUI_AppViewSidebar{
		width: 300px;
		display: flex;
		flex-direction: column;
		background: whitesmoke;
		flex-shrink: 0;
		overflow: auto;
		box-sizing: border-box
	}
	.altUI_AppView_Content{
		background-color: white;
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		height: 100%;
		overflow: auto; 
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		position: relative;
	}

.altUI_AppBar{
	position: sticky;
  	top: 0;
  	width: 100%;
  	display: flex;
  	flex-direction: row;
  	justify-content: space-between;
  	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	padding: 16px;
  	box-sizing: border-box;
  	align-items: center;
	background-color: white;
	z-index: 999;
  
}

	.altUI_AppBar .altUI_SidebarBttn{
		display: none;
	}

	.altUI_AppBarLogo{
    		height: 48px;
    		margin-right: 8px
  	}
	img.altUI_AppBarLogo[src='undefined']{
		display: none
	}
  	.altUI_AppBarToolbar{
    		display: flex;
    		flex: 1;
    		width: 100%;
    		flex-direction: row;
		align-items: center;
  	}
  		.altUI_AppBarToolbar h1{
    			font-size: 32px;
    			font-weight: 600;
    			flex: 1;
    			margin: 0;
    			padding: 0;
			text-align: center
		}
		.altUI_AppBarToolbar .altUI_Button{
			padding: 8px;
			margin: 4px;
		}

.altUI_CellViewItem{
	width: 200px;
	height: 200px;
	margin: 4px;
	padding: 8px;
	border-radius: 8px;
	background-color: rgb(200,200,200);
	flex-shrink: 0;
	font-size: 24px;
	align-items: center;
	justify-content: center;
}
	.altUI_CellViewItemKeyValue{
		display: flex;
		flex-direction: column
	}
	.altUI_CellViewItemKeyValue_Value{
		font-size: 2em;
		font-weight: 600
	}


.altUI_Chart_Labels{
	display: flex;
	padding: 4px;
	font-size: 24px;
	overflow: auto
}

	/*.altUI_Chart_Labels > span {
		margin: 0px 2px;
	}
	.altUI_Chart_Labels > span > span {
		font-size: 20px;
		margin: 0px 2px;
	}*/

.altUI_Chart_Percentage{
	display: flex;
	margin: 8px;
	height: 20px;
	border-radius: 4px;
	justify-content: space-between;
}

	.altUI_Chart_Percentage .altUI_Chart_Percentage_Data{
		background-color: rgba(0,122,255);
		margin: 1px;
	}

.altUI_FormCardBlock{
	margin: 8px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 800px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	border-radius: 8px;
	border: 1px solid rgb(200,200,200)
}

.altUI_Heading{
	display: block;
	margin: 8px 0px;
}
.altUI_Heading.altUI_Heading1{
	font-size: 48px;
	font-weight: 600;
}
.altUI_Heading.altUI_Heading2{
	font-weight: 800;
	font-size: 32px;
	text-transform: uppercase
}
.altUI_Heading.altUI_Heading3{
	font-size: 32px;
	font-weight: 600;
}

.altUI_Hero{
	width: 100%;
	height: 20%;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.altUI_HorizontalRule{
	margin: 16px 8px;
}

.altUI_InputVIew{
	display: flex;
	flex-direction: column;
	font-size: 18px;
	padding: 8px
}
	.altUI_InputView label.altUI_InputViewHint{
		font-size: 18px;
		font-weight: 600;
	}
	.altUI_InputView input.altUI_InputViewInput, button.altUI_InputViewInput, .altUI_Button, select.altUI_InputViewInput, .altUI_Picker_Select, .altUI_Color{
		font-size: 1.2em;
		padding: 8px;
		border-radius: 8px;
		background: rgb(245,245,245);
		border: none;
	}
	
		select.altUI_InputViewInput option{
			font-size: 16px;
		}
	input.altUI_InputViewInput:not([type="button"], [type="submit"]):focus{
		border: none;
		border-radius: 0px;
		border-bottom: 2px solid rgb(0,122,255);
		background: transparent;
	}
	
	input[type="checkbox"].altUI_InputViewInput{
		apperance: none;
		-webkit-appearance: none;
		font-size: 1.2em;
		font-family: 'Material Icons';
		text-align: center;
	}
	input[type="checkbox"].altUI_InputViewInput::before{
		content: 'check';
		color: transparent;
	}
	input[type="checkbox"].altUI_InputViewInput:checked{
		background-color: black
	}
	input[type="checkbox"].altUI_InputViewInput:checked::before{
		color: white
	}

	.altUI_InputView:has(>input[type="hidden"]){
		padding: 0;
	}
	input[type="button"].altUI_InputViewInput, input[type="submit"].altUI_InputViewInput, .altUI_Button, .altUI_Color{
		padding: 16px;
		font-weight: 600;
		font-size: 18px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.altUI_InputView input.altUI_InputViewInput{
		margin: 0 !important;
	}
	.altUI_Button, .altUI_Color{
		margin: 8px
	}
		.altUI_Color input[type='color']{
			border: none;
			padding: 0px;
		}
		
.altUI_ListViewItem{
	display: flex;
	justify-content: space-between;
	padding: 16px 4px;
	border-bottom: 1px solid rgb(200,200,200);
	align-items: center;
	font-size: 16px;
	flex-shrink: 0
}
	.altUI_ListViewItemKeyValue .altUI_ListViewItemKeyValue_Key{
		font-weight: '600';
		text-transform: uppercase;
	}

	.altUI_ListViewItemMaster .altUI_ListViewItemLeft{
		margin-right: 0px
	}

	.altUI_ListViewItemMaster .altUI_ListViewItemCenter{
		display: flex;
		flex: 1;
		flex-direction: column;
	}
	.altUI_ListViewItemMaster .altUI_ListViewItemLabel{
		font-weight: 600;
		font-size: 1.5em
	}
	.altUI_ListViewItemMaster .altUI_ListViewItemDetail{
		font-siez: 1.2em
	}

.altUI_ListViewItemCard{
	padding: 8px;
	border-radius: 8px;
	border: 1px solid rgb(160, 160, 160);
	margin: 8px;
	font-size: 18px
}




.altUI_Modal{
	display: flex;
	flex-direction: column;
	background: white;
	border-radius: 8px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24);
	width: 100%;
	max-width: 800px;
	margin: 8px;
	z-index: 1000
}
	.altUI_ModalTitle{
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background: rgb(245,245,245);
		font-size: 20px;
		font-weight: 600;
		padding: 16px 24px;
	}
	.altUI_ModalContent{
		padding: 16px;
		height: 100%;
		overflow: auto;
	}
.altUI_Modal.altUI_ModalFull{
	height: 100%;
	max-width: 100%;
}
	.altUI_Modal.altUI_ModalFull .altUI_ModalTitle{
		border: none;
		font-size: 40px;
	}
	.altUI_Modal.altUI_ModalFull .altUI_ModalContent{
		padding: 0px;
	}


.altUI_Picker{
	margin: 8px;
	position: relative;
}
	.altUI_Picker_Select{
		-webkit-appearance: menulist-button;
		appearance: menulist-button;
	}
	.altUI_Picker_Options{
		display: none;
		background: white;
		border-radius: 4px;
		position: absolute;
		z-index: 2;
		width: 80%
	}
		.altui_Picker_Options span{
			display: block;
			padding: 8px
		}

.altUI_NavStack{
	
}
.altUI_NotificationFeedback{
	margin: 8px;
	padding: 16px;
	position: fixed;
	top: 0;
	z-index: 9999;
	border-radius: 24px;
	align-self: center;
	background: black;
	color: white;
	font-size: 16px;
	box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24)
}
.altUI_SegmentedControl{
	font-size: 1.2em;
	padding: 0px;
	border-radius: 8px;
	background: rgb(240,240,240);
	margin: 8px;
	display: flex
}
	.altUI_SegmentedControl .altUI_SegmentedControl_Option{
		flex: 1;
		padding: 4px 8px;
		text-align: center;
	}
	.altUI_SegmentedControl .altUI_SegmentedControl_Option:first-of-type{
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	.altUI_SegmentedControl .altUI_SegmentedControl_Option:last-of-type{
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
	}
	.altUI_SegmentedControl input[type="radio"]:checked+.altUI_SegmentedControl_Option{
		background: black;
		color: white;
		font-weight: 600;
	}

.alUI_StackNavigatorStackCont{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	display: flex;
	backdrop-filter: blur(1.2px);
	z-index: 4
}

.altUI_TabView{
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: auto;
}
	.altUI_TabViewTabs{
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 8px;
		padding-bottom: 0px;
		background: white;
		box-sizing: border-box;
		flex-shrink: 0;
		position: sticky;
		top: 0;
		z-index: 3;
	}
		.altUI_TabViewTabs .altUI_TabViewTab{
			font-size: 24px;
			color: rgb(160,160,160);
			font-weight: 400;
			
			padding: 4px 8px;
			flex: 1;
			text-align: center;
			border-bottom: 2px solid transparent;
			display: flex;
			align-items: center;
			justify-content: center
		}
		.altUI_TabVIewTabs .altUI_TabViewTabActive{
			color: black;
			font-weight: 600;
			border-bottom: 2px solid black;
		}
	.altUI_TabViewViews{
		height: 100%;
	}
	.altUI_TabViewContent{
		padding: 16px;
		height: 100%;
		box-sizing: border-box;
		flex-direction: column
	}
	.altUI_TabViewContentActive{
		display: flex;
	}


.altUI_Text{
	font-size: 18px;
	font-weight: 400;
	margin: 8px;
	text-align: center;
	display: block;
}

 @media only screen and (max-width: 800px){
        .altUI_AppViewSidebar{
	  	position: fixed;
	  	width: 100%;
	  	z-index: 999999;
	  	height: 100%;
	  	bottom: 0px;
	  	padding: 8px;
	  	background: white
        }
	 	.altUI_AppViewSidebar.altUI_AppViewSidebarHidden{
	 		display: none;
	 	}
        .altUI_AppBar .altUI_SidebarBttn{
          	display: flex
        }
	.alUI_StackNavigatorStackCont>div:first-child{
		padding: 0px !important;
	}
}