/* ################################################################  */
/* For using with SoA+D CO-OP IWS v9.0u :: updated 2025-12-01 20:26  */
/* ################################################################  */

/* This one merger two versions : Pre-COOOP and Letter Request intothis style */
/* Some conflict may need to be resolved e.g. txNorm margin */
/*{
  filter: grayscale(30%);
  -webkit-filter: grayscale(30%);
}
*/
/* ######################################################################### TOP TITLE BAR
 */
 
     #dLeftDrop {
           display: block;
           position: relative;
           background-color: white;
           border: dotted 8px darkcyan;
           border-left: none;
           border-right: none;
           border-top:none;
           height: 1px;
           width: 30px;
           padding: 0px;
           margin: 0px 0px 0px 10px;
       }
      #dLeftDrop:hover {
           cursor: pointer;
      }
        #TopTitle {
            background-color: #FC761C;
            color: #FFFFFF;
            font-family: Arial, sans-serif;
            font-size: 12px;
            text-align: center;
            padding: 6px 0px;
            margin: 0px;
        }
        .LinkText {
            color: #FFFFFF;
            text-decoration: none;
        }
        .LinkText:visited, .LinkText:link {
            text-decoration: none;
            color: #FFFFFF;
        }
        .LinkText:hover {
            cursor: pointer;
        }
        #MainTitle {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
           
        }
        #imgSName{
            justify-self: right;
            vertical-align: top;
        }
        #imgHName {
            justify-self: left;
            vertical-align: top;
        }

/* ##################################33 END TITLE BAR PART ------*/


@font-face {
    font-family: THQuarkBold;
    src: url(./aicons/Quark-Bold.otf);
}
@font-face {
    font-family: THQuarkLight;
    src: url(./aicons/Quark-Light.otf);
}
@font-face {
    font-family: RoboC;
    src: url(./aicons/RobotoCondensed-Regular.ttf);
}
@font-face {
  font-family: RoboCB;
  src: url(./aicons/RobotoCondensed-Bold.ttf);
}
@font-face {
   font-family: 'TH Sarabun New';
   src: url("aicons/THSarabunNew.WOFF");
 }


.Acen {
  text-align: center;
}
.Aright {
  text-align: right;
}
.midArea {
  background-color: #FFFFFF;
  position: absolute;
  top: 120px;
  width: 100%
}
table 
   { border: none;
     padding: 0px;
     border-spacing:0px;
     width: 100%;
   }
    
td.c1r1Hd, td.c2r1Hd, td.c3r1Hd 
   { 
     vertical-align: top;
     padding: 0px;    
     border: 0px;;
     border-style: none; 
     border-color: red;
     height: 40px;
   }
td.c1Left 
   { width:160px;
     height:200px;
   }
td.c1r1Hd { background-color: #E9E9E9; width:160px;}
td.c2r1Hd { background-color: #C4C4C4; width:440px;}
td.c3r1Hd  
     { background-color: #C4C4C4;
       text-align:right;
     }
td.c1r2Hd, td.c2r2Hd, td.c3r2Hd 
     { background-color: #FFFFFF;
       vertical-align: top;
       border:1px;
       border-style: none;
       border-color: black;
       height: 75px;
     }
td.c1r2Hd { width: 160px;}
td.c2r2Hd 
    { text-align: left; 
      width: 440px;
    }
td.c3r2Hd { text-align:right; 
            padding-right:20px;}

/*------- Left Menu bar --------------*/
div.leftMenu
    { margin-top:10px;
      background-color: #EEEEEE;
      width:150px;
      padding:5px;
      border-radius:15px;
      -moz-border-radius:15px;
      position:absolute;
      top:120px; 
      z-index:4;
      } 
.txMenu, .uBoxCM, .uBoxST, .uBoxLC, .txMenuN 
    { margin:5px;
      border-style:solid;
      border-width:1px;
      border-color:#909090;
      padding:10px 5px;
      text-align:center;
      text-decoration:none; 
      vertical-align: middle;
      font-family:Verdana,Arial,Sans-serif;
      font-size:12pt;
      font-weight:normal; 
    }
.txMenu:hover 
    { color:#FFFFFF;
      background-color: #FF9900;
      cursor:pointer;
    }
.txMenuN
    { color: #C0C0C0;
    }

.uBoxCM, .lgiCm
    { background-color: #33aa33;}
.uBoxST, .lgiSt
    { background-color: #FF8822;}
.uBoxLC, .lgiLc 
    { background-color: #FF6600;}

a:link {text-decoration:none;}

/*------- Login Cell--------------*/
.lgiCm,.lgiLc,.lgiSt,.lgiG, .lgiH
    { margin:10px 0px 10px 10px;
      padding:10px;
      border-style:none;
      border-width:0px;
      border-color:#FFFFFF;  
      vertical-align:top;
      font-family:Verdana,Arial,Sans-serif;
      font-size:24pt;
      color:#FFFFFF;	
      position:absolute;
      top:120px; 
      width:240px;
      border-radius:15px;
      -moz-border-radius:15px;
    } 
.lgiG 
   { background-color: #CCCCCC; 
     left:160px;
     width:750px;
     position: relative;
     top:0px;
   }
.lgiH
   { background-color: #CCCCFF; 
     top:400px;
     left:160px;
     width:750px;
   }

.lgiCm { left:160px; }
.lgiSt { left:430px; }
.lgiLc { left:700px; }

.txPrompt
    { margin:10px;
      border-style:solid;
      border-width:1px;
      border-color:#A0A0A0;
      padding:5px;
      text-align:left;
      vertical-align: middle;
      font-family:Verdana,Arial,Sans-serif;
      font-size:13pt;
    }
.txRight
    { text-align:right;
      font-family:Verdana,Arial,Sans-serif;
      padding:5px;
      font-size:10pt;
      color:#C0C0C0;  
    }
.txRight:hover 
    { color:#FF6600;
      cursor:pointer;
    }    
.txNorm,.txNorm1, .txNorm2, .txNorm3, .txHide, .txError, .txNorm0, .txNorm4, .txNormT, .txSmall, .txField, .txTitle
    { text-align:left;
      font-family:Verdana,Arial,Sans-serif;
      font-size:14px;
      margin: 10px 3px;
      padding: 0px;
    }
 .txRev {background-color: #00008F;
         color: #FFFFFF;
         padding: 5px 10px;
 }
 .txTitle {
      font-size: 20px;
      margin: 3px;
      letter-spacing: 2px;
 }
 .txSelect {color: #000080;
            padding: 3px 10px 3px 1px;;
            border-bottom-right-radius: 30px;
            border-top-right-radius: 30px;}   
 .txSelect:hover {
     color:white;
     background-color: #000080;
     cursor: pointer;
 }
.edField {
    display: inline-block;
    height: 14px;
    width: 14px;
    border-radius: 20px;
    border: solid 2px green;
    background-color: #4FAF4F;
    opacity: 0.5;
    position: relative;
    margin: 0px;
    padding: 0px;
}
.edField:hover {
    height: 16px;
    position:absolute;
    width: 90%;
    cursor: pointer;
}

#FieldLock {
    width:24px;
    height: 24px;
    padding: 4px;
    background-color: #FFFFFF;
    border-radius: 30px;
    border:solid 2px #AF4F3F;
    position: absolute;
    right: 10px;
    top:5px;
    overflow: hidden;
    opacity: 0.4;
}
#LKimg {
  width: 24px;
  vertical-align: top;
}
#iCancelReq {
 /*   width:24px;
    height: 24px;
*/
    padding: 4px 10px;
    margin: 0px;
/*    background-color: #FFFFFF;
    border-radius: 30px;
    border:solid 2px #AF4F3F;
*/
    position: absolute;
    right: 10px;
    top:5px;
    overflow: hidden;
    opacity: 0.2;
}
#FieldLock:hover {
    border: solid 2px #4FAF4F;
}
#iCancelReq:hover {
/*  border: solid 2px #8F0000;*/
  opacity: 1.0;
  cursor: pointer;
}

