/* NOTE: it was planned to replaced by using classes for every form elements - but would require a lot changes in Python side */
/* Planned classes: .ui-input, .ui-checkbox, .ui-radio, .ui-textarea, .ui-select, .ui-button, .ui-file, etc */

/* This is a base of all form elements used in Portals and many pages of Website - could be much shorter and cleaner by using CSS preprocessor */
/* Using pixels hardcoded values as the result of not using 'Grid' */

/* TODO: temporary importants */
/* TODO: to much old classes for the same functionality */

/* BUTTONS like looking tags: link, buttons, inputs[reset, submit, button] */
input,
button,
textarea,
select,
.button-link,
.button-link:visited,
.button-input,
.button-input:visited {
    display: inline-block;
    margin: 3px;
    height: 23px;
    background: #fff;
    border-radius: 0px;
    border: 1px solid #AAAAAA;
     -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
    outline: none;
    color: #444444;
}

select,
.button-input,
.button-input:visited,
.button-link,
.button-link:visited {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
    background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
    background-image: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); 
    -moz-background-clip : padding;
    -webkit-background-clip: padding-box;
    background-clip : padding-box;

    /* Test of lighter bolding TODO: is !important still needed? */
    font-weight: 600 !important;
    padding: 0 10px;
    text-align: center;
    line-height: 23px;

    font-size:12px;
}

.button-input,
.button-input:visited,
.button-link,
.button-link:visited {
    height: auto;
    line-height: 20px;
    padding: 5px 15px;
}

