html, body { font-family: Tahoma; font-size: 13px; height: 92.5%; margin-top: 6px; padding: 0 }
table, select, textarea { font-family: Tahoma; font-size: 12px; }
body { background: rgb(2,0,36); background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(121,121,126,1) 0%, rgba(86,87,98,1) 75%); color: #650000 }

#wrapper { width: 1280px; margin: 0 auto; border: 0 solid red;
	position: relative; /* needed for footer positioning*/
	height: auto !important; /* real browsers */
	min-height: 100%; /* real browsers */ 
	padding-bottom: 100px; background: #fff; margin-bottom: 18px; border-radius: 8px; box-shadow: 0px 0px 35px rgba(0, 0, 0, .4) }

header { background: #f00 }
header span { display: block; width: 1280px; height: 170px }

footer {  position: absolute; width: 1232px; bottom: 0; /* stick to bottom */ 
	background: #ddd; padding: 24px; text-align: center }
  
#main { padding: 12px 24px 24px 24px }

.center-align { text-align: center }
.left-align { text-align: left }
.right-align { text-align: right }

button.disabled,
a.disabled { opacity: 0.5; pointer-events: none; cursor: default; }

i.record { cursor: pointer; color: #eee; border-radius: 4px; display: inline-block; padding: 4px 3px 4px 6px; 
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .4); text-shadow: 1px 1px 0px #2f6627; }
i.record:hover { opacity: .7 }
i.archived { color: #880000; cursor: auto; background-color: #eee; }
i.archived:hover { opacity: 1.0 } 
i.edit { background-color: #4CAF50 }
i.delete { background-color: #cf2c23 }
i.blue { background-color: #0049ff }
i.orange { background-color: #ff4900 }
i.gray { background-color: #bbb; cursor: inherit }

.table { table-layout: fixed; border-collapse: collapse; border-bottom: 0 solid #ececec; border-left: 0 solid #ececec; width: 100% }
.htable tr:first-child:hover,
.table tr:not(:last-child) td { border-bottom: thin solid #e5e5e5; }
.table tr td:not(:last-child),
.table tr th { padding: 10px 8px; vertical-align: top; }
.table tr th { padding: 8px 8px; border-bottom: 3px solid #555; background: #ccc; text-align: left; vertical-align: bottom }
.table tr th.center, 
.table tr td.center { text-align: center } 
.table tr td:last-child { vertical-align: top; padding-top: 5px }
.htable tr td:last-child,
.table tr:last-child td { padding: 8px 8px; }
.table:not(.htable) tr:last-child td { background: #ddd }
.table tr td.right, .table tr th.right { text-align: right }
.table tr td.center, .table tr th.center { text-align: center }
.table tr td.left, .table tr th.left { text-align: left }

/* highlight row when hovered */ 
.table tr:not(:first-child):not(:last-child):hover { -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, .4);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .4); background-color: #f0f0f0; z-index: 2 } 

.table:not(.htable) tr:not(:last-child):not(.tr):nth-child(odd):hover td { background-color: #f0f0f0; z-index: 2 }

/* alternate table row background */
.table:not(.htable) tr:not(:last-child):not(.tr):nth-child(odd) td { background: #f5f5f5; }
        
/* hide action buttons */
.table > tbody > tr > td.action > div { display: none; text-align: right; z-index: 2; padding: 1px 12px 0 0 }

/* show action buttons when hovered */
.table tr.action div { display:none }
.table > tbody > tr:hover > td.action div { display: block }

.htable tr td { padding: 8px 8px; vertical-align: top }
.htable { border: thin solid #e0e0e0 }
.htable tr td:first-child { font-weight: 600 }

.form div label { border: 0 solid red; float:left; display: block; width: 140px; text-align: right; margin-right: 12px; margin-top: 7px }
.form90 div label { width: 90px }
.form100 div label { width: 100px }
.form120 div label { width: 120px }
.form div { position: relative; border: 0 solid red; margin-bottom: 8px; vertical-align: top; }
.form div [type=checkbox] { height: 26px; }
.table tr td select,
.form div textarea, 
.form div [type=text], 
.form div [type=password],
.form div select { width: 520px; padding: 8px 12px;	display: inline-block; border: thin solid #ccc; border-radius: 4px; box-sizing: border-box; }
.form div [type=text].text-icon { padding-left: 32px; }
.form div select { padding: 7px 12px; }
.form div button { box-shadow:inset 0px 32px 0px -15px #56B95A;
	background-color: #4CAF50; color: white; padding: 8px 13px; border: none; border-radius: 4px; cursor: pointer;
	
	box-shadow: 2px 2px 9px -4px rgba(0,0,0,0.79);
-webkit-box-shadow: 2px 2px 9px -4px rgba(0,0,0,0.79);
-moz-box-shadow: 2px 2px 9px -4px rgba(0,0,0,0.79);
	
	/*-webkit-box-shadow: 1px 1px 2px 1px rgba(21, 21, 21, .2);
	-moz-box-shadow: 1px 1px 2px 1px rgba(21, 21, 21, .2);
	box-shadow: 1px 1px 2px 1px rgba(21, 21, 21, .2); */
	text-shadow: .07em .07em 0px #2f6627; }
.form div button.orange { background-color: #ff5500; } 
.form div button.orange:hover { box-shadow:inset 0px 32px 0px -15px #ff5100; background-color: #EA4E00; }
.form div button.blue { background-color: #0055ff; } 
.form div button.blue:hover { box-shadow:inset 0px 32px 0px -15px #0051ff; background-color: #004BE2; }
.form div button.red { background-color: #ff0000; } 
.form div button.red:hover { box-shadow:inset 0px 32px 0px -15px #ff2000; background-color: #ee0000; } 
.form div button:hover { background-color: #45A049; box-shadow:inset 0px 32px 0px -15px #4EA952; }
.form div button:disabled { color: #aaa; cursor: auto } 
.form div label.left { text-align: left }

#main h1 { font-weight: 600 }
#main h1 span { font-weight: normal; font-size: .6em }

.dot { position:absolute; top: 12px; border:0 solid red; }
.dot span { display: inline-block; border-radius: 10px; margin-left: 6px }
.bg-red span { width: 8px; height: 8px; background: red }

/* begin popups */

.modal2, .modal3,
.modal { display: none; position: fixed; z-index: 1; padding-top: 50px; left: 0; top: 0px;
    width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); 
}

.popup { background-color: #ddd; margin: auto; padding: 18px 36px; border: 0 solid Red; display: inline-block;
	border-radius: 6px; text-align: left; box-shadow: 0 0 30px rgba(0, 0, 0, .4); 
	position: relative;top: 35%;left:50%;transform: translate(-50%, -50%); }
.popup input,.popup select { font-size: .90em }
.popup .title { background-color: #870000; margin: -18px -37px 24px -37px; padding: 12px 18px;
	font-size: 1.3em; color: #fff; font-weight: 700; border-top-left-radius: 6px; border-top-right-radius: 6px }
.popup .close { font-size: 1.3em; font-weight: bold;  
	margin-top: -5px; float: right; cursor: pointer; border: 0 solid blue; }
.popup .close:hover { opacity: 0.6 } 

.close-msg:hover, .close-msg:focus 
.close:hover, .close:focus { color: #ccc; text-decoration: none; cursor: pointer;  }

/* begin pagination */

.pagination { display: inline-block; margin-top: 18px }
.pagination a { float: left; display: block; border-top: thin solid #ddd; 
	border-left: thin solid #ddd; border-bottom: thin solid #ddd; 
	border-radius: 0px; 
	padding: 7px 0px 0 0; text-decoration: none; margin: 0 0px 0 0; font-size: .9em;
	transition: background-color .4s; color: #555; width: 32px; height: 24px; }
.pagination a:hover:not(.ellipsis):not(.active) { background-color: #ddd; font-weight: bold }
.pagination a.active { background: green; color: #fff }
.pagination a.lellipsis { border: 0; border-left : thin solid #ddd; }
.pagination a.rellipsis { border: 0; border-left : thin solid #ddd; } 
.pagination a:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px }
.pagination a:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px;
	border-right: thin solid #ddd; }

/* end pagination */

/* make default cursor for 'a' tag */  
.stop { cursor: default }
	
.underline:hover { text-decoration: underline; }
		
.checkbox-bipolar-input {
  display: none;
}

.checkbox-bipolar-input:checked + label .checkbox-bipolar:after {
	left: 12px;
    right: 2px;
}

.checkbox-bipolar {
  margin-right: 18px;
  width: 24px;
  height: 14px;
  border-radius: 8px;
  border: 1px solid #6A1AD0;
  display: inline-block;
  position: relative;
}

.checkbox-bipolar:after {
    content: '';
    display: block;
    position: absolute;
    background: #6A1AD0;
    left: 2px;
    top: 2px;
    bottom: 2px;
    right: 12px;
    border-radius: 8px;
    transition: all 0.1s;
}

.table .tr { background-color: #d6d6d6; box-shadow: 0px 2px 4px rgba(0, 0, 0, .4) }
.table .tr:not(:first-child):hover td { background-color: #dedede }
.ch-bp { border: 1px solid orange }
.ch-bp:after { background: orange }
.nocheck { display: none }

.chkbox-c {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.45em;
  height: 1.45em;
  border: .19em solid currentColor;
  border-radius: 0;
  transform: translateY(-0.065em);

  display: grid;
  place-content: center;
}

.chkbox-c::before {
  content: "";
  width: 0.74em;
  height: 0.74em;
  /* clip-path: circle(50% at 50% 50%); */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 10ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.chkbox-c:checked::before {
  transform: scale(1);
}

.chkbox-c:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

.text-icon-search { background-image: url(search.png); }
.text-icon {
	background-position: 8px,center;
	background-repeat: no-repeat;
	background-size: 18px; 
}

#container { display: block; position: relative; } 
.ui-autocomplete { position: absolute; max-height: 320px; overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden; }
.ui-autocomplete .ui-menu-item a { padding: 0px 8px; font-family: tahoma }

.nav-dot { border: 0 solid red; display: inline-block; width: 15px; height: 15px;
	border-radius: 10px; margin-left: 2px; background-color: #e5e5e5 }
.nav-dot:hover { cursor: pointer; background-color: #ccc }