/*
	Standard Style Sheet for CampusNet - Corporate
	
	Revised by	:	Mike Maske, Mar.  3, 2003 -- added left justified HTML textbox for EmpConfi
	Revised by	:	Mike Maske, Mar. 11, 2003 -- add a delete button style for EmpConfi
	TODO		:	Make the font-family Linux Browser safe
	Revised by 	:	Mike Maske, Aug. 31, 2003 -- adopted to Feati CampusNet
	Revised by	:	Mike Maske, Oct. 16, 2003 -- .client_name class

	Revised by	:	Mike Maske, Nov.  9, 2004 -- demo for RetailNet prototype without getting recent copy
					from production codes of CampusNet.

*/

:root{
	/* Initializing of main color of theme here
	 * Original color(blue) : #2376c4
	 * maroon : #8F0222*
	 * green : #00C249 (light) , #078639 (dark)
	 * ICCS Blue colors: #1261A0, #072F5F*/ 
	--main-theme-color:#8F0222;
}

*:focus{
    outline:0;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* ----- Start of RetailNet Prototype Demo, merge with recent css from CampusNet later ----- */

/* the normal receipt font for non-pre/monospace implementation */
.pos_receipt_data
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    COLOR: black;
    FONT-FAMILY: Monospace,Tahoma,Arial,'Luxi Sans',Helvetica
}
.pos_receipt_data td
{
    TEXT-ALIGN: left;
    VERTICAL-ALIGN: middle
}
/* for discounts, surcharge, negated items, etc. */
.pos_receipt_adj
{
    COLOR: red;
}
/* for cancelled should be striked out. */
.pos_receipt_cancelled
{
    COLOR: red;
    TEXT-DECORATION: line-through
}

.pos_receipt_heading
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: black;
    FONT-FAMILY: Monospace,Tahoma,Arial,'Luxi Sans',Helvetica
}

.pos_receipt_title
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 9pt;
    COLOR: #0080c0;
    FONT-FAMILY: Monospace,Tahoma,Arial,'Luxi Sans',Helvetica;
    BACKGROUND-COLOR: #C0C0C0
}



/* ----- End of RetailNet Prototype Demo, merge with recent css from CampusNet later ----- */

/* body (over decorated, do not use)
{ 
	scrollbar-3d-light-color : Aqua;	
	scrollbar-arrow-color : white;	
	scrollbar-base-color : silver; 
	scrollbar-dark-shadow-color : white; 
	scrollbar-face-color : #0080c0;	
	scrollbar-highlight-color : silver;	
	scrollbar-shadow-color : Blue;	
	scrollbar-track-color : silver
} */

html {
/*     overflow: scroll; */
/*     overflow-x: hidden; */
    background-color:#fafafa;
    position:relative;
}
::-webkit-scrollbar {
    /*width: 0px; */ /* remove scrollbar space */
    /*background: transparent; */ /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
/*     background: #FF0000; */
}

body, html {
 /*background-color:#E6E6E6;*/
}

body{
  margin-bottom:60px;
  width:100%;
}

body > div {
  min-width: auto;
  
}
/* All link (anchor) except when contained in user_data class table */


a
{
/*     FONT-WEIGHT: bold; */
    font-size: 9pt; 
    FONT-FAMILY: Tahoma,Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: none
    letter-spacing: 0.4px;
    color: #260007; /*blue #2a6496*/
    text-align: center;
    text-decoration: none;
    
}
a:hover
{
    /*FONT-WEIGHT: bold;*/
/*     font-size: 9pt;  */
    FONT-FAMILY: Tahoma,Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: underline;
    text-align: center;
    color: #1c0005;
}
/*a:focus
{
    BACKGROUND-COLOR: #ffffd5
}*/
img:focus
{
    BACKGROUND-COLOR: #ffffd5
}

a img:hover
{
/*  Colors #ffffd5 - chalk, #E0F4FE pale blue */
/*     BACKGROUND-COLOR: #ffffd5 */
}

table{
     display:table;
}

/* Label for data entry : header portion */
.user_entry
{
/*     FONT-WEIGHT: bold; */
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Tahoma,Calibri, Arial,'Luxi Sans',Helvetica;
    
    
/*     FONT-FAMILY: ,Arial,sans-serif; */
    
/*     FONT-FAMILY: Verdana, Geneva, sans-serif; */
/*     FONT-FAMILY: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; */
    
    
    FONT-STYLE: normal;
    TEXT-ALIGN: left;
    VERTICAL-ALIGN: top;
    background-color: #fafafa;
}
.user_entry td
{
    padding-right: 10px;
    TEXT-ALIGN: left;
    VERTICAL-ALIGN: top
    padding-top:1px;
    padding-bottom:1px;
}

