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

/* ********************** */
/* ** Default Settings ** */
/* ********************** */

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

/*
Color:      59C45C;  Jakin ID Logo Green
Color:      1CAE67;  Jakin ID Green
Color:      000000;  Jakin ID Black
color:      F7931D;  ACTAtek Oranage
color:      003366;  ACTAtek Blue
color:      A2C6EC;  Light Blue
color:      F6CC99;  Light Orange
color:      EFEFEF;  Light Gray
*/

:root
{
	--main-header-bkgcolor: #1CAE67;  /* var(--main-header-bkgcolor, #1CAE67); darker green tone, #1CAE67 #59C45C */
	--main-menu-bkgcolor: #1CAE67;  /* var(--main-menu-bkgcolor, #1CAE67); darker green tone */
	--menu-content-bkgcolor: #8EC670;  /* var(--menu-content-bkgcolor, #8EC670); light green tone */
	--header-bkgcolor: #000001;  /* var(--header-bkgcolor, black); black */
	--action-bkgcolor: #000002;  /* var(--action-bkgcolor, black); black */
	--boxcontent-bkcolor:#e6e9de; /* var(--boxcontent-bkcolor, #e6e9de); #e6e9de */
}

body
{
    background:             #e6e9de; /* #b6b7bc; */
    font-size:              .80em;
    font-weight:			600;
    font-family:            "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
    margin:                 0px;
    padding:                0px;
    color:                  black; /* #696969; */
    overflow-x:             hidden;
}

.MainHeaderLink a:link, a:visited
{
	color:					white;
}

a:link, a:visited
{
    color:                  #034af3;
}

a:hover
{
    color:                  green; /* #F7931D; */
    text-decoration:        underline;
}

a:active
{
    color:                  #034af3;
}

p
{
    margin-bottom:          10px;
    line-height:            1.6em;
}

hr
{
    clear:                  left;
}

select
{
    height:22px;
}
/* ------------------------------------------------------------------------------------------------------------------------ */

/* ********************* */
/* ** Header Settings ** */
/* ********************* */

/* ------------------------------------------------------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6
{
    font-size:              1.5em;
    color:                  black; /* #666666; */
    font-variant:           small-caps;
    text-transform:         none;
    font-weight:            200;
    margin-bottom:          0px;
}

h1
{
    font-size:              1.6em;
    padding-bottom:         0px;
    margin-bottom:          0px;
}

h2
{
    font-variant:           normal;
    font-size:              1.5em;
    font-weight:            600;
}

h3
{
    font-size:              1.2em;
}

h4
{
    font-size:              1.1em;
}

h5, h6
{
    font-size:              1em;
}

/* This rule styles <h1> and <h2> tags that are the first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
    margin-top:             0px;
}

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

/* ********************************* */
/* ** Master Page Layout Settings ** */
/* ********************************* */

/* ------------------------------------------------------------------------------------------------------------------------ */
#MasterPageForm
{
    width:                  100%;
    background-color:       #e6e9de; /* #fff; */
    margin:                 0px;
    border:                 0px solid #496077;
}

.header
{
    position:               relative;
    margin:                 0px;
    padding:                0px;
    background:				#1CAE67;
    background:				var(--main-header-bkgcolor);
/*  background:             #3183c8; */
/*  background:             #6495ED; */
/*  background:             #82B3E8 url(../images/bg_header.png) top left repeat-x; */
    width:                  100%;
}

.header h1
{
    font-weight:            700;
    margin:                 0px;
    padding:                0px 0px 0px 20px;
    color:                  black; /* #0a0c3e; */ /*181040; #f9f9f9; */
    border:                 none;
    line-height:            1.8em;
    font-size:              2em;
}

/* Access Right Schedule hour header */
.hourHeader
{
	min-width:20px;
}

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

/* ************************************** */
/* ** Master Page Menu Layout Settings ** */
/* ************************************** */

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

#Master_Menu.collapse  { 
	display:none;
	width:0px;
}

#Master_Menu.expand  { 
	display:block;
	min-width:250px;
	max-width:250px;
}

#Master_Menu
{
/*    padding:                0px 0px 0px 3px; Top Right Bottom Left */
/*    margin:                 3px 0px 0px 0px; */
    min-height:             460px;
/*  width:                  300px; */
    position:               static;
    background:             #e6e9de; /* #FFFFFF; */
    float:                  left;
}

.sidebar
{
    width:                  100%;
    margin-bottom:          10px;
}

