main>:last-child{padding-bottom:6.854em}

.action-container{
    width:min(100%,50ch);
    min-height: 2.618em;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap:1em}

.action-container>div{
    width: 100%;
    display: flex;
    gap:1em}

.action-container .donationItem,.action-container .giving-component{margin: 0 auto}
.action-container div+.button{width: 38%}
#above-the-top{margin: 0}

/*IO*/
@keyframes donation-appear{to{opacity:1;transform: translateY(0)}}

.above-the-top .action-container>div{
    padding:1em 1em calc(1em + env(safe-area-inset-bottom));
    border-top:1px solid rgba(0,0,0,.1);
    width: 100%;
    height: auto;
    opacity: 0;
    transform: translateY(5rem);
    animation: donation-appear .5s .3s ease forwards;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,1)}

.above-the-top #eop.trigger.visible~header .action-container>div{position: absolute}

@media(min-width:64em){
    .above-the-top .action-container>div{
        width:min((100vw - 2em) - (62ch + 3vw), 32.66ch);
        border:1px solid rgba(0,0,0,.1);
        border-bottom: none;
        bottom: 0;
        right: max(1em,((100vw - 100ch) / 2));
        border-top-left-radius: .618em;
        border-top-right-radius: .618em;
        box-shadow:0 0 1ch rgba(0,0,0,.03),0 0 .236ch rgba(0,0,0,.03),0 0 .382ch rgba(0,0,0,.03),.236ch .382ch .618ch rgba(0,0,0,.03)}
}

main>*>*>*:not(header,hgroup,h1,.h1,h2,.h2,h3,.h3,hgroup p,figcaption,small)+:is(.giving-component,.donationItem){margin-inline:min((100% - (var(--ch-unit)*38))/2,(var(--ch-unit)*12))}
.donationItem,.giving-component{height: 2.618em}

.giving-component{
    height: calc(3.618em + 1ch);
    display: flex;
    flex-direction: column;
    gap:1ch}

:not(.action-container) .donationItem,:not(.action-container) .giving-component{width: min(100%, var(--ch-unit)*38)}

.diCartField,.diSlimWrap{
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    position: relative}

.diCartField label,.diSlimTitleWrap{
    transition: all .5s;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    display: flex;
    justify-content: flex-end;
    gap:.618em;
    flex-basis: 62%;
    font-size: .618em;
    white-space: nowrap;
    padding:0 .382em}

.donationItem:focus-within .diSlimTitleWrap,.giving-component:focus-within .diCartField label{top: -1.618em}
body:not(.above-the-top) .banner .diSlimTitleWrap,body:not(.above-the-top) .banner .field-container label,body:not(.above-the-top) .banner .radio-container{color: #fff}
.diCartField .fa-usd2,.diCartField button,.diSlimAmt,.diSlimBtn{flex-basis: 50%}

.diCartField .fa-usd2,.diSlimAmt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 2px solid #06ac42;
    border-right: none;
    border-radius: .618em 0 0 .618em;
    padding-inline:.382em .236em;
    background: #fff;
    color: inherit}

.diCartField .fa-usd2 input,.diInput input{
    border: none;
    border-radius: 0;
    width: 100%;
    height: calc(2.618em - 4px);
    font-family: inherit;
    font-size: inherit;
    color: #000;
    text-align: right}

.giving-component button,.diSlimBtn{
    color: #fff;
    line-height: 2.618;
    text-align: center;
    border: none;
    border-radius: 0 .618em .618em 0;
    box-shadow:0 0 1.618rem rgba(0,136,68,.2),0 .09rem .146rem rgba(0,34,0,.3),.09rem .146rem .236rem rgba(0,34,0,.2),.146rem .236rem .382rem rgba(0,68,14,.14),.236rem .382rem .618rem rgba(0,68,14,.13),.382rem .618rem 1rem rgba(0,68,14,.1);
    background:linear-gradient(to bottom, #06ac42 0%,#084 100%)}

.giving-component button:hover,.diSlimBtn:hover{color: #fff!important}

.donation-frequency{
    padding: 0 .382em;
    height: 1em;
    display: flex;
    gap:1em}