/* Style for data grid */
/*.user_data
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica
}*/
.navigation {
 position:fixed;
 bottom:120px;
  
}
#Form1 {
  height:auto;


}
#MainMenu {
    height: auto;
    margin-left:auto;
    margin-right:auto;
    max-width: 2080px ;
    overflow: hidden;
    display:table;
    background-color: #fafafa; 
    
    

}
.user_data
{
     margin: 10px auto;
    color: black;
/*     font-family: lucida grande,tahoma,verdana,arial,sans-serif; */
/*     font-family: Tahoma, Geneva, sans-serif; */
/*     font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;  */
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica; 
/*     overflow-x:auto; */
    font-size: 13px;
    font-weight: normal;
    border-collapse: collapse;
    background-color:#fafafa;
}

/*.user_data tr:hover td {
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
.user_data tr:hover td:first-child {
    box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
.user_data tr:hover td:last-child {
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}*/

.user_data table {
 height:100%; 
  
}


.user_radio
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 8pt;
}

/*.user_data tr:not(.grid_title):not(.alt_grid) td{
    background:white;
}*/

/*.user_data tr:not(.grid_title):not(.alt_grid):hover
{
    box-shadow:0px 0px 1px 1px rgba(0,0,0,.4) inset;
}*/
.user_data tr:not(.grid_title):hover
{
/*     box-shadow:0px 0px 1px 1px rgba(0,0,0,.4) inset; */
    background: -webkit-linear-gradient(#eee, #ccc);
    background: -o-linear-gradient(#eee, #ccc);
    background: -moz-linear-gradient(#eee, #ccc);
    background: linear-gradient(#eee, #ccc);
/*     color: #fff; */
}
.user_data tr:not(.grid_title):hover a, .user_data tr:not(.grid_title):hover .user_text
{
/*     color: #fff; */
}

.user_data tr:not(.grid_title):hover select
{
    background-color: #fff;
}
.user_data td
{
    TEXT-ALIGN: left;
    vertical-align:middle;
    padding-top:2.5px;
    padding-bottom:2.5px;
}

.user_data img {
	opacity:0.45;
}
.user_data tr:hover img {
	opacity:0.7;
}
.user_data tr:hover img:hover {
	opacity:1;
}

.user_data a
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #44020e ; /* #2a6496*/
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: none
}
.user_data a:hover
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: #1c0005;
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: none;
}

/* Error Screen and annoucements */
.user_error td
{
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica;
    FONT-SIZE: 14pt;
    FONT-WEIGHT: bold;
    TEXT-ALIGN: right;
    VERTICAL-ALIGN: top
}
.user_error a
{
    FONT-SIZE: 14pt;
    FONT-WEIGHT: bold;
    COLOR: blue;
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: none
}
.user_error a:hover
{
    FONT-SIZE: 14pt;
    FONT-WEIGHT: bold;
    COLOR: #1e90ff;
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica;
    TEXT-DECORATION: underline
}

/* Main menu items */

.icon_area{
  
margin-left: auto; 
margin-right: Auto;

width:95%;
border: 1px solid #dadada;
border-radius:15px;
box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
min-height:auto; /*600px*/ 
}

.icon_area td
{ 
	TEXT-ALIGN: center;
	vertical-align:text-top;
	height:100%;
}

.icon_area a img{
/* 	filter:grayscale(0%); */
transition-duration:0.2s;
	height:90%;
	margin: 5% 0;
}


.icon_area a img:hover {
    height: 102%;
    margin: 2% 0;
   
}


.mesg_area{
 
  
}


.mesg_area td
{
	TEXT-ALIGN: left; 
	VERTICAL-ALIGN: top; 
	FONT-SIZE: 8pt; 
/* 	FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica; */
	font-family:Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	height:auto;

}

/* Data grid title */


.grid_title td
{
	TEXT-TRANSFORM: uppercase;
	TEXT-ALIGN: center;
	vertical-align:middle;
	border: none;
	
}

.grid_title
{
     cursor: help;
      font-family: lucida grande,tahoma,verdana,arial,sans-serif;
      font-size: 9pt;
      background: #4f4e4e; /*#666666* gray/
      
/*       background: #0080C0; /*change according to school color scheme */ 
      
      
      font-weight: bold;
      height: 25px;
      color: #f2f2f2;
     
}


.user_title
{
/*     FONT-WEIGHT: bold; */
    FONT-SIZE: 12pt;
    COLOR: #a90329;
    text-shadow: 1px 1px 2px #c6c6c6;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica
}

.user_title a
{
    FONT-SIZE: 12pt;
    COLOR: #a90329;
    text-shadow: 1px 1px 2px #c6c6c6;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica
}
.user_title a:hover
{
/*     FONT-WEIGHT: bold; */
    FONT-SIZE: 12pt;
    COLOR: #a90329;
    text-shadow: 1px 1px 2px #c6c6c6;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica;
    TEXT-DECORATION: underline
}

/* on screen legend text; found at the bottom of the page */
.user_legend
{
    FONT-WEIGHT: normal;
    FONT-STYLE: normal;
    FONT-SIZE: 7pt;
    COLOR: red;
    FONT-FAMILY: Arial,Tahoma,'Luxi Sans',Helvetica
}

/* on screen help text */
.user_help
{
    FONT-WEIGHT: normal;
    FONT-STYLE: normal;
    FONT-SIZE: 0.85em;
    COLOR: #44020e;
    
/*     FONT-FAMILY: Arial,Tahoma,'Luxi Sans',Helvetica; */
    
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    
}

/* for in-line text (span.user_text) that may change in value when other control does */
.user_text
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    FONT-STYLE: italic;
    COLOR: gray;
/*     FONT-FAMILY: Arial, Tahoma,'Luxi Sans',Helvetica; */
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    
}

.user_text2
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    FONT-STYLE: normal;
    COLOR: gray;
    FONT-FAMILY: Arial, Tahoma,'Luxi Sans',Helvetica
}
input, select, option, textarea
{
    /* Comment out, do not use here
    BORDER-RIGHT: #c0c0c0 1px solid;
    BORDER-TOP: #c0c0c0 1px solid;
    BORDER-LEFT: #c0c0c0 1px solid;
    BORDER-BOTTOM: #c0c0c0 1px solid;
    */
    FONT-WEIGHT: normal;
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica
}
input:focus, select:focus, option:focus, textarea:focus
{
    /* CSS level 2 compliant browser only */
    BACKGROUND-COLOR: #ffffd5
}


