/* CSS 

  CSS for PrintStation
  author: weei-peng ng
  history: 
    2025-08-00 - Port from GPActivation
	2025-08-20 - Cosmetic.
	
  Ref:
  https://www.justinmind.com/blog/inspiring-website-login-form-pages/
  
  Note:
  px for responsive.
  pt for printing, 
  
*/

html, body {
   height:100%;
   min-width:1344px;        /* Suppose you want minimum width of 1000px */
   width: auto !important;  /* Firefox will set width as auto */
   width:1360px;            /* As IE6 ignores !important it will set width as 1000px; */		
   background-color: #282a34;
   font-family:arial; 
   /* font-size: 100%; */
   /* vertical-align: middle; */
   /*no use margin:0px; */
}

.div_vspace {
  /*position: fixed; /* Set the navbar to fixed position */
  /*top: 0;  Position the navbar at the top of the page */
  width: 100%;
  height: 22pt;
  text-align: center;
  margin-top: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  /* background-color:gray; */
  /* margin-bottom: 1em;  1em; */
  /* no effect color: #ffffff; */
}

.div_title {
  /*position: fixed; /* Set the navbar to fixed position */
  /*top: 0;  Position the navbar at the top of the page */
  width: 100%;
  height: 24pt;
  text-align: center;
  margin-top: 0;
  padding-top: 0px;
  padding-bottom: 0px;
}


.div_cell_row {
  /*width: 100%;
  display: flex;
  */
  flex: 1;  /* occupy all available space */

  align-items: center;
  margin: auto;  /* suppose vertical-align center*/
  vertical-align: middle;
  height: 26pt;
  /* text-align: auto; no effect */ 
  margin-top: 0pt;
  padding-top: 0px;
  padding-bottom: 0px;
  /* background-color:blue; */
}


.div_cell_row_divider {
  height: 3pt;
  text-align: center;
  margin-top: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  /* background-color:blue; */
}

.div_cell_item {
  /*width: 100%;  /* do NOT set this (login) */
  height: 22pt; /* doesn't matter */
  float: left;
  display: flex;
  align-items: center; /* vertical-align: middle; */
  justify-content: flex-end;
  margin-bottom: 0pt;
  padding-right: 5pt;
  padding-top: 0px;
  padding-bottom: 0px;
  /* background-color:blue; */
  min-width: 70pt;
  /*margin: auto;  suppose vertical-align center*/
  /* margin-bottom: 1em; /* 1em; */
  /* no meaning color: #ffffff; */
}


.div_cell_item:last-child {
    float: none;
    /*margin-right: 0;*/
}

input.custom-input {
    width: 100%; /* added, otherwise for multiple columns input, only occupy part */
    box-sizing: border-box;
    padding: 5px;
    font-family:arial; 
    font-size: 14pt;
}

.custom-input {
    flex: 1; /* occupy all available space */
    border: 1px solid #76787d;
    border-radius: 5px;
    padding: 3pt;
    color: white;
    background-color: black;
    transition: color 0.3s, background-color 0.3s;
}
        
.custom-input:focus {
	color: black;
    background-color: white;
}

.gbutton {
    border-radius: 5px;
    background: #adafb1;
    /* border: 1px solid #f2f2f2; */
    border: 1px solid #c6c6c6;
    color: #282c34;
    cursor: default;
    font-size: 16px;
    /* font-weight: bold; */
    /*width: 100px;*/
    padding: 0 16px;
    height:26pt;
}

.input_authen
{ 
    width:6cm;
    font-family:arial; 
    font-size: 100%;
    border-right: #000000 0px solid;
    border-top: rgba(255,255,255,.5) 0.5vmin solid;
    border-left: #000000 0px solid;
    border-bottom: #000000 1px solid;
   
}