/*======================================
    Login CSS
========================================*/
.login {
    background-color: #f9f9f9;
}

.login .form-head {
    padding: 46px;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    background-color: #fff;
}

.login .form-head .title {
    font-size: 30px;
    line-height: 1.42;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}

.login .form-head form .form-group {
    margin-bottom: 25px;
}

.login .form-head form .form-group label {
    display: block;
    margin-bottom: .5rem;
    color: #888;
    font-size: 18px;
    font-weight: 400;
    display: none;
}

.login .form-head form .form-group input {
    width: 100%;
    min-height: 56px;
    padding: 3px 20px;
    color: #081828;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    outline: 0;
    background-color: #fff;
    font-size: 18px;
}


/*.login .form-head form .form-group .input-group{
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  min-height: 56px;
  padding: 20px 16px 20px 16px;
  color: #081828;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  background-color: #fff;
}

.login .form-head form .form-group .input-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.login .form-head form .form-group .input-group label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: 0.2s ease all;
  color: #999;
}*/


.login .form-head form .check-and-pass .form-check {
    float: left;
}

.login .form-head form .check-and-pass .form-check a {
    color: #5b704c;
}

.login .form-head form .check-and-pass .form-check .form-check-input:checked {
    background-color: #5b704c;
    border-color: #5b704c;
}

.login .form-head form .check-and-pass .form-check-label a:hover {
    text-decoration: underline;
}

.login .form-head form .check-and-pass .lost-pass {
    float: right;
    color: #777;
    position: relative;
    top: -2px;
}

.login .form-head form .check-and-pass .lost-pass:hover {
    color: #5b704c;
    text-decoration: underline;
}

.login .form-head form .button {
    margin-top: 25px;
}

.login .form-head form .button .btn {
    width: 100%;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.login .form-head form .button .btn:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.login .form-head form .outer-link {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #888;
    margin-top: 30px;
    text-align: center;
    font-family: 'Jost', sans-serif;
}

.login .form-head form .outer-link a, .login .form-head form .lost-pass a {
    color: #5b704c;
}

.login .form-head form .outer-link a:hover {
    text-decoration: underline;
}

.login .form-head .alt-option {
    margin: 30px 0;
    text-align: center;
    display: inline-block;
    position: relative;
    width: 100%;
    z-index: 1;
}

.login .form-head .alt-option span {
    font-size: 15px;
    background: #fff;
    color: #888;
    padding: 5px 15px;
}

.login .form-head .alt-option::before {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    background: #eee;
    content: "";
    z-index: -1;
}

.login .form-head .socila-login ul li {
    display: block;
    margin-bottom: 12px;
}

.login .form-head .socila-login ul li:last-child {
    margin: 0;
}

.login .form-head .socila-login ul li a {
    padding: 15px 20px;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    display: block;
    color: #888;
    font-size: 15px;
}

.login .form-head .socila-login ul li a.facebook:hover {
    color: #fff;
    background: #3b5999;
    border-color: transparent;
}

.login .form-head .socila-login ul li a.facebook:hover i {
    color: #fff;
}

.login .form-head .socila-login ul li a.facebook i {
    color: #3b5999;
}

.login .form-head .socila-login ul li a.google:hover {
    color: #fff;
    background: #dd4b39;
    border-color: transparent;
}

.login .form-head .socila-login ul li a.google:hover i {
    color: #fff;
}

.login .form-head .socila-login ul li a.google i {
    color: #dd4b39;
}

.login .form-head .socila-login ul li a i {
    display: inline-block;
    margin-right: 10px;
    font-size: 15px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

@media only screen and (max-width: 767px) {

    .login .form-head {
        padding: 30px;
    }
    .login .form-head .title {
        font-size: 22px;
    }
    .login .form-head form .form-group label{
        font-size: 16px;
    }
    .login .form-head .alt-option {
        margin: 20px 0;
    }
    .login .form-head form .form-group {
        margin-bottom: 18px;
    }

    .login .form-head form .check-and-pass .form-check {
        float: none;
        text-align: center;
        display: block;
        margin-top: 10px;
    }
    .login .form-check .form-check-input {
        float: left;
        margin-left: -1.5em;
        text-align: center;
    }
    .login .form-head form .check-and-pass .lost-pass {
        float: right;
        color: #777;
        position: relative;
        top: -2px;
        margin-top: 10px;
        text-align: center;
        display: block;
    }
}