body,html{background-color:#222629;font-size:16px;font-family:'Titillium Web',sans-serif}body{padding-top:30px;width:100%;max-width:800px;margin:auto;color:#fff9e0}p{margin:5px 0}a{text-decoration:none;color:unset;cursor:pointer}h1,h2,h3,h4{color:#fff9e0}.flex-row{display:flex;flex-direction:row;justify-content:center;align-items:center}.flex-col{display:flex;flex-direction:column;justify-content:center;align-items:center}.flex-space-between{justify-content:space-between}.flex-space-evenly{justify-content:space-evenly}.btn,button,input[type=button]{padding:5px 20px;margin:5px;background-color:#86c232;color:#222629;border:2px solid #86c232;border-radius:20px;font-weight:700;outline:0;cursor:pointer;text-align:center;display:inline-flex;justify-content:center;align-items:center}.btn:hover,button:hover,input[type=button]:hover{background-color:#2d2f31;color:#86c232}.btn-sm{padding:5px}.btn-red{background-color:#af473c;border-color:#af473c;color:#222629}.btn-red:hover{color:#af473c;background-color:#222629}.btn-marine{background-color:#58bc90;border-color:#015249;color:#015249}.btn-marine:hover{background-color:#015249;border-color:#58bc90;color:#58bc90}.disabled,button:disabled{background-color:#6b6e70!important;color:#3c4245!important;cursor:not-allowed!important;border-color:#3c4245}input{padding:5px}select{padding:3px;font-size:1em;background:#eae9e9}select.styled{color:#222629;background:rgba(255,255,255,.3);border:none;border-bottom:3px solid #fff;width:150px}.component{background:#2d2f31;width:100%;margin:12px auto auto;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:8px}.component h1,.component h2,.component h3,.component h4{text-align:center;color:#fff9e0}.CRUD-box{display:grid;grid-template-rows:auto;grid-template-areas:"c" "m";min-width:300px;max-width:100%;border:2px solid #3c3c3c;background-color:#222629;border-radius:8px}.CRUD-box .content{grid-area:c;padding:10px;color:#fff9e0}.CRUD-box .menu{grid-area:m;display:flex;flex-direction:column;justify-items:flex-start}.CRUD-box-status{grid-template-columns:26px auto;grid-template-areas:"s c" "s m"}.CRUD-box-status .status{grid-area:s}.CRUD-box .content h1,.CRUD-box .content h2,.CRUD-box .content h3,.CRUD-box .content h4{text-align:center;color:inherit;margin:10px auto}.CRUD-box .content.hover{cursor:pointer;text-align:center;border:3px solid #61892f}.CRUD-box .content.hover:hover{background-color:#61892f;color:#222629}.CRUD-box .menu .menu-item{padding:0;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.2s}.CRUD-box .menu .menu-item span{margin:0 5px}.CRUD-box .menu .menu-item .btn,.CRUD-box .menu .menu-item button{padding:8px;width:100%}.CRUD-box.hover{cursor:pointer;border:3px solid #61892f!important}.CRUD-box.hover .content{text-align:center}.CRUD-box.hover:hover{background-color:#61892f;color:#222629}.border-container{border:2px solid #616f39;padding:5px;margin:5px;display:flex}.border-container .content{background:#616f39;width:100%;padding:5px}.selected{border:3px solid #86c232!important}label{margin:8px 5px 0}input,option,select,textarea{background-color:#2d2f31;border:none;border-bottom:2px solid #86c232;color:#86c232;outline:0;margin:5px}input:hover,option:focus,option:hover,select:hover{background-color:#3c3c3c}span.active{padding:5px;border-radius:3px;background:#616f39;color:#86c232;text-shadow:#ff0 0 0 7px}span.inactive{padding:5px;border-radius:3px;background:#560d0d;color:#af473c;text-shadow:red 0 0 7px}.led-container{display:flex;justify-items:center;align-content:center;margin:10px}.led-container .led{width:8px;height:8px;border-radius:8px;background-color:#222629}.led-container .led.green{background-color:#86c232;box-shadow:#86c232 0 0 10px 1px,inset red 0 0 2px 0}.led-container .led.red{background-color:red;box-shadow:red 0 0 10px 1px,inset #ff4500 0 0 2px 0}.led-container.lg{margin:25px}.led-container.lg .led{width:15px;height:15px;border-radius:15px}.led-container.lg .led.green{background-color:#86c232;box-shadow:#86c232 0 0 17px 1px,inset red 0 0 4px 0}.led-container.lg .led.red{background-color:red;box-shadow:red 0 0 17px 1px,inset #ff4500 0 0 4px 0}.led-row{display:flex;flex-direction:row;align-items:center}.deep-button{padding:2px 2px 2px 5px;margin:5px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;background-color:#86c232;color:#222629;border:2px solid #86c232;border-radius:20px;font-weight:700;outline:0;cursor:pointer;text-align:center;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.deep-button .inner-buttons{display:flex;flex-direction:row}.deep-button .inner-button{background-color:#3c3c3c;color:#86c232;display:flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:15px;margin-left:3px}.deep-button .inner-button:hover{background-color:#2d2f31;color:#86c232}.badge-container{position:relative}.badge-container span.badge{color:#fff9e0;background-color:#af473c;display:inline-flex;justify-content:center;align-items:center;border-radius:30px}.badge-container span.badge-absolute{position:absolute;top:20%;right:-15%;font-size:.9em;width:25px;height:25px}.badge-container span.badge-inline{font-size:.9em;width:20px;height:20px}span.rover{margin:5px;padding:3px;border-radius:5px;background-color:#004a2f;display:inline-flex}span.rover-button{margin:5px;padding:3px;border-radius:5px;background-color:#fff9e0;color:#222629;display:inline-flex;cursor:pointer}@media (min-width:400px){.CRUD-box{grid-template-areas:"c c c m"}.CRUD-box-status{grid-template-rows:auto;grid-template-columns:26px auto;grid-template-areas:"s c c c m"}.CRUD-box-content-only{grid-template-areas:"c"}}@media (min-width:580px) and (max-width:800px){.component{margin-left:60px;width:calc(100% - 60px)}}