@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/*----------------------------------------------------------
The base color for this template is #3E3E3E. If you'd like
to use a different color start by replacing all instances of
#3E3E3E with your new color.
----------------------------------------------------------*/
* { font-family: 'Open Sans', sans-serif; }
body { background-color: #3E3E3E; font-size: .75em; margin: 0; padding: 0; color: #696969; }
header, footer, nav, section { display: block; }
a:link, a:visited, a:active { text-decoration: none; color: #696969; font-size: 11px; }
a:hover { text-decoration: underline; color: #696969; }

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #545454; }
h1 { font-size: 2em; padding-bottom: 0; margin-bottom: 0; margin-top: 10px; }
h2 { padding: 0 0 10px 0; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the page width. Or, you can specify an exact pixel width. */
.page { width:100% ; margin-left: auto; margin-right: auto; min-width: 850px !important;}
header, #header { position: relative; margin-bottom: 0px; color: #000; padding: 0; height: 87px; background-color: #CC3333; }
header h1, #header h1 { font-weight: bold; padding: 5px 0; margin: 0; color: #fff; border: none; line-height: 2em; font-size: 32px !important; text-shadow: 1px 1px 2px #111; }
#main { padding: 15px 30px 15px 30px; background-color: #fff; min-height: 550px; }
footer, #footer { background-color: #3E3E3E; color: #fff; padding: 10px 0; text-align: right; line-height: normal; margin: 0 28px 0 0; font-size: .9em;  }

div#title { text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("themes/base/images/grayview-logo-new.svg") no-repeat; background: url("themes/base/images/grayview-logo-new.png") no-repeat\9; height: 57px; width: 150px; margin: 18px 0 0 28px; }

/* Login / Logout */
div#logindisplay { text-align:right; padding: 18px 28px 0 0; color: #ffffff; }
div#logindisplay a { color: #ffffff; text-decoration: underline; padding-left: 5px; }

/* Main Menu
----------------------------------------------------------*/
header nav { margin: 14px 28px 0 0; width: 100%; }
header nav ul#MainMenu { background: none; border: none; color: #fff; float: right; }
header nav ul#MainMenu > li > div { margin-top: 10px; }
header nav ul#MainMenu ul { border-color: #CC3333; -webkit-box-shadow: none; box-shadow: none; }
header nav ul#MainMenu li { color: #ffffff; background-image: none; background-color: #CC3333; }

header nav ul#MainMenu span.k-icon { margin-left: 5px; background-image: url("themes/base/images/grayview-sprite.png"); }
header nav ul#MainMenu > li > a > span.k-i-arrow-s { background-position: 0 -16px; opacity: 0.5;  }
header nav ul#MainMenu span.k-i-arrow-e { background-position: 0 -48px; opacity: 0.5;  }
header nav ul#MainMenu a:hover { text-decoration: underline !important; }
header nav ul#MainMenu > li.k-state-highlight > a { text-decoration: underline !important; }
header nav ul#MainMenu > li.k-state-highlight > a > span.k-i-arrow-s, header nav ul#MainMenu > li.k-state-hover > a > span.k-i-arrow-s { background-position: 0 -16px; opacity: 1; }
header nav ul#MainMenu div.k-animation-container > ul > li.k-state-hover > a > span.k-i-arrow-e { background-position: 0 -48px; opacity: 1; }
header nav ul#MainMenu li.k-state-selected > a { text-decoration: underline !important; }

header nav ul#MainMenu li a { background-image: none; background-color: #CC3333; font-size: 12px; color: #fff; }
header nav .k-menu .k-arrow-down { vertical-align: middle; }
header nav ul#MainMenu > li { border: none; margin: auto 7px; font-weight: normal; }
header nav ul#MainMenu > li a { font-size: 12px; color: #fff; }
header nav ul#MainMenu li ul li { min-width: 120px; padding: 5px 0 0 0; background-color: #CC3333; }

header nav ul#MainMenu #favourites-menucontainer { background-color: #CC3333; }
header nav ul#MainMenu #favourites-menucontainer h2 { color: #fff; font-size: 13px; font-weight: bold; height: 20px; line-height: 20px; padding: 0 0 10px 15px; margin: 0; width: auto; float: left; }
header nav ul#MainMenu #favourites-menucontainer h2 span { margin: 2px 0 0 5px; padding: 0; float: right; display: block; }
header nav ul#MainMenu #favourites-menucontainer ul { margin: 0; padding: 0; }
header nav ul#MainMenu #favourites-menucontainer li { padding: 5px 20px 10px 15px; margin: 0; list-style: none; }
header nav ul#MainMenu #favourites-menucontainer li a { text-decoration: none; }

header nav ul#MainMenu #favourites-menucontainer li a:hover { text-decoration: underline !important; }


/* Footer */
footer div.footerNav { text-align: left; padding-left: 30px; color: #ffffff; font-size: 11px; }
footer div.footerNav ul { margin: 0; padding: 0; }
footer div.footerNav ul li { margin: 0; padding: 0 10px 0 10px; float: left; list-style: none; border-right: 1px solid #ffffff; line-height: 11px; }
footer div.footerNav ul li:last-child { border: none; }
footer div.footerNav ul li a { text-decoration: none; color: #ffffff; }

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/
fieldset { border: 1px solid #ddd; padding: 0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; }
legend { font-size: 1.2em; font-weight: bold; }
textarea { min-height: 75px; }
input[type="text"], input[type="password"] { border: 1px solid #ccc; padding: 2px; color: #444; width: 200px; }
select { border: 1px solid #ccc; padding: 2px; font-size: 1.2em; color: #444; }
input[type="submit"] { font-size: 1.0em; }

/* MISC  
----------------------------------------------------------*/
.clear { clear: both; }
.error { color: Red; }
div#title { display: block; float: left; text-align: left; }
#section-description { margin: 0 0 20px 0; }

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error { color: #FF3300; }
.field-validation-valid { display: none; }
.input-validation-error { border: 1px solid #FF3300 !important; background-color: #ffeeee !important; }
.validation-summary-errors { font-weight: bold; color: #FF3300; }
.validation-summary-errors li { list-style-type: none; }
.validation-summary-valid { display: none; }

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, .editor-label { margin: 0.5em 0 0 0; }
.display-field, .editor-field { margin: 0.5em 0 0 0; }
.text-box { width: 30em; }
.text-box.multi-line { height: 6.5em; }
.tri-state { width: 6em; }

/* Styles messages
-----------------------------------------------------------*/
#FavStatus { color: Red; }

/* Styles for Grid Loaders
-----------------------------------------------------------*/
.report-grid-loader { display: none; position: absolute; z-index: 1000; opacity: 0.5; filter: alpha(opacity=50); background: #fff url('themes/base/images/loading.gif') no-repeat center center; }

/* Styles for sprites
----------------------------------------------------------*/
.companyAccessItem { float: left; margin: 3px 0px; white-space: nowrap; width: 330px; }

/* Report details
-----------------------------------------------------------*/
.inline-form { display: inline; margin: 0; padding: 0; }
h2#report-heading { margin: 0 0 10px 0; padding: 0 0 0 0; font-weight: normal; }
h2#report-heading span.prefix { font-weight: bold; }
#ReportGrid_contextMenu { width: 650px; }
#ReportGrid_contextMenu ul { min-height: 100px; }
#ReportGrid_contextMenu ul li { float: left; width: 210px; }
#downloadFile-container { width: 100%; margin: auto 0px; }
#export-loader img, #crystal-loader img, #WebStats-Loader img { margin: 95px auto 0 auto; width: 64px; height: 64px; display: block; }
#export-loader div, #crystal-loader div, #WebStats-Loader div { text-align: center; width: 100%; margin: 20px 0 0 0; }
#ExportData-helper { margin: 15px 0 0 100px; }

/* Styles for report form fieldset
----------------------------------------------------------*/
.ReportOptionsPanel { border: 1px solid #ddd; padding: 0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; -webkit-border-radius: 4px; border-radius: 4px; }
div#export-dataform .editor-label { margin-left: 45px; }
div#export-dataform .editor-label, div#export-dataform .editor-field { margin-top: 1.1em; }
form#NewTicketForm .editor-field { margin-bottom: 1.5em; }

/* Styles for User state location form fieldset
    ----------------------------------------------------------*/
.UserStateLocationPanel { border: 1px solid #ddd; margin: 0 0 1.5em 0; -webkit-border-radius: 4px; border-radius: 4px; padding: 3px 0 10px 0; }

.ProcessStepStatusPanel { border: 1px solid #ddd; padding: 0 .4em .4em .4em; margin: 0 0 1.5em 0; -webkit-border-radius: 4px; border-radius: 4px; }

@media (max-width: 900px) {
  .UserStateLocationPanel { border: 1px solid #ddd; margin: 0 0 1.5em 0; -webkit-border-radius: 4px; border-radius: 4px; }
}
/* Generic context menu styles (grid row)
----------------------------------------------------------*/
.contextMenu { position: absolute; width: 150px; z-index: 99999; border: solid 1px #CCC; background: #EEE; padding: 0px; margin: 0px; display: none; }
.contextMenu LI { list-style: none; padding: 0px; margin: 0px; }
.contextMenu A { color: #333; text-decoration: none; display: block; line-height: 20px; height: 20px; background-position: 6px center; background-repeat: no-repeat; outline: none; padding: 1px 5px; padding-left: 28px; }
.contextMenu LI.hover A { color: #FFF; background-color: #3399FF; }
.contextMenu LI.disabled A { color: #AAA; cursor: default; }
.contextMenu LI.hover.disabled A { background-color: transparent; }
.contextMenu LI.separator { border-top: solid 1px #CCC; }

/* Customisations by Stu
----------------------------------------------------------*/
/*a.t-button:hover { color: #000; background-position: 0 -570px; }
html body .t-header { background: url("2012.3.1018/Vista/sprite.png") repeat-x scroll 0 -560px #D1D1D1; }
html body .t-grid-header { background: url("2012.3.1018/Vista/sprite.png") repeat-x scroll 0 -560px #D1D1D1; }
html body .t-grouping-header { background-color: #808080; color: #fff; padding-left: 15px; }
html body .t-grid-bottom, html body .t-toolbar, html body .t-grid-pager, html body .t-status { background: #F8F8F8; }
.t-grid-pager { padding: .2em .6em 0 .6em !important; }
textarea.t-input { font-size: 12px; }*/

/* Reporting
----------------------------------------------------------*/

#Reports-Wrapper div.title { font-size: 18px; font-weight: bold; height: 32px; line-height: 32px; white-space: nowrap; }
#Reports-Wrapper span.icon { background-image: url("themes/base/images/grayview-sprite.png"); width: 32px; height: 32px; display: inline-block; float: left; }

#Favourites-Container { float: left; margin-right: 40px; width: 200px; }
#Favourites-Container span.icon { background-position: -16px 0; margin-right: 5px; }
#StockReports-Container { float: left; margin-right: 40px; width: 200px; }
#StockReports-Container span.icon { background-position: -16px -32px; margin-right: 10px; }
#SalesReports-Container { float: left; width: 200px; }
#SalesReports-Container span.icon { background-position: -16px -64px; margin-right: 10px; }

#Reports-Wrapper ul.ReportGroup { margin:0; padding: 0; }
#Reports-Wrapper ul.ReportGroup li { list-style-type: none; margin: 20px 0; }
#Reports-Wrapper ul.ReportGroup li div.title-wrapper { height: 20px; line-height: 20px; }
#Reports-Wrapper ul.ReportGroup li a.title { margin: 0; padding: 0; float: left; height: 20px; line-height: 20px; text-decoration: none; font-weight: bold; color: #545454; font-size: 13px; }
#Reports-Wrapper ul.ReportGroup li a.title:hover { text-decoration: underline; }
span.fav-icon { background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; background-position: 0 -64px; margin-left: 5px; margin-top: 2px; float: left; opacity: 0.8; }
span.favourite {  background-position: 0 -96px; }
span.new-tab-icon { background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; background-position: 0 -80px; margin-top: 3px; float: left; margin-left: 3px; opacity: 0.8; }
a:hover span { opacity: 1; }

#Favourites-Container #fav-reports ul { margin:0; padding: 0 0 0 5px; }
#Favourites-Container #fav-reports ul li { list-style-type: none; margin-top: 15px; }
#Favourites-Container #fav-reports ul li a { margin: 0; padding: 0; height: 20px; line-height: 20px; text-decoration: none; font-weight: bold; color: #545454; font-size: 13px; }
#Favourites-Container #fav-reports ul li a:hover { text-decoration: underline; }
span.favgroup-icon { background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; background-position: -16px -96px; margin-right: 5px; margin-top: 2px; float: left; opacity: 0.6; }

.tooltip { cursor: pointer; }

a#ReportOptionsToggle { line-height: 16px; height: 16px; display: block; font-weight: bold; text-decoration: none; }
a#ReportOptionsToggle span.icon { float: right; background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; margin-left: 5px; }
a#ReportOptionsToggle span.show { background-position: -32px -96px; }
a#ReportOptionsToggle span.hide { background-position: -32px -112px; }

div#togglePanelPrefLocation  { line-height: 16px; height: 16px; display: block; font-weight: bold; text-decoration: none; }
div#togglePanelPrefLocation  span.icon { float: right; background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; margin-left: 5px; }
div#togglePanelPrefLocation  span.show { background-position: -32px -96px; }
div#togglePanelPrefLocation  span.hideicon { background-position: -32px -112px; }

a#dvProcessStepStatusMain { line-height: 16px; height: 16px; display: block; font-weight: bold; text-decoration: none; }
a#dvProcessStepStatusMain span.icon { float: right; background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; margin-left: 5px; }
a#dvProcessStepStatusMain span.show { background-position: -32px -96px; }
a#dvProcessStepStatusMain span.hideicon { background-position: -32px -112px; }

a.reports-back { background-color: #3E3E3E; color: #ffffff; text-transform: uppercase; display: inline-block; vertical-align: middle; margin: 0; padding: 0 7px 0 4px; line-height: 25px; text-align: center; cursor: pointer; box-sizing: border-box; height: 25px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
a.reports-back span.icon { float: left; background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; margin: 5px 1px 0 0; background-position: 0px -128px; }
a.reports-back:hover { text-decoration: none; }

a.exportLink { background-color: #39B54A; color: #ffffff; text-transform: uppercase; display: inline-block; vertical-align: middle; margin: 0; padding: 0 7px 0 4px; line-height: 25px; text-align: center; cursor: pointer; box-sizing: border-box; height: 25px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
a.exportLink span.icon { float: left; background-image: url("themes/base/images/grayview-sprite.png"); width: 16px; height: 16px; display: inline-block; margin: 5px 4px 0 4px; background-position: 0px -112px; }
a.exportLink:hover { text-decoration: none; }

a.statsTooltip { float: right;}
a.statsTooltip img { display: inline-block; margin-left: 15px; margin-top: 3px;}

#DetailForm .k-widget.k-tooltip-validation { position: absolute; margin-left: 5px; }

/* Messaging
----------------------------------------------------------*/
#toggle-view { list-style: none; font-family: arial; font-size: 11px; margin: 0; padding: 0; width: 100%; }
#toggle-view li { margin: 10px 10px 20px 10px; border-bottom: 1px solid #ccc; position: relative; /*width: 100%;*/ }
#toggle-view h4 { margin: 0; cursor: pointer; background-color: #f9f9f9; }
#toggle-view span { position: absolute; right: 5px; top: 0; color: #ccc; font-size: 15px; font-weight: bold; }
#toggle-view .panel { margin: 5px 0; display: none; }

ul.attachments-container { margin: 10px 0 0 0; padding: 0; list-style: none; }
ul.attachments-container li { border: none !important; float: left; margin: 0 20px 0 0 !important; width: auto !important; height: 20px; }
ul.attachments-container li img { display: inline-block; margin-right: 5px; }
ul.attachments-container li a { height: 20px; line-height: 20px; vertical-align: top; display: inline-block; }

#imgPreviewWithStyles { background: #ccc; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 10px; z-index: 99999; border: none; }
#imgPreviewWithStyles span { color: #333; text-align: center; display: block; padding: 5px 0 3px 0; }


/* User Management
----------------------------------------------------------*/
#generate-password { margin: 1.5em 0 0 0; }
#UsersTreeView > ul > li { float: left; width: 275px; }
#UsersTreeView > ul > li > div > span > input { display: none; }

#companyAccess #SelectedCompanies ul { width: 1100px; }
#companyAccess #SelectedCompanies ul li { width: 340px; float: left; }

/* Help
----------------------------------------------------------*/
#contentitems-pane { margin: 10px; }
#content-pane { margin: 10px; }
#contentitems-title { font-size: 24px; font-weight: normal; display: block; top: 67px; margin: 0 20px 10px 0; }

#contentitems-pane ul li.t-item { padding: 0; }
#contentitems-pane ul li ul { padding-left: 15px; }
#contentitems-pane .t-minus { background-image: url('/content/themes/base/images/dir_open.gif'); background-position: 0 0; margin-left: 0; }
#contentitems-pane .t-plus { background-image: url('/content/themes/base/images/dir.gif'); background-position: 0 0; margin-left: 0; }
#contentitems-pane .t-in { padding-left: 0px; }

/* Validation
----------------------------------------------------------*/
#loginwindow-container { margin: 15px; }
#loginwindow-container ul { margin: 0; padding: 0;}
#loginwindow-container ul li { margin: 0; padding: 0; list-style: none; color: #333; }

/* Lotting Info
----------------------------------------------------------*/
.lottinginfo-container { color: #333; width: 280px; padding: 8px;  }
.lottinginfo-container .title { margin-bottom: 5px; font-size: 1.2em; text-align: center; font-weight: bold; }
.lottinginfo-container dl { margin: 0; padding: 0; clear: both; }
.lottinginfo-container dl dd { margin: 0 15px 0 0; padding: 0; float: left; font-weight: normal; width: 170px; text-align: right;  }
.lottinginfo-container dl dt { margin: 0; padding: 0; float: left; }

/* Password Sent Success/Failure message */
#messagewindow-container { margin: 15px; }

/* Company Settings
----------------------------------------------------------*/
#CompanyExtensions .SettingHeader span { display: inline-block; width: 150px; padding: 0 10px; font-weight: bold; }
#CompanyExtensions .SettingHeader span.ValueHeader { width: 250px; }
#CompanyExtensions .ExtensionItem span { display: inline-block; width: 150px; padding: 2px 10px;  }
#CompanyExtensions .ExtensionItem span.SettingValue { width: 250px; }
#CompanyExtensions .SettingFooter { margin: 10px 0px; }

/* Kendo Modifications
----------------------------------------------------------*/
.k-link, .k-button { text-decoration: none !important; }
a.k-button { height: 25px; }
ul.k-pager-numbers { line-height: 2em; }
.k-chart-tooltip { z-index: 99999 !important; }

/* Collection Request Form
----------------------------------------------------------*/
.watermark { color: #999 !important; font-weight: normal; font-style: italic; }
#NewCollectionRequestForm fieldset, #NewCarrierForm fieldset { padding: 10px; }
#NewCollectionRequestForm fieldset legend, #collectionrequestdetails-container fieldset legend, #NewCarrierForm fieldset legend { text-indent: -9999px; margin: 0; padding:0; width: 0; }
#NewCollectionRequestForm div, #NewCarrierForm div { margin: 10px 0; }
#NewCollectionRequestForm div.questionseperator, #NewCarrierForm div.questionseperator { margin: 20px 0 5px 0; }
#NewCollectionRequestForm label, #NewCarrierForm label { display: inline-block; font-weight: bold; width: 175px; white-space: nowrap; margin-right: 10px; } 
#NewCollectionRequestForm label:after, #NewCarrierForm label:after { content: ": " }
#NewCollectionRequestForm span.attachment-desc-label { display: inline-block; margin: 3px  0px 3px 20px; }
#collectionrequestdetails-container label { display: inline-block; font-weight: bold; min-width: 155px; margin-right: 5px; white-space: nowrap; }
#collectionrequestdetails-container div.subheading { font-weight: bold; font-size: 110%; }
#collectionrequestdetails-container div { margin: 10px 0; }
#collectionrequestdetails-container div.questionseperator { margin: 20px 0 5px 0; }
#collectionrequestdetails-container div.contact { display:inline-block;margin-left:25px;vertical-align:top; }
#collectionrequestdetails-container label:after { content: ": " }
#collectionrequestdetails-container .attachments-container { display: inline-block; vertical-align: bottom; }
#collectionrequestdetails-container span.quoteAcceptedContainer { display: block; margin:10px 0;  }
#collectionrequestdetails-container span.quoteAcceptedContainer span { font-size: 110%; display: inline-block; margin-left: 5px; margin-right: 15px; font-weight: bold; }
#collectionrequestdetails-container span.quoteAcceptedContainer span.accept { color:#006400 }
#collectionrequestdetails-container span.quoteAcceptedContainer span.reject { color:#ff1100 }
#NewCollectionRequestForm div.commandButtons, #CollectionRequestForm div.commandButtons, #EmailCollectionRequestForm div.commandButtons, #NewCarrierForm div.commandButtons { width: 100%; text-align: center; margin: 30px auto 10px auto; }
#NewCollectionRequestForm div.commandButtons button, #CollectionRequestForm div.commandButtons button, #NewCollectionRequestForm div.commandButtons a, #CollectionRequestForm div.commandButtons a, #NewCarrierForm div.commandButtons a { margin-right: 20px; }
#emailcollectionrequest-container { margin: 8px;}
#emailcollectionrequest-container label { display: inline-block; font-weight: bold; min-width: 100px; margin-right: 5px; white-space: nowrap; }
#emailcollectionrequest-container label:after { content: ": " }
#emailcollectionrequest-container div.questionseperator { margin: 20px 0 5px 0; }
#emailcollectionrequest-container .field-validation-error { display: inline-block; margin-left: 110px; }
#emailcollectionrequest-container .attachement-label { display: inline-block; margin: 0 5px; }
.editor-field .t-input { font-size: 12px; margin-top: 0px;}
#RunReport { vertical-align: bottom; }


/* HRS Forms
----------------------------------------------------------*/

#hrs-form div.header { display: inline-block; font-weight: bold; margin-right: 5px; white-space: nowrap;font-size: 14px; }
#hrs-form label { display: inline-block; font-weight: bold; min-width: 140px; margin: 0 5px; white-space: nowrap; }
#hrs-form div.field-container, #itemAddWindow-content div.field-container { margin: 5px 0; }
#hrs-form div.questionseperator, #itemAddWindow-content div.questionseperator { margin: 20px 0 5px 0; }
#hrs-form label:after, #itemAddWindow-content label:after { content: ": " }
#itemAddWindow-content label { display: inline-block; font-weight: bold; min-width: 75px; margin-right: 5px; white-space: nowrap; }

#hrs-form .k-widget.k-tooltip-validation { position: absolute; margin-left: 5px; }

/*
#pieditwindow-content div.header { display: inline-block; font-weight: bold; margin-right: 5px; white-space: nowrap;font-size: 14px; }
#pieditwindow-content label { display: inline-block; font-weight: bold; min-width: 140px; margin: 0 5px; white-space: nowrap; }

#pieditwindow-content div.field-container, #itemAddWindow-content div.field-container { margin: 5px 0; }
#pieditwindow-content div.questionseperator, #itemAddWindow-content div.questionseperator { margin: 20px 0 5px 0; }
#pieditwindow-content label:after, #itemAddWindow-content label:after { content: ": " }

#itemAddWindow-content label { display: inline-block; font-weight: bold; min-width: 75px; margin-right: 5px; white-space: nowrap; }
*/

div.item-template {
    margin: 3px;
}

div.item-template span.label {
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
    min-width: 100px;
}

div.item-template span.col1 {
    display: inline-block;
    min-width: 400px;
}

div.item-template span.col2 {
    display: block;
    min-width: 100px;
}

span.nodropdown { background-color: #fff; }
span.nodropdown > span.k-dropdown-wrap { padding-right: 2px; }
span.nodropdown span.k-select { display: none; }

/*header control - state location selector related styles*/
.top-5 {margin-top: 5px;}
.top-7 {margin-top: 7px;}
.txt-14 {font-size: 14px;}
#modal-mask {
        background-color: #333;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        position: fixed;
        z-index: 2000;
        opacity: 0.5;
    }
    .ajax_response {
        padding: 9px 20px;
        border: 0;
        display: inline-block;
        margin-top: 0px;
        cursor: pointer;
        color: #555;
    }

    #success_message {
        background: #CCF5CC;
    }

    #error_message {
        background: #F3A6A6;
    }
    #togglePanelPrefLocation {
        float: right;
        margin-top: 10px;
        cursor: pointer;
    }

/* Automative - Manual */
#ManualVinLookUpForm input[type="text"].manual_receiving { width: 100%;}
#ManualVinLookUpForm input[type="password"].manual_receiving_vin {
    width: 100%;
}

#datatab_processing {
    border:none;
}
.rmsVinLookupVendorError {
    display: inline-block;
}
.reportLoader {
    border: 16px solid #f3f3f3; 
    border-top: 16px solid #DA3937; 
    border-radius: 50%;
    width: 85px;
    height: 85px;
    animation: spin 2s linear infinite;
    text-align: center;
}

.blackTable {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.blackTable td, .blackTable th {
    border: 1px solid #ddd;
    padding: 8px;
}

.blackTable tr:nth-child(even) {
    background-color: #f2f2f2;
}

.blackTable tr:hover {
    background-color: #ddd;
}

.blackTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: black;
    color: white;
}

/*  grayview vendor report */

.vendorReportCollapsible {
    background-color: #b89494;
    color: #333333;
    cursor: pointer;
    padding: 18px;
    width: 500px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 22px;
    margin-top: 10px;
}
    .vendorReportActive, .vendorReportCollapsible:hover {
        background-color: #c58787;
    }

.vendorReportCollapsible:after {
    content: '\002B';
    color: #333333;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.vendorReportActive:after {
    content: "\2212";
}
.vendorReportContent {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

    .vendorReportContent.vendorReportSaleSummary {
        margin: 0px;
        width: 500px;
        border: 1px solid #333;
        border-width: 1px 1px 1px 1px;
        padding: 0;
        border-color: gray;
    }

.vendorReportSaleSummaryContainer {
    margin: 0px;
}

@media print {
    .saleSummaryDetails, .saleSummaryDetails h3, .saleSummaryDetailsNums, .chartjs-render-monitor {
        width: 240px !important;
    }
    .vendorReportPrintBtn, .vendorReportCollapsible:after {
        display: none !important;
    }
    button.vendorReportCollapsible {
        border: 1px solid grey !important;
        border-width: 1px 1px 0 1px !important;
    }
}