pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
}

#root {
    height: 100%;
}

.app-main {
    /* For sticky footer */
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    /* Sticky Footer */
    height: 100%;
}

html {
    /* For sticky Footer */
    height: 100%;
}

div.custom-asciinema-player {
    box-shadow: 0 0 16px 5px rgba(184, 69, 49, 0.315);

    padding: 5px;
    background-color: #222;
}

.newsletter-box {
    box-shadow: 0 0 1px 2px rgba(148, 57, 41, 0.315);
    background-size: cover;
    border-radius: 0rem;
    color: #000000;
    overflow: hidden;
}

.newsletter-overlay {
    background-color: rgba(214, 208, 208, 0.829);
    padding: 2rem;
    position: relative;
}


@media (max-width: 767px) {
    .newsletter-overlay {
        padding: 1px;
    }
}

.plan-bullets {
    height: 7rem
}

.plan-current {
    border: 2px solid rgb(12, 50, 188);
    background-color: #EEF2FF;
}

.alert {
    transition: opacity 1s;
}

.ribbon_parent {
    overflow: hidden;
    position: relative;
}

.ribbon {
    top: 0;
    right: 0;
    padding: 1em 0;

    background: #e67d22b9;
    color: white;

    position: absolute;
    transform-origin: top left;
    transform: translateX(-70%) translateY(10%) rotate(30deg);
}

.ribbon:before,
.ribbon:after {
    width: 300%;
    top: 0;
    content: '';
    position: absolute;

    margin: 0 -0.25px;

    height: 100%;
    background: #e67d22b9;
}

.ribbon:before {
    right: 100%;
}

.ribbon:after {
    left: 100%;
}