.new-message-box {
    position: fixed;
    z-index: 5000;
    right: 0;
    bottom: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    max-width: 270px;
    margin: auto;
}

.new-message-box.open {
    right: 10px;
    bottom: 10px;
    background: #fff;
    border-radius: 7px;
    width: 100%;
    max-width: 600px;
    padding: 60px 18px 18px;
    min-height: 540px;
    height: fit-content;
    background-color: var(--surface-color)
}

.attachment-group label {
    opacity: 1;
    text-decoration: underline;
    cursor: pointer;
    margin-right: 1.5em;
    width: max-content;
}

/*.attachment-group input {*/
/*    display: none;*/
/*}*/

.attachment-error {
    font-family: lekker-webfont, sans-serif;
    color: #fd8167;
    font-size: 18px;
    position: absolute;
    right: 29px;
    top: 50%;
    display: block;
    width: 1em;
    height: 1em;
    visibility: hidden;
}

.attachment-error-display {
    width: 100%;
    margin: 0.25rem 0 0.25rem 0;
    background: #fd8167;
    color: #fff;
    font-family: Helvetica, sans-serif;
    font-weight: lighter;
    font-size: 12px;
    border-radius: 5px;
    padding: 0;
    position: absolute;
    opacity: 1;
    height: auto;
    z-index: 0;
    top: 100%;
    left: 0;
    visibility: hidden;
}

.attachment-item {
    margin: 0 0 0.3em 0;
    display: flex;
    align-content: center;
    cursor: pointer;
    pointer-events: none;
}

.attachment-item::after {
    content: '';
    background: url(/assets/img/icon/icon-close.svg) center no-repeat;
    display: inline-block;
    background-size: 15px;
    width: 20px;
    height: 20px;
    margin-left: 3px;
    pointer-events: auto;
}

.attachment-upload-files {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-left: 0.3em;
    visibility: hidden;
    overflow-y: scroll;
    max-height: 105px;
}

.attachment-upload-files h1 {
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 0.5em 0;
}

.messenger-static {
    position: static;
}

.messenger-static .form-control {
    width: 100%;
}

.new-message-button {
    font-size: 16px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    color: #472272;
    border: 0;
    padding: 26px 22px 24px;
}
.open .new-message-button {
    cursor: initial;
}

