/***
Login page
***/
body { 
  color: #000; 
  font-family: 'Open Sans', sans-serif;
  padding: 0px !important;
  margin: 0px !important;
  font-size:13px; 
}

/*
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't 
properly apply the media queries in Bootstrap's CSS. To address this, 
you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.
*/
@-webkit-viewport { 
  width: device-width; 
}

@-moz-viewport { 
  width: device-width; 
}

@-ms-viewport { 
  width: device-width; 
}

@-o-viewport { 
  width: device-width; 
}

@viewport { 
  width: device-width; 
}

/* Internet Explorer 10 doesn't differentiate device width from viewport width, 
and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, following CSS code applied */
@-ms-viewport { 
  width: auto !important; 
}

/***
General typography 
***/
a {
  text-shadow: none !important;
  color: #0d638f;
}

/***
Fix link outlines after click
***/
a,a:focus, a:hover, a:active {
  outline: 0;
}

/***
Font Awesome Icons
***/
[class^="fa-"],
[class*=" fa-"] {
  display: inline-block;
  margin-top: 1px;
  font-size: 14px;
  *margin-right: .3em;
  line-height: 14px;
}

/***
Make font awesome icons fixed width(latest version issue)
***/
li [class^="fa-"],
li [class*=" fa-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li [class^="fa-"].icon-large,
li [class*=" fa-"].icon-large {
  /* increased font size for icon-large */
  width: 1.5625em;
}
/***
Close icon used for modal dialog and other UI element close buttons
***/
.close {
  display: inline-block;
  margin-top: 0px;
  margin-right: 0px;
  width: 9px;
  height: 9px;
  text-indent: -10000px;
  background-repeat: no-repeat !important;
  background-image: url("../../i/remove-icon-small.png") !important;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #E0DFDF;
  border-bottom: 1px solid #FEFEFE;
}


.display-none,
.display-hide {
  display: none;
}

.border {
  border: 1px solid red;
}

.inline {
  display: inline;
}

/***
ie9 modes
***/
.visible-ie9 {
  display: none;
}

.ie9 .visible-ie9 {
  display: inherit !important;
}

.hidden-ie9 {
  display: inherit;
}

.ie9 .hidden-ie9 {
  display: none !important;
}


/********************
 GENERAL UI ELEMENTS 
*********************/

/* input with left aligned icons */
.input-icon {
  position: relative;
}


.input-icon input {
   padding-left: 33px !important;
}

.input-icon i {
  color: #ccc;
  display: block;
  position: absolute;
  margin: 11px 2px 4px 10px;
  width: 16px;
  height: 16px;
  font-size: 16px;
  text-align: center;
}

.input-icon.right input {
   padding-left: 12px !important;
   padding-right: 33px !important;
}

.input-icon.right i {
   right: 8px;
   float: right;
}

.has-success .input-icon > i {
  color: #468847;
}

.has-warning .input-icon > i {
  color: #c09853;
}

.has-error .input-icon > i {
  color: #b94a48;
}


/***
Forms 
****/

.form-control::-moz-placeholder {
  color: #888888;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #888888;
}
.form-control::-webkit-input-placeholder {
  color: #888888;
}

/* Form inputs */
.form-control {
  font-size: 14px;
  font-weight: normal;
  color: #333333;
  background-color: white;
  border: 1px solid #e5e5e5;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 4px;
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #999999;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
  cursor: not-allowed;
  background-color: #eeeeee;
}
.form-control.height-auto {
  height: auto;
}

label {
  font-weight: 400;
  font-size: 14px;
}

/*
div.checker input {
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    border: none;
    background: none;
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
}

div.checker, div.checker span, div.checker input {
    width: 19px;
    height: 19px;
}

    div.checker input {
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    div.checker, div.checker * {
        margin: 0;
        padding: 0;
    }

        div.checker span {
            display: -moz-inline-box;
            display: inline-block;
            zoom: 1;
            text-align: center;
            background-position: 0 -260px;
            background-image: url("../../i/sprite.png");
            background-repeat: no-repeat;
            -webkit-font-smoothing: antialiased;
        }

div.checker {
    display: -moz-inline-box;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
}*/


.checkbox {
  padding: 0;
}
.checkbox > label {
  padding-left: 0;
}

/* logo page */
.login {
  background-color: #f7f7f7 !important;
}

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

.login .content {
  background-color:#fff; 
  width: 360px;
  margin: 0 auto; 
  margin-bottom: 0px;
  padding: 30px;  
  padding-top: 20px;  
  padding-bottom: 15px;  
  border-radius: 5px;
  box-shadow: 1px 1px 30px #999999;
}

.login .content h3 {
  color: #555;
}
.login .content h4  {
  color: #555;
}

.login .content p {
  color: #222;
}

.login .content .login-form,
.login .content .forget-form {
    padding: 0px;
    margin: 0px;
}

.login .content .forget-form {
  display: none;
}

.login .content .form-title {
  font-weight: 300;
  margin-bottom: 25px;
}

.login .content .form-actions {
  background-color: #fff;
  clear: both;
  border: 0px;
  border-bottom: 1px solid #eee;
  padding: 0px 30px 25px 30px;
  margin-left: -30px;
  margin-right: -30px;
}

.login .content .form-actions .checkbox {
  margin-left: 0;
  padding-left: 0;
}

.login .content .forget-form .form-actions {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}  

.login .content .form-actions .checkbox {
  margin-top: 8px;
  display: inline-block;
}

.login .content .form-actions .btn {
  margin-top: 1px;
}

.login .content .forget-password {
  margin-top: 25px;
}

.login .content .problem-account {
  border-top: 1px dotted #eee;
  padding-top: 10px;
  margin-top: 15px;
}

.login .content .problem-account a {
  display: inline-block;
  margin-top: 5px;
}

/* footer copyright */
.login .copyright {
  text-align: center;
  margin: 0 auto; 
  padding: 10px;
  color: #999;
  font-size: 11px;
}

@media (max-width: 480px) {
  /***
  Login page
  ***/
  .login .logo {
    margin-top:10px;
  }

  .login .logo img {
    width:200px;
  }

  .login .content {
    padding: 20px; 
    width: 280px;
  }

  .login .content h3 {
    font-size: 22px;
  }


  .login .checkbox {
    font-size: 13px;
  }

  .login .content .form-actions {
        margin-left: -20px;
        margin-right: -20px;
  }
}