@import url('fonts.css');

#index {
    min-width: 1024px;
    background-color: #1a252f; /* canvas background color */
    font-family: "Open Sans";
}

#index header {
    position: relative;
    height: 60px;
    color: white;
    padding: 28px 28px 0 28px;
    z-index: 1;
}

#index .header-title {
    vertical-align: middle;
    position: relative;
    top: 0;
    margin-left: 6px;
    font-family: "Exo 2";
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: #e0e2e4; /*silver*/
    transition: all 0.2s ease-in-out;
}

#index .header-title:hover {
    color: white;
}

#index .header-brand {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    padding: 0;
    text-decoration: none;
}

#index .header-logo {
    position: relative;
    top: -2px;
    height: 32px;
    width: 32px;
    display: inline-block;
    vertical-align: middle;
    background: url("data:image/png;base64,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 ") no-repeat center center;
    background-size: 28px 28px;
}

#index .header-sign-in {
    display: inline-block;
    float: right;
    padding-top: 1px;
}

#index .header-sign-in .sign-in-form {
    display: inline-block;
}

#index .header-sign-in .form-group {
    display: inline-block;
    margin-left: 6px;
    vertical-align: top;
}

#index .header-sign-in input {
    width: 150px;
    height: 30px;
    color: #e0e2e4;
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.13);
    border: solid 1px rgba(224, 226, 228, 0.4);
}

#index .header-sign-in label.error {
    width: 150px;
}

#index .header-sign-in .btn-login {
    display: inline-block;
    width: 125px;
    height: 30px;
    margin-left: 26px;
}

#index .header-sign-in .btn-sso-container {
    display: inline-block;
    vertical-align: top;
}

#index .header-sign-in .text-or {
    margin: 0 30px;
    font-family: "Open Sans";
    font-size: 12px;
    font-weight: bold;
    color: #e0e2e4;
    opacity: 0.8;
    text-transform: uppercase;
    cursor: default;
}

#index .header-sign-in .btn-sso {
    width: auto;
    height: 30px;
    padding: 6px 32px;
    border-radius: 20px;
    border: none;
    background-color: #ee3f21;
    color: #ffffff;
    text-transform: uppercase;
    transition: all 0.15s ease-in-out;
}

#index .header-sign-in .btn-sso:hover {
    background-color: #d53519;
}

#index .header-sign-in .btn-sso:active, #index .header-sign-in .btn-sso:focus {
    background-color: #bb2910;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}


#index .content {
    position: relative;
    padding-top: 35px;
    z-index: 1;
    pointer-events: none;
}

#index .content-container {
    position: absolute;
    right: 182px;
    padding-bottom: 28px;
}

#index .content-description .btn-learn-more {
    padding: 10px 22px;
    border-radius: 100px;
}

#index .content-description {
    display: inline-block;
    margin-right: 60px;
    padding-top: 100px;
    vertical-align: top;
    text-align: right;
}

#index .content-centered {
    display: block;
    margin: 0 auto;
    text-align: center;
}

#index .text-centered-upper {
    text-transform: uppercase;
    text-align: center!important;
}

#index .content-form {
    display: inline-block;
    vertical-align: top;
    pointer-events: all;
    cursor: default;
}

#index .content-description-title {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 3.5px;
    color: #b5bcc4;
    opacity: 0.9;
    text-transform: uppercase;
}

#index .content-description-text {
    font-family: "Exo 2";
    font-size: 40px;
    font-weight: 600;
    color: white;
    text-align: right;
    line-height: 1.23;
    letter-spacing: 0.3px;
}

#index .content-description-text p {
    width: 360px;
    padding: 10px 0;
    padding-bottom: 20px;
    display: inline-block;
}

#index .text-centered-upper p {
    width: 420px!important;
}

#index .sign-up-form-container {
    width: 375px;
    padding: 20px 28px;
    padding-bottom: 30px;
    background-color: #222e3d;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.27);
    border-radius: 3px;
}

#index .sign-up-header {
    text-align: center;
    font-weight: 600;
    color: #e0e2e4;
}

#index .sign-up-title {
    font-size: 22px;
}

#index .sign-up-description {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#index #sign-up label {
    font-size: 12px;
    font-weight: 600;
    color: #e0e2e4;
}


#index #sign-up .form-control {
    height: 40px;
    color: #e0e2e4;
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.13);
    border: solid 1px rgba(224, 226, 228, 0.4);
    border-radius: 6px;
    text-align: left;
}

#index #sign-up .form-group-username {
    margin-top: 34px;
}
#index #sign-up .sign-up-terms {
	width: 200px;
	margin: 0 auto;
    padding-bottom: 15px;
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
    color: #e0e2e4;
}

#index #sign-up .sign-up-terms a {
    color: #e0e2e4;
    text-decoration: underline;
    transition: all 0.15s ease-in-out;
}

#index #sign-up .sign-up-terms a:hover {
    color: white;
}

#index #sign-up .btn {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    color: #ffffff;
    background-color: #ee3f21;
}

#index #sign-up .btn:hover {
    background-color: #d53519;
}

#index #sign-up .btn:focus, #index #sign-up .btn:active {
    background-color: #bb2910;
}

#index input:hover {
    border-color: #fff !important;
}

#index input:focus {
    border-color: #4990e2 !important;
    color: #fff !important;
}

#index input.error {
    border-color: #e23728 !important;
}

#index .form-group label.error {
    margin-top: 4px;
    margin-bottom: 0;
    color: #e23728 !important;
    font-size: 12px;
    font-weight: 600;
}

#index .btn {
    padding: 6px 22px;
    border: solid 1px #e0e2e4;
    border-radius: 15px;
    background-color: transparent;
    color: #e0e2e4;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    pointer-events: all;
}

#index .btn:hover {
    color: white;
    border-color: #d5d8db;
    background-color: #d5d8db;
}

#index .btn:focus, #index .btn:active {
    border-color: #b8bcbf;
    background-color: #b8bcbf;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#particle-canvas {
    position: fixed !important;
    /*opacity: 0.999;*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

.password-meter-wrapper {
	display: none;
    position: relative;
    top: 6px;
}

.password-meter-message {
	display: none;
    padding-bottom: 8px;
    font-size: 12px;
    opacity: 0.7;
    color: #e0e2e4;
}

.password-meter-progress .progress-bar {
	width: 0;
}

.password-meter-progress {
    height: 6px;
    margin-top: -6px;
    margin-bottom: 0;
    border-radius: 6px 6px 0 0;
}

#userInfoForm label.error {
    margin-top: 5px;
    margin-bottom: 0;
    color: #e20000;
    font-weight: normal;
}

#userInfoForm input.form-control.error {
    border-color: #e20000;
}

#userInfoForm input.form-control.error:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #db5957; /* iOS <4.3 & Android <4.1 */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #db5957;
}