/***************************************/
/** General **/
/***************************************/

body {
    font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
}

.ympulse-anchor {
    text-decoration: none; color: #337ab7; border-bottom: 1px dotted transparent;
}

.ympulse-anchor:hover {
    cursor: pointer; text-decoration: underline; color: #23527c;
}

a, a:visited {
    color: #333; border-bottom: 1px dotted #333;
}

a.small { font-size: 0.9em; color: #337ab7; border-color: #337ab7; }

a:hover {
    color: #f02b22; border-bottom: 1px solid #f02b22; text-decoration: none;
}

a:focus { text-decoration: none; }

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: .75;
    z-index: 9999999;
}

input, select, textarea {
    font-family: inherit;
    font-size: 0.9em;
    background-color: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 4px;
    line-height: 1.5em;
}

input[readonly]
{
    color: #aaa;
    background-color: #e5e5e5;
}

input { padding: 0.2em 0.5em; margin: 0.1em 0; }
html.ie input { line-height: 1em; }

select { height: 1.9em; margin-bottom: 0.2em; }

input:disabled,
select:disabled,
textarea:disabled { color: #aaa; background-color: #f0f0f0; }


/***************************************/
/** Header **/
/***************************************/

header { background: #111; padding-top: 1em; color: #ddd; font-family: 'Play', Arial, Helvetica, sans-serif; font-weight: bold; }

header a,
header #user a,
header a:visited { color: #fff; }

header #user .dropdown-menu a,
header #user .dropdown-menu a:hover,
header #user .dropdown-menu a:visited { color: #333; }

header #user a:hover #user-id { text-decoration: underline; }
header #user a:hover { color: #eee; border-bottom: 0; text-decoration: none;}
header a:hover { color: #eee; border-bottom: 0; text-decoration: underline; }

header #tag-line { font-weight: bold; color: #fff; font-size: 0.9em;}
header #tag-line a:hover { text-decoration: none; border: 0; }
@media (max-width: 767px) {
    header #tag-line .description {display: none; }
}

header .right-column { text-align: right; }
header #dealer-info { margin-right: 25px; display: inline-block; }

header #user { text-transform: capitalize; display: inline-block; margin-right: 25px; }
header #user-icon { padding: 3px 5px; display: inline-block; color: #fff; margin-right: 3px; }

/***************************************/
/** Menu / Navigation **/
/***************************************/
nav {font-family: 'Play', Arial, Helvetica, sans-serif; font-weight: bold;}

nav #yamaha-logo { display: inline-block; padding-top: 0px; height: auto; }
nav #yamaha-logo img { max-width: 100%; }
nav #yamaha-logo a,
nav #yamaha-logo a:hover { border-bottom: 0; text-decoration: none; }

nav#top-level-nav { background-color: #111; font-size: 1.05em; border-radius: 0; border-bottom: 1px solid #ddd; margin-bottom: 0; }
nav#top-level-nav li a { border-bottom: 0; padding-bottom: 0.3em; font-weight: bold;}
nav#top-level-nav li.default a { color: #333; }
nav#top-level-nav li.dropdown li a { font-weight: normal; }

nav#top-level-nav .navbar-nav li.default a .item-text { padding-bottom: 0.15em; color: #ddd; }
nav#top-level-nav li.default a:hover { background-color: transparent;}
nav#top-level-nav li.default a:hover .item-text { color: #eee; text-shadow: 1px 1px 2px #333; }
nav#top-level-nav .navbar-nav li.default.active a { background-color: transparent;}
nav#top-level-nav .navbar-nav li.default.active a .item-text { color: #fff;}
nav#top-level-nav .navbar-nav li.default.active a span { border-bottom: 3px solid #f02b22; }

nav#top-level-nav li.dropdown.open>a,
nav#top-level-nav li.dropdown.active>a { background-color: transparent; }

/* Larger screens (hide dropdown items that contain submenu. We show a second navbar for sub-menu items.) */
@media (min-width: 768px) {
    nav#top-level-nav { padding-bottom: 0.5em; padding-top: 0.5em; border: 0; }
    nav#top-level-nav li.dropdown.menu-structure { display: none }

    /* Bootstrap has no way to center the navbar items. Do it ourselves: */
    nav#top-level-nav .navbar-nav { display: inline-block; float: none; vertical-align: top; }
    nav#top-level-nav .navbar-collapse { text-align: center; }
}

/* Smaller screens (hide second navigation bar bar and non-dropdown items) */
@media (max-width: 767px) {
    nav.sub-level-nav { display: none; }
    nav#top-level-nav li.default { display: none }
}
nav .nav .nav-divider { background-color: #333; }

nav.sub-level-nav { background-color: #f0f0f0; text-align: center; border: 0; margin: 0; padding: 0; }
nav.sub-level-nav li { background-color: #f0f0f0; list-style: none; display: inline-block; float: none; padding: 0; white-space: nowrap; border: 0; border-radius: initial; margin: 0;}
nav.sub-level-nav li a { display: inline-block; float: none; padding: .7em 1em; text-decoration: none; font-weight: bold; font-size: 0.9em;}

nav.sub-level-nav li a { cursor: pointer; color: #666; }
nav.sub-level-nav li a:hover { color: #fff; text-shadow: 1px 1px 1px #333; }
nav.sub-level-nav li.active { background-color: #bbb; }
nav.sub-level-nav li.active a  { cursor: text; }

nav.sub-level-nav li.active a,
nav.sub-level-nav li.active a:hover { color: #fff; text-shadow: 1px 1px 1px #333; }

nav.sub-level-nav a, nav.sub-level-nav a:hover { border-bottom: 0; }
nav.sub-level-nav a:hover { background-color: #ccc }

/***************************************/
/** WARNINGS / ERRORS / ALERTS **/
/***************************************/

header .alert.alert-warning {
    margin: 1em 0 0.5em 0;
    display: inline-block;
    padding: 0.6em;
}

.alert.alert-error {
    background-color: #ffe7e9;
}
.alert.alert-success {
    background-color: #ecffe7;
}

/**************************************************************/
/********** Tabs (styled as part of the navigation ************/
/**************************************************************/

.ympulse-tab-nav.ui-tabs {position: relative;zoom: 1; border: 0; padding: 0; }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav { background-color: #f0f0f0; text-align: center; border: 0; margin: 0; padding: 0; }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav li { background-color: #f0f0f0; list-style: none; display: inline-block; float: none; padding: 0; white-space: nowrap; border: 0; border-radius: initial; margin: 0;}
.ympulse-tab-nav.ui-tabs .ui-tabs-nav li a { display: inline-block; float: none; padding: .7em 1em; text-decoration: none; font-weight: bold; font-size: 0.9em;}

.ympulse-tab-nav.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0;}

.ympulse-tab-nav.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ympulse-tab-nav.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ympulse-tab-nav.ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }

.ympulse-tab-nav.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; color: #666; }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav .ui-state-active { background-color: #bbb; }

.ympulse-tab-nav.ui-tabs .ui-tabs-nav .ui-state-active a,
.ympulse-tab-nav.ui-tabs .ui-tabs-nav a:hover { color: #fff; text-shadow: 1px 1px 1px #333; }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav a, .ui-tabs-nav a:hover { border-bottom: 0; }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav a:hover { background-color: #ccc }
.ympulse-tab-nav.ui-tabs .ui-tabs-nav li a:focus { outline: 0 !important; }

.ympulse-tab-nav.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0; }
.ympulse-tab-nav.ui-tabs .ui-tabs-panel h2 { clear: both; }
.ympulse-tab-nav.ui-tabs .ui-tabs-hide { display: none !important; }

.ympulse-tab-nav.ui-tabs input,
.ympulse-tab-nav.ui-tabs select,
.ympulse-tab-nav.ui-tabs textarea,
.ympulse-tab-nav.ui-tabs button { font-size: 0.9em; }


/***************************************/
/** Content **/
/***************************************/

#content, .content, main { padding: 1.5em 1.5%; }
#content section, main section { margin-bottom: 1.5em; }
#content .information { margin-bottom: 1.5em; }

main.center { margin-left: auto; margin-right: auto; max-width: 1100px; }

.ympulse-page-header { font-size: 0.8em; border-bottom: 1px solid #ddd; padding: 0.5em 1.5%; margin-bottom: 1em; }
.ympulse-page-header h1 { padding: 0; margin: 0; margin-top: 0.5em; }
.ympulse-page-header a { display: inline-block; font-size: 1.1em; border-bottom: 0;}
.ympulse-page-header a:hover .text { border-bottom-width: 1px; border-bottom-style: solid; }

h1, h2, h3, h4 {font-family: 'Play', Arial, Helvetica, sans-serif; font-weight: bold;}

h2 { margin-bottom: 0.4em; margin-top: 1.5em; letter-spacing: -0.07em; }

main h2:first-child,
.content h2:first-child { margin-top: 0; }

main h2.default-margin { margin-top: 1.5em; }

p { padding-bottom: 1em; }

.legend { font-weight: bold; }

mark { background-color: #f0f0f0; max-width: 600px; margin-bottom: 1em; }
mark.block { display: block; padding: 1em 1em 0 1em; }
mark h2 { margin-top: 0; }

/***************************************/
/** FIELDS  **/
/***************************************/

.fields { max-width: 500px; margin-bottom: 1.5em; }
.fields h2 { margin-top: 0.5em; font-size: 1.2em; font-weight: bold; }

.fields.large { max-width: 800px; }
.fields .field.large { font-size: 1em; }
.fields .field.large .fieldValue input { font-size: 1em; margin: 0.1em 0; }

.fields.xlarge { max-width: 1200px; }

.fields .field { margin-bottom: 0.5em; clear: both; }
/* Micro clearfix as popularized by Nicolas Gallagher */
.fields .field:before,
.fields .field:after { content: " "; display: table; }
.fields .field:after { clear: both; }

.fields .field.notification { font-size: 0.9em; font-weight: bold; color: #555; line-height: 1.7em; text-align: center;}

.fields .field .fieldName { font-size: 0.9em; width: 33.3%; float: left; text-align: right; padding-right: 1.5%; font-weight: bold; color: #555; line-height: 1.7em; }
.fields .field .fieldValue { width: 65%; display: inline-block; }

.fields .field .field-name-50 { font-size: 0.9em; width: 48%; float: left; text-align: right; padding-right: 1.5%;
font-weight: bold; color: #555; line-height: 1.7em; }
.fields .field .field-value-50 { width: 50%; display: inline-block; }

.fields>.buttons { margin-left: 167px; margin-top: 1em; }
.fields.large>.buttons { margin-left: 34%; }

.fields.align-left .field .fieldName { text-align: left; }
.fields.align-left .field .fieldName:after { content: ''; }

.fields .fieldValue label { font-weight: normal; }

.fields.field-name-50 .fieldName { width: 48%; }
.fields.field-name-50 .fieldValue { width: 50%; }
.fields.field-name-50>.buttons { margin-left: 255px; }
.fields.field-name-50.large>.buttons { margin-left: 403px; }

.fields.field-name-10 .fieldName { width: 8%; }
.fields.field-name-10 .fieldValue { width: 90%; }

.fields.fields-vertical .fieldName, .fields.fields-vertical .fieldValue { width: 100%; text-align: left; }
.fields.fields-vertical .fieldValue { float: none; }
.fields.fields-vertical input { padding: 0.2em 1%; }

.fields.no-edit .field { margin-bottom: 0.4em; }
.fields.no-edit .fieldName:after,
.fields .field.no-edit .fieldName:after { content: ' :'; }

.fields.no-width { max-width: initial; }

.fields .field.required .fieldName:after { content: '*'; }
.fields .field .required { display: inline; } /* Legacy: required class should be on .field */

.fields.striped .field { margin: 0; padding: 0.5em 0; }
.fields.striped .fieldName { color: #000; }
.fields.striped .fieldName:after { content: ''; margin-right: 15px; }
.fields.striped .field:nth-child(odd) { background-color: #f5f5f5; }

/* Let Bootstrap handle padding and margins when .fields are inside panel */
.panel .panel-body .fields { margin-bottom: 0; }

/***************************************/
/** BUTTONS **/
/***************************************/

@media screen and (min-width: 1250px) {
    /* Float next to the navigation buttons when there is space */
    .buttons.buttons-float-left { width: 50%; float: left; }
}

.buttons .special-actions { display: inline-block; margin-left: 30px; }
.buttons.large { max-width: 800px; padding-left: 34%; }
@media screen and (min-width: 850px) {
    .buttons.large { width: 800px; padding-left: 15px; margin-left: 264px; } /* 264 = 33% of 800px */
}
.buttons.buttons-vertical .ympulse-button,
.buttons.buttons-vertical button,
.buttons.buttons-vertical input { margin-bottom: 0.7em; display: block; }

a.ympulse-button, .ympulse-button {
    font-size: 0.8em;
    font-weight: bold;
    font-style: normal;
    display: inline-block;
    padding: 0.5em 12px;
    border: 1px solid #ccc !important;
    color: #4d4d4d;
    background-color: #f3f3f3;
    background-image: -moz-linear-gradient(center top, #f3f3f3, #f0f0f0);
    background-image: -webkit-linear-gradient(top, #f3f3f3, #f0f0f0);
    background-image: linear-gradient(to bottom,  #f3f3f3, #f0f0f0);
    border-radius: 3px;
}

a.ympulse-button:hover, .ympulse-button:hover {
    background-color: #aaa;
    background-image: -moz-linear-gradient(center top, #fafafa, #e1e1e1);
    background-image: -webkit-linear-gradient(top, #fafafa, #e1e1e1);
    background-image: linear-gradient(to bottom,  #fafafa, #e1e1e1);
    text-shadow: 5px 5px 5px #fff;
    border: 1px solid #aaa !important;
    color: #000;
    cursor: pointer;
    text-decoration: none;
}

a.ympulse-button:active, .ympulse-button:active {
    background: #ddd;
    color: #000;
}

button.ympulse-button:disabled, button.ympulse-button:disabled:hover {
    border: 1px solid #eee !important;
    background: #eee !important;
    text-shadow: none;
    color: #999;
}

button.ympulse-button:disabled:hover {
    cursor: auto;
}

h1.moduleHeading a.ympulse-button {
    font-size: 0.5em;
    margin-right: 1%;
}

table.data td .ympulse-button { padding: 0.3em 5px; }
.ui-widget table.data input[type="button"] { font-size: 0.8em; }

.single-button { margin-right: 30px; }

/***************************************/
/** Helper classes **/
/***************************************/

.clear-both {
    clear: both;
    height: 0;
}
.full-width {
    width: 100%;
}
.block-center {
    margin-left: auto;
    margin-right: auto;
}
.inline-center {
    text-align: center;
}
.no-wrap {
    white-space: nowrap;
}

.extra-space { margin-top: 2em; }

/***************************************/
/** Specific classes **/
/***************************************/

#orderEnquiryForm td.deleted {
    color: #f04f55;
}

table#messages tr.not-read td {
    background-color: #ddd;
    font-size: 0.95em;
    font-weight: bold;
}

.addressLookupContainer { background: #f0f0f0; padding: 1.5em 20px 1em 20px; margin-bottom: 1em; }
.addressLookupContainer .glyphicon { color: #666; margin-left: 5px; font-size: 1.1em; }

#uploadLabel #uploadButton { margin-top: 1em; }

.select2-result-label { white-space: nowrap; }
.select2-container { font-size: 90%; }

/******************************** Parts Order Entry ********************************/

table.data tr.messages .message-container {
    margin-left: 11%;
    font-size: 0.9em;
}
table.data tr.messages .message-container .message {
    padding: 0.4em 0.8%;
    max-width: 500px;
    border-radius: 4px;
    color: #555;
    background-color: #ffe7e9;
    margin-bottom: 0.5em;
    font-style: italic;
}
table.data tr.messages.error .message-container .message {
    background-color: #f9a9a9;
}
table.data tr.messages.warning .message-container .message {
    background-color: #ffc478;
}

/* See glyphicons: http://getbootstrap.com/components/ */
table.data tr.messages .message-container .message .glyphicon {
    margin-right: 2%;
}
table.data tr.messages.warning .message-container .message .glyphicon:before {
    content: "\e101";
}
table.data tr.messages.error .message-container .message .glyphicon:before {
    content: "\e090";
    font-weight: bold;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
    content: " \25B4\25BE"
}

/******************************** Forms ********************************/

.fieldsDefinition {
    background-color: #f0f0f0; padding: 1em; margin: 1em 0; border-radius: 3px;
}

.loader {
    position:fixed;
    top: 25%;
    left: 50%;
}

#cancelButton {
    display: block;
}

#claimHeader {
    display: inline;
}

#YpecClaim {
    float: right;
}

#select2-problemCodeSelect-results {
    max-height : 400px !important;
}

#select2-jobCodeSelect-results {
    max-height : 400px !important;
}

a.paginate_button.current{
    border: 1px solid red !important;
}