/*---------------------------------------------------------------------
    generic ids
---------------------------------------------------------------------*/
#indextitle{background:transparent url(../img/logo.png) left+10px center no-repeat; top:0; left:0; width:100%; height:50px; position:fixed; z-index:1; overflow:hidden; color:#fff;}
#dsheet-bg{	background: transparent url(../img/bg/) center center no-repeat fixed; margin:0; padding:0;  background-size: cover;}
#idheader{position:fixed; width:100%; height:85px; z-index:1;}
#idmenus{position:fixed; top:50px; left:0; width:100%; height:35px; background-color:#404040; }
#idalerts{min-height:100px;  overflow-y:auto;}
#applogo{background:rgba(0, 0, 0, 0.50) url(../img/logo.png) left+10px center no-repeat; top:0; left:0; width:100%; height:50px; position:fixed; z-index:1; overflow:hidden}
#copyright{display:table; padding:15px 10px 15px 10px; position:absolute; bottom:0; right:0; color:#fff; font-family:psysopensans; font-size:1.3em;}
#clock1{width:80px; display:table-cell; text-align:center; }
#dt{display:table-cell; text-align:right;}
#pagecontent{height:calc(100vh - 85px); overflow-y:auto; top:85px; position:absolute; width:100%;}
#sheetcontent{height:calc(100vh - 51px); overflow-y:auto; top:51px; position:absolute; width:100%;}
#bcrumbs{top:50px; position:absolute; width:100%;}
#dsheetshade{ height:100vh; overflow-x:hidden; overflow:hidden; /*background-color:rgba(0, 0, 0, 0.455);*/}
#allcontent{height:calc(100vh - 50px);top:50px; position:relative; padding:0; border:0; }
#smenu{left:0; height:100%; width:250px; display:inline-table; vertical-align:top; transition: 400ms; padding:0; lblnmfield30:0; position:fixed; background-color:#404040; color:#fff;  overflow-y:auto; z-index:100; cursor:pointer;}
    #smenu.is-active { left:-250px;  }
#content{display:inline-block;  height:calc(100vh - 50px); width: calc(100vw - 250px); transition: left 400ms; position:absolute; left:250px; overflow:auto; min-width:400px;}
    #content.is-active {   width:100%;     left: 0;  transition: 400ms;}
#profile_m{display:inline-table; height:50px; right:30px; position:absolute;}


#profileidpic{width:150px; height:180px; background-color:#fff; background-position:center center; background-size:cover; margin:5px; display:inline-table; border:0 #000 solid; background-repeat:no-repeat;}
#profilersqpic{width:150px; height:180px; border-radius:15%; background-color:#fff; background-position:center center; background-size:cover; margin:5px; display:inline-table; border:0 #000 solid; background-repeat:no-repeat;}
#profilesq_pic{width:150px; height:180px; margin:auto; background-color:#fff; background-position:center center; background-repeat:no-repeat; }
#profilepic{width:60px; height:60px; border-radius:50%; background-color:#fff; background-position:center center; margin:10px; display:inline-table; border:2px solid; background-repeat:no-repeat;}
#profilepic_m{width:42px; height:42px; border-radius:50%; background-color:#fff; background-position:center center; margin:4px; display:inline-table; border:0; cursor:pointer; background-repeat:no-repeat;}
#profilepic_s{width:30px; height:30px; border-radius:50%; background-color:#fff; background-position:center center; margin-left:4px; border:0; cursor:pointer; background-repeat:no-repeat;}
#profilepic_sq{width:40px; height:40px; border-radius:25%; background-color:#fff; background-position:center center; margin-left:4px; border:0; cursor:pointer; background-repeat:no-repeat;}
#divseperator{background:transparent url(../img/arrow-u.png) no-repeat center center; height:10px; transition:500ms; cursor:pointer;}
#divseperator.is-collapsed{background:transparent url(../img/arrow-d.png) no-repeat center center; cursor:pointer;}
#barseperator{background-color:#fff; border:2px dashed #266ccf; color:#000; padding:8px 0 0 0; overflow:hidden; height:28px; transition:500ms; cursor:pointer; text-align:center;}
#barseperator.is-collapsed{background-color:#fff; color:#000; cursor:pointer;}
#barseperatorss{background-color:#fff; border:2px dashed #266ccf;  color:#000; padding:5px 0 5px 0; transition:500ms; cursor:pointer; text-align:center;}
#barseperatorss.is-collapsed{background-color:#fff; color:#000; cursor:pointer;}
#midbarseperator{background-color:#fff; border:2px dashed #266ccf; color:#000; padding:4px 0 0 0; overflow:hidden; height:18px; transition:500ms; cursor:pointer; text-align:center;}
#midbarseperator.is-collapsed{background-color:#fff; color:#000; cursor:pointer; font-weight:bold;}

#midbarseperatorgrad{background-color:#fff; background-image: linear-gradient(to right, #ffffff, #e1d4e8,  #ffffff); border:0 dashed #266ccf; color:#000; padding:4px 0 0 0; overflow:hidden; height:18px; transition:500ms; cursor:pointer; text-align:center;}
#midbarseperatorgrad.is-collapsed{background-color:#fff; color:#000; cursor:pointer; font-weight:bold;}

#jhform{height:415px; transition:1000ms; overflow:hidden;}
#jhform.is-collapsed{height:0px;}
#idjh {height: calc(100vh - 540px); overflow-y: auto; transition:1000ms;}
#idjh.is-expand{height: calc(100vh - 166px);}

#idsectionone{height:173px; transition:1000ms; overflow-y:auto;}
#idsectionone.is-collapsed{height:0px;  overflow:hidden;}
#idsectiontwo {height:calc(100vh - 378px); overflow-y: auto; transition:1000ms; }
#idsectiontwo.is-expand{height: calc(100vh - 208px);}
#idtabscroll {height:calc(100vh - 420px); overflow-y: auto; transition:1000ms; }
#idtabscroll.is-expand{height: calc(100vh - 251px);}

#idaccordscroll {height:calc(100vh - 394px); overflow-y: auto; transition:1000ms; }
#idaccordscroll.is-expand{height: calc(100vh - 218px);}

#idsectiononeiv{height:152px; transition:1000ms; overflow-y:auto;}
#idsectiononeiv.is-collapsed{height:0px;  overflow:hidden;}
#idsectiontwoiv {height:calc(100vh - 298px); overflow-y: auto; transition:1000ms; }
#idsectiontwoiv.is-expand{height: calc(100vh - 150px);}
.idpane{height:calc(100vh - 385px); transition:1000ms; }
.idpane.is-expand{height:calc(100vh - 243px);  }



#idbio{height:calc(100vh - 91px); transition:1000ms; overflow-y:auto;}
#idbio.is-collapsed{height:0px;  overflow:hidden;}
#idbioextra {height: 0px; overflow-y: auto; transition:1000ms;}
#idbioextra.is-expand{height: calc(100vh - 91px);}

#idbioss{height:calc(100vh - 156px); transition:1000ms; overflow-y:auto;}
#idbioss.is-collapsed{height:0px;  overflow:hidden;}
#idbiossextra {height: 0px; overflow-y: auto; transition:1000ms;}
#idbiossextra.is-expand{height: calc(100vh - 156px);}

