/*
--- CLOCKIT
--- Form elements stylesheet
--- By James Barnsley, November 2014
*/

/* ============================================================================ GENERIC FORMS ============== */
/* ========================================================================================================= */

input,
button,
textarea,
.faux-input,
.button {
    font-family: "robotobold";
    font-size: 14px;
    background: #eeeeee;
    padding: 10px 18px;
}

ul.optionset label {
    font-family: "robotoregular";
    font-size: 14px;
    padding: 10px 18px;
}

.fieldgroup-field,
.field,
.CompositeField,
.file-upload-field {
    clear: both;
    margin: 10px 0;
}
/*
.fieldholder-small .field {
	margin: 0;
	clear: none;
}
*/
.optionset {
    overflow: hidden;
}
.field .readonly {
    display: inline-block;
    font-family: "robotobold";
    font-size: 14px;
    padding: 10px 18px;
}

.field.no-left-padding .readonly {
    padding-left: 0;
}

label {
    display: block;
    float: left;
    width: 30%;
    padding: 10px 2% 10px 0;
    text-align: right;
}
label.right {
    width: 66%; padding: 5px 2% 10px 0;
    float: right;
    text-align: left; color: #696969;
}
form .field .description {
    margin-top: -8px; padding-top: 0;
}
.typography p.help-message.field-note {
    margin: 0 0 20px 32%;
}
.btn-toolbar {
    padding-left: 32%;
}
.action-add {
    margin: 15px 0;
}

/* =============== TEXT AREAS ==== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="phone"],
textarea {
    width: 64%;
    padding-left: 2%;
    padding-right: 2%;
}

.no-label input[type="text"],
.no-label input[type="password"],
.no-label input[type="email"],
.no-label input[type="phone"],
.no-label textarea {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}

.small input[type="text"],
.small input[type="password"],
.small input[type="email"],
.small input[type="phone"],
.small textarea {
    width: 30%;
    min-width: 100px;
}

.tiny input[type="text"],
.tiny input[type="password"],
.tiny input[type="email"],
.tiny input[type="phone"],
.tiny textarea {
    width: 10%;
    min-width: 65px;
}

textarea {
    resize: vertical;
}

/* =============== DROPDOWNS ==== */

select {
    font-family: "robotobold";
    font-size: 14px;
    background: #eeeeee;
    padding: 10px 18px;
}

@-moz-document url-prefix() {
    select {
        padding: 0 18px;
    }
}

select > option {
    padding: 10px 18px;
    font-family: "robotoregular", sans-serif;
    font-size: 14px;
}

/* =============== BUTTONS ==== */

.ss-uploadfield-fromcomputer-fileinput,
input[type="submit"],
button,
.button {
    font-family: "robotobold";
    color: #ffffff;
    background: #ff8400;
    cursor: hand;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    padding: 12px 20px;
    -webkit-appearance: none;
}

.job-form .btn-toolbar button {
    margin-bottom: 12px;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
    color: #ffffff;
    background: #eb7a00;
}

.button.medium {
    padding: 8px 14px;
}

.button.small {
    font-weight: inherit;
    font-size: inherit;
    padding: 5px 12px;
}

.button.grey,
button.grey {
    background: #dddddd;
    color: #888888;
}

.button.grey:hover,
button.grey:hover {
    background: #d7d7d7;
}

.button.dark-grey,
button.dark-grey {
    background: #333333;
    color: #ffffff;
}

.button.dark-grey:hover,
button.dark-grey:hover {
    background: #444444;
}

.button.black,
button.black {
    background: #000000;
    margin-bottom: 3px;
}

.button.black:hover,
button.black:hover {
    background: #333333;
}

.button.blue,
button.blue {
    background: #069edb;
}

.button.blue:hover,
button.blue:hover {
    background: #0490c8;
}

.button.green,
button.green {
    background: #3ed22f;
}

.button.green:hover,
button.green:hover {
    background: #34c325;
}

.button.red,
button.red {
    background: #e73030;
}

.button.red:hover,
button.red:hover {
    background: #d82424;
}

/* disabled */
button.disabled,
button.disabled:hover,
.button.disabled,
.button.disabled:hover {
    opacity: 0.5;
    cursor: default;
    background: #aaaaaa;
}
.checkbox.disabled {
    opacity: 0.5;
}

/* working (in progress, ajax saving, etc) */
button.working .text,
.button.working .text,
button:not(.working) .working-text,
.button:not(.working) .working-text,
button.working .text,
.button.working .text {
    display: none;
}

