@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("font/fa-brands-400.eot");
    src: url("font/fa-brands-400.eot?#iefix") format("embedded-opentype"),
        url("font/fa-brands-400.woff2") format("woff2"),
        url("font/fa-brands-400.woff") format("woff"),
        url("font/fa-brands-400.ttf") format("truetype"),
        url("font/fa-brands-400.svg#fontawesome") format("svg"); 
}


.fab {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/fa-regular-400.eot");
    src: url("fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
        url("font/fa-regular-400.woff2") format("woff2"),
        url("font/fa-regular-400.woff") format("woff"),
        url("font/fa-regular-400.ttf") format("truetype"),
        url("font/fa-regular-400.svg#fontawesome") format("svg");
}

.far {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;
}

@font-face {
  font-family: 'Font Awesome 5 Solid';
  font-style: normal;
  font-weight: 900;
  src: url("font/fa-solid-900.eot");
  src: url("font/fa-solid-900.eot?#iefix") format("embedded-opentype"),
        url("font/fa-solid-900.woff2") format("woff2"),
        url("font/fa-solid-900.woff") format("woff"),
        url("font/fa-solid-900.ttf") format("truetype"),
        url("font/fa-solid-900.svg#fontawesome") format("svg");
}

.fa, .fas {
    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  display: inline-block;
}


/**************************/

@media print 
{
    body
    {
        margin:0;
    }
    .NoPrint 
    { 
        display:none; 
        
    }
    .ClearRow
    {
        height:0;
        line-height:0;
    }
    
    div.Break {
        page-break-after: always;
        break-after: page;
        display: block;
        height:0 !important;
    }
    .no-break {
        break-inside: avoid;
    }
    
    .Container
    {
        width:100% !important;
        margin-left:auto;
        margin-right:auto;
    }
    .Profile
	{
	    width:130px;
	    height:125px;
	    overflow:hidden;
	    display:block;
	    -moz-border-radius: 8px;
	    border-radius: 8px;
	    border:1px solid #454545;
	}
	#PositionBlock
	{
	    -moz-border-radius: 10px;
	    border-radius: 10px;
	    border:1px solid white;
	    background:url(../appraisalred.png) repeat-x 0 bottom;
	    color:White;
	    font-family:Georgia;
	    font-weight:bolder;
	    font-size:30px;
	    height:50px;
	    line-height:55px;
	    padding-right:20px;
	    text-align:right;
	}
}

/*********************** Start of Screen / End of print******************************************/
div.Break { height:20px; }
.Container
{
    width:800px;
}
div.Break {
    page-break-after: always;
    break-after: page;
    display: block;
}
.AppHeader
{
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:1px solid #454545;
    padding:5px;
}
.LogoElra2y
{
    width:190px;
    height:125px;
    overflow:hidden;
    marging:2px;
    
}
.Profile
{
    width:130px;
    height:125px;
    overflow:hidden;
    display:block;
    -moz-border-radius: 8px;
    border-radius: 8px;
    border:1px solid #454545;
}
.AppName
{
    font-family:tahoma;
    font-size:27px;
    font-weight:bolder;
    text-align:center;
    padding:12px;
    color:#990000;
}
.AppPeriod
{
    font-family:Arial;
    font-size:26px;
    font-weight:bolder;
    text-align:center;
    padding:12px;
    color:#990000;
}
#PositionBlock
{
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:1px solid white;
    background:url(../appraisalred.png) repeat-x 0 bottom;
    color:White;
    font-family:Georgia;
    font-weight:bolder;
    font-size:30px;
    height:50px;
    line-height:55px;
    padding-right:20px;
    text-align:right;
}
#PrivateMessageTitle
{
     -moz-border-radius: 7px;
    border-radius: 7px;
    border:2px solid black;
    width:60%;
    margin-right:auto;
    margin-left:auto;
    height:46px;
    line-height:46px;
    font-family:arial;
    font-weight:bolder;
    font-size:24px;
}
#AppraisalBlock
{
    padding:6px;
    border:1px solid black;
    height:242px;
    overflow:hidden;
}
#AppraisalTitle
{
    font-family:Arial;
    font-size:22px;
    font-weight:bolder;
    text-align:center;
    margin-bottom:0;
    color:#990000;
    text-align:center;
}
#AppraisalBody
{
    font-family:Arial;
    font-size:18px;
    font-weight:bolder;
    text-align:right;
}

.StatisticsTable
{
    border-collapse:collapse;
    width:100%;
}
.LargeTitle
{
    font-size:16px !important;
}
.Rowline
{
    height:5px;
    line-height:5px;
    clear:both;
}
.RowlineL
{
    height:20px;
    line-height:20px;
    clear:both;
}
.BenqTitle
{
    background-color:#e5b8b7;
    border:1px solid black;
    padding:3px 4px 3px 4px;
    color:Black;
    font-family:Tahoma;
    font-weight:bolder;
    text-align:center;
    font-size:12px;
    width:50%;
}
.BenqData
{
    border:1px solid black;
    padding:3px 4px 3px 4px;
    color:Black;
    font-family:Georgia;
    font-weight:bolder;
    text-align:center;
    font-size:16px;
    width:50%;
} 
/*****************************/
/*****************************/
/*****************************/
body 
{
    font-size:13px;
    font-family:Arial;
    color:Black;
    margin:0;
    padding:0;
}
td 
{
    font-size:13px;
    font-family:Arial;
}
A
{
    color:Black;
    text-decoration:none;
}
A:hover
{
    color:Black;
    text-decoration:underline;
}
.FullWidthHeight
{
    width:100%;
    height:100%;
}
.NoPadding
{
    padding:0 !important;
}
.NoBorder
{
    border:0 !important;
}
.FullWidth
{
    width:100%;
}
/********** Admin Menu ***********/
.AdminMenu
{
    /*height:36px;*/
}
.HeadCell
{
    background-color:#f6f6f6;
    height:36px;
    border-bottom:4px solid white;
    font-weight:bolder;
}
.HeadCell div.Dir
{
    text-align:left;
}
.HeadCell div.Dir span
{
    display:inline-block;
    float:left;
    margin-right:5px;
    color:#4d4d4d;
}
.HeadCell pre
{
    margin:0;
    color:Red;
}
/********** Search Checkin form Page ************/
.CheckinSearch
{
    border:1px solid gray;
    padding:5px;
}
.CheckinSearch td
{
    padding:2px;
    /*height:60px;*/
}
.CheckinSearch .FormField
{
    height:22px;
    font-size:11px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.CheckinSearch .FormButton
{
    height:27px;
    line-height:20px;
    font-size:13px;
    font-family:Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.CheckinSearch .SelectBox
{
    font-size:11px;
    height:22px;
}
.CheckinSearch label.error
{
    display:block;
    font-size:9px;
}
.LinkBtnForce
{
    height:35px;
    padding-left:10px;
    padding-right:10px;
    line-height:35px;
    font-size:13px;
    font-family:Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:#d8041a;
    color:white;
    font-weight:bolder;
    border:1px solid #ecacb3;
    cursor:pointer;
}
.LinkBtnAdd
{
    background:#3ec601 url(../adduser.png) no-repeat left center;
    height:35px;
    padding-left:25px;
    padding-right:5px;
    line-height:35px;
    font-size:13px;
    font-family:Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color:white;
    font-weight:bolder;
    border:1px solid #a5dfff;
    cursor:pointer;
    display:inline-block;
}
.LinkBtnAdd:hover
{
    text-decoration:none;
    color:White;
}
/********** List Page ************/
.SearchTable
{
    border:1px solid gray;
    padding:5px;
}
.SearchTable td
{
    padding:2px;
}
.SearchTable .FormField
{
    height:15px;
    font-size:11px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.SearchTable .FormButton
{
    padding:1px;
    font-size:11px;
}
.SearchTable .SelectBox
{
    font-size:11px;
    height:17px;
}
.GridView
{
    border-collapse:collapse;
}
.GridView tr th
{
    border:1px solid white;
    padding:5px;
    background-color:#6699CC;
    font-weight:bolder;
    color:White;
    text-align:left;
}
.GridView tr td
{
    border:1px solid white;
    padding:2px 3px 2px 3px;
    font-family:Tahoma;
}
.GridView tr td img.Icon
{
    border:0;
    height:17px;
    width:17px;
}
.GridView tr.odd td
{
    background-color:#D8EAF8;
}
.GridView tr.even td
{
    background-color:#F6F6F6;
}
.GridView tr.Inactive td
{
    background-color:#f8d8d8 !important;
}
.GridView tr.LongExcuse td
{
    background-color:#f8f7d8 !important;
}
.GridView tr.ServeFromHome td
{
    background-color:#e2b5f3 !important;
}

.GridView .Shadow
{
    color:Gray;
}
.ClearRow
{
    height:10px;
    line-height:10px;
    clear:both;
}
.PagingControl
{
    margin-top:10px;
    margin-bottom:10px;
}
.PagingControl span
{
       font-weight:bolder;
}
/********* Heading  ************/
div.Header
{
    text-align:left;
    float:left;
    width:45%;
    margin:0 10px 0 10px;
    overflow:hidden;
    height:30px;
    line-height:30px;
}
/************** System Messages *******************/
.Message
{
    text-align:center;
    float:right;
    width:50%;
    overflow:hidden;
}
.SystemMessage
{
    height:30px;
    /*width:400px;*/
    /*margin-right:238px;*/
    line-height:30px;
    /*float:right;*/
    text-align:center;
    margin-right:auto;
    margin-left:auto;
}
.MSGSuccess
{
    background:#f5fdf6 url(../Updated.png) no-repeat left center;
    border:1px solid #12a223;
    color:#12a223;
    text-align:left;
    padding-left:30px;
    padding-right:20px;
    display:inline-block;
}
.MSGDeleted
{
    background:#fdf8f8 url(../deleted.png) no-repeat left center;
    border:1px solid #b13137;
    color:#49070b;
    text-align:left;
    padding-left:30px;
    padding-right:20px;
    display:inline-block;
}
.MSGDelFaild
{
    background:#f8f8f8 url(../Failed.png) no-repeat left center;
    border:1px solid #e9313a;
    color:#b10b07;
    text-align:left;
    padding-left:35px;
    padding-right:20px;
    display:inline-block;
}
/************ Form Page ***********/
.FormTable
{
    
}
form#frm table
{
    border-collapse:collapse;
}
form#frm table td
{
    border-bottom:1px solid white;
    border-right:2px solid white;
    padding:5px;
    font-family:Tahoma;
}
form#frm td.Title
{
    background-color:#D8EAF8;
}
form#frm td.Data
{
    background-color:#F6F6F6;
}
form#frm td.Data input, form#frm td.Data .select
{
    direction:rtl;
}
form#frm td.Data .Ltrselect
{
    direction:ltr;
}
form#frm td.Data #Phone, form#frm td.Data #Mobile, form#frm td.Data #Email
{
    text-align:right;
    direction:ltr;
}

.DirLTR
{
    direction:ltr !important;
}
.DirRTL
{
    direction:rtl !important;
}
form .error
{
    color:Red;
}
.FFWidth
{
    width:350px;
}
.UploadField
{
    height:25px;
    border:1px solid silver;
    direction: ltr !important;
}
.FormField
{
    height:18px;
    border:1px solid silver;
}
.TextAreaField
{
    border:1px solid silver;
}
.ArabicTextArea
{
    font-family:Arial;
    font-weight:bolder;
}
.FormButton
{
    background-color:#6699CC;
    font-weight:bolder;
    color:#f9f9f9;
    text-align:center;
    border:1px solid silver;
    padding:2px 10px 2px 10px;
}
a.FormButton:hover
{
    color:White;
    text-decoration:none;
}
.SelectBox .Inactive 
{
    color:#bf0000;
}
.SelectBox .LongExcuse 
{
    color:#afa900;
}
.Disabled 
{
    color:#bf0000;
}
/*************** Reports *******************/
.Widget
{
    border:1px solid gray;
    color:Gray;
}
.Print
{
    background:url(../print.png) no-repeat 0 0;
    width:32px;
    height:32px;
    display:inline-block;
}
.ClearForm
{
    font-size:11px;
    color:Blue;
    line-height:32px;
    height:32px;
    display:inline-block;
    margin-left:3px;
    width:40px;
    float:right;
}
/******* START BSM Select ********/
.PersonForm #bsmContainer0, .ServantForm #bsmContainer0
{
    width: 152px;
}
.PersonForm #bsmSelectbsmContainer0, .ServantForm #bsmSelectbsmContainer0
{
    width: 150px;
}
.PersonForm #bsmContainer1, .PersonForm #bsmContainer2
{
    width: 152px;
}

.PersonForm #bsmSelectbsmContainer1, .PersonForm #bsmSelectbsmContainer2
{
    width: 150px;
}
/************************************/
.PersonForm #bsmContainer3
{
    /*width: 152px;*/
}
.PersonForm #bsmSelectbsmContainer3
{
    /*width: 150px;*/
}
/*********************************/
/******* END BSM Select ********/
.Title .FormNote
{
    font-size:11px;
    color:Gray;
}
.Data .FormNote
{
    font-size:11px;
    color:Maroon;
    display:block;
    margin:3px 0 1px 0;
}
/********************************/
.CheckinForm span.AttendButton
{
    display:block;
    width:70px;
    height:20px;
    line-height:20px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.CheckinForm span.Absent
{
    color:#bac3cc;
    border:1px solid #dbdbdb;
    background-color:#f9f9f9;
}
.CheckinForm span.Present
{
    color:#328c00;
    border:1px solid #42b142;
    background-color:#90ee90;
    border-style:inset;
    font-weight:bolder;
    font-size:90%;
}
.LoadData
{
    background:url(../dataloader.gif) no-repeat left center;
    
}
/****************************/
/********* Login form *******************/
.LoginTitle
{
    font-size:300%;
    font-family:Crete Round;
    color:#f96f00;
    font-weight:bolder;
    padding:10px;
    margin:10px 20px 10px 20px;
    text-align:left;
    border-bottom:1px solid #cccccc
}
.LoginBlock
{
    height:60%;
    margin-top:20px;
    width:60%;
    overflow:hidden;
    background-color:#f5f7f7;
    border:1px solid #cccccc;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.TitleCls
{
    font-size: 22px;
    color:Black;
}
.TitleLightCls
{
    font-size: 22px;
    color:silver;    
}
.SpecialInput
{
    border:1px solid #cccccc;
    -moz-border-radius: 2px;
    border-radius: 2px;
    height:40px;
    width:100%;
    font-size:16px;
}
.Checkbox 
{
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    transform: scale(1.3);
}
.LoginBtn
{
    background-image:-moz-linear-gradient(center top , #99CA4B 0px, #66991C 100%);
    border:1px solid #668F28;
    border-bottom-color: #668F28;
    text-shadow: 0 -1px 1px #5A8A11;
    cursor:pointer;
    padding:6px 20px 6px 20px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size:18px;
    font-weight:normal !important;
}
/*********************/
.CaptureBtn
{
    background:#3ec601;
    height:70px;
    padding-left:10px;
    padding-right:10px;
    line-height:20px;
    font-size:40px;
    font-family:Arial;
    -moz-border-radius: 5px;
    border-radius: 7px;
    color:white;
    font-weight:bolder;
    border:1px solid #a5dfff;
    cursor:pointer;
    display:inline-block;
}
.LargeBtn
{
    background:#3ec601;
    height:30px;
    padding-left:5px;
    padding-right:5px;
    line-height:30px;
    font-size:13px;
    font-family:Arial;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color:white;
    font-weight:bolder;
    border:1px solid #a5dfff;
    cursor:pointer;
    display:inline-block;
}
.LargeBtn:hover
{
    text-decoration:none;
    color:White;
}
/********* Service type colors ********************/
tr.Major td
{
    Color:#1b4b74;
    font-weight:bolder;
}
tr.Virtual td
{
    Color:#4d7292;
}

tr.Other td
{
    Color:#7a809f;
}
/******** Structure Report **************/
#StructureContainer
{
    width:1000px;
    text-align:right;
}
.ServiceContainer
{
    overflow:hidden;
    display:inline-table;
}
.GroupHeader
{
    color:Black;
    font-weight:bolder;
    font-family:Tahoma;
    font-size:16px;
    text-align:center;
    line-height:30px;
    height:30px;
    background-color:#e9eef4;
    border:1px solid #b2c1d0;
}
.ServiceBlock
{
    background:#f6f6f6;
    width:189px;
    line-height:25px;
    font-size:16px;
    font-family:Arial;
    -moz-border-radius: 7px;
    border-radius: 7px;
    color:Black;
    font-weight:bolder;
    border:1px solid #d8eaf8;
    display:inline-block;
    /*float:right;*/
    margin:4px;
    vertical-align:top;
    text-align:right;
    overflow-x:hidden;
    overflow-y:visible;
}
.ServiceHeader
{
    border:1px solid #6699cc;
    background-color:#6699cc;
    height:30px;
    line-height:30px;
    color:White;
    font-weight:bolder;
    font-size:18px;
    font-family:Arial;
    text-align:center;
    margin-bottom:3px;
}
.Splitter
{
    border-bottom:1px Dashed gray;
    height:5px;
    line-height:5px;
    clear:both;
}
.PersonCLS
{
    font-size:16px;
    font-family:Arial;
    color:Black;
    font-weight:bolder;
    padding-right:25px;
}

.Memberico
{
    background:url(../person.png) no-repeat right center;
}
.Leaderico
{
    background:url(../leader.png) no-repeat right center;
    
}
/***** Import Page **********/
#NewRecordSTR, #ExistRecordSTR, #FailedRecordSTR
{
    width:100%;
}
/*********************************/
i.observation::after {
    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;

    content:"\f05a";
    color: #ea00ff;
    font-size: 17px;
    vertical-align: middle;
}
i.Active::after {

    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;

    content:"\f14a";
    color: #6ab43e;
    font-size: 17px;
    vertical-align: middle;
}
i.Inactive::after {

    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;

    content:"\f057";
    color: #b43e3e;
    font-size: 17px;
    vertical-align: middle;
}
i.LongExcuse::after {
    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;

    content:"\f362";    
    color: #f3e500;
    font-size: 17px;
    vertical-align: middle;
}
i.ServeFromHome::after {
    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;

    content:"\f015";    
    color: #3e7bb4;
    font-size: 17px;
    vertical-align: middle;
}
/***************************************/
table.border-dark {
	border-collapse: collapse;
}
table.border-dark tr td {
	border: 1px solid #eee;
	
}
table.sheet-table tr td i.Active::after, 
table.sheet-table tr td i.observation::after{
	font-size: 11px;
}

i.attended::after {

    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;

    content:"\f058";
    color: #000;
    font-size: 12px;
    vertical-align: middle;
}
i.Excused::after {

    font-family: 'Font Awesome 5 Solid';
    font-weight: 900;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;

    content:"\f192";
    color: #808080;
    font-size: 12px;
    vertical-align: middle;
}

span.copyable {
  opacity: 0;  /* Invisible but selectable */
  position: absolute;
  pointer-events: none; /* Prevents user interaction */
}




/********** QR pages *********************/
#camera-container {
    width: 100%; /* Set width based on your design */
    max-width: 900px;
    aspect-ratio: 16 / 16; /* Standard rectangle ratio */
    border: 2px solid black; /* Optional: Adds a border */
    border-radius: 30px; /* Optional: Rounds the corners */
    overflow: hidden; /* Ensures video does not overflow */
    position: relative;
    background: black; /* Optional: Keeps a black background */
}

#camera {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video fills the rectangle */
}
#result {
     margin: 30px;
     font-size: 50px;
}
#result span {
    font-weight: bold;
    font-size: 50px;
}

span.error {
    color: #b63532;
}
span.warning {
    color: #ffc902;
}
span.success {
    color: #5cb85c;
}