#idinterview{height:472px; transition:1000ms; overflow:hidden;}
#idinterview.is-collapsed{height:0px;}
#idcomments {height: calc(100vh - 617px); overflow-y: hidden; transition:1000ms;}
#idcomments.is-expand{height: calc(100vh - 146px); overflow-y: auto;}

#idreqform{height:295px; transition:1000ms; overflow:hidden;}
#idreqform.is-collapsed{height:0px;}
#idreq {height: calc(100vh - 464px); overflow-y: auto; transition:1000ms;}
#idreq.is-expand{height: calc(100vh - 177px); overflow-y: auto;}

#idexpform{height:190px; transition:1000ms; overflow:hidden;}
#idexpform.is-collapsed{height:0px;}
#idexpdetails {height: calc(100vh - 364px); overflow-y: auto; transition:1000ms;}
#idexpdetails.is-expand{height: calc(100vh - 177px); overflow-y: auto;}

#idexpstaffform{height:230px; transition:1000ms; overflow:hidden;}
#idexpstaffform.is-collapsed{height:0px;}
#idexpstaffdetails {height: calc(100vh - 414px); overflow-y: auto; transition:1000ms;}
#idexpstaffdetails.is-expand{height: calc(100vh - 177px); overflow-y: auto;}

#idmreqform{height:350px; transition:1000ms; overflow:hidden;}
#idmreqform.is-collapsed{height:0px;}
#idmreq {height: calc(100vh - 484px); overflow-y: auto; transition:1000ms;}
#idmreq.is-expand{height: calc(100vh - 134px); overflow-y: auto;}

#idsreqform{height:215px; transition:1000ms; overflow:hidden;}
#idsreqform.is-collapsed{height:0px;}
#idsreq {height: calc(100vh - 392px); overflow-y: auto; transition:1000ms;}
#idsreq.is-expand{height: calc(100vh - 249px); overflow-y: auto;}

#idpdpgrid{height:190px; transition:1000ms; overflow:hidden;}
#idpdpgrid.is-collapsed{height:0px;}
#idtneeds {height: calc(100vh - 373px); overflow-y: auto; transition:1000ms;}
#idtneeds.is-expand{height: calc(100vh - 186px); overflow-y: auto;}

#idnavtabs{left:0;  width:230px; margin:0; display:inline-table;   padding:0; border:0; overflow-y:auto; position:fixed;  background-color:#404040;  z-index:1; cursor:pointer;}
    #idnavtabs.is-active { width:30px; left:0;  }
#idappraisefrm{display:inline-block; padding:0;  margin:0; width: calc(100vw - 233px); transition: left 400ms;  position:fixed; left:232px; overflow:auto;}
    #idappraisefrm.is-active {   width: calc(100vw - 36px);     left: 35px;  transition: 400ms;}
#idmenutabs{display:block; width:100%;}
    #idmenutabs.is-active { display:none; }
#idmenuicos{ display:none;}
    #idmenuicos.is-active { display:block; width:100%;}
#idvehiclefrm{display:inline-block; padding:0;  margin:0; width: calc(100vw - 233px); transition: left 400ms;  position:fixed; left:232px; overflow:auto;}
    #idvehiclefrm.is-active {   width: calc(100vw - 36px);     left: 35px;  transition: 400ms;}

#idpreload { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
#idpreloadstaff { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
#idpreloadchat { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
#idpreloadanniv { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
#idpreloadpfile { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
#idbdaypreload { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}

#tblSubj li { padding-left: 25px; margin-bottom: 10px; }
#tblSubj li:hover{ font-weight:bold;}
#tblSubj li::before { content: "\f0a4"; /* Font Awesome checkmark icon (fas fa-hand-point-right) */ font-family: "Font Awesome 5 Free"; position:absolute; margin: 0 10px 0 5px; left:0;}

