@font-face{
		font-family: 'calibri';
		src: url(https://www.agrarshop-online.com/style/fonts/calibri.ttf) format('truetype');
		font-weight: normal;
		font-style: normal;
	}
	
	/* @font-face {
		font-family: 'Yaro Rg';
		src: url('https://www.agrarshop-online.com/style/fonts/YaroRg.eot');
		src: local('Yaro Rg'), local('YaroRg'),
			url('https://www.agrarshop-online.com/style/fonts/YaroRg.eot?#iefix') format('embedded-opentype'),
			url('https://www.agrarshop-online.com/style/fonts/YaroRg.woff2') format('woff2'),
			url('https://www.agrarshop-online.com/style/fonts/YaroRg.woff') format('woff'),
			url('https://www.agrarshop-online.com/style/fonts/YaroRg.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
	} */
	
	html { padding: 0; margin: 0; height: 100.1% }
	body { width: 100vw; height: 100vh; top: 0; left: 0; margin: 0; padding: 0; font-family: calibri, arial, sans-serif; font-size: calc(100vw * 0.01); color: #5d5d5d; background: #f5f5f5; overflow: hidden; }
	
	#page { width: 100vw; height: 100vh; overflow: auto; }
	
	#popup { position: fixed; left: 0; right: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; display: none; }
	#popup_content { position: relative; width: 50%; max-height: calc(100vh - 10em); overflow: auto; top: 5em; margin: 0 25%; border: 1px solid #5d5d5d; border-radius: 5px; background: #fff; }
	.popup_content { margin: 0 1em; padding: 1em 0; }
	#close_popup { float: right; width: 1.5em; opacity: 0.5; cursor: pointer; }
	#close_popup:hover { opacity: 0.8; }
	
	#page_blocker { position: fixed; left: 0; right: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 600; display: none; }
	
	a { color: blue; text-decoration: none; }
	a:hover { text-decoration: underline; }
	
	h1 { font-family: calibri; font-size: 1.6em; margin-top: 0; margin-bottom: 0.5em; font-weight: 300; font-variant: small-caps; }
	.h1 { font-family: calibri; font-size: 1.6em; margin-bottom: 0.5em; font-variant: small-caps; }
	.h2 { font-family: calibri; font-size: 1.4em; margin-bottom: 0.5em; font-variant: small-caps; }
	.h3 { font-family: calibri; font-size: 1.3em; margin-bottom: 0.5em; font-variant: small-caps; }
	
	table { border-collapse: collapse; }
	
	input { font-family: calibri; font-size: 1.1em; color: #5d5d5d; }
	textarea { font-family: calibri; font-size: 1.1em; height: 11em; color: #5d5d5d; }
	button { font-family: calibri; font-size: 1.1em; color: #5d5d5d; }
	
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	input[type=number] {
		-moz-appearance: textfield;
	}
	
	.margin { padding: 0.5em 0; margin: 0 0.5em; }
	
	#body {}
	.wrapper { width: calc(100% - 8em); padding: 0; margin: 0 4em; }
	.clear { clear: both; }
	.hidden { display: none; }
	
	.btn { display: inline; cursor: pointer; padding: 0.5em; background: #f0f0f0; border: 1px solid #b3b3b3; margin-bottom: 1em; border-radius: 5px; }
	.btn img { opacity: 0.6; height: 1.2em; float: left; margin-right: 0.5em; }
	.btn:hover { border: 1px solid #a7a7a7; }
	.btn:hover > img { opacity: 1; }
	
	.clear { clear: both; }
	
	main {}
	
	.scroll{
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #9f9f9f #4a4a4a;
    scrollbar-width: thin !important;
    }
    .scroll::-webkit-scrollbar {
	width: 0.5em;
    }
    .scroll::-webkit-scrollbar-track {
    background: #4a4a4a;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	border-radius: 10px;
	}
    .scroll::-webkit-scrollbar-thumb {
	background: rgb(164,164,164);
	background: linear-gradient(0deg, rgba(164,164,164,0.6615021008403361) 18%, rgba(93,93,93,1) 42%, rgba(164,164,164,0.6054796918767507) 76%);
	border-radius:10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
    }
    .scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(34,34,34);
	background: linear-gradient(0deg, rgba(34,34,34,0.13769257703081228) 18%, rgba(80,80,79,1) 50%, rgba(125,125,124,0.14329481792717091) 76%);
	}
	
	
	@media only screen and (max-width: 1700px) {		
		body { font-size: calc(100vw * 0.011); }
		.wrapper { width: calc(100vw - 2em); padding: 0; margin: 0 1em; }
	}
	@media only screen and (max-width: 1500px) {
		body { font-size: calc(100vw * 0.012); }
		.wrapper { width: calc(100vw - 2em); padding: 0; margin: 0 1em; }
	}
	
	@media only screen and (max-width: 1200px) {
		body { font-size: calc(100vw * 0.015); }
		.wrapper { width: 95%; padding: 0; margin: 0 2.5%; }
		#popup_content { position: relative; width: 75%; max-height: calc(100vh - 10em); overflow: auto; top: 5em; margin: 0 12.5%; border: 1px solid #5d5d5d; border-radius: 5px; background: #fff; }
	}
	@media only screen and (max-width: 1000px) {
		body { font-size: calc(100vw * 0.03); }
		#popup_content { width: 90%; max-height: calc(100vh - 1em); overflow: auto; top: 0.5em; margin: 0 5%; border: 1px solid #5d5d5d; border-radius: 5px; background: #fff; }
	}
	@media only screen and (max-width: 800px) {
		body { font-size: calc(100vw * 0.035); }
	}	
	@media only screen and (max-width: 600px) {	
		body { font-size: calc(100vw * 0.04); }
	}