/*!
 * Start Bootstrap - 3 Col Portfolio (https://startbootstrap.com/template-overviews/3-col-portfolio)
 * Copyright 2013-2018 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-3-col-portfolio/blob/master/LICENSE)
 */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,700,700i');

body {
  /*color:#516290;*/
	color:#222222;
  font-family:Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 14px;
	background-color: #EFEFEF;
}

/*body *{
	font-family: 'Roboto', sans-serif;
}*/
.optred{
	color:#ff3300;
}
.optgreen{
	color:#006600;
}


/********** icons -***************************/
.fa {
 padding: 5px;
  font-size: 14px;
  width: 16px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
 color:#EFEFEF;
}

.fa:hover {
    opacity: 0.7;
}

/*.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}*/
/******************Index Page *************************************/
.wrap_index1{
	background: url('../image/index_bg.jpg') no-repeat left bottom;
	background-size: cover;
	width: 50%;
	height:100vh;
	position: absolute;
}

.wrap_index2{
	width: 50%;
	height:100vh;
	position: absolute;
	right:0;
	background-color: #f7f7f7;
}
/******************************************************************/
/********************************* Login Form *************************************/
.login-form {
	width: 450px;
	margin: 0px auto;
	position: relative;
}

    .login-form form {
    	margin-bottom: 15px;
        background: #f7f7f7;
		height: 400px;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .login-form h2 {
        margin: 0 0 15px;
    }

	
    .form-group .form-control {
        min-height: 38px;
		font-size: 13px;
        border-radius: 2px;
    }


.form-control:focus{
	box-shadow: 1px 1px 5px #FF3B3F;
}
    .form-group .btn {        
        font-size: 15px;
		background-color: #FF3B3F;
		/*border:solid 2px #0094d3;*/
		color:#ffffff;

    }

	.form-group .form-control-inline {
        min-height: 38px;
		font-size: 13px;
        border-radius: 2px;
		
		display:inline;
    }

	.form-group .btn-sec {        
        font-size: 15px;
		background-color: #f00;
		color:#fff;
    }

/********************************* Login Form *************************************/

/************************************ tables **************************************/

.table{
	/*background-color: antiquewhite;*/
	margin-top: 20px;
}
.table-striped tbody tr:nth-of-type(1) {
	/*background-color: #d9d9d9!important;*/
	background-color: #fff!important;
	border-bottom : solid 2px #FF3B3F !important;
	color:#0094d3;
}

.table-striped tbody tr:nth-of-type(1) th,
.table-striped tbody tr td  {
	border-left:solid 2px #EFEFEF;
}
.table-striped tbody tr:nth-of-type(odd) {
	background-color: #e6f7ff;
}
.table-striped tbody tr:nth-of-type(even) {
	background-color: #f2ffe5;
}
.table th{
	
}

.table tr{
	
}

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


/************************************************ Alert Message *******************************/

.alert {
    padding: 2px 5px 2px 5px;
	font-size: 13px;
	color:white;
	opacity: 1;
	transition: opacity 0.6s;
	border-radius: 2px;
	font-weight: normal;
	borer:solid 1px #00f;
	width:100%;
	text-align: center;
}

.alert.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color:#F84144;}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}



/************************************************ Alert Message *******************************/

@media screen and (max-width: 479px) {
	.login-form {
		width: 100%;
	}
}

@media screen and (min-width: 480px) and (max-width: 991px) {

}

@media screen and (min-width: 992px) and (max-width: 991px) {
  body {
    padding-top: 100px;
  }
}





/**************** Navigation Bar ************************************************************/

/*.navbar{
	background-color: #fff;
	height: 80px;
	box-shadow: 3px 3px rgba(0,0,0,.1);
}

.navbar img{
	width:150px;
	max-height: 60px;
}
.navbar-toggler{
	background-color: #039fb0;
}
.navbar-toggler .navbar-toggler-icon{
	cursor: pointer;
	background-color: #039fb0;
}

.navbar-nav .nav-item .nav-link{
	color:#000;
}*/
/**************** End of Navigation Bar *****************************************************/



/********************* Dropdown ************************************************************/
/********************* End of Dropdown *****************************************************/
.boxContainer{
	 /*border:solid 1px #;*/
	 padding: 8px;
	margin-bottom: 50px;
}

.boxContainer *{
	 font-weight: 300;
}

.boxContainer .boxtitle{
	text-align: center;
	font-size: 15px;
}

.boxContainer .box{
	border:solid 1px #aaa;
	
}

.boxContainer:hover .docname{
	display: block;
}

.boxContainer .box:hover{
	border:solid 1px #039fb0;
	
}

.box .boxpic{
	height: 150px;
	width: 100%;
	position: relative;
}

.boxpic .docname{
	position: absolute;
	display: none;
	background-color: rgba(0,0,0,.5);
	padding: 3px;
	color:#fff;
	font-size: 14px;
	bottom: 0;
	word-spacing: 3px;
	width:100%;
	z-index: 10;
}

.boxpic .coverimage{
	position: absolute;
	z-index: 9;
	
}

.boxpic img{
	width:100%;
	height:100%;
	z-index: 8;
}


.box .divUpload{
	height: 50px;
}
.divUpload>div{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
	margin-bottom: 0;
	border:solid 1px #039fb0;
	/*border-top:solid 1px #039fb0;
	border-bottom:solid 1px #039fb0;*/
	padding: 4px;
	border-radius: 2px;
	background-color:#fff;
	color:#039fb0;
	text-align: center;
	cursor: pointer;
}

.divUpload>div:hover{
	background-color:#039fb0;
	color:#fff;
	
}


.box .checkbox>label{
	cursor: pointer;
}

.box .status{
	height: 60px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin:20px 0 0 20px;
}

.status img{
	width:50px;
	display: block;
	margin-left:auto;
	margin-right:auto;
}

.status div{
	font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
	text-align: center;
}

.box .info{
	height: 20px;
}


.box .remarks{
	height: 60px;
	overflow:auto;
	border:none;
	width: 100%;
	font-size: 11px;
	text-align: justify;
	padding: 4px;
	
}

.box .download{
	border-top: solid 1px #bbb;
	padding: 6px;
	margin-top: 20px;
}

.box .download a:hover{
	text-decoration: none;
}




/*********** frmPeriod**********************************************/

#frmLoginAs select{
	background-color: #fff;
	-webkit-appearance: none; 
   -moz-appearance: none;
    appearance: none;
	height: 25px;
	padding: 2px 10px;
	font-size: 11px;
	border:solid 1px #FF3B3F;
	cursor:pointer;
	
	/*float:right;*/
}

