@import url(/theme/assets/dialog-polyfill.css);

@import url(/theme/assets/theme.css);

suggested-donations > div > input[type=number]:active,
suggested-donations > div > input[type=number]:focus,
suggested-donations > div > input[type=number].selected
{
    background-color: #f2d173;
}

.list-template .recipients-view .contextual-content .cart > ul,
.list-template-wrapper.desktop .recipients-view .contextual-content .cart > ul {
    max-height: 300px;
    overflow: auto;
}

.list-template .subscription-option label {
    font-size: 11px;
}

.page.list-template > section > footer {
 padding: 0 5% 80px 5%;
}

dialog + .backdrop, dialog::backdrop {
    background-color: #000;
    opacity: .85;
}

dialog {
    width: 95%;
    max-width: 520px;
    border: 1px solid #333;
}

dialog p {
    font-size: 14px;
    line-height: 1.5;
}

dialog label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
}

dialog input {
    padding: 10px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box
}

dialog .dialog-disclaimer {
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

dialog .dialog-link {
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    color: #333;
    margin-bottom: 20px;
}

dialog .link {
    color: #369;
    cursor: pointer;
}

dialog .dialog-link.dialog-learn-more {
    text-transform: none;
    margin-top: 30px;
}

dialog form button {
    text-align: center;
    background-color: #2533ba;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: none;
}

dialog form {
    margin-bottom: 30px;
}

.de-terms {
    display: none;
}

.recipient-profile .basic-profile > .content > .description {
    margin-top: 20px;
}





main > section > header > div {
   display: block; 
}

main > section > header > h1 {
   margin-bottom: 1rem;
}


.list-template .recipients-view .recipients.single .recipient .controls{
    grid-row-start: 2;
    grid-row-end: 3;
}


.list-template .recipients-view .recipients.single .recipient .description {
    grid-row-start: 3;
    grid-row-end: 4;
}


@media screen and (max-width: 767px) {
.list-template .recipients.single.suggested-donations > .recipient .details .name {
    font-size: 7vw !important;
  }
}