.new-message-box:not(.open) .new-message-button {
    background: #fc0;
    display: block;
    position: relative;
    width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.new-message-button::before {
    content: '';
    width: 36px;
    height: 34px;
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMzU3IDM0MCIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM1NyAzNDAiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGRlZnM+DQo8L2RlZnM+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB4PSIwIiB3aWR0aD0iMzU3LjM5NCIgaGVpZ2h0PSIzMzkuODk1Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZGRkZGIiBkPSJNMTM0LjQyNiwxMjYuNzc3YzAsMTIuMjk4LTkuOTcsMjIuMjY4LTIyLjI2OCwyMi4yNjgNCgkJYy0xMi4yOTksMC0yMi4yNjktOS45Ny0yMi4yNjktMjIuMjY4YzAtMTIuMjk5LDkuOTctMjIuMjY4LDIyLjI2OS0yMi4yNjhDMTI0LjQ1NywxMDQuNTEsMTM0LjQyNiwxMTQuNDc5LDEzNC40MjYsMTI2Ljc3NyIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMDAuOTY1LDEyNi43NzdjMCwxMi4yOTgtOS45NywyMi4yNjgtMjIuMjY4LDIyLjI2OA0KCQljLTEyLjI5OSwwLTIyLjI2OS05Ljk3LTIyLjI2OS0yMi4yNjhjMC0xMi4yOTksOS45Ny0yMi4yNjgsMjIuMjY5LTIyLjI2OEMxOTAuOTk2LDEwNC41MSwyMDAuOTY1LDExNC40NzksMjAwLjk2NSwxMjYuNzc3Ii8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0ZGRkZGRiIgZD0iTTI2Ny41MDQsMTI2Ljc3N2MwLDEyLjI5OC05Ljk3LDIyLjI2OC0yMi4yNjgsMjIuMjY4DQoJCWMtMTIuMjk5LDAtMjIuMjY5LTkuOTctMjIuMjY5LTIyLjI2OGMwLTEyLjI5OSw5Ljk3LTIyLjI2OCwyMi4yNjktMjIuMjY4QzI1Ny41MzUsMTA0LjUxLDI2Ny41MDQsMTE0LjQ3OSwyNjcuNTA0LDEyNi43NzciLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjNEEwRDY2IiBkPSJNMzAwLjM3NSwwSDU3LjAyQzI1LjU4LDAsMCwyNS41NzksMCw1Ny4wMnYxMzYuMTUNCgkJYzAsMzEuNDQsMjUuNTgsNTcuMDIxLDU3LjAyLDU3LjAyMWgxMzAuMzc3bDg5LjcwNSw4OS43MDR2LTg5LjcwNGgyMy4yNzJjMzEuNDQsMCw1Ny4wMi0yNS41OCw1Ny4wMi01Ny4wMjFWNTcuMDINCgkJQzM1Ny4zOTQsMjUuNTc5LDMzMS44MTUsMCwzMDAuMzc1LDAgTTMyOC4zOTQsMTkzLjE3YzAsMTUuNDUtMTIuNTY5LDI4LjAyMS0yOC4wMiwyOC4wMjFoLTUyLjI3MnYyOXYxOS42OTNsLTE5LjY5My0xOS42OTNsLTI5LTI5DQoJCUg1Ny4wMmMtMTUuNDUsMC0yOC4wMi0xMi41Ny0yOC4wMi0yOC4wMjFWNTcuMDJDMjksNDEuNTY5LDQxLjU3LDI5LDU3LjAyLDI5aDI0My4zNTRjMTUuNDUsMCwyOC4wMiwxMi41NjksMjguMDIsMjguMDJWMTkzLjE3eiIvPg0KPC9nPg0KPC9zdmc+) no-repeat;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: -13px;
}

:not(.open) .new-message-button:hover {
    color: #fff;
}

 .new-message-content {
    height: 0;
    overflow: hidden;
}

.open .new-message-button,
.open .new-message-button:focus {
    background: 0;
    padding: 0;
    font-size: 20px;
    text-decoration: none;
    margin-bottom: 30px;
}

.open .new-message-button:focus:hover,
.open .new-message-button:hover {
    color: #472272;
}