.sidebarheader
{
    height:                 23px;
    padding:                5px 0px 0px 10px;
    background:             black; /* url(../Images/sidebar_header.png) no-repeat left top; */
    background-size:        100% 100%;
    color:                  #FFF;
    font-family:            Arial, Sans-Serif;
    font-size:              1.2em;
    font-weight:            bold;
    /*text-transform:         none;*/
	font-variant:			small-caps;
}

.sidebarcontent
{
/*    border:                 1px solid #0F2543; */
/*    padding:                5px 5px 5px 5px; */
    line-height:            1.5em;
    font-weight:            bold;
/*    min-height:             455px; */
}

.sidebarcontent a
{
    padding:                0px 0px 0px 0px;
    color:                  black; /* #737373; */
    text-decoration:        none;
}

.sidebarcontent a:hover
{
    background-color:       transparent; /* black #737373; */
    color:                  #FFF;
}

.sidebarcontent a:visited
{
    font-weight:            normal;
}

.sidebarFootor
{
/*    background:             #fff url('../Images/bg-sidebar-footer.png') repeat-x left bottom; */
    height:                 10px;
    margin-left:            0px;
    clear:                  left;
    width:                  215px;
}

.Logo_Content
{
/*  padding:                5px 5px 5px 5px;
    margin-top:             0px;
    margin-bottom:          10px;
    height:                 200px;
    line-height:            1.5em;
    font-weight:            bold; */
    clear:                  left;
}

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

/* ************************************************* */
/* ** Master Page Menu Collapsible Panel Settings ** */
/* ************************************************* */

/* ------------------------------------------------------------------------------------------------------------------------ */
.MainHeaderLink
{
	color: white !important;
	text-decoration: none;
}

.MainHeaderImageButton {
	border-width: 0px;
	border-width: 0px;
	width: 13px;
	float: right;
	margin-right: 5px;
	margin-top: 3px;
}

.collapsePanel
{
	background-color:		#8EC670;
	background-color:       var(--menu-content-bkgcolor); /* #8EC670; light green */
	overflow:               hidden;
	width:                  100%;
	clear:                  left;
	float:                  left;
/*	margin-right:           20px; */
	padding-left:           0px;
    Height:                 0px;
}

.collapsePanelHeader
{
    width:                  100%;
    height:                 25px;
	margin-right:           20px;
    padding-bottom: 3px;
/*  padding-left:           2px; */
    background:				#1CAE67;
    background:             var(--main-menu-bkgcolor); /* #1CAE67; url(../Images/bg-menu-header.png) bottom left repeat-x; */
/*  color:                  #4b6c9e; */
    color:                  black; /* #FFF; */
    border-bottom:			1px solid #8EC670;
    border-bottom:			1px solid var(--menu-content-bkgcolor);
}

.collapsePanelFooter
{
	display:none;
    width:                  100%;
    background:             #8EC670; /* #1EAE67 url(../Images/bg-menu-footer2.png) #fff bottom left repeat-x; */
    background:				var(--menu-content-bkgcolor);
    height:                 5px;
/*  margin-left:            -12px; */
    clear:                  left;
}

.menuItemArea
{
    padding:                4px 5px 0px 10px;
    cursor:                 pointer;
    vertical-align:         middle;
}

.menuItemHeader
{
    float:                  left;
    min-width:				190px;
}

.menuItemHeader:hover
{
    float:                  left;
    text-decoration:		underline;
}

.menuItemIcon
{
    float:                  right;
    vertical-align:         middle;
}

.menuItemIcon input[type="image"]
{
	width:13px;
}

.menuItemLabel
{
    float:                  left;
    margin-left:            2px;
    font-weight:            normal;
}

.menuChildItem
{
/*    background:             url(../Images/bg-menu-childItem.png) #fff no-repeat left top; */
/*  float:                  left; */
    vertical-align:         middle;
    width:                  100%;
    height:                 23px;
    margin-left:            0px;
    margin-top:             0px;
    padding-left:           0px;
    font-weight:            610;
    font-size:1.0em;
    color:                  black; /* #737373; */
    border-bottom:solid 1px #1CAE67;
}

.menuChildIcon
{
    float:                  left;
    width:                  20px;
    height:                 20px;
    margin:					0px 0px 0px 3px;
    clear:                  left;
    background:             transparent; /* #8FBCE9; */
}

.menuItemIconImage
{
    padding:                3px 0px 0px 0px;
    vertical-align:         middle;
    width:                  15px;
    height:                 15px;
}

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