.txSmall { font-size:10px;
    }
.txNorm0 { font-size:12px; 
    }
.txNorm1 { font-size:16px; 
    }
.txNorm2 { font-size:20px; 
    }
.txNorm3 { font-size:24px; 
    }
.txNorm4 { font-size:28px; 
    }
.txNormT {
  font-family: "THQuarkLight", "TH Sarabun New", Arial, sans-serif;
  font-size: 26px;
/*  font-weight: bold; */
}
.txHide  { visibility:hidden;
    }
.txError { color:#AA3333;
    } 
.txWarn
    { text-align:center;
      font-family:Verdana,Arial,Sans-serif;
      font-size:16px; 
      font-weight:normal; 
      margin:2px;
      padding:2px 5px 5px 5px;
      background-color:#FF4444;
      border-style:solid;
      border-width:1px;
      border-color:#BB4444;
      color:#FFFFFF;
      width:150px;
}
/* ############################## ERROR BOX in STUDENT Request Letter Box ###################*/
.txErrBox {
    border: 10px solid #800000;
    padding: 5px;
    border-radius: 15px;
    margin:10px 0px 0px;
}
.txErrHeadBar{
    color: white;
    background-color: #800000;
    display: block;
    padding: 4px;
    text-align: left;
    font-family: Verdana, Arial, Sans-serif;
    font-size: 20px;
    margin: 10px 3px;
}
/*======================================== style for text input ============================ >>>>> */

.txFhd0, .txFhd1, .txFhd2, .txFhd3, .txFhd4
    { text-align:right;
      font-family:Verdana,Arial,Sans-serif;
      font-size:10pt; 
      font-weight:normal; 
      margin:1px;
      border-style:solid;
      border-width:1px;
      border-color:#BBBBBB;
      color:#222222;
      width:70px;
      position:absolute;
      left:5px;    
}
.txFhd1
  { left:165px;
  }
.txFhd2
  { left:245px;
  }
.txFhd3
  { left:325px;
  }
.txFhd4
  { left:405px;
  }
/*------------------------------ style for text input value --------------------------- >>>> */

.txFvl01,.txFvl02, .txFvl03, .txFvl11, .txFvl12, .txFvl22, .txFvl31, .txFvl32, .txFvl33,.txFvl34,.txFvl41, .txFvl42, .txFvl43
    { text-align:left;
      font-family:Verdana,Arial,Sans-serif;
      font-size:14pt; 
      font-weight:normal; 
      border-style:solid;
      border-width:2px;
      border-color:#BBBBBB;
      color:#222222;
      position:absolute;
      left:80px;     
      width:80px;
}
.txFvl11, .txFvl12
  { left:240px;
  }
.txFvl21, .txFvl22
  { left:320px;
  }
.txFvl31, .txFvl32, .txFvl33, .txFvl34
  { left:400px;
  }
.txFvl41, .txFvl42, .txFvl43
  { left:480px;
  }
.txFvl02, .txFvl12, .txFvl22, .txFvl32, .txFvl42
  { width:160px;
  }
.txFvl03,.txFvl13, .txFvl23, .txFvl33, .txFvl43
  { width:240px;
  }
.txFvl34
  { width:320px;
  }


