#quick-message-button {

    background-color: var(--main-link-color);
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--accent-color-main);
    border: solid 3px var(--accent-color-main);
    vertical-align: middle;
    line-height: 60px;
    text-align: center;
    bottom: 70px;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 3em;
    cursor: pointer;
}


#quick-message-button-message {

    border: #000 solid 2px;
    display: block;
    width: 100px;
    text-align: center;
    font-size: 13px;
    background-color: var(--main-link-color);
    margin-left: -22px;
    margin-right: 0;
    line-height: 1.8em;
    border-radius: 25px;
}

#quick-message-holder {

    position: fixed;
    height: 0vh;
    overflow-y: hidden;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    bottom: -30px;
    z-index: 200;
    background-color: #ffffff;

}

.quick-message-holder-open {

    height: 100vh !important;
    outline: solid black 100vw;


}

@media screen and (min-width: 451px) {


    #quick-message-holder {

        width: 451px;

        left: 0;
        right: 0;
        margin: auto;
        border: solid 20px #ffffff;
        border-bottom: 0;
        border-top: 0;


    }


}


@media screen and (max-width: 450px) {

    #quick-message-holder {

        width: 100vw;


    }

}