body {
   font-family: 'Inclusive Sans', sans-serif;
   font-size: 18px;
   margin: 0 16px;
   padding: 32px 0;
   background-color: #ffeef1;
}


.spinnerbg {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,.8);
   z-index: 1000;
}
.spinner {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%)
}
.spinner svg {
   fill: pink;
   display: block;
   -webkit-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite; animation:spin 1s linear infinite;
}
@-moz-keyframes spin {
   100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
   100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
   100% {
      -webkit-transform: rotate(360deg);
      transform:rotate(360deg);
   }
}


.canceller {
   display: none;
   position: fixed;
   bottom: 64px;
   left: 50%;
   transform: translate(-50%,0);
   background-color: rgba(0,0,0,.75);
   color: #ffffff;
   font-size: .9em;
   padding: 12px 16px;
   -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
   white-space: nowrap;
}
.canceller span {
   text-decoration: underline;
   color: yellow;
   margin-left: 8px;
}


form ul {
   margin: 0;
   padding: 0;
   list-style: none;
   font-size: 1.5em;
}
form ul li.allowedwithdraw {
   font-size: .75em;
   text-align: center;
   padding-top: 32px;
   color: #2815bd;
}
form ul li.allowedwithdraw .negative {
   color: #ff0000;
}
form ul li.allowedwithdraw span:nth-child(1) {
   font-size: .9em;
   margin-right: 3px;
}
form ul li:not(.allowedwithdraw) {
   margin: 8px 0 0 0;
   padding: 0;
}
form ul label {
   display: block;
   padding: 8px 16px;
   border: 1px solid pink;
   -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
   text-align: center;
   color: pink;
}
form ul label.selected {
   border-color: ##df84a9;
   background-color: #df84a9;
   color: #ffffff;
}
form ul label input {
   display: none;
}


.depopar {
   margin: 32px 0 0 0;
   padding: 0;
   display: flex;
   gap: 8px;
}
.depopar input {
   margin: 0;
   padding: 8px;
   font-size: 1.8em;
   text-align: center;
   width: 100%;
   font-family: 'Inclusive Sans', sans-serif;
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.depopar button {
   margin: 0;
   padding: 8px;
   font-size: 1.8em;
   text-align: center;
   font-family: 'Inclusive Sans', sans-serif;
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}


.history {
   margin: 32px 0 0 0;
   padding: 0;
   list-style: none;
   font-size: .85em;
   border: 1px solid #cccccc;
   -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
.history li {
   margin: 0;
   padding: 8px 16px;
   display: grid;
   grid-template-columns: 1fr 1fr;
}
.history li:not(:first-child) {
   border-top: 1px dashed #cccccc;
}
.history li span:nth-child(1) {
   grid-column: 1/3;
   font-size: .85em;
}
.history li span:nth-child(2) {
   grid-column: 1/2;
}
.history li span:nth-child(3) {
   grid-column: 2/3;
   text-align: right;
}
.history li span:not(:first-child) {
   color: #2c9104;
}
.history li span.negative {
   color: #ff0000;
}