/****************************************************************************************************
    external encoder options
****************************************************************************************************/

.externalEncoderOptions {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    background: #00000050;
    font-size: 0;
    text-align: left;
}

body[isLIVE="1"] .externalEncoderOptions,
body[isLIVE="1"] .firecast-admin-encoder
{
    display: none;
}

.externalEncoderOptions .item-title {
    color: #cccccc;
    text-shadow: 1px 1px 0 #00000050;
    font-size: 12px;
}

.externalEncoderOptions .break {
    height: 6px;
}

.externalEncoderOptions input[type="text"] {
    --height: 34px;
    display: inline-block;
    width: 100%;
    width: calc(100% - (40px + 3px + 2px));
    height: var(--height);
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 12px;
    background: #ffffff80;
    border: 1px solid #00000050;
    vertical-align: top;
}

.externalEncoderOptions button[name="copy-encoder-detail"] {
    --height: 34px;
    display: inline-block;
    border-radius: 4px;
    width: 40px;
    min-width: auto;
    height: var(--height);
    margin-left: 3px;
    padding: 0;
    background: #00ACFF;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: var(--height);
    text-shadow: none;
    text-transform: uppercase;
}

.externalEncoderOptions button[name="copy-encoder-detail"] .material-icons {
    font-size: 24px;
    position: relative;
    top: 4px;
}