.open .new-message-button::before,
.open .new-message-button:focus::before {
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMzU3IDM1NSIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDM1NyAzNTUiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGRlZnM+DQo8L2RlZnM+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB4PSIwIiB3aWR0aD0iMzU3LjM5NCIgaGVpZ2h0PSIzNTQuODk1Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZEMTAwIiBkPSJNMTM0LjQyNiwxMzQuNjczYzAsMTIuMjk5LTkuOTcsMjIuMjY4LTIyLjI2OCwyMi4yNjgNCgkJYy0xMi4yOTksMC0yMi4yNjktOS45NjktMjIuMjY5LTIyLjI2OGMwLTEyLjI5OCw5Ljk3LTIyLjI2OCwyMi4yNjktMjIuMjY4QzEyNC40NTcsMTEyLjQwNSwxMzQuNDI2LDEyMi4zNzUsMTM0LjQyNiwxMzQuNjczIi8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iI0ZGRDEwMCIgZD0iTTIwMC45NjUsMTM0LjY3M2MwLDEyLjI5OS05Ljk3LDIyLjI2OC0yMi4yNjgsMjIuMjY4DQoJCWMtMTIuMjk5LDAtMjIuMjY5LTkuOTY5LTIyLjI2OS0yMi4yNjhjMC0xMi4yOTgsOS45Ny0yMi4yNjgsMjIuMjY5LTIyLjI2OEMxOTAuOTk2LDExMi40MDUsMjAwLjk2NSwxMjIuMzc1LDIwMC45NjUsMTM0LjY3MyIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkQxMDAiIGQ9Ik0yNjcuNTA0LDEzNC42NzNjMCwxMi4yOTktOS45NywyMi4yNjgtMjIuMjY4LDIyLjI2OA0KCQljLTEyLjI5OSwwLTIyLjI2OS05Ljk2OS0yMi4yNjktMjIuMjY4YzAtMTIuMjk4LDkuOTctMjIuMjY4LDIyLjI2OS0yMi4yNjhDMjU3LjUzNSwxMTIuNDA1LDI2Ny41MDQsMTIyLjM3NSwyNjcuNTA0LDEzNC42NzMiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjNEEwRDY2IiBkPSJNMzAwLjM3NSwwSDU3LjAyQzI1LjU4LDAsMCwyNS41NzksMCw1Ny4wMnYxNTEuMTUNCgkJYzAsMzEuNDQsMjUuNTgsNTcuMDIxLDU3LjAyLDU3LjAyMWgxMzAuMzc3bDg5LjcwNSw4OS43MDR2LTg5LjcwNGgyMy4yNzJjMzEuNDQsMCw1Ny4wMi0yNS41OCw1Ny4wMi01Ny4wMjFWNTcuMDINCgkJQzM1Ny4zOTQsMjUuNTc5LDMzMS44MTUsMCwzMDAuMzc1LDAgTTMyOC4zOTQsMjA4LjE3YzAsMTUuNDUtMTIuNTY5LDI4LjAyMS0yOC4wMiwyOC4wMjFoLTIzLjI3MmgtMjl2Mjl2MTkuNjkzbC0xOS42OTMtMTkuNjkzDQoJCWwtMjktMjloLTM4LjEzOEg1Ny4wMmMtMTUuNDUsMC0yOC4wMi0xMi41Ny0yOC4wMi0yOC4wMjFWNTcuMDJDMjksNDEuNTY5LDQxLjU3LDI5LDU3LjAyLDI5aDI0My4zNTQNCgkJYzE1LjQ1LDAsMjguMDIsMTIuNTY5LDI4LjAyLDI4LjAyVjIwOC4xN3oiLz4NCjwvZz4NCjwvc3ZnPg==)
    no-repeat;
}

:not(.open) .new-message-close {
    display: none;
}
.open .new-message-close {
    display: block;
    position: absolute;
    right: 15px;
    top: 17px;
    border: 0;
    z-index: 10;
}

.open .new-message-content {
    height: 100%;
    width: 100%;
}

.open .new-message-content :not(label) {
    opacity: 1;
}

.open .new-message-content form {
    padding: 0;
}

.open .new-message-content select,
.open .new-message-content textarea {
    background-color: #f6f5f8;
    font-size: 14px;
    color: #666;
    line-height: normal;
}

.open .new-message-content select {
    background-position: 99% center;
}

.open .new-message-content textarea {
    padding-top: 10px;
    line-height: 18px;
    resize: none;
}

.open .new-message-content .form-group {
    margin-bottom: 11px;
}

@media screen and (max-width: 768px) {
    option, select {
        overflow: clip;
        text-overflow: ellipsis;
    }
    .new-message-box {
        width: 50%;
        max-width: 50%;
        height: 56px;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }

    .new-message-button {
        right: 0;
        bottom: 0;
        line-height: 56px;
        text-align: center;
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
        padding: 0;
    }

    .new-message-box.open {
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        z-index: 5000;
        overflow: auto;
        border-radius: 0;
        padding: 4rem;
    }

    .open .new-message-button,
    .open .new-message-button:focus {
        text-align: left;
        padding-left: 50px;
    }
}