input[type="button"],input[type="reset"],input[type="submit"]
{
/*-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #b8b8b8));
	background:-moz-linear-gradient(top, #ededed 5%, #b8b8b8 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #b8b8b8 100%);
	background:-o-linear-gradient(top, #ededed 5%, #b8b8b8 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #b8b8b8 100%);
	background:linear-gradient(to bottom, #ededed 5%, #b8b8b8 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#b8b8b8',GradientType=0);*/
	/*background-color:#ededed;*/
	background-color:#969494; /* change depending on school color scheme */
	
	/*-moz-border-radius:6px;
	-webkit-border-radius:6px;
	
	border-radius:6px;
	border:1px solid #dcdcdc;
	*/
	border: none;
	border-radius: 4px;
	display:inline-block;
	cursor:pointer;
/* 	color:#424142; */
	color: white;
	font-family:Arial;
	font-size:13px;
/*	font-weight:bold;*/
/* 	padding:5px 14px; */
	
	padding: 6px 12px;
	text-decoration:none;
	
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	margin:2px; 
    
	/*text-shadow:0px 1px 0px #ffffff;*/

}
input[type="button"]:hover,input[type="reset"]:hover,input[type="submit"]:hover
{

/*background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8b8b8), color-stop(1, #ededed));
	background:-moz-linear-gradient(top, #b8b8b8 5%, #ededed 100%);
	background:-webkit-linear-gradient(top, #b8b8b8 5%, #ededed 100%);
	background:-o-linear-gradient(top, #b8b8b8 5%, #ededed 100%);
	background:-ms-linear-gradient(top, #b8b8b8 5%, #ededed 100%);
	background:linear-gradient(to bottom, #b8b8b8 5%, #ededed 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8b8b8', endColorstr='#ededed',GradientType=0);
	background-color:#b8b8b8;*/

	box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 14px 20px 0 rgba(0,0,0,0.19);
	background-color:#5b5a5a /*8c8a8a;*/
}

select {
  background: transparent;
   width: auto;
  
   line-height: 1;
   border: 1px solid #CCC; /* change depending on school color scheme */
   border-radius: 4px;
   height: auto;
   padding: 3px 0;
/*    -webkit-appearance: none; */

  
}
/*input[type="submit"]:focus,  input[type="reset"]:focus,  input[type="submit"]:focus
{
    /* CSS level 2 compliant browser only */
    /* BACKGROUND-COLOR: #0080c0;
    COLOR: #ffffd5
    TEXT-DECORATION: blink;   
    BACKGROUND-COLOR: LightBlue;
    COLOR: DarkBlue
}*/