button.working .working-text,
.button.working .working-text {
    display: inline-block;
}

/* understated (transparent bg, coloured text instead) */

button.understated,
.button.understated {
    background: transparent !important;
    color: #000000;
}

button.understated.red,
.button.understated.red {
    color: #e73030;
}

button.understated.green,
.button.understated.green {
    color: #3ed22f;
}

button.understated.grey,
.button.understated.grey {
    color: #888888;
}

button.understated.grey:hover,
.button.understated.green:hover {
    color: #444444;
}

/* inactive */
button.inactive:hover,
.button.inactive:hover {
    cursor: default;
}

/* =============== BUTTON CONFIRMATION ==== */

.button.confirmation.confirming .text,
.button.confirmation:not(.confirming) .confirmation-text {
    display: none;
}

/* =============== CHECKBOXES ==== */

.field.checkbox.inline-label {
    padding-left: 32%;
}

.field.checkbox.inline-label label {
    display: inline;
    float: none;
    width: auto;
    text-align: left;
}

/* =============== NICE CHECKBOXES ( $field->addExtraClass('nice') )==== */

.field.checkboxset.nice input[type="checkbox"],
.field.checkbox.nice input[type="checkbox"] {
    display: none !important;
}

.field.checkboxset.nice label,
.field.checkbox.nice label {
    cursor: hand;
    cursor: pointer;
}

.field.checkboxset.nice input[type="checkbox"] + label:before,
.field.checkbox.nice input[type="checkbox"] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    font-size: 19px;
    vertical-align: top;
    padding-right: 5px;
}

.field.checkboxset.nice input[type="checkbox"] + label:before,
.field.checkbox.nice input[type="checkbox"] + label:before {
    content: "\f096";
}

.field.checkboxset.nice input[type="checkbox"] + label:before,
.field.checkbox.nice input[type="checkbox"] + label:before {
    letter-spacing: 7.6px;
}

.field.checkboxset.nice input[type="checkbox"]:checked + label:before,
.field.checkbox.nice input[type="checkbox"]:checked + label:before {
    content: "\f046";
}

.field.checkboxset.nice input[type="checkbox"]:checked + label:before,
.field.checkbox.nice input[type="checkbox"]:checked + label:before {
    letter-spacing: 5px;
}

.field.checkboxset.nice label span,
.field.checkbox.nice label span {
    display: inline-block;
    width: 70%;
    line-height: 1.4;
}

/* =============== NICE RADIO BUTTONS ( $field->addExtraClass('nice') )==== */

.field.optionset.nice input[type="radio"] {
    display: none !important;
}

.field.optionset.nice label {
    cursor: hand;
    cursor: pointer;
}

.field.optionset.nice input[type="radio"] + label:before {
    font-family: FontAwesome;
    display: inline-block;
    font-size: 19px;
    vertical-align: top;
    padding-right: 5px;
    letter-spacing: 5px;
    line-height: 0.9;
}

.field.optionset.nice input[type="radio"] + label:before {
    content: "\f10c";
}

.field.optionset.nice input[type="radio"]:checked + label:before {
    content: "\f192";
}

/* =============== RADIO BUTTONS (BUTTON-IFIED) ==== */

.field.optionset.buttonify .middleColumn,
.field.optionset.buttonify li {
    padding: 0;
}

.field.optionset.buttonify input {
    display: none;
}

.field.optionset.buttonify input + label {
    background: #eeeeee;
    cursor: pointer;
    display: block; float: left;
    margin: 0 5px 5px 0;
    padding: 10px 15px;
}

.field.optionset.buttonify input + label:hover {
    background: #dddddd;
}

.field.optionset.buttonify input:checked + label {
    background: #000000;
    color: #ffffff;
}

/* =============== RADIO BUTTONS (BUTTON-IFIED + COLOUR SELECTOR) ==== */

/* hide on load to prevent ugly loading, jquery will reveal */
.field.optionset.buttonify.colour-selector {
    display: none;
}

.field.optionset.buttonify.colour-selector > label {
    padding-top: 4px;
    padding-bottom: 4px;
}

.field.optionset.buttonify.colour-selector li label {
    padding: 10px;
    border: 3px solid transparent;
}

.field.optionset.buttonify.colour-selector input:checked + label {
    border-color: #000000;
}

/* =============== RADIO BUTTONS ==== */

.field.optionset .middleColumn {
    padding-top: 5px;
}

