/*system.css  governs all controls and other system objects */
/*Edited: 23-3-2019*/
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700&subset=latin-ext');

:root{
	--notify_color_light: #00698c;
	--notify_color_medium: #00a3d9;
	--notify_color_dark: #26c9ff;
}

* {
	/* default font */	
	font-family: arial;  
	font-size: 10pt;
	color: black;
	box-sizing: border-box;
}

/*stop the default highlighting*/
*:focus {
    outline: none;
}

img {
  max-width: 100%;
}

.unselectable {
	-webkit-touch-callout: none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
}

html, body{
	/* default setting for document */
	background-color: transparent;
	margin: 0px;
	width: 100vw;
	padding: 0px;
}

html {
	height: 100vh;
}

body {
	min-height: 100vh;
	display: inline-block;
}

main[role='main'] {
	display : flex;	
	align-content: space-evenly;
	align-items: center;
	justify-content: center;	
	max-width: 1024px;
	margin: 10px auto;
	padding: 20px;
}

a {
	font-family: verdana;
	color: #0080ff;
}
a:active, a:visited {
	color: #444444;
}

a:hover {
	color: #00a3d9;
}

input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

.ellipsis {
    overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

button.send[disabled]{
	background-color: #c4c4c4 !important;
	border-color: #c4c4c4 !important;
}

main > article > div.amountmailed {
	float: right;
	background-color: #bfdfff;
	padding: 5px;
	border-radius: 3px;
	font-size: 12pt;
}

main > article > h2 {
	font-size: 22pt;	
}

main > article > div.info {
	font-size: 12pt;
	background-color: #f3f3f3;
	padding: 2px 10px;
	border-radius: 5px;
	margin-bottom: 20px;
}

main > article > div.info * {
	font-size: 12pt;

}

main > article > form {
	font-size: 12pt;
	border: 1px solid #dddddd;
	border-radius: 5px;
	padding: 2px 10px 20px 10px;
	box-shadow: 5px 5px 1px #888888;
}	

main > article > form > div > span.email {
	font-size: 12pt;
	display: inline-block; 
	width: 100px;
	margin-bottom: 10px;
}	
	
main > article > form > div > span:nth-child(2), main > article > form > div > input {
	font-size: 12pt;
	display: inline-block; 
	width: calc(100% - 100px);
	border: 0px;
	border-bottom: 1px solid #dddddd;
}

main > article > form > div:nth-child(3) > span:nth-child(2){
	border-bottom: 0px solid #dddddd;
}


main > article > form > div > span:nth-child(2) > span {
	background-color: #cce6ff;
	padding: 2px 10px;
	border-radius: 2px;
	margin-bottom: 2px;
	display: inline-block; 
}

main > article > form > div.divider {
	border-bottom: 1px solid #dddddd;
}


main > article > form > div.body > * {
	font-size: 12pt;
}

main > article > form > div.body > div.credentials > * {
	font-size: 12pt;
}

main > article > form > div.body > div.credentials > input {
	width: 300px;
	border: 0px;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 6px;
}

main > article > form > div.body > div.credentials > button.send {
	padding: 2px 30px;
	font-size: 18pt;
	float: right;
	background-color: #99ccff;
	border-radius: 5px;
	border: 1px solid #73b9ff;
}

main > article > form > div.body > div.credentials > button.send:hover {
	background-color: #bfdfff;

}

input.error{
	border-bottom-color: red!important;
}