/*
 *  Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
strong{font-weight:700;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}abbr,acronym{border:0;}

button::-moz-focus-inner {border:0; padding:0;}


/*
 *  Styles
 */

* {box-sizing:border-box;}

:root {

  --brand-green: #889287;
  --brand-green-hover: #768474;
  --brand-very-light-green: #e0e2df;
  
  --base-font-family: Inter, sans-serif;
  --base-font-size: 14px;
  --body-text-color: #474141;

  --heading-font-family: Lora, sans-serif;
 
  --font-awesome: "Font Awesome 5 Free";
  
}

html,
body {position:relative; display:flex; flex-direction:column; min-height:100%; flex:1;}
main {position:relative; display:flex; flex-direction:column;}

body {background:var(--brand-very-light-green);}

body,
table,
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea,
button,
a.button {font-family:var(--base-font-family); font-size:var(--base-font-size); color:--body-text-color;}

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {padding:10px; border:1px solid rgba( 0,0,0, .2 ); border-radius:3px;}

button,
a.button:link,
a.button:visited {display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 20px; border:0; border-radius:5px; background:rgba( 0,0,0, .1 ); color:var(--body-text-color); font-weight:600; text-decoration:none; cursor:pointer;}

button:disabled,
a.button.button-disabled {color:rgba( 0,0,0, .25 ); cursor:default;}

button:not(:disabled):hover,
a.button:not(.button-disabled):hover {background:rgba( 0,0,0, .2 );}

button i,
a.button i {color:rgba( 0,0,0, .5 );}

button[type="submit"] {background:var(--brand-green); color:white;}
button[type="submit"]:hover {background:var(--brand-green-hover);}

h3 {font-family:var(--heading-font-family); font-size:24px; line-height:140%; font-weight:bold; color:var(--brand-green);}
h3:not(:last-child) {margin:0 0 20px 0;}

hr {display:inline-block; width:100%; margin:20px 0; border:0; border-bottom:1px solid rgba( 0,0,0, .1 );}

.pageresponse {padding:30px; background:var(--brand-green); color:white; font-weight:bold; text-align:center;}

header {display:flex; align-items:center; gap:80px; padding:30px 20px;}
header .logo {height:30px;}
header nav {flex:1; display:flex; align-items:center; gap:15px;}
header nav a {padding:10px 20px; border-radius:5px; color:var(--brand-green); text-transform:uppercase; font-weight:400; text-decoration:none;}
header nav a:hover {background:rgba( 0,0,0, .05 );}
header nav .spacer {flex:1;}

main {width:100%; max-width:800px; min-height:60vh; margin:auto; padding:40px; border-radius:20px; background:white;}

form {display:flex; flex-direction:column; align-items:flex-start; gap:10px;}
form:not(.submitting) button i {display:none;}

.field {display:flex; flex-direction:column; gap:5px;}
.field label {font-weight:600;}

.buttons {display:flex; align-items:center; gap:15px;}

.expiry input[type="text"] {width:80px;}

body.login {}
body.login header {justify-content:center;}
body.login .logo {}
body.login main {min-height:1px; width:auto;}
body.login main button {width:100%;}
body.login h1 {width:100%; margin:0 0 10px 0; text-align:center; font-family:var(--heading-font-family); font-weight:bold; font-size:24px; line-height:140%; color:var(--brand-green);}