/* ***************************************** */
/* ** Master Page Content Layout Settings ** */
/* ***************************************** */

/* ------------------------------------------------------------------------------------------------------------------------ */
#Master_MenuCont
{
	display:inline-flex;
	width:100%;
}

#Master_Content
{
/*    padding:                0px 3px;
    margin:                 3px 0px 0px 0px; */
/*	margin-left:            310px; */
    min-height:             460px;
/*    float:                  left; */
/*    background:             #FFFFFF; */
	width:                  100%;
}

#master_contentheader
{
    height:                 10px;
/*  background:             url(../images/rightcoltop2.png) no-repeat center center; */
    background-size:        100% 100%;
    border-left:            1px solid #0F2543;
    border-right:           1px solid #0F2543;
    border-top:             1px solid #0F2543;
    background-color:       #EFEFEF;
    display:				none;
}

#master_contentplaceholder
{
    padding:                0px 0px 0px 0px;
/*  border:					1px solid #0F2543; */
/*  border-right:           1px solid #0F2543;
    border-bottom:          1px solid #0F2543 */
    background-color:       #e6e9de;
    line-height:            1.2em;
    min-height:             590px;
}

#master_contentfooter
{
    clear:                  both;
    padding:                10px 0px 15px 10px;
    color:                  #333;
    font-size:              0.9em;
    letter-spacing:         0.2em;
    background: #e6e9de;
}

.mainNoLogin
{
    padding:                0px 12px;
    margin:                 12px 8px 8px 8px;
    min-height:             460px;
    background:             #F0FFFF;
}

.leftCol
{
    padding:                6px 0px;
    margin:                 12px 8px 8px 8px;
    width:                  200px;
    min-height:             200px;
}

.footer
{
    color:                  #4e5766;
    padding:                0px 0px 0px 0px;
    margin:                 0px auto;
    text-align:             center;
    line-height:            normal;
}

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

/* ****************** */
/* ** Tab Settings ** */
/* ****************** */

/* ------------------------------------------------------------------------------------------------------------------------ */
div.hideSkiplink
{
/*  background:             url(../Images/bg_gradient-menu.png) #5D88C1 bottom left repeat-x; */
	background:				#1CAE67;
	background:				var(--main-menu-bkgcolor);
    width:                  100%;
    padding:                0px 0px 0px 0px;
/*  height:                 40px; */
}

div.hideSkiplinkTab
{
/*  background:             url(../Images/bg_gradient-menu.png) #5D88C1 bottom left repeat-x; */
	background:				#1CAE67;
	background:				var(--main-menu-bkgcolor);
    width:                  100%;
    padding:                0px 0px 0px 0px;
/*  height:                 40px; */
}

#tabsF
{
	display:				flex;
    float:                  left;
    width:                  100%;
/*  background:             #efefef; */
/*  background:             url(../Images/bg_gradient-menu.png) #5D88C1 bottom left repeat-x; */
	background:				#1CAE67;
	background:				var(--main-menu-bkgcolor);
    font-size:              100%;
    line-height:            normal;
/*  border-bottom:          0px solid #666; */
/*    padding-bottom:         5px; */
    clear:                  left;
}

#tabsF ul
{
    margin:                 0;
    padding:                5px 0px 0px 5px;
    list-style:             none;
}

#tabsF li
{
    display:                inline;
    margin:                 0;
    padding:                0;
}

#tabsF a
{
    float:                  left;
    background:             black; /* url("../Images/tableftF.gif") no-repeat left top; */
    margin:                 1px 2px 5px 2px;
    /*padding:                1px 6px 1px 10px;*/
    text-decoration:        none;
}

#tabsF a span
{
	font-weight:			700;
    float:                  left;
    display:                block;
    background:             black; /* url("../Images/tabrightF.gif") no-repeat right top; */
    padding:				2px 14px 3px 12px;
    color:                  white; /* #666; */
}

#tabsF a span
{
    float:                  none;
}

#tabsF a:hover span
{
    color:                  white;
    text-decoration:		underline;
}

#tabsF a:hover
{
    background-position:    0% -42px;
}

#tabsF a:hover span
{
    background-position:    100% -42px;
}

.selectedMenu a span
{
	background:             gray !important;
}

.btnCollapseMenu
{
	border-width: 0px;
	width: 30px;
	height: 30px;
	padding: 3px 1px 0px 8px;
}

div.menu
{
    padding:                4px 0px 4px 8px;
}