/*---------------------------------------------------------------------
    generic classes
---------------------------------------------------------------------*/
.clientlogo{background:transparent url(../img/client-logo.png) left center no-repeat; height:70px; width:auto;}
.genericpreloader { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
.colorpallet{	width:30px; height:20px; border:1px solid #ccc; display:inline-table; cursor:pointer; margin:10px; border-radius:3px;}
	.colorpallet.gr	{		background-color:#51b12d;	}
	.colorpallet.bl	{		background-color:#266ccf;	}
	.colorpallet.pp	{		background-color:#d3306a;	}
	.colorpallet.yl	{		background-color:#fcaf0a;	}
	.colorpallet.mv	{		background-color:#b63dac;	}
	.colorpallet.pg	{		background-color:#009688;	}
	.colorpallet.gs	{		background-color:#393838;	}
	.colorpallet.or	{		background-color:#bb0a00;	}
    .colorpallet.nb	{		background-color:#000080;	}
    .colorpallet.lg	{		background-color:#96c052;	}
    .colorpallet.df	{		background-color:#e61c22;	}

#csspreload { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
.cursorhand{cursor:pointer;}
.uname{background:  url(../img/uname.png) no-repeat left+8px center; text-indent:23px;}
.pword{background: url(../img/pword.png) no-repeat left+8px center; text-indent:23px;}
.alignright{text-align:right;}
.centerobj {justify-content: center; display: flex; }
.aligncenter{text-align:center;}
.aligntop{vertical-align:top !important;}
.absolutemiddle { text-align: center; vertical-align: middle; }
.absolutecenter {    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.absolutevcenter {    position: absolute; left: 15%; top: 50%; transform: translate(-15%, -50%); -webkit-transform: translate(-15%, -50%);}
.valignmiddle{vertical-align:middle;}
.nodisplay{display:none;}
.displayblock{display:block;}
.inlineblock{display:inline-block;}
.inlinetable{display:inline-table;}
.tabledisplay{display:table;}
.celldisplay{display:table-cell;}
.dottedunderline{text-decoration:underline;}
.divbcrumbs{top:50px; position:absolute; width:100%;}
.boxshadow{  margin: 10px; border: 1px solid #ccc; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);}
.boxshadowmild{  margin: 10px; border: 1px solid #ebebeb; box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);}
.box_450_300{width:450px; height:300px;}

.cssads {width: 50%; height:100vh;  border:0}
.cssbanner{width:35%; border:0;}

.submenubg { background-image: linear-gradient(to left, rgba(255,255,255,255), rgba(0, 0, 0, 0))}

.marginauto{margin:auto;}
.margin3{margin: 3px;}
.margin5{margin: 5px;}
.margin10{margin: 10px;}
.marginlr2{margin: 0 2px 0 2px;}
.marginl10{margin: 0 0 0 10px;}

.margintb2{margin: 2px 0 2px 0;}
.margintb10{margin: 10px 0 10px 0;}
.marginlr10_5{margin: 0 5px 0 10px;}

.round50 {width:50px; cursor:pointer; height:50px; border-radius:50%;}

.qlinkpholder { margin:3px 10px; padding:10px 15px 10px 15px; -moz-border-radius: 25px;	-webkit-border-radius: 25px;  border:1px solid #ebebeb;	border-radius: 25px; cursor:pointer;  background-color:#fff;  font-weight:bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
    .qlinkpholder:hover{background: #ebebeb;  color: #000;    -webkit-transition: all 0.4s;	transition: all 0.4s;}

.docbg { background: transparent url(../img/largedocs.png) center center no-repeat; }

.bdayimg{width:55px; height:65px; margin:5px 30px 10px 0; background-color:transparent; border:1px solid #ebebeb; background-size:cover; background-position:center center; background-repeat:no-repeat;}
.uprofileinit{width:33px; height:33px; margin:auto; border-radius:50%; border:1px solid #ebebeb; cursor:pointer;  background-size:cover; background-position:center center; background-repeat:no-repeat;}
    .uprofileinit.min{width:30px; height:30px; }
.uprofilepic{width:33px; height:33px; margin:auto; border-radius:50%; background-color:transparent; border:1px solid #ebebeb; cursor:pointer;  background-size:cover; background-position:center center; background-repeat:no-repeat;}
    .uprofilepic.min{width:30px; height:30px; }
    .uprofilepic.mid{width:42px; height:42px; }
    .uprofilepic.large{width:50px; height:50px; }
    .uprofilepic.vlarge{width:80px; height:80px; }
    .uprofilepic.xlarge{width:100px; height:100px; }
.uprofilepicsq{width:33px; height:33px; margin:auto; background-color:transparent; border:1px solid #ebebeb; cursor:pointer;  background-size:cover; background-position:center center; background-repeat:no-repeat;}
    .uprofilepicsq.xlarge{width:175px !important; height:200px !important;}
.emprofilepic{width:100px; height:100px; margin:auto; border-radius:40%; background-color:transparent; border:2px solid #ebebeb; cursor:pointer;  background-size:cover; background-position:top center; background-repeat:no-repeat;}
.gear{position:absolute; top:calc(50% - 10px); left:10px; width:100%; height:100%; z-index:1000;}
.preload{background: transparent url(../img/preloader.gif) center center no-repeat; }
.earthpreload{background: transparent url(../img/Earth_animated.gif) center center no-repeat; }
.csspreload { position: absolute; top: 0;left: 0;z-index: 1000;width: 30px;height: 30px;top:50%;left: 50%; margin-top: -30px;margin-right: 0; margin-bottom: 0; margin-left: -30px;}
.rotatediv {  -webkit-animation-name: rotateThis;  -webkit-animation-duration:2s;  -webkit-animation-iteration-count:infinite;  -webkit-animation-timing-function:linear;} 
.dboard-sortable { list-style-type: none; padding: 0; width:calc(100vw - 270px); margin:0 auto 0 auto; transition: left 400ms}
    .dboard-sortable.is-active{   width:100%;  transition: 400ms;}
.dboard-sortable_n  {display:inline-table; width:calc(50% - 25px); margin:10px; cursor: pointer; }
.dboard-sortable_l  {float:left; width:calc(70% - 25px); margin:10px; cursor: pointer; }
.dboard-sortable_s  {float:left; width:calc(30% - 25px); margin:10px; cursor: pointer; }
.dboard-sortable_m  {display:inline-table; width:calc(32.5% - 20px); margin:10px; cursor: pointer; }
.dboard-sortable_mflex  {width:calc(32.5% - 20px); margin:10px; cursor: pointer; }
.dashboardpholder_m{width :100%; min-width:280px; height:90px; background-color:rgba(235, 235, 235, 0.40);}
.dashboardpholder_t{width :100%; min-width:280px; height:212px; background-color:rgba(235, 235, 235, 0.40);}
.dashboardpholder{width :100%; min-width:200px; height:205px; -webkit-box-shadow:  0 1px 1px #ccc, inset 0 1px 1px #ccc;	box-shadow:  0 1px 1px #ccc, inset 0 1px 1px #ccc; padding:2px; overflow-y:auto;}
.dashboardpholderflx{width :100%; min-width:200px; min-height:205px; -webkit-box-shadow:  0 1px 1px #ccc, inset 0 0.5px 0.5px #ccc;	box-shadow:  0 0.5px 0.5px #ccc, inset 0 0.5px 0.5px #ccc; padding:1px; overflow-y:auto;}
.dashboardpholderflx_a{width :100%; min-width:200px; min-height:100px; -webkit-box-shadow:  0 1px 1px #ccc, inset 0 0.5px 0.5px #ccc;	box-shadow:  0 0.5px 0.5px #ccc, inset 0 0.5px 0.5px #ccc; padding:1px; overflow-y:auto;}
.dashboardpholderalt{width :100%; min-width:200px; min-height:280px; -webkit-box-shadow:  0 1px 1px #ccc, inset 0 0.5px 0.5px #ccc;	box-shadow:  0 0.5px 0.5px #ccc, inset 0 0.5px 0.5px #ccc; padding:1px; clear:both; }
.validatebullet { padding: 2px 0 2px 20px; background-image:url(../img/exclamation.png); background-position:center left; background-repeat: no-repeat;}
.gridheaderlite{color:#000; background-color:rgb(234 164 109 / 0.80); font-family:psysopensans; font-size:1em; height:35px; font-weight:100;}
.infobox{ border:1px dotted silver; background-color:#ebebeb; padding:5px 10px 10px 10px; -moz-border-radius: 10px;	-webkit-border-radius: 10px;	border-radius: 10px;  margin:8px auto 8px auto;}
.notebox { border: 1px dotted silver; background-color: #ebebeb; padding: 5px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin: 5px auto 5px auto;}

.pholder_hrico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_hrm.png)center center; background-size: cover;}
.pholder_mdico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_medicals.png) center center; background-size: cover;}
.pholder_cmico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_vehicle.png) center center; background-size: cover;}
.pholder_vcico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_vacation.png) center center; background-size: cover;}
.pholder_pyico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_payment.png) center center; background-size: cover;}
.pholder_vmico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_fleet.png) center center; background-size: cover;}
.pholder_stico{width :100%; min-width:280px; height:182px; background:transparent url(../img/dash_settings.png) center center; background-size: cover;}

.cmdbtnpxn{display:inline-table; padding: 0 10px 0 0; float:right;}
.floatbtnpxn{display:inline-table; padding: 0 10px 0 0; float:right;}
.adjustedZIndex{ z-index: 100; }
.dynmenustyle{background-color:#fff;}
.pxnrlv{position:relative;}
.rowbtnpxn{float:right; display:inline-table; background-color:transparent; z-index:100; position: relative;} /*rgba(255, 255, 255, 0.80)*/

.tbarico{width:30px; height:30px; top:0 !important; margin:0 3px 0 3px; cursor:pointer; display:inline-table;}

.formwidth80_r10 {width:80%; border:1px solid #ccc; border-radius:10px; margin:8px auto 12px auto;  padding:10px 0}
.formwidth80_r10_alt {width:80%; border:1px solid #ccc; border-radius:10px; margin:8px auto 12px auto; }
.formwidth_r10_alt {width:100%; border:1px solid #ccc; border-radius:10px; margin:8px auto 12px auto; }

.formwidth80_noborder {width:80%; margin:auto; border:0 solid #ccc; border-radius:10px; margin:8px auto 12px auto;  padding:10px 0}
.formwidth90_r10 {width:90%;  border:1px solid #ccc; border-radius:10px; margin:8px auto 12px auto;  padding:10px 0}

.pad0{padding:0;}
.pad3{padding:3px;}
.pad5{padding:5px;}
.pad10{padding:10px;}
.padtb10{padding:10px 0 10px 3px;}
.padtb10_alt {padding:10px 0 10px 0;}
.padlr5{padding:0 5px 0 5px;}
.padlr20{padding:0 20px 0 20px;}
.pad_otp{padding:12px 3px 12px 12px;}
.height100_225{height:calc(100vh - 225px);}
.height100_175{height:calc(100vh - 178px);}
.height20{height:20px;}
.widthmin300{min-width:300px;}
.width6{width:6px;}
.width15{width:15px !important;border:0px;}
.width20{width:20px; border:0px;}
.width15p{width:15%; border:0px;}
.width25p{width:25%; border:0px;}
.width30p{width:30%; border:0px;}
.width35p{width:35%; border:0px;}
.width35{width:35px; border:0px;}
.width40p{width:40%; border:0px;}
.width45p{width:45%; border:0px;}
.width48p{width:48%; border:0px;}
.width50p{width:50%; border:0px;}
.width50{width:50px; border:0px;}
.width53p{width:53%; border:0px;}
.width55p{width:55%; border:0px;}
.width60p{width:60%; border:0px;}
.width65p{width:65%; border:0px;}
.width70p{width:70%; border:0px;}
.width80p{width:80%; border:0px;}
.width80{width:80px; border:0px;}
.width85p{width:85%; border:0px;}
.width90p{width:90%; border:0px;}
.width95p{width:95%; border:0px;}
.width98p{width:98%; border:0px;}
.width100p{width:100%;}
.width100_10p{width:calc(100% - 10px);}
.width100_32p{width:calc(100% - 32px);}
.width100_150p{width:calc(100% - 150px);}
.width100_170p{width:calc(100% - 170px);}
.width100_250p{width:calc(100% - 250px);}
.width70_35{width:calc(100% - 35px)}
.widthmax20 { max-width: 20px; }
.txtvarlength640{width:640px}

.my-div { border: 1px solid #ff0000; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }

.rotate30 {transform: rotate(30deg); }
.rotate15 {transform: rotate(15deg); }
.rotate10 {transform: rotate(10deg); }
.rotate5a {transform: rotate(-5deg); }
.rotated90a {transform: rotate(-90deg);}

.txtindent20{text-indent:20px;} 

.clearfix{clear:both;}
.clearfix1{clear:both; height:1px;}
.clearfix2{clear:both; height:2px;}
.clearfix20{clear:both; height:20px;}
.clearfix30{clear:both; height:30px;}
.clearfix5{clear:both; height:5px;}
.clearfix10{clear:both; height:10px;}scroll
.clearfix50{clear:both; height:50px;}
.clearfix100{clear:both; height:100px;}

.repViewer-YScroll{overflow-y:auto !important;}

.whitebg{ background-color:#fff;}
.lightgraybg{ background-color:#ebebeb;}

.lblalignmiddle{margin: 0;position: absolute;top: 50%; transform: translate(0, -50%); }
.tblmmfield40{width:40%; color:#ff0000; text-align:left;}
.lblmm{color:#ff0000; text-align:left; display:table;}
.lblmmfield{width:15%; color:#ff0000; text-align:right; display:inline-table;}
.lblmmfield30{width:30%; color:#ff0000; text-align:right; display:inline-table;}
.lblmmfield30_l{width:30%; color:#ff0000; text-align:left; display:inline-table;}
.lblmmfieldalt{width:15%; color:#ff0000; text-align:right; vertical-align:top; margin-top:10px; display:inline-table;}
.lblmmfieldalt30{width:30%; color:#ff0000; text-align:right; vertical-align:top; margin-top:10px; display:inline-table;}
.lblmmfield20{width:20%; color:#ff0000; text-align:right; display:inline-table;}
.lblmmfieldalt20{width:20%; color:#ff0000; text-align:right; vertical-align:top; margin-top:10px; display:inline-table;}
.lblnmfield{width:15%; color:#000; text-align:right; display:inline-table;}
.lblnmfield_l{width:15%; color:#000; text-align:left; display:inline-table;}
.tblnmfield20{width:20%; color:#000; text-align:left; display:inline-table;}
.tblnmfield30{width:30%; color:#000; text-align:left; display:inline-table;}
.tblnmfield40{width:40%; color:#000; text-align:left;}
.tblnmfield40il{width:40%; color:#000; text-align:left; display:inline-table;}
.lblnmfield_w{width:15%; color:#fff; text-align:right; display:inline-table;}
.lblnmfield30{width:30%; color:#000; text-align:right; display:inline-table;}
.lblnmfield30_l{width:30%; color:#000; text-align:left; display:inline-table;}
.lblnmfieldalt{width:15%; color:#000; text-align:right; vertical-align:top; margin-top:10px; display:inline-table;}
.lblnmfieldalt30{width:30%; color:#000; text-align:right; vertical-align:top; margin-top:10px; display:inline-table;}
.fieldhold{display:inline-table;}
.fieldhold_20{display:inline-table; width:20%;}
.fieldhold_30{display:inline-table; width:30%;}
.fieldhold_75{display:inline-table; width:calc(90% - 30%);}
.fieldhold_85{display:inline-table; width:calc(90% - 20%);}
.fieldhold_90{display:inline-table; width:calc(90% - 15%);}
.subtitlehold{ border:1px solid #ebebeb; padding:10px; border-radius:0 25px 25px 0; width:300px; }
.spanlblmm{ color:#ff0000; clear:both; margin:0 0 2px 1px}
.spanlblnm{ color:#000; clear:both; margin:0 0 2px 1px}

.vacancybg { background: transparent url(../img/vacancy.png) no-repeat center center; }
.hiringbg { background: transparent url(../img/hiring.png) no-repeat center center; height:250px; }
.jobaddlst{padding: 30px 0 0 80px}
.jobwatchcontainer{width: 85%}
.jobwatchthankyou {background: transparent url(../img/thankyou.jpg) no-repeat center center; background-size:contain; width:600px; aspect-ratio: 16 / 9;;}

.border_w{border:1px solid #fff;}
.db_headcount{height:100%; width:90px; display:inline-block; background:#e2240b url(../img/staff.png) no-repeat center center;}
.db_branches{height:100%; width:90px; display:inline-block; background:#98be2a url(../img/branches.png) no-repeat center center;}
.db_appraise{height:100%; width:90px; display:inline-block; background:#199cd9 url(../img/appraise.png) no-repeat center center;}

.divtotal { margin:3px 5px; font-weight:bold; font-size:1.1em; padding:5px; }
.activemodule{height:24px; width:30px; left:220px; top:17px; position:absolute; cursor:pointer;}
.olist_circle{margin:5px; width:30px; height:30px; display:flex; align-items: center; justify-content: center; border:1px solid;  -moz-border-radius: 50%;	-webkit-border-radius: 50%; border-radius:50%}
.olist_circle_alt{margin:0 5px; width:30px; height:30px; display:flex; align-items: center; justify-content: center; border:1px solid;  -moz-border-radius: 50%;	-webkit-border-radius: 50%; border-radius:50%}
.formwith90 {width:90%; margin:auto;  margin:8px auto 12px auto; padding:10px 0 10px 0;}
.bdaybaloon{background:transparent url(../img/bday-balloon.png) no-repeat top left; top:0; left:0;}
.filterwm{background:#fff url(../img/filter.png) left+3px center no-repeat; text-indent:35px;}
.watermark{background: transparent url(../img/watermark.png) center center no-repeat;}
.newtag{background: transparent url(../img/new.png) top left no-repeat; text-indent:25px; }
.newtag10{background: transparent url(../img/new.png) top left no-repeat; text-indent:10px; }
.expand{background: transparent url(../img/expand.png) center center no-repeat; width:24px; height:24px; vertical-align:middle; }
.logsession{background: #fff url(../img/logsession.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.datepicker{background: #fff url(../img/datepicker.png) no-repeat right+5px center; cursor:pointer;}
.dashbprofile{background: transparent url(../img/miniprofile.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.quickmail{background: #fff url(../img/quickmail.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.piechart{background: #fff url(../img/piechart.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.quicklinks{background: #fff url(../img/quicklink.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.mnuquicklnk{background: transparent url(../img/quicklink.png) no-repeat left+5px center; text-indent:30px;}
.linkarrow{background-image:url(../img/linkarrow.png); background-repeat:no-repeat; background-position:left+3px center; text-indent:35px; padding:5px 0 5px 0;}
.modquicklnk{background: transparent url(../img/leftnavigation.png) no-repeat left+5px center; text-indent:30px;}
.menuarrow{background-image:url(../img/menuarrow.png); background-repeat:no-repeat; background-position:left+3px center; text-indent:35px; padding:5px 0 5px 0;}
.dashbalert{background: #fff url(../img/alert.png) no-repeat left+5px center; text-indent:30px; padding:5px 0 5px 0;}
.clocksm{background: transparent url(../img/clock_sm.png) no-repeat left+5px center; }
.dttmpxn{display:inline-table; height:50px; left:calc(50vw - 100px); position:absolute;}
.dottedtop{border-top:1px dotted #ccc;}
.dottedbottom{border-bottom:1px dotted #ccc;}
.dottedborder{border:1px dotted #ccc;}
.dottedborderblk{border:1px dotted #000;}
.solidborderblk{border:1px solid #000;}
.dashedbottom{border-bottom:1px dashed #ccc;}
.blackdottedbottom{border-bottom:1px dotted #000;}
.blacksolidbottom{border-bottom:1px solid #000;}
.graylinebottom{border-bottom:0.5px solid #ccc;}
.colorcodepholder{width:8px;}
.topleft {  position: relative;  font-family: psyscentury-gothic;  font-size: 1.1em;padding:3px 0 0 0}
    .topleft:before, .topleft:after {  content: "";  position: absolute;  top: -1px; left:0; }
    .topleft:before {  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(transparent, #1a2435);  background-image: -moz-linear-gradient(transparent, #1a2435);  background-image: -o-linear-gradient(transparent, #1a2435);}
    .topleft:after {  right: 0;  height: 1px;  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(left, #1a2435, transparent);  background-image: -moz-linear-gradient(left, #1a2435, transparent);  background-image: -o-linear-gradient(left, #1a2435, transparent);}

.botleft {  position: relative;  font-family: psyscentury-gothic;  font-size: 1.1em;padding:3px 0 1px 0}
    .botleft:before, .botleft:after {  content: "";  position: absolute;  bottom: -1px; left:0; }
    .botleft:before {  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(transparent, #1a2435);  background-image: -moz-linear-gradient(transparent, #1a2435);  background-image: -o-linear-gradient(transparent, #1a2435);}
    .botleft:after {  right: 0;  height: 1px;  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(left, #1a2435, transparent);  background-image: -moz-linear-gradient(left, #1a2435, transparent);  background-image: -o-linear-gradient(left, #1a2435, transparent);}

.bot-left {  position: relative;  font-family: psyscentury-gothic;  font-size: 1.1em;text-indent:calc(15% + 3px); padding:3px 0 1px 0}
    .bot-left:before, .bot-left:after {  content: "";  position: absolute;  bottom: -1px;  left: calc(15% + 3px);}
    .bot-left:before {  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(transparent, #1a2435);  background-image: -moz-linear-gradient(transparent, #1a2435);  background-image: -o-linear-gradient(transparent, #1a2435);}
    .bot-left:after {  right: 0;  height: 1px;  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#1a2435), to(transparent));  background-image: -webkit-linear-gradient(left, #1a2435, transparent);  background-image: -moz-linear-gradient(left, #1a2435, transparent);  background-image: -o-linear-gradient(left, #1a2435, transparent);}

.bot-leftw {  position: relative;  font-family: psyscentury-gothic;  font-size: 1.1em;text-indent:calc(15% + 3px); padding:3px 0 1px 0}
    .bot-leftw:before, .bot-leftw:after {  content: "";  position: absolute;  bottom: -1px;  left: calc(15% + 3px);}
    .bot-leftw:before {  background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#fff), to(transparent));  background-image: -webkit-linear-gradient(transparent, #fff);  background-image: -moz-linear-gradient(transparent, #fff);  background-image: -o-linear-gradient(transparent, #fff);}
    .bot-leftw:after {  right: 0;  height: 1px;  background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#fff), to(transparent));  background-image: -webkit-linear-gradient(left, #fff, transparent);  background-image: -moz-linear-gradient(left, #fff, transparent);  background-image: -o-linear-gradient(left, #fff, transparent);}

.avoidpagebreak { page-break-inside: avoid !important; }
.flexalign{display: flex; flex-wrap: wrap;justify-content: center;}
.flexalignleft{display: flex; flex-wrap: wrap;justify-content: left;}
.flexalignright{display: flex; flex-wrap: wrap;justify-content: right;}
.panel_lr{display:inline-table; width:45%; vertical-align:top; margin:-4px;}
.panel_mid{display:inline-table; width:10%; text-align:center; margin:20px -4px;}
.panel_btn{margin:1px; display:table; margin:auto; width:60%}
.panel_l25{display:inline-table; width:25%; vertical-align:top; margin:0 -4px 0 0;}
.panel_l30{display:inline-table; width:30%; vertical-align:top; margin:0 -4px 0 0;}
.panel_l35{display:inline-table; width:35%; vertical-align:top; margin:0 -4px 0 0;}
.panel_r55{display:inline-table; width:55%; vertical-align:top; margin:-2px;}
.panel50{display:inline-table; width:50%; vertical-align:top; margin:-4px;}
.panel50_10{display:inline-table; width:calc(50% - 10px); vertical-align:top; margin:-4px;}
.panel10{display:inline-table; width:10px; vertical-align:top;}
.panel_l40{width:40%; display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_l60{width:60%; display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_l65{display:inline-table; width:65%; vertical-align:top; margin:0 -4px 0 0;}
.panel_l75{display:inline-table; width:75%; vertical-align:top; margin:0 -4px 0 0;}
.panel_r25{width:calc(100% - 75%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r35{width:calc(100% - 65%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r40{width:calc(100% - 60%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r60{width:calc(100% - 40%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r65{width:calc(100% - 35%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r70{width:calc(100% - 30%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_r75{width:calc(100% - 25%); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_50_80{width:calc(50% - 80px); display:inline-table; margin:0 -4px 0 0; vertical-align:top;}
.panel_38p {width:38%}
.panel_59p {width:59%}
.panel_49{ overflow-y:auto; width:49%; margin:0 5px 0 5px; }
.keyrescompare { width:45%; cursor:pointer; }
.gridbuttonpholder{width:20px; text-align:center;}
.propheader {background:transparent url(../img/menu.png) right center no-repeat;}
.bell{background:transparent url(../img/bell.png) left center no-repeat; padding:3px 0 3px 0;}

.borderblack{border: 1px solid #000;}
.borderldotted{border-left: 1px dotted #ccc;}
.borderlsolid{border-left: 1px solid #ccc;}
.blink_me { -webkit-animation-name: blinker;    -webkit-animation-duration: 3s;    -webkit-animation-timing-function: linear;    -webkit-animation-iteration-count: infinite;    -moz-animation-name: blinker;    -moz-animation-duration: 3s;    -moz-animation-timing-function: linear;    -moz-animation-iteration-count: infinite;    animation-name: blinker;    animation-duration: 3s;    animation-timing-function: linear;    animation-iteration-count: infinite;}
.shadow-line { border: none; height: 2px; background: #333; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);}
@-moz-keyframes blinker {   0% { opacity: 1.0; }    50% { opacity: 0.0; }    100% { opacity: 1.0; }}
@-webkit-keyframes blinker { 0% { opacity: 1.0; }    50% { opacity: 0.0; }    100% { opacity: 1.0; }}
@keyframes blinker { 0% { opacity: 1.0; }    50% { opacity: 0.0; }    100% { opacity: 1.0; }}
/*-----------------------------------------------------------------
    record status
------------------------------------------------------------------*/
.statusnew { background-color: #fcec67; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusdel { background-color: #ff0000; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusact { background-color: #006600; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusatv { background-color: #51b12d; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusach { background-color: #660600; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusrcl { background-color: #0c0c86; border: 0;  width: 6px; height: 20px; margin: auto;}
.statusdis { background-color: #cccccc; border: 0;  width: 6px; height: 20px; margin: auto;}

.star { background:transparent url(../img/star.png) center center no-repeat;  width: 16px; height: 16px; margin: auto;}
.gridstar { background:transparent url(../img/star.png) center center no-repeat;  width: 20px; min-height: 25px; margin: auto;}
.issup_av { background:transparent url(../img/sup_av.png) center center no-repeat;  width: 20px; min-height: 25px; margin: auto;}
.issup_ia { background:transparent url(../img/sup_ia.png) center center no-repeat;  width: 20px; min-height: 25px; margin: auto;}
/*-----------------------------------------------------------------
    default page designs
------------------------------------------------------------------*/
.settings{background: transparent url(../img/st_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.fleetmngr{background: transparent url(../img/vm_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.payments{background: transparent url(../img/py_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.vacation{background: transparent url(../img/vc_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.carmaintenance{background: transparent url(../img/cm_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.medicals{background: transparent url(../img/md_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
.humanresource{background: transparent url(../img/hr_b48.png) left+10px center no-repeat; text-indent:60px; min-height:48px; }
/*---------------------------------------------------------------------
    animation
---------------------------------------------------------------------*/
@-webkit-keyframes rotateThis {  from {-webkit-transform:scale(0.5) rotate(0deg);}  to {-webkit-transform:scale(0.5) rotate(360deg);}} 
/*---------------------------------------------------------------------
    cheque template placeholders
---------------------------------------------------------------------*/
.draggable_placeholder_set1 { font-size: 15pt; min-width:250px; cursor:pointer; border:0; display:inline-table; background-color:#000; color:#fff;}
.draggable_placeholder_set2 { font-size: 15pt; min-width:25px; cursor:pointer; border:0;  display:inline-table; background-color:#000; color:#fff;}
.draggable_placeholder_set3 { font-size: 15pt; min-width:35px; cursor:pointer; border:0;  display:inline-table; background-color:#000; color:#fff;}
.draggable_placeholder_set4 { font-size: 15pt; min-width:100px; cursor:pointer; border:0;  display:inline-table; background-color:#000; color:#fff;}
.draggable_sigholder { height: 74px; min-width:168px; cursor:pointer; border:0.5px solid #000;  display:inline-table; background:transparent url(../img/sign_tpl.png) no-repeat center center;}
/*---------------------------------------------------------------------
    color picker
---------------------------------------------------------------------*/
.picker {border-radius: 5px;	width: 36px;	height: 36px;	cursor: pointer;-webkit-transition: all linear .2s;	-moz-transition: all linear .2s;-ms-transition: all linear .2s;	-o-transition: all linear .2s;	transition: all linear .2s;border: thin solid #000;}
.picker:hover {	transform: scale(1.1);}
.colorpicker {border-radius: 50%;	width: 20px;	height: 20px;	cursor: pointer;-webkit-transition: all linear .2s;	-moz-transition: all linear .2s;-ms-transition: all linear .2s;	-o-transition: all linear .2s;	transition: all linear .2s;border: thin solid #000;}
.colorpicker:hover {	transform: scale(1.1);}
.pickerfld {
    border-radius: 2px;
    width: 100px;
    height: 32px;
    cursor: pointer;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -ms-transition: all linear .2s;
    -o-transition: all linear .2s;
    transition: all linear .2s;
    border: thin solid #ccc;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);
}
.pickerfld:hover {	transform: scale(1.05);}


.li_vac {list-style-image: url(../img/logsession.png);}
.li_doc {list-style-image: url(../img/docs.png);}
.li_pmng {list-style-image: url(../img/perf_mng.png);}
.li_not {list-style-image: url(../img/pin_notice.png);}
.li_hdsk {list-style-image: url(../img/help-desc.png);}

.li_none {  list-style: none; padding: 10px 0 10px 0; position: relative;}
/*---------------------------------------------------------------------
    staff grid list
---------------------------------------------------------------------*/
.gridstaffdir {display: flex; flex-wrap: wrap;justify-content: center;}
    .gridstaffdir-item { width: 400px; min-height: 160px; margin: 10px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}
        .gridstaffdir-item img:hover { opacity: 0.7; }

    .gridstaffdir-item div.rowOption{filter:alpha(opacity=100);opacity:0;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}
    .gridstaffdir-item:hover div.rowOption{filter:alpha(opacity=100);opacity:1;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-out;}

/*---------------------------------------------------------------------
    gallery
---------------------------------------------------------------------*/
.gallery {display: flex; flex-wrap: wrap;justify-content: center;}
.gallery-item { width: 200px; height: 200px; margin: 10px; overflow: hidden; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);}
    .gallery-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
        .gallery-item img:hover { opacity: 0.7; }
.gallery-mini-item { width: 80px; height: 70px; margin: 10px; overflow: hidden; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);}
    .gallery-mini-item img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
        .gallery-mini-item img:hover { opacity: 0.7; }
.lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index:1000;}

    .lightbox img { max-width: 80%; max-height: 80%; object-fit: contain;}
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 72px; font-weight: bold; cursor: pointer; z-index: 1001;}
.prev { left: 10px; }
.next {right: 10px; }

/*---------------------------------------------------------------------
    help desk
---------------------------------------------------------------------*/
.nested-table { display: none;}
.tracknew{background-color:#ff6a00; color:#fff; padding:5px 0 5px 0; width:100%; text-transform:uppercase; text-align:center; font-weight:bold; font-size:1.2em}
.trackopen{background-color:#05409c; color:#fff; padding:5px 0 5px 0; width:100%; text-transform:uppercase; text-align:center; font-weight:bold; font-size:1.2em}
.trackonhold{background-color:#752719; color:#fff; padding:5px 0 5px 0; width:100%; text-transform:uppercase; text-align:center; font-weight:bold; font-size:1.2em}
.trackclosed{background-color:#999; color:#fff; padding:5px 0 5px 0; width:100%; text-transform:uppercase; text-align:center; font-weight:bold; font-size:1.2em}
.gridrow{-moz-border-radius: 3px;	-webkit-border-radius: 3px;	border-radius: 3px; box-shadow:2px 2px 1px #ccc; height:40px; margin:10px 0 10px 0}
    .gridrow.noshadow{box-shadow:2px 2px 1px #fff;}
.grayrow{background-color:#ebebeb;}
.pagination {  margin-top: 10px;}
    .pagination button { margin-right: 5px; }

/*---------------------------------------------------------------------
    typing cursor
---------------------------------------------------------------------*/
#typing-text { display: inline-block;}
/* Blinking cursor animation */
.cursor { display: inline-block; width: 8px; /* Adjust the width of the cursor as needed */height: 20px; /* Adjust the height of the cursor as needed */background-color: black; /* Cursor color */animation: blink 0.7s infinite;}
@keyframes blink {0%, 100% {opacity: 0;}50% {opacity: 1;}}
/*---------------------------------------------------------------------
    birthday bubble
---------------------------------------------------------------------*/
.bubble-container { position: fixed; left: 10px; bottom: 10px;  z-index: 5000;}
.bubble { color: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; margin-bottom: 10px; position: relative; width: 300px;}
    .bubble.show { opacity: 1; transform: translateY(0);}
.redbubble { background-color:#ff0101; color: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; margin-bottom: 10px; position: relative; width: 300px;}
    .redbubble.show { opacity: 1; transform: translateY(0);}
.greenbubble { background-color:#51b12d; color: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; margin-bottom: 10px; position: relative; width: 300px;}
    .greenbubble.show { opacity: 1; transform: translateY(0);}
.whiteshadebubble { background: linear-gradient(to right, #ebebeb, #636363); color: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; margin-bottom: 10px; position: relative; width: 300px;}
    .whiteshadebubble.show { opacity: 1; transform: translateY(0);}
.moonlightshadebubble { background: linear-gradient(to right, #ebebeb, #1a2435); color: white; padding: 10px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; margin-bottom: 10px; position: relative; width: 300px;}
    .moonlightshadebubble.show { opacity: 1; transform: translateY(0);}
.close-button { position: absolute; top: -10px; right: -10px; cursor: pointer; border-radius: 50%; padding: 5px 8px 5px 8px; text-align: center; background-color:#636363;}
.bdaybgimg { background: url(../img/bday-balloon.png) right+5px bottom no-repeat; background-size: 15% }
/*---------------------------------------------------------------------
    scrollable div with no scroll bar
---------------------------------------------------------------------*/
.scrollable-div {/*width: 100%;  Set your desired width */ /*height: 60px;  Set your desired height */ overflow: hidden; /* Hide the scrollbar */  overflow-y: scroll; /* Enable vertical scrolling */}
    .scrollable-div::-webkit-scrollbar { width: 0; /* Hide the scrollbar for WebKit browsers */ }
    /* Optional: Customize scrollbar appearance for Firefox */
    .scrollable-div { scrollbar-width: none;}
/*---------------------------------------------------------------------
    percentage bar
---------------------------------------------------------------------*/
.percentage-bar-container {    text-align: center;}
.percentage-bar {    width: 90%;    height: 20px;    background-color: #ddd;    border-radius: 10px;    overflow: hidden;    position: relative; margin:auto;}
.percentage-bar30 {    width: 90%;  align-items: center;  height: 25px;    background-color: #ddd;    border-radius: 25px;    overflow: hidden;    position: relative; margin:auto;}
.progress {    height: 100%;    width: 0;    background-color: #4caf50;    border-radius: 10px;    transition: width 0.5s ease-in-out;}
.progress_bl {    height: inherit;   width: 0;    background-color: #4d5fb1;    border-radius: 10px;    transition: width 0.5s ease-in-out;}
.progress_rd {    height: 100%;    width: 0;    background-color: #ff0000;    border-radius: 10px;    transition: width 0.5s ease-in-out;}
.percentage-label {    margin-top: 10px;    font-size: 18px;    font-weight: bold;}
/*---------------------------------------------------------------------
    horisontal tabs
---------------------------------------------------------------------*/
.tabs { display: flex;    list-style: none;    padding: 0;    margin: 0; border-bottom: 2px solid #999}

.tab-content {display: none;}
    .tab-content.active { display: block; }
.tab:hover { color:#000; background-color: #ebebeb;}
.tab.active {  color:#000; background-color: #ebebeb; /* Highlight the active tab */}
.tab.activedefault {  color:#000;  background-color: #ebebeb; /* Highlight the active tab */}
/*---------------------------------------------------------------------
    step progress bar
----------------------------------------------------------------------*/
.container { width:100%; margin:  auto; position:relative; }
.progressbar {  margin: 0;  padding: 0;  counter-reset: step;}
.progressbar li {   list-style-type: none;  width:calc(25% - 5px); display:inline-table;  font-size: 0.9em;  position: relative;  text-align: center;  text-transform: uppercase;  color: #636363;}
.progressbar li:before {  width: 45px;  height: 45px;  content: counter(step);  counter-increment: step;  line-height: 45px;  border: 3px solid #636363;  display: block;  text-align: center;  margin: 0 auto 10px auto;  border-radius: 50%;  background-color: white;}

.progressbar li:after {  width: 100%;  height: 3px;  content: '';  position: absolute;  background-color: #636363;  top: 25px;  left: -50%;  z-index: -1;}
.progressbar li:first-child:after {  content: none;}
.progressbar li.active {  color: #ff0000;   }
/*    .progressbar li.active:before { background: #7cb916; color: white; border: none;cursor: pointer;  border: 2px solid #7cb916; }
    .progressbar li.active:hover:before { background: #ebebeb; color: #000; border: none;cursor: pointer;  border: 2px solid #7cb916; }
.progressbar li.active + li:after {  background-color: #7cb916;}
.progressbar li:hover:before {background: #ebebeb; color: #000; border: none;cursor: pointer; border: 2px solid #7cb916;}*/

/*---------------------------------------------------------------------
    background icons
----------------------------------------------------------------------*/
.audioicon { position: relative; }
    .audioicon:before { content: "\f001";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #999; font-size:100px;   }
.docicon { position: relative; }
    .docicon:before { content: "\f1c1";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #999; font-size:100px;   }
.videoicon { position: relative; }
    .videoicon:before { content: "\f03d";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #999; font-size:100px;   }
.texticon { position: relative; }
    .texticon:before { content: "\f15c";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #999; font-size:100px;   }
.webicon { position: relative; }
    .webicon:before { content: "\f0ac";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #999; font-size:100px;   }

.audioicon24px { position: relative;  width:35px;  height:35px; }
    .audioicon24px:before { content: "\f001";   font-family: FontAwesome; left:50%; margin: -12px 0 0 -12px; position: absolute; top:50%;  color: #ccc; font-size:24px;   }
.docicon24px { position: relative;  width:35px;  height:35px; }
    .docicon24px:before { content: "\f1c1";   font-family: FontAwesome; left:50%; margin: -12px 0 0 -12px; position: absolute; top:50%;  color: #ccc; font-size:24px;   }
.videoicon24px { position: relative;  width:35px;  height:35px; }
    .videoicon24px:before { content: "\f03d";   font-family: FontAwesome; left:50%; margin: -12px 0 0 -12px; position: absolute; top:50%;  color: #ccc; font-size:24px;   }
.texticon24px { position: relative;  width:35px;  height:35px; }
    .texticon24px:before { content: "\f15c";   font-family: FontAwesome; left:50%; margin: -12px 0 0 -12px; position: absolute; top:50%;  color: #ccc; font-size:24px;   }
.webicon24px { position: relative;  width:35px;  height:35px; }
    .webicon24px:before { content: "\f0ac";   font-family: FontAwesome; left:50%; margin: -12px 0 0 -12px; position: absolute; top:50%;  color: #ccc; font-size:24px;   }

.catthumb{ border-radius:10px; width:180px; padding:5px 10px 5px 10px }
.catthumbalt{ border-radius:10px; width:200px; padding:5px 10px 5px 10px }
.trainingthumbs{width:180px; height:130px; background-color:#fff; background-position:center center; background-repeat:no-repeat; border-top-left-radius:10px; border-bottom-left-radius: 10px}

.audioiconthumb { position: relative; background-image: linear-gradient(to right, #cccccc, #ffffff); border-top-left-radius:10px; border-bottom-left-radius: 10px }
    .audioiconthumb:before { content: "\f001";   font-family: FontAwesome; left:50%; margin: -30px 0 0 -30px; position: absolute; top:50%;  color: #999; font-size:4em;   }
.dociconthumb { position: relative; background-image: linear-gradient(to right, #cccccc, #ffffff); border-top-left-radius:10px; border-bottom-left-radius: 10px }
    .dociconthumb:before { content: "\f1c1";   font-family: FontAwesome; left:50%; margin: -30px 0 0 -30px; position: absolute; top:50%;  color: #999; font-size:4em;   }
.videoiconthumb { position: relative; background-image: linear-gradient(to right, #cccccc, #ffffff); border-top-left-radius:10px; border-bottom-left-radius: 10px }
    .videoiconthumb:before { content: "\f03d";   font-family: FontAwesome; left:50%; margin: -30px 0 0 -30px; position: absolute; top:50%;  color: #999; font-size:4em;   }
.texticonthumb { position: relative; background-image: linear-gradient(to right, #cccccc, #ffffff); border-top-left-radius:10px; border-bottom-left-radius: 10px }
    .texticonthumb:before { content: "\f15c";   font-family: FontAwesome; left:50%; margin: -30px 0 0 -30px; position: absolute; top:50%;  color: #999; font-size:4em;   }
.webiconthumb { position: relative; background-image: linear-gradient(to right, #cccccc, #ffffff); border-top-left-radius:10px; border-bottom-left-radius: 10px }
    .webiconthumb:before { content: "\f0ac";   font-family: FontAwesome; left:50%; margin: -30px 0 0 -30px; position: absolute; top:50%;  color: #999; font-size:4em;   }
.ehubicon { position: relative;   }
    .ehubicon:before { content: "My E-Learning Hub";   left:calc(50% - 100px);  position: absolute; top:calc(50% - 100px);  color: #ccc; font-size:1.8em;   }
    .ehubicon:after { content: "\f3b2";   font-family: FontAwesome; left:50%; margin: -50px 0 0 -50px; position: absolute; top:50%;  color: #ccc; font-size:100px;   }

#calendarxxx { /*max-width: 1100px;*/    margin: 0 auto;}
#calendarxx {  margin: 0 auto;}
/*---------------------------------------------------------------------
    tree menu
----------------------------------------------------------------------*/
.tree {    font-family: "Segoe UI", sans-serif;    font-size: 1.2em;    padding-left: 10px;    max-width: 400px;}
    .tree ul {        list-style-type: none;        padding-left: 20px;        margin: 0;    }
    .tree li {        line-height: 1.8;        cursor: pointer;    }
        .tree li .label {            display: flex;            align-items: center;            gap: 6px;        }
    .tree i {        width: 18px;        text-align: center;    }
    .tree .children {        display: none;        margin-left: 18px;    }
/*---------------------------------------------------------------------
    emoji / chat bubble
----------------------------------------------------------------------*/
.emoji-picker {    border: 1px solid #ccc;    padding: 10px;    max-width: 320px;    max-height: 100px;    display: none;    flex-wrap: wrap;    background-color: #fff;    position: absolute;    z-index: 10;    overflow-y: auto;}
    .emoji-picker span {  font-size: 24px; margin: 5px;  cursor: pointer;    }
#message {  min-width:280px;  width: 100%;    height: 100px;}
.chat-bubble {    position: relative;    background: #dcf8c6;    border-radius: 16px;    padding: 12px 16px;    width: 250px;    font-family: sans-serif;    font-size: 14px;    color: #333;    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);    margin-left: 16px; /* space for arrow */    margin-top: 15px;}

    .chat-bubble.left-arrow::before { content: ""; position: absolute; top: 10px; left: -10px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #dcf8c6; }

.wrap-checkbox-list input[type="checkbox"] {    margin-right: 5px;}
.wrap-checkbox-list label {    display: inline-block;    width: 150px; /* Adjust based on content */    margin-bottom: 5px;}
.wrap-checkbox-list {    display: flex;    flex-wrap: wrap;    max-width: 200px; /* Controls when it wraps */}
/*---------------------------------------------------------------------
    sticky notes
----------------------------------------------------------------------*/
.sticky-note {
    z-index: 1000;
    position: absolute;
    width: 250px;
    height: 200px;
    background: #FFF59D;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 10px rgba(0,0,0,.2);
    padding: 10px;
    overflow: hidden;
}
.note-header {    font-weight: bold;    margin-bottom: 5px;    cursor: move;}
.note-content {
    width: 100%;
    height: calc(100% - 35px);
    border: none;
    background: transparent;
    resize: none;
    box-sizing: border-box;
}
.note-buttons {
    float: right;
}
/*.delete-note {    float: right;    color: red;    cursor: pointer;}*/
.color-note,
.minimize-note,
.delete-note {
    cursor: pointer;
    margin-left: 8px;
    font-weight: bold;
}
    .minimize-note:hover,
    .delete-note:hover {
        opacity: .7;
    }

.sticky-note.minimized {
    height: 40px !important;
}

    .sticky-note.minimized .note-content {
        display: none;
    }

    .sticky-note.minimized .resize-grip {
        display: none;
    }

    .sticky-note.minimized .ui-resizable-handle {
        display: none;
    }


.ui-resizable-se {
    width: 16px !important;
    height: 16px !important;
}
.resize-grip {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 15px;
    height: 15px;
    cursor: se-resize;
}
    /* Creates the diagonal grip lines */
    .resize-grip:before {
        content: "";
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 12px;
        height: 12px;
        background: linear-gradient( 135deg, transparent 0%, transparent 40%, #666 40%, #666 50%, transparent 50%, transparent 65%, #666 65%, #666 75%, transparent 75% );
    }
.color-palette {
    display: none;
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

.note-color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-right: 4px;
    cursor: pointer;
    border: 1px solid #999;
}

    .note-color[data-color="#FFF59D"] {
        background: #FFF59D;
    }

    .note-color[data-color="#FFCDD2"] {
        background: #FFCDD2;
    }

    .note-color[data-color="#C8E6C9"] {
        background: #C8E6C9;
    }

    .note-color[data-color="#BBDEFB"] {
        background: #BBDEFB;
    }

    .note-color[data-color="#E1BEE7"] {
        background: #E1BEE7;
    }

    .note-color[data-color="#D7CCC8"] {
        background: #D7CCC8;
    }