input.form-control, select.form-control, textarea.form-control { width: 100%; padding: 5px 8px; border: 1px solid #bbbbbb; border-radius: 4px; background: #ffffff; } input.form-control:focus, select.form-control:focus, textarea.form-control:focus, input.form-control:active, select.form-control:active, textarea.form-control:active{ border: 1px solid #00A3B9; outline-color: #00A3B9; } label.formbuilder-text-label, label.formbuilder-select-label, label.formbuilder-textarea-label, label.formbuilder-file-label { font-size: 13px; padding: 4px 0; display: inline-block; font-weight:400; color: #00353D; } .details-panel{ margin-top: 8px; } .server-button{ padding-top: 26px; text-align: right; } .con-ind{ display: inline-block; height: 10px; width: 10px; background: red; border-radius: 100%; margin-right: 5px; margin-left: -8px; } .con-ind.connected{ background: greenyellow; } .formbuilder-button .btn, .server-button .btn, .fn-button .btn{ background: #00A3B9; padding: 4px 12px; width: 100%; color: #ffffff; border: 1px solid #007a8a; box-shadow: 0px 0px 1px #9e9e9e; border-radius: 4px; letter-spacing:0.5; text-align: center; cursor: pointer; } .formbuilder-button .btn:active, .server-button .btn:active, .fn-button .btn:active{ background: #00899a; border: 1px solid #282828; box-shadow: inset 0 0 3px #282828; } .formbuilder-button .btn, .server-button .btn{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .server-button .btn{ width:180px; padding: 8px; } .loco-cv-text{ padding-left: 0; } .acquire-wrap{ padding-top: 24px; padding-left: 0; position: relative; } .button-acquire{ width:100px; } #fn-wrapper{ display: inline-grid; grid-template-columns: 25% 25% 25% 25%; width: 100%; } .fn-button.field-button-fn{ text-align: center; padding: 8px; display: flex; justify-content: center; } .formbuilder-button.field-button-fn .btn, .save-fn{ background: #00A3B9; padding: 4px 12px; width: 80%; margin: 2%; color: #ffffff; border: 1px solid #0093a7; box-shadow: 0px 1px 2px #9e9e9e; border-radius: 4px; letter-spacing: 0.5; outline: none; border-bottom-width: 2px; } .fn-button.field-button-fn button[aria-pressed="true"].btn, .save-fn:active{ background: #00899a; border: 1px solid #282828; box-shadow: inset 0 0 3px #282828; } .fn-button.field-button-fn .btn.press{ background: #4CAF50; border: 1px solid #3e8e41; box-shadow: 0px 1px 4px #9e9e9e; } .fn-button.field-button-fn button[aria-pressed="true"].btn.press{ background: #3e8e41; border: 1px solid #282828; box-shadow: inset 0 0 3px #282828; } .btn-grey{ background: #dbdbdb; border: 1px solid #a8a8a8; box-shadow: 0px 0px 1px #9e9e9e; border-radius: 4px; font-size: 14px; padding: 8px; outline: none; line-height: 15px; height: 33px; } .btn.edit-labels:active, .btn.load-labels:active{ box-shadow: none; outline: none; } .select-control{ padding: 5px 3px; vertical-align: middle; border-radius: 5px; border: 1px solid #ddd; padding-bottom: 6px; outline: none; cursor: pointer; } .select-xl{ padding: 8px; } .sp-controller{ font-size: 14px; } .theme-section{ margin-right: 10px; font-size: 14px; width: 150px; float: right; } .select-map{ width: 100px; } .btn-hide{ position: absolute; left: 5px; top: -9px; font-size: 13px; color: #9a9a9a; outline: none; padding: 7px; vertical-align: middle; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border: 1px solid #9a9a9a; box-shadow: 0px 1px 2px 0px #989898; border-top-width: 0; cursor: pointer; line-height: 0; } .formbuilder-required { color: #da0000; } .rs-control .rs-range-color { background-color: #009fd8; } .rs-control .rs-path-color { background-color: #919191; border: none; } .rs-control .rs-handle { background-color: #575555; } .rs-control .rs-bg-color { background-color: #e3e3e3; } .rs-tooltip.rs-tooltip-text{ top: auto; bottom: 12px; font-size: 32px; color: #777; width: 112px; text-align: center; } .rendered-form div.throttle-container{ min-height: 360px; display: flex; align-items: center; justify-content: right; } .throttlewrap{ display: flex; justify-content: center; align-items: center; height: 340px; } .functionKeys{ padding: 10px 24px; } .em-btn{ justify-content: center; margin: 0px auto; text-align: center; } .em-btn button.em-stop{ width: 44px; height: 44px; border-radius: 24px; color: #d60000; font-size: 18px; padding: 9px; outline: none; cursor: pointer; background-color: #c7c7c7; border: 4px solid #ddd; box-shadow: 0 4px 4px #5d5d5d; } .em-btn button.em-stop:active{ box-shadow: none; } .dir-toggle{ height: 219px; background-color: #cecece; width: 48px; margin: 8px auto; border-radius: 100px; -moz-box-shadow: inset 0 0 5px #000000; -webkit-box-shadow: inset 0 0 5px #000000; box-shadow: inset 0 0 5px #000000; position: relative; border: 4px solid #d0d0d0; } .dir-toggle:before{ content: ""; left:0; z-index: 0; background:#ddd; position: absolute; padding: 10px; width: 20px; height: 50px; border: none; border-radius: 80px; cursor: pointer; outline: none; -webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; box-shadow: 0 4px 4px #5d5d5d; } .dir-toggle.forward:before{ top:0; background: #00ac4d; } .dir-toggle.stop:before{ top: 70px; background: #da0000; } .dir-toggle.backward:before{ top: 141px; background: #00ac4d; } .dir-btn{ position: relative; padding: 10px; width: 40px; height: 70px; border: none; border-radius: 80px; cursor: pointer; outline: none; background: transparent; } .dir-btn:active{ outline: none; } .dir-btn span{ display: inline-block; height: 16px; width:16px; } .dir-btn span.stop{ background: #4d4d4d; } .dir-btn span.arrow-up, .dir-btn span.arrow-down{ color: #4d4d4d; } .dir-btn span.arrow-down{ margin-top: 10px; } .dir-btn.selected span.stop{ background: #ffffff; } .dir-btn.selected span.arrow-up, .dir-btn.selected span.arrow-down{ color: #ffffff; } .btn-speed{ border-width: 0; outline: none; border-radius: 30px; cursor: pointer; font-size: 20px; width: 44px; height: 44px; background-color: #c7c7c7; vertical-align: middle; text-align: center; border: 4px solid #ddd; box-shadow: 0 4px 4px #5d5d5d; } .btn-speed:hover{ box-shadow: none; color: #FFFFFF; } .flexx{ display: flex; justify-content: center; align-items: center; } .flexx.btns{ display: flex; justify-content: center; align-items: center; height: 340px; max-width: 48px; margin: 0 5px; } .log-msg{ height: 80px; padding: 12px; background-color: #fff2e1; color: darkblue; margin: 5px 15px 15px; border-radius: 5px; border: 1px solid #eac9a5; box-shadow: inset 0px 0px 7px #f3d9bc; font-size: 9px; overflow: auto; } .note-msg{ padding: 10px 10px; text-align: right; font-size: 12px; height: 47px; } .pow-status{ display: inline-block; padding: 15px 5px; vertical-align: middle; } .power-slider{ padding: 0 7px; font-size: 13px; } .switch { position: relative; display: inline-block; width: 57px; height: 27px; vertical-align: middle; } .switch input { opacity: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #bbbbbb; -webkit-transition: .4s; transition: .4s; border-radius: 34px; box-shadow: 1px 1px rgba(255,255,255,0.8); } .slider:before { position: absolute; content: ""; height: 19px; width: 20px; left: 4px; bottom: 3px; background-color: rgb(253, 253, 253); border: 1px solid rgb(220, 220, 220); -webkit-transition: .4s; transition: .4s; border-radius: 50%; box-shadow: 0px 0px 1px 1px #e2e2e2; } .power-slider .slider{ background-color: #00a349; } input:checked + .slider { background-color: #ff0000; box-shadow: 1px 1px rgba(255,255,255,0.8); } input:focus + .slider { box-shadow: 0 0 1px #2196F3; box-shadow: 1px 1px rgba(255,255,255,0.8); } input:checked + .slider:before { -webkit-transform: translateX(28px); -ms-transform: translateX(28px); transform: translateX(28px); } .console-slider { margin-bottom: 8px; } .slider.debug-slider:before{ height: 13px; width: 13px; left: 4px; bottom: 3px; } .debug.switch { position: relative; display: inline-block; width: 40px; height: 20px; vertical-align: middle; } .debug-status{ font-size: 14px; vertical-align: middle; padding-top: 3px; display: inline-block; } input:checked + .slider.debug-slider:before{ -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); } input:checked + .slider.debug-slider{ background-color: #00A3B9; } .fn-modal{ position: absolute; z-index: 1000; background: #ebebeb; height: 76%; width: 64%; top: 7%; left: 18%; box-shadow: 0px 0px 10px 0px #747474; border-radius: 5px; display: none; min-height: 520px; } .fn-modal-header{ height: 40px; border-bottom: 1px solid #ddd; } .fn-modal-content{ height: 84%; padding: 2%; box-sizing: border-box; overflow-y: auto; width: 100%; font-size: 13px; } .fn-modal-footer{ border-top: 1px solid #ddd; text-align: center; } .fn-heading{ float: left; margin: 11px; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; padding: 5px 15px; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } .save-fn{ margin: 1% 0; width: 30%; } .header-row{ padding-bottom: 10px; border-bottom: 1px solid #bdbdbd; margin-bottom: 8px; } .header-col{ font-weight: 600; box-sizing: border-box; padding:5px 17px; } .edit-row{ padding: 3px; border-bottom: 1px solid #ddd; } .edit-row > div{ box-sizing: border-box; } .fn-radio, .fn-chkbox{ padding-top: 8px; } .fn-radio input[type="radio"], .fn-chkbox input[type="checkbox"], .fn-radio label, .fn-chkbox label{ vertical-align: middle; display: inline-block; } .fn-radio label, .fn-chkbox label{ padding-top: 3px; } .func-title{ text-transform: uppercase; padding-top: 12px; } .fn-input{ color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; border: 1px solid #ccc; padding: 5px 8px; transition: 0.4s; background: #f8f8f8; } .fn-input:active, .fn-input:focus{ background: #FFFFFF; border: 1px solid #00A3B9; outline: none; } /* Style The Dropdown Button */ .dropbtn { background-color: #00A3B9; color: white; padding: 6px 10px; font-size: 13px; border: none; cursor: pointer; vertical-align: middle; border-radius: 4px; } /* The container