:root { --accent-color: #9BF716; --font-color: #243D00; --disabled-color: #B4BBCC; --error-color: #e34d4d; }
@font-face { 
    font-family: 'Mulish'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(Mulish-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { 
    font-family: 'Mulish'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(Mulish-Regular.ttf) format('truetype');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
.error404 { font-size: 4em; }
.error404s { font-size: 1.6em; margin-bottom: 1em; }
.reph { font-size: 1.6em; }
.rept { font-size: 1em; margin-top: 0.5em; margin-bottom: 2em; }
.lh { font-weight: bold; margin-top: 2.5em; font-size: 1.2em; }
.he { font-size: 1.2em; }
.noreport { font-size: 1em; margin-top: 0.5em; margin-bottom: 2em; }
.eb { display: flex; flex-flow: row wrap; justify-content: center; }
.eb1 { text-align: right; flex: 1; margin: auto; }
.eb2 { height: 12em; width: 12em; content: url('img/match.png'); margin: auto; flex: 1; object-fit: scale-down; object-position: left; margin-left: 2em; }
.eb3 { height: 12em; width: 12em; content: url('img/scull.png'); margin: auto; flex: 1; object-fit: scale-down; object-position: left; margin-left: 2em; }
.eb4 { width: 280px; margin-right: 2em; }
.eb4img { object-fit: cover; width: 280px; height: 180px; object-position: top; border-radius: 8px; }
.h { font-size: 3.2em; }
.sh { font-size: 1.8em; text-align: center; margin-top: 1.5em; }
.l { text-align:left; }
.blk { height: 6em; }
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
li { float: left; }
a { color: var(--font-color); text-decoration: none; }
a:visited { color: var(--font-color); }
.preview_wrap { height: 260px;  overflow: hidden; display: none; }
.preview_text { font-size: 0.8em; height: 160px; background-color: #E9EBF0; border-radius: 8px; position: relative; bottom: -80px; padding: 10px; }
.preview_text_block { width: 45%; overflow: hidden; height: 100%; }
.preview { width: 340px; height: 220px; position: relative; top: -150px; object-fit: cover; object-position: top; border-radius: 8px; margin-right: 10px; float: right; }
li a { text-decoration: none; display: block; padding: 6px; padding-inline: 20px; }
.logo { display:block; content: url('img/lightning.svg'); width: 1.4em; height: 1.4em; padding-inline:3px; margin-right:1px;}
.logo_block { display: flex; }
.zbutton { font-family: 'Mulish', sans-serif; color: var(--font-color); border: none; height: 100%; border-radius: 8px; cursor: pointer; width: 125px; text-align:center; margin-left: 8px; display: flex; flex: none; align-items: center; justify-content: center; font-weight: normal; font-size: 0.85em; }
.buttons { width: 100%; height: 30px; display: flex; position: absolute; bottom: 10px; }
.copybutton { font-family: 'Mulish', sans-serif; background-color: #FAFAFA; color: var(--font-color); border: none; height: 100%; border-radius: 8px; cursor: pointer; width: 125px; text-align: center; display: flex; flex: none; align-items: center; justify-content: center; font-weight: normal; font-size: 0.85em; }
.gopaybutton { font-family: 'Mulish', sans-serif; background-color: #FAFAFA; border: none; height: 100%; border-radius: 8px; cursor: pointer; width: 155px; text-align: center; display: flex; flex: none; align-items: center; justify-content: center; font-weight: normal; font-size: 0.85em; margin-left: 10px; text-decoration: none; }
button:disabled { background-color: #CFFC8D; }
.bbutton { font-family: 'Mulish', sans-serif; color: var(--font-color); border: none; height: 2.5em; border-radius: 8px; cursor: pointer; width: 160px; text-align: center; margin-left: 8px; flex: none; font-size: 0.85em; }
body { font-family: 'Mulish', sans-serif; color: var(--font-color); -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; background-color: #F5F5F5; opacity: 1; background-image: radial-gradient(#E0EBCF 1.5px, #F5F5F5 1.5px); background-size: 20px 20px; }
.main-color { background-color: var(--accent-color); }
.inpbar { display: flex; height: 34px;  margin-top: 2.5em; }
.inpbox { width: 100%; position:relative;
&:before { content: ''; position: absolute; top: 10px; right: 8px; margin: auto 0; width: 16px; height: 16px; background: url('img/search.svg') no-repeat; background-size: cover; z-index:0; margin-right:1px; } }
.inpboxcode { width: 100%; position: relative; 
&:before { content: ''; position: absolute; top: 10px; right: 8px; margin: auto 0; width: 16px; height: 16px; background: url('') no-repeat; background-size: cover; z-index: 0; margin-right: 1px; } }    
.inp { font-family: 'Mulish', sans-serif; box-sizing: border-box; height: 100%; border-radius: 8px; border-width: 1px; border-style: solid; border-color: #FAFAFA; padding-left: 10px; width: 100%; padding-right: 30px; }
input:disabled { color: var(--disabled-color); background-color: #FAFAFA; }
input:focus { outline: none; }
.bg-shape { opacity: 25%; content: url('img/blur.svg'); display: flex; position: fixed; justify-content: center; align-items: center; width: 100%; transform: translate(0%, -65%); }
.bg-shape2 { opacity: 40%; content: url('img/blur2.svg'); display: flex; position: fixed; justify-content: left; bottom: 0%; width: 100%; transform: translate(-50%, 50%); }
.bg-shape3 { opacity: 40%; content: url('img/blur3.svg'); display: flex; position: fixed; justify-content: right; width: 100%; transform: translate(50%, -50%); }
.bg-shape4 { opacity: 40%; content: url('img/blur2.svg'); display: flex; position: fixed; justify-content: right; width: 100%; transform: translate(50%, -50%); }
.z { z-index: -1; }
.arrow-shape1 { display: flex; width: 235px; position: absolute; top: 185px; }
.arrow-shape2 { display: flex; width: 240px; position: relative; top: -10px; padding-left: 32%; }
.square { width: 340px; top: 145px;  position: absolute; width: 35px; height: 35px; border-radius: 50%; padding: 10px; }
.l-s { left: 245px; background: url('img/lightning.svg') no-repeat; background-color: #FAFAFA; background-position: center; }
.d-s { left: 305px; background: url('img/document.svg') no-repeat; background-color: #FAFAFA; background-position: center; }
.icon { content: url('img/stamp.svg'); position: relative; height: 1.3em; margin-left: 5px; vertical-align: middle; }
.icon2 { content: url('img/clip.svg'); height: 14px; margin-bottom: 6px; }
.icon3 { content: url('img/pointer.svg'); height: 14px; margin-bottom: 6px; }
.icon_copy { content: url('img/copy.svg'); position: relative; height: 1.3em; margin-left: 5px; vertical-align: middle; }
.icon_pay { content: url('img/gopay.svg'); position: relative; height: 1.3em; margin-left: 5px; vertical-align: middle; }
.wrapper { display: flex; flex-flow: row wrap; position: relative; }
.wrapper > * { position: relative; padding-top: 10px; flex: 1 100%; }
.main { flex: none; width: 670px; }
.header { display: flex; margin-bottom: 2em;  align-items: center; justify-content: space-between; }
.menu { font-size: 0.8em; border-radius: 8px; background-color: #FAFAFA; }
.aside { flex: 1 auto; width: 1px;}
.info { box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 1em; }
.info-1 { width: 440px; padding: 10px; border-radius: 8px; background-color: #FAFAFA; font-size: 0.8em; }
.info-2 { padding: 10px; border-radius: 8px; margin-left: 8px; background-color: #FAFAFA; font-size: 0.8em; }
.error { border-color: var(--error-color); }
.error_message { display: none; height: 16px; font-size: 0.8em; padding-top: 4px; color: var(--error-color); }
.infoboxbot { font-size: 0.8em; margin-top: 3em; text-align: justify; }
#menu__toggle { opacity: 0; display: none; }
.doc { border-radius: 8px; background-color: #FAFAFA; font-size: 0.8em; padding: 10px; }
.footer { display: flex; flex-flow: row wrap; font-size: 0.8em; padding: 10px; margin-top: 2em; justify-content: space-between; }
.legal { color:#9ba297; margin-left: 1em; }
.contact { display: flex; }
.dfcinfo { color: #9ba297; }

@media all and (max-width: 480px) {
	body { margin: 3vw; }
	.main   { justify-content: center; padding-top: 17vw; width: 100%;  }
	.aside  { display: none; }
	.logo_text { display: none; }
	.logo { width: 10vw; height: 10vw; padding-left: 3vw; }
	.h { font-size: 7vw; position: relative; }
	.l-s { left: 37%; background-size: 6vw; }
	.d-s { left: 48%; background-size: 6.8vw; }   
	.square { width: 4.7vw; height: 4.7vw; position: absolute; top: 53%; transform: translateY(-50%); }
	.arrow-shape1 { top: 55%; width: 32vw; position: absolute; }
	.sh { font-size: 7vw; margin-top: 10vw; }
	.arrow-shape2 { padding-left: 17%; width: 60vw; }
	.inpbar { display: block; height: auto; margin-top: 10vw; }
	.inpbox { &:before { width: 5vw; height: 5vw; margin-right: 1vw; top: 3vw; } }
	.inp { font-size: 4.4vw; padding: 0.6em; padding-right: 10vw; }
	.error404 { font-size: 28vw; }
	.error404s { font-size: 9.5vw; margin-bottom: 4vw; }
	.noreport { font-size: 4.4vw; margin-bottom: 10vw; margin-top: -0.5em; }
	.reph { font-size: 6.5vw; margin-bottom: 4vw; text-align: left; }
	.rept { font-size: 4vw; text-align: left; }
	.zbutton { font-size:4.4vw; margin-left:0; width: 100%; margin-top:3vw; padding:3vw; }
	.blk { display:none; }
	.info { display: block; }
	.info-1 { width:auto; max-width: 100%; font-size: 4.4vw; }
	.info-2 { width:auto; max-width: 100%; font-size: 4.4vw; margin-left: 0px; margin-top: 2vw; }
	.bg-shape { width: 200%; transform: translate(-20%, -65%); }
	.error_message { font-size: 3.7vw; height: auto; text-align: left; }
	.preview { width: 100%; float: none; height: 50vw; top: -55vw; }
	.preview_wrap { border-radius: 8px; height: 124vw; overflow: visible; margin-top: 10vw; margin-bottom: 14vw; }
	.preview_text { font-size: 4.4vw; height: 124vw; bottom: 0; }
	.preview_text_block { width: 100%; }
	.buttons { display: block; top: 1vw; position: relative; } 
	.copybutton { width: 100%; height: auto; padding: 2vw; }
	.gopaybutton { width: auto; max-width: 100%; height: auto; margin-left: 0; padding: 2vw; margin-top:2vw; }
	.preview_wrapper { margin: 10px; }
	.menu__btn { display: flex; align-items: center; position: fixed; right: 3vw; width: 10vw; height: 8vw; cursor: pointer; z-index: 3; top:4vw; }
	.menu__btn > span,
	.menu__btn > span::before,
	.menu__btn > span::after { display: block; position: absolute; width: 100%; height: 0.9vw; background-color: var(--font-color); }
	.menu__btn > span::before { content: ''; top: -3.4vw; }
	.menu__btn > span::after { content: ''; top: 3.4vw; }
	.menu { display: block; position: fixed; top: 0; visibility: hidden; width: 70vw; height: 100%; margin: 0; padding: 22vw 0; list-style: none; text-align: left; background-color: #FAFAFA;  z-index: 2; right: 100%; border-top-right-radius: 0; }
	.menu_item { padding: 4vw 5vw; font-size: 4.4vw; width: 60vw; }
	.menu_item:hover { background-color: #E9EBF0; }
	#menu__toggle:checked ~ .menu__btn > span { transform: rotate(45deg); }
	#menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); }
	#menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); }
	#menu__toggle:checked ~ .menu { visibility: visible; right: 0; }
	#menu__toggle:checked ~ .menu_bg { background-color:black; display: block; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1; opacity: 0.2; }
	.activemenu { overflow: hidden; }
	.header { position: fixed; height: 15vw; left: 0; top: 0; z-index: 1; width: 100%; }
	.visible { background-color: #FAFAFA; }
	.eb { width: 100%; height: auto; flex-direction: column; text-align: center; }
	.eb1 { width: 100%; text-align: center; order: 2; }
	.eb2 { width: 50%; height: 50%; order: 1;  margin: 0 auto; margin-top: 3em; margin-bottom: 1em; }
	.eb3 { width: 50%; height: 50%; order: 1;  margin: 0 auto; margin-top: 3em; margin-bottom: 3em; }
	.eb4 { width: 100%; margin: 0px; margin-top: 2em; margin-bottom: 2em;  order: 3; }
	.bbutton { font-size: 4.4vw; margin-left: 0; width: 100%; margin-top: 1em; }
	.infoboxbot { font-size: 0.7em; margin-top: 1em; text-align: justify; }
	.footer { font-size: 1em; flex-flow: row; }
	.contact { justify-content: right; flex-flow: row wrap; }
	.legal { text-align: right; }
}

@media all and (min-width: 481px) {
	.aside-1{ order: 1; }
	.main   { order: 2; }
	.aside-2{ order: 3; }
	.footer { order: 4; }
}

.loader { 
	width:1.1em;
	height:1.1em;
	--c:radial-gradient(farthest-side,var(--disabled-color) 92%,#0000);
	background: 
	var(--c) 50% 0,
	var(--c) 50% 100%,
	var(--c) 100% 50%,
	var(--c) 0    50%;
	background-size:3px 3px;
	background-repeat:no-repeat;
	animation:s7 2s infinite;
	position: relative; margin-left: 5px; vertical-align: middle;
}
@keyframes s7 { to { transform: rotate(.5turn) } }

.progressbar { 
	width: calc(100%-4px); 
	margin: 0 auto;
	border-radius: 8px;
	border: 4px solid transparent;
	position: relative;
	padding: 1px;
	top: -6px;
  }

  .progressbar .progressbar_bar { 
	position:absolute;
	border-radius:10px;
	top:0;
	right:100%;
	bottom:0;
	left:0;
	background: var(--disabled-color); 
	width:0;
	animation:borealisBar 2s linear infinite;
  }
  
  @keyframes borealisBar {
	0% {
	  left:0%;
	  right:100%;
	  width:0%;
	}
	10% {
	  left:0%;
	  right:75%;
	  width:25%;
	}
	90% {
	  right:0%;
	  left:75%;
	  width:25%;
	}
	100% {
	  left:100%;
	  right:0%;
	  width:0%;
	}
  }