@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&display=swap');

* { border:0px; list-style:none; margin:0px; padding:0px; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html { font-size: 100%; }
body,td,th { font-family: "Afacad", sans-serif; font-size: 13px; color: #222; }
body { margin:0px; background:#f0f0f0; letter-spacing:0.1em; }
h1, h2, h3 { margin:0px; color:#222; font-weight:500; }
h2 { margin-bottom:20px; font-size:17px; font-weight:500; }
a { text-decoration:none; color:var(--link); outline:none; font-weight:bold; }
a:hover { text-decoration:none; color:#333; }
img.scale { width:100%; height:auto; }
form .row { margin-bottom:10px; }
input, select, button, .btn { height:38px; line-height:20px; }
input, select, textarea { width:100%; font-family: "Afacad", sans-serif; font-size: 14px; color: #333333; background:#FFF; border:1px solid #BBB; padding:7px; border-radius:1px; transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; }
:focus { border-color:#888; }
.btn i { margin-right:5px; }
.btn:hover { text-decoration:none; }
.btn-search, .btn-close { background:none; width:50px; border:0px; color:#333; }
.btn-search:hover, .btn-close:hover { opacity:0.5;  background:none; color:#000; }
input[type=submit], input[type=button], button, .btn { font-family: 'Open Sans', sans-serif; border:0px; border-bottom:2px solid var(--bg-button-text-hover); cursor:pointer; padding:6px 15px; text-align:center; display:inline-block; font-weight:bold; background:var(--bg-button); color:var(--bg-button-text); font-size:13px; line-height: 26px; }
input[type=submit]:hover, input[type=button]:hover, .btn:hover, button:hover, a.btn:hover { background:#CCC; color:var(--bg-button-text-hover); }
input.btn-selected, button.btn-selected, a.btn-selected { background:var(--bg-button-primary); color:#FFF; }
input.btn-selected:hover, button.btn-selected:hover, a.btn-selected:hover { background:var(--bg-button-primary-hover); color:#FFF; }
input[type=checkbox] { height:auto; width: auto; }
label.error { width:0px; height:0px; display: none; font-size:0px; visibility:hidden; }
input.error, textarea.error, select.error { border-color:#FF0000; color:#FF0000; background:#FDE6E7; }
.label { text-align:right; padding-right:10px; padding-top:10px; }
.label_results { padding:10px 0; }
.checkbox_list ul { display:grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding:5px 10px; background:#FFF; border-radius:1px; border-bottom:1px solid #DDD; overflow-y:auto; max-height:150px; }
.flex { display:flex; align-items: center; justify-content: center; }
.nowrap { white-space:nowrap; }
.mt40 { margin-top:40px; }
.mb20 { margin-bottom:20px; }

.enabled { font-size:12px; padding:2px 5px; display:block; text-align:center; white-space:nowrap; }
.enabled i { margin-right:5px; font-size:10px; }
.products_11 { color: var(--link); }
.products_13 { color:#CC0000; }
.invoices_53 { color:orange;  }
.invoices_52 { color: var(--link); }

.status_1 { color:#66CC00; font-size:10px; padding-top:12px; }
.status_2 { color:#CC0000; font-size:10px; padding-top:12px; }
.status_3 { color:#666; font-size:10px; padding-top:12px; }


table { width:100%; border-collapse: collapse; background:#FFF; }
thead td { padding: 10px 20px; font-weight:bold; border-bottom:1px solid #DDD; }
tbody td { padding: 10px 20px; vertical-align:top; border-bottom:1px solid #DDD; }
tbody td.icon i { font-size:14px; margin-right:5px;}
tbody td.icon { white-space:nowrap; }
tbody td a { display:inline-block;  }
tbody td img { border:1px solid #DDD; height:50px; width:50px; }
tbody tr:hover td { background:#f9f9f9; }
tbody tr.macro td { background:#888; color:#FFF; }
tbody tr.macro td a { color:#FFF; }

body { background:url('../images/bg.jpg') no-repeat center center; color:#FFF; font-size:16px; }
.content { width:100%; max-width:1400px; margin:0 auto; }
.logo { margin:0 auto; text-align:center; width:100%; padding:20px; position:fixed; top:0; left:0; right:0; }
.logo img { height:45px; width:auto; }

.main { min-height: calc(100vh - 0px); position:relative; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:20px; min-height: calc(100vh - 0px); }
.intro p { margin:50px 0 0 100px; font-size:30px; line-height:33px; font-weight:500; }
.intro .item { display: flex; align-items: center; justify-content: center; }
h1 { font-size:100px; line-height:90px; color:#FFF; }
h1 span { color:#1afc9c; }
h2 { color:#1afc9c; }
.intro-description { margin:40px auto 0 auto; max-width:800px; display:grid; grid-template-columns:1fr 1fr; gap:100px; font-size:18px; }
.step { max-width:600px; margin:100px auto; display:grid; grid-template-columns:1fr 1fr 1fr; gap:80px; }
.step h2 { font-family: 'DM Mono', monospace; border-top:1px solid #1afc9c; border-bottom:1px solid #1afc9c; margin:0 0 20px 0; padding:4px 0; font-size:16px; font-weight:normal; }
.step figure { height:150px; margin-bottom:20px; }
.step img { height:100%; width:auto; }

.faq { color:#1c002e; width:100%; max-width:1000px; margin:0 auto; border-radius:20px; background:#1afc9c; }
.faq h3 { padding: 20px; font-weight:normal; font-size:20px; }
.faq h4 { font-weight:normal; margin:0; font-weight:500; position:relative; cursor:pointer; padding-right:50px; }
.faq .item { border-top:1px solid #1c002e; padding:20px 20px; font-size:18px; }
.faq i { position:absolute; top:0px; right:20px; }
.faq p { margin-top:10px; }

.icon-store { position:absolute; bottom:60px; left:200px; z-index:2;  display:grid; grid-template-columns:100px auto; }
.icon-store img { width:70px; height:auto; margin-right:20px; }
.icon-store h4 { font-family: 'DM Mono', monospace; color:#1afc9c; font-size:14px; margin:0 0 10px; 0 }

.btn-store { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-store img { width:135px; height:auto; margin-right:0px; }

.footer { font-family: 'DM Mono', monospace; color:#1afc9c; text-align:center; padding:60px 20px; font-size:14px; }