* { box-sizing: border-box; } body { background-color: lightblue; font-family: Arial, Helvetica, sans-serif; } h1 { margin: 8px; } h3 { margin: 6px; } button { cursor: pointer; } button:hover, button:focus { color: red; cursor: pointer; } .container { padding: 16px; } .outline { border: 3px solid #f1f1f1; } .center { text-align: center; } .button { font-size: 16px; color: white; text-align: center; padding: 8px 16px; text-decoration: none; border: 1px solid white; margin: 3px 5px; } .button:hover, .button:focus { background-color: #ddd; color: black; cursor: pointer; } .check-yes:before { color: green; content: "\2713"; } .check-no:before { color: crimson; content: "\2717"; } form.as-table { display: table; width: 100%; } form.as-table div { display: table-row; } form.as-table label { display: table-cell; white-space: nowrap; text-align: right; vertical-align: middle; padding-right: 10px; width: 1px; } form.as-table input, form.as-table select, form.as-table textarea { display: table-cell; width: 100%; margin: 5px; padding: 5px; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding-top: 60px; } .modal-content { position: relative; background-color: #fefefe; margin: 5px auto; border: 3px solid #f1f1f1; width: max(300px, 60%); overflow: auto; } .modal-content .closebtn { position: absolute; right: 25px; top: 0; color: white; font-size: 35px; font-weight: bold; } .modal-content .closebtn:hover, .modal-content .closebtn:focus { color: red; cursor: pointer; } .modal-title { background-color: navy; color: white; top: 0; right: 25px; font-size: 35px; padding-left: 10px; } .form-list-entry { font-size: 20px; display: block; padding : 10px; background-color: pink; } .form-list-entry:hover, .form-list-entry:focus { color: white; background-color: red; font-weight: bold; cursor: pointer; } .animate-zoom { animation: animatezoom 0.6s } /*/ @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} }*/ @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } .animate-slide { animation: animateslide 0.6s } /*/ @-webkit-keyframes animateslide { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} }*/ @keyframes animateslide { from {transform: scale(0, 1)} to {transform: scale(1)} } /**************************************************************************************************************** * Login form controls * * Note that regular form styling applies as well. ****************************************************************************************************************/ div.login.modal-content { max-width: 500px; background-color: teal; } form.login { padding: 15px; } label.login { color: white; } input.login { padding: 12px 20px; margin: 8px 0; border: 1px solid #ccc; box-sizing: border-box; background-color: white; } button.login { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } body.app-body { position: fixed; height: 100vh; width: 100vw; margin: 0; overflow: hidden; } div.app-container { display: table; position: fixed; width: 100%; height: 100%; } div.app-header-row { display: table-row; } div.app-body-row { display: table-row; width: 100%; height: 100%; } div.app-footer-row { display: table-row; } div.app-body-wrapper { position: relative; width: 100%; height: 100%; } div.app-body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; } .app-block { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; overflow: hidden; } .app-scrollbox { overflow: auto; width: 100%; height: 100%; } body.page-body { width: 100%; margin: 0; } div.page-header { width: 100%; } div.page-body { width: 100%; } div.page-footer { position: fixed; bottom: 0; width: 100%; } .header { overflow: hidden; background-color: #f1f1f1; color: navy; padding: 6px; text-align: center; background-image: url('/lib/aq-header.jpg'); background-repeat: no-repeat; background-size: contain; } .row { display: block; } .row:after { content: ""; display: table; clear: both; } .column { float: left; padding: 8px; position: relative; } .scroll-x { overflow-x: auto; } .scroll-y { overflow-y: auto; } .topnav { overflow: hidden; background-color: #333; color: white; font-family: Arial, Helvetica, sans-serif; padding: 0 10px; } .topnav-caption { display: block; text-align: center; height: 100%; vertical-align: middle; font-size: 24px; margin: 6px; } .topnav a { float: left; font-size: 16px; color: white; text-align: center; padding: 8px 16px; text-decoration: none; border: 1px solid white; margin: 3px 5px; } .topnav a:hover { background-color: #ddd; color: black; } .footer { overflow: hidden; background-color: #333; color: white; text-align: center; width: 100%; font-size: 20px; font-family: Arial, Helvetica, sans-serif; vertical-align: middle; padding: 0 10px; } .footer a { float: left; font-size: 14px; color: white; text-align: center; padding: 6px 14px; text-decoration: none; border: 1px solid white; margin: 3px 5px; } .footer a:hover { background-color: #ddd; color: black; } .sidenav { display: none; height: 100%; width: 250px; position: fixed; z-index: 1; top: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav-left { left: 0; } .sidenav-right { right: 0; } .sidenav span { position: absolute; top: 10px; left: 10px; width: 100%; font-size: 25px; color: white; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 22px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 30px; } .sidenav a { font-size: 14px; } } .sidenav a.opt-true:before { color: green; content: "\2713"; } .sidenav a.opt-false:before { color: crimson; content: "\2717"; } .radio-list { font-size: 20px; display: block; padding : 10px; background-color: white; } .radio-list li { display: block; border: 1px solid black; padding: 5px 20px; background-color: pink; } .radio-list li:hover { color: white; background-color: red; cursor: pointer; } .radio-list li.selected { color: white; background-color: magenta; } .radio-list-h { display: block; padding : 10px; background-color: white; } .radio-list-h li { display: inline; border: 1px solid black; padding-right: 20px; } .radio-list-h li:hover { color: white; background-color: red; cursor: pointer; } .radio-list-h li.selected { color: white; background-color: magenta; } .dragbar-v { width: 8px; border: 0px; background-color: blue; cursor: ew-resize; position: absolute; top: 0px; right: 0px; bottom: 0px; } .grid-container { display: grid; } .grid-container>* { margin: 4px 5px; padding: 2px 5px; min-width: 1px; } .grid-container label { min-width: auto; text-align: right; white-space: nowrap; align-self: center; } table.numbered-rows { counter-reset: rowNumber; } table.numbered-rows tr > td:first-child { counter-increment: rowNumber; text-align: center; } table.numbered-rows tr > td:first-child:after { content: counter(rowNumber); min-width: 1em; margin-right: 0.5em; }