.add-btn{
    color: white;
  }

.card-closer{
    margin-bottom: 0!important;
    margin-top: 15px!important;
}

.btn-format{
    margin: 0!important;
    padding: 5px!important;
}

.card-header-bottom{
    margin-bottom: 15px!important;
}

.btn-link-ed{
    background-color: transparent;
    color: #fff;
    box-shadow: none;
}

.header-p{
color: #fff;
font-size: 0.675rem;
max-width: 264px;
min-width: 72px;
box-sizing: border-box;
min-height: 48px;
text-align: center;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500;
line-height: 1.75;
flex-shrink: 0;
white-space: normal;
letter-spacing: 0.02857em;
text-transform: uppercase;
}

.notification-center{
    color: #959EA3;
    padding: 0 20px;
    font-size: 14px;
    text-align: center;
    margin-top: 0px;
    font-weight: 400;
    line-height: 19px;
    margin-bottom: 26px;
}

/* Header of the login / forgot-password / reset cards.
   Was a five-stop pink-to-orange gradient, which matched nothing in the product
   — the Digiprime logo is green. Re-pointed at the brand ramp defined in
   css/digiprime.css so the first screen a client ever sees agrees with the
   logo sitting directly above it. */
.card-header-main-page{
    background: var(--dp-brand-gradient, linear-gradient(135deg, #9BD770 0%, #52B06A 45%, #2E8558 100%)) !important;
    box-shadow: var(--dp-shadow-brand, 0 10px 24px -10px rgba(69, 165, 102, .55)) !important;
}