div.menu ul
{
    background:             url(../Images/but.png) #fff bottom left repeat-x;
    list-style:             none;
    margin:                 0;
    padding:                0px;
    width:                  auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background:             url(../Images/but.png) #fff bottom left repeat-x;
/*  background-color:       #465c71; */
    background-color:       #FFFFFF;
    border:                 1px #4e667d solid;
/*  color:                  #dde4ec; */
    color:                  black;
    display:                block;
    line-height:            1.35em;
    padding:                4px 20px;
    text-decoration:        none;
    white-space:            nowrap;
}

div.menu ul li a:hover
{
    background:             url(../Images/but2.png) #fff top left repeat-x;
/*  background-color:       #bfcbd6; */
    background-color:       white;
/*  color:                  red; */
    color:                  #FFFFFF;
    text-decoration:        none;
}

div.menu ul li a:active
{
    background:             url(../Images/but.png) #fff bottom left repeat-x;
    background-color:       white;
/*  color:                  #465c71; */
    color:                  #cfdbe6;
    text-decoration:        none;
}

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

/* *************************** */
/* ** Form Element Settings ** */
/* *************************** */

/* ------------------------------------------------------------------------------------------------------------------------ */
fieldset
{
	margin-top:			2px;
    /* padding:            1em; */
    padding:            0.3em 1em 0.5em 1em;
    border:             1px solid #ccc;
}

fieldset p
{
    margin:             2px 12px 2px 10px;
}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{
    display:            block;
}

fieldset label.inline
{
    display:            inline;
}

legend
{
    font-size:          1.1em;
    font-weight:        600;
    padding:            2px 4px 2px 4px;
}

input.textEntry
{
    border:             1px solid #ccc;
}

input.passwordEntry
{
    border:             1px solid #ccc;
}

div.accountInfo
{
    width:              100%;
}

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

/* ******************* */
/* ** MISC Settings ** */
/* ******************* */

/* ------------------------------------------------------------------------------------------------------------------------ */
.clear
{
    clear:              both;
}

.title
{
    display:            block;
    float:              left;
    text-align:         left;
    width:              auto;
}

.remark 
{
	color: blue;
}

.loginDisplay
{
	float:				right;
    font-size:          1.1em;
    display:            block;
    text-align:         right;
    padding:            10px;
    color:              white; /* #0a0c3e; White; */
}

.loginDisplay a:link
{
    color:              white; /* #0a0c3e; */
}

.loginDisplay a:visited
{
    color:              white; /* #0a0c3e; */
}

.loginDisplay a:hover
{
    color:              black; /* #0a0c3e; */
}

.failureNotification
{
    font-size:          1.2em;
    color:              Red;
}

.errorMessage
{
    color:              Red;
}

.bold
{
    font-weight:        bold;
}

.submitButton
{
    text-align:         right;
    padding-right:      10px;
}

.button15
{
    width:         15px;
    height:      15px;
    border: solid 1px black;
    background: #1CAE67;
}

.button15:hover
{
    width:         15px;
    height:      15px;
    background-color: Red;
}

.deptTree a, .deptTree img
{
	width: 18px;
	height: 18px;
	vertical-align:middle;
}

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

/* ********************************** */
/* ** Content Page Layout Settings ** */
/* ********************************** */

/* ------------------------------------------------------------------------------------------------------------------------ */
.box
{
  /*  background:         #e6e9de; /* #FFFFFF; */
}

.boxtop
{
/*	background:         #9AC2EB url(../Images/bg-main2.gif) no-repeat top right;  ../images/ne3.gif rounded corner */
/* background:#8EC670; */
}

.boxtop div
{
/*	background:         url(../Images/bg-main2.png) no-repeat top left;  ../images/nw3.gif rounded corner */
    font-size:          0;
    height:             6px;
/*    clear:              both; */
}

.boxtopHeader
{
/*  background:         #3A4F63   background: url(../images/bg-main.png) no-repeat top left; */
/*    background:         url(../images/bg-main2.png) #fff bottom left repeat-x;  */
/*	background:#1CAE67; */
	padding: 8px 0px 3px 10px; /* t r b l */
    color:              black; /* #3A4F63; */
    font-family:        Arial, Sans-Serif;
    font-size:          1.2em;
    font-weight:        bold;
    text-transform:     uppercase;
    min-height:         20px;
}

.boxtopHeader2
{ 
	margin:10px 10px 10px 0px;
	font-weight:700px;
	font-size:1.5em;
}

