@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
    font-family: 'Poppins', sans-serif;
    background: #fff;
    font-size: 1.0em;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.08em;
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
    background-color: #fff;
    background: #fff;
}

#wrapper.login {
    overflow-x: visible;
    overflow-y: auto;
    width: 100%;
    height:100vh
}
#wrapper.signup {
    overflow-x: visible;
    overflow-y: auto;
    width: 100%;
}
.main {
    padding: 30px 0;
    height: 100%;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
.container.login {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.container.signup {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* ----------------------
   MISC
------------------------- */

form {
    z-index: 999
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 100;
}
.color-white {
    color:#fff
}
.color-blue {
    color:#4169E1
}
.color-red {
    color:#e10033
}
.color-green {
    color:#128c7E
}
.color-orange {
    color:#F08101
}
.color-purple {
    color:#4b0082
}
.bg-green {
    color:#128c7E
}
.bg-blue {
    color:#4169E1
}
.bg-purple {
    color:#4b0082
}
.bg-orange {
    color:#F08101
}
.btn-green {
    background-color:#128c7E
}
.btn-blue {
    background-color:#4169E1
}
.btn-purple {
    background-color:#4b0082
}
.btn-orange:hover,
.btn-green:hover,
.btn-blue:hover,
.btn-green:hover,
.btn-purple:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.margin-top-20 {
    margin-top:20px;
}
.margin-top-30 {
    margin-top:30px;
}
.width-100 {
    width:100%;
}
label.error {
    color: white;
    background-color:red;
    width:100%
}
label.error::first-letter {
  padding-left: 5px;
}
/* ----------------------
    LOGIN
------------------------- */
@media (max-width: 767px) {
    .login-box {
        padding: 15px 40px 40px;
        margin-top: 0;
    }
    .login-box h2 {
        margin: 20px 0 30px;
    }
}
@media (min-width: 768px) {
    .login-box h2 {
        margin: 45px 0 30px;
    }
}
.login-box {
    z-index: 100;
    position:relative;
    max-width: 680px;
    padding: 40px 40px 40px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
}
.middle-box {
    margin: 0 auto;
    padding-top: 40px;
    max-width: 680px;
    position: relative;
}
.footer-box {
    padding-top: 10px;
    color:#000;
}
.login-box h3 {
    margin: 0px 0 10px;
    font-weight:700
}
.login-box form {
    position:relative
}

/* ----------------------
    SLIM SCROLL BAR
------------------------- */
::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px gray;
    border-radius: 10px
}

::-webkit-scrollbar-thumb {
    background: #def9de;
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: #88d488
}

/* ----------------------
    SLIM SCROLL BAR
------------------------- */
#page_loading {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4;
    filter: alpha(opacity=40);
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

#loading_spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin: 0 auto;
    -webkit-animation: rotation .6s infinite linear;
    -moz-animation: rotation .6s infinite linear;
    -o-animation: rotation .6s infinite linear;
    animation: rotation .6s infinite linear;
    border-left: 6px solid rgba(0, 174, 239, .15);
    border-right: 6px solid rgba(0, 174, 239, .15);
    border-bottom: 6px solid rgba(0, 174, 239, .15);
    border-top: 6px solid rgba(0, 174, 239, .8);
    border-radius: 100%
}