input[type="text"],input[type="email"],textarea,input[type="password"], input#txtDesc, input#txtInitials
{
  border-radius: 3px;
  border: .5px solid #CCC;
  padding: 4px;
  font-weight: 200;
  font-size: 10pt;
  font-family: Arial,Tahoma,'Luxi Sans',Helvetica;
}


input[type="password"] {
  background: url(images/key.png) no-repeat scroll 7px 50%;
  padding-left:30px;
  background-size: 15px 15px;
}

input[type="email"]:invalid:not(:focus){
    outline: 1px solid red;
}

input#txtUserName {
  background: url(images/user-4.png) no-repeat scroll 7px 50%;
  padding-left:30px;
  background-size: 15px 15px;
  margin-bottom: 1%;
  width: 250px;
  height: 35px;
}
input#txtPassword {
  width: 250px;
  height: 35px;
  margin-bottom: 1%
}
input#txtQuick{
  background: url(images/Find.gif) no-repeat scroll 7px 50%;
  padding-left:30px;
  background-size: 15px 15px;
}

input[type="checkbox"]{
  
 
  display: hidden;
  
}
input[type="checkbox"]+label {
   background-image: url(../images/unchecked.png)  ;
   background-position: center;
  background-size: auto 100%;
 
  width: 25px;
  height:25px;
    display:inline-block;
   
}
input[type="checkbox"]:checked + label {
   background-image: url(../images/withcheck.png)  ; 

}


input[type="text"]:hover,input[type="email"]:hover{
  border-radius: 3px;
  padding: 4px;
  font-weight: 200;
  font-size: 10pt;
  font-family: Arial,Tahoma,'Luxi Sans',Helvetica;
  box-shadow: 1px 1px 5px #CCC;
}

input[type="password"]:hover{
  border-radius: 3px;
  font-weight: 200;
  font-size: 10pt;
  font-family: Arial,Tahoma,'Luxi Sans',Helvetica;
  box-shadow: 1px 1px 5px #CCC;
}

input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus
{
    /* CSS level 2 compliant browser only */
    /* BACKGROUND-COLOR: #0080c0;
    COLOR: #ffffd5
    TEXT-DECORATION: blink;   */
   /* BACKGROUND-COLOR: LightBlue;
    COLOR: DarkBlue*/
}
img
{
    BORDER-RIGHT: medium none;
    BORDER-TOP: medium none;
    BORDER-LEFT: medium none;
    BORDER-BOTTOM: medium none
}

.url_finder
{
    FONT-SIZE: 8pt;
    COLOR: white;
    letter-spacing: 0.5px;
    FONT-FAMILY:  Tahoma,Arial,'Luxi Sans',Helvetica;
    background-color:var(--main-theme-color);
   
}

.url_finder_no_bg{
    FONT-SIZE: 8pt;
    COLOR: white;
    letter-spacing: 0.5px;
    FONT-FAMILY:  Tahoma,Arial,'Luxi Sans',Helvetica;
}


.prog_title{
    COLOR:white;
    FONT-SIZE: 18pt;
    FONT-WEIGHT: normal;
    FONT-FAMILY:   "Oswald", sans-serif;
    PADDING-RIGHT:5px;
    VERTICAL-ALIGN:middle;
    text-shadow:2px 2px 4px #141414;
}
.prog_desc
{		
   COLOR:#b2b2b2;
    FONT-SIZE: 12pt;
    FONT-WEIGHT: normal;
    FONT-FAMILY: "Oswald", sans-serif;
    PADDING-RIGHT:5px;
    VERTICAL-ALIGN:middle;
    
}
.prog_ackn
{
    FONT-WEIGHT: normal;
    FONT-SIZE: 6pt;
    COLOR: #fafafa;
    FONT-FAMILY: Verdana,Arial,'Luxi Sans',Helvetica
}

.footerString {
  COLOR: #fafafa;
  
  
}
.grid_title td
{
	TEXT-TRANSFORM: uppercase;
	TEXT-ALIGN: center;
}

/*.grid_title
{
    FONT-WEIGHT: bold;
    FONT-SIZE: 10pt;
    COLOR: #0080c0;
    FONT-FAMILY: Tahoma,Arial,'Luxi Sans',Helvetica;
    CURSOR: help;
    BACKGROUND-COLOR: #C0C0C0
}*/
.alt_grid
{
/*     BACKGROUND-COLOR: #CCB; */
    BACKGROUND-COLOR: #E6E6E6;
    
}

/*#client_logo {
  padding-left:15px; 
  position:absolute;
  top:0px;
  left:0px;

  
}*/

