mortgage-messaging {
    display: block;
    right: 0;
    bottom: 0;
    text-align: right;
    width: 100%;
    z-index: 9999;
    position: sticky;
    font-size: 12pt;
    padding-bottom: 5px;
}

mortgage-messaging>.component-container {
    padding: 1rem;
    opacity: 0;
    transition: opacity 250ms ease;
}

mortgage-messaging>.component-container.in {
    opacity: 1;
}

mortgage-messaging>.component-container>div {
    position: relative;
    display: inline-block;
    width: 400px;
}

mortgage-messaging>.component-container>div>.message-bubble-container {
    background: #541868;
    color: #ffffff;
    text-align: left;
    border-radius: 7px;
    margin-right: 40px;
    padding: 5px;
    transition: height 350ms ease;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-header {
    color: #541868;
    background: #66e84b;
    padding: 5px;
    border-radius: 5px;
    font-size: 12pt;
    position: relative;
    transition: all 250ms ease-in-out;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-header.large {
    font-size: 18pt;
    font-weight: normal;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
    padding: 0.5rem 1rem;
    line-height: 5rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-header>.close-button {
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 9pt;
    font-weight: lighter;
    color: #541868;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-header>.close-button>svg {
    position: inherit;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content {
    padding: 1.5rem;
    color: #ffffff;
    transition: opacity 250ms ease;
    opacity: 0;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content.in {
    opacity: 1;
}

mortgage-messaging>.component-container>div>.message-bubble-container.teaser-state {
    height: 18rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container.open-state {
    height: 45rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container.success-state {
    height: 36rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content p,
mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content ul {
    color: #ffffff;
    font-weight: lighter;
    font-size: 11pt;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content ul {
    padding-inline-start: 2.5rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content p.strong {
    font-weight: bold;
    font-size: 12pt;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-content p .text-emphasized {
    color: #66e84b;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-footer {
    text-align: center;
    margin-bottom: 5px;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-footer>button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: #66e84b;
    border: none;
    color: #541868;
    border-radius: 20px;
    padding: 5px 20px;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-footer>sub {
    display: block;
    bottom: 0;
    line-height: normal;
    margin-top: 0.75rem;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-footer>sub a.anchor {
    color: #ffffff;
    font-weight: lighter;
}

mortgage-messaging>.component-container>div>.message-bubble-container>.message-bubble-footer>sub a.anchor:hover {
    text-decoration: none;
}

mortgage-messaging>.component-container>div>.arrow-container {
    margin-right: 70px;
    height: 15px;
}

mortgage-messaging>.component-container>div>.opti-container>img {
    width: 70px;
}