.dpp-icon-box {
    width: 44px;
    height: 44px;
}

.dpp-icon-box img {
	filter: brightness(0) invert(1);
}

/* Loading sequence */
#dpp-loading {
	display: flex;
}
#dpp-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: .3rem;
}

.dpp-steps {
    min-width: 280px;
}

#dpp-content {
    display: none;
}

.dpp-step img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* default state: active (blue) */
.dpp-step .dpp-step-done    { display: none;         filter: invert(48%) sepia(79%) saturate(476%) hue-rotate(86deg) brightness(95%) contrast(97%); }
.dpp-step .dpp-step-active  { display: inline-block; filter: invert(29%) sepia(98%) saturate(500%) hue-rotate(195deg) brightness(80%) contrast(100%); }
.dpp-step .dpp-step-pending { display: none;         filter: invert(70%) sepia(0%) saturate(0%) brightness(90%) contrast(90%); }

/* done state: green check */
.dpp-step.is-done .dpp-step-done    { display: inline-block; }
.dpp-step.is-done .dpp-step-active  { display: none; }
.dpp-step.is-done .dpp-step-pending { display: none; }

/* pending state: grey ring */
.dpp-step.is-pending .dpp-step-done    { display: none; }
.dpp-step.is-pending .dpp-step-active  { display: none; }
.dpp-step.is-pending .dpp-step-pending { display: inline-block; }

/* Utilities */
.dpp-icon-flip { transform: scaleX(-1); }

/* FAQ Accordion */
.dpp-faq-btn .dpp-chevron-right { display: inline-block; }
.dpp-faq-btn .dpp-chevron-down  { display: none; }
.dpp-faq-btn[aria-expanded="true"] .dpp-chevron-right { display: none; }
.dpp-faq-btn[aria-expanded="true"] .dpp-chevron-down  { display: inline-block; }

/* Feature cards */
.dpp-feature-card {
    border-radius: .5rem;
    padding: 1.25rem;
    height: 100%;
}

.dpp-feature-card--orange    { background-color: #fdecea; }
.dpp-feature-card--slate     { background-color: #e8eaed; }
.dpp-feature-card--lightblue { background-color: #daedf7; }
.dpp-feature-card--green     { background-color: #dff0e4; }
.dpp-feature-card--sand      { background-color: #f0eada; }
.dpp-feature-card--blue      { background-color: #dae3f0; }
.dpp-feature-card--pink      { background-color: #fce4e4; }
.dpp-feature-card--red       { background-color: #fde8e4; }
.dpp-feature-card--yellow    { background-color: #fdf3da; }

.dpp-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dpp-feature-icon img {
    filter: brightness(0) invert(1);
}

.dpp-feature-icon--orange    { background-color: #e8622a; }
.dpp-feature-icon--slate     { background-color: #2d3e55; }
.dpp-feature-icon--lightblue { background-color: #4aa8d8; }
.dpp-feature-icon--green     { background-color: #3a7d52; }
.dpp-feature-icon--sand      { background-color: #b89a4a; }
.dpp-feature-icon--blue      { background-color: #1e3f6e; }
.dpp-feature-icon--pink      { background-color: #c0335a; }
.dpp-feature-icon--red       { background-color: #c0392b; }
.dpp-feature-icon--yellow    { background-color: #c8922a; }

#dpp-scan-qr:hover img,
#dpp-scan-qr:focus img {
    filter: brightness(0) invert(1);
}

#submit-dpp img {
	filter: brightness(0) invert(1);
}

#submit-dpp:hover img,
#submit-dpp:focus img {
	filter: none !important;
}