body {
    margin: 0px;
    background-color: #1e2127;
    overflow-x: hidden;
    background-color: white;
}

#back-label {
    font-family: Arial;
    margin-left: 50%;
    transform: translateX(-167px) translateY(-45px);
    cursor: pointer;
    display: none;
}

#logo-container {
    height: 88px;
    width: 100px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 100px;
    margin-bottom: -97px;
    background-image: url(../img/logo.png);
    background-size: contain;
}

#login-screen {
    background-image: url(../img/gradient.png);
    background-size: cover;
    width: 100%;
    height: 100%;
}

#registerName {
    display: none;
    position: relative;
    margin-top: 42px;
    margin-left: 14%;
}

#login-panel {
    background-color: white;
    width: 406px;
    height: 100%;
    position: absolute;
    right: 0px;
}

#login-label {
    font-family: Verdana;
    font-size: 20px;
    margin-top: 37%;
    margin-left: 14%;
}

#Field_Email {
    position: relative;
    margin-top: 42px;
    margin-left: 14%;
}
#Field_Password {
    position: relative;
    margin-top: 42px;
    margin-left: 14%;
}

#lostPasswordLabel {
     display: inline-block;
     position: absolute;
     font-size: 14px;
     font-family: Verdana;
     color: #029be5;
    cursor: pointer;
    margin-top: 14px;
    margin-left: 137px;
    width: 109px;
}

#lostPasswordLabel:hover {
    text-decoration: underline;
}

#loginButton {
    width: 300px;
    height: 40px;
    background-color: #cacaca;
    border-radius: 3px;
    margin-left: 14%;
    margin-top: -32px;
    font-family: Verdana;
    color: #989898;
    font-size: 14px;
    cursor: pointer;
}

button:hover:enabled {
    background-color: #48b4e5 !important;
}

.or-seperator {
    width: 37px;
    height: 2px;
    background-color: #d8d8d8;
    display: inline-block;
    margin-top: 42px;
    transform: translateY(-4px);
    position: relative;
    left: -55px;
}

#or-label {
    display: inline-block;
    margin-left: 9px;
    font-family: Verdana;
    color: #d8d8d8;
    position: relative;
    left: -59px;
}

#registerNewLabel {
    text-align: center;
    margin-top: 24px;
    font-family: Verdana;
    margin-left: 6px;
}

#create-account {
    color: #029be5;
    cursor: pointer;
}

#create-account:hover {
    text-decoration: underline;
}

.are-you-a {
    background-color: white;
    width: 250px;
    height: 280px;
    position: relative;
    font-family: Verdana;
    font-size: 30px;
    text-align: center;
    padding-top: 160px;
    padding-right: 22px;
    padding-left: 22px;
    max-width: 250px;
    display: inline-block;
    margin-right: 52px;
    box-shadow: 10px 10px 19px 0px;
    margin-bottom: 40px;
}

.register-button{
    width: 140px;
    height: 40px;
    background-color: #029be5;
    border-radius: 3px;
    margin-top: 20px;
    font-family: Verdana;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

.register-button:disabled{
    background-color: #cacaca;
    color: #989898;
}

#registration-questions {
    position: absolute;
    width: calc(100% - 406px);
    overflow-y: scroll;
    height: 100%;
}

#box-container {
    width: 100%;
    text-align: center;
    margin-top: 15%;
}

#welcome-message {
    font-family: Verdana;
    color: white;
    font-size: 3.7em;
    padding: 100px;
}

div[ani-group="drop"] {
    transform: translateY(-600%);
}

div[error-type="Field_ERROR"] {
    margin-left: 60px;
    margin-top: -22px;
    width: 292px;
    text-align: center;
    color: #910002;
}

div[error-type="Field_Success"] {
    margin-left: 60px;
    margin-top: -22px;
    width: 292px;
    text-align: center;
    color: #024f7b;
}

.httplink {
    color: #029be5;
    cursor: pointer;
}
.httplink:hover {
    text-decoration: underline;
}

