@charset "utf-8";
/* CSS Document */
@import url(/css/assets/icons/simple-line/simple-line-icons.css);
html,body {
  height: 100%;
  width:100%;
  /* overflow:hidden; */
  background: url(../../../../images/login/pattern.svg);
  background-size:cover;
  margin:0px;
  padding:0px;
  display: flex;
  justify-content:center;
  align-items:center;
  }

div { font-size:11px;font-family: 'Roboto', sans-serif!important; color :#333333}

.login-logo {
	height:55px;
	display:block;
	text-align:center;
	}
	.login-logo img{ width:50px;}
	
.icon {background:#FFF;display:inline-block;padding:10px;line-height:18px;}
.icon i { font-size:15px; color:#7E8FA1;}

.input-group { margin-bottom:15px; display:block;}	
.login_content .input-group  input {font-size: 14px;font-weight: normal;color: #9A9898;background-color: #fff;border: none;width: 84%;margin-left:11px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;} 
.login_content .input-group  input {border-color: #999;	outline: 0;	-webkit-box-shadow: none;box-shadow: none;}
.form-buttons {	display:inline-block; width:99%; margin-bottom:2px; }
.form-buttons .remember { float:left; color:#FFF; font-weight:bold;}
.form-buttons .login { float:right;}
.form-buttons .login button, .form-buttons .login input { background:#09F; border:none; height:30px;width:70px; color:#FFF; font-size:13px;font-weight:bold; padding:0; }
.form-buttons .login button:hover, .form-buttons .login input:hover{ background:#038FEA;}
.login-links { display:inline-block; float:left;  }
.login-links a { color:#FFF; float:right; padding-bottom:5px; display:inline-block; padding-right:15px; text-decoration:none; }

label input[type="radio"] { margin-top: 1px; position: absolute; margin-left: -16px;}
	
label{float: left;  font-size: 13px;  padding: 0px 10px 10px 27px;}

.social {padding: 0px;width:100%;display:inline-block;text-align: center;}
.social-icons {
	padding: 0;
    margin: 0;
	display:inline-block;
	padding-right:10px;
	}

.social-icons:before, .social-icons:after {
  content: " ";
  display: table;
}
.social-icons:after {
  clear: both;
}
.social-icons li {
  float: left;
  display: inline;
  list-style: none;
  margin-right: 5px;
  margin-bottom: 5px;
  text-indent: -9999px;
}
.social-icons li > a {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  width: 28px;
  height: 28px;
  display: block;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.social-icons li:hover > a {
  background-position: 0 -38px;
}
.social-icons li .amazon {
  background: url(../../../../images/login/social/amazon.png) no-repeat;
}
.social-icons li .behance {
  background: url(../../../../images/login/social/behance.png) no-repeat;
}
.social-icons li .blogger {
  background: url(../../../../images/login/social/blogger.png) no-repeat;
}
.social-icons li .deviantart {
  background: url(../../../../images/login/social/deviantart.png) no-repeat;
}
.social-icons li .dribbble {
  background: url(../../../../images/login/social/dribbble.png) no-repeat;
}
.social-icons li .dropbox {
  background: url(../../../../images/login/social/dropbox.png) no-repeat;
}
.social-icons li .evernote {
  background: url(../../../../images/login/social/evernote.png) no-repeat;
}
.social-icons li .facebook {
  background: url(../../../../images/login/social/facebook.png) no-repeat;
}
.social-icons li .forrst {
  background: url(../../../../images/login/social/forrst.png) no-repeat;
}
.social-icons li .github {
  background: url(../../../../images/login/social/github.png) no-repeat;
}
.social-icons li .googleplus {
  background: url(../../../../images/login/social/googleplus.png) no-repeat;
}
.social-icons li .jolicloud {
  background: url(../../../../images/login/social/jolicloud.png) no-repeat;
}
.social-icons li .last-fm {
  background: url(../../../../images/login/social/last-fm.png) no-repeat;
}
.social-icons li .linkedin {
  background: url(../../../../images/login/social/linkedin.png) no-repeat;
}
.social-icons li .picasa {
  background: url(../../../../images/login/social/picasa.png) no-repeat;
}
.social-icons li .pintrest {
  background: url(../../../../images/login/social/pintrest.png) no-repeat;
}
.social-icons li .rss {
  background: url(../../../../images/login/social/rss.png) no-repeat;
}
.social-icons li .skype {
  background: url(../../../../images/login/social/skype.png) no-repeat;
}
.social-icons li .spotify {
  background: url(../../../../images/login/social/spotify.png) no-repeat;
}
.social-icons li .stumbleupon {
  background: url(../../../../images/login/social/stumbleupon.png) no-repeat;
}
.social-icons li .tumblr {
  background: url(../../../../images/login/social/tumblr.png) no-repeat;
}
.social-icons li .twitter {
  background: url(../../../../images/login/social/twitter.png) no-repeat;
}
.social-icons li .vimeo {
  background: url(../../../../images/login/social/vimeo.png) no-repeat;
}
.social-icons li .wordpress {
  background: url(../../../../images/login/social/wordpress.png) no-repeat;
}
.social-icons li .xing {
  background: url(../../../../images/login/social/xing.png) no-repeat;
}
.social-icons li .yahoo {
  background: url(../../../../images/login/social/yahoo.png) no-repeat;
}
.social-icons li .youtube {
  background: url(../../../../images/login/social/youtube.png) no-repeat;
}
.social-icons li .vk {
  background: url(../../../../images/login/social/vk.png) no-repeat;
}
.social-icons li .instagram {
  background: url(../../../../images/login/social/instagram.png) no-repeat;
}
.social-icons li .reddit {
  background: url(../../../../images/login/social/reddit.png) no-repeat;
}
.social-icons li .aboutme {
  background: url(../../../../images/login/social/aboutme.png) no-repeat;
}
.social-icons li .flickr {
  background: url(../../../../images/login/social/flickr.png) no-repeat;
}
.social-icons li .foursquare {
  background: url(../../../../images/login/social/foursquare.png) no-repeat;
}
.social-icons li .gravatar {
  background: url(../../../../images/login/social/gravatar.png) no-repeat;
}
.social-icons li .klout {
  background: url(../../../../images/login/social/klout.png) no-repeat;
}
.social-icons li .myspace {
  background: url(../../../../images/login/social/myspace.png) no-repeat;
}
.social-icons li .quora {
  background: url(../../../../images/login/social/quora.png) no-repeat;
}
.social-icons li .workcube {
  background: url(../../../../images/login/social/workcube.png) no-repeat;
}
.social-icons.social-icons-color > li > a {
  opacity: 0.7;
  background-position: 0 -38px !important;
}
.social-icons.social-icons-color > li > a:hover {
  opacity: 1;
}
.social-icons.social-icons-circle > li > a {
  border-radius: 25px !important;
}
.copyRight{ padding:5px;}
	.copyRight p,a {color: #807f7f;margin: 5px 0;}
.inc { padding:10px; color:#FFF;}
.inc a{color:#FFF;}
.ifrm {width:360px; height:250px; margin: 0 auto;}
#IE_compatibility {margin-top:30px;color:#FFF;font-size:15px;font-weight:bold;}
.loginWarning {
	color:#FFF ;
	background: #FFC800;
    padding: 10px;
    display: block;
    margin: 11px;
	}
.loginError {
	color:#FFF ;
	background: #FF373D;
    padding: 10px;
    display: block;
    margin:20px 25px 25px 25px ;
	}

  .loginError  a{color:#FFF;}

.rememberPanel{
	display:none;  
	width:100%;
	height:215px;
	}
	
/****************************************************************************/

/* Cubic Bezier Transition */
/***
Login page
***/
/* logo page */

.login .logo {
  margin: 60px auto 20px auto;
  padding: 15px;
  text-align: center; }

.login .content {width: 100%;padding: 0;color: black;margin-top: 35px;background: rgba(0, 25, 41, 0.36);display: inline-block;max-height: 698px !important;}


/* footer copyright */
.login .copyright {text-align: center;margin: 0 auto;padding: 2px;color: #eee;font-size: 13px;}
#sessionControl iframe { height:210px !important; }
@media (max-width: 480px) {
  /***
  Login page
  ***/

  .login .content { padding: 30px; width: 222px; }
  .login .copyright { width: 222px; }
  #sessionControl iframe { height:245px !important; }
 }


/********************************modal**********************************/

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.modal-header {
    padding: 2px 16px;
    background-color: #03A9F4;
    color: white;
}

.modal-body {padding: 2px 16px;font-size: 16px;color: #607D8B;}

.modal-footer {
    padding: 2px 16px;
    background-color: #F5F5F5;
    color: #607D8B;
}

.login-box {
  float: right;
  display:  block;
  width: 370px;
  margin: 25px 25px;
}
@media only screen and (min-width: 1367px) {
.banner-box {
  float:  left;
  background-color: white;
  max-height: 698px !important;
  height: 100%;
  padding: 0 10px;
  display: block;
}
}
@media only screen and (min-width: 1050px) {
  .banner-box {
    float:  left;
    background-color: white;
    max-height: 698px !important;
    height: 100%;
    padding: 0 10px;
    display: block;
  }
}
@media only screen and (max-width: 1050px) { 
  .topTitle{
    display: none;
  }.topDetail{
    display: none;
  }
  .bonibon-logo{
    display: none;
  }.loginhr{
    display: none;
  }

}
@media only screen and (max-width: 482px) { 
  .topTitle{
    display: none;
  }.topDetail{
    display: none;
  }
  .bonibon-logo{
    display: none;
  }.loginhr{
    display: none;
  }
  .login-box {
    display:  block;
    width: 100%;
    margin:auto;
  }
}