.wrap-contact-templates {
    padding: 10px;
}

.wrap-contact-templates .contact-templates .add_template {
    display: flex;
    justify-content: flex-end;
    padding: 1em;
}

#template-edit-form {
    display: flex;
    flex-direction: column;
}

#table-templates  td{
    text-align: left;
    padding: 0rem 1rem;
}


#table-templates thead {
    background: gray;
}
#table-templates th {
    padding: 0.5rem 1rem;
}

#table-templates td.action, #table-templates th.action{
    width: 5%;
}

#table-templates td.type, #table-templates th.type{
    width: 10%;
}


#table-templates tbody tr:nth-child(even) {
    background: #f0f0f1;
}
#table-templates tbody tr:nth-child(odd) {
    background: #efefef;
}

#table-templates div:not(:first-child) {
    margin-bottom: 1em;
}


#template-edit-form  table thead{
    display: flex;
    flex-direction: column;
}
#template-edit-form div:not(:first-child) {
    margin-bottom: 1em;
}

.template-types .variables-block {
    display: flex;
}

.template-types .variables-block .variable{
    padding: 0.2rem 0.3rem;
    color: #e9fe9dbd;
    background: #333333eb;
    border-radius: 5px;
    margin: 0 0.2rem;
}
.template-types .variables-block .variable:hover{
    cursor: pointer;
    background: #333333d4;
}


.template-types .save {
    float: right;
}

#template-actions span:hover{
    cursor: pointer;
}
#template-actions .template_edit:hover{
    color:#3273dc
}
#template-actions .template_delete:hover{
    color:#ff3860
}