.field.optionset.nolabel,
.field.optionset.form-group--no-label {
    padding-left: 32%;
}

.field.optionset li {
    list-style-type: none;
    display: inline-block;
    padding: 5px;
}

.field.optionset li label {
    float: none;
    display: inline-block;
    width: auto;
    padding: 0;
}

/* =============== MULTI-DROPDOWN GROUPS (ie Short Notice expiry, Credit Card expiry) ==== */

.CompositeField.multi-dropdown > label {
    padding-top: 21px;
}

.CompositeField.multi-dropdown > .field {
    display: inline-block;
    clear: none;
}

/* ================ FAUX DROPDOWNS ====== */

.faux-dropdown {
    position: relative;
}

.faux-dropdown.expanded .faux-dropdown-options {
    display: block;
}

.faux-dropdown.expanded .faux-dropdown-label {
    background: #000000;
    color: #ffffff !important;
}

.faux-dropdown-options {
    position: absolute;
    display: none;
    left: 0px;
    background: #000000;
    color: #ffffff;
    border-radius: 0 0 5px 5px;
    z-index: 9;
    padding-top: 12px;
    min-width: 200px;
    width: 100%;
}

.faux-dropdown-options > .faux-dropdown-option-item {
    display: block;
    padding: 6px 14px;
    font-size: 14px;
}

.faux-dropdown-options > .faux-dropdown-option-item:hover {
    cursor: hand;
    cursor: pointer;
    background: #222222;
}

.faux-dropdown-options > .faux-dropdown-option-item .colour-box > .fa {
    font-size: 12px; color: #000;
    position: absolute;
    top: 2px;
    left: 2px;
}

.faux-dropdown-options
    > .faux-dropdown-option-item:not(.checked)
    .colour-box
    > .fa {
    display: none;
}

.faux-dropdown-actions {
    padding: 6px 10px 10px;
}

/* ================ STANDARD BUTTONS ====== */

.field button.blue {
    background: #069edb;
}

/* ================ UPLOAD FIELD OVERWRITES ====== */
.file-upload-field {
    padding-left: 32%;
}
.file-upload-field input.file {
    display: inline-block;
    padding: 0;
    background: none;
}
.file-upload-field.branding img {
    width: 150px; height: auto;
}

.ss-uploadfield .ss-ui-button,
.ss-uploadfield button {
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 0px;
    margin: 6px 6px 0px 0 !important;
}

.ss-uploadfield .ss-uploadfield-item {
    padding: 0 !important;
    border-top: none !important;
}

.ss-uploadfield
    .ss-uploadfield-item
    .ss-uploadfield-item-info
    .ss-uploadfield-item-name {
    width: auto !important;
    line-height: 14px !important;
}

.ss-uploadfield .ss-uploadfield-item .ss-uploadfield-item-preview {
    text-align: left !important;
}

.field.upload {
    overflow: hidden;
}

.ss-uploadfield
    .ss-uploadfield-item
    .ss-uploadfield-item-info
    .ss-uploadfield-item-name
    .name {
    padding-right: 5px !important;
}

.ss-uploadfield
    .ss-uploadfield-item
    .ss-uploadfield-item-info
    .ss-uploadfield-item-name
    .size {
    padding: 0 !important;
}

/* ================ UPLOAD FIELD SIMPLIFIED ====== */
.entwine-uploadfield.simplify {
    background: none;
}
.entwine-uploadfield.simplify .middleColumn {
    width: 68%;
    clear: none;
    border: 0;
    padding: 0;
    float: right;
    min-width: 0;
}
.entwine-uploadfield.simplify:after {
    clear: both;
    content: "";
    display: block;
}

.entwine-uploadfield.simplify .ss-uploadfield-addfile .ss-uploadfield-item-name {
    display: none !important;
}

.entwine-uploadfield.simplify .ss-uploadfield-item-preview.ss-uploadfield-dropzone {
    text-align: center !important;
}

.entwine-uploadfield.simplify .ss-uploadfield-fromcomputer:before {
    font-family: FontAwesome;
    display: inline-block;
    vertical-align: top;
    padding-top: 2px;
    padding-right: 4px;
    letter-spacing: 5px;
    content: "\f07b";
}

.entwine-uploadfield.simplify .ss-uploadfield-fromcomputer {
    color: #ffffff;
    background: #000000;
    padding: 8px 12px;
    text-align: center;
    width: auto;
    display: inline-block;
    float: none;
    font-size: inherit;
}