select:hover,
.button-input:hover,
.button-link:hover{
    background: #f4f4f4; /* Old browsers */
    background: -moz-linear-gradient(top,  #f4f4f4 0%, #eeeeee 48%, #f6f6f6 50%, #ffffff 80%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(48%,#eeeeee), color-stop(50%,#f6f6f6), color-stop(80%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f4f4f4 0%,#eeeeee 48%,#f6f6f6 50%,#ffffff 80%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f4f4f4 0%,#eeeeee 48%,#f6f6f6 50%,#ffffff 80%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f4f4f4 0%,#eeeeee 48%,#f6f6f6 50%,#ffffff 80%); /* IE10+ */
    background: linear-gradient(to bottom,  #f4f4f4 0%,#eeeeee 48%,#f6f6f6 50%,#ffffff 80%); /* W3C */

    border: 1px solid #999;
    cursor: pointer;

    font-size:12px;
}

select:active,
.button-input:active,
.button-link:active{
    border: 1px solid #666;
    box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.5);
    outline: 0;
    cursor: pointer;
}

/* Action button with red color */
.button-action,
.button-action:hover,
.button-action:visited,
input[type="submit"].button-action,
input[type="reset"].button-action,
input[type="button"].button-action,
button.button-action {
    background: rgb(197,27,30); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1MWIxZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2IyMTcxOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhNzE0MTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(197,27,30,1) 0%, rgba(178,23,25,1) 45%, rgba(167,20,21,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(197,27,30,1)), color-stop(45%,rgba(178,23,25,1)), color-stop(100%,rgba(167,20,21,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(197,27,30,1) 0%,rgba(178,23,25,1) 45%,rgba(167,20,21,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(197,27,30,1) 0%,rgba(178,23,25,1) 45%,rgba(167,20,21,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(197,27,30,1) 0%,rgba(178,23,25,1) 45%,rgba(167,20,21,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(197,27,30,1) 0%,rgba(178,23,25,1) 45%,rgba(167,20,21,1) 100%); /* W3C */

    border: 1px solid #990000;
    box-shadow: 0 0 3px #DD0000 inset, 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #fefefe;
    font-size: 14px;
    padding: 5px 0;
    width: 200px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    margin: 10px 0;
}

.button-action:hover,
input[type="submit"].button-action:hover,
input[type="reset"].button-action:hover,
input[type="button"].button-action,
button.button-action:hover {
    color: #fff;
    box-shadow: 0 0 50px #d62c2f inset, 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* FIXME: hack for bottom spacing as inputs have problems with line-height */
input[type="submit"].button-action,
input[type="button"].button-action,
input[type="reset"].button-action,
button.button-action {
    padding-bottom: 23px !important;
    cursor:pointer;
}
/*---- END BUTTONS ----*/


/*---- OTHER FORM ELEMENTS ----*/
input[type="file"], input[type="checkbox"], input[type="radio"]{
    border: none;
    box-shadow: none;
    cursor: pointer;
}

input[type="checkbox"], input[type="radio"]{
    position: relative;
    top: 5px;
}

textarea{
    height: 80px;
    padding-top: 5px;
}

input[type="number"], input[type="email"], input[type="url"], input[type="text"], input[type="password"], textarea, select{
    padding-left: 5px;
    width: 379px;
    float: left; /* TODO: causes chrome invisible chosen options error? */
}

/* Fix for chosen on chrome */
.chosen-search input{
    float: none !important;
}

/* TODO: check if it safe in all paces */
.chosen-container{
    float: left;
    z-index: auto;
    margin: 3px;
}

select{
    width: 386px;
    float: none;
    /* NOTE: Causes to not show select before Chosen plugin hide them by JS */
    visibility: hidden;
}

input[type="text"]:hover, input[type="password"]:hover, textarea:hover{
    background: #F8f8f8;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus{
    border: 1px solid #5897FB;
}

label{
    display: inline;
}
/*---- END OTHER FORM ELEMENTS ----*/

/* DISABLED STATE */
input:disabled, textarea:disabled, select:disabled, button:disabled, .button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* END */


/*--- More specific ---*/
/* Forms rows and columns */
.form-row {
    float: left;


}

.form-column {
    float: left;
    width: 550px;

    margin-bottom:10px;
}

.form-column-right {
    margin-left: 40px;
}

.form-column-descriptions {
    margin-top: 50px;
}

/*---- SINGLE FIELD WRAPPERS ----*/
/* Field single or a complex widget with label and errors wrapper */
.field-box {
    float: left;
    
    margin-bottom: 10px;
    
    width: 550px;
}

.field-box-label {
    /* jovian-dss online shop fix for Contact information > Phone number */
    /*display: inline-block;*/
    /*float: left;*/
    
    margin-top: 10px;
    margin-left:5px;
    
    width: 155px;
}
/* Fix for newsletters partner registration checkboxes */
#newsletter_subscription .field-box-label {
    display: inline-block;
}

.fullwidth-policyterms .field-box-policy_terms {
    margin-bottom: 10px;
}

.fullwidth-policyterms .field-box-policy_terms .field-box-label {
    float:right;
    width: 510px;
    line-height: 20px;
}
.fullwidth-policyterms .field-box-policy_terms input {
    float:left !important;
    line-height: 20px;
    margin-left:15px;
    margin-top:3px;
}
.fullwidth-policyterms .field-box-policy_terms .errorlist li {
    width:100% !important;
}

#colorbox .field-box-customer_name .errorlist li,
#colorbox .field-box-transaction_date .errorlist li,
#colorbox .modal-send-us-a-message .errorlist li,
#colorbox .field-box.field-box-old_password .errorlist li,
#colorbox .field-box.field-box-new_password .errorlist li,
#colorbox .field-box.field-box-new_password2 .errorlist li {
    width:386px;
}

#registration_body .field-box-revenue_currency_code .errorlist li {
    margin-top:10px;
}

.store-subscriptions-agreement .errorlist li {
    float: none;
    margin-bottom: 0;
}

div.reset-password-static .field-box-new_password {
    position: relative;
}

div.reset-password-static .field-box-new_password .field-hint-sign {
    position: absolute;
    left: 364px;
    top: 21px;
}
#wh-product-note-box{
    position: relative;
    left: 93px;
}
#wh-product-note-box .button-submit{
    max-width: 150px;
    position: relative;
    right: 180px;
}

#wh-product-note-box .button-submit:hover{
    max-width: 150px;
    width: 150px;
    position: relative;
    right: 180px;
    margin-top: 10px;
    margin-right: 20px;
}

form hr {
    margin-top:0px;
    margin-bottom:15px;
}

/* For radio buttons and checkboxes special case */
.form-switchers .field-box-label {
    display: inline-block;
    float: none;
    
    margin-top: 0px;
    margin-bottom:5px;
    
    width: auto;

    line-height:20px;
}

.form-switchers .field-box-label label {
    cursor:pointer;
}

