.header-container{width:100%;max-width:450px;margin:20px auto;padding:20px;background-color:#fff;box-shadow:0 0 10px #0000001a;border-radius:10px;display:flex;flex-direction:column;align-items:center}.header{text-align:center}.header-title{margin:0 0 5px;font-size:2em;color:#343a40}.header-subtitle{margin:0;font-size:1.2em;color:#6c757d}.header-radio-group{margin-top:10px;display:flex;justify-content:center}.header-radio-label{margin-right:15px;font-size:1em;color:#343a40}.header-radio-input{margin-right:5px}body,html{margin:0;padding:0;height:100%;width:100%;font-family:Arial,sans-serif;background-color:#f0f0f0}#root{display:flex;flex-direction:column;align-items:center}.Dropdown-root{position:relative}.Dropdown-control{position:relative;overflow:hidden;background-color:#fff;border:1px solid #ccc;border-radius:2px;box-sizing:border-box;color:#333;cursor:default;outline:none;padding:8px 52px 8px 10px;transition:all .2s ease}.Dropdown-control:hover{box-shadow:0 1px #0000000f}.Dropdown-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 0;content:" ";display:block;height:0;margin-top:-ceil(2.5);position:absolute;right:10px;top:14px;width:0}.is-open .Dropdown-arrow{border-color:transparent transparent #999;border-width:0 5px 5px}.Dropdown-menu{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;box-sizing:border-box;margin-top:-1px;max-height:200px;overflow-y:auto;position:absolute;top:100%;width:100%;z-index:1000;-webkit-overflow-scrolling:touch}.Dropdown-menu .Dropdown-group>.Dropdown-title{padding:8px 10px;color:#333;font-weight:700;text-transform:capitalize}.Dropdown-option{box-sizing:border-box;color:#333c;cursor:pointer;display:block;padding:8px 10px}.Dropdown-option:last-child{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.Dropdown-option:hover,.Dropdown-option.is-selected{background-color:#f2f9fc;color:#333}.Dropdown-noresults{box-sizing:border-box;color:#ccc;cursor:default;display:block;padding:8px 10px}form{display:flex;flex-direction:column;align-items:center}.record-label{margin-right:20px}.record-input{text-align:center}.record-input.error{border:1px solid red}.field-group{margin-bottom:10px}.button-container{margin-top:20px;display:flex;justify-content:center;width:100%;margin-bottom:20px}.submitBtn{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.submitBtn:hover{background-color:#0056b3}.error-messages{margin-top:20px;justify-content:center}.error{color:red;margin:5px 0}.reset-button{padding:10px 20px;background-color:red;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-left:10px}.reset-button:hover{background-color:#8b0000}.dropdown{margin-bottom:20px}.frames-container{display:flex;flex-direction:column;align-items:center;margin-top:10px;transition:all .3s ease-in-out}.frame-separator{width:100%;max-width:800px;margin:20px 0;border-bottom:5px solid #dee2e6;display:flex;justify-content:center}.frames-header-label{max-width:300px;text-align:center}.frames-p-label{margin-left:30px;text-align:center}.frames{display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px}.frame{display:flex;align-items:center;margin-bottom:10px;width:100%;flex-wrap:wrap}.frame-label{margin-right:10px;min-width:50px}.frame-field{display:flex;align-items:center;margin-bottom:5px}.field-label{margin-right:5px}.frame-input{text-align:center;width:50px;margin-right:5px}.generate-button-container{display:flex;justify-content:center;margin-top:20px;width:100%}.generate-message-button,.clear-button,.encode-button{padding:10px 20px;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-top:10px}.generate-message-button{background-color:#007bff}.generate-message-button:hover{background-color:#0056b3}.clear-button{background-color:red;margin-left:10px}.clear-button:hover{background-color:#8b0000}.encode-button{background-color:green;margin-left:10px}.encode-button:hover{background-color:#006400}.message-text-area{width:100%;max-width:800px;height:100px;margin:10px 0}.shift-left .frames{align-items:flex-start}