/* This sheet follows the BEM methodology (for naming, etc.): http://getbem.com/naming/ */

/* Containers */

.login__extremityContainer {
    background-color: #FFFFFF;
    border: 0;
}

.login__contentContainer,
.login__contentContainer--white {
    background-color: #FFFFFF;
    padding: 15px 24px 0px 24px;
}

.login__container--fullWidth {
    width: 100%;
}

.login__container--padding-10 {
    padding: 10px;
}

.login__container--padding-20 {
    padding: 20px;
}

.login__externalContainer {
    background-color: #009CDE;
    border: 0;
}

.login__container--contentCentered {
    padding: 25px 40px 25px 40px;
}

/* Fields */

.login__field.login__field--uppercase input,
.login__field.login__field__password input {
    background-color: #F2F2F2;
}

.login__field .x-form-field {
    font-family: robotoregular;
}

.login__field .x-form-item-body.x-fa:before {
    position: absolute;
    margin-top: 6px;
    margin-left: 10px;
    /*
	*Icons were missing in controls when Sencha updraded to a newer version.
	*Adding z-index to ensure Icons are visible.
	*/
    z-index: 1;
}

/*Allows uppercasing non-placeholder values.*/
.login__field--uppercase input:valid {
    text-transform: uppercase;
}

.login__field__label {
    font-weight: bold;
    white-space: nowrap;
}

.login__field__icon .xfa {
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
}

.login__field--withIcon input {
    /* padding-left: 30px; */
    padding-left: 35px !important;
}

/* TextAreas */

/* Meant to adjust the background of a container with the one of its text area
	We often need to put a text area in a container to handle it.*/

.login__textArea {
    background-color: #FFFFFF;
}

    .login__textArea textarea {
        font-family: robotoregular;
    }

/* Fieldsets */


.login__fieldset .x-fieldset-header-text {
    font-family: robotoregular;
}

/* Labels */

.login__version__label {
    font-family: robotobold;
    text-align: left;
    color: white;
    left: 20px !important;
    bottom: 0px;
    background-color: transparent;
    top: auto !important;
    right: auto;
}

.login__mobileConnect__label {
    font-family: robotoregular;
    text-align: left;
    word-wrap: break-word;
}

.login__title__label {
    font-family: robotobold;
    color: #646464;
    font-size: 12pt;
    text-transform: uppercase;
    padding: 20px 0px 0px 24px;
}

.login__noteLabel {
    font-family: robotoregular;
}

.login__noteLabel--centered {
    text-align: center;
}

.login__noteLabel--leftAligned {
    text-align: left;
}

/* Buttons */
.login__QRCode {
    right: 10px;
    bottom: 10px;
    top: initial;
    left: initial;
    background-color: transparent;
}

.login__external__links {
    right: 10px;
    bottom: 10px;
    top: initial !important;
    left: initial !important;
    background-color: transparent;
}

    .login__external__links .login__externalButton {
        margin: 0px 10px;
    }

/*Action Buttons*/

.login__actionButton {
    /*border: 0;*/
    height: 27px;
    text-transform: uppercase;
    margin: 3px; /* For shadow on :hover state */
    /*box-shadow: none;*/
    /*padding: 5px 5px 5px 5px;*/
}

    /*.login__actionButton.x-btn-disabled {
		background-color: #CCCCCC !important;
	}*/

    /*.login__actionButton.x-btn-disabled .x-btn-inner {
			color: #000000;
		}*/

    .login__actionButton .x-btn-inner {
        /* Style guide says 14pt (vs px), but it renders too big. */
        font: normal normal bold 14px/16px robotobold;
    }

/* Primary, E.g.: OK */