.entwine-uploadfield.simplify .ss-uploadfield-fromcomputer:hover {
    background: #333333;
}

/* ================ FORM VALIDATION MESSAGES ====== */

form .field .message {
    display: block;
    padding: 5px 5px 5px 32%;
    color: #666666;
}

form .field .message.bad,
form .field .message.validation,
form .message.bad {
    color: #e73030;
}

form .field .message.good {
    color: #3ed22f;
}

/* =================== DATEPICKER (jquery-ui) ============ */

.ui-datepicker {
    font-family: "robotoregular" !important;
    font-size: 12px;
}

.ui-datepicker .ui-widget-header {
    background: none;
    border: 0;
}

/* =================== FORM ELEMENT OVERRIDES ============ */

#Details_Appliances_Container {
    position: relative;
}

#Details_Whiteware {
}

#Details_Appliances {
    position: absolute;
    top: 0;
    left: 51%;
    margin: 0;
    padding: 0;
}
.label-pad-left label {
    padding-left: 5px;
}

/* ================================================================================ FANCY FIELDS =========== */
/* ========================================================================================================= */

/* ================ JS DROPDOWN ====== */

.js-dropdown {
    position: relative;
}

.js-dropdown .dropdown-options {
    position: absolute;
    top: 20px;
    left: 0;
    background: #000000;
    border-radius: 3px;
    padding: 10px;
    width: 200px;
}

.js-dropdown .dropdown-item {
    display: block;
    padding: 4px 0;
    color: #cccccc;
    text-decoration: none;
}

.js-dropdown .dropdown-item:hover {
    color: #ffffff;
}

/* ================================================================================ UNIQUE FORMS =========== */
/* ========================================================================================================= */

.form-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.settings-form .btn-toolbar {
    padding-top: 20px;
}

/*
 * Login form
 * Does what it says on the box
 */

.section.security .branding {
    padding-bottom: 20px;
    text-align: center;
}

.section.security .branding img {
    width: 100%;
    max-width: 222px;
    height: auto;
}

.plain-page .section.security {
    max-width: 440px;
    margin: 50px auto;
    background: none;
    box-sizing: border-box;
    box-sizing: border-box;
}
.plain-page.Security .section.main.login-form.logout {
    text-align: center;
}

.plain-page .section.layer,
.plain-page .section.retailer {
    max-width: 540px;
}

.section.security > .inner {
    padding: 40px;
    background: #ffffff;
    border-radius: 5px;
}

.login-form .field.text label {
    font-size: 15px;
    line-height: 22px;
    color: #444;
    float: none !important;
    display: block;
    margin-bottom: 4px;
    width: auto;
    text-align: left;
    padding: 0;
}

.login-form .field {
    margin-bottom: 20px;
}

.login-form .field.text input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.login-form #CustomLoginForm_LoginForm_Remember_Holder label {
    float: none;
    width: auto;
    display: inline;
    text-align: left;
}

html.Security .forgot-password {
    color: #ffffff;
    display: block;
    float: right;
    margin-top: 10px;
}

.login-form .btn-toolbar {
    padding-left: 0;
    padding-top: 25px;
}

.login-form .message {
    padding: 10px 20px;
    margin: 10px -20px;
    background: #fff4b4;
}

.login-form .message.bad {
    background: #e73030;
    color: #ffffff;
}

.section.security h2 {
    font-family: "robotobold";
}

.section.security .section-title-underline {
    width: 110px;
    height: 1px;
    margin: 7px auto 10px auto;
    background: #009dda;
}

.section.security .intro {
    margin: 0 auto 20px auto;
    font-size: 18px;
    line-height: 24px;
    color: #444;
    padding: 0;
    max-width: 90%;
}
.powered-by {
    padding-top: 20px;
    text-align: right;
    color: #000;
}
.powered-by img {
    display: inline-block;
}

/*
 * Registration form
 * Provides public access to create accounts
 */

.Registration .btn-toolbar {
    padding-left: 32%;
    padding-top: 30px;
}

/*
 * Edit profile form
 * Form to edit, and manage profile
 */

.edit-profile-form .btn-toolbar {
    padding-top: 20px;
}


/* Manage Branches */
.manage-branches-form fieldset { 
    width: 60%;
    float: left;
}
.manage-branches-form .field.checkbox.inline-label { 
    padding-left: 0;
}
.manage-branches-form .btn-toolbar { 
    width: 40%; padding: 0;
    float: right;
    text-align: right;
}


/*
 * Add relationships form/page
 * Provides search facility
 */
