/*
 INFORMATION
 

 Track#              Date              By                Description
 -----------------------------------------------------------------------------------------------------------------------------------------
 0000                01/02/2019        ETS-IS            Create
 


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

/* ETS CSS specifications 

Colors:
Light teal – #CCD7CE 
Light gray – #E6E6E6
Medium gray – #999999
Stripe gray – #F7F7F7
Stripe yellow – #FDF4DD
Warm gray – #EAE8DC
SoE teal – #669999
Dark teal – #336666
Checkmark green – #6EAC51
Orange gradient – #EFC88B to #FFFFFF
Warm gray gradient – #EAE8DC to #FFFFFF
IU red – #7D110C 
link color - #336666
 clear: both; 
*/

/* DIV AS TABLE */

.divTable { display:table; width: 100%;}

.divTable_margin1pc { display:table; width:100%; border: none; margin: 1%; }

.row:after { content: ""; display: table;}
.colF { float:left; }
.colL, .colR { width: 10%; }
.colMid { width: 80%; }

.boxBorder { margin-top: 1%; padding: 1%; background-color: #F8F8F8; border-color:lightgray; border-style:solid; border-collapse:collapse; border-width: 0.01em; }

.boxBorderLightgray { margin-top: .5%; padding: .5%; background-color: #FFFFFF; border-color:lightgray; border-style:none; border-collapse:collapse; border-width: 0.01em; }

.col-left50 { float:left; border-color:lightgray; border-style:solid; border-collapse:collapse; border-width:0.01em; text-align: left; padding-left: 5px; padding-right: 5px; width: 50%;}

.blockCenter { display: block; vertical-align: middle; margin-left: auto ;margin-right: auto; }

.divBorder { width: 80%; padding:10px; border: 0.01em solid gray; margin: 1%; }

.boxNoTopBorder { border-top: none !important; border-style: solid; border-color: #DCDCDC; border-width: 0.01em; background-color: transparent; padding: 1%; }

.boxBorder2 { border-style: solid; border-color: #DCDCDC; border-width: 0.01em; background-color: transparent; padding: 1%; }

.boxBorder50 { width:50%; border-style: solid; border-color: #DCDCDC; border-width: 0.01em; background-color: transparent; padding: 1%;}

.box { display: flex; }
.box div { width: 250px; margin: 2%;  }

.box2 { display: flex; }
.box2 div { width: 98%; margin-left:1%; margin-right: 1%;  }


/* DIV AS ROW */

.divRow { display: table-row; vertical-align: middle !important;}
.divRowAlt { display:table-row; background-color: ghostwhite; vertical-align: middle !important; }
.divRowCenter { display: table-row; width:100%; vertical-align: middle !important; text-align: center; }


/* DIV AS CELL */

.divCel5 { display:table-cell; width: 5%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel10 { display:table-cell; width: 10%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel15 { display:table-cell; width: 15%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel16 { display:table-cell; width: 16%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel20 { display:table-cell; width: 20%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel30 { display:table-cell; width: 30%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel42 { display:table-cell; width: 42%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel40 { display:table-cell; width: 40%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel40 { display:table-cell; width: 40%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel50 { display:table-cell; width: 50%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel55 { display:table-cell; width: 55%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel60 { display:table-cell; width: 60%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel80 { display:table-cell; width: 80%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel90 { display:table-cell; width: 90%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.divCel100 { display:table-cell; width: 100%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }

.div100{
  width:100%;
}


.divCel23_left { display:table-cell; width:23%; text-align:left; vertical-align: middle !important; }
.divCel77_left { display:table-cell; width:77%; text-align: left; vertical-align: middle !important; padding-right: 10%; }

.divCel15_right { display:table-cell; width:15%; text-align:right; vertical-align: middle !important; }
.divCel85_left { display:table-cell; width:85%; text-align:left; vertical-align: middle !important; }

/* colspan */
.divCel_colspan2 { width:100%; flex: 2; vertical-align: middle !important; }


/* DIV AS CELL WITH BORDER */

.divCelBox30 { display:table-cell; width: 30%; border: 2px solid #e6e6ff; text-align:center; padding: 1%; margin: 3%; background-color: #F7F7F7; vertical-align: middle !important; }
.divCelBox30A { display:table-cell; width: 30%; border: 1px solid #e6e6ff; text-align:center; padding: .5%; margin: .5%; background-color: #F7F7F7; vertical-align: middle !important; }



/* TABLE */

.tbl { width: 100%; border-collapse: collapse; }

.tbl_margin1pc { width:100%; border: none; border-collapse: collapse; margin: 1%; padding: 10px; }

.tblSRBox { width:100%; border: 1px solid gainsboro; border-collapse: collapse; padding: 1%; }

.tblSR { width:100%; border: none; padding: 1%; }

.tbl_margin20px { width:100%; border: none; margin: 20px; padding: 5px; }

.row { vertical-align: middle !important; }
.rowAlt { background-color: ghostwhite; vertical-align: middle !important; }
.rowCenter { width:100%; vertical-align: middle !important; text-align: center; }

tr.rowSR td { background-color: white; vertical-align: middle !important; height: 35px; border-bottom: 1px solid gainsboro; border-top: 1px solid gainsboro; padding-left: 8px; }

tr.rowSRAlt { background-color: whitesmoke; vertical-align: middle !important; height: 25px; padding-left: 8px; }
tr.rowSRReg { background-color: white; vertical-align: middle !important; height: 25px; padding-left: 8px; }

.rowh{ height: 25px; }


.cell5  {  width: 5%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell10 { width: 10%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell16 { width: 16%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell20 { width: 20%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell30 { width: 30%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell42 { width: 42%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell40 { width: 40%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell50 { width: 50%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell60 { width: 60%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell80 { width: 80%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }
.cell90 { width: 90%; border-collapse:collapse; border-width:0; vertical-align: middle !important; }

.valign_top { vertical-align: top !important; }



/* DIV */

.divBoxM0 { width:96%; border-collapse:collapse; border-width:0; background-color: ghostwhite; margin: 1%; padding: 1%; }

.divBoxM1 { width:95%; border-width: 1px; border-style: solid; border-color: gainsboro; margin: 1%; padding: 1%; align-content:center; }

.divBoxM1A { width:96%; border-width: 1px; border-style: solid; border-color: gainsboro; margin: 1%; padding: 15px; }

.divMarginLR { margin-left: 2%; margin-right: 2%; }

.divMargin1pc { margin: 1%; }

.divBoxSR { width:98%; border:none; background-color: white !important; padding: 1%; }

.divBoxSR2 { width:98%; border:none; background-color: white !important; padding: 2%; text-align: center; }

.divBoxStudentProfile{ width: 100%; border: 1px solid #CCD7DE; padding: 5px;}


.leftMargins{
  margin-left:5% !important;
}

.HorzMargins5{
  margin-left:5% !important;
  margin-right:5% !important;
}