@font-face {
  font-family: 'title';
  src: url('fonts/Lato-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'droid';
  src: url('fonts/FjallaOne-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'opensans';
  src: url('fonts/Gudea-Regular.ttf');
  font-weight: normal;
  font-style: normal;
}
:root {
    --color: #002154;
}


.main {display: flex;
    width: 100%;
     }
.main img {width:100%}
/*
orange : #F3504E
brown : #7D1030
red : #E73F34
gray : #6C6D71
*/

body {
    -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body::-webkit-scrollbar {
  display: none;
}
* {outline:none;font-family:opensans;box-sizing:border-box;}
table {border-collapse:collapse}
.top {background:var(--color);color:white;width:100%;position:fixed;top:0;padding:10px;font-size:1.2em;font-family:title}
.setting {width:100%;padding:5%}
.mylabel {margin-top:15px;margin-bottom:4px;font-weight:bold;font-size:10pt;color:blue}
.phead {background:var(--color);color:white;line-height:40px;font-size:16pt}
.thead {font-family:title;font-size:1.5em;background:var(--color);color:white;width:100%;border:none;padding:10px}
#login {font-family:title;font-size:1.2em;background:var(--color);color:white;width:100%;border:none;padding:7px;margin-top:10px;border-radius:5px}
td {font-family:opensans;padding:5px;font-size:1.1em}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select {width:100%;font-size:1em;padding:5px;border-radius:3px;border:none;border-bottom:solid silver 1px}
.menu {width:60%;position:absolute;top:0;left:-60%;background:#f0f0f0;z-index:100;border:solid #ddd 2px;height:100%}
.menubtn {width:100%;background:yellow;border:none;padding:10px}
.caption {display:block;width:100%;padding:10px 0px 3px 0px;font-size:10pt;color:blue}
#toast {
display:none;
background:green;
font-size:12pt;
color:white;
padding:10px;
text-align:center;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, 0);
z-index:10000;
}

#popup {
	position:fixed;
	top:0px;
	left:0px;
	z-index:11000;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.3);
	display:none;
 
}


#window {
padding:10px;
width:90%;
position:fixed;
border:solid #ddd 1px;
box-shadow:0px 0px 10px gray;
top:30%;
left:50%;
transform: translate(-50%, 0);
z-index:12000;
background:white;
   border-radius:10px;
}