.member-item-list .member-item {
    padding: 8px 0;
}
.member-item-list .member-item .profile-picture {
    display: block;
    float: left;
}
.member-item-list .member-item .details {
    float: left;
    padding: 24px 5px 0 25px;
}
.member-item-list .member-item .member-status {
    padding-right: 10px;
    color: #cccccc;
}
.relationshipmanager .member-item-list .member-item .details {
    padding-top: 20px;
}
.relationshipmanager .member-item-list .member-item .details .name {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 3px solid #000000;
    margin-bottom: 8px;
}
.member-item-list .member-item .details .email {
    text-decoration: none;
    color: inherit;
}
.member-item-list .member-item .actions {
    float: right;
    padding-top: 30px;
}
.no-results {
    padding: 15px;
    font-size: 1.4em;
    font-family: "robotobold";
    color: #cccccc;
    text-align: center;
}
.no-results.small {
    font-size: 1.2em;
}
.no-results div {
    margin: 10px 0;
}

/*
 * Add job form
 * Gateway to creating new jobs within the system
 */

.job-form {
    max-width: 600px;
    margin: 0 auto;
}

.job-form .btn-toolbar,
.job-form .Actions {
    padding-left: 32%;
}

.job-form .ajax-data-container {
    width: 68%;
    float: left;
}

.job-form #Date {
    position: relative;
}

.job-form #Date input {
    text-align: center;
}

.job-form #Date .date-selecter-controls {
    width: 64%;
    padding-left: 2%;
    padding-right: 2%;
    float: right;
    position: relative;
}

.job-form #Date .date-selecter-controls .icon {
    position: absolute;
    cursor: hand;
    cursor: pointer;
    border: 11.5px solid #eeeeee;
    background-color: #eeeeee;
    bottom: 0;
}

.job-form #Date .date-selecter-controls .icon.back {
    left: 32%;
    width: 15px;
    height: 15px;
    margin-bottom: 0;
    left: 0;
}

.job-form #Date .date-selecter-controls .icon.next {
    right: 0;
    width: 15px;
    height: 15px;
    margin-bottom: 0;
}

.job-form .field.place-hold-button-wrapper {
    padding-top: 15px;
}

.job-form h5 {
    clear: both;
    padding-top: 20px;
}

.job-form .field.availablelayers .middleColumn {
    padding-left: 32%;
}

.colour-box {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin: 0 5px -3px -3px;
    position: relative;
}

.job-form .meterage-field .field {
    display: inline-block;
    clear: none;
    margin: 0;
}

.job-form .meterage-field #Form_EditForm_Details_Meterage_Holder {
    width: 10%;
}

.job-form .meterage-field .field input {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
}

.job-form .meterage-field .field select {
    width: 60px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Upload field tweaks */
form ul.ss-uploadfield-files.files li {
    margin-bottom: 12px;
    padding-bottom: 12px !important;
    clear: both;
    list-style-type: none;
}
form .ss-uploadfield-item-name {
    height: auto !important;
}
form .ss-uploadfield-item-info:after {
    content: "";
    display: block;
    clear: both;
}
form
    .ss-uploadfield
    .ss-uploadfield-item
    .ss-uploadfield-item-info
    .ss-uploadfield-item-name
    .name,
form
    .ss-uploadfield
    .ss-uploadfield-item
    .ss-uploadfield-item-info
    .ss-uploadfield-item-name
    .size {
    margin-bottom: 4px;
    padding-top: 0;
    display: block;
    float: left;
    clear: left;
    overflow: visible;
    white-space: normal;
}
form .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-actions {
    min-height: 0 !important;
    margin: 0 !important;
    clear: left;
    float: left;
    display: block;
}
form .ss-uploadfield .ss-ui-button {
    margin: 0 !important;
}

#CustomerMessageEmail,
#CustomerMessageText {
    margin: 0;
    padding: 5px;
    display: inline-block;
    clear: none;
    white-space: nowrap;
}
#CustomerMessageEmail {
    padding-left: 32%;
}
/* Hide fields for flow */
#Form_AddJobForm #Form_AddJobForm_AvailableLayers_Holder,
#Form_AddJobForm #JobSlotsSelected,
#Form_AddJobForm .btn-toolbar {
    display: none;
}
/* Hazard Register/Customer/Measure search results */
#Form_EditForm .member-item-list .member-item .details,
#Form_EditForm .member-item-list .member-item .actions,
#Form_LoadMeasureJob .member-item-list .member-item .details,
#Form_LoadMeasureJob .member-item-list .member-item .actions {
    padding-top: 0;
}
#Form_EditForm .member-item-list .member-item .actions,
#Form_LoadMeasureJob .member-item-list .member-item .actions {
    padding-right: 25px;
}
#Form_EditForm .search-results .member-item h4.name,
#Form_LoadMeasureJob .search-results .member-item h4.name {
    line-height: 33px;
    padding: 0;
}
#Form_EditForm .member-item-list .member-item:hover,
#Form_LoadMeasureJob .member-item-list .member-item:hover {
    background: #f5f5f5;
}
/* Measure */
.job-form #Form_LoadMeasureJob .btn-toolbar {
    padding-left: 30%;
}
/* Customer */
.customer-wrapper .btn-toolbar {
    margin-top: 20px;
}
.customer-wrapper .Actions,
.customer-wrapper .selected-customer,
.customer-wrapper.existing .customer-search-results,
/*.customer-wrapper.existing #Form_EditForm_CustomerSearchTerm_Holder,*/
.customer-wrapper.existing #Form_EditForm_Name_Holder,
.customer-wrapper.existing  #Form_AddMeasureJobForm_Name_Holder,
/*.customer-wrapper.existing #Form_AddHazardRegisterForm_Name_Holder,*/

