styles.css

The complete code for styles.css used in Creating the Index.html page is:

:root {

 --app-height: 720px;

}

html {

  height: 100%;

  width: 100%;

  margin: 0px;

}

body {

  height: 100%;

  font-family: sans-serif;

  background-color: #ffffff;

  margin-top: 0px;

  margin-left: auto;

  margin-right: auto;

  margin-bottom: 0px;

  padding: 0px;

  max-width: 920px;

  max-height: 100vh;

  max-height: var(--app-height);

  box-sizing: border-box;

}

.fullbox {

  min-height: 100%;

  display: block;

}

/*------- header ------*/

.fullbox > .header > .title {

  padding: 10pt;

  padding-top: 20pt;

  padding-left: 12pt;

  margin: 0;

  width: 100%;

  max-width: 100%;

  text-align: left;

  background-color: #000068;

  font-family: arial, sans-serif;

  font-size: 15pt;

  color: #FFFFFF;

  box-sizing: border-box;

}

.fullbox > .header > .row {

  margin: 0px;

  margin-top: 1px;

  display: block;

  width: 100%;

}

.fullbox > .header > .row > .item {

  font-size: 10pt;

  background-color: #0066CC;

  color: #FFFFFF;

  text-decoration: none;

  white-space: nowrap;

  text-align: center;

  cursor: pointer;

  margin: 0pt;

  border-left: solid 1px #FFFFFF;

  padding-top: 5pt;

  padding-bottom: 5pt;

  display: inline-block;

  box-sizing: border-box;

}

  .fullbox > .header > .row > .item:hover {

      background-color: #000068;

   }

.fullbox > .header > .row > .item[disabled='disabled'],

.fullbox > .header > .row > .item[disabled='disabled']:hover {

  background-color: #0066CC;

  color: #CCCCCC;

  cursor: default;

}

.fullbox > .header > .row > .item:nth-child(1) {

  border-left: 0px;

}

.fullbox > .header > .row > .item.selected,

.fullbox > .header > .row > .item.selected:hover {

  background-color: #CC0000;

  cursor: default;

}

/*------- main ------*/

.fullbox > .main {

  height: calc(100vh - 171px);

  height: calc(var(--app-height) - 171px);

  display: block;

  overflow: auto;

}

.fullbox.nomenu > .main {

  height: calc(100vh - 113px);

  height: calc(var(--app-height) - 113px);

}

/*------- footer ------*/

.fullbox > .footer {

  padding: 4px;

  margin: 0;

  width: 100%;

  text-align: right;

  background-color: #000068;

  color: #FFFFFF;

  font-size: 8pt;

  box-sizing: border-box;

}

.fullbox > .footer span {

  background-color: #F0F0F0;

  color: #000068;

  font-size: 10pt;

  padding-top: 5pt;

  padding-bottom: 5pt;

  padding-left: 10pt;

  padding-right: 10pt;

  margin: 5pt;

  border-radius: 2pt;

  display: inline-block;

  box-sizing: inherit;

  cursor: pointer;

  box-shadow: 1px 1px 3px rgba(0,0,0,.25);

}

.fullbox > .footer span:hover {

  background-color: #F8F8F8;

  color: black;

}

.fullbox > .footer span[disabled='disabled'],

.fullbox > .footer span[disabled='disabled']:hover {

  background-color: rgba(255, 255, 255, .55);

  color: #333333;

  cursor: default;

}

/*------------------end page structure-------------------*/

.floatbox {

  position: absolute;

  display: inline-block;

  padding: 20pt;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

  border: none;

}

.verticalTable {

  width: auto;

  text-align: left;

  font-size: 10pt;

  color: #000068;

  border: none;

  padding: 15pt;

  margin-right: auto;

  margin-left: auto;

  box-sizing: border-box;

}

.verticalTable tr > * > * {

  margin: 3pt;

}

.verticalTable input[type='text'],

.verticalTable input[type='password'] {

  box-sizing: border-box;

  border-radius: 2px;

  border-width: 1px;

  border-color: #C0C0C0;

  border-style: solid;

  padding: 5pt;

  outline-width: 1px;

}

.verticalTable input[type='button'] {

  cursor: pointer;

  padding: 5pt;

  padding-left: 10pt;

  padding-right: 10pt;

  margin-left: 5pt;

  margin-right: 5pt;

}

*::-ms-backdrop, .verticalTable {

  margin: auto;

  position: relative;

  min-height: 1px;

}

.screenmsg {

  font-size: 8pt;

}

.nobreak {

  white-space: nowrap;

}

/*-------------------------------------------------------*/

.hidden {

  visibility: hidden;

}

.center {

  text-align: center !important;

}

/*-------- loading --------*/

#divLoading

{

  display: none;

}

#divLoading.show

{

  display: block;

  position: fixed;

  z-index: 100;

  background-image: url('../images/wait.gif');

  background-repeat: no-repeat;

  background-position: center;

  left: 0;

  bottom: 0;

  right: 0;

  top: 0;

}

#loadinggif.show

{

  left: 50%;

  top: 50%;

  position: absolute;

  z-index: 101;

  width: 32px;

  height: 32px;

  margin-left: -16px;

  margin-top: -16px;

}

.fullwidth {

  width: 100%;

  padding-left: 30pt;

  padding-right: 30pt;

  box-sizing: border-box;

}

.button {

  border-radius: 2px;

  border: solid 1px #C0C0C0;

  padding: 5pt;

  outline-width: 1px;

  background-color: #F0F0F0;

  color: #000000;

  font-size: 10pt;

  padding-left: 10pt;

  padding-right: 10pt;

  margin: 5pt;

  display: inline-block;

  box-sizing: inherit;

  cursor: pointer;

}

.button:hover {

  background-color: #F8F8F8;

}

@media screen and (max-height: 600px) {

  .fullbox {

      min-height: 600px;

   }

}