@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
padding: 0;
margin: 0;
font-size: 2vh;
opacity: 1.0;
transform: none;
transition-property: opacity, transform;
transition-duration: .25s;
transition-duration: .125s;
transition-timing-function: ease-in-out;
}

html, body {
background: #ebe9f1;
font-family: 'Roboto';
text-align: center;
}

body {
padding: 5rem 0 0 0;
max-width: calc(100vh / 16 * 9);
margin: 0 auto;
text-align: center;
}

.invisible {
opacity: 0.0;
}

.l2r {
transform: translateX(-100%);
opacity: 0.0;
}

img.loading {
width: 8vw;
height: 8vw;
position: absolute;
top: 50%;
left: 50%;
margin: -4vw;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes rotate {
    0% { transform: rotate(  0deg); }
  100% { transform: rotate(360deg); }
}

/*
 * HEADER *********************************************************************/

header {
display: grid;
position: fixed;
top: 0;
left: 0;


background: #7CB5D2;
background: #92a8d1;
box-shadow: 0 0 0.5rem rgba(0,0,0,0.5);
grid-template-columns: 2rem calc(100vw - 4rem) 2rem;
text-align: center;
color: #FFF;
}

header button {
width: 2rem;
height: 2rem;
padding: 0;
margin: 0;
background: transparent;
border: 0;
margin: 0.5rem;
}

header button img {
width: 2rem;
height: 2rem;

}

header h1 {
font-size: 1rem;
line-height: 2rem;
margin: 0.5rem;
}

header ol.tabs {
display: flex;
width: 100vw;
overflow: scroll;

grid-column: 1;
grid-row: 2;

list-style: none;
text-transform: uppercase;
font-size: 0.5rem;
}

header ol.tabs li {
display: block;
width: calc(100vw / 6);
padding: 1.5rem 0 0.5rem 0;
font-size: 0.6rem;
text-align: center;
color: #DDD;
font-weight: bold;
/*border-left: 1px solid rgba(255,255,255,0.125);*/
}

header ol.tabs li.selected {
color: #FFF;
border-bottom: 2px solid #FFF;
}




.logo { width: 100%; margin:-3rem 0 1rem 0; }

.homebuttonlist {
list-style: none;
}

.homebuttonlist li {
display: inline;
}

.homebutton {
margin: 0.5rem 0;
padding: 1rem;
text-align: center;
border: 0 none;
text-transform: uppercase;
background: transparent;
box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.08);
font-size: 0.75rem;
}

.full {
width: 90%;
margin: 1rem 0;
}

.half {
width: 40%;
margin: 2rem 5%;
background-color: #fefefe;
}

.img {
padding-top: calc(25vh / 16 * 9);
background-position: top center;
background-repeat: no-repeat;
background-size: calc(25vh / 16 * 9) auto;
border-radius: 2rem;
}

.donations  { background-image: url('img/donations.png'); }
.requests   { background-image: url('img/requests.png'); }
.history    { background-image: url('img/history.png'); }
.settings   { background-image: url('img/settings.png'); }
.quotations { background-image: url('img/quotation.svg'); }
.invoices   { background-image: url('img/invoice.png'); }


.red {
background: #d1a892;
border-radius: 4rem;
color: #fefefe;
font-weight: bold;
}

.green {
background: #a8d192;
border-radius: 4rem;
color: #fefefe;
font-weight: bold;
}

.blue {
background: #92a8d1;
border-radius: 4rem;
color: #fefefe;
font-weight: bold;
}

.homebutton.small {
margin-top: 4rem;
font-size: 0.75rem;
text-align: center;
}





label {
display: block;
}

input {

/*text-transform: uppercase;*/
}

textarea,
input {
width: 80%;
margin: 2rem auto;
padding: 0.5rem 1rem;

border: 0 none;
border-radius: 1rem;
background: #fefefe;
color: #333;
font-weight: bold;

padding: 1rem;
text-align: center;
border: 0 none;

box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.08);
}

input[type="radio"] {
background:red;
}

textarea {
height: 8rem;
}

.bottom-link-right { position: fixed; bottom: 2rem; right: 2rem; width: 4rem; height: 4rem; border: 0; }
.bottom-link-left  { position: fixed; bottom: 2rem; left:  2rem; width: 4rem; height: 4rem; border: 0; }

.bottom-link-right img { width: 4rem; height: 4rem; }
.bottom-link-left  img { width: 4rem; height: 4rem; }




.radioitems {
list-style: none;
display : grid;
grid-template-columns: 50% 50%;
}

.radioitems li {
margin: 0.5rem 0;
padding: 1rem;
}


.radioitems label {
padding: 2rem;
font-weight: bold;
font-size: 1.2rem;

cursor: pointer;
z-index: 90;

background-color: #fdffff;
border-radius: 2rem;
}

.radioitems input[type="radio"] {
display: none;
}

.radioitems input[type="radio"]:checked + label {
background-color: #7cd4bb;
color: #fdffff;
}


button.submit {
color: #fdffff;
background-color: #7cd4bb;
padding: 1rem;
border-radius: 2rem;
border: 0;
font-weight: bold;
font-size: 1.2rem;
box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.08);
margin-top: 2rem;
}


.donation {
padding: 1.5rem 2rem;
background-color: #fefefe;
box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.08);
text-align: left;
border-radius: 2rem;
}

.donation h2 {
margin: 0 0 0.5rem 0;
}



table {
border-collapse: collapse;
width: 100%;
}

td {
width: 25%;
font-size: 1.1rem;
padding: 0.2rem;
text-align: left;
}

td:nth-child(1) {
width: calc(50% - 3.2rem);
}

td:nth-child(2) {
width: calc(50% - 1.6rem);
}

td:nth-child(3) {
width: 3.0rem;
text-align: right;
}

td:nth-child(4) {
width: 1.8rem;
text-align: right;
}

td img {
height: 1.6rem;
}

h2 {
margin: 1rem;
}

td.negative {
color: #F00;
}

td.positive {
color: #0B0;
}