:root{
	--krcBlue: #1a114d;
	--krcOrange: #f15622;
	--lightYellow: #fffeda;    /* #fffdb3; */
	--krcBackground: #e3e3e3;  /* #eae9e9; */
	--lightGrey:#f2f2f2;
	--whiteish:#fff;
	--pinkish:#ffe3d3;
	--krcLightBlue:#867faf;
}	

body,html{
	margin:0;
	width:100%;
}

body{
	font-family:arial;
	font-size:16px;
	background:var(--krcBackground);
}

input,textarea,select{
	border:1pt solid #ccc;
}
*:focus{ outline:0px transparent !important; }

.jqdp{
	width:85px;
}

.bld{
	font-weight:bold;
}

#VIPbox{
	
}

#secondsDiv{
	z-index:1001;
	width:200px;
	position:absolute;
	bottom:0;
	text-align:center;
	padding:10px;
	background:#fff;
	border-radius:3px;
	left:calc(50% - 100px);
}

.alertify{
	z-index:1500;
}

.alertify-logs{
	z-index:2000;
}

#fcmBrocLink{
	color:var(--krcBlue);
}

#subButtons{
	position:fixed;
	background:#f2f2f2;
	width:100%;
	bottom:0;
	padding:10px;
	text-align:center;
}

#cNameTitle{
	font-weight:bold;
}

div.ui-datepicker{
 font-size:.8em; 
 z-index:200;
}

.dot{
  height: 10px;
  width: 10px;  
  border-radius: 50%;
  border:1pt solid #888;
  display: inline-block;	
}

#nCircle{
  height: 15px;
  width: 15px;  
  border-radius: 50%;
  border:1pt solid var(--krcOrange);
  background: var(--krcOrange);
  color: var(--krcBlue);
  display: inline-block;	
  margin-left:5px;
  text-align:center;
}

.br3px{
	border:1pt solid #ccc;
	border-radius:3px;
}
.pad10{
	padding:10px;
}

.highlight{
	background:#ffff00;
}

.pFile{
	border: 1pt solid #ccc;
  padding: 3px;
  width: 500px;
  overflow-x: hidden;  
}    	

.pFile:hover{
	cursor:pointer;
	color:var(--krcLightBlue);	
	background:var(--lightGrey);
}

.greenLight{
	background:#75e806;
}
.greyLight{
	background:#bbb;
}

.f2bg{
	background:#f2f2f2;
}
.nTitle{
	padding:2px;	
}
.nTitle:hover{
	background:#fff;
	cursor:pointer;
}

#articleHeader{
	background:#f2f2f2;
	padding:10px;
	border:1pt solid #bbb;
	border-radius:3px;
}

#submission{
	width:100%;
	max-width:1400px;
}
#submission input{
	width:90%;
	margin-left:5%;
}	
#submission tr{
	border-bottom:1pt solid #ccc;
}

#submission th:nth-child(1){
	width:7%;
}
#submission th:nth-child(2){
	width:7%;
}
#submission th:nth-child(3){
	width:7%;
}
#submission th:nth-child(4){
	width:7%;
}
#submission th:nth-child(5){
	width:7%;
}
#submission th:nth-child(6){
	width:7%;
}
#submission th:nth-child(7){
	width:7%;
}
#submission th:nth-child(8){
	width:7%;
}
#submission th:nth-child(9){
	width:7%;
}
#submission th:nth-child(10){
	width:7%;
}
#submission th:nth-child(11){
	width:7%;
}
#submission th:nth-child(12){
	width:7%;
}

.responsiveTable{
	overflow-x:auto;
}

.vr{
	width:200px;
	border:1pt solid #ccc;
	margin-bottom:2px;
	padding:3px;
	text-align:center;
	display:inline-block;
	margin:3px;
}

.vr:hover{
	cursor:pointer;
	color:var(--krcOrange);
}

.fcmr:hover{
	cursor:pointer;
	color:var(--krcOrange);
}

.flx{
	display:flex;
}
.half{
	width:calc(50% - 20px);
	padding:10px;
	vertical-align:top;
	display:inline-block;	
}
.fourth{
	width:calc(25% - 20px);
	padding:10px;
	vertical-align:top;
}

#ns20{
	width:20%;
	padding:10px;
	vertical-align:top;	
	margin:auto;
}

#inputBox{
	width:400px;
	padding:10px;
	border-radius:3px;
	border:1pt solid var(--krcBlue);
	background:#fff;
	margin:auto;
	position: relative;
  top: 50%;
  transform: translateY(-50%);	  
}

#content{
	padding:20px;
	background:var(--krcBackground);
  height:100vh;
  width:80%;
	min-width:800px;
	max-width:1500px;
	margin:auto;	
}

#menuWrapper{
	position:fixed;	
	left:0;
	top:0;
	z-index:1000;	
	margin-left:-370px;	 
	height:100vh;
}

#menu{
	width:350px;
	height:100vh;
	padding:10px;
	background:var(--krcBlue);
}

.mwItem{
	display:inline-block;
	vertical-align:top;
	width:30px;
	padding:10px;
}

.mwItem:hover{
	cursor:pointer;
}

.mvItem{
	color:#fff;
	padding:10px;
}

.left10{
	margin-left:10px;
}
.mItem{
	color:#fff;
	padding:10px;
}
.mItem:hover{
	cursor:pointer;
	color:#ffff00;
}
.cName{
	color:var(--krcLightBlue);
	padding:10px;
	font-weight:bold;
}