.form-switchers input[type="checkbox"], 
.form-switchers input[type="radio"]{
    float: left;
    height: 20px;
    line-height: 20px;
    margin: 0 5px 0 0;
    top: 0;
}

/* Validation star */
.field-required {
    color: #CC0000;
    font-weight: bold;
}

.field-required-optional{
    color: orange;
    font-weight: bold;
}

/* NOTE: Django/Python generated class */
.errorlist li {
    display: block;
    float: left;
    
    margin-left: 0px;
    margin-bottom: 10px;
    margin-left:3px;
    margin-top: 2px;
    padding: 5px 15px;
    
    min-height: 10px;
    width: 354px;
    
    background: none repeat scroll 0 0 #F2DEDE;
    
    border: 1px solid #F0D9DB;
    
    color: #C5503F;
    font-size: 10px;
    line-height:12px;
    text-align: left;
}

.errorlist li a {
    font-size:10px;
}

.product-key-registration-form .errorlist li {
    margin-left:158px;
}

/*---- When hover on "?" sign disc ----*/
.field-hint{
    color: #cc0000;
    font-size: 10px;
}

.field-hint-sign{
    display: inline-block;
    
    margin-left: 5px;
    margin-top: 5px;
    padding: 4px;
    
    height: 10px;
    width: 10px;
    
    background: #E6E6E6;
    
    border-radius: 15px;
    border: 1px solid #dedede;
    box-shadow: 0 0 1px 1px #F0F0F0 inset, 0 0 2px 2px #E8E8E8 inset;
    
    color: #333333;
    text-align: center;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.506);
    line-height: 10px;
}

.field-hint-sign:hover {
    cursor: pointer;
    background: #EaEaEa;
    border-color: #ddd;
    color: #666;
}

/*---- Python generated widgets ----*/
/* Hardcoded widths were need to fit them */
select.widget-country-prefix{
    width: 130px;
}

input.widget-subscriber-number{
    width: 169px;
}

input.widget-extension{
    width: 61px;
}

input.widget-mobile-number{
    width: 243px;
}


.widget-im-number[type="text"] {
    width: 243px;
}

.widget-im-type{
    width: 130px !important;
}

/* When form field is read only it is presented in different way */
.field-read-only{
    margin-top: 10px;
    width: 150px;
    float: left;
}


/* HACK: special cases for formatting forms elements for Python generated class */
.field-box.field-box-preferred_certification li, .field-box-supplier li{
    float: left;
    margin-right: 30px;
}


/* Shorten form elements width if at least one from section have hint box with "? */
.form-column-hints input[type="text"], 
.form-column-hints input[type="password"], 
.form-column-hints textarea{
    width: 295px;
}

.form-column-hints select{
    width: 302px;
}

/* Needed by widgets, so code is duplicated */
.form-column-hints select.widget-country-prefix{
    width: 130px;
}

.form-column-hints input.widget-subscriber-number{
    width: 110px;
}

.form-column-hints input.widget-extension{
    width: 56px;
}

.form-column-hints input.widget-mobile-number{
    width: 164px;
}


/* When inputs have preview buttons on the right side - it needs to be shortened */
.form-column-previews input{
    width: 305px;
}

td > .button-input, 
td > .button-input:visited, 
td > .button-link, 
td > .button-link:visited,
.form-column-previews .button-input, 
.form-column-previews .button-input:visited, 
.form-column-previews .button-link, 
.form-column-previews .button-link:visited {
    line-height: 13px;
    padding: 5px 10px;
}

/* ---- Forms fields mode switching ---- */
.form-mode-switcher {
    display: inline-block;
    vertical-align:text-top;
    margin-top:0px;
    margin-bottom:0px;
    margin-left: 20px;
}

.field-content {
    display: block;
    float: left;
    overflow: auto;

    padding: 10px;

    min-height: 10px;
    max-height: 150px;
    width: 370px;

    border: 1px solid #F5F5F5;

    background: #FAFAFA;

    color: #666666;
}

.field-content:hover {
    border: 1px solid #F2F2F2;

    background: #F7F7F7;
    color: #333333;
    transition: all 0.5s ease;
}

.field-content-expand {
    width: 528px;
}

/* Fields that are in read-only "mode" */
.readonly-list {
    list-style: square inside;
}

