/* =======================================================
  #FORM - EMBEDDED FLEX        DRY: don't repeat yourself

  #LEARN - https://www.youtube.com/watch?v=k0bQmGu27Hk

======================================================= */

.form_embedded_wrapper {
    font-family: Raleway;
    width: 100%;
    padding: 0.5rem;
    overflow:hidden;
    /* background: rgba( 55, 155, 195, 0.25); */
    border-radius: 10px;
    border: dotted 0px darkgreen;
}

.form_block {
    display: flex;
    flex-direction: column;
    width: 96%;
    padding: 0.25rem;
    gap: 0.25rem;
    box-sizing: border-box;
}

.form_block>* {
    padding: 0;
    flex-grow: 1;
    text-align: left;
}


.form_block_topik {
    display: block;
    position:absolute;
    right: -220px;
    border: dotted 4px red;
}


.form_block label {
    display: none;
    padding: 16px 8px 3px;
    margin-left: 0;
    font-size: 14px;
}

.form_block label.show {
    display: inline-block;
}

.form_block input {
    width: 100%;
    margin: 2px;
    padding: 8px;
    font-size: 14px;
    /* background: none; */
    background: rgba( 255, 255, 255, 0.8);
    /* border-width: 0 0 2px 0; */
    border-width: 2px;
    border-style: solid;
    border-color: rgba(55, 55, 55, 0.05);
    border-radius: 10px;
}

.form_block input[text] ::placeholder {
    color: red;
}

.form_block textarea {
    font-family: Raleway;
    width: 100%;
    margin: 2px;
    padding: 8px;
    font-size: 14px;
    line-height: 1.4;
    /* background: none; */
    background: rgba( 255, 255, 255, 0.8);
    border-width: 2px;
    border-style: solid;
    border-color: rgba(55, 55, 55, 0.05);
    border-radius: 10px;
}

.form_block #firstname {
    width: 100%;
}

.form_block #lastname {
    width: 100%;
}

.form_block_submit {
    padding: 24px;
    align-items: center;
}