.ssImg{
	width:100%;
}

.sm{
	font-size:.8em;
}
.ib{
	display:inline-block;
}

.hideMe{
	display:none !important;
}

.btn{
	width:100px;
	color:#000;
	background:#eee;
	height:30px;
	border:1pt solid #efefef;
	border-radius:3px;	
	line-height:30px;
	text-align:center;
	display:inline-block;	
	z-index:10;
}

.btn:hover{
	cursor:pointer;
	background:#333;
	color:#fff;
}

.smBtn{
	width:30px;
	color:#000;
	background:#eee;
	height:30px;
	border:1pt solid #efefef;
	border-radius:3px;	
	line-height:30px;
	text-align:center;
	display:inline-block;	
	z-index:10;
}

.smBtn:hover{
	cursor:pointer;
	background:#333;
	color:#fff;
}




.ctr{
	text-align:center;
}

.clr{
	clear:both;
}

.clr5{
	clear:both;
	height:5px;
}	

.clr10{
	clear:both;
	height:10px;
}	

.clr20{
	clear:both;
	height:20px;
}	

.clr200{
	clear:both;
	height:200px;
}	

.clr100{
	clear:both;
	height:100px;
}	

.w40px{
	width:50px;
}
.w50px{
	width:50px;
}
.w50per{
	width:50%;
}
.w100per{
	width:100%;
}

#otherRequest{
	width:calc(100% - 20px);
}

#subNotes{
	width: 100%;
  height: 20vh;
  max-height:245px;
}

#cfuWrapper{
	display:none;
}

.brNum{
	width:40px;
	padding:2px;		
	display:inline-block;
	border:1pt solid #ccc;
	background:#fff;
}
.brNum:nth-child(even){
	background:#f2f2f2;
}
#bAcceptWrapper{
	display:none;
}

.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 211, 211, 211, .8 ) 
                url('../images/orangeSpin.gif') 
                50% 50% 
                no-repeat;
    background-size:40px;            
}

.lbl{
	display:inline-block;
	width:150px;
	padding-right:5px;
	text-align:right;
  text-transform:capitalize;	
}

.lbl170{
	display:inline-block;
	width:170px;
	padding-right:5px;
	text-align:right;
  text-transform:capitalize;	
}

.lbl250{
	display:inline-block;
	width:250px;
	padding-right:5px;
	text-align:right;
  text-transform:capitalize;	
}

.lbl300{
	display:inline-block;
	width:300px;
	padding-right:5px;
	text-align:right;
  text-transform:capitalize;	
}

.btn{
	width:110px;
	color:#fff;
	background:var(--krcBlue);
	height:27px;
	border:1pt solid background:var(--krcBlue);
	border-radius:3px;	
	line-height:26px;
	text-align:center;
	display:inline-block;	
	z-index:10;
	font-size:.9em;
	text-transform:capitalize;
}

.btn:hover{
	cursor:pointer;
	background:#aaa;
	color:#fff;
}
.fcmSlide{
	width:90%;
	max-width:400px;
	margin:auto;
}

.mobileSpacer{
	display:inline-block;
}

.karyImg{
	width:90%;
	margin:auto;
}

#intEcon{
	font-size:1.5em;
	font-weight:bold;
	color:var(--krcBlue);
}

#intEcon:hover{
	cursor:pointer;
	color:var(--krcOrange);
}	

.yellowUL{
	 list-style: none;
	 margin:0;
}
.yellowUL li::before{
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #ffff00; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

#kMenu{
  list-style-type: none;
  margin: 0;
  padding: 0;	
}
#kMenu li{
	display:inline-block;
	width:150px;
	text-align:center;
	border-radius:3px;
	background:#ccc;
	padding:5px;
	color:var(--krcBlue);
}	
#kMenu li:hover{
	color:var(--krcOrange);
	cursor:pointer;
}	

.kDiv{
	display:none;
	margin-top:10px;	
}
.kDiv > .fourth{
	border:1pt solid #333;
}

.om{
	width:50%;
	margin:auto;
	background:#f2f2f2;	
}

.em4{
	border:1pt solid #ccc;
	border-radius:3px;
}
.em4:nth-child(even){
	background:#f4f4f4;
}
.em4:nth-child(odd){
	background:#c9c9c9;
}

.p8em{
	font-size:.8em;
}

.p7em{
	font-size:.7em;
}

.kNum{
	width:40px;
}

.msNum{
	width:40px;
}

.nNum{
	width:40px;
}

@media only screen and (max-width : 768px) {

		#kMenu li{
			display:block;
			width:100%;
			margin-bottom:10px;
		}	
	
		.lbl{
			text-align:left;
			width:100%;
		}

		.lbl170{
			text-align:left;
			width:100%;
		}		

		.lbl250{
			text-align:left;
			width:100%;
		}		

		.lbl300{
			text-align:left;
			width:100%;
		}						

		#userID{
			width:95% !important;
		}
		#userPW{
			width:95% !important;
		}		
		.flx{
			display:block;
		}
		.half{
				width:calc(100% - 20px);
		}
		.fourth{
				width:calc(100% - 20px);
	  }
		.btn{
			margin-bottom:5px;
	  }

		#content{		  
			min-width:300px;
		}
		
		#inputBox{
			width:80%;
	  }
	  
	  #outputMetrics{
	  	width:calc(100% - 20px);
	  }

		.mobileSpacer{
			display:block;
			width:100%:
			clear:both;
			height:5px;
		}	  

}