#frmLoginAs input[type='submit'],
#frmLoginAs input[type='button']{
	height: 25px;
	padding: 2px 10px;
	font-size: 11px;
	background-color: #FF3B3F;
	color:#fff;
	cursor: pointer;
	
	
	/*margin-top:-25px;
	margin-right:0;*/
	
}

/*#frmPeriod #btnLogout{
	background-color: #fff;
	color:#039fb0;
}*/

#frmLoginAs .nav-item{
	margin-right: 5px;
	margin-bottom: 5px;
}


/********************************** MODAL Dialogue ***********************/
.img_loading{
	position: fixed;
	z-index: 101;
	width: 256px;
	height: 256px;
	top:50%;
	left:50%;
	margin:-128px 0 0 -128px;
	display: none;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

.modal-content {
    position: relative;
    background-color: #fefefe;
   	width: 450px;
	margin: 100px auto;
	padding: 10px;
}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

#BoxModal{
	padding: 40px;
	z-index: 100;
}

#BoxModal .modal-content{
	padding: 30px;
}

.modal-content p{
	text-align: justify;
}
#BoxModal .TermsBtn{
	padding-top: 20px;
	margin: auto;
}

#BoxModal .TermsBtn span{
	height: 25px;
	padding: 2px 10px;
	background-color: #FF3B3F;
	margin-right: 20px;
	color:#fff;
	cursor: pointer;	
	border-radius: 2px;
	display: inline-block;
	
}

/*********************************** Modal End ********************************************/

.page-title{
	font-size: 17px;
	font-weight: 500;
	color:#0094d3;
	border-bottom: dashed 1px #0094d3;
	margin: 30px 0 40px 0;
	
}

.page-content{
	/*border:solid 1px;*/
	margin-top: 20px;
	min-height: 600px;
}


/***************************************** Mobile Compatible Responsive ****************/
@media screen and (max-width: 479px) {
.wrap_index1{
	background: url('../image/3.jpg') no-repeat left bottom;
	background-size: cover;
	width: 100%;
	height:100vh;
	position: absolute;
}

.wrap_index2{
	background: url('../image/2.jpg') no-repeat left bottom;
	width: 100%;
	height:100vh;

	right:0;
	
}

.login-form {
	width: 100%;
	margin: 0px auto;
	position: relative;
	background: url('../image/3.jpg') no-repeat left bottom;
}	
	
.login-form form {
    	margin-bottom: 15px;
        /*background: #f7f7f7;*/
	/*background: url('../image/3.jpg') no-repeat left bottom;*/
		/*height: 400px;*/
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
	opacity: .9;
    }
	
	.navbar img{
		width:100px;
	}
	
	#frmLoginAs select{
		width:60%;
	}
	#frmLoginAs input[type='submit'],
#frmLoginAs input[type='button']{
		width:20%;
	}
	
	.page-content .row{
		width:100%;
	}
	
	.alert{
		width:100%;
	}
}

@media screen and (min-width: 480px) and (max-width: 991px) {
.wrap_index1{
	background: url('../image/3.jpg') no-repeat left bottom;
	background-size: cover;
	width: 100%;
	height:100vh;
	position: absolute;
	/*display: none;*/
}

.wrap_index2{
	width: 400px;
	height:100vh;

	right:0;
	
}

.login-form {
	width: 100%;
	margin: 0px auto;
	position: relative;
}	
	.login-form>div:first-child{
		height: 40px;
	}	
.login-form form {
    	margin-bottom: 15px;
        /*background: #f7f7f7;*/
	background: url('../image/3.jpg') no-repeat cover;
		/*height: 400px;*/
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
	opacity: .9;
    }
	


}


@media screen and (min-width: 992px){
  .page-content form>.row:first-child{
		width:60%;
	}
	
	.alert{
		width:60%;
	}
}