.readonly-list ul {
    margin-left: 15px;
}

.readonly-list li {
    margin: 3px 0;
    width: 100%;
}

.readonly-list li div {
    margin: 3px 0 7px 13px;
    color: #666666;
    font-style: italic;
}

/* Class added to override "field-box" displaying for "view-mode" form elements */
.field-box-hide>*{
    display: none;
}

/* Show hidden fields from previous selector to not use CSS "not" feature because of IE7 and IE8 */
.field-box-hide .field-box-label, .field-box-hide .field-content, .field-box-hide select{
    display: block;
}

/*.field-box-management_contact_phone .field-box-label,*/
/*.field-box-company_phone .field-box-label,*/
/*.field-box-person_phone .field-box-label,*/
/*.field-box-person_mobile .field-box-label,*/
/*.field-box-instant_messaging .field-box-label,*/
/*.field-box-phone .field-box-label,*/
/*.field-box-mobile .field-box-label,*/
/*.field-box-management_sales_phone .field-box-label,*/
/*.field-box-management_marketing_phone .field-box-label,*/
/*.field-box-management_finance_phone .field-box-label,*/
/*.field-box-management_company_phone .field-box-label,*/
/*.field-box-management_technical_phone .field-box-label,*/
/*.field-box-person_instant_messaging .field-box-label {*/
    /*width:440px;*/
/*}*/




.registration-box .field-box .field-box-label {
    width:155px;
}

/* Hide fields related tooltips */
.writeable-content>*{
    display: none;
}
/* END */


/* Form modal buttons - used by 'colorbox_modal' */
.form-modal-buttons {
    float: left;
}

.form-modal{
    width: 475px;
}

/* HACK: fix to enable showing date picker in colorbox modal forms */
.ui-daterangepickercontain {
    z-index: 9999;
}

.field-hint-plain {
    margin-left:25px;
    margin-bottom:10px;
    color:#666666;
    line-height:16px;
}

.form-newsletter > h3 {
    margin-bottom:20px;
}

.form-newsletter.form-column-descriptions p {
    color:#666666;
    line-height:16px;
}

.form-newsletter .button-input {
    height: auto;
    line-height: 20px;
    margin-left: 396px;
    padding: 5px 15px;
}

.form-newsletter .field-box-label {
    margin-bottom:0px;
}

.form-newsletter .errorlist li {
    margin-left:23px;
    width:407px;
    padding:10px 15px;
    font-size:13px;
}

.field-box-company_website label {
    letter-spacing:-0.3px;
}

.field-box-num_employees_technical .field-box-label,
.field-box-num_employees_sales .field-box-label,
.field-box-num_employees_marketing .field-box-label {
    margin-left:16px;
    width:155px;
}

.invite-join-form .button-red,
.invite-join-form .button-red:hover {
    width:150px;
    margin-top:0px;
    margin-bottom:0px;
}

.invite-join-form input,
.invite-join-form label {
    display:block;
    clear:both;
}

.invite-join-form ul li {
    margin-left:0px;
    margin-top:10px;
    margin-bottom:0px;
}

.invite-join-form input {
    margin-top:10px;
    margin-bottom:20px;
    margin-left:0px;
}

#id_remember_me {
    margin-top:0px;
}
.delete-contact-column input[type="checkbox"],
.add-contact-column input[type="checkbox"] {
    top: 0;
}
#add-contact-person {
    margin-left: 15px;
}
.add-contact-button input {
    float: right;
    margin-right: 25px;
}

.field-box.field-box-company_phone,
.field-box.field-box-person_phone,
.field-box.field-box-person_mobile,
.field-box.field-box-person_instant_messaging {
    display: block;
    float: left;
}
.field-box.field-box-company_phone .field-box-label,
.field-box.field-box-person_phone .field-box-label,
.field-box.field-box-person_mobile .field-box-label,
.field-box.field-box-person_instant_messaging .field-box-label {
    display: block;
    float: none;
}

.field-wrapper {
    float:right;
}
#colorbox .modal-send-us-a-message .field-box-phone .chosen-container,
#colorbox .modal-send-us-a-message .field-box-phone input {
    float:left;
}
.modal-send-us-a-message #id_phone_1 {
    width: 176px;
}