.login__actionButton--primary {
    background-color: #009CDE;
}

    .login__actionButton--primary .x-btn-inner {
        color: #FFFFFF;
    }

    .login__actionButton--primary:focus {
        background-color: #009CDE;
        color: #FFFFFF;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    }

    .login__actionButton--primary:hover {
        color: #FFFFFF;
        background-color: #009CDE;
        box-shadow: 0 0 3px rgba(0, 0, 0, 1) !important;
    }

    .login__actionButton--primary.x-btn.x-btn-pressed {
        color: #FFFFFF;
        background-color: #009CDE;
    }

/* Secondary, E.g.: Cancel */

.login__actionButton--secondary {
    /* background-color: #FFFFFF; */
    background-color: transparent;
}

    .login__actionButton--secondary .x-btn-inner {
        color: #009CDE;
    }

    .login__actionButton--secondary:focus {
        /* background-color: #FFFFFF; */
        /* color: #009CDE; */
        /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); */
        background-color: transparent;
        /* color: #009CDE; */
        color: #FFFFFF;
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        outline: 3px solid transparent;
    }

    .login__actionButton--secondary:hover {
        /* color: #009CDE; */
        /* background-color: #FFFFFF; */
        /* box-shadow: 0 0 3px rgba(0, 0, 0, 1) !important; */
        color: #009CDE;
        /* background-color: #FFFFFF; */
        background-color: transparent;
        box-shadow: 0 0 3px rgba(0, 0, 0, 1) !important;
        outline: 3px solid transparent;
    }

    /* .login__actionButton--secondary.x-btn.x-btn-pressed .x-btn-inner { */

    /* color: #ffffff; */
    /* //background-color: #009CDE; */

    /* box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); */
    /* } */
    .login__actionButton--secondary.x-btn.x-btn-pressed {
        background-color: #009CDE;
        box-shadow: none;
    }

        .login__actionButton--secondary.x-btn.x-btn-pressed .x-btn-inner {
            color: #FFFFFF;
        }

/*External Buttons*/

.login__externalButton {
    background-color: transparent;
    border: 0;
}

    .login__externalButton .x-btn-inner {
        color: #FFFFFF;
        font-family: robotobold;
    }

    /* Hover */
    .login__externalButton:hover {
        background-color: transparent;
        box-shadow: none;
    }

        .login__externalButton:hover .x-btn-inner {
            text-decoration: underline;
        }

    /* Active/Pressed */

    .login__externalButton.x-btn.x-btn-pressed {
        box-shadow: none;
    }

        .login__externalButton.x-btn.x-btn-pressed .x-btn-inner {
            color: #F2F2F2;
            text-shadow: 0px 0px 1px #000000;
        }

    /* Visited */
    .login__externalButton:visited {
        background-color: transparent;
    }

    /* Focus */
    .login__externalButton.x-btn.x-btn-focus {
        /* We leave the box-shadow for accessibility */
        background-color: transparent;
    }

/* Views */

/* Login Views Container View (views navigator)*/

.login__loginViewsContainerView {
	
	font-family: robotobold;
	background-image: url('images/background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	
}

/* Login View */

.login__loginView__title__label {
	color: #009CDE;
	display: block;
	text-align: center;
	font-family: robotobold;
	font-size: 36px;
	line-height: 75px;
	background-image: url(images/logo-color.png);
	background-size: 35%;
	background-repeat: no-repeat;
	background-position: center bottom;
	color: transparent;
}

/* Sign Up View*/

.login__signUpView__termsOfServicesContainer {
    margin: 0px 0px 10px 0px;
}

.login_signUpView__tableContainer > table {
    width: 100%
}

.login_signUpView__table__cell {
    width: 50%;
    padding: 0px 5px 0px 5px;
}

.login_signUpView__cell__field {
    width: 100%;
}

/* Forgot Password Ans View */

.login__forgotPasswordView__securityQuestionLabel {
    font-size: 12pt;
}

/* Site Role View */

.login__siteRoleView__topContainer {
    height: 100px;
}

.login__siteRoleView__title__label {
    text-align: center;
    font-family: robotobold;
    font-size: 20pt;
    line-height: 75px;
    white-space: nowrap;
    text-align: left;
    color: #646464;
}

.login__siteRoleView__userPicture {
    width: 75px;
    height: 75px;
    text-align: center;
    vertical-align: middle;
}