/*-------------------------- end style for text input value --------------------------- <<<< */

.fldLnSp
 { position:static;
   margin:12px 1px 28px 1px;
   padding:1px;
 }
/*===================================== end style for text input ============================ <<<<< */





.txWeek, .txWeekN 
   {  margin:0px 5px 0px 5px;
      border-style:solid;
      border-width:1px;
      border-color:#B0B0B0;
      padding:5px;
      text-align:left;
      font-family:Verdana,Arial,Sans-serif;
      font-weight:bold;
      font-size:16pt;  
   }
.txWeek
    { background-color:#FF6600;}
.txWeek:hover 
    { color:#CCCCCC;
      background-color:#FF8822;
      cursor:pointer;
    }    
.txWeekN
   { background-color:#FFCC66;
     cursor:pointer;
   }
.weekBar
   { margin-top:10px;
      background-color: #BFBFBF;
      width:50px;
      padding:5px 5px 20px 5px;
      border-radius:10px;
      -moz-border-radius:10px;
   }
.txRptHr, .txRptHrEd
   {  font-family:Verdana,Arial,Sans-serif;
      font-weight:bold;
      font-size:16pt;
      width:50px;
      text-align:center;
      border-width:1px;
  } 
.txRptHrEd
{
      border-width:3px;
      background-color: #EEEEAA;
      border-color:#8888DD;

}
.reportHead
   { 
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #BFBFBF;
      position:relative;
      top:0px; 
      left:0px; 
      right:0px;
      padding:5px;
      border-radius:10px;
      -moz-border-radius:10px;
      text-align:left;
      font-family:Verdana,Arial,Sans-serif;
      font-weight:bold;
      font-size:16pt;  
      margin: 0px 0px 5px 0px;
   } 
.reportBox
   { 
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #DDDDDD;
      position:relative;
      top:0px; 
      left:0px; 
      right:0px;
      padding:5px 5px 10px 5px;
      color:#888888;
   } 
.rptBox, .rptBoxEd, .rptBoxFix
   { 
     width:660px;      
     height:220px;
     border-style:none;
     border-width:1px;
     border-color:#BFBFBF;
     background-color: #F9F9F9;
     font-family:Arial,Sans-serif;
     font-weight:normal;
     font-size:12pt;
   }
/* Style for new comment Box (1/07/2024)*/
.cmtBox,.cmtBoxEd,.cmtBoxFix ,.cmtBoxShow
   {
     width:680px;      
     height:120px;
     border-style:none;
     border-width:1px;
     border-radius: 20px;
     padding: 10px;
     border-color:#BFBFBF;
     background-color: #D9F9F9;
     font-family:Arial,Sans-serif;
     font-weight:normal;
     font-size:10pt;
   }
.cmtBoxShow {
   width:640px;
   height: auto;
   border: 2px solid #BFBFBF; 
}
.rptBoxEd, .cmtBoxEd
  {  border-style:solid;
     border-width:3px;
     border-color:#8888DD;
     background-color: #EEEEAA;
  }
.rptBoxFix
  {
     height:300px;
     width:650px;
     color:#000066;       
     border-style:solid; 
     border-radius:10px;
     -moz-border-radius:10px;
     border-width:2px;
     padding:5px;
     margin:2px;

  }
.reportStat
  {
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #DDDDDD;
      color: #2F2F2F;
      height:40px;
      position:relative;
      top:0px; 
      left:0px; 
      right:0px;
      padding:5px;
      margin:0px 0px 5px 0px;
 }
  
.txRptDate, .txRptStat
   {
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #FFFFFF;
      top:0px; 
      left:0px; 
      right:0px;
      padding:5px;
      border-radius:0px;
      -moz-border-radius:0px;
      text-align:left;
      font-family:Verdana,Arial,Sans-serif;
      font-weight:normal;
      font-size:12pt;
      color:#DDDDDD;  
      background-color:#888888;
   } 

.txRptStat, rsDone, rsDoing, rsWait, rsNone
   {  left:600px; 
      color:#AA0000; 
      text-align:center;
      background-color:#DDCC55;
   }

.StudBox, .WorkBox, .ReportBoxX, .PlanBox
   {
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #DDDDDD;
      position:absolute;
      top:15px; 
      height:125px;
      left:0px; 
      right:0px;
      padding:5px 5px 20px 5px;
      color:#888888;
   }
.WorkBox
   {  top:160px; 
      height:80px;
    }
.ReportBoxX
   {  top:270px; 
      height:100px;
    }

.StuImg, .LctImg 
    {
      border:2px solid #CCCCCC;
      margin:2px;
      width:90px;
      height:120px;
      position:absolute;
      right:5px;
      top:5px;
    }
.LctImg {
      height:90px;
}
.rpBt {
      border:2px solid #88DD88;
      padding:2px;
      background-color:#88DD88; 
      color:#FFFFFF;
      margin:4px;
      width:80px;
      height:20px;
      position:absolute;
      left:570px;
      top:15px;
    }

.rpDone,.rpWait,.rpNone,.rpDoing,.rpNull,.rpDoneCmt
    { margin:1px;
      border-style:solid;
      border-width:2px;
      border-color:#CCCCCC;
      background-color:#77EE77;
      padding:5px 5px 20px 5px;
      width:60px;
      vertical-align:top;
      text-align:center;
      font-family:Monospace;
      font-weight:bold;
      font-size:12pt;
      color:#008800;
      position: relative;
    }
.rpDoneCmt {
      border-bottom-width: 2px;
      border-bottom-color: #00C000;
    }  
.rpDone:hover,.rpDoneCmt:hover
    { background-color:#AAFFAA;
      cursor: pointer;}
.rpWait
    { color:#888800;  
      background-color:#EEEE77;}
.rpWait:hover
    { background-color:#FFFFAA;}
.rpNone
    { color:#888888;  
      background-color:#EEEEEE;}
.rpNone:hover
    { background-color:#CCCCCC;}
.rpDoing
    { color:#888888;  
      background-color:#EE7777;}
.rpDoing:hover
    { background-color:#FFAAAA;
      cursor: pointer;}
.rpNull
    { color:#CA8F8F;  
      background-color:#DADADA;}
.rpSmall
    { width:40px;
      font-size:8pt;
      vertical-align: top;
    }  
.rpPY, .rpPN {
       width:10px;
       height:10px;
       position: absolute;
       padding: 0px;
       margin: 0px;
       left: 5px;
       bottom: 5px;
       border: 2px solid #00C000;
    }
.rpPN
    {
       border: 1px solid #C0C0C0;
    }
    
 /*----------------------------------Status of Hours --------------------------*/
 
 .hrStat {
       width: 50px;
       border:solid 2px #808080;
       border-top-width: 5px;
       vertical-align: middle;
       text-align: center;
       padding: 3px;
       margin: 1px 5px;
       font-size: 16px;
       display: inline-block;
   }
   .hrNo {border-color: #EE7777;}
   .hrOk {border-color: #77EE77;}
   
/*---------------------------------------------------------------------------------*/   
.edStat
    { float:right;
      color:#FFFFFF;
      background-color:#8888DD;
      border-style:solid;
      border-width:3px;
      border-color:#8888DD;
      text-align:center;
      font-family:Monospace;
      font-weight:bold;
      font-size:8pt;
      padding:2px;
      position:relative;
      top: 20px;
      left: 0px;
      z-index:3;
    }
:lang(th) {font-family: "Arial Unicode MS", serif;
           font-size:12pt;
           }
/*------------------------------------------------------------ middle area frame -------------------------------------------------------------------*/
.cInfoBox, .sInfoBox, .rInfoBox, pInfoBox
   {
      border-style:solid;
      border-width:1px;
      border-color:#BFBFBF;
      background-color: #DDDDDD;
      position:relative;
      top:2px; 
/*--      height:115px;   --*/
      left:0px; 
      right:0px;
      bottom:2px;
      padding:5px 5px 5px 5px;
      color:#888888;
   }
   .navInfoBox {
    border: 1px solid #BFBFBF;
    background-color: #DDDDDD;
    position:relative;
    top:2px; 
    padding: 2px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    font-size: 16px;
    color: #202020;
    }   
 .navButton {
    border: 1px solid #60A0A0;
    border-radius: 5px;
    background-color: #A0E0E0;
    padding: 2px;
    margin: 1px;
    width: 80px;
    display: inline-flex;
    color: #008080;
 }   
 .navButton>span {
    margin: auto;
    font-family: Calibri, Arial, Arial, Helvetica, sans-serif;
    font-size: 14px;
 
 }
 .navButton:hover {
    color: #F0D000;
    font-weight: bold;
    background-color: #008080;
    cursor: pointer;
 }

/* section in the maiin box just divide line */
.subBox {
      border-top: 1px solid #BFBFBF;
      border-bottom: 1px solid #BFBFBF;
      padding: 2px 0px;
      margin: 0px;
      position: relative;
}


/* --------------------------- This frame is for positioning the content --------------------------------------*/
.infoFrame {
      position:relative;
      border-style:none;
      border-width:1px;
      border-color:#880000;
}
.reportFrame {
      position:absolute;
      border-style:none;
      border-width:1px;
      border-color:#880000;
      top:0px; 
      left:0px; 
      right:0px;
      padding:1px;
      margin-left:70px;
}
.dummyFrame {
     position:relative;
     border-style:none;
     margin:0px;
     padding:0px;
}

/* ########################################### GROUP OF ICONS ################################################### */

/*------------------------- edit icon ---------------------------------------*/
.edIcon {
     background-image:url("./images/eEditN.png");
     border-style:none;
     width:36px;
     height:36px;
     float:right;
     right:5px;
     top:5px;
     cursor:pointer;
  }
.edIcon:hover
  {  
   border-style:none;
   background-image:url("./images/eEditH.png");
  }
/*-------------------------- Yes icion ---------------------------------------*/
.ysIcon, .noIcon, .bkIcon, .nxIcon, .blankIcon
  {
     border-style:none;
     width:36px;
     height:36px;
     float:right;
     right:5px;
     top:5px;
     cursor:pointer;
     z-index:3;
  }
/*-------------------------- No icion ----------------------------------------*/
.noIcon {
     background-image:url("./images/eNoN.png");
}
.noIcon:hover
{  
    border-style:none;
    background-image:url("./images/eNoH.png");
}
/*-------------------------- Yes icion ---------------------------------------*/
.ysIcon {
    background-image:url("./images/eYesN.png");
}
.ysIcon:hover
{  
   border-style:none;
   background-image:url("./images/eYesH.png");
}
/*-------------------------- Back icon ---------------------------------------*/
.bkIcon {
    background-image:url("./images/eLeftN.png");
}
.bkIcon:hover
{  
   border-style:none;
   background-image:url("./images/eLeftH.png");
}
/*-------------------------- Back icon ---------------------------------------*/
/*-------------------------- Next icon ---------------------------------------*/
.nxIcon {
    background-image:url("./images/eRightN.png");
}
.nxIcon:hover
{  
   border-style:none;
   background-image:url("./images/eRightH.png");
}
/*-------------------------- Next icon ---------------------------------------*/



/* ================= SMALL ICON =========================== */
.yssIcon, .nosIcon {
     border-style:none;
     width:20px;
     height:20px;
     float:left;
     left:2px;
     right:0px;
     top:0px;
     cursor:pointer;
     z-index:3;
  }
/*--------------------------Small  Yes icion ---------------------------------------*/
.yssIcon {
    background-image:url("./images/esYesN.png");
}
.yssIcon:hover
{  
   border-style:none;
   background-image:url("./images/esYesH.png");
}
/*--------------------------Small  Yes icion ---------------------------------------*/
/*--------------------------Small No icion ----------------------------------------*/
.nosIcon {
     background-image:url("./images/esNoN.png");
}
.nosIcon:hover
{  
    border-style:none;
    background-image:url("./images/esNoH.png");
}

.txIcon
    { text-align:left;
      text-align:center;
      font-family:Monospace;
      font-weight:bold;
/*--------      font-family:Verdana,Arial,Sans-serif; ------------*/
      font-size:14pt;  
      cursor:pointer;
    }
.txIcon:hover
{  
    border-style:solid;
    border-width:1px;
    background-color:#C0EFC0;
}



/* ######################################### END GROUP OF ICONS ############################################## */
/* ###################################### START GROUP OF STATUS ############################################## */
.staOk,  .staWarn, .staNo, .staNone, .staNoS
            { 
             background-color:transparent;
             border-style:solid;
             border-color:black;
             border-width:3px;
             border-radius:10px;
             color:#5F5F5F;
	font-family:Verdana,Arial,Sans-serif;
	font-weight:normal;
	font-size:14pt;
	text-align:center;
             text-decoration:none;
             vertical-align:middle;
             margin:2px 2px 2px 2px;
             padding:2px 10px 2px 10px;
             width:150px;
             height:32px;
	}
.staOk   { border-color:#008000;
           background-color: #CFFFCF;
         }
.staWarn { border-color:#808000;
           background-color: #FFFFCF;
         }
.staNo   { border-color:#800000;
           background-color: #FFCFCF;
         }
.staNone { border-color:#808080;
           background-color: #CFCFCF;
         }
.staAbso {
           position:absolute;
           margin:3px;
           padding:2px;
           width:320px;
           height:32px;
           left:320px;
         }          
.staNoS
         { 
           border-color:#800000; 
           border-width:2px;
           background-color: #FFCFCF;
           font-size:10pt;
           height:20px;  
         }   

/* ######################################## END GROUP OF STATUS ################################################ */
/* ######################################## START GROUP OF HELP-POPUP ########################################### */
.popHelp, .popMsg
{
    background-color:#DFDFFF;
    border-width:10px;
    border-style:solid;
    border-radius:20px;
    border-color:#8888FF;
    position:absolute;
    top:120px;
    left:160px;
    width:780px;
 /*   height:800px; */
    padding:10px;
    margin:10px;
    visibility:hidden;
    z-index:5; 
}
.popMsg {height:800px;}
/* ######################################## END GROUP OF HELP-POPUP ############################################# */

/*------------------------------------------------------------ Supervisor Edit Box-------------------------------------------------*/

.supEdBox{
      border-style:solid;
      border-width:3px;
      border-color:#AAAA00;
      background-color:#EEEEAA;
      color:#111111; 
      position:absolute;
      margin:0px 8px 0px 8px; 
      top:1px;
      left:2px;
      right:2px;
      bottom:1px;
      padding:5px;
      visibility:hidden;
      font-size:12pt;
      height:190px;
  
}


/* ######################################## START GROUP OF STUDENT INFORMATION ############################################# */

.siBox {

        visibility:visible;
        display:inline;
}

.siBoxHide {

        visibility:hidden;
        display:none;
}


/*--############################## end of style for soadcoop ###############################--*/

/*--############################## end of style for soadcoop ###############################--*/

/*--############################## end of style for soadcoop ###############################--*/

/* ######################################## STUDENT PRE DATA ############################################# */

.txInput2 {
  font-size: 16px;
  background-color: #EEFFFF;
  position: absolute;
  left: 230px;
  width: 250px;
  }
.btSave {
  display: inline-block;
  background-color: #DDEEEE;
  width:80px;
  padding: 2px;
  border-radius: 5px;
  border-style: solid;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  }
.btSave:hover {
  background-color: #446666;
  color: #EEEE55;
  }


/* ######################################## STUDENT INFOR LIST ############################################# */

.infoState, .infoState0,.infoState1,.infoState2,.infoState3 {
  display: inline-block;
  background-color: #DDDDDD;
  width:32px;
  height:16px;
  border-radius: 12px;
  margin:5px 6px 0px 5px;
  padding:0px;
  vertical-align: text-bottom;
  text-align: center;
  color: #E0E0E0;  
}

.infoState1 {
  background-color: #DD9999;
}

.infoState2 {
  background-color: #DDDD99;
}

.infoState3 {
  background-color: #99DD99;
}


.stuInfoFrame {
  position:relative;
  border-style:none;
  margin:0px;
  padding:0px;
  min-height:120px;
  font-size:10px;
  color:#000000;
}

.StuImgSmall 
    {
      border:2px solid #CCCCCC;
      margin:2px;
      width:75px;
      height:100px;
      position:absolute;
      right:5px;
      top:5px;
    }
.infoBar0, .infoBar1,.infoBar2,.infoBar3 {
  background-color:#A0A0A0;
  padding: 0px;
  margin: 0px;
  height: 28px;
}

.infoBar1 {
  background-color:#C05F5F;
}
.infoBar2 {
  background-color:#C0C05F;
}
.infoBar3 {
  background-color:#5FC05F;
}

.infoBar0:hover {
  background-color:#444444;
  color:#EEEEEE;
}
.infoBar1:hover {
  background-color:#440000;
  color:#EECCCC;
}
.infoBar2:hover {
  background-color:#444400;
  color:#EEEECC;
}
.infoBar3:hover {
  background-color:#004400;
  color:#CCEECC;
 }
/*change to use GRID 
.subInfoBar {
  position: relative;
  left: 48px;
  padding: 0px;
  margin: 0px;
}
*/
.subInfoBar {
  display:grid;
  grid-template-columns: 50px 100px 380px 150px 1fr;
  padding: 0px;
  margin: 3px 0px 5px;
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.infoStatusBox {
  position:relative;
  border:2px solid #CCCCCC;
  margin:0px;
  padding:0px;
  height:110px;
  width:650px;
  font-size:14px;
  color:#000000;
}

.infoStatus {
  position:relative;
  border:2px solid #CCCCCC;
  margin:0px;
  padding:0px 0px 0px 5px;
  height:70px;
  width:650px;
  font-size:14px;
  color:#000000;
  /* background-color:#FFFFCC;*/
}
.infoDocLink {
  display:inline-block;
  position:absolute;
  left:600px;
  top:0px;
  width:15px;
  height:20px;
  border: solid 2px #EFEFEF;
}
.infoDocLink:hover {
  background-color: #00CFCF;
  cursor: pointer;
}
/* #############################################################################*/
/*  FOR PRINT STUDENT WEEKLY REPORT */
/* #############################################################################*/

/* This is for Print Page */
.icnPrt {
  position: absolute;
  height: 48px;
  width:  48px;
  right: 10px;
  top:0px;
  margin: 2px;
  padding: 4px;
  border-radius: 36px;
  z-index: 4;
  border: solid 1px #EFEFEF;  
}
.icnPrt:hover {
  background-color: #8F8FBF;
}
.icnPrt > img {
  height: 48px;
  width:  48px;
  position: relative;
  top: 0px;
  left: 0px;
}


/* This is for Prevuw One week on the weekly report area*/
.icnPreVw{
  position: absolute;
  height: 24px;
  width:  24px;
  right: 10px;
  top: 10px;
  margin: 2px;
  padding: 4px;
  border-radius: 24px;
  z-index: 4;
  border: solid 3px #EFEFEF;
  display: inline-block;
}
.icnPreVw:hover {
  border: solid 2px #8F8FBF;
}



/* Print Icon for Status Page */

.icnPrint {
  border: solid 2px #EFEFEF;
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 16px;
  float: right;
}
.icnPrint:hover {
  border-color: #8F8FBF;
  cursor: pointer;
}
/* ###################################################################################################*/
/* FOR NEW INTERFACE WITH STUDENT and LECTURER INFORMATION BOX */
/* ###################################################################################################*/
 
/* ---------------- THIS PART FOR STUDENTS / LECTURES INFORMATION BOX in LEFT MENU -------------------*/
.iPhoto {
   width:60px;
   position:relative;
}
.iPhoto:hover {
  cursor: pointer;
}
.iPhotoFrame {
  position: relative; 
  width: 60px;
  height: 60px;
  margin: 0px;
  padding:0px;
  background-color: #DFDF00;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0;
  border-radius: 32px;
  vertical-align: middle;
  font-size:10px; 
  overflow: hidden;
  display: inline-block;
}
.iPrg {
 position: relative;
 width: 64px;
 height: 48px;
 margin: 0px;
 top: -5px;
 padding: 0px 0px 0px 0px;
 border-width: 1px;
 border-style: none;
 border-color: #C0C0C0;
 color: #888888;
 text-align: center;
 font-size: 28px;
 font-weight: normal;
 font-family: Calibri, Arial, sans-serif;
 display: inline-block;
 vertical-align: middle;
 line-height: 95%;
}

.iSID {
  margin: 5px 0px 3px 0px;
  padding: 0px;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  font-family: Calibri, Arial, sans-serif;
  color: #000000;
  text-align: left;
}
.iSName {
  margin: 0px;
  padding: 0px 5px 0px 5px;
  font-size: 14px;
  font-weight: normal;
  font-family: RoboC, Calibri, Arial, sans-serif;
  color: #000000;
  text-align: left;
}
.isUpper {
  text-transform: uppercase;
}
.isLower {
  text-transform: lowercase;
}
.isCap {
  text-transform: capitalize;
}


#BoxSTInfo {
  margin: 0px 5px;
  padding: 5px;
  /*vertical-align: middle;*/
  display: block;
  text-align: center;
  background-color: #E0E0E0;
  border-style: solid;
  border-width: 2px;
  border-color: #FF8822;
  border-radius: 12px;
  
}

/*#######################################################################################*/
/* FOR INFO COMPANY & SUPERVISOR */
#BoxCMInfo {
  margin: 0px 5px;
  padding: 5px;
  /*vertical-align: middle;*/
  display: block;
  text-align: center;
  background-color: #E0E0E0;
  border-style: solid;
  border-width: 2px;
  border-color: #008800;
  border-radius: 12px;
}
#iCMBanner {
  display: grid;
  grid-template-columns: 48px 1fr;
  margin: 5px 1px;
  padding: 3px;
  border: 1px solid #808080;
  border-radius: 5px;
}
#iCMBanner:hover {
  border-width: 2px;
  padding: 2px;
  cursor: pointer;
}
#iCMLogoFrame {
  position: relative;
  width: 36px;
  height: 36px;
  margin: 0px;
  padding: 0px;
  background-color: #DFDF00;
  border-width: 1px;
  border-style: solid;
  border-color: #C0C0C0;
  border-radius: 10px;
  vertical-align: middle;
  font-size: 10px;
  overflow: hidden;
  display: inline-block;
}
.iCMLogo {
  width: 36px;
  object-fit: contain;
}
.iCMName, .iCMHead {
  margin: 0px;
    padding: 0px 5px 0px 5px;
    font-size: 12px;
    font-weight: normal;
    font-family: Calibri, Arial, sans-serif;
    color: #000000;
    text-align: center;
}
.iCMHead {
  font-weight: bold;
  font-size: 16px;
  color:#008000;
}
/*#######################################################################################*/

/*################################################################################ START */
/* FOR LETTER REQUEST */
/*#######################################################################################*/

/*-------------------------- FOR FORM --------------*/
      .fm-row {height: 36px;
               position: relative;
               margin: 5px 0px;
               padding: 1px;
               }
      
      .fm-label {
            font-family: Calibri, Arial, Helvetica, sans-serif;
            font-size: 16px;
            padding: 0px 5px 0px 0px;
            text-align: right;
            margin: 0px;
            color: #2f2f2f;
            width: 120px;
            display: inline-block;
        }
        .fm-text {
            position: relative; 
            width: 240px;
            left:10px;
            padding: 2px;
            font-size: 18px;
        }
        .formBox {
/*            width: 600px;    --> use the size of its container*/ 
            padding: 5px;
            border-style: solid;
            border-color: #BFBFBF;
            border-width: 1px;
            background-color: #DFDFDF;
            color: #888888;
            position: relative;
        }
        .fm-button {
            border-width: 1px;
            border-color: #888888;
            border-style: solid;
            width: 80px;
            /*height: 32px;*/
            font-family: Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin: 3px;
            padding: 4px 10px 4px 10px;
            display: inline-block;
            border-radius: 4px;
            color:#888888;
            
        }
        .fm-button:hover {
            cursor: pointer;
            background-color: #4F4F4F;
            border-color: #BFBFBF;
            color: #BFBFBF;
        }
 /* Field Colume */
        .fm-c1, .fm-c2, .fm-c3, .fm-c4 {
          position: absolute;
          left: 5px;
        }
        .fm-c2 {left:250px;}
        .fm-c3 {left:400px;}
        .fm-c4 {left:550px;}
        
/* Filed width */
        .fm-w1 {width: 100px;}
        .fm-w2 {width: 180px;}
        .fm-w3 {width: 290px;}
        .fm-w4 {width: 400px;}

/* format place holder text */        
        ::placeholder {
           font-size: 14px;
           color: #888888;
        }
        ::-moz-placeholder {
           font-size: 14px;
           color: #888888;
        }
        ::-webkit-input-placeholder {
           font-size: 14px;
           color: #888888;
        }
        :-ms-input-placeholder {
           font-size: 14px;
           color: #888888;
        }
        
        
        
/* ------------ FOR STATUS STAGE -------------*/

        .stDone, .stNow, .stNext {
          width : 500px;
          padding: 8px;
          margin: 5px 0px 5px 5px;
          border-style: solid;
          border-width: 3px;
          border-color: #008F00;
          background-color: #008F00;
          font-family: "Calibri", "Arial", sans-serif;
          font-size: 18px;
          color:#EFEFEF;
        }
        .stNow {
          background-color: #EFEFEF;
          color:#008F00;
        }
        .stNext {
          border-color: #8F8F8F;
          border-width: 1px;
          background-color: #EFEFEF;
          color: #4F4F4F;
        }
        .stDate {
          font-family: sans-serif;
          font-size: 12px;
          text-align: right;
          float: right;
          display: block;
        }
        
/* ------------ FOR STAGE 2 PROCESS-------------*/        
        #stImg2 {
            height: 96px;
            position: absolute;
            box-shadow: 1px 2px 4px 0 gray;
            top: -60px;
            right : 10px;
        }
    
        .expBar { height:0px;
        padding: 3px;
        margin: 0px 20px 0px 0px;
        border-bottom: solid 1px #CFCFCF;
        position: relative;    
        }
        #expDot {
        margin: 0px;
        padding: 1px;
        width: 20px;
        height: 20px;
        border: solid 1px #AFAFAF;
        border-radius: 16px;
        font-size: 15px;
        text-align: center;
        position: absolute;
        right: -10px;
        top: -12px;
        color:#8F8F8F;
        background-color: #BFBFBF;
        }
        #expDot:hover {
          background-color: #DFAFAF;
          cursor: pointer;
        }
        #detBox {
          display: block;
          position: relative;
        }
/*------------------------------------------------------- edit area ---------------------------*/        
        .edOFF .edField {
          display: none;
        }
        .edON .edField {
          display: inline-block;
        }
        .EditArea {
          width:640px;
          height: 280px;
          border: solid 3px #AFAFAF;
          border-radius: 10px;
          padding: 5px;
          margin: 0px;
          background-color: #EFEFEF;
          font-family: Calibri, Arial,sans-serif;
          font-size: 16px;
          position: absolute;
          display: none;
          z-index: 6;
        }
        #dEditContent {
          margin:3px;
          padding: 3px;
          border: solid 1px #DFDFDF;
          min-height: 160px;
          font-family: Calibri, Arial, sans-serif;
          font-size: 16px;
        }