.boxbottom
{
/*    background:         url(../images/se2.gif) no-repeat bottom right; */
}

.boxbottom div
{
/*    background:         url(../images/sw2.gif) no-repeat bottom left; */
    font-size:          0;
    height:             6px;
/*    clear:              both; */
}

.boxseperator
{
/*    background:         url(../Images/bg-main3.png) #fff bottom left repeat-x;  */
    min-height:         20px;
}

.boxcontent
{
    padding:            0px 1px 0px 1px;
    min-height:         600px;
    overflow:           auto;
    width:              auto;
}

/*
CheckBox Label
*/
.chkboxLabel input
{
	vertical-align: text-bottom;
}
.chkboxLabel label
{
    vertical-align: text-top;
}

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

/* ******************* */
/* ** Icon Settings ** */
/* ******************* */

/* ------------------------------------------------------------------------------------------------------------------------ */
.menuTableRow
{
	margin: 0px 0px 5px 0px;
	font-size: 1.0em;
	font-weight:700;
}

.menuTableRow td
{
	text-align:center;
}

.formIconHead
{
/*    background:         url(../Images/bg-nav.png) #fff top left repeat-x;  */
	background:#8EC670;
    color:              black; /* #3A4F63; */
    padding:			5px 0px 5px 10px;
    font-family:        Arial, Sans-Serif;
    font-size:          1.3em;
    font-weight:        bold;
    clear:              both;
    border-top: solid 3px #1CAE67;
}

.formIconSection
{
    color:              black; /* #3A4F63; */
    font-family:        Arial, Sans-Serif;
    width:              95px;
    height:             90px;
/*  float:              left; */
    padding:            0px 5px 0px 8px;
}

.formIconImage
{
/*  float:              left; */
    width:              50px;
    height:             50px;
    margin-top:         3px;
/*  clear:              left; */
/*  background:         #8FBCE9; */
/*    background:         #FFFFFF; */
}

.formIconSectionAccessManager
{
    color:              black; /* #3A4F63; */
    font-family:        Arial, Sans-Serif;
    width:              105px;
    height:             85px;
/*  float:              left; */
    padding:            0px 0px 0px 5px;
}

.menuIconAccessManager
{
/*  float:              left; */
	width:              50px;
	height:             50px;
	margin-top:         2px;
/*  clear:              left; */
/*  background:         #8FBCE9; */
	text-align:         left;
	padding: 0px 15px 0px 15px;
}

.menuLabelAccessManager
{
color:black;
text-align:         center;
	vertical-align: middle;
	height: 40px;
}

.menuItemAccessManager
{
/*  float:              left; */
	width:              95px;
	height:             80px;
	margin-top:         2px;
/*  clear:              left; */
/*  background:         #8FBCE9; */
	text-align:         center;
	padding: 0px 8px 0px 8px;
	text-decoration:none;
	display:inline-block;
	/* border:solid 1px black; */
}

.formIconImageAccessManager
{
/*  float:              left; */
	width:              50px;
	height:             50px;
	margin-top:         3px;
/*  clear:              left; */
/*  background:         #8FBCE9; */
	text-align:         left;
	padding: 0px 15px 0px 15px;
}

/* ID Picture Taking */

.vistorarea 
{
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  /* width: 760px; */
}

.idcardarea {
  display: flex;
}

.camera {
  margin-top: 10px;
  /* width: 360px; */
  display:inline-block;
}

.canvas {
  display:none;
}

/* RFID card print area */
.idcardframe {
/* text-align:center; */
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  margin-top:10px;
  /* box-shadow: 2px 2px 3px black; */
  width:324px; 
  height:204px;
}

.printframe{
/* text-align:center; */
  border: 1px dashed #c2c2c2;
  border-radius: 8px;
  margin:10px;
  /* box-shadow: 2px 2px 3px black; */
  width:300px; 
  height:180px;
  font-size: 70%;
  font-weight:bold;
  line-height:13px;
}

.ImagePreview
{
    object-fit: cover;
	width: 300px;
	max-height: 300px;
}

.FacialImage
{
	object-fit: cover;
	width: 150px;
	max-height: 150px;
}

.photo {
    /* border: 1px solid black; */
    /* box-shadow: 1px 1px 1px black; */
    width: 110px;
    height: 110px;
    object-fit: cover;
}

.video {
  border: 1px solid black;
  /* box-shadow: 2px 2px 3px black; */
  width:300px;
  height:300px;
  object-fit: cover;
}

.takePhoto {
  display:block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  bottom:32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}