.cl-root {
    width: 400px;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    border-radius: 0.25rem;
    box-sizing: border-box;
}

    .cl-root .cl-title {
        padding: 1rem;
        font-size: 2rem;
        font-weight: 500;
    }

    .cl-root .cl-couponlist-container {
        padding: 1rem 1rem 0 1rem;
    }

    .cl-root .cl-coupon-container {
        padding-bottom: 0.5rem;
    }

    .cl-root .cl-coupon-link {
        display: block;
        padding: 1rem;
        border: 1px solid #d0d0d0;
        border-radius: 0.25rem;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
        background-color: white;
    }

        .cl-root .cl-coupon-link:hover {
            border: 1px solid #183792;
        }

        .cl-root .cl-coupon-link[data-disabled='true'] {
            background-color: #DEDEDE;
        }

            .cl-root .cl-coupon-link[data-disabled='true']:hover {
                border: 1px solid #d0d0d0;
            }

        .cl-root .cl-coupon-link[data-selected='true'],
        .cl-root .cl-coupon-link[data-selected='true']:hover {
            border: 2px solid #357a00;
        }

    .cl-root .cl-coupon-name {
        font-size: 1rem;
        font-weight: 500;
        color: #4a4a4a;
    }

    .cl-root .cl-coupon-errormessage {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #ae3b1d;
    }

    .cl-root .cl-button-container {
        padding: 1rem;
    }

    .cl-root .cl-button-cancel {
        width: 100%;
    }

@media (max-width: 768px) {
    .cl-root {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
}