/*------------------for stage 3 and printing -------------*/ 
    #dPrintArea {
            width: 17.5cm;
            height: 27cm;
            border: solid 1px black;
            padding: 10mm 15mm 10mm 20mm;
            position: absolute;
        }
    .prtButton, .prtButtonSmall {
      width: 96px;
      height: 64px;
      display: inline-grid;
      grid-template-columns: 32px 1fr;
      border: solid 2px #EFEFEF;
      background-color: #EFAFAF;
      font-size: 14px;
      font-family: Calibri, Arial, sans-serif;
      text-align: center;
      padding: 6px;
      margin: 8px 0px 8px 6px;
      vertical-align: top;

    }
    .prtButtonSmall {
      width: 24px;
    }
    .pDone {background-color: #AFEFAF;}
    .pNoDo {background-color: #EFAFAF;}
    .prtButton:hover {
      background-color: #CFCFCF;
      cursor: pointer;
      box-shadow: 1px 1px 5px #6F6F6F;
    }
    .prtButton>span:first-child, .pDone>span:first-child {
        border: 2px solid darkred;
        padding: 3px;
        border-radius: 16px;
        display: inline-block;
        width: 18px;
        height: 18px;
        margin: 1px;
        font-size: 16px;
        font-weight: bold;
        color: darkred;
    }
    .pDone>span:first-child {
      border: 2px solid green;
      color: green;
    }
    .prtButton>span:nth-child(3) {
      font-size: 10px;
      grid-column: 1/3;
    }
    	.popPrint {
	    position: absolute;
	    top:130px;
	    left:170px;
	    display: none;
	    width: 210mm;
	    min-height: 50mm;
	    border: solid 2px #8F8FFF;
	    background-color: #FFFFFF;
	    z-index :4;
	}
/*#######################################################################################*/
/* FOR LETTER REQUEST */
/*################################################################################## END */

.MsBox{
  background-color: #FFCFCF;
  border: solid 2px #8F0000;
  border-radius: 10px 0px 0px 10px;
  
  width:500px;
  font-size: 16px;
  opacity: 1.0;
}
/*------- meesage box of Cancel Request --*/
#iCancelReq>span:nth-child(2),
#iCancelReq>span:nth-child(3) {
  display: block;
  float: right;
  text-align: center;
  padding: 1px;
  margin: 0px 2px;;
  width: 40px;
  color: #DF8F8F;
  font-weight: bold;
  font-size: 12px;
  border: solid 1px #DFDFDF;
}
#iCancelReq>span:nth-child(3) {
  color: #8FDF8F;
}
#iCancelReq>span:nth-child(2):hover {
  background-color: #8F0000;
}
#iCancelReq>span:nth-child(3):hover {
  background-color: #008F00;
}

