.device-serial-title {
    text-transform: uppercase;
    font-weight: bold;
}

.device-serial-form {
    display: flex;
    align-items: flex-start;
}

.device-serial-help-icon {
    width: 20px;
    height: 20px;
}

.device-serial-input-group {
    margin: 0 1rem;
}

.device-serial-form .btn {
    margin: 0 5px;
}

.device-serial-form input[type="text"] {
    border: 0.1rem solid;
    border-color: var(--grey_30);
    border-radius: 0.4rem;
    padding: 0.8rem;
    margin: 0 0.8rem !important;
    height: 40px;
    background: no-repeat calc(100% - 10px) center;
    background-size: 20px 20px;
}

.device-serial-form input[type="text"].device-serial-input.error {
    border-color: var(--red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23dc3545'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.device-serial-form input[type="text"].device-serial-input.success {
    border-color: var(--green);
    color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2328a745'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.device-serial-form input[type="text"].device-serial-input:read-only {
    background-color: var(--green-10);
}


.device-serial-response {
    font-size: 0.75em;
    text-align: left;
    margin-left: 160px;
}

.device-serial-response.error {
    color: var(--red);
}