*
{
	margin:0;
	padding:0;
}

#logo {
    padding: 60px 18px 40px 0px;
    margin-right: -10px;
}
html, body.login-body {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    float: left;
    height: 100%;
}
#login {
width: 465px;
margin: 0 auto;
transition: opacity 1s;
-webkit-transition: opacity 1s;
vertical-align: middle;
height: 100%;
height: 80vh;
max-width: 120%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

#login h1
{
	background:#3399cc;
	padding:20px 0;
	font-size:140%;
	font-weight:300;
	text-align:center;
	color:#fff;
}

.login-body #login form {
    padding: 0;
    background-color: #0071b3;
    border: 1px solid rgba(255,255,255, 0.3);
    color: #ffffff;
    height: 275px;
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

input[type="text"], input[type="password"] {
    width: 100%;
    background: #fff;
    margin-bottom: 4%;
    border: 1px solid #ccc;
    padding: 4%;
    color: #555;
    height: 35px;
		margin-top: 15px;
}

input[type="submit"], #signup_form input#signupButton, #forgetpwd_form input#pwdbtn, #signup_otp input#otpbtn, #forgetpwd_otp input#otpbtn {
    width: 100%;
    border: 0;
    padding: 4%;
    transition: background .3s;
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    -webkit-transition: background .3s;
    margin-top: 23px;
    margin-bottom: 23px;
}

input[type="submit"]:hover, #signup_form input#signupButton:hover, #forgetpwd_form input#pwdbtn:hover, #signup_otp input#otpbtn:hover, #forgetpwd_otp input#otpbtn:hover {
    background: #ffffff;
    color: #333333;
    transition: 0.5s ease all;
}

/*Login CSS*/

body.login-body {
background-size: cover;
height: 100%;
float: left;
width: 100%;
position: relative;
min-height: calc(100% - 1px);
background: linear-gradient(45deg, #7bbff7, #0e0e0e);
}
h3.form-title {
    line-height: 30px;
    margin-top: 11px;
    text-align: center;
		font-size: 20px;
}
div#login_form, #forgetpwd_form, #signup_form {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 50px;
}
#login a {
    color: #ffffff;
    line-height: 50px;
    font-weight: 500;
    text-decoration: underline;
		font-size: 12px;
}
#login a:hover{
    text-decoration: none;
    outline-style: none;
}
#login_form input {
font-weight: 400;
background: #dcdbdb;
color: #333333;
}
/*input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
input:-webkit-autofill {
    background-color: transparent !important;
}*/
/*input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    transition: background-color 5000s ease-in-out 0s;
}
*/
#login #logo img {
    width: 155px;
    height: auto;
}
#login div#login_form {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 25px;
}
@media (max-width:767px){
	#login{
	height: auto;
	max-width: 95%;
}
.login-body #login form {
    height: 100%;
}
#login #logo:after {
  content: none !important;
}
}
@media (min-width:768px) and (max-width: 992px){
	#login{
	height: auto;
}
.login-body #login form {
		height: 100%;
}
#login #logo:after {
    content: none !important;
}
}
#login #logo:after {
    border-right: 1px solid #2b80b1;
    content: "|";
    width: 2px;
    height: 60%;
    position: absolute;
    color: #2b80b1;
    text-align: center;
    left: 210px;
}
#login_form .error {
		line-height: 0;
		position: absolute;
		top: 74px;
		text-align: center;
		right: 0;
		left: 0;
}

 @import "compass";
    @import "compass/css3/transform";
    $grid-columns: 12;
    $tile-gutter-width: 6px;
    $tile-gutter-left: ceil(($tile-gutter-width / 2));
    $tile-gutter-right: floor(($tile-gutter-width / 2));
    
    @mixin row-span-add-gutter ($index, $perc) {
      &.row-span-#{$index} {
        $add-gutter: $tile-gutter-width * ($index - 1);
        padding-bottom: calc(#{$perc} + #{$add-gutter});
      }
    }
    
    @mixin calc-tile-column($index, $class) {
      .col-#{$class}-#{$index} {
        &.tile {
          padding: 0;
          border-color: transparent;
          border-style: solid;
          border-top-width: 0;
          border-left-width: $tile-gutter-left;
          border-right-width: $tile-gutter-right;
          border-bottom-width: 0;
          margin-bottom: $tile-gutter-width;
          &.square {
            $perc: percentage(($index / $grid-columns));
            padding-bottom: $perc;
            @for $i from 2 through 4 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
          &.rect_2x3 {
            $perc: percentage(($index / $grid-columns * 1.5));
            padding-bottom: $perc;
            @for $i from 2 through 4 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
          &.rect_3x2 {
            $perc: percentage(($index / $grid-columns * 0.75));
            padding-bottom: $perc;
            @for $i from 2 through 3 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
          &.rect_2x1 {
            $perc: percentage(($index / $grid-columns * 0.5));
            padding-bottom: $perc;
            @for $i from 2 through 3 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
          &.rect_3x1 {
            $perc: percentage((($index / $grid-columns) / 3));
            padding-bottom: $perc;
            @for $i from 2 through 3 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
          &.rect_4x1 {
            $perc: percentage(($index / $grid-columns * 0.5));
            padding-bottom: $perc;
            @for $i from 2 through 3 {
              @include row-span-add-gutter ($i, $perc)
            }
          }
        }
      }
    }

    @mixin loop-tile-columns($columns, $class) {
      @for $i from 1 through $columns {
        @include calc-tile-column($i, $class);
      }
    }
    
    @mixin make-grid-tile() {
      @include loop-tile-columns($grid-columns, xs);
      @media screen and (min-width: 768px) {
        @include loop-tile-columns($grid-columns, sm);
      }
      @media screen and (min-width: 992px) {
        @include loop-tile-columns($grid-columns, md);
      }
      @media screen and (min-width: 1200px) {
        @include loop-tile-columns($grid-columns, lg);
      }
    }
    
    .row.row-tile {
      margin-left: -$tile-gutter-left;
      margin-right: -$tile-gutter-right;
      @include make-grid-tile();
      [class*="col-"] .tile-content:hover {
        box-shadow: #bbb 0px 0px 0px 2px;
      }
      .tile-content {
        position: absolute;
        //display: table-cell;
        top: 0px;
        left: 0;
        bottom: 0;
        right: 0;
        background: #4679BD;
        * {
          margin: 0;
        }
        > .tile-content-title {
          position: absolute;
          padding: $tile-gutter-width;
          left: 0;
          bottom: 0;
          right: 0;
        }
      }
    }