/* Customer Name on Header */
.client_name
{	
    FONT-WEIGHT: bold;
    FONT-SIZE: 24pt;
    COLOR: #0080C0;
    TEXT-ALIGN: left;
    FONT-FAMILY: Verdana,Arial,'Luxi Sans',Helvetica;
    text-shadow: 2px 2px 4px #000000;
/*    -webkit-filter: hue-rotate(160deg);
    filter: hue-rotate(160deg);*/
    
    /*
    FONT-FAMILY: 'Times New Roman',Helvetica,'Luxi Sans'*/

}

/* MIKE: To avoid having to define lots of control id here, define basic input text and buttons here */
.control_code
{
    TEXT-TRANSFORM: uppercase;
    FONT-WEIGHT: bold
} 
.control_delete
{
    COLOR: red;
    FONT-WEIGHT: bold
}
.control_number
{
    TEXT-ALIGN: right
    border-radius: 3px;
    border: .5px solid #CCC;
    padding: 4px;
    font-weight: 200;
    font-size: 10pt;
    font-family: Arial,Tahoma,'Luxi Sans',Helvetica;
}

/* HTML variable for common capitalization, red button & right justified numbers */
#txtEmpNo, #txtAccountNo, #txtSSSNo, #txtPagibigNo, #txtTaxNo, #txtCode, #txtCaseNo, #txtBatchNo,
#txtPHNo, #txtHMINo, #txtStudentNo, #txtSubjCode, #txtDaysCode, #txtAPNo
{
    TEXT-TRANSFORM: uppercase
} 
#cmdDelete, #cmdHireDel, #cmdDepsDel, #cmdWorkDel, #cmdDetlDel, #cmdSalaDel, #cmdDelete2,
#cmdSubjDel, #cmdEducDel, #cmdDSubDel, #cmdDReqDel, #cmdXtraDel, #cmdDetlDelTools, #cmdAcctDel,
#cmdAssetDel, #cmdDetlDelFacu, #cmdDetlDelRDeg, #cmdAptitudeDel, #cmdScholarDel, #cmdPersonalityDel,
#cmdCareerInterestDel, #cmdInterviewDel, #cmdPeriodicDel, #cmdFinalsDel, #cmdSubjDel, #cmdDeleteDisc,
#cmdSubjCancel, #cmdMedDel, #cmdExamDel, #cmdVacDel, #cmdAllergyDel, #cmdEmpDel, #cmdStudDel, #cmdDetlDelRef,
#cmdComDel, #cmdAccntDel, #cmdExpenseDel, #cmdSupplierDel, #cmdPhysDel,#cmdDetlDelComp
{
    	background-color:#e0e0e0; /* change depending on school color scheme */
	border: none;
	border-radius: 4px;
	display:inline-block;
	cursor:pointer;
	color: red;
	font-family:Arial;
	font-size:13px;
	padding: 8px 16px;
	text-decoration:none;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	margin:2px; 
	 FONT-WEIGHT: bold;
  
   /* COLOR: red;
   
    background-color: #efeded;
    */
  
    
}
#txtAmount, #txtSalary, #txtAllowance, #txtHours, #txtFreq, #txtDays, #txtDaysApproved,
#txtMonthlyWage, #txtDailyWage, #txtMonthlyAllowance, #txtDailyAllowance, #txtPrice, #txtSubtotal,
#txtQuantity, #txtPayment, #txtPaymentConfirm, #txtPoints, #txtCost, #txtBudgetAmt, #txtMonIncome
{
    TEXT-ALIGN: right
}




/*-----------header menu style set -----------------------*/

.header {
  width:100%;
    position:relative;
    top:0px;
  z-index:1;
  
}


.table_head {
    background: url(../CSM/images/Banner.png);
    background-color: #E6E6E6;
    background-size: 100% 100%;
    background-repeat: no-repeat;
        height:125px;
/*    background-color:white;*/
    position:fixed;
    top:0px;
/*            -webkit-filter: hue-rotate(160deg);
    filter: hue-rotate(160deg);*/
  
}
.head_content {
    z-index:1;
    height:125px;
    position:relative;
    top:0px;
  
}
.top_nav{
    position:relative;
    
          z-index:1;
}

.RtnName {
  z-index:0;
  background-color:white;
  position:relative;
  top:125px;
  box-shadow: 3px 3px grey;

  
  
  
  
}
/*.table_head tbody {

  
}*/

.container_full{
  min-height:100%;
  min-width:100%;
  
}

.footer {
  width:100%;
    position:relative;
    bottom:0px;
    background-color:white;
    
  
}

