/* HTML Entity Encoding CSS */

#htmlEntEnc {
    margin: 6px auto 0 auto;
    /* border: 1px solid #eeeeee; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#htmlEntEnc textarea {
    max-width: 600px;
    width:100%;  height: 200px;
    resize: none;
}

#encSettings {
    margin: 6px 0 0 0;
    max-width: 640px;
    width:100%;
    /* border: 1px solid #eeeeee; */
}

#settingAreaUl {
    margin: 0; padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    /* border: 1px solid #eeeeee; */
}

#settingAreaUl li {
    margin: 2px; padding: 0;
    list-style-type: none;
    width: 116px;
    height: 28px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#settingAreaUl li .encCheckBox {
    margin: 0 0 0 6px; padding: 0;
    width: 16px; height: 16px;
}

#settingAreaUl li .arrowR {
    margin: 0; padding: 0;
    width: 12px; height: 12px;
}

#htmlEntEnc .arrowB {
    margin: 0 0 6px 0; padding: 0;
    width: 128px; height: 32px;
}

#settingAreaUl li .encL {
    margin: 0; padding: 0; /* 0 4px 0 4px; */
    height: 22px;
    /* border-radius: 4px; */
    /* background-color: #ffffff; */
    font-size: 11pt;
    line-height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#settingAreaUl li .encR {
    margin: 0 6px 0 0; padding: 0; /* 0 4px 0 4px; */
    height: 22px;
    /* border-radius: 4px; */
    /* background-color: #ffffff; */
    font-size: 11pt;
    line-height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

#htmlEntEnc .submitButton {
    margin: 8px auto 8px auto; padding: 0.25em 0.5em 0.25em 0.5em;
    width: 224px;
}

#notes {
    margin: 6px 0 6px 0;
    width: 100%;
    max-width: 600px;
    color: #555555;
    text-align: left;
}

#notes p {
    margin: 0; padding: 0.1em;
}