/*#######################################################################################*/
/* FOR COMPANY EVALUATION */
/*################################################################################## END */
/*-------------------------- FOR FORM --------------*/
      .evfm-row {height: 36px;
               position: relative;
               margin: 1px 0px;
               padding: 1px;
               font-family: Cambria,"Times New Roman", serif;
               font-size: 4.5mm;
               }
      .evfm-ck {
          transform: scale(1.25);
          margin-right: 5px;
      }
      .evfm-sm {
          font-size: 4mm;
      }
/* Field Colume */
        .evfm-c1, .evfm-c2, .evfm-c3, .evfm-c4 {
          position: absolute;
          left: 24px;
          }
        .evfm-c2 {left:210px;}
        .evfm-c3 {left:360px;}
        .evfm-c4 {left:480px;}
/* range */
      .evfm-rg {
          transform: scale(1.2);
          width: 400px;
      }
      .evfm-rg-box {
        width: 600px;
        left: 100px;
        padding: 0px 0px 0px 100px;
        margin: 0px;
      }
      .evfm-rg-text {
        display: inline-block;
        position: relative;
        margin: 1px 0px;
        width: 300px;
        font-family: Cambria,"Times New Roman", serif;
        font-size: 3mm;
      }  
      .evfm-rg-nm {
        position: absolute;
        display: inline-block;
        right: 30px;;
        width: 80px;
        padding: 2px;
        margin: 0px;
        text-align: center;
        border: 2px solid #008000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 8mm;
        font-weight: bold;
        background-color: #AFEFAF;
      }