.footer_main {
  width:100%;
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    background-color:#969696;
    margin-top:50px;
    visibility:visible;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}



.content_main {
    width:100%;
    border: none;
    height:auto;
    position:relative;
    /*padding-bottom: 10px;*/
    margin-top:15px;
}

.content_main::-webkit-scrollbar{
  
  width: 0px; 
}



.parent_content {
    border:1px solid black;
    height: auto;
    width: 100%;
    overflow:auto;
    position: relative;
    padding-bottom:220px;
}

.content {
    width:1225px;
    background: white;
    border: none;
    display:block;
    position:relative;
    top:250px;
    padding-bottom:100px;
    margin-left: auto;
    margin-right: auto;
    overflow:auto;
    height:auto;
    
  
}

.frame {
    margin-left: 10px;
    margin-right: 10px;
     /*height: 22px; can be anything*/
    /*width: 45px; can be anything*/
    position: relative;
    display:inline-block;
    background-color:transparent;
    
    
    
    
}

.frame_text {
    border: none;
    height: 20px; /*can be anything*/
    width: auto; /*can be anything*/
    padding: 0 10px;
    position: relative;
    display:inline-block;
    background-color:transparent;
    line-height:20px;
    color:white;
    FONT-FAMILY: Roboto, Arial,Tahoma,'Luxi Sans',Helvetica;
    letter-spacing: 0.7px;
    FONT-WEIGHT: bold;
    text-align:center;
    margin-right:1px;
    text-decoration:none;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    
    
}

.frame_text:hover{
	border-radius: 5px 5px 5px 5px ;
	background-color: rgba(3,3,3, 0.4);
	color: #fff;
}

.frame:hover {/*
  border:  solid #666666;
  background-color: #0080c0; */
}


.rtn_title {
   float:right; 
   position: relative;
    display:inline-block;
        FONT-WEIGHT: bold;
    FONT-SIZE: 18pt;
    COLOR: #0080c0;
    FONT-FAMILY: Arial,Helvetica,'Luxi Sans';
    vertical-align:middle;
    
}


#leftPanelSubMenu::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#leftPanelSubMenu::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

#leftPanelSubMenu::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}




#mySidenav::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#mySidenav::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

#mySidenav::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
	background-color: #b7b7b7;
}



#notif_div {
    padding-bottom:5px;
    padding-top:5px;
    border-bottom:1px solid #F2F2F2;
    border-top:1px solid #F2F2F2;
    padding-left:5px;
    
    
}
#notif_div:hover {
    background-color: #666666;
}


.notif_button {
display:inline-block;
float:right;
position:relative;
  height:23px;
  width:23px;
  vertical-align:middle;
}

#NotifCnt {

background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
  
}

#notif_title {

  font-size:10pt;
  FONT-FAMILY: Arial,Helvetica,'Luxi Sans';
  vertical-align:middle;
  text-align:left;
   FONT-WEIGHT: bold;
  color: #424242
 
}

.notif_link {
    text-decoration:none;
    color:black;
}

.notif_link:hover {
  color: #E6E6E6;
    text-decoration:none;

}

.img_menu {  
    height: 16.5px;  
    width: 16.5px; 
   /* width: auto;
    height: auto;
    
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;*/
    
    -webkit-filter: invert(100%); /* Safari 6.0 - 9.0 */
    filter: invert(100%);
    
    
}
.text_menu {
  
  max-height: 75%;  
  max-width: 75%; 
  width: auto;
  height: auto;
  position: absolute;   
  bottom: 0;  
  left: 0;  
  right: 0;  
  margin: auto;
  font-size:10px;
  color:white;
  FONT-WEIGHT: bold;
  vertical-align:baseline;
  padding-bottom:3px;
  
 
    
  
}



#head_menu {

  text-decoration:none;

}

#head_menu:hover{
  text-decoration:none;
  background-color: #666666;
  
}

.button__badge {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
  padding: 1px 3px;
  font-size: 10px;
    z-index: 1; /* Stay on top */
  position: absolute; /* Position the badge within the relatively positioned button */
  float:right;
  top: -5px;
  right: -7px;
  
}

#Notif {
width:250px;
right:0;
    position:absolute;
     z-index: 1; /* Stay on top  
     

display:inline-block;
/*float:left;*/
background-color: #E6E6E6;
border-bottom:5px solid #666666;
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 25px 0 rgba(0,0,0,0.19);
padding-left:3px;
/*left:140px;*/
margin-right:130px;
}

