/*	=============================================================================================================
	Responsive Form
	============================================================================================================= */

request-page .responsive-form input.textbox,
.responsive-form select.dropdown,
.responsive-form textarea.textarea { color: #333 !important; }

.primary-site-button,
.page-button {
    display: inline-block;
    float: none;
    width: auto;
    min-width: 400px;
    margin-right: auto;
    margin-left: auto;
    padding: 20px 5px !important;
    -webkit-border-radius: 10px 10px 10px 10px;
       -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
    font-size: 26px;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    background: #CC4D00;
    background-color: #CC4D00;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s;
}

.primary-site-button:hover,
.page-button:hover { background-color: #d36930; }

.button-container { padding-bottom: 0; }

.floatright {
    float: right;
    margin-top: 0px;
}

.clear10 {
    clear: both;
    height: 10px;
}

/* Required for new request form style. */

.form .input-error {
    float: none;
    clear: both;
}



/* --- Microsoft love --- */

.responsive-form p,
.responsive-form .button-container { zoom: 1; }

/* don't show the x or eye for text/password inputs */
::-ms-clear,
::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* used on the UL level to add extra spacing between fields that have little in common, but are grouped in the same fieldset */

.responsive-form label {
    display: block;
    color: #999;
}

/* 
- used for pages that have page button container with a top solid border 
- add the ".no-bottom-borer" class to the ".responsive-form" element 
    */

.responsive-form fieldset {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 2px dotted #eee;
}

.responsive-form fieldset.no-border {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
}

.responsive-form fieldset legend {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    color: #ccc;
    text-transform: uppercase;
}

.responsive-form fieldset ul { overflow: hidden; }

.responsive-form fieldset ul li {
    display: inline;
    vertical-align: top;
}

.responsive-form fieldset ul li p.textbox-mask,
.responsive-form fieldset ul li p.textarea-mask,
.responsive-form fieldset ul li p.dropdown-mask {
    position: relative;
    float: left;
    overflow: hidden;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 99%;
    min-width: 100px;
    height: 39px;
    margin: 0px 6px 0 0px;
    border: 1px solid #ccc;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    line-height: 25px;
    background: #f9f9f9;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fbfbfb), to(#f7f7f7));
    background: -webkit-linear-gradient(0% 0%, 0% 100%, from(#fbfbfb), to(#f7f7f7));
    background:    -moz-linear-gradient(center top, #fbfbfb, #f7f7f7);
    background:         linear-gradient(#fbfbfb, #f7f7f7);
    cursor: text;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f7f7f7');
}

/* browsers that do not support box shadow (<ie8) */
.no-boxshadow .responsive-form fieldset ul li p.textbox-mask,
.no-boxshadow .responsive-form fieldset ul li p.textarea-mask,
.no-boxshadow .responsive-form fieldset ul li p.dropdown-mask { border-color: #ccc; }

/* changes margin on search bar */
.responsive-form fieldset ul li p.textbox-mask,
.responsive-form fieldset ul li p.textarea-mask,
.responsive-form fieldset ul li p.dropdown-mask { margin: 4px 10px 20px 0; }

#request-page .responsive-form fieldset ul li p.textbox-mask,
#request-page .responsive-form fieldset ul li p.textarea-mask,
#request-page .responsive-form fieldset ul li p.dropdown-mask { margin: 20px 10px 20px 0; }

.responsive-form fieldset ul li p.textbox-mask,
.responsive-form fieldset ul li p.textarea-mask { padding: 0; }

.responsive-form fieldset ul li p.textarea-mask {
    max-width: 800px;
    height: auto;
    margin-bottom: 6px;
}

.responsive-form fieldset ul li p.textarea-mask .textarea {
    position: relative;
    width: 100% !important;
    height: 92px;
    padding-right: 28px !important;
}

.responsive-form fieldset ul li p.failed-validation,
.no-boxshadow .responsive-form fieldset ul li p.failed-validation {
    border-color: #a85c6f !important;
    -webkit-box-shadow: 0 0 5px 0  #d23d26;
       -moz-box-shadow: 0 0 5px 0  #d23d26;
            box-shadow: 0 0 5px 0  #d23d26;
}

.responsive-form fieldset ul li p,
.responsive-form fieldset ul li p .checkbox input,
.responsive-form .button-container * {
    -webkit-transition: all 0.30s ease-in-out;
       -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
         -o-transition: all 0.30s ease-in-out;
            transition: all 0.30s ease-in-out;
}

.responsive-form fieldset ul li p.focused,
.responsive-form fieldset ul li p .checkbox input:focus {
    border-color: #229bff;
    background: #fff;
    -webkit-box-shadow: 0 0 5px 0 #0079ff;
       -moz-box-shadow: 0 0 5px 0 #0079ff;
            box-shadow: 0 0 5px 0 #0079ff;
}

.responsive-form input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset; }
.responsive-form p.focused input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset; }

.responsive-form fieldset ul li p .checkbox input:focus { outline: none; }

.responsive-form fieldset ul li p label,
.responsive-form fieldset ul li p label em {
    font-size: 13px;
    font-weight: normal;
    color: #ccc;
    text-shadow: 1px 1px 1px #fff;
}

.responsive-form fieldset ul li p label em { margin-left: 5px; }

.responsive-form fieldset ul li p label {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 3;
    display: block;
    overflow: hidden;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 25px;
    margin: 0 !important;
    padding-right: 8px;
    padding-left: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: text;
}

.responsive-form fieldset ul li p.failed-validation label { padding-right: 28px; }

.responsive-form fieldset ul li p label::-moz-selection {
    color: inherit !important;
    background: transparent !important;
    text-shadow: inherit !important;
}
.responsive-form fieldset ul li p label::selection {
    color: inherit !important;
    background: transparent !important;
    text-shadow: inherit !important;
}

.responsive-form fieldset ul li p label.inputting {
    -webkit-animation: labelSlideUp 0.3s both ease-out;
       -moz-animation: labelSlideUp 0.3s both ease-out;
        -ms-animation: labelSlideUp 0.3s both ease-out;
         -o-animation: labelSlideUp 0.3s both ease-out;
            animation: labelSlideUp 0.3s both ease-out;
}

.responsive-form fieldset ul li p label.inputting,
.responsive-form fieldset ul li p label.inputting-notrans { color: #0079ff; }

.responsive-form fieldset ul li p label.inputting,
.responsive-form fieldset ul li p label.inputting em,
.responsive-form fieldset ul li p label.inputted,
.responsive-form fieldset ul li p label.inputted em {
    top: -3px;
    left: 0;
    overflow: visible;
    height: 0;
    font-size: 9px;
    font-style: normal;
    text-shadow: none;
}

.responsive-form fieldset ul li p .dropdown.inline { display: inline; }

.responsive-form fieldset ul li p .textbox,
.responsive-form fieldset ul li p .dropdown,
.responsive-form fieldset ul li p .textarea { margin: 3px 10px 10px 0 !important; }

.responsive-form fieldset ul li p .textbox,
.responsive-form fieldset ul li p .dropdown,
.responsive-form fieldset ul li p .textarea {
    position: relative;
    z-index: 2;
    display: block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding-right: 0 !important;
    border: none;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    outline: none;
    background-color: #fff !important;
    text-shadow: 1px 1px 1px #ddd;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.responsive-form fieldset ul li p .textbox[disabled="disabled"],
.responsive-form fieldset ul li p .dropdown[disabled="disabled"],
.responsive-form fieldset ul li p .textarea[disabled="disabled"] {
    color: #999;
    text-shadow: 1px 1px 1px #fff;
    opacity: 1;
    -webkit-text-fill-color: #999;
}

.responsive-form fieldset ul li p .textbox::-ms-clear { display: none; }

.responsive-form fieldset ul li p.textarea-mask label {
    position: relative;
    overflow: visible;
    height: 16px;
    white-space: normal;
}

.responsive-form fieldset ul li p.textarea-mask label.inputted {
    height: auto;
    padding-top: 3px;
    line-height: 13px;
}

.responsive-form fieldset ul li p .dropdown { padding: 11px 8px 1px 8px; }

.responsive-form .input-loading {
    position: absolute;
    top: 12px;
    right: 10px; 
    display: none;
}

.responsive-form .dropdown-mask .input-loading { right: 40px; }

.responsive-form .input-status {
    position: absolute;
    top: 10px;
    right: 7px;
    z-index: 4; /* must be greater than label for clickability */
    display: none;
    zoom: 1;
    font-size: 18px;
           opacity: 0.0;
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       -moz-transition:    -moz-transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         -o-transition:      -o-transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition:         transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -khtml-opacity: 0.0;
    filter: alpha(opacity=0);
      -moz-opacity: 0.0;
}

.responsive-form .dropdown-mask .input-status { right: 34px; }

.responsive-form fieldset ul li .failed-validation .input-status {
    display: block;
    -webkit-animation: statusBounceIn 0.3s both ease;
       -moz-animation: statusBounceIn 0.3s both ease;
        -ms-animation: statusBounceIn 0.3s both ease;
         -o-animation: statusBounceIn 0.3s both ease;
            animation: statusBounceIn 0.3s both ease;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}

.responsive-form fieldset ul li .radio-mask.failed-validation label .input-status,
.responsive-form fieldset ul li .checkbox-mask.failed-validation label .input-status {
    position: static;
    display: inline;
}

/* for browsers that do not support css animations (<ie8)*/
.no-cssanimations .responsive-form fieldset ul li .failed-validation .input-status {
    -khtml-opacity: 1.0;
      -moz-opacity: 1.0;
           opacity: 1.0;
    filter: alpha(opacity=100);
}

.responsive-form .input-warning {
    color: #d23d26;
    cursor: pointer;
}

.responsive-form .warning-messages {
    clear: both; 
    overflow: auto;
    width: 100%;
}

.responsive-form .warning-messages div {
    float: left;
    clear: left;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0 3px 3px 0;
    padding: 4px 6px;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    font-size: 14px;
    font-style: italic;
    line-height: 18px;
    color: #d23d26;
    background: #eaf4f8;
}

.responsive-form .warning-messages div:last-child { margin-bottom: 10px; }

.responsive-form .warning-messages .bypass-field-link {
    font-size: 13px;
    color: #d23d26;
}

.responsive-form .button-container { padding: 0; }

/* modal alerts */
#responsive-form-message .avlModal-content-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

#responsive-form-message .avlModal-content p.warning-message {
    display: table-cell;
    font-size: 14px;
    font-weight: 600;
    color: #d23d26;
    text-align: center;
    vertical-align: middle;
}

@-webkit-keyframes labelSlideUp {
    0% {
        opacity: 0;
    }
    20% {
        top: 0px; 
        opacity: 0;
    }
    100% {
        top: -3px; 
        opacity: 1;
    }
}

@-moz-keyframes labelSlideUp {
    0% {
        opacity: 0;
    }
    20% {
        top: 0px; 
        opacity: 0;
    }
    100% {
        top: -3px; 
        opacity: 1;
    }
}

@-o-keyframes labelSlideUp {
    0% {
        opacity: 0;
    }
    20% {
        top: 0px; 
        opacity: 0;
    }
    100% {
        top: -3px; 
        opacity: 1;
    }
}

@keyframes labelSlideUp {
    0% {
        opacity: 0;
    }
    20% {
        top: 0px; 
        opacity: 0;
    }
    100% {
        top: -3px; 
        opacity: 1;
    }
}

@-webkit-keyframes statusBounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.25);
    }
    70% {
        opacity: 1;
        -webkit-transform: scale(0.7);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes statusBounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3);
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.25);
    }
    70% {
        opacity: 1;
        -moz-transform: scale(0.7);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes statusBounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(0.3);
    }
    50% {
        opacity: 1;
        -o-transform: scale(1.25);
    }
    70% {
        opacity: 1;
        -o-transform: scale(0.7);
    }
    100% {
        opacity: 1;
        -o-transform: scale(1);
    }
}

@keyframes statusBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
    70% {
        opacity: 1;
        transform: scale(0.7);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/*	=============================================================================================================
	Responsive AutoComplete
	============================================================================================================= */

.ui-menu {
    z-index: 9998;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100px;
    max-height: 140px;
    padding: 0px !important;
    border: 1px solid WindowFrame;
    text-align: left;
    background-color: Window;
}

/* ie6 */
* html .ui-menu { height: 140px; }

.ui-menu .ui-menu-item {
    display: block;
    overflow: hidden; 
    width: 100%;
    font: menu;
    font-size: 15px;
    cursor: pointer;
}

.ui-menu .ui-menu-item a {
    padding: 3px 10px !important;
    color: #444;
}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
    margin: 0 !important;
    color: HighlightText;
    background-color: Highlight;
}

.autocomplete-selected {
    color: HighlightText;
    background-color: Highlight;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #444;
}

.autocomplete-selected strong {
    font-weight: bold;
    color: HighlightText;
}


/*	=============================================================================================================
	Responsive Textboxes
	============================================================================================================= */

.responsive-form .txt-name,
.responsive-form .txt-email,
.responsive-form .txt-company,
.responsive-form .txt-url,
.responsive-form .txt-phone { max-width: 100%; }

.responsive-form .txt-address1,
.responsive-form .dd-country { max-width: 76%; }

.responsive-form .txt-city,
.responsive-form .dd-states { max-width: 48.6%; }

.responsive-form .txt-address2,
.responsive-form .txt-zipcode { max-width: 21.2%; }


/*	=============================================================================================================
	Media Queries
	============================================================================================================= */

@media screen and (min-width: 768px) and (max-width: 1505px) {
    .primary-site-button,
    .page-button {
        min-width: 100%;
        max-width: 100%;
        padding: 18px 0px;
        font-size: 23px;
    }

    .responsive-form .button-container .clear-button { display: none; }

    .responsive-form fieldset legend { font-size: 15px; }

    .responsive-form fieldset ul li p.textbox-mask,
    .responsive-form fieldset ul li p.textarea-mask,
    .responsive-form fieldset ul li p.dropdown-mask { margin: 4px 5px 10px 0; }

    #request-page .responsive-form fieldset ul li p.textbox-mask,
    #request-page .responsive-form fieldset ul li p.textarea-mask,
    #request-page .responsive-form fieldset ul li p.dropdown-mask { margin: 10px 5px 10px 0; }

    .responsive-form fieldset {
        margin-bottom: 20px;
        padding-bottom: 17px;
    }

    .responsive-form .txt-name,
    .responsive-form .txt-email,
    .responsive-form .txt-company,
    .responsive-form .txt-url,
    .responsive-form .txt-phone { max-width: 100%; }

    .responsive-form .txt-address1,
    .responsive-form .dd-country,
    .responsive-form .txt-address2,
    .responsive-form .txt-zipcode,
    .responsive-form .txt-city,
    .responsive-form .dd-states { max-width: 48.4%; }
}

@media (max-width:767px) {
    .responsive-form fieldset ul li p.textbox-mask,
    .responsive-form fieldset ul li p.textarea-mask,
    .responsive-form fieldset ul li p.dropdown-mask {
        max-width: 100%;
        margin: 3px 0px 3px 0;
    }

    .responsive-form fieldset {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .responsive-form fieldset { border-bottom: none; }

    .responsive-form .warning-messages div { width: 100%; }

    .responsive-form .button-container .clear-button { display: none; }

    .responsive-form .button-container {
        margin: 10px 0 0 0;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 6px 0;
        text-align: center;
    }

    .primary-site-button,
    .page-button {
        width: 100%;
        min-width: 300px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 20px;
    }
}

@media screen and (min-width: 450px) and (max-width: 768px) {
    .primary-site-button,
    .page-button {
        max-width: 400px;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 18px 0px;
        font-size: 23px;
    }
}


/*	=============================================================================================================
	SPP setupStudio.asp Form
	============================================================================================================= */

.responsive-form .txt-country-spp,
.responsive-form .txt-address1-spp { max-width: 76%; }

.responsive-form .txt-zipcode-spp,
.responsive-form .txt-address2-spp { max-width: 21.2%; }

.responsive-form .txt-city-spp,
.responsive-form .dd-states-spp,
.responsive-form .txt-customercode-spp,
.responsive-form .txt-contactid-spp { max-width: 48.6%; }

.responsive-form .txt-phone-spp,
.responsive-form .txt-fax-spp,
.responsive-form .txt-plaquename-spp,
.responsive-form .txt-taxid-spp,
.responsive-form .txt-checkname-spp { max-width: 100%; }

.responsive-form fieldset ul li p span {
    margin-top: 4px;
    padding-left: 4px;
    font-size: 13px;
    font-weight: normal;
    color: #ccc;
    text-shadow: 1px 1px 1px #fff;
}

.responsive-form fieldset ul li p span {
    margin-top: 0;
    font-size: 14px;
    font-weight: bold;
    color: #000!important;
}

.responsive-form fieldset legend.lowercase {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    color: #ccc;
    text-transform: none;
}

@media screen and (min-width: 1025px) and (max-width: 1505px) {
    .responsive-form .txt-address1-spp,
    .responsive-form .txt-address2-spp,
    .responsive-form .txt-country-spp,
    .responsive-form .txt-zipcode-spp { max-width: 48.6%; }

    .responsive-form .button-container.spp {
        width: 50%;
        min-width: 400px;
    }
}

@media screen and (max-width: 1024px) {
    #request-page .section-2 .request-img.spp {
        float: left;
        width: 100%;
        height: auto;
    }

    #request-page .section-2 .request-img.spp img {
        width: 25%;
        height: auto;
        padding-bottom: 20px;
    }

    #request-page .section-2 #form.spp {
        float: left;
        width: 92%;
        margin-right: 4%;
        margin-left: 4%;
    }

    .responsive-form .txt-address1-spp,
    .responsive-form .txt-address2-spp,
    .responsive-form .txt-city-spp,
    .responsive-form .dd-states-spp,
    .responsive-form .txt-country-spp,
    .responsive-form .txt-customercode-spp,
    .responsive-form .txt-contactid-spp,
    .responsive-form .txt-zipcode-spp { max-width: 100%; }

    .responsive-form .button-container.spp {
        width: 100%;
        max-width: 50%;
        margin: 0 auto;
    }

    .responsive-form fieldset legend.lowercase { font-size: 15px; }
}

@media screen and (max-width: 767px) {
    #request-page .section-2 .request-img.spp img { width: 40%; }
}

@media screen and (max-width: 550px) {
    .responsive-form .button-container.spp {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}