#account_activated {
    background-color: white;
    width: 50%;
    height: 250px;
    position: relative;
    font-family: Verdana;
    font-size: 30px;
    text-align: center;
    padding-top: 37px;
    padding-right: 22px;
    padding-left: 22px;
    display: inline-block;
    margin-right: 52px;
    box-shadow: 10px 10px 19px 0px;
    margin-bottom: 40px;
    transform: translateY(-600%);
}


/*material design text boxes
/* form starting stylings ------------------------------- */
.group 			  {
    position:relative;
    margin-bottom:45px;
    font-family: "Verdana";
}
input 				{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label 				 {
    color:#999;
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color: #029be5;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background: #029be5;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background: #029be5; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background: #029be5; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background: #029be5; }
    to 	{ width:0; background:transparent; }
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    width: 300px;
    margin-left: 26px;
}

.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #d2d2d2;
    outline: 0;
    font-size: 18px;
    color: #212121;
    padding: 10px 7px;
    background: transparent;
    transition: border-color 0.2s;
}

.form__field::placeholder {
    color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
    font-size: 18px;
    cursor: text;
    top: 20px;
    color: #9b9b9b;
}

.form__label,
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 14px;
    color: #029be5;
}

.form__field:focus ~ .form__label {
    color: #029be5;
}

.form__field:focus {
    padding-bottom: 6px;
    border-bottom: 2px solid #029be5;
}
/*end material design css*/
/* start select stylings */
.materialselect {
    font-family: "Verdana";
    position: relative;
    margin-top: 20px;
    width: 307px;
}

.materialselect-text {
    position: relative;
    font-family: inherit;
    background-color: transparent;
    width: 300px;
    padding: 10px 10px 10px 6px;
    font-size: 18px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(0,0,0, 0.6);
}

/* Remove focus */
.materialselect-text:focus {
    outline: none;
    border-bottom: 1px solid rgba(0,0,0, 0);
}

/* Use custom arrow */
.materialselect .materialselect-text {
    appearance: none;
    -webkit-appearance:none
}

.materialselect:after {
    position: absolute;
    top: 18px;
    right: 10px;
    /* Styling the down arrow */
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}


/* LABEL ======================================= */
.materialselect-label {
    color: rgba(0,0,0, 0.48);
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 4px;
    top: 10px;
    transition: 0.2s ease all;
}

/* active state */
.materialselect-text:focus ~ .materialselect-label, .materialselect-text:valid ~ .materialselect-label {
    color: #029be5;
    top: -20px;
    transition: 0.2s ease all;
    font-size: 14px;
}

/* BOTTOM BARS ================================= */
.materialselect-bar {
    position: relative;
    display: block;
    width: 350px;
}

.materialselect-bar:before, .materialselect-bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #029be5;
    transition: 0.2s ease all;
}

.materialselect-bar:before {
    left: 36%;
}

.materialselect-bar:after {
    right: 50%;
}

/* active state */
.materialselect-text:focus ~ .materialselect-bar:before, .materialselect-text:focus ~ .materialselect-bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.materialselect-highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}
/* end material stylings */


@media only screen and (max-width: 1440px) {
    /*body{min-width:600px;}*/
    #box-container {
        zoom: 83%;
    }
}

@media only screen and (max-width: 600px) {
    /*body{min-width:600px;}*/
    #box-container {
        zoom: 68%;
    }

    #login-panel {
        width: 100%;
    }

    #login-label {
        margin-left: calc(50% + 6px);
        transform: translateX(-50%);
        width: 288px;
        margin-top: 158px;
    }

    .group {
        margin-left: 50% !important;
        transform: translateX(-150px);
    }

    #rememberMeSelector {
        width: 50% !important;
    }

    #loginButton {
        margin-left: 50%;
        transform: translateX(-50%);
        margin-right: -50%;
        position: absolute;
        margin-top: -46px;
    }
    .or-seperator {
        transform: unset;
        left: -60px;
    }
    #or-label {
        left: -63px;
        transform: translateY(5px);
    }
}