/*.customer-wrapper.existing #Form_AddMeasureJobForm_CustomerSearchTerm_Holder,
.customer-wrapper.existing #Form_AddHazardRegisterForm_CustomerSearchTerm_Holder,*/
.customer-wrapper.new .customer-search-results,
.customer-wrapper .customer-fields,
/*.customer-wrapper .customer-fields:not(.old-format),*/
/*#Form_AddHazardRegisterForm .customer-wrapper.existing.from-measure .remove-customer,*/
.new-register-form #Form_EditForm .customer-wrapper.existing .customer-fields/*,
.job-form.edit-job #Form_EditForm .customer-wrapper.existing .customer-fields
.new-register-form #Form_EditForm .customer-wrapper.existing .remove-customer,
.customer-fields.old-format #Form_EditForm_CustomerSearchTerm_Holder*/ {
    display: none;
}
.customer-wrapper.existing .remove-customer,
.customer-wrapper.existing .selected-customer,
.customer-wrapper.new .customer-fields,
.customer-wrapper.new .load-customer {
    display: block;
}
.selected-customer .middleColumn {
    width: 68%;
    float: right;
}

/*
 * Edit my staff
 * Company administrators to edit their staff profiles and permissions
 */

.edit-my-staff .user-picture {
    float: left;
    width: 150px;
}

.edit-my-staff .user-details {
    padding-left: 180px;
}

.edit-my-staff .btn-toolbar {
    padding-left: 32%;
}

.edit-my-staff .composite > .field.checkbox,
.preferences .composite > .field.checkbox {
    display: block;
    /*width: 15%;*/
    width: 22%;
    float: left;
    clear: none;
}

.edit-my-staff .composite > .field.checkbox label,
.edit-my-staff .composite > .field.checkbox input,
.preferences .composite > .field.checkbox label,
.preferences .composite > .field.checkbox input {
    display: inline-block;
    width: 100%;
    float: none;
    padding: 0;
    text-align: left;
}

.edit-my-staff .reset-password,
.edit-my-staff .reset-password-controls.reveal .reset-password-cancel,
.edit-my-staff .reset-password-controls.cancel .reset-password-reveal {
    display: none;
}

.edit-my-staff .reset-password-controls {
    padding-top: 10px;
}

.edit-my-staff .reset-password-reveal {
    margin-left: 32%;
}

.edit-my-staff .CompositeField.reset-password {
    margin-top: 0;
}

.delete-user-confirmation p {
    padding-bottom: 20px;
}

/*
 * Feedback and Report a Bug form
 * A feeback form for users to send feedback and bug reports on the app
 */

.feedback-form {
    max-width: 600px;
    margin: 0 auto;
}

label.error {
    float: none;
    width: 68%;
    padding: 0;
    text-align: left;
    margin-top: 3px;
    margin-left: 32%;
    color: red;
}

/*
 * Layer Profile form
 *
 */

/* .MyProfile .details {
 	display: none;
 }*/

.form--topspace {
    margin-top: 10px;
}

.form--leftalign label.right {
    float: left;
}

.form--leftalign .btn-toolbar {
    padding-left: unset;
    text-align: right;
}