#msg {
    --msg__background: hsl(209, 18%, 66%);
    --msg__general-color: #f0ffff;
    --msg__general-color-border: #778899;

    --msg__box-width: 100%; /* šírka jednotiek */
    --msg__box-padding: 8px;
    --msg__textarea-width: 100%; /* '--msg__box-width' - 2x'--msg__box-padding' - '4px' */

    --msg__box-margin-bottom: 16px;
}
.msg {
    width: 100%;
    background: var(--msg__background);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* padding: 1em; */
}
.msg__form {
    width: 100%;
}
.msg__box {
    width: var(--msg__box-width);
    padding: var(--msg__box-padding);
}

/* I N P U T */

.msg__div_input {
    /* border: 1px solid green; */
    position: relative;
    height: 44px;
    line-height: 44px;
    margin-bottom: var(--msg__box-margin-bottom);
}

.msg__input {
    position: absolute;
    width: 100%;
    outline: none;
    font-size: 1.1em;
    padding: 0 15px;
    line-height: 40px;
    border-radius: 8px;
    border: 1px solid var(--msg__general-color-border);
    border-bottom: 1px solid var(--msg__general-color);
    background: transparent;
    transition: 0.1s ease;
    z-index: 20;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
}
.msg__label_input {
    position: absolute;
    font-size: 0.8em;
    color: var(--msg__general-color);
    padding: 0 12px;
    margin: 0 12px;
    transition: 0.2s ease;
}
.msg__input:focus,
.msg__input:valid {
    color: var(--msg__general-color);
    border: 1px solid var(--msg__general-color);
    border-radius: 8px;
}
.msg__input:focus + .msg__label_input,
.msg__input:valid + .msg__label_input {
    color: var(--msg__general-color);
    height: 16px;
    line-height: 16px;
    padding: 0 6px;
    transform: translate(-8px, -8px) scale(0.88);
    z-index: 20;
    background: var(--msg__background);
}

/* T E X T A R E A */

.msg__div_textarea {
    /* border: 1px solid green; */
    position: relative;
    height: 120px;
    line-height: 44px;
    margin-bottom: var(--msg__box-margin-bottom);
}

.msg__textarea {
    position: absolute;
    width: var(--msg__textarea-width);
    height: 120px;
    outline: none;
    font-size: 1.1em;
    padding: 16px 15px;
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid var(--msg__general-color-border);
    border-bottom: 1px solid var(--msg__general-color);
    background: transparent;
    transition: 0.1s ease;
    z-index: 20;
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    resize: vertical;
}

.msg__label_textarea {
    position: absolute;
    font-size: 0.8em;
    color: var(--msg__general-color);
    padding: 0 12px;
    margin: 0 12px;
    transition: 0.2s ease;
}

.msg__textarea:focus,
.msg__textarea:valid {
    color: var(--msg__general-color);
    border: 1px solid var(--msg__general-color);
    border-radius: 8px;
}
.msg__textarea:focus + .msg__label_textarea,
.msg__textarea:valid + .msg__label_textarea {
    color: var(--msg__general-color);
    height: 16px;
    line-height: 16px;
    padding: 0 6px;
    transform: translate(-8px, -8px) scale(0.88);
    z-index: 20;
    background: var(--msg__background);
}

/* B U T T O N */

.msg__div_button {
    /* border: 1px solid green; */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.msg__button {
    color: var(--msg__general-color);
    padding: 16px 32px;
    border-radius: 50px;
    cursor: pointer;
    border: 0;
    border: 1px solid var(--msg__general-color-border);
    box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    transition: all 0.5s ease;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.msg__button:hover {
  letter-spacing: 1px;
  background: var(--msg__general-color);
  color: var(--msg__general-color-border);
  border: 1px solid var(--msg__general-color);
  box-shadow: var(--msg__general-color) 0px 7px 29px 0px;
}

.msg__button:active {
  letter-spacing: 1px;
  background: var(--msg__general-color);
  color: #f0ffff;
  border: 1px solid var(--msg__general-color);
  box-shadow: var(--msg__general-color) 0px 3px 14px 0px;
  /* transform: translateY(5px); */
  transition: 100ms;
}

@media (max-width: 199px) {
    .msg__button-text {display: none;}
}
@media (max-width: 159px) {
    .msg {display: none;}
}