#toast td {color:white}
.title {font-family:title;font-size:1.5em;width:100%;padding:10px}
.bottom {border-bottom:solid #ddd 1px}
.res {width:100%;text-align:center;font-size:5dp}
.response {width:100%;text-align:center;font-family:droid;font-size:14pt}
.regi {width:80%;border:solid #ddd 1px}
.menu a {font-weight:bold;color:var(--color);display:block;line-height:30px;width:100%;border:solid white 1px;border-width:1px 0px 1px 0px;margin-top:-1px;text-decoration:none;padding:5px;cursor:hand}
.menu a:hover {background:#ddd;color:var(--color)}
.data {width:100%;padding:5px;box-sizing:padding-box}
option {padding:15px;}
.head {background:#ddd;font-size:10pt;text-align:center}
.icon {margin-right:10px;font-size:30px;color:red}
.list {display:block;border-bottom:solid #ddd 1px;line-height:30px;padding-left:10px;text-decoration:none;text-transform:capitalize;font-size:1.3em}    
 a.numlist {box-shadow:0px 0px 2px silver;display:inline-block;border:solid #ddd 1px;line-height:70px;text-decoration:none;text-transform:capitalize;font-size:2em;width:80px;margin:10px;text-align:center;border-radius:50%;border:solid var(--color) 2px}
 a.numlist:active {text-decoration:none;background:var(--color);color:white;box-shadow:0px 0px 10px silver}
 a.numlist:hover {text-decoration:none;background:var(--color);color:white}
a.list:hover {text-decoration:none;background:#f0f0f0;text-transform:capitalize}

#header
{
position: absolute;
            top: 0;
            left: 0;
            right: 0;
    text-align:center;
    display:block;
    background: var(--color);
    box-sizing:border-box;
}
#content
{
    position: fixed;
            top: 50px;
            bottom: 0;
            left: 0;
            right: 0;
    overflow:auto;
    padding:10px;
    box-sizing:border-box;

  
}
#footer
{
 position: fixed;
      height: 45px;
            bottom: 0;
            left: 0;
           width:100%;
     text-align:center;
    display:block;
    background: var(--color);
    box-sizing:border-box;
}
button {width:80%;border:none;border-radius:5px;line-height:30px;font-size:11pt;font-family:verdana}
.btn-green {color:white;background:green;border:solid white 1px}
.btn-orange {color:white;background:#e8590c}
.btn-blue {color:white;background:steelblue}
.btn-red {color:white;background:red}
#footer button {width:80%;background:white;color:var(--color);border:none;border-radius:5px;padding:5px;}
#popbot button {width:48%;background:var(--color);color:white;border:none;border-radius:5px;padding:5px}
.active {background:var(--color);color:white}
.tbl {margin:10px;text-align:center;display:inline-block;width:80px;line-height:70px;border-radius:50%;background:rgba(0,255,0,0.5);border:solid green 4px;text-align:center;font-size:12pt;cursor:hand}
.used {background:rgba(255,0,0,0.5);border:solid red 2px;}
.myform {
	width:100%;
	padding:5%;
}
.myform input,select,textarea {width:100%;padding:3px}
.myform .caption {font-weight:bold;padding:3px;margin-top:5px}
.bottom {width:100%;background:#ddd;height:50px;position:absolute;bottom:0;display:none}
.trbottom {border-bottom:solid #ddd 1px}
#exp input {width:100%}
  
.outer {width:100%;height:100%;position:relative}
.wind {width:90%;height:400px;margin:auto}
.btnqty {display:grid;grid-template-columns: auto auto auto;padding: 10px;}
.setting input {border:solid silver 1px;border-radius:5px;padding:2%;width:100%}
.inputicon {position:absolute;top:15px;left:10px;font-size:28pt}
.banner {color:var(--color);font-size:3em;text-align:center}
.imgback {background:var(--color);height:auto;width:90%;margin:0 auto}
.grid {width:100%;}
.chip {padding:4px 2px;background:#ddd;color:black;display:inline-block;text-align:center;border-radius:5px}
.grid {display:grid;grid-template-columns: auto auto auto auto;grid-gap: 5px;background-color: vwhite;color:white;padding: 10px;}
input[type=date] {line-height:10px}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color);
  width:100%;
  color: white; }
  
  .users {background:var(--color);color:white;width:100%;text-align:center;font-weight:bold;font-size:5vw;padding:20px}
  .popup {
      width:100%;
      box-sizing:border-box;
      padding:20px;
      position:absolute;
      left:0px;
      background:#f5f5f5;
      bottom:-1000px;
  }
  .popup_inner {
      background:white;
      padding:10px;
      box-shadow:0px 0px 5px gray;
  }
  
  .erow {
      padding:10px;background:#f5f5f5;border:solid silver 1px;font-size:12pt;margin-top:-1px;
  }
  .edetails td {
      font-size:10pt;
     
  }
  .edetails {display:none;border:solid silver 1px;margin-top:-1px;margin-bottom:2px; padding:5px;}
  .estlist td {font-size:10pt}
  .search {border:solid #ddd 2px !important;border-radius:20px !important;font-size:8pt;padding:4px}
  
  #contextMenu {
  position: absolute;
  display: none;
}
.required {border-bottom:solid red 1px}

#contextMenu a {
display:block;
width:100%;
color:black;
text-decoration:none;
padding:7px;
}

#contextMenu a:hover {background:black;color:white}

.estlist tr:hover {background:#e5e5e5;}

.wrap{
  width:90%;
  display:block;
  margin:0 auto;
}

input[type=radio] { display:none; } /* to hide the checkbox itself */
input[type=radio] + label {display: inline-block;padding:5px 10px;border:solid gray 1px;}
input[type=radio] + label {background:white;color:black} /* unchecked icon f204 f00d */
input[type=radio]:checked + label { background:gray;color:white } /* checked icon f205 f00c*/

.trhead {background:royalblue;color:white;width:100%}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor:no-drop;
}
.font-red {color:red}
.rt {background:#f5f5f5;margin:10px 0px 10px 0px;padding:10px}
.rtable td {padding:2px;font-size:10pt}
hr {color:#f5f5f5}

.pop_out {width:100%;height:100%;border:solid gray 1px;background:rgba(0,0,0,0.5);z-index:5;position:relative;display:none}
.pop_body {width:97%;height:97%;position:absolute;top:0px;left:0px;bottom:0px;right:0px;margin:auto;background:white;padding:2%}
.pop_top {width:100%;background:#ddd;padding:10px}
.pop_content {max-height:90%;overflow:auto}
.jobcard td {font-size:10pt;padding:2px}
a.btn {display:inline-block;float:left;margin-right:10px}
.btnicon {padding:5px 0px;width:10%;margin-right:15px}
.btnicon .fa {color:white;font-size:14pt}
.bubble {font-size:9pt;color:white;background:red;margin-left:-15px;padding:2px 5px;border-radius:10px;font-weight:bold;width:20px;height:20px}