#menu_title {
  padding-top:5px;
  font-size:10pt;
  FONT-FAMILY: Arial,Helvetica,'Luxi Sans';
  vertical-align:middle;
  text-align:left;
  FONT-WEIGHT: bold;
  color: #424242;
  
  

}


.sidenav2 {
    height: auto; /* 100% Full-height */
    max-height: 500px;
    right: 0;
    margin-right: 90px;
    width: 0; /* 0 width - change this with JavaScript */
/*     position: absolute; /* Stay in place */ 
    position:absolute;
     z-index: 1; /* Stay on top  */
    
   /* left:330px;*/
    background-color: #F2F2F2; /* Black*/ /**/
    border-bottom:5px solid #666666;
/*     overflow-y: hidden; */
    overflow-x: hidden; /* Disable horizontal scroll */
   /* padding-top: 25px;*/ /* Place content 60px from the top */
/*     transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ 
    margin-bottom:60px;
    padding-left:3px;
    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 25px 0 rgba(0,0,0,0.19);
    
}

.sidenav2 a {	
  z-index: 1;
    padding: 4px 4px 4px 4px;
    text-decoration: none;
    font-size: 10px;
    color: black; /*#818181*/ 
    display: block;
    text-align:left;
    transition: 0.3s;
    border-top-color: #ffffff;
/*    border-top: 1px solid;*/
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 2px;
/*    background-color: #0080C0;*/
    
}


.sidenav2 a:hover {
    color: #f1f1f1;
     background-color: #666666;
}



.sub_menu {
  display:none;
  background-color:#D8D8D8;
  z-index:1;
    
}

.sub_menu a {
  padding: 3px 3px 3px 3px;
  text-decoration: none;
  font-size: 10px;
  color:black ; /**/
  display: block;
  transition: 0.3s;
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 2px;
  text-align:left;
  border:transparent;
  padding-left: 10px;

  
}

.active {
    background-color: #666666; /* Add an active/current color */
}

.active a {
    color:white;
}


.sub_menu a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.head_menu {
  
  vertical-align:middle;
  padding-left:5px;
  padding-right:5px; 
 width:55%;
}


/* pagination */ 

.pagination {
    display: flex;
    
    justify-content:center;
}

.pagination a {
    color: black;
    float: left;
    padding: 8px 8px;
    text-decoration: none;
    transition: background-color .3s;
    border:1px solid #ddd;
     margin: 0 2px;
    
    
}


.pagination a.active {
    background-color: #7c1b2b; /*  change depending on the color scheme */
    color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}


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

img[src="../images/printer2.gif"]  {
 width:35px;
height:35px; 
filter:grayscale(100%);  
}
img[src="../images/unchecked.png"]  {
 width:25px;
height:25px; 
filter:grayscale(100%);  
}
img[src="../images/withcheck.jpg"]  {
 width:25px;
height:25px; 
filter:grayscale(100%);  
}

img[src="../images/dot.gif"]  {
 width:20px;
height:20px; 

}



img[src="../images/printer2.gif"]:hover  {
background-position: 0 0;  
}

img[src="../images/Find.gif"]  {
 width:25px;
height:25px; 
filter:grayscale(100%);  
}

img[src="../images/add.gif"] {
  
width:25px;
height:25px;
filter:grayscale(100%);
  
}

img[src="../images/FFINDER.gif"]  {
  
width:25px;
height:25px;  

}

img[src="../images/delete.gif"] {
  
width:25px;
height:25px;  
}


img[src="../images/jumpto.gif"] {
  
  filter:grayscale(100%);
}

img[src="../images/line_error.gif"] {
  
width:20px;
height:20px;

  
}

img[src="../images/line_okay.gif"] {
  
  height:16px;
  width:16px;
}

img[src="../images/line_proc.gif"] {
  
 height:16px;
  width:16px;
  
}

.side_menu {
 /* border-right:10px solid #E6E6E6; */
  
}

.search_menu {
 /*border-right:10px solid #E6E6E6; */
  
}

.MessageBoard {

font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    text-shadow:2px 2px 4px #000000;
    vertical-align:middle;
    font-weight:bold;
    background-color: var(--main-theme-color);
    color:white;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:5px;
    border-radius: 4px 4px 0px 0px;
/*       box-shadow: 3px 3px 10px grey; */
    
  
}

#txtQuick {
  
  
  
}


#whiteBackdrop
{
  position:absolute; 
  left:0; 
  top:0;
  width:100%; 
  height:100%; 
  background-color:#ffffff; 
  z-index:-10;
  
  
}

#sidebarMenu{
   width:23%;
  border-color: #dadada; 
  padding-right: 20px;
/*   bottom:0; */
/*   box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); */
  left:20px;
  margin-bottom:320px;
  
}


