/**********************************************
      CTS Custom CSS (General/All Pages)
**********************************************/

.datetooltip + .tooltip > .tooltip-inner,
.htmltooltip + .tooltip > .tooltip-inner {
    max-width: none;
}

/* additional info (hidden by default) */
.addlinfo {
    display: none;
}

hr.no-margin {
    margin: 0px;
}

/* This controls the general settings for all left side panels in the site (Filter, Export, etc.) */
.leftpanel {
    float: left;
    width: 300px;
    min-width: 245px;
    max-width: 350px;
    margin-right: 10px;
}


/* This controls the general settings for left side panels needing wider space */
.leftpanel-wide {
    float: left;
    width: 450px;
    margin-right: 10px;
}

/* This controls the general settings for all dashboard content in the site */
.dashboardcontent {
    position: relative;
    overflow: hidden;
}
/* Enlarge default label size on horizontal flot charts */
#horizonal-chart .tickLabel {
    /*font-size: 140%; */
    font-size: 13px;
}

/* The order and ticket information pages containers*/
.panel-container {
    float: left;
    min-width: 256px;
    width: 100%;
    max-width: 100%;
}

/* the header for the above containers */
.panel-header {
    min-width: 256px;
    max-width: 100%;
}

/* the body of the above containers */
.panel-body {
    min-width: 256px;
    max-width: 100%;
}

/* the left side (labels) for the data in the above containers */
.panel-body-left-col, .panel-body-left-col > label {
    float: left;
    font-weight: bold;
    text-align: left;
    width: 49%;
    max-width: 49%;
    min-width: 128px;
}

/* the right side (data) for the data in the above containers */
.panel-body-right-col {
    float: right;
    text-align: left;
    width: 49%;
    max-width: 49%;
    min-width: 128px;
}

/* a static sized row for the right and left columns above to sit in to keep them from moving above/below eachother */
.panel-row {
    min-width: 256px;
    min-height: 20px;
}

    /* gives a hilight color to rows the mouse is over that helps the user visually trace from the label to the data */
    .panel-row:hover {
        background-color: #c3c3c3;
    }

/* This replaces the inline spacers that were used in the old site template */
.spacer5px {
    height: 5px;
}

/* This replaces the inline spacers that were used in the old site template */
.spacer10px {
    height: 10px;
}

/* This replaces the inline spacers that were used in the old site template */
.spacer20px {
    height: 20px;
}

/* This replaces the inline spacers that were used in the old site template */
.spacer50px {
    height: 50px;
}

/* right align text */
.txtAlignRight {
    text-align: right;
}

/* left align text */
.txtAlignLeft {
    text-align: left;
}

/* controls the Order Reroute and Transfer popups */
.popupform {
    width: 400px;
    padding: 10px;
}

