@import url("mdx-icons-12bc8543deb7f549c0231d83886b3c3c.css");

body {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #eee;
    background: url('../img/grey-jean-background-a8e8ac8ce03f6b86d5a76b10666c4e9a.jpg');
    background-repeat: repeat;
}

#footer {
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}
th {
    background-color: #eee;
    font-weight: bold;
}
th,td {
    border: 0.125em solid #333;
    line-height: 1.5;
    padding: 0.75em;
    text-align: left;
    width:5%;
}

.blue-background {
    background-color: skyblue;
}

.msgSuccess {
    color: #006F66;
}
.msgError {
    color: red;
}

.msg-block {
    display: inline-block;
    padding: 10px;
}

.msg-block.danger {
    /* From Bootstrap btn-* CSS */
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.msg-block.warning {
    /* From Bootstrap btn-* CSS */
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.msg-block.info {
    /* From Bootstrap btn-* CSS */
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.msg-block.success {
    /* From Bootstrap btn-* CSS */
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.msg-block.primary {
    /* From Bootstrap btn-* CSS */
    color: #fff;
    background-color: #005447;
    border-color: #003b31;
}

.text-white {
    color: white;
}

/* Make disabled form fields look like labels */
form .form-control[disabled],
form .form-control[readonly]:not(input[name=attachmentList]),
form fieldset[disabled] .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    color: black;
}

.input-group .yes,
.input-group .Yes,
.input-group .YES {
    color: #5cb85c;
}
.input-group .yes:before,
.input-group .Yes:before,
.input-group .YES:before {
    content: url('/mdx/resources/img/green_ok_18x18-5fb6c222f4658754c9040c5868cbda74.png');
    padding-right: 5px;
}

.input-group .no,
.input-group .No,
.input-group .NO {
    color: #EB0000;
}
.input-group .no:before,
.input-group .No:before,
.input-group .NO:before {
    content: url('/mdx/resources/img/red_no_18x18-ab30fe0309d5e210f09fecb4e7847831.png');
    padding-right: 5px;
}

.input-group .color {
    display: inline-block;
    width: .75em;
    height: .75em;
    border: 1px solid #797979;
}
.input-group .color.White,
.input-group .color.white {
    background-color: white;
}
.input-group .color.Beige,
.input-group .color.beige {
    background-color: beige;
}
.input-group .color.Black,
.input-group .color.black {
    background-color: black;
}
.input-group .color.Blue,
.input-group .color.blue {
    background-color: blue;
}
.input-group .color.Green,
.input-group .color.green {
    background-color: green;
}
.input-group .color.Grey,
.input-group .color.grey {
    background-color: grey;
}
.input-group .color.Light.Blue,
.input-group .color.Light.blue {
    background-color: lightblue;
}
.input-group .color.Orange,
.input-group .color.orange{
    background-color: orange;
}
.input-group .color.Pink,
.input-group .color.pink {
    background-color: pink;
}
.input-group .color.Purple,
.input-group .color.purple {
    background-color: purple;
}
.input-group .color.Red,
.input-group .color.red {
    background-color: red;
}
.input-group .color.Yellow
.input-group .color.yellow {
    background-color: yellow;
}
.input-group .color.Other,
.input-group .color.other {
    display: none;
}


/*** Bootstrap overrides ***/
/* navbar */
.navbar-default {
    background-color: #ffffff;
}

.container-fluid {
    background-color: #ffffff;
}

/* Logo is offset 15px from left and top because Bootstrap is expecting text */
a.navbar-brand {
    /*padding: initial;*/
    padding-top: 0px;
    padding-left: 0px;
}
/* Logo's edges are sharp but navbar's corners are rounded */
a.navbar-brand img {
    /* height: 100%; */
}

.sapItemDeleteButton {
    cursor: pointer;
}

/* Bootstrap nicely handles removing the form group's right padding on input-groups so validation icons
    aren't pushed way to the right, but not so good about it with other controls in form-groups
*/
.has-feedback.form-group {
    padding-right: 0;
}
.form-control-feedback {
    position: static; /* because IE11 can't handle standards */
    right: auto;
    top: auto;

    position: initial;
    right: initial;
    top: initial;
    display: inline;
    padding-left: 20px;
}
/* When a form input field has both an input-group and a form-control-feedback validation icon, the icon
    is inappropriately pushed down 25px instead of being right-centered in the input field
*/
/*.has-feedback .input-group label~.form-control-feedback.glyphicon {
    top: 0;
}*/
/* When a dropdown has a form-control-feedback icon, the icon is not adjusted to the left to accomodate
    the dropdown symbol
*/
/*.has-feedback select~span.glyphicon {
    margin-right: .5em;
}*/
/* Vertically center the contents of checkbox-only field groups */
.form-group.has-checkbox {
    margin-top: 2%;
}
/* Give radio-group-only field groups the same height as other groups */
.form-group.has-radio {
    padding-bottom: 8px;
}
/* Add some space between radio buttons and their labels
*/
.input-group input[type=radio] {
    margin-right: 4px;
}
/* Add some space between radio button groups
*/
.input-group input[type=radio] + label {
    margin-right: 1em;
}

/* Bootstrap offsets label text within the label element via padding and reduces the font size to 75% for an overall
 * lopsided effect.
 */
.label {
    padding: .2em .6em .2em;
    font-size: 0.9em;
}

.form-control {
    color: black;
}

label.display-input-group::before {
    content: ' ';
    clear: right;
    display: block;
}

.spacer10 {
    margin-top: 10px;
}

.vertical-line {
    background-color: lightgrey;
    border: 1px solid lightgrey;
    border-radius: 2px;
    height: 100%;
    margin-left: 15px;
    margin-right: 15px;
}

/*
Styling the file upload "widgets"
*/
/* Make the Browse... button stay in line with the attachment input field so adding a validation error doesn't knock the two out of alignment */
div[name=requestAttachmentsAdd] .input-group-btn {
    vertical-align: top;
}

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}
input[readonly] {
    background-color: white !important;
    cursor: text !important;
}

/* Bootstrap does not supply radio groups with the same height as other components. If you have two radio groups of the same width adjacent to each other that should be pushed to different rows, the second group will be on the second row but offset to the same place the first group is. */
.form-group.radio-group {
    padding-bottom: 8px;
}

.comment-history .list-group-item {
    padding: inherit;
}
.comment-history .list-group-item>div {
    background-color: rgb(238, 238, 238);
}

.comment-history .list-group-item-heading {
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom: 2px solid transparent;
    background-color: white;
    -moz-box-shadow: 0 1px 4px #A7A7A7;
    -webkit-box-shadow: 0 1px 4px #A7A7A7;
    box-shadow: 0 1px 4px #A7A7A7;
}

pre {
    white-space: pre-wrap;
    word-break: keep-all;
}
.comment-history .list-group-item-text {
    background-color: rgb(238, 238, 238);
    padding-left: 10px;
    color: rgba(0, 0, 0, 0.50);
    -webkit-text-shadow:1px 1px 0px white; /* Chrome */
    -moz-text-shadow:1px 1px 0px white; /* Firefox */
    -o-text-shadow:1px 1px 0px white; /* Opera */
    -ms-text-shadow:1px 1px 0px white; /* IE 9+ */
    -khtml-text-shadow:1px 1px 0px white; /* Gecko-based browsers */
    -text-shadow: 1px 1px 0px white;
    text-shadow: 1px 1px 0px white;
}


/*** Bootstrap Multiselect overrides ***/
/* When Bootstrap Multiselect is used on a select element, it generates a button that LOOKS like a dropdown. However,
    Bootstrap button text explicitly does not wrap, so the "dropdown" never respects its container's size. The
    Bootstrap Multiselect component displays up to three "values" as button text before collapsing into generic text,
    so on smaller screens the "dropdown" overlaps whatever's to the right of it.

    This hack makes the Bootstrap Multiselect "dropdown" wrap its text so that it respects its container's max width.
*/
.multiselect .multiselect-selected-text {
    white-space: normal;
}

/* This hack makes the button fill its container */
.hide-native-select .btn-group, .hide-native-select .btn-group button, .multiselect-parent {
    width: 100%;
}

button.multiselect {
    text-align: left;
}

/* Fun checkbox/radio button customizations */
input[type=radio].mdx-pretty {
    margin-right: 4px;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.input-group label:first-of-type {
    margin-left: 0px;
}
/*input[type=radio].mdx-pretty,
input[type=checkbox].mdx-pretty {
    width: 20px;
    height: 20px;
}
input[type=radio].mdx-pretty {
    opacity: 0;
    position: absolute;
}
input[type=checkbox].mdx-pretty {
    position: relative;
    top: 5px;
}

input[type=radio].mdx-pretty + label,
input[type=checkbox].mdx-pretty + label {
    font-weight: normal;
}

input[type=checkbox].mdx-pretty + label:before,
input[type=radio].mdx-pretty + label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

input[type=checkbox].mdx-pretty:checked + label:before,
input[type=radio].mdx-pretty:checked + label:before {
    background: #006e65;
    box-shadow: inset 0px 0px 0px 4px #fff;
}

input[type=radio].mdx-pretty + label:before {
    border-radius: 50%;
}

input[type=checkbox].mdx-pretty:focus + label,
input[type=radio].mdx-pretty:focus + label {
    outline: 1px solid #ddd; !*!* focus style *!*!
}

input[type="radio"][disabled].mdx-pretty + label,
input[type="checkbox"][disabled].mdx-pretty + label,
input[type="radio"].mdx-pretty.disabled + label,
input[type="checkbox"].mdx-pretty.disabled + label,
fieldset[disabled] input[type="radio"].mdx-pretty + label,
fieldset[disabled] input[type="checkbox"].mdx-pretty + label {
    opacity: .55;
}*/

.input-group {
    width: 100%;
}

.dropdown-color,
.dropdown-color  label {
    color: white;
}
.dropdown-color.beige,
.dropdown-color.Beige,
.dropdown-color.beige label,
.dropdown-color.Beige label {
    background-color: beige;
    color: black;
}
.dropdown-color.black,
.dropdown-color.Black,
.dropdown-color.black label,
.dropdown-color.Black label {
    background-color: black;
    color: white;
}
.dropdown-color.blue,
.dropdown-color.Blue,
.dropdown-color.blue label,
.dropdown-color.Blue label{
    background-color: blue;
}
.dropdown-color.green,
.dropdown-color.Green,
.dropdown-color.green label,
.dropdown-color.Green label {
    background-color: green;
}
.dropdown-color.grey,
.dropdown-color.Grey,
.dropdown-color.grey label,
.dropdown-color.Grey label {
    background-color: grey;
}
.dropdown-color.light.blue,
.dropdown-color.Light.Blue,
.dropdown-color.light.blue label,
.dropdown-color.Light.Blue label {
    background-color: lightblue;
    color: black;
}
.dropdown-color.orange,
.dropdown-color.Orange,
.dropdown-color.orange label,
.dropdown-color.Orange label {
    background-color: orange;
}
.dropdown-color.pink,
.dropdown-color.Pink,
.dropdown-color.pink label,
.dropdown-color.Pink label {
    background-color: pink;
    color: black;
}
.dropdown-color.purple,
.dropdown-color.Purple,
.dropdown-color.purple label,
.dropdown-color.Purple label {
    background-color: purple;
}
.dropdown-color.red,
.dropdown-color.Red,
.dropdown-color.red label,
.dropdown-color.Red label {
    background-color: red;
}
.dropdown-color.white,
.dropdown-color.White,
.dropdown-color.white label,
.dropdown-color.White label {
    background-color: white;
    color: black;
}
.dropdown-color.yellow,
.dropdown-color.Yellow,
.dropdown-color.yellow label,
.dropdown-color.Yellow label {
    background-color: yellow;
    color: black;
}
.dropdown-color.other,
.dropdown-color.Other,
.dropdown-color.other label,
.dropdown-color.Other label {
    background-color: white;
    color: black;
}

/* Format the status change buttons on the Request Edit pages */
.status-change-actions {
    font-size: 80%;
    display: inline-block;
    margin-top: -4px;
}

/* SFQ description text on multi-tab request creation page */
.form-header-text .sfq-description {
    border-left: 3px solid lightgray;
    margin-bottom: 4px;
    padding: 10px;
    width: 50%;
}

.label-info {
    color: black;
}

.pre-comments {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
.yellowHighlight {
    background-color: #FFFF00 !important;
}
.inline-checkbox {
    position: absolute;
    margin: 4px 0px 0px 5px !important; /*lazy, but bootstrap is killing margins on checkbox and reorganizing import order messes everything else up*/
}

.cesItemProposalNum {
    display:inline-block;
    width:280px;
}

.cesItem {
    display:inline-block;
    width:300px;
}