/* ###################################### FOR INTERN REPOT STATUS ############### */
.internFrame {
  color: #808080;
  border: 1px solid #808080;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-content: center;
  padding: 2px;
  margin: 1px 5px 5px;
}
.internBT,.internBTon {
  color:#C0C0C0;
  padding: 6px;
  margin: 2px;
  border: 2px solid #606060;
  border-radius: 5px;
  display: flex;
  background-color: #808080;
}
.internBT>span, .internBTon>span {
  margin: auto;
  font-size: 14px;
}

.internBTon {
  background-color: #008000;
}
.internBTon:hover {
  border-color: #00C000;
  color: #C0C000;
  cursor: pointer;
}
      
/*#################################################################################### BEG*/
/* Attribute for program color */
.icPrg {
       display: inline-block;
       width: 10px;
       height: 10px;
       border: solid 1px transparent;
       border-radius: 10px;
       padding: 0px;
       margin: 0px;;
}
[PgC="0"]  /*no specify*/
  {background-color: transparent; border-color: #8F8F8F;}
[PgC="1"]  /*---ARC---*/
  {background-color: #FF9900; border-color: #FF9900;}
[PgC="2"]  /*---INA---*/
  {background-color: #006FCF; border-color: #006FCF;}            
[PgC="3"]  /*---IND---*/
  {background-color: #669900; border-color: #669900;}
[PgC="4"]  /*---CMD---*/
  {background-color: #CF0000; border-color: #CF0000;}
/* Attribute for program color */

/*Attribute for Internship Mode background*/
[data-intmode="1"]{ background-color: #E83696; } 
/*Attribute for Internship Mode background*/

/*################################################################################## END */