/* This is meant for horizontally centering one or more things using a div with this class */
.center {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* only used for the origin tanks page as of 04/07/2016 */
.dual-grid-horizontal {
    width: 49%;
    display: inline-block;
}

/* only used for the two rate sheet pages as of 04/07/2016 */
.dual-grid-vertical {
    height: 49%;
}

/* just adds display:inline-block to the element it's used on */
.inline-block {
    display: inline-block;
}

/* just adds margin:20px; to the element it's used on (mostly just useful for float-left div blocks) */
.margin-right20px {
    margin-right: 20px;
}

/* adds 10px margin on top and bottom*/
.margin-top-bottom-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* adds 5px margin to left and right */
.margin-left-right-5px {
    margin-left: 5px;
    margin-right: 5px;
}

/* just adds padding:20px; to the element it's used on (mostly just useful for text align-left elements) */
.padding-right20px {
    padding-right: 20px;
}

/* Adds 15px padding on left and right */
.padding-left-right15px {
    padding-left: 15px;
    padding-right: 15px;
}

/* Adds 10px padding on left and right */
.padding-left-right10px {
    padding-left: 10px;
    padding-right: 10px;
}

/* Adds 5px padding on left and right */
.padding-left-right5px {
    padding-left: 5px;
    padding-right: 5px;
}

/* Adds 3px padding on left and right */
.padding-left-right5px {
    padding-left: 3px;
    padding-right: 3px;
}

/* Adds 10px padding on top and bottom */
.padding-top-bottom-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* used for reject buttons, etc. */
.btn-black {
    color: #fff;
    background-color: #000 !important;
    border-color: #000;
}

    .btn-black:hover {
        background-color: #555 !important;
        border-color: #000;
        color: #fff;
    }

/* Red highlighting for H2S wells (added back 8/1/16) */
.H2S {
    background-color: Red !important;
    color: White !important;
}

/*classes created by jquery
Note:  !important is necessary so the color stays when the row is selected.
*/
.js-hasWarning
{
    background-color: #f4b400 !important;
}

.js-hasError {
    background-color: red !important;
}
.js-hasManual {
    background-color: olive !important;
}
/* end classes */

.hasError {
    background-color: red !important;
    color: White !important;
}


.hasWarning {
    background-color: #f4b400 !important;
    color: White !important;
}

table.padded td {
    padding: 4px;
}

/* upper right badge */
.badge-upper-right {
    position: absolute;
    top: -5px;
    right: -5px;
}

.needsSave {
    border-right: 6px solid #f4b400;
}

.dirty {
    background-color: #f4b400;
    padding: 3px;
}

.overflow-x-scroll {
    overflow-x: scroll;
}

.overflow-y-scroll {
    overflow-y: scroll;
}

.overflow-xy-scroll {
    overflow-x: scroll;
    overflow-y: scroll;
}

.height100 {
    height: 100%;
}

.height300px {
    height: 300px;
}
.height350px {
    height: 350px;
}
.height400px {
    height: 400px;
}
.height600px {
    height: 600px;
}

.width100 {
    width: 100%;
}

.width80 {
    width: 80%;
}

.width100px {
    width: 100px;
}

.width50px {
    width: 50px;
}

.width80px {
    width: 80px;
}

.width90px {
    width: 90px;
}

.width200px {
    width: 200px;
}

.width250px {
    width: 250px;
}

.width300px {
    width: 300px;
}

.width500px {
    width: 500px;
}

.width600px {
    width: 600px;
}

table.form-layout td {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* used to contain buttons for navigation on tabbed pages with sub pages (used with "well" class so it overrides some of those settings) */
.speedButtonContainer {
    margin-bottom: 10px !important;
    padding: 5px !important;
    min-height: 42px;
}

/* Used mostly in grids where the data is frequently longer than is practical for a default column length.  The ellipsis lets users know there is more/hidden data.  */
.showEllipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* super select (select with HTML content) */
.superselect {
    width: 100%;
    max-height: 500px; /* regular select box seems to default to about 400px*/
    overflow-y: scroll;
    overflow-x: hidden
}

/* big text for highlighting numbers */
.bigOleNumber {
    font-size: 28px;
    font-weight: bold;
}

/* color convention for manual or financial overrides.  It needs !important because of :hover overriding it to an unreadable state otherwise */
.manual {
    color: White !important;
    background-color: Olive !important;
}

.topalign {
    vertical-align: top;
}

/* 
    Adds a red required star before the element generated by LabelFor() 
    Usage: @Html.LabelFor(model => model.Description, new { @class = "required-field-indicator" })
*/
.required-field-indicator::before {
    content: "* ";
    color: red;
}

/* This centers a Bootstrap column (usage: class="col-lg-2 col-centered" */
.col-centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/************************************************************/
/**************** WEB FORMS CARRYOVER ***********************/
/************************************************************/

#gridArea {
    /* For grids on page with a (left) sidebar */
    overflow: auto;
    height: 100%;
}

.style1 {
    min-width: 450px;
}

.NullValidator {
    color: Red;
}

.checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

label.Entry {
    display: block;
}

div.Entry {
    padding-bottom: 5px;
}

.floatLeft-date-row {
    float: left;
}

.floatRight-date-row {
    float: right;
}

.Columns3 {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

.clear {
    clear: both;
}

.paragraph:not(:first-child) {
    margin-top: 10px;
}

.dclookdisabled {
    opacity: .6;
}

.movable {
    cursor: move
}

.wideTooltip + .tooltip > .tooltip-inner {
  max-width: 350px;
}