#sidebarMenu > input{
	box-shadow: 0 0px 5px 0 rgba(0,0,0,.16),0 0px 10px 0 rgba(0,0,0,.12);
	
}

#sidebarMenu > ul{
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
	
}

.content_display{
  position:relative; 
  display:inline-block; 
  float:left;
  
  
}

#content2{
  width:900px;
  
}


#menu {

width:100%;
}

#menu2 {

position: relative;
padding: 3px 1em 3px .4em;
width: auto;
text-align: left;
}

#txtQuick {
  width: 100%; 
  
}  




@media (max-width:800px) {
  .prog_title
  {
    FONT-SIZE: 15pt;
  }
  .user_entry{
    font-size:8pt;
  }
  input[type="text"],input[type="password"]{
    font-size:8pt;
    height:15pt;
    width:170px;
  }
  input[type="button"],input[type="reset"],input[type="submit"]{
    font-size:8pt;
    padding: 3px 10px;
  }
  .content_main, .content_main .user_entry{
    width:100% !important;
  }
  
  
  .url_finder{
	  
      /*    display:none;  */
      font-size: 6pt;
    
  }
  
  
  #menu {
  
/*   width:auto; */
  
  }
  
  #menu2 {
  
/*   width:auto; */
  
  }
  
  .ui-menu .ui-menu-item-wrapper {
    
  /*  width:150px; 
    text-align:left; */
  }
  
  #txtQuick {
  width: 100%; 
  
}  



    
@font-face{
      font-family: 'Roboto-Thin';
      src: url('font/Roboto-Thin.ttf');
      
     
      
  
}

@font-face{
        font-family: 'Roboto';
      src: url('font/Roboto-Regular.ttf');

  
  
}

@font-face{
   font-family: 'Roboto-Light';
      src: url('font/Roboto-Light.ttf');
  
}   
    

#dialog-modal{
 z-index:10;
 width:780px;
}

.user_data{
  overflow-x:auto;
}

.user_data2
{
     margin: 10px auto;
    color: black;
/*     font-family: lucida grande,tahoma,verdana,arial,sans-serif; */
/*     font-family: Tahoma, Geneva, sans-serif; */
/*     font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;  */
    FONT-FAMILY: Arial,Verdana,'Luxi Sans',Helvetica; 
    
    
    font-size: 13px;
    font-weight: normal;
    border-collapse: collapse;
    background-color:#fafafa;
}

  #sidebarMenu {
    left:10px;
    padding-right:10px;
    FONT-SIZE: 10pt;
  }
  #sidebarMenu > input, #sidebarMenu > ul, .icon_container, .icon_area, .content_display table{
    box-shadow: none !important;
  }
  
  .icon_container a, .icon_container p {
    FONT-SIZE: 7pt;
  }
  
  .icon_container td {
    height: 45px !important;
  }
  
  .icon_container td img{
    width:auto;
    height:100%;
    max-width:100%;
  }
  
  
  

}

@media only screen and (max-width:641px) {
  #sidebarMenu {
    left:5px;
    padding:0;
  }
  .frame_text {
    border: none;
    height: 15px; /*can be anything*/
    width: 40px; /*can be anything*/
    position: relative;
    display:inline-block;
    background-color:transparent;
    line-height:15px;
    color:white;
    FONT-FAMILY: Roboto, Arial,Tahoma,'Luxi Sans',Helvetica;
    letter-spacing: 0.7px;
    FONT-WEIGHT: bold;
    text-align:center;
    margin-right:1px;
    text-decoration:none;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    font-size: 6pt;
  }
  
  .prog_title
  {
    FONT-SIZE: 12pt;
  }
  .prog_desc
  {
   COLOR:#b2b2b2;
    FONT-SIZE: 8pt;
    FONT-WEIGHT: normal;
    FONT-FAMILY: "Oswald", sans-serif;
    PADDING-RIGHT:5px;
    VERTICAL-ALIGN:middle;
    
  }
.prog_ackn
  {
    FONT-WEIGHT: normal;
    FONT-SIZE: 4pt;
    COLOR: #fafafa;
    FONT-FAMILY: Verdana,Arial,'Luxi Sans',Helvetica
  }
  
  
  .mesg_area{
    display:none;
  }

  .login-form{
    background: #eee none repeat scroll 0 0;
     margin-left: auto; 
    margin-right: Auto;

    width:95%;
    border: 1px solid #dadada;
    border-radius:15px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    min-height:auto; /*600px*/ 
    
     margin: 9% auto 4%;
    position: relative;
    width: 26%;
    
  }