/* PC, Mac and Tablet */
	body						{margin: 0;padding: 0;height: 100%;background: #f0f1f3;font-size: 20px;font-family: Arial;}
	#header						{z-index:998; border: 0px white solid;position: fixed;left: 0px;top: 0px;height: 70px;width: 100%;background: #999;background-image: url('/Images/Backgrounds/Header.jpg');background-size: contain;color: white;padding-top: 20px;}
	.headericon					{height: 30px; cursor:pointer;}
	.headeroption				{height: 30px; padding:0 0 0 5px; cursor:pointer;}        
	.headericonright			{height: 30px; cursor:pointer;}
	#header td					{padding:0px 10px 0px 10px;}        
	#body						{margin-top:90px; padding-bottom:50px;}
	#footer						{z-index:999; position: fixed;left: 0px;bottom: 0px;height: 50px;width: 100%;background: #ffffff;border-top: 1px solid silver;padding:5px 0 5px 0;}
	.footericon					{height: 25px;padding: 10px 10px 0 10px; cursor:pointer}        
	.footericoncontainer		{height: 25px; width:25px; padding:0px; margin:10px 0 0px 0; cursor:pointer; background-repeat:no-repeat;background-size:contain }
	#footer td					{font-size:10px;}
	#menu						{position: fixed;left: 0px;top: 0px; z-index:998; background-image:url('/Images/Backgrounds/Menu.png'); width:100%; height:100%; border:0px red solid;}
	.menuoption					{background-repeat:no-repeat; background-position:left center; color:white; padding:20px 20px 20px 50px; border-top:1px white solid; cursor:pointer}

	#alertbg					{position: fixed;left: 0px;top: 0px; z-index:1000; background-image:url('/Images/Backgrounds/AlertBG.png'); width:100%; height:100%; border:0px red solid; text-align:center;}
	#alertbox_yn				{position: fixed;left: auto; top:100px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
	#alertboxtitle_yn			{border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
	#alertboxmessage_yn			{border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
	#alertboxbuttons_yn			{border-top:1px silver solid;}
	#alertbox_yn td				{text-align:center;}
	#alertbox_yn .leftbutton	{border-right:1px solid silver; cursor:pointer; padding:20px;}
	#alertbox_yn .rightbutton	{cursor:pointer; padding:20px;}

	#appname					{text-align:center; padding-bottom:10px;}
	.card						{margin: 10px 0 20px 0;background-color: white;border-top: 0px solid silver;border-bottom: 0px solid silver; background-image:url('/Images/Logo/Logo Watermark.png'); background-repeat:no-repeat; background-position:center center; background-size:cover ;}
	.cardnobg					{margin: 10px 0 20px 0;background-color: white;border-top: 0px solid silver;border-bottom: 0px solid silver;}
	.cardheader					{padding: 10px 10px 10px 10px;border-top: 1px solid silver;border-bottom: 1px solid silver;font-size: 20px;}
	.cardheaderarrow			{padding: 10px 10px 10px 10px;border-top: 1px solid silver;border-bottom: 1px solid silver;font-size: 20px; background-image:url('/Images/Icons/ArrowRight.png'); background-position:right center; background-repeat:no-repeat; background-size:15px;cursor:pointer}
	.cardbody					{padding: 10px 10px 10px 10px;border-bottom: 1px solid silver;min-height:}
	.cardtoggle					{position:absolute; margin-top:-15px; margin-left:0px; border:0px red solid; width:100%; text-align:center;}     
	.cardtogglebutton			{width:25px; cursor:pointer;}     

	.cardbodydata				{padding:0px;}
    .carddatarowzero			{padding: 10px 10px 10px 10px;border-bottom: 1px dotted silver; font-size: 15px; min-height:40px; color:gray;}
    .carddatarow				{padding: 5px 5px 5px 5px;border-bottom: 1px dotted silver; font-size: 20px; min-height:40px; }        
    .carddatarowarrow			{padding: 5px 15px 5px 5px;border-bottom: 1px dotted silver; font-size: 20px; min-height:40px; background-image:url('/Images/Icons/ArrowRight.png'); background-position:right center; background-repeat:no-repeat; background-size:15px;cursor:pointer}
    .carddatarowarrow td		{padding: 4px;}
    .carddatatext				{color:black; font-size:18px;}
    .carddatasubtext			{font-size:11px;color:gray}
    .carddatamore				{color:gray; font-size:18px; text-align:right; margin-top:5px;}

	#Loadingbg						{position: fixed;left: 0px;top: 0px; z-index:1000; background-image:url('/Images/Backgrounds/LoadBG.png'); width:100%; height:100%; border:0px red solid; text-align:center; cursor:wait;}
	#loadinghourglass				{z-index:1000; position: fixed; width:100%; height:30px; top:50px; border:0px red solid; text-align:center;background-image:url('/Images/Icons/Hourglass (White).png'); background-position:center; background-repeat:no-repeat; background-size:30px;}
	#loadingfailedbox				{z-index:2000;position: fixed;left: auto; top:100px; width:75%; background-color:white; border:1px solid black; border-radius:10px; }
	#loadingfailedboxtitle			{border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
	#loadingfailedboxmessage		{border:0px green solid; text-align:center;padding:10px 20px 20px 20px;}
	#loadingfailedboxbuttons		{border-top:1px silver solid;}
	#loadingfailedbox td			{text-align:center;}
	#loadingfailedbox .leftbutton	{border-right:1px solid silver; cursor:pointer; padding:20px;}
	#loadingfailedbox .rightbutton	{cursor:pointer; padding:20px;}
	.onoffswitch					{width:18px;}
	::-webkit-scrollbar {width: 5px;}
	::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey;border-radius: 10px;}
	::-webkit-scrollbar-thumb {background: lightgrey;border-radius: 10px;}
	::-webkit-scrollbar-thumb:hover {background: #5e8cae;}

/* Smartphones */
@media only screen and (min-device-width : 320px) and (max-device-width : 400px) {
	
    body						{margin: 0;padding: 0;height: 100%;background: #f0f1f3;font-size: 40px;font-family: Arial;}
    #header						{border: 0px white solid;position: fixed;left: 0px;top: 0px;height: 130px;width: 100%;background: #999;background-image: url('/Images/Backgrounds/Header.jpg');background-size: contain;color: white;padding: 20px;}
    .headericon					{height: 60px; padding-right:40px;}        
	.headeroption				{height: 60px; padding-right:40px;}        
    .headericonright			{height: 60px; padding-right:50px;}        
    #header td					{padding:5px 10px 5px 10px;}
    #body						{margin-top: 170px; padding-bottom:150px;}
    #footer						{z-index:999; position: fixed;left: 0px;bottom: 0px;height: 150px;width: 100%;background: #ffffff;border-top: 1px solid silver;padding: 20px;}
    .footericon					{height: 60px;padding: 30px;cursor:pointer}	
	.footericoncontainer		{height: 60px; width:60px; padding:0px; margin:30px 0 30px 0; cursor:pointer; background-repeat:no-repeat;background-size:contain }
    #footer td					{font-size:30px;}
    #menu						{position: fixed;left: 0px;top: 0px; z-index:999; background-image:url('/Images/Backgrounds/Menu.png'); width:100%; height:100%; border:0px red solid;}
    .menuoption					{background-size:80px; background-repeat:no-repeat; background-position:left center; color:white; padding:40px 40px 40px 100px; border-top:1px white solid; cursor:pointer}

    #alertbg					{position: fixed;left: 0px;top: 0px; z-index:1000; background-image:url('/Images/Backgrounds/AlertBG.png'); width:100%; height:100%; border:0px red solid; text-align:center;}
    #alertbox_yn				{position: fixed;left: auto;top:200px; width:75%; background-color:white; border:1px solid black; border-radius:30px;}
    #alertboxtitle_yn			{border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
    #alertboxmessage_yn			{border:0px green solid; text-align:center;padding:10px 30px 30px 30px;}
    #alertboxbuttons_yn			{border-top:1px silver solid;}
    #alertbox_yn td				{text-align:center}
    #alertbox_yn .leftbutton	{border-right:1px solid silver; cursor:pointer; padding:30px;}
    #alertbox_yn .rightbutton	{cursor:pointer; padding:30px;}

    .card						{margin: 30px 0 50px 0;background-color: white;border-top: 1px solid silver;border-bottom: 1px solid silver;}
    .cardnobg					{margin: 30px 0 50px 0;background-color: white;border-top: 1px solid silver;border-bottom: 1px solid silver;}            
    .cardheader					{padding: 30px 30px 30px 30px;border-top: 1px solid silver;border-bottom: 1px solid silver;font-size: 50px;}
    .cardheaderarrow			{padding: 30px 30px 30px 30px;border-top: 1px solid silver;border-bottom: 1px solid silver;font-size: 50px;background-image:url('/Images/Icons/ArrowRight.png'); background-position:right center; background-repeat:no-repeat; background-size:40px; cursor:pointer}
    .cardbody					{padding: 30px 30px 30px 30px;border-bottom: 1px solid silver;}
    .cardtoggle					{position:absolute; margin-top:-32px; margin-left:0px; border:0px red solid; width:100%; text-align:center;}     
    .cardtogglebutton			{width:60px;cursor:pointer;}     

	.cardbodydata				{padding:0px;}
    .carddatarowzero			{padding: 20px 20px 20px 20px;border-bottom: 1px dotted silver; font-size: 30px; min-height:80px; color:gray;}
    .carddatarow				{padding: 20px 20px 20px 20px;border-bottom: 1px dotted silver; font-size: 40px; min-height:80px;}            
    .carddatarowarrow			{padding: 20px 30px 20px 20px;border-bottom: 1px dotted silver; font-size: 40px; min-height:80px;background-image:url('/Images/Icons/ArrowRight.png'); background-position:right center; background-repeat:no-repeat; background-size:40px;cursor:pointer}
    .carddatarowarrow td		{padding: 15px;}            
    .carddatatext				{font-size:50px; color:black}
    .carddatasubtext			{font-size:30px; color:gray}
    .carddatamore				{color:gray; font-size:30px; text-align:right; margin-top:5px;}

	#Loadingbg						{position: fixed;left: 0px;top: 0px; z-index:1000; background-image:url('/Images/Backgrounds/AlertBG.png'); width:100%; height:100%; border:0px red solid; text-align:center;}
	#loadinghourglass				{z-index:1000; position: fixed; width:100%; height:60px; top:90px; border:0px red solid; text-align:center;background-image:url('/Images/Icons/Hourglass (White).png'); background-position:center; background-repeat:no-repeat; background-size:60px;}
    #loadingfailedbox				{position: fixed;left: auto;top:200px; width:75%; background-color:white; border:1px solid black; border-radius:30px;}
    #loadingfailedboxtitle			{border:0px red solid; font-weight:bold; text-align:center; padding:20px 20px 10px 20px;}
    #loadingfailedboxmessage		{border:0px green solid; text-align:center;padding:10px 30px 30px 30px;}
    #loadingfailedboxbuttons		{border-top:1px silver solid;}
    #loadingfailedbox td			{text-align:center;}
    #loadingfailedbox .leftbutton	{border-right:1px solid silver; cursor:pointer; padding:30px;}
    #loadingfailedbox .rightbutton	{cursor:pointer; padding:30px;}

	.onoffswitch					{width:40px;}
}