/* CSS File 
  ===================
    Item Name: Enter - Login and Register HTML5 Template
    Author: Ashish Maraviya
    Version: 1.0
    Copyright 2020 - 2021
===================*/
/*------------------------------------------------------------------
  [ Master css file, Table of contents ]
  
  00. General css
  01. Page css
  
------------------------------------------------------------*/
/*------------------------------------------------------------------
  # [Color codes]
    color: #611b96;
# */
/*------------------------------------------------------------------
  [Typography]
  
  Body copy:      font-family: 'Lato', sans-serif;
-------------------------------------------------------------------*/
/** 00. General css **/
@-webkit-keyframes "animatezoom" {
  from {
    -webkit-transform: scale(0); }
  to {
    -webkit-transform: scale(1); } }
@keyframes "animatezoom" {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }
body {
  font-family: "Lato", sans-serif;
  margin: 0; }

/** 01. Page css **/
.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/page-bg.png");
  background-size: cover;
  background-repeat: no-repeat; }
  .login-page .page-detail {
    display: block;
    text-align: center; }
    .login-page .page-detail img {
      width: 150px;
      margin-bottom: 40px; }
    .login-page .page-detail p {
      margin-bottom: 14px;
      color: #dedede; }
    .login-page .page-detail .btns-group {
      display: flex;
      justify-content: center; }
      .login-page .page-detail .btns-group .login-btn, .login-page .page-detail .btns-group .signup-btn, .login-page .page-detail .btns-group .forgot-btn {
        background-color: #611b96;
        color: white;
        padding: 8px 15px;
        margin: 5px;
        border: none;
        cursor: pointer;
        width: 85px;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid transparent;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
        .login-page .page-detail .btns-group .login-btn:hover, .login-page .page-detail .btns-group .signup-btn:hover, .login-page .page-detail .btns-group .forgot-btn:hover {
          background-color: #521780;
          color: #e2c6f7;
          border: 1px solid transparent; }
        .login-page .page-detail .btns-group .login-btn:focus, .login-page .page-detail .btns-group .signup-btn:focus, .login-page .page-detail .btns-group .forgot-btn:focus {
          outline: none; }
  .login-page #login-modal .modal-content, .login-page #forgot-modal .modal-content {
    max-width: 350px;
    top: 15%; }
  .login-page #signup-modal .modal-content {
    max-width: 450px;
    top: 15%; }
  .login-page .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4); }
    .login-page .modal .modal-content {
      margin: auto;
      background-color: white;
      border: 1px solid transparent;
      border-radius: 0; }
    .login-page .modal .input-control {
      padding: 15px 30px 30px 30px;
      position: relative; }
      .login-page .modal .input-control p {
        text-align: center;
        color: #868686; }
      .login-page .modal .input-control .p-l-5 {
        padding-left: 5px; }
      .login-page .modal .input-control .p-r-5 {
        padding-right: 5px; }
      .login-page .modal .input-control .p-l-10 {
        padding-left: 10px; }
      .login-page .modal .input-control .p-r-10 {
        padding-right: 10px; }
      .login-page .modal .input-control input[type=text], .login-page .modal .input-control input[type=email], .login-page .modal .input-control input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border-bottom: 2px solid #ccc;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        box-sizing: border-box;
        border-radius: 0;
        font-size: 14px;
        color: #777;
        background-color: #f8f8f8;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
        .login-page .modal .input-control input[type=text]:focus, .login-page .modal .input-control input[type=email]:focus, .login-page .modal .input-control input[type=password]:focus {
          border-radius: 0;
          border-bottom: 2px solid #611b96;
          outline: none !important; }
      .login-page .modal .input-control .password-field-show {
        position: relative;
        display: block; }
        .login-page .modal .input-control .password-field-show .field-icon {
          position: absolute;
          top: 23px;
          right: 10px;
          z-index: 2;
          color: #868686; }
      .login-page .modal .input-control .label-container {
        display: inline-block;
        position: relative;
        padding-left: 30px;
        margin: 12px 0;
        cursor: pointer;
        font-size: 14px;
        color: #868686;
        line-height: 20px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
        .login-page .modal .input-control .label-container a {
          color: #611b96;
          text-decoration: none;
          font-weight: 600;
          -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
          -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out; }
          .login-page .modal .input-control .label-container a:hover {
            color: #444; }
        .login-page .modal .input-control .label-container input[type=checkbox] {
          outline: 2px solid #868686;
          -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
          -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
          position: absolute;
          opacity: 0;
          cursor: pointer;
          height: 0;
          width: 0; }
        .login-page .modal .input-control .label-container .checkmark {
          position: absolute;
          top: 2px;
          left: 2px;
          height: 15px;
          width: 15px;
          background-color: #f8f8f8;
          outline: 2px solid #cccccc; }
          .login-page .modal .input-control .label-container .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg); }
        .login-page .modal .input-control .label-container:hover input ~ .checkmark {
          background-color: #3c3c3c;
          -webkit-transition: all .3s ease-in-out;
          -moz-transition: all .3s ease-in-out;
          -o-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out; }
        .login-page .modal .input-control .label-container input:checked ~ .checkmark {
          background-color: #611b96; }
          .login-page .modal .input-control .label-container input:checked ~ .checkmark:after {
            display: block; }
        .login-page .modal .input-control .label-container .label-container input:checked ~ .checkmark:after {
          display: block; }
      .login-page .modal .input-control button {
        border: 2px solid transparent; }
        .login-page .modal .input-control button:hover {
          background-color: transparent;
          color: #611b96;
          border: 2px solid #611b96; }
        .login-page .modal .input-control button:focus {
          outline: none; }
      .login-page .modal .input-control span.psw {
        float: right;
        padding-top: 10px; }
      .login-page .modal .input-control .psw a {
        font-size: 13px;
        color: #611b96;
        text-decoration: none;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
        .login-page .modal .input-control .psw a:hover {
          color: #868686; }
      .login-page .modal .input-control .login-btns {
        text-align: center; }
        .login-page .modal .input-control .login-btns .signin-link {
          background-color: transparent !important;
          opacity: 1 !important;
          color: #868686;
          font-weight: 600;
          font-size: 15px;
          padding: 10px 0; }
          .login-page .modal .input-control .login-btns .signin-link a {
            color: #611b96;
            cursor: pointer;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; }
            .login-page .modal .input-control .login-btns .signin-link a:hover {
              color: #ccc; }
      .login-page .modal .input-control .division-lines {
        width: 100%;
        position: relative;
        display: block; }
        .login-page .modal .input-control .division-lines p {
          text-align: center;
          width: 40%;
          margin: 15px auto;
          text-transform: uppercase;
          font-size: 12px;
          font-weight: 600;
          color: #aaa;
          position: relative;
          z-index: 2; }
        .login-page .modal .input-control .division-lines:after {
          content: '';
          width: 30%;
          height: 1px;
          background: #ddd;
          position: absolute;
          top: 8px;
          left: 0;
          margin: auto; }
        .login-page .modal .input-control .division-lines:before {
          content: '';
          width: 30%;
          height: 1px;
          background: #ddd;
          position: absolute;
          top: 8px;
          right: 0;
          margin: auto; }
      .login-page .modal .input-control .login-with-btns {
        text-align: center; }
        .login-page .modal .input-control .login-with-btns .google, .login-page .modal .input-control .login-with-btns .facebook, .login-page .modal .input-control .login-with-btns .twitter, .login-page .modal .input-control .login-with-btns .linkedin {
          width: 35px;
          height: 35px;
          margin: 8px 5px 8px 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #c3c3c3;
          background-color: transparent;
          outline: 1px solid transparent;
          -webkit-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out; }
          .login-page .modal .input-control .login-with-btns .google i, .login-page .modal .input-control .login-with-btns .facebook i, .login-page .modal .input-control .login-with-btns .twitter i, .login-page .modal .input-control .login-with-btns .linkedin i {
            color: #c3c3c3;
            font-size: 14px;
            -webkit-transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out; }
        .login-page .modal .input-control .login-with-btns .google:hover {
          border: 2px solid #DB4437; }
          .login-page .modal .input-control .login-with-btns .google:hover i {
            color: #DB4437; }
        .login-page .modal .input-control .login-with-btns .facebook:hover {
          border: 2px solid #3b5998; }
          .login-page .modal .input-control .login-with-btns .facebook:hover i {
            color: #3b5998; }
        .login-page .modal .input-control .login-with-btns .twitter:hover {
          border: 2px solid #00acee; }
          .login-page .modal .input-control .login-with-btns .twitter:hover i {
            color: #00acee; }
        .login-page .modal .input-control .login-with-btns .linkedin:hover {
          border: 2px solid #0e76a8; }
          .login-page .modal .input-control .login-with-btns .linkedin:hover i {
            color: #0e76a8; }
        .login-page .modal .input-control .login-with-btns .already-acc {
          margin-top: 10px;
          display: block;
          color: #868686;
          font-size: 14px; }
          .login-page .modal .input-control .login-with-btns .already-acc a {
            padding: 0 5px;
            color: #611b96;
            background-color: transparent;
            text-decoration: none;
            font-weight: 600;
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out; }
            .login-page .modal .input-control .login-with-btns .already-acc a:hover {
              color: #444; }
    .login-page .modal button {
      background-color: #611b96;
      color: white;
      padding: 8px 15px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 85px;
      font-size: 14px;
      font-weight: 600;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    .login-page .modal .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
      position: relative; }
      .login-page .modal .imgcontainer .close {
        position: absolute;
        right: 10px;
        top: -21px;
        color: #ccc;
        font-size: 25px;
        font-weight: bold;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
        .login-page .modal .imgcontainer .close:hover {
          color: #999;
          cursor: pointer; }
        .login-page .modal .imgcontainer .close:focus {
          color: #999;
          cursor: pointer; }
  .login-page .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s; }

.container {
  padding: 16px; }

.division-lines {
  position: relative; }

/*# sourceMappingURL=form-style.css.map */