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
- needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; right: 0; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content .hr{ border-bottom: 1px solid #dddddd; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { background-color: #00899a; } /* Circular Slider Code */ .circular-throttle{ margin: 0 5px; } /* Vertical Slider Code */ .vertical-throttle{ width: 64px; position: relative; outline: 0 none; height: 280px; } .progress-numb{ height: 34px; width: 100%; text-align: center; margin-top: 20px; font-size: 32px; color: #777; } .ui-widget.ui-widget-content { border: 5px solid #d3d3d3; box-shadow: 0 0 2px 0px #fff; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 1px solid #d3d3d3; font-weight: normal; color: #555555; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background: #cecece; box-shadow: 0 0 3px #8c8c8c inset; } /* support: IE8 - See #6727 */ .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { filter: inherit; } .ui-slider-horizontal { height: .8em; } .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: 28px; height: 250px; border: 5px solid #d3d3d3; border-radius: 16px; margin: 0 auto; background: rgba(133,226,125,1); background-image: -moz-linear-gradient(180deg, rgba(255,0,0,1) 10%, rgba(251,126,0,1) 25%, rgba(250,207,0,1) 40%, rgba(133,226,125,1) 60%, rgba(0,245,249,1) 80%, rgba(0,67,255,1) 100%); background-image: -webkit-linear-gradient(180deg, rgba(255,0,0,1) 10%, rgba(251,126,0,1) 25%, rgba(250,207,0,1) 40%, rgba(133,226,125,1) 60%, rgba(0,245,249,1) 80%, rgba(0,67,255,1) 100%); background-image: linear-gradient(180deg, rgba(255,0,0,1) 10%, rgba(251,126,0,1) 25%, rgba(250,207,0,1) 40%, rgba(133,226,125,1) 60%, rgba(0,245,249,1) 80%, rgba(0,67,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000",endColorstr="#0043ff",GradientType=1); } .ui-slider-vertical .ui-slider-handle { position: absolute; z-index: 2; width: 32px; height: 32px; cursor: default; -ms-touch-action: none; touch-action: none; border: 1px solid #f9f9f9; left: -7px; margin-left: 0; margin-bottom: -.6em; background-color: #efefef; background: linear-gradient(to bottom,#efefef, #e2e2e2); border-radius: 100%; cursor: move; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } .ui-widget-header{ background: #dddddd; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min { bottom: 0; } .ui-slider-vertical .ui-slider-range-max { top: 0; } /* Add Loco Styles */ .loco-list-container{ position: relative; font-size: 13px; } .loco-list-ctrl{ padding:0; } .light-hr{ border-bottom: none; border-color: #ddd; } .loco-list-ctrl input{ width: 100%; margin: 0; padding: 5px 8px; border-radius: 4px; background: #ffffff; border: 1px solid #c1c1c1; box-sizing: border-box; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; height: 34px; } .formbuilder-button .btn.add-loco-btn{ font-size: 12px; padding: 9px 7px; margin-top: -1px; } .formbuilder-button .btn.acq-loco-btn{ padding: 7px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-top: -1px; } .btn.acq-loco-btn .icon-circle-right{ vertical-align: middle; padding-bottom: 1px; display: inline-block; font-size: 17px; } .btn.acq-loco-btn .icon-cross{ font-size: 12px; padding: 3px; display: inline-block; } /* .add-loco-form:before{ content: ""; display: inline-block; position: absolute; top: -8px; left: 15px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid #ffffff; } */ .add-loco-form{ width: 380px; display: none; background-color: #ffffff; position: absolute; left: 50%; top: 100px; padding: 10px 20px; box-sizing: border-box; border-radius: 5px; z-index: 1000; box-shadow: 0 0 6px 1px #686868; margin-left: -170px; } .add-loco-form .add-loco-head{ font-size: 16px; margin-top: 10px; padding: 0; } .add-loco-form .close{ margin-right: -15px; margin-top: -1px; } .add-loco-form .row{ margin: 10px 0; } #loco-form .fn-modal-header.row{ padding: 0; margin: 0; } .add-loco-form .row label{ padding-left: 0; font-size: 14px; } .add-loco-form .row input{ padding: 5px 6px; } .add-select{ height: 30px; padding-left: 5px; } .ui-autocomplete.res-list{ max-height: 230px; overflow-y: auto; overflow-x: hidden; height: auto; background: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 4px; border: 1px solid #c1c1c1; margin-top: 1px; padding: 5px 0; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper{ padding: 5px 15px; padding-bottom: 8px; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper p{ margin-top: 5px; margin-bottom: 3px; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper .pill{ margin: 0 10px; display: inline-block; vertical-align: middle; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper .pill.wrap{ max-width:80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper .pill:first-child{ margin-left: 0; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper .ac-loco-name{ color: #007a8a; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper.ui-state-active .ac-loco-name{ color: #ffffff; } .ui-autocomplete.res-list .ui-menu-item .ui-menu-item-wrapper.ui-state-active{ border: 1px solid #00A3B9; background: #00A3B9; } .ui-autocomplete.res-list-sm{ max-height: 200px; overflow-y: auto; overflow-x: hidden; z-index: 1010; background: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 4px; border: 1px solid #c1c1c1; margin-top: 1px; padding: 5px 0; } .ui-autocomplete.res-list-sm .ui-menu-item .ui-menu-item-wrapper{ padding: 10px 15px; } .ui-autocomplete.res-list-sm .ui-menu-item .ui-menu-item-wrapper p{ margin: 0px; font-size: 14px; } .ui-autocomplete.res-list-sm .ui-menu-item .ui-menu-item-wrapper.ui-state-active{ border: 1px solid #00A3B9; background: #00A3B9; } .settings-group .sno{ width: 6%; padding-left: 0; padding-top: 1.6%; text-align: center; } .loco-details p.ac-loco-name{ color: #007a8a; font-size: 18px; line-height: 18px; } .loco-details{ padding: 0; } .loco-details p{ margin: 6px 0; } .loco-details .sub-text p{ margin-bottom: 0; font-size: 14px; text-align: center; background: beige; border-radius: 5px; padding: 3px; } .asst-map .nd, .loco-details .sub-text .nd{ font-size: 13px; background-color: #dddddd; color: #bbbbbb; } .loco-details .cv-num{ text-align: right; } .loco-details .cv-num small{ opacity: 0.6; font-size: 0.9m; vertical-align: text-bottom; display: inline-block; padding-right: 5px; } .settings-group .asst-map{ padding-top: 1.3%; font-size: 14px; float: right; } .settings-group .asst-map p{ margin: 4px 0; } .settings-group .asst-map .muted{ opacity: 0.6; font-size: 0.75em; vertical-align: text-bottom; display: inline-block; } .settings-heading .option-btns > div{ padding: 0; padding-left: 10px; } .maps-content span.pill{ background-color: gray; padding: 3px 10px; border-radius: 10px; color: #fff; font-size: 13px; } .maps-content span.pill.red{ background: #d00000; } .maps-content span.pill.green{ background: #00643a; } /* Common Styles*/ .width100{ width: 100%; } .flex-center{ display: flex; justify-content: center; align-items: center; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 1200px) { .column-4.mobile-100, .column-6.mobile-100, .mobile-100 { width: 100%; } .field-button-fn.column-2p5{ width: 25%; } .mobile-margin-top20{ margin-top: 20px; } .fn-modal{ position: absolute; width: 90%; top: 5%; left: 5%; } .flex-center{ display: block; } }