html { box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; }
body { background-color:#f2f2f2; color:#000; font-family:'Reddit Sans', sans-serif; font-size:16px; font-weight:400; line-height:1.2; padding:30px; position:relative; }
p, h1, h2, h3, h4, h5, h6, ol, ul, hr, form, fieldset, iframe { margin:0 0 30px 0; }
h1, h2, h3, h4, h5, h6 { color:#39b54a; font-weight:700; }
h1 { font-size:2.4em; line-height:1; }
h2 { font-size:2em; line-height:1; }
h3 { font-size:1.8em; line-height:1; }
h4 { font-size:1.6em; line-height:1.1; }
h5 { font-size:1.4em; line-height:1.1; }
h6 { font-size:1.2em; line-height:1.1; }
hr { background-color:#dfdfdf; border-width:0; height:1px; margin:45px 0; }
img { height:auto; max-width:100%; }
a { color:#39b54a; text-decoration:underline; transition:color 0.3s; }
a:hover { color:#289f34; }
small { font-size:0.8em; line-height:1.2; }
* > *:last-child { margin-bottom:0 !important; }

/* Helpers */
.container { margin:0 auto; max-width:100%; width:1200px; }
.container.sm { width:600px; }

.align-center { text-align:center; }

.hidden { display:none !important; }

/* Alerts */
.alert { border-width:1px; border-style:solid; border-radius:0.3em; padding:1em; margin-bottom:30px; }

.alert.success { color:#3c763d; background-color:#dff0d8; border-color:#d6e9c6; }
.alert.info { color:#31708f; background-color:#d9edf7; border-color:#bce8f1; }
.alert.warning { color:#8a6d3b; background-color:#fcf8e3; border-color:#faebcc; }
.alert.danger { color:#a94442; background-color:#f2dede; border-color:#ebccd1; }

.alert.success a { color:#2b542c; }
.alert.info a { color:#245269; }
.alert.warning a { color:#66512c; }
.alert.danger a { color:#843534; }

.alert a.button { color:#fff; }

/* Buttons */
.button { background-color:#39b54a; border:1px solid #289f34; border-radius:0.3em; color:#fff; display:inline-block; font-weight:700; height:2.8em; line-height:2.8em; max-width:100%; overflow:hidden; padding:0 1.2em; text-align:center; text-overflow:ellipsis; transition:background-color 0.3s; vertical-align:middle; white-space:nowrap; }
.button:hover, .button.active { background-color:#289f34; }
input.button, button.button { cursor:pointer; }
a.button { text-decoration:none; }
a.button:hover { color:#fff; }

.button.sm { font-size:0.8em; }
.button.md { font-size:1.2em; }
.button.lg { font-size:1.4em; }
.button.xl { font-size:1.6em; }

.button.block { display:block; width:100%; }

.button i { margin-right:0.6em; }
.button i.fa-spinner { margin-right:0; }

.button.icon { padding:0; width:2.8em; }
.button.icon i { margin-right:0; }

.button.success { background-color:#5cb85c; border-color:#449d44; }
.button.info { background-color:#5bc0de; border-color:#31b0d5; }
.button.warning { background-color:#f0ad4e; border-color:#ec971f; }
.button.danger { background-color:#d9534f; border-color:#c9302c; }
.button.light { background-color:#fff; border-color:#e6e6e6; color:#333; }

.button.success:hover, .button.active.success { background-color:#449d44; }
.button.info:hover, .button.active.info { background-color:#31b0d5; }
.button.warning:hover, .button.active.warning { background-color:#ec971f; }
.button.danger:hover, .button.active.danger { background-color:#c9302c; }
.button.light:hover, .button.active.light { background-color:#e6e6e6; color:#333; }

.button.round { border-radius:1.4em; }

.button.disabled, .button[disabled] { opacity:0.3; pointer-events:none; }

/* Fields */
.field { margin-bottom:30px; }

.field label { display:block; font-weight:700; margin-bottom:6px; }

input[type="text"], input[type="password"], input[type="number"], select { background-color:#fff; border:1px solid #dfdfdf; border-radius:0.3em; height:2.8em; outline-color:#39b54a; padding:0 0.6em; }

.field input[type="text"], .field input[type="password"], .field input[type="number"], .field select { width:100%; }
.field.inline input[type="text"], .field.inline input[type="password"], .field.inline input[type="number"], .field.inline select, .field input[type="text"].auto, .field input[type="password"].auto, .field input[type="number"].auto, .field select.auto { width:auto; }

.field .error { color:#d9534f; font-size:12px; font-weight:400; margin-top:6px; }

/* Input Groups */
.input-group { display:flex; align-items:stretch; }
.input-group .prepend, .input-group .append { background-color:#f8f8f8; border:1px solid #dfdfdf; display:flex; align-items:center; padding:0 1.2em; white-space:nowrap; }
.input-group .prepend { border-top-left-radius:3px; border-bottom-left-radius:3px; border-right-width:0; }
.input-group .append { border-top-right-radius:3px; border-bottom-right-radius:3px; border-left-width:0; }
.input-group input:not(:first-child), .input-group select:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.input-group input:not(:last-child), .input-group select:not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }

/* Tooltips */
.ui-tooltip { padding:0 0 6px 0; }
.ui-tooltip-content { background-color:rgba(42, 42, 42, 0.9); border-radius:3px; font-size:14px; color:#fff; padding:6px 9px; position:relative; }
.ui-tooltip-content::after { content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid rgba(42, 42, 42, 0.9); }

/* Cards */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:60px; }

.card { background-color:#fff; border-radius:15px; box-shadow:15px 15px 15px rgba(0, 0, 0, 0.05); display:flex; flex-direction:column; justify-content:space-between; position:relative; width:100%; }
.card.three-fourths { width:calc((100% * (3 / 4)) - ((1 / 4) * 60px)); }
.card.two-thirds { width:calc((100% * (2 / 3)) - ((1 / 3) * 60px)); }
.card.one-half { width:calc((100% * (1 / 2)) - ((1 / 2) * 60px)); }
.card.one-third { width:calc((100% * (1 / 3)) - ((2 / 3) * 60px)); }
.card.one-fourth { width:calc((100% * (1 / 4)) - ((3 / 4) * 60px)); }

.card > .header { padding:45px 45px 0; text-align:center; }
.card > .body { padding:45px; }
.card > .footer { padding:0 45px 45px; }

.card > .header img { width:300px; }

/* Modals */
body.modal-open { overflow:hidden; }

.modal { background-color:rgba(0, 0, 0, 0.6); display:none; padding:30px; position:fixed; top:0; left:0; width:100%; height:100%; overflow-y:auto; z-index:20; }

.modal .overlay { display:flex; align-items:center; justify-content:center; min-height:100%; }

.modal .window { box-shadow:3px 3px 12px rgba(0, 0, 0, 0.15); position:relative; max-width:100%; max-height:100%; width:600px; }

.modal .window > *:first-child { border-top-left-radius:15px; border-top-right-radius:15px; }
.modal .window > *:last-child { border-bottom-left-radius:15px; border-bottom-right-radius:15px; }

.modal .header { background-color:#39b54a; display:flex; align-items:center; justify-content:space-between; padding:30px; }

.modal .header .title { color:#fff; font-size:1.8em; font-weight:700; }

.modal .header .close { background-color:transparent; border-width:0; color:#fff; cursor:pointer; font-size:24px; line-height:1; outline-width:0; padding:0; transition:opacity 0.3s; }
.modal .header .close:hover { opacity:0.7; }

.modal .body { background-color:#fff; padding:45px 30px; }
.modal .body > *:last-child { margin-bottom:0; }

/* Invoices */
.invoices { display:flex; flex-direction:column; gap:30px; }

.invoice { border:1px solid #dfdfdf; border-radius:12px; display:flex; gap:45px; padding:45px; }

.invoice .left { flex-grow:1; display:flex; flex-direction:column; gap:15px; }

.invoice .organization { font-size:24px; font-weight:700; }

.invoice .right { display:flex; flex-direction:column; gap:15px; text-align:right; }

.invoice .amount { font-size:24px; font-weight:700; }

.invoice .buttons { white-space:nowrap; }

/* Media Queries */
@media (max-width:767px) {
	/* Helpers */
	#page { padding:15px; }

	/* Invoices */
	.invoice { flex-direction:column; gap:30px; }

	.invoice .right { text-align:left; }
}