@import "common.less";
@import "/config/config_theme.less";

/* Fix the submit button height problem. */
/* input[type="submit"] { */
/*   height: 40px; */
/* } */


// Common colors
@red:               #FF0000;
@darkred:           #CC0000;
@darkredBB:         #BB0000;
@darkredAA:         #AA0000;
@darkred99:         #990000;
@white:             #FFFFFF;
@cyan:              #00FFFF;
@silver:            #C0C0C0;
@blue:              #0000FF;
@grey:              #808080;
@grey70:            #707070;
@grey90:            #909090;
@greyA0:            #A0A0A0;
@greyB0:            #B0B0B0;
@greyC0:            #C0C0C0;
@greyD0:            #D0D0D0;
@greyDD:            #DDDDDD;
@greyE0:            #E0E0E0;
@greyE4:            #E4E4E4;
@greyE8:            #E8E8E8;
@greyEE:            #EEEEEE;
@greyF0:            #F0F0F0;
@greyF2:            #F2F2F2;
@greyF4:            #F4F4F4;
@greyF6:            #F6F6F6;
@greyF8:            #F8F8F8;
@lightgray:         #F8F8F8;
@lightgray0:        #F0F0F0;
@lightgray1:        #E8E8E8;
@lightgray2:        #D8D8D8;
@darkgray:          #484848;
@darkgray2:         #686868;
@darkblue:          #0000A0;
@darkblue2:         #000080;
@black:             #000000;
@lightblue:         #ADD8E6;
@lightblue2:        #8DB8C6;
@lightblue3:        #6D98A6;
@cmdblue:           #3a87ad;
@cmdblue5A:         #5a87ad;
@cmdblue7A:         #7a87ad;
@orange:            #FFA500;
@purple:            #800080;
@brown:             #A52A2A;
@yellow:            #FFFF00;
@maroon:            #800000;
@lime:              #00FF00;
@green:             #008000;
@starbucks_green:   #2a8a15;
@fuchsia:           #FF00FF;
@olive:             #808000;

@whitef5:           #f5f5f5;

// Custom colors
@grayFC:            #FCFCFC;
@grayF8:            #F8F8F8;
@grayF0:            #F0F0F0;
@grayEC:            #ECECEC;
@grayE0:            #E0E0E0;
@grayDC:            #DCDCDC;
@grayCC:            #CCCCCC;
@grayC8:            #C8C8C8;
@grayBC:            #BCBCBC;
@grayAC:            #ACACAC;
@gray8C:            #8C8C8C;
@gray6C:            #6C6C6C;
@gray4C:            #4C4C4C;
@gray2C:            #2C2C2C;
@disabled:          #999999;
@disabled_bg:       #eeeeee;
@whiteFB:           #fbfbfb;
@input-yellow:      #FFFFe8;

@dropdown-bg-color:     @lightgray2;
@dropdown-bg-color2:    darken(@dropdown-bg-color, 10%);


.theme-color        { color:  @theme-color; }
.color-black        { color:  @black; }
.color-blue         { color:  @blue; }
.color-darkblue     { color:  @darkblue; }
.color-darkblue2    { color:  @darkblue2; }
.color-grayEC       { color:  @grayEC; }
.color-grayE0       { color:  @grayE0; }
.color-grayDC       { color:  @grayDC; }
.color-grayCC       { color:  @grayCC; }
.color-grayC8       { color:  @grayC8; }
.color-grayBC       { color:  @grayBC; }
.color-grayAC       { color:  @grayAC; }
.color-gray8C       { color:  @gray8C; }
.color-gray6C       { color:  @gray6C; }
.color-gray4C       { color:  @gray4C; }
.color-gray2C       { color:  @gray2C; }

.theme-color-bg     { background: @theme-color; }
.bg-white           { background-color:  @white; }
.bg-whitef5         { background-color:  @whitef5; }



// Override bootstrap-united.css
a {
    color:          @theme-link-color;
}
a:hover,
a:focus {
    color:          @theme-link-hover-color;
}

// Override bootstrap-united.css
h3 {
    color:          #333333;
    font-size:      26px;
}

h4 {
    font-size:      22px;
}

h5 {
    font-size:      17px;
}

h6 {
    font-size:      14px;
}

// Override bootstrap-united.css
.form-horizontal .control-group {
    margin-bottom:  10px;       // form fields won't be so far apart in height
    *zoom:          1;
}

// Override body in bootstrap-united.css
body {
    margin: 0;
    margin-bottom:          30px;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 150%;    // 13px + 6.5px

    color: #333333;
    background-color: #ffffff;

    //    background-color:       lightblue;

    //    background-image:       url('/public/images/bg-white-refined.jpg');
    //    background-image:       url('/public/images/bg-gray2.png');
    background-image:       url('/public/images/bg-gray4.png');
    //    background-image:       url('/public/images/bg-white-rock.jpg');
    //    background-image:       url('/public/images/bg-white-rock4.jpg');
    //    background-image:       url('/public/images/bg-gold-blue.jpg');
    //    background-image:       url('/public/images/bg-brown.jpg');
    //    background-image:       url('/public/images/bg-oil-yellow.jpg');
    //    background-image:       url('/public/images/bg-pink-dark4.jpg');
    //    background-image:       url('/public/images/bg-beige.jpg');

    //    background-repeat:      no-repeat;
    //    background-size:        cover;

}

// Handle body padding-top when the responsive navbar disappears due to screen resized to a smaller size.
@media screen and (min-width: 979px) {
    body {
        padding-top:          50px;
    }
}

.main-container {
    //    background-color:       white;

    //    background-image:       url('/public/images/bg-white-refined.jpg');
    //    background-image:       url('/public/images/bg-gray2.png');
    //    background-image:       url('/public/images/bg-gray4.png');
    //    background-image:       url('/public/images/bg-white-rock.jpg');
    //    background-image:       url('/public/images/bg-white-rock4.jpg');
    //    background-image:       url('/public/images/bg-pink-dark4.jpg');
    //    background-image:       url('/public/images/bg-light-orange2.jpg');
    background-image:       url('/public/images/bg-light-orange4.jpg');
    //    background-image:       url('/public/images/bg-light-peach3.jpg');
    //    background-image:       url('/public/images/bg-peach1.jpg');
    //    background-image:       url('/public/images/bg-peach2.jpg');
    //    background-image:       url('/public/images/bg-light-yellow4.jpg');

    //  background-repeat:      no-repeat;
    //  background-size:        cover;


    //    margin-top:             70px;     /* offset the main container from the topbar */
    //    margin-bottom:          30px;
    padding:                15px;

    border:                 1px solid #bbb;
    -webkit-border-radius:  5px;
    border-radius:          5px;  // IE might render rounded corner very slow!!
    box-shadow:             2px 2px 5px 2px #ccc;
    -webkit-box-shadow:     2px 2px 5px 2px #ccc;
}
@media only screen and (max-width: 768px) { // width 768 is ipad
    .main-container {
        padding:                10px 4px 30px 4px;
        -webkit-border-radius:  0;
        border-radius:          0;
        box-shadow:             none;
        -webkit-box-shadow:     none;
    }
    // override bootstrap-responsive.css
    body {
        padding-right:          0px;
        padding-left:           0px;
    }
    .navbar {
        padding:                 0 20px;
    }
}

.main-container-index {
    //  background-image:       url('/public/images/bg-light-yellow2.jpg');
    .main-container;
}

.main-container-wide {
    width: 1400px;
}

.main-container-max-width {
    background-image:       none;
    border:                 none;
    -webkit-border-radius:  0;
    border-radius:          0;
    box-shadow:             none;
    -webkit-box-shadow:     none;
    padding:                10px 20px 30px 20px;
    width:                  100% !important;
}

.content-layout {
    min-height:         480px;      // Put min-height on content to offset the footer to the bottom of the screen
    padding:0;
    margin:0;
}

.footer-layout {
    margin-top:         50px;
}


@placeholder-color:     @gray8C;

input:-moz-placeholder,
textarea:-moz-placeholder {
    color:      @grayCC;
    opacity:    1;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
   color:       @grayCC;
    opacity:    1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color:      @grayCC;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:      @grayCC;
}

.navbar {
    // Override Bootstrap's version

    .navbar-inner {
        //        padding:        0px 0px 0px 0px;
        //        min-height:     34px;
    }

    @navbar-top:        8px;

    .brand {
        margin:         @navbar-top 0px 0px 0px;
        padding:        2px 20px 2px 0px;
        color:          #ffffff;

        .logo-icon      {   width: @theme-logo-navbar-width;  height: @theme-logo-navbar-height;   }
        .logo-text      {   font-size: 1.3em;  padding:0; display: inline-block; vertical-align: middle; }
        .version        {   font-size: 0.60em; padding:0; display: inline-block; vertical-align: bottom; line-height: 1em; margin-left: 4px;
                            color: lightgray; text-shadow: none; }
    }

    .nav-items {
        margin:         @navbar-top 0px 0px 0px;

        li {
            @item-lr-pad:       10px;
            a {
                color:          white;
                font-size:      1.1em;
                text-shadow:    none;
                padding:        3px @item-lr-pad 2px @item-lr-pad;
            }
            a:hover, a:focus {
                color:      #e5e5e5;
            }
            form.quick-search {
                margin:         0;
                padding:        1px @item-lr-pad 0px @item-lr-pad;
                .search-input {
                    height:         14px;
                    line-height:    14px;
                    width:          120px;
                    padding-left:   10px;
                    padding-right:  10px;
                    background:     @lightgray;
                }
                .search-img {
                    position:       absolute;
                    top:            0px;
                    right:          5px;
                }
            }
        }

    }

    /* Fix the href-color-same-as-background problem. */
    .navbar-text {
        line-height:            25px;
        vertical-align:         center;
        color:                  white;
        margin:                 0;
        padding:                0px 4px 0 0;

        a {
            color:              white;
            text-decoration:    none;
        }
        a:hover, a:focus {
            color:              #e5e5e5;
        }
    }

}

.dropdown-menu-bar {

    // sequeeze the down-arrow caret and dropdown menu item name together
    a.caret-before {
        padding-right:  1px !important;
    }
    a.caret-after {
        padding-left:   1px !important;
    }

    // Override Bootstrap's margin-bottom for the tabs
    .nav {
        margin-left: 0;
        margin-bottom: 0px;
        list-style: none;
    }
    // Override Bootstrap's background-color for the active tab
    .nav-pills a {
        background-color:   transparent;
        color:              @theme_dropdown_menu_color;
    }
    .nav-pills a:hover {
        background-color:   transparent;
        color:              @theme_dropdown_menu_color;
        text-shadow:        1px 1px 1px #aaa;
    }
    .nav-pills > .active > a {
        background-color:   transparent;
        color:              @theme_dropdown_menu_color;
        font-weight:        bold;
    }

    // Override/redefine Bootstrap's .dropdown-menu with different background-color.
    .dropdown-toggle, .dropdown-toggle:hover, .dropdown-toggle:focus {
        background-color:   transparent;
        border: 0;
    }
    .dropdown-menu  {
        left: 100%;
    }

    .dropdown-menu li.myactive > a,
    .dropdown-menu li.myactive > a:hover {
        font-weight:        bold;
    }

    .dropdown-menu li > a:hover,
    .dropdown-menu li > a:focus {
        color:              @white;
        text-decoration:    none;
    }

}

// Use in conjunction with KO's boolean flag to show initially-hidden element.
// <div class="hidden" data-bind="css: { hidden: isVisible }">
// Another way to pre-hide elements is: <div style="display:none" data-bind="visible: true" >...</div>
.hidden {
    display:        none;
}

.hide {
    visibility:     hidden;
}

.nowrap {
    white-space:    nowrap;
}

// For ellipsis in TD, put this in table, style="table-layout:fixed"
.ellipsis {
    text-overflow:    ellipsis; /* make long text ... when exceeds width; the containing div must have a width set. */

    white-space:      nowrap;   /* need to apply these two to the parent for text-overflow to do anything. */
    overflow:         hidden;
}

.dbg-border {
    border: 1px dotted red;
}
.dbg-border2 {
    border: 1px dotted blue;
}
.dbg-border3 {
    border: 1px dotted yellow;
}
.dbg-bg {
    background: yellow;
}
.dbg-bg2 {
    background: red;
}
.dbg-bg3 {
    background: blue;
}

.bg-lightblue2 {
    background:     @lightblue2;
}
.bg-lightblue3 {
    background:     @lightblue3;
}
.bg-grayCC {
    background:     @grayCC;
}
.bg-grayDC {
    background:     @grayDC;
}
.bg-grayEC {
    background:     @grayEC;
}
.bg-grayFC {
    background:     @grayFC;
}
.bg-whiteFB {
    background-color:@whiteFB;
}


.ptr {
    cursor:     pointer;
}

.move-ptr {
    cursor:     move;
}

// Apply to element to make it non-selectable
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.underline-bc {
    text-decoration:    none;
    border-bottom:      1px dotted #bcbcbc;
}

.clear-border {
    border: 1px solid transparent;
}

.gray-border {
    border: 1px dotted #8C8CBB;
}

.gray6c-border {
    border: 1px dotted #6C6C6C;
}

.graybc-border {
    border: 1px dotted #BCBCBB;
}

.gray-s-border {
    border: 1px solid #8C8CBB;
}

.graybb-s-border {
    border: 1px solid #bbbbbb;
}

.grayc8-s-border {
    border: 1px solid #c8c8c8;
}

.graye3-s-border {
    border: 1px solid #e3e3e3;
}

.gray-solid {
    border:         1px solid #e3e3e3;
}
.gray-solid-left {
    border-left:    1px solid #e3e3e3;
}
.gray-solid-right {
    border-right:   1px solid #e3e3e3;
}
.graycc-solid-right {
    border-right:   1px solid #cccccc;
}
.gray-solid-bottom {
    border-bottom:  1px solid #e3e3e3;
}

.gray-border-left {
    border-left:    1px dotted #8C8CBB;
}
.gray-border-right {
    border-right:    1px dotted #8C8CBB;
}
.gray-border-bottom {
    border-bottom: 1px dotted #8C8CBB;
}

.gray-s-border-bottom {
    border-bottom: 1px solid #8C8CBB;
}

.gray6c-border-bottom {
    border-bottom: 1px dotted #6c6c6c;
}

.gray6c-s-border-bottom {
    border-bottom: 1px solid #6c6c6c;
}

.gray9c-border-bottom {
    border-bottom: 1px dotted #9c9c9c;
}

.gray9c-s-border-bottom {
    border-bottom: 1px solid #9c9c9c;
}

.grayac-border-bottom {
    border-bottom: 1px dotted #acacac;
}

.grayac-s-border-bottom {
    border-bottom: 1px solid #acacac;
}

.graycc-border-bottom {
    border-bottom: 1px dotted #cccccc;
}

.graycc-s-border-bottom {
    border-bottom: 1px solid #cccccc;
}

.gray-border-top {
    border-top: 1px dotted #8C8CBB;
}

.gray80-solid-top {
    border-top: 1px solid #808080;
}

.graybb-solid-top {
    border-top: 1px solid #bbb;
}

.graycc-solid-top {
    border-top: 1px solid #cccccc;
}

// Put this on div surrounding a block to put a rounded border.
.my-round-border {
    border:                 1px solid #bbb;
    margin-bottom:          1px;
    -webkit-border-radius:  5px;
    border-radius:          5px;  // IE renders rounded corner very SLOW!!
}

.gray-round {
    border: 1px dotted #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.gray7c-round {
    border: 1px dotted #7c7c7c;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.gray-solid-round {
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.solid-round-7A {
    border: 1px solid @cmdblue7A;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.my-box {
    .bg-whiteFB;
    .graybb-s-border;
    .well-content {
        margin:             20px 20px 20px 20px;
    }
}

.my-well {
    .bg-whiteFB;
    .gray-solid-round;
    .well-content {
        margin:             20px 20px 20px 20px;
    }
}

/* Create a title with surrounding divider lines at the middle height.
   <div class="title-divider">
   <span>Title</span>
   </div>
   */
.title-divider {
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}
.title-divider > span {
    margin-left: 30px;
    position: relative;
    display: inline-block;
}
.title-divider > span:before,
.title-divider > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: @grey70;
}
.title-divider > span:before {
    right: 100%;
    margin-right: 7px;
}
.title-divider > span:after {
    left: 100%;
    margin-left: 7px;
}


// Action button

// Small command button in page content
.btn-cmd {
    text-align:         center;
    background-color:   @theme-color;
}
.btn-cmd:hover, .label.btn-cmd:hover {
    color:              @greyE0;
}
.btn-cmd.disabled, .btn-cmd.disabled:hover {
    color:              @disabled;
    background-color:   @disabled_bg;
    opacity:            0.85;
}
.btn-cmdblue {
    text-align:         center;
    color:              white;
    background-color:   @cmdblue;
}
.btn-cmd-trans {
    text-align:         center;
    //background-color:   @cmdblue;
}

.btn-cmd-clear {
    text-align:         center;
    background-color:   @cmdblue;
}
.btn-cmd-clear.disabled {
    color:              @disabled;
    background-color:   @disabled_bg;
}

.btn-state {
    text-align:             center;
    color:                  white;
    background-color:       @darkred99;
    cursor:                 default;
    border-radius:          8px;
    -webkit-border-radius:  8px;
}
.btn-state.disabled {
    color:                  @disabled;
    background-color:       @disabled_bg;
}

.btn-edit {
    text-align:             center;
    color:                  white;
    background-color:       @cmdblue7A;
    cursor:                 default;
    outline:                1px solid #dddddd;
}

.btn-action2 {
    text-align:             center;
    color:                  white;
    background-color:       @cmdblue7A;
    cursor:                 default;
    outline:                1px solid #dddddd;
}

.btn-action {
    text-align:             center;
    color:                  white;
    background-color:       @cmdblue;
    cursor:                 default;
    outline:                1px solid #dddddd;
}

.btn-clear {
    text-align:         center;
    background-color:   transparent;
}

.btn-disabled {
    text-align:         center;
    cursor:             not-allowed;
    color:              @disabled;
    background-color:   @disabled_bg;
    outline:            1px solid #dddddd;
}
a.btn-disabled:hover {
    color:              @disabled;
    background-color:   @disabled_bg;
}
a.btn-disabled:focus {
    color:              @disabled;
    background-color:   @disabled_bg;
}

.btn-card-h3 {
    height:             3em;
}

.tag {
    display:                inline-block;
    padding:                1px 6px 1px 6px;
    margin:                 0;
    font-size:              0.85em;
    line-height:            normal;
    text-align:             center;
    vertical-align:         middle;
    -webkit-border-radius:  9px;
    -moz-border-radius:     9px;
    border-radius:          9px;
}
.tag-red {
    .tag;
    background-color:       rgba(200, 0, 0, 0.20);
}
.tag-orange {
    .tag;
    background-color:       rgba(255, 165, 0, 0.20);
}
.tag-blue {
    .tag;
    background-color:       rgba(66, 167, 255, 0.20);
}
.tag-green {
    .tag;
    background-color:       rgba(73, 230, 138, 0.20);
}
.tag-green2 {
    .tag;
    background-color:       rgba(73, 230, 138, 0.50);
}
.tag-gray {
    .tag;
    background-color:       rgba(192, 192, 192, 0.30);
}


hr.underline {
    margin:     4px 0 18px 0;
}

hr.underline0 {
    margin:     4px 0 0px 0;
}

hr.soften2 {
    border:         0;
    height:         0;
    border-top:     1px solid rgba(0, 0, 0, 0.1);
    border-bottom:  1px solid rgba(255, 255, 255, 0.3);
}

hr.bold {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     2px solid rgba(0, 0, 0, 0.2);
    border-bottom:  2px solid rgba(255, 255, 255, 0.3);
}
hr.bold2 {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     2px solid rgba(0, 0, 0, 0.15);
    border-bottom:  2px solid rgba(255, 255, 255, 0.3);
}
hr.bold3 {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     3px solid rgba(0, 0, 0, 0.3);
    border-bottom:  3px solid rgba(255, 255, 255, 0.4);
}
hr.thin {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     1px solid rgba(0, 0, 0, 0.2);
    border-bottom:  1px solid rgba(255, 255, 255, 0.3);
}
hr.thin2 {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     1px solid rgba(0, 0, 0, 0.15);
    border-bottom:  1px solid rgba(255, 255, 255, 0.3);
}
hr.thin-dotted {
    border:         0;
    height:         0;
    margin:         0;
    border-top:     1px dotted rgba(0, 0, 0, 0.2);
    border-bottom:  1px dotted rgba(255, 255, 255, 0.3);
}


.float-left {
    float:          left;
}
.float-right {
    float:          right;
}
.float-clear {
    clear:          both;
}


// <div class="my-divider"></div> for no vertical margin
// <li class="my-divider"></li> to have vertical margins around li
.my-divider {
    width:              100%;
    height:             1px;
    background-color:   #e5e5e5;
    border-bottom:      1px solid #ffffff;
}

.my-divider2 {
    width:              100%;
    height:             1px;
    background-color:   #c5c5c5;
    border-bottom:      1px solid #ffffff;
}

.left-border {
    border-left:        1px solid #cccccc;
}

.left-border-cc {
    border-left:        1px solid #cccccc;
}

.left-border-bc {
    border-left:        1px dotted @grayBC;
}

.right-border {
    border-right:       1px solid #cccccc;
}

.top-border {
    border-top:         1px solid #cccccc;
}

.bottom-border {
    border-bottom:      1px solid #cccccc;
}

.bottom-border2 {
    border-bottom:      1px dotted #B0B0B0;
}

.bottom-border-C0 {
    border-bottom:      1px solid #C0C0C0;
}

.bottom-border-80 {
    border-bottom:      1px solid #404040;
}

.col-remaining {
    width:              99%;    // mark a col (td) to take up the rest of the space in table.
}

.valign-top {
    vertical-align:     top;
}
.valign-bottom {
    vertical-align:     bottom;
}

// Enable small class inside <TH>
th small {
    font-weight:    normal;
    color:          #777777;
}

.text_sm    {  font-size:  12px; }

.font-05    {   font-size: 0.5em;   }
.font-06    {   font-size: 0.6em;   }
.font-07    {   font-size: 0.7em;   }
.font-08    {   font-size: 0.8em;   }
.font-09    {   font-size: 0.9em;   }
.font-11    {   font-size: 1.1em;   }
.font-12    {   font-size: 1.2em;   }
.font-13    {   font-size: 1.3em;   }
.font-14    {   font-size: 1.4em;   }
.font-15    {   font-size: 1.5em;   }

.normal-text {
    font-weight:    normal;
}

.small-gray {
    font-weight:    normal;
    color:          #777;
}

.font-09-gray {
    .font-09;
    .small-gray;
}

.font-08-gray {
    .font-08;
    .small-gray;
}

.font-07-gray {
    .font-07;
    .small-gray;
}

.font-06-gray {
    .font-06;
    .small-gray;
}

.font-05-gray {
    .font-05;
    .small-gray;
}

.small-gray1 {
    font-weight:    normal;
    color:          #444;
}

.smaller-gray90 {
    font-size:      0.90em;
    .small-gray1;
}

.smaller-gray85 {
    font-size:      0.85em;
    .small-gray1;
}

.small-gray2 {
    font-weight:    normal;
    color:          #999;
}

.small-gray2 {
    font-weight:    normal;
    color:          #999;
}

.small-title {
    font-size:      0.5em;
}

.small-title7 {
    font-size:      0.7em;
}

.small-title8 {
    font-size:      0.8em;
}

.small-title9 {
    font-size:      0.9em;
}

.big-title9 {
    font-weight:    bold;
    font-size:      0.9em;
}

.big-title10 {
    font-weight:    bold;
    font-size:      1.0em;
}

.big-title11 {
    font-weight:    bold;
    font-size:      1.1em;
}

.big-title12 {
    font-weight:    bold;
    font-size:      1.2em;
}

.big-title15 {
    font-weight:    bold;
    font-size:      1.5em;
}

textarea.small {
    font-weight:    normal;
    font-size:      11px;
}

.file-info-sm-text {
    font-weight:    normal;
    font-size:      11px;
    color:          #555555;
}

.striped {
    background-color: #f9f9f9;
}

.error {
    color:          #b94a48;
}

.success {
    //color: #468847;
    color: black;
}

// Styling for the error message element for form validation.
span.error {
    padding-left:   8px;
}

.disabled-text {
    color:  @disabled;
}

.disabled-ui {
    opacity:        0.5;
    font-style:     italic;
}

// Apply the class to the element to make it translucent.
.translucent15 {
    opacity:        0.15;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=15);      // IE less than 8
    -ms-filter:     "alpha(opacity=15)";    // IE 8
    -khtml-opacity: .15;                    // Safari 1.x
}
.translucent30 {
    opacity:        0.30;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=30);      // IE less than 8
    -ms-filter:     "alpha(opacity=30)";    // IE 8
    -khtml-opacity: .30;                    // Safari 1.x
}
.translucent40 {
    opacity:        0.40;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=40);      // IE less than 8
    -ms-filter:     "alpha(opacity=40)";    // IE 8
    -khtml-opacity: .40;                    // Safari 1.x
}
.translucent50 {
    opacity:        0.50;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=50);      // IE less than 8
    -ms-filter:     "alpha(opacity=50)";    // IE 8
    -khtml-opacity: .50;                    // Safari 1.x
}
.translucent60 {
    opacity:        0.60;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=60);      // IE less than 8
    -ms-filter:     "alpha(opacity=60)";    // IE 8
    -khtml-opacity: .60;                    // Safari 1.x
}
.translucent65 {
    opacity:        0.65;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=65);      // IE less than 8
    -ms-filter:     "alpha(opacity=65)";    // IE 8
    -khtml-opacity: .65;                    // Safari 1.x
}
.translucent85 {
    opacity:        0.85;                   // Standard: FF gt 1.5, Opera, Safari, CSS3
    filter:         alpha(opacity=85);      // IE less than 8
    -ms-filter:     "alpha(opacity=85)";    // IE 8
    -khtml-opacity: .85;                    // Safari 1.x
}


// The last item in the BC Menu Bar
.last_menu a {
    color:              gray;
    text-decoration:    none;
}

.collapsible-bar-left99 {
    -webkit-transition:     width 0.5s ease;
    -moz-transition:        width 0.5s ease;
    -o-transition:          width 0.5s ease;
    transition:             width 0.5s ease;
    overflow:               hidden;
    white-space:            nowrap;
    //width:                  0px;
    //display:            absolute;
    //animation-direction:    normal|reverse|alternate|alternate-reverse|initial|inherit;

    /* vertical-align: middle; */
    /* line-height: 30px; */
    /* height: 30px; */

}
.collapsible-bar-left.in {
    width:          100%;
}

.sliding-container {
    .dbg-border;
    overflow:           hidden;
    white-space:        nowrap;

    .sliding {
        position:       absolute;
        top:            0px;
        right:          20px;
    }
    .sliding-panel {
        position:       absolute;
        top:            0px;
        right:          0px;
        width:          600px;
        margin-right:   -600px;
    }
}

.slide-bar {
    position:   absolute;
    width:      280px;
    height:     80px;
    top:        50px;
    right:      -280px;
    padding-left: 20px;

    .slide-btn {
        position: absolute;
        top: 0; left: 0;
        height: 20px;
        width: 20px;
        background: #ff0000;
    }

    .slide-content {
        float:left;
    }
}


// Override Bootstrap's form-actions
.my-form-actions {
    border-top:     0;
    border:         1px solid #bbb;
}

.form-actions.sumbit {
    border-top:     0;
    padding-top:    0;
    padding-bottom: 0;
    background:     none;
}


.th-item-num {
    text-align:         center;
    width:              1em;
    color:              @grayAC;
    padding:            0 4px 0 4px;
}
.td-item-num {
    text-align:         center;
    width:              1em;
    color:              @grayAC;
    padding:            0 4px 0 4px;
    font-size:          0.85em;
    .gray-border-right;
}


// A table with two columns where the left column (th) serves as label and is right-justified,
// and the right column (td) serves as value and is left-justified, so that all rows of the left
// column are lined up right-justified, and likewsie for the right column.
.table-2cols {

    th {
        font-weight:        normal;
        padding:            0px 4px;
        text-align:         right;
    }

    td {
        padding:            0px 4px;
        text-align:         left;
    }
}


// Override Bootstrap's table.th and td.
.my-table {

    //background-image:       url('/public/images/bg-white-rock4.jpg');
    //background-color:       @whitef5;
    background-color:       white;
    border:                 1px solid #bbb;

    th {
        padding:            4px 10px;
        vertical-align:     middle;
        background-image:   url('/public/images/bg-gray4.png');
    }

    td {
        padding:            4px 10px;
        vertical-align:     middle;
    }

}

.asset-table {
    font-size:              12px;

    //background-image:       url('/public/images/bg-white-rock4.jpg');
    background-color:       @whitef5;
    //background-color:       white;
    border:                 1px solid #bbb;

    th {
        padding:            2px 5px;
        vertical-align:     bottom;
        background-color:   @grayEC;
        //background-image:   url('/public/images/bg-gray4.png');
        cursor:             pointer;
        text-align:         left;
        .gray-border-right;
    }

    td {
        padding:            2px 6px;
        vertical-align:     middle;
        .gray-border-right;
    }

    .col-name {
        vertical-align:     top;
    }
    .col-alt1 {
        vertical-align:     top;
        min-width:          3em;
    }
    .col-alt2 {
        vertical-align:     top;
        min-width:          3em;
    }

}

.slim-table {
    font-size:              12px;
    width:                  100%;
    white-space:            nowrap;

    thead tr {
        border-bottom:      1px solid #ccc;
    }

    th {
        padding:            2px 6px;
        vertical-align:     bottom;
        background-color:   @whitef5;
        text-align:         left;
    }

    td {
        padding:            2px 6px;
        vertical-align:     middle;
    }

}

.tiny-table {
    width:                  100%;
    border-collapse:        collapse;
    white-space:            nowrap;
    border-top:             1px solid #cccccc;
    border-bottom:          1px solid #cccccc;

    th {
        height:             100%;       // reset outer table style
        line-height:        100%;       // reset outer table style
        padding:            2px 6px;
        background-color:   @whitef5;
    }

    td {
        height:             100%;
        line-height:        100%;
        padding:            2px 6px;
        vertical-align:     middle;
    }

    td.label-col {
        text-align:         right;
        margin:             0;
        padding:            2px 6px;
        color:              black;
        vertical-align:     middle;
    }
    td.value-col {
        text-align:         left;
        margin:             0;
        padding:            2px 6px;
        color:              darken(@starbucks_green, 10);
        .left-border-bc;
    }
    
}

.select-section-table {
    .tiny-table;
    border-top:             1px solid #aaaaaa;
    border-bottom:          none;

    th {
        padding:            4px 6px;
    }

    td {
        padding:            4px 6px;
    }

    td.label-col {
        padding:            4px 6px;
    }
    td.value-col {
        padding:            4px 6px;
    }
    
}

.fixed-table {
    .slim-table;
    table-layout:           fixed;  // makes the table column fixed width or fixed percentage.

    th {
        .ellipsis;
    }

    td {
        .ellipsis;
    }

}

.issue-table {
    .fixed-table;
    th {
        padding:            2px 2px 2px 6px;
    }
}

.title-table {
    width:                  100%;

    td {
        padding:            0px;
    }

    .title-part {
        margin:             0 0px 0 0;
        color:              @theme-color;
        white-space:        nowrap;

        .subtitle {
            font-weight:    normal;
            line-height:    0.5em;
            font-size:      0.5em;
            color:          #777;
        }
    }
    
    .action-part {
        margin:             0 18px 0 0;
        white-space:        nowrap;
        text-align:         right;
    }

    // Override/redefine Bootstrap's .dropdown-menu with different color.
    .dropdown-toggle:hover, .dropdown-toggle:focus {
        color:              @grayEC;
    }

    // Draw little callout arrow on top when clicked.
    .dropdown-menu:before {
        position: absolute;
        top: -5px;
        left: 33px;
        display: inline-block;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #ccc;
        border-left: 5px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: '';
    }
    .dropdown-menu:after {
        position: absolute;
        top: -4px;
        left: 34px;
        display: inline-block;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #ffffff;
        border-left: 4px solid transparent;
        content: '';
    }    

}

.min-table {
    width:                  100%;
    background-color:       @whitef5;

    th {
        padding:            2px 6px;
        vertical-align:     bottom;
    }

    td {
        padding:            2px 6px;
        vertical-align:     top;
    }
}

.asset-assessment-table {
    font-size:              0.9em;
    background-color:       #f5f5f5;
    border:                 1px solid #a0a0a0;

    th {
        padding:            2px 10px;
        vertical-align:     bottom;
        border-top:         1px solid #a0a0a0;
        border-bottom:      1px solid #a0a0a0;
        background-color:   #e5e5e5;
        background-image:   none;
        text-align:         left;
    }

    td {
        border: none;
    }

    .assessment-row {
        // apply to all td under a tr of this class.
        td {
            padding-top:        3px;
            padding-bottom:     2px;
        }
    }
    .assessment-attr-row {
        td {
            padding-top:        4px;
            padding-bottom:     7px;
        }
    }
    .assessment-row-divider {
        td {
            padding-top:        0px;
            padding-bottom:     0px;
        }
        border-bottom:          1px solid #808080;
    }
    
}

.folder-assessment-table {
    font-size:              0.9em;
    background-color:       #f5f5f5;
    border:                 1px solid #a0a0a0;

    th {
        padding:            2px 10px;
        vertical-align:     bottom;
        border-top:         1px solid #a0a0a0;
        border-bottom:      1px solid #a0a0a0;
        background-color:   #e5e5e5;
        background-image:   none;
        text-align:         left;
    }

    td {
        padding:            2px 6px;
        vertical-align:     middle;
    }

    .asset-section {
        counter-reset:      asection;
    }
    .asset-ainfo-item {
        counter-increment:  asection;
    }

    .assessment-row {
        // apply to all td under a tr of this class.
        td {
            padding-top:        4px;
            padding-bottom:     4px;
        }
    }
    .assessment-attr-row {
        td {
            padding-top:        0px;
            padding-bottom:     8px;
        }
    }
    .assessment-row-divider {
        td {
            padding-top:        0px;
            padding-bottom:     2px;
        }
    }
    

}

.assessment-attr-panel {
    background-color:       @greyF0;
    padding:                0px 0px 0px 0px;
    border-top:             1px dotted @greyA0;
    border-right:           1px dotted @greyD0;
    
    .my-span2 { width:  16.65%; }
    .my-span3 { width:  25%;    }
    .my-span4 { width:  33.32%; }

    .attr-cell {
        font-size:              0.80em;
        line-height:            100%;
        min-height:             12px;
        height:                 16px;
        padding:                2px 6px 2px 2px;
        margin:                 0px 0px 0px 0;
        white-space:            nowrap;
        border-bottom:          1px dotted @greyB0;
        border-left:            1px dotted @greyD0;
    }
    .val {
        //float:                  left;
        display:                inline-block;
        margin-left:            4px;
        padding-top:            1px;
        padding-bottom:         1px;
    }
    .val- {
        .val;
        font-size:              0.85em;
        min-width:              3em;
        padding-left:           4px;
        padding-right:          4px;
        text-align:             center;
        border-left:            1px dotted @greyC0;
        border-right:           1px dotted @grey90;
        //color:                  white;
        //-webkit-border-radius:  9px;
        //-moz-border-radius:     9px;
        //border-radius:          9px;
        
    }
    .val-Red {
        .val-;
        background-color:       rgba(200, 0, 0, 0.20);      // #EC3E40;
    }
    .val-Orange {
        .val-;
        background-color:       rgba(255, 165, 0, 0.20);    // orange
    }
    .val-Blue {
        .val-;
        background-color:       rgba(66, 167, 255, 0.20);   // #44a8ff
    }
    .val-Gray {
        .val-;
        background-color:       rgba(192, 192, 192, 0.30);  // #C0C0C0;
    }

}


.item-table {
    width:                  100%;
    background-color:       white;
    //background-color:       @whitef5;
    border:                 1px solid #bbb;

    th {
        line-height:        20px;
        text-align:         left;
        border-bottom:      1px solid #bbbbbb;
        font-weight:        bold;

        padding:            2px 4px 2px 4px;
        vertical-align:     bottom;
        background-color:   @greyF0;
        //background-image:   url('/public/images/bg-gray4.png');
    }
    th.l_pad4 {
        padding-left:       4px;
    }

    td {
        line-height:        20px;
        text-align:         left;
        border-top:         1px solid #e8e8e8;

        padding:            2px 4px 2px 4px;
        vertical-align:     top;
    }
    td.l_pad4 {
        padding-left:       4px;
    }

    .rowcmd {       // class applied to td, see below
                    padding:            0;
                    text-align:         right;
                    white-space:        nowrap;

                    input {
                        margin:         -1px 4px 0 4px;
                        display:        none;
                    }
            }
    th.rowcmd-all { // class applied to th
                    .rowcmd;
                    width:              30px;
                  }
    td.rowcmd {     // class applied to td
                    .rowcmd;
              }

    th.item-num {
        .th-item-num;
    }
    td.item-num {
        .td-item-num;
    }

    th.label-col {
        text-align:         right;
    }
    td.label-col {
        text-align:         right;
        color:              black;
    }
    td.value-col {
        text-align:         left;
        color:              #404040;
        margin:             0;
    }

}

.tr-border-top td {
    border-top:         1px solid #dddddd;
}
.tr-bg-darker td {
    background-color:   #f2f2f2;
}

.sub-table {
    font-size:              10px;
    width:                  100%;
    white-space:            nowrap;
    color:                  @black;
    .gray-border-bottom;

    th {
        padding:            1px 2px 0px 4px;
        vertical-align:     bottom;
        text-align:         left;
        border:             none;
        border-bottom:      1px solid #ccc;
        background-image:   none;
        background-color:   @grayE0 !important;
    }

    td {
        padding:            1px 2px 0px 4px;
        vertical-align:     middle;
        border:             none;
        //.gray-border;
        .gray-border-bottom;
    }

}


// Table column header sort & filter icons
.icn {
    display:            inline-block;
    width:              9px;
    height:             14px;
    margin:             1px 0 0 1px;
    line-height:        14px;
    vertical-align:     text-top;
    background-size:    contain;
    background-repeat:  no-repeat;
}
.icn-up {
    .icn;
    background-image:   url("/public/images/arrow_up_slim.png");
}
.icn-down {
    .icn;
    background-image:   url("/public/images/arrow_down_slim.png");
}

.arrow-line-right {
    border-bottom:      1px dotted @grayBC;
    margin:             4px -2px 5px 0px;
}
.arrow-line-right:after {
    content:            "";
    width:              0;
    height:             0;
    border-top:         4px solid transparent;
    border-bottom:      4px solid transparent;
    border-left:        10px solid @grayDC;
    position:           absolute;
    margin:             -4px 0px 0px 0px;
}

.item-header {
    cursor:             pointer;
    .nowrap;
    .noselect;
}
.header-icons {
    display:            inline-block;
    min-width:          32px;
}
.header-icons1 {
    display:            inline-block;
    min-width:          14px;
}
.item-header:hover .hidden-sort-icon {
    display:            inline-block;
}
.item-header:hover .hidden-filter-icon {
    display:            inline-block;
}
.hidden-sort-icon {
    display:            none;
    .translucent50;
}
.hidden-filter-icon {
    display:            none;
    .translucent60;
}
.filter-icon {
    display:            inline-block;
    .translucent60;
}


.compact-table {
    font-size:              12px;
    background-color:       white;
    border:                 1px solid #bbb;

    th {
        padding:            1px 8px;
        vertical-align:     bottom;
        background-image:   url('/public/images/bg-gray4.png');
        cursor:             pointer;
        text-align:         left;
    }

    td {
        padding:            1px 8px;
        vertical-align:     middle;
    }

}

.assess-table {
    width:                  100%;
    margin-top:             10px;
    //background-image:       url('/public/images/bg-white-rock4.jpg');
    //background-color:       @whitef5;
    background-color:       white;
    border:                 1px solid #bbb;


    @mile-all-color:        #b8b8b8;
    @mile-all-color-dk:     darken(@mile-all-color, 10%);
    @mile-10-color:         #d8d8d8;
    @mile-10-color-dk:      darken(@mile-all-color, 10%);
    @mile-1-color:          #f4f4f4;
    @mile-1-color-dk:       darken(@mile-1-color, 10%);

    th {
        padding:            2px 6px;
        vertical-align:     middle;
        text-align:         left;
        border-right:       1px solid #aaa;
        background-image:   url('/public/images/bg-gray4.png');
    }

    td {
        padding:            2px 6px;
        vertical-align:     middle;

        a {
            color:          @darkblue2;
        }
    }

    .no-border-lr {
        border-left:        0px;        // remove border put on by table-bordered
        border-right:       0px;        // remove border put on by table-bordered
    }

    .mile-10-underline {
        border-bottom:      1px solid darken(@mile-10-color, 25%);
    }

    .mile-1-underline {
        border-bottom:      1px solid darken(@mile-1-color, 20%);
    }

    .mile-all-bg {
        background-color:   @mile-all-color;
    }
    .mile-all-borders {
        border-left:        32px solid @mile-all-color;
        border-right:       32px solid @mile-all-color;
    }
    .mile-all-bg-dk {
        background-color:   @mile-all-color-dk;
    }
    .mile-all-borders-dk {
        border-color:       @mile-all-color-dk;
    }

    .mile-10-bg {
        background-color:   @mile-10-color;
    }
    .mile-10-borders {
        border-left:        32px solid @mile-10-color;
        border-right:       32px solid @mile-10-color;
    }
    .mile-10-bg-dk {
        background-color:   @mile-10-color-dk;
    }
    .mile-10-borders-dk {
        border-color:       @mile-10-color-dk;
    }

    .mile-1-bg {
        background-color:   @mile-1-color;
    }
    .mile-1-borders {
        border-left:        30px solid @mile-1-color;
        border-right:       30px solid @mile-1-color;
    }
    .mile-1-borders-summary {
        border-left:        20px solid @mile-1-color;
        border-right:       20px solid @mile-1-color;
    }
    .mile-1-bg-dk {
        background-color:   @mile-1-color-dk;
    }
    .mile-1-border-dk {
        border-color:       @mile-1-color-dk;
    }

    .mile-10th-bg {
        background-color:   white;
    }
    .mile-10th-borders {
        border-left:        20px solid white;
        border-right:       20px solid white;
    }

    .attr-cell {
        text-align:         center;
        padding-left:       6px;
        padding-right:      2px;
        border-left:        0px;        // remove border put on by table-bordered

    }

    .attr-right-edge {
        float:  right;
    }
}

.assess-inner-table {
    font-size:              10px;
    line-height:            1.2;
    border-top:             1px solid #ddd;

    th {
        padding:            4px 4px;
        vertical-align:     middle;
        text-align:         left;
        border-bottom:      1px solid #ddd;
    }

    td {
        padding:            0px 4px;
        vertical-align:     middle;
        .gray-border;
    }

    td.top-border {
        border-top:         1px solid #ddd;
    }
}

.report-table {
    font-size:              12px;
    background-color:       @whitef5;
    border:                 1px solid #bbb;
    text-align:             right;

    th {
        padding:            2px 10px;
        vertical-align:     bottom;
    }

    td {
        padding:            2px 10px;
        vertical-align:     middle;
    }

    td.col-label {
        width:              400px;
        white-space:        nowrap;
        text-align:         left;
    }

    td.col-value {
        width:              60px;
        white-space:        nowrap;
        border-left:        1px solid #ccc;
        border-right:       1px solid #ccc;
    }

}

.multi-table {

    width: 100%;
    margin-top: 10px;

    .bottom-border {
        border-bottom:      1px solid #ddd;
    }

    .bottom-border2 {
        border-bottom:      1px solid #B0B0B0;
    }

    .left-border {
        border-left:        1px solid #ddd;
    }

    .left-border2 {
        border-left:        1px solid #B0B0B0;
    }

    .right-border {
        border-right:       1px solid #ddd;
    }

    .right-border2 {
        border-right:       1px solid #B0B0B0;
    }

    .bg-odd {
        background-color:   @white;
    }

    .bg-even {
        background-color:   @lightgray;
    }

    .bg-rating0 {
        background-color:   @grey;
    }

    .wide-border-odd {
        border-left:        10px solid @white;
        border-right:       10px solid @white;
    }

    .wide-border-even {
        border-left:        10px solid @lightgray;
        border-right:       10px solid @lightgray;
    }

    th {
        vertical-align:     middle;
        text-align:         center;
        padding-left:       4px;
        padding-right:      4px;
        border-left:        0px;
        border-right:       0px;
        border-bottom:      0px;
    }

    td {
        vertical-align:     middle;
        text-align:         center;
        padding-left:       4px;
        padding-right:      4px;
        border-left:        0px;
        border-right:       0px;
        border-bottom:      0px;
    }

}

.attr-input-list {
    .control-group {
        margin-bottom:      8px;

        .controls {
            input {
                min-width:  25em;
                .boxsizing;
            }
            input[type="checkbox"] {
                margin-top: 8px;
                min-width:  1.0em;
                height:     1.0em;
                line-height:1.0em;
            }
            select {
                min-width:  25em;
                .boxsizing;
            }
            select[multiple="true"] {
                min-width:  24.6em;
                .boxsizing;
            }
            textarea {
                min-width:  25em;
                .boxsizing;
            }
        }
    }
}


.item-type-label {
    font-weight:        bold;
    color:              @theme-color;
}

.vertical-text {
    writing-mode:tb-rl;
    -webkit-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    //    width:20px;
    //    height:20px;
}

.stack-chart {

    // Smaller dimensions along with the negative img margin to crop the image.
    width:          1000px;
    height:         177px;
    overflow:       hidden;

    img {
        width:          1000px;
        height:         200px;
        margin:         -10px 0px 0px -75px;
    }
}

.grid-chart {

    img {
    }
}

@RatingChosenColor:         @darkblue2;
@RatingChosenColor-print:   @white;
@RatingChosenBG-print:      @grey;

.auto-rating-content {

    min-height:             400px;
    padding:                10px 20px 40px 20px;
    border:                 1px solid #bbb;
    box-shadow:             1px 1px 0px 0px #aaa;
    -webkit-box-shadow:     1px 1px 0px 0px #aaa;
    background:             white;
    border-radius:          2px;
    -webkit-border-radius:  2px;

}


.auto-table {

    .noselect;

    background-color:       white;
    margin:                 0 0 15px 0;
    border:                 1px solid #bbb;

    @segment-unit-width:    17px;                       // feet-unit-width x 2 + 1.  +1 for the right border.
    @feet-unit-width:       8px;

    // ruler unit numbers    
    .mp-number-bar {
        @number-bar-height:     14px;

        height:                 @number-bar-height;
        line-height:            @number-bar-height;     // must set line-height to get rid of the extra vertical paddings.

        .mp-number {
            display:                inline-block;
            text-align:             center;
            vertical-text:          bottom;
            width:                  @segment-unit-width;
            height:                 @number-bar-height;
            line-height:            @number-bar-height; // must set line-height to get rid of the extra vertical paddings.
            border-left:            1px solid white;    // keep a white border for invisible border to keep the correct width.
            font-weight:            normal;
            font-size:              10px;
        }

        .first-btn {
            border-left:            1px solid #8C8C8C;
        }

        .mid-btn {
            border-left:            1px solid #8C8C8C;
        }
    }

    .mp-tick-bar {                                      // ruler unit tick markers
        @tick-bar-height:       6px;

        line-height:            @tick-bar-height;

        .mp-tick {
            display:                inline-block;
            text-align:             center;
            width:                  @segment-unit-width;
            height:                 @tick-bar-height;
            line-height:            @tick-bar-height;   // must set line-height to get rid of the extra vertical paddings.
            border-right:           1px solid #8C8C8C;
            border-bottom:          1px solid #8C8C8C;
        }
    }

    @mp-lane-height:            21px;

    .td {
        padding:                0px 0px 0px 0px;    // 0 padding so the s-outer div can have full height
        height:                 @mp-lane-height;
        line-height:            @mp-lane-height;
    }
    .td-label {
        .td;
        text-align:             center;
    }
    .td-value {
        .td;
        display:                inline-block;       // make child items lined up horizontally; remove extra line break.
    }

    .first-btn {
        border-left:            1px solid #8C8C8C;
    }

    .mid-btn {
        border-left:            1px solid #8C8C8C;
    }

    .s-outer {                                      // segment rating outer lane
                                                    display:                inline-block;       // make child items lined up horizontally; remove extra line break.
                                                    cursor:                 pointer;
             }
    .s-outer-selected {
        background-color:       @greyB0;
    }
    .f-outer {                                      // feet rating outer lane
                                                    display:                inline-block;       // make child items lined up horizontally; remove extra line break.
                                                    cursor:                 pointer;
             }

    .s-rating-btn {                                 // segment rating
                                                    display:                inline-block;       // need for vertically centered within the parent inline div
                                                    width:                  @segment-unit-width;
                                                    height:                 6px;
                                                    line-height:            6px;
                                                    text-align:             center;
                                                    font-size:              1em;
                                                    border-top:             1px solid #ACACAC;
                                                    border-bottom:          1px solid #ACACAC;
                                                    border-right:           1px solid #ACACAC;
                  }
    .f-rating-btn {                                 // feet rating
                                                    display:                inline-block;       // need for vertically centered within the parent inline div
                                                    width:                  @feet-unit-width;
                                                    height:                 4px;
                                                    border-top:             1px solid #ACACAC;
                                                    border-bottom:          1px solid #ACACAC;
                                                    border-right:           1px solid #ACACAC;
                  }

    .s-rating-no-data {
        .s-rating-btn;
        .bg-rating-no-data;
    }
    .s-rating-1 {
        .s-rating-btn;
        .bg-rating-1;
    }
    .s-rating0 {
        .s-rating-btn;
        .bg-rating0;
    }
    .s-rating1 {
        .s-rating-btn;
        .bg-rating1;
    }
    .s-rating2 {
        .s-rating-btn;
        .bg-rating2;
    }
    .s-rating3 {
        .s-rating-btn;
        .bg-rating3;
    }
    .s-rating4 {
        .s-rating-btn;
        .bg-rating4;
    }
    .s-rating5 {
        .s-rating-btn;
        .bg-rating5;
    }
    .s-rating6 {
        .s-rating-btn;
        .bg-rating6;
    }

    .f-rating-1 {
        .f-rating-btn;
        .bg-rating-1;
    }
    .f-rating0 {
        .f-rating-btn;
        .bg-rating0;
    }
    .f-rating1 {
        .f-rating-btn;
        .bg-rating1;
    }
    .f-rating2 {
        .f-rating-btn;
        .bg-rating2;
    }
    .f-rating3 {
        .f-rating-btn;
        .bg-rating3;
    }
    .f-rating4 {
        .f-rating-btn;
        .bg-rating4;
    }
    .f-rating5 {
        .f-rating-btn;
        .bg-rating5;
    }
    .f-rating6 {
        .f-rating-btn;
        .bg-rating6;
    }

}





.txt-outline {
    // color:          white;
    // text-shadow:    -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

// CSS for star rating strip.  See usage in ko.bindingHandlers.starRating.
.starRating span {
    margin:             2px 4px 2px 4px;
    width:              19px;
    height:             18px;
    color:              black;
    font-size:          0.95em;
    //font-size:          11px;
    text-align:         center;
    //text-shadow:        1px 1px 1px #FFFFFF;    // 3d shadow
    display:            inline-block;
    cursor:             pointer;
    border-radius:      12px;                   // make circle
    box-shadow:         0px 0px 1px #333;       // make circle
    .noselect;
}
.starRating:hover span              {                            }
.starRating:hover span.hoverCursor  { background-color: #E0E0E0; }
.starRating:hover span.hoverChosen  { background-color: #EFEFEF; color: @RatingChosenColor; }
.starRating span.chosen             { background-color: #EFEFEF; color: @RatingChosenColor; }

// Different background colors for different rating.
.starRating:hover span.hoverChosen-1{ .bg-rating-1; .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen0 { .bg-rating0;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen1 { .bg-rating1;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen2 { .bg-rating2;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen3 { .bg-rating3;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen4 { .bg-rating4;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen5 { .bg-rating5;  .txt-outline; color: @RatingChosenColor; }
.starRating:hover span.hoverChosen6 { .bg-rating6;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen-1           { .bg-rating-1; .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen0            { .bg-rating0;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen1            { .bg-rating1;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen2            { .bg-rating2;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen3            { .bg-rating3;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen4            { .bg-rating4;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen5            { .bg-rating5;  .txt-outline; color: @RatingChosenColor; }
.starRating span.chosen6            { .bg-rating6;  .txt-outline; color: @RatingChosenColor; }

.pending {
    color:      @grey90;
    font-style: italic;
}


.tmpl-container {
    background-image:       url('/public/images/bg-violet-light1.jpg');
    background-repeat:      no-repeat;
    background-size:        cover;

    padding:                10px 20px 10px 10px;

    border:                 1px solid #bbb;
    border-radius:          8px;
    -webkit-border-radius:  8px;

    box-shadow:             1px 1px 0px #888;
    -webkit-box-shadow:     1px 1px 0px #888;
}

.tmpl-def-region {
    font-size:      0.9em;
}

.tmpl-def-table {

    .attr-panel;

    .first {
        padding-left:       20px;   // add space to the left for first col
    }
    .last {
        padding-right:      20px;   // add space to the right for the last col
    }
    .col-remaining {
        width:              99%;    // mark a col (td) to take up the rest of the space in table.
    }
    .cmd-cell {
        white-space:        nowrap;
        text-align:         left;
        padding:            0px 0px 0px 15px;
    }

    th {
        padding:            0px 4px 2px 4px;
        text-align:         left;
        border-bottom:      1px solid #bbb;
        white-space:        nowrap;
        vertical-align:     bottom;
    }
    .th-section {
        padding-top:        15px;
        padding-bottom:     10px;
        }
    .th-system {
        font-size:          0.85em;
        font-weight:        normal;
        color:              #222222;
        width:              0;
        line-height:        1.4em;
        padding-left:       4px; 
        padding-right:      6px;
    }
    .td-system {
        padding-left:       4px; 
        padding-right:      6px;
        width:              2em;
    }

    tr {
    }

    td {
        padding:            1px 2px;
        text-align:         center;
        vertical-align:     middle;
    }

    label {
        font-weight:        bold;
        padding:            0px 8px 0px 0px;
        text-align:         right;
    }

    input {
        margin:             0;
        padding:            2px 6px 2px 6px;
    }

    input[type=text] {
        font-size:          13px;
        width:              100%;
        box-sizing:         border-box;
    }

    input[type=checkbox] {
    }

    input.choice {
        width:              200px;
    }

    select {
        width:              100%;
        height:             20px;
        font-size:          12px;
        box-sizing:         border-box;
        margin:             0;
        padding:            0;
    }

    textarea {
        margin-right:       10px;
    }

}

.tmpl-rating-header span {
    float:          left;
    width:          30px;
    text-align:     center;
}


.tmpl-form {
    padding:                10px 20px 40px 20px;
    border:                 1px solid #bbb;
    box-shadow:             1px 1px 0px 0px #aaa;
    -webkit-box-shadow:     1px 1px 0px 0px #aaa;
    background:             white;
    border-radius:          2px;
    -webkit-border-radius:  2px;

    .sub-template {
        padding:            30px 20px 30px 20px;
        .gray-s-border;
        background-color:   #e8e8e8;
    }

    .tmpl-section {

        width:              100%;
        background-color:   #f9f9f9;
        border-bottom:      1px solid #dddddd;

        .tmpl-section-data {
            width:              100%;
            vertical-align:     top;

            padding:            0;
            border-left:        1px solid #bbb;
            border-top:         1px solid #bbb;

            .tmpl-section-data-table {
                width:                  100%;
                background-color:       @whitef5;

                th {
                    padding:            2px 6px 2px 6px;
                    text-align:         left;
                    vertical-align:     middle;
                    background-image:   url('/public/images/bg-gray4.png');
                    border-top:         1px solid #dddddd;
                    border-bottom:      1px solid #dddddd;
                    .summary-rating {
                        font-weight:    normal;
                    }
                }
                td {
                    color:              darken(@starbucks_green, 10);
                    padding:            2px 4px 2px 8px;
                    text-align:         left;
                    vertical-align:     middle;
                    .value-color;
                }
                .td-label {
                    text-align:         right;
                    padding-right:      10px;
                    color:              black;
                }
                .td-tlabel {
                    .td-label;
                    .valign-top;
                }

                input {
                    .boxsizing;
                    font-size:          1em;
                    padding:            3px 6px;
                    margin:             0;
                    width:              100%;
                }
                select {
                    .boxsizing;
                    font-size:          1em;
                    padding:            3px 2px;
                    margin:             0;
                    width:              100%;
                }
                .input-note {
                    .boxsizing;
                    font-size:          1em;
                    padding:            3px 6px;
                    margin:             0;
                    width:              90%;
                }

                .note-img {
                    vertical-align:     middle;
                    width:              18px;
                    height:             18px;
                }

            }

        }

        .tmpl-section-attachment {
            vertical-align:     top;    // makes child table stays at top and leaves remaining vertical space blank at bottom

            padding:            0;
            border-top:         1px solid #bbb;
            border-right:       1px solid #bbb;
            border-left:        1px solid #ddd;

            .tmpl-section-attachment-table {

                @att-box-width:         96px;
                @att-box-height:        72px;
                @att-box-hspace:        8px;
                @att-box-vspace:        2px;

                width:                  (@att-box-width + @att-box-hspace) * 2 + @att-box-hspace + 4px;     // +4 borders.

                th, td {
                    padding:            0;
                }

                .tmpl-att-cmds {
                    border-top:         1px solid #dddddd;
                    border-bottom:      1px solid #dddddd;
                    background-image:   url('/public/images/bg-gray4.png');
                    padding:            2px 6px;
                    text-align:         right;
                    white-space:        nowrap;
                }

                .tmpl-att-panel {

                    padding:            @att-box-hspace @att-box-hspace @att-box-vspace*2 0px;

                    .tmpl-att-table {
                        .table-center;

                        .tmpl-att-box {
                            width:              @att-box-width;
                            height:             @att-box-height;
                            margin:             @att-box-vspace 0 0 @att-box-hspace;
                            border:             1px dotted #8C8CBB;

                            .tmpl-att-upload {
                                width:          100%;
                                height:         100%;
                            }

                            .tmpl-att-img {
                                position:       relative;   // start new coordinate system for children
                                width:          100%;
                                height:         100%;

                                .img-cmd-bg {
                                    position:   absolute;
                                    top:        0;
                                    right:      0;
                                    z-index:    1;
                                    width:      100%;
                                    height:     22px;
                                    opacity:    0.0;        // dim until parent container is hovered.
                                    background: white;
                                }
                                .img-cmds {
                                    position:   absolute;
                                    top:        0;
                                    right:      0;
                                    z-index:    2;
                                    width:      100%;
                                    height:     22px;
                                    opacity:    0.0;        // dim until parent container is hovered.
                                    text-align: right;

                                    .img-icon {
                                        width:          16px;
                                        height:         16px;
                                        margin:         2px 6px 2px 6px;
                                        background:     white;
                                        border:         1px solid #bbb;
                                        border-radius:  3px;
                                    }
                                }

                                .img-show {
                                    position:   absolute;
                                    top:        0;
                                    left:       0;
                                    z-index:    0;
                                    width:      100%;
                                    height:     100%;
                                    img {
                                        width:  @att-box-width;
                                        height: @att-box-height;
                                    }
                                }

                            }
                            .tmpl-att-img:hover {
                                .img-cmd-bg {
                                    opacity:    0.60;       // lite up when parent container is hovered.
                                }
                                .img-cmds {
                                    opacity:    1.00;       // lite up when parent container is hovered.
                                }
                            }
                        }

                        .tmpl-att-label {
                            margin:             0 0 0 @att-box-hspace;
                            padding:            0 1px;
                            width:              @att-box-width;
                            height:             12px;
                            line-height:        12px;
                            font-size:          9px;
                            overflow:           hidden;
                        }
                    }
                }
            }
        }
    }

}



.assetobj-tmpl-container {
    padding:                10px 20px 10px 10px;

    background-image:       url('/public/images/bg-violet-light1.jpg');

    border:                 1px solid #bbb;
    border-radius:          8px;
    -webkit-border-radius:  8px;

    box-shadow:             1px 1px 0px #888;
    -webkit-box-shadow:     1px 1px 0px #888;
}

.assetobj-tmpl-table {

    th {
        padding:            0px 4px 4px 4px;
        text-align:         left;
        vertical-align:     middle;
        font-weight:        normal;
    }

    td {
        padding:            0px 4px;
        text-align:         left;
        vertical-align:     middle;
        font-size:          12px;
    }
}

.assetobj-section-margins {
    margin:                 5px 5px 5px 5px;
}

.assetobj-section {
    .assetobj-section-margins;
    padding:                5px 0 20px 0;
    background:             @lightgray;
    border:                 1px solid #bbb;
    border-radius:          3px;
    -webkit-border-radius:  3px;
    box-shadow:             1px 1px 0px #888;
    -webkit-box-shadow:     1px 1px 0px #888;

}

.marker-container {

    position:                   relative;   // start new coordinate system for children
    margin-top:                 4px;
    margin-bottom:              10px;
    border:                     1px dotted #8C8CBB;
    padding:                    5px 5px 5px 10px;

    // ** IMPORTANT **  Don't change the marker-container width and img margin.  The markers' position is visually based on them.
    width:                      580px;
    height:                     auto;

    .marker-park {
        position:               absolute;
        z-index:                10;
        top:                    10px;
        left:                   5px;
        width:                  30px;
        height:                 30px;
        border:                 1px dotted @darkgray2;

        .marker-park-rect {
            margin:             5px;
            width:              20px;
            height:             20px;
        }
    }

    img {
        max-width:              540px;  // 580-37-something
        height:                 auto;
        min-height:             150px;
        margin:                 5px 5px 5px 32px;
    }

    .marker {
        position:               absolute;
        z-index:                100;
        width:                  20px;
        height:                 20px;
        text-align:             center;
        background:             @yellow;
        border:                 1px solid #4C4CBB;
        cursor:                 pointer;
        -webkit-border-radius:  5px;
        border-radius:          5px;
        box-shadow:             1px 1px 0px #888;
        -webkit-box-shadow:     1px 1px 0px #888;
    }

}

.title-action-row { 
    // place after row-fluid

    .title-span {
        // place after span4; must have same line-height as action-span.  e.g. <h3 class="span4 title-span">
        margin-top:         0;
        margin-bottom:      0;
        color:              @theme-color;
        white-space:        nowrap;

        .subtitle {
            font-weight:    normal;
            line-height:    0.5em;
            font-size:      0.5em;
            color:          #777;
        }

        .action-right {
            // place within title-span at the same line as title but float to right
            float:          right;
        }
    }

    .action-left {
        // place after span4; must have same line-height as action-span.  e.g. <h3 class="span4 title-left">
        margin-top:         0;
        margin-bottom:      0;
        text-align:         left;
    }

    .action-span {
        // place after span8; must have same line-height as title-span.  e.g. <h3 class="span8 action-span">
        margin-top:         0;
        margin-bottom:      0;
        text-align:         right;
    }

}

.title-action-bar {
    position:       relative;   // serves as container for absolute position children

    .title-action-title {
        margin:         0;
    }

    .title-action-actions {
        position:       absolute;
        top:            10px;
        text-align:     right;

        // Override width with style in html where it's used.
        right:          0;
    }

    .flush-right {
        top:            0;
        right:          0;
        text-align:     right;
    }

}

.full-panel {
    // with all borders
    width:                  100%;
    .border-box;                            // avoid adding extra width to 100% when adding padding.
    background-color:       @whitef5;
    border:                 1px solid #bbb;

    .full-inner-panel {
        margin:             20px;
    }
}

.full-panel-3 {
    // with 3 borders
    width:                  100%;
    .border-box;                            // avoid adding extra width to 100% when adding padding.
    background-color:       @whitef5;
    border-left:            1px solid #bbb;
    border-right:           1px solid #bbb;
    border-bottom:          1px solid #bbb;

    .full-inner-panel {
        margin:             20px;
    }
}

.attr-panel {
    width:                  100%;
    font-size:              13px;
    background-color:       @whitef5;
    border:                 1px solid #bbb;
}

.attr-table {

    width:                  100%;
    background-color:       @whitef5;
    border:                 1px solid #bbb;

    .first {
        padding-left:       20px;   // add space to the left for first col
    }
    .last {
        padding-right:      20px;   // add space to the right for the last col
    }
    .col-remaining {
        width:              99%;    // mark a col (td) to take up the rest of the space in table.
    }

    .cmd-row {
        padding-top:        15px;
        padding-bottom:     15px;
    }

    th {
        padding:            8px 4px 4px 4px;
        text-align:         left;
        vertical-align:     bottom;
        border-bottom:      1px solid #888888;
        white-space:        nowrap;
        background-color:   @greyE0;

        .summary-rating {
            font-weight:    normal;
        }
    }

    td {
        padding:            5px 4px 5px 4px;
        text-align:         left;
        vertical-align:     top;
        border-bottom:      1px solid #cccccc;
    }
    td.section-header {
        border-bottom:      1px solid #808080;
    }
    td.no-border {
        border:             none;
    }

    label {
        text-align:         right;
    }

    @atable-input-height:   1.9em;
    @atable-input-fontsize: 0.9em;
    
    select {
        box-sizing:         border-box;
        width:              8.0em;
        height:             @atable-input-height;
        line-height:        @atable-input-height;
        font-size:          @atable-input-fontsize;
        margin:             0 0.8em 0 0;
        padding:            0;
    }

    input {
        box-sizing:         border-box;
        width:              8.0em;
        height:             @atable-input-height;
        line-height:        @atable-input-height;
        font-size:          @atable-input-fontsize;
        vertical-align:     middle;
        margin:             0;
        padding:            0px 3px 0px 3px;
        border:             1px solid #bbbbbb;
        border-radius:      3px;
        // Add some margin to inser some space in front of the validation error message.
        margin-right:       6px;
    }

    input[type=checkbox] {
        box-sizing:         border-box;
        width:              1.1em;
        height:             1.1em;
        font-size:          @atable-input-fontsize;
    }

    input.choice {
        width:              95%;
        margin-top:         2px;
    }

    textarea {
        margin-right:       10px;
    }

    input:focus, select:focus, textarea:focus {
        border-color:       #2d6987;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px #7ab5d3;
        -moz-box-shadow:    inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px #7ab5d3;
        box-shadow:         inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px #7ab5d3;
    }
    
    .section-name {
        font-size:          1.2em;
        font-weight:        bold;
        color:              @lightblue3;
        padding:            4px 20px 4px 8px;
    }

}

.list-table {

    font-size:              1.1em;
    background-color:       @whitef5;
    border:                 1px solid #bbb;

    td {
        padding:            0px 18px 4px 18px;
        text-align:         left;
        vertical-align:     top;
    }
}

.light-img {
    opacity:    .6;
    cursor:     pointer;
}

.light-img:hover {
    opacity:    1;
}

.heavy-img {
    opacity:    1;
    cursor:     pointer;
}


// Override Bootstrap's breadcrumb
.my-breadcrumb {
    margin:                 0 0 5px 0;
    padding:                6px 12px;
    font-weight:            bold;
    border:                 1px solid #bbb;
    border-radius:          0px;
    -webkit-border-radius:  0px;
}

.my-actionbar {
    margin-top: 0px;
    margin-bottom: 0px;
    padding:    0 0 15px 0;
}

.table-title {
    padding:        2px 0 6px 0;
    font-size:      14px;
    font-weight:    bold;
    color:          @olive;
}

.id-label {
    color:          darken(@maroon, 0);
}
.id-color {
    color:          @starbucks_green;
}

.value-label {
    color:          black;
}
.value-color {
    color:          darken(@starbucks_green, 10);
    white-space:	normal;      
    word-wrap:		break-word;
}

.key-label {
    font-weight:    bold;
}
.key-input {
    font-weight:    bold;
}


// NOTE: set margin:0 to all input, checkbox, or selet to vertically align its side label.

// Two column panel.  Used in
// <div class="row">
//   <div class="span2 label-col"/> <div class="span14 value-col"/>
.label-col {
    text-align:     right;
    color:          black;
    padding:        0 8px 0 10px;
}

.value-col {
    text-align:     left;
    color:          #404040;
    padding:        0 8px 0 12px;
    margin:         0;
    .gray-border-left;
}



.ticket-section {
    background:         @grayF8;
    border:             1px solid #d8d8d8;
    margin:             0 0 10px 0;

    .section-header {
        padding:        1px 12px 1px 12px;
        background:     @grayE0;
        border-bottom:  1px solid #dcdcdc;
        span {
            .big-title12;
        }
    }

}

.spn-control-ticket {
    .spn-common {
        min-height:     0px;
        margin-left:    0px;
        margin-right:   0px;
        padding-right:  0.40%;
    }
    .span1 {
        .spn-common;
        width:          8.33%;
    }
    .span2 {
        .spn-common;
        width:          16.66%;
    }
    .span3 {
        .spn-common;
        width:          25.00%;
    }
    .span4 {
        .spn-common;
        width:          33.33%;
    }
    .span5 {
        .spn-common;
        width:          41.66%;
    }
    .span6 {
        .spn-common;
        width:          50.00%;
    }

    .span7 {
        .spn-common;
        width:          58.33%;
    }
    .span8 {
        .spn-common;
        width:          66.66%;
    }
    .span9 {
        .spn-common;
        width:          75.00%;
    }
    .span10 {
        .spn-common;
        width:          83.33%;
    }
    .span11 {
        .spn-common;
        width:          91.66%;
    }
    .span12 {
        .spn-common;
        width:          100%;
    }

}
// Switch row-fluid span to 100% width when the screen is resized to a small width.
@media screen and (max-width: 767px) {
    .spn-control-ticket {
        .row-fluid [class*="span"] {
            width: 100%;
        }
    }
}
// Switch row-fluid span to 100% width when the screen is resized to a small width.
@media screen and (max-width: 980px) {
    .spn-control-ticket-title {
        .row-fluid [class*="span"] {
            width:  100%;
            margin: 0;
        }
    }
}

.spn-control-assetinfo {
    .spn-common {
        min-height:     0px;
        margin-left:    0px;
        margin-right:   0px;
        padding-right:  0.40%;
    }
    .span1 {
        .spn-common;
        width:          8.33%;
    }
    .span2 {
        .spn-common;
        width:          16.66%;
    }
    .span3 {
        .spn-common;
        width:          25.00%;
    }
    .span4 {
        .spn-common;
        width:          33.33%;
    }
    .span5 {
        .spn-common;
        width:          41.66%;
    }
    .span6 {
        .spn-common;
        width:          50.00%;
    }

    .span7 {
        .spn-common;
        width:          58.33%;
    }
    .span8 {
        .spn-common;
        width:          66.66%;
    }
    .span9 {
        .spn-common;
        width:          75.00%;
    }
    .span10 {
        .spn-common;
        width:          83.33%;
    }
    .span11 {
        .spn-common;
        width:          91.66%;
    }
    .span12 {
        .spn-common;
        width:          100%;
    }

}

.span-control-appconfig {
    .spn-common {
        min-height:     0px;
        margin-left:    10px;
    }
    .span1 {
        .spn-common;
        width:          8%;
    }
    .span2 {
        .spn-common;
        width:          15%;
    }
    .span3 {
        .spn-common;
        width:          24%;
    }
    .span4 {
        .spn-common;
        width:          32%;
    }
    .span5 {
        .spn-common;
        width:          40%;
    }
    .span6 {
        .spn-common;
        width:          49%;
    }
}

// Section for showing and editing Issue and WorkOrder detail
.two-col-section {

    @line-height:       2.4em;
    @label-width:       100px;
    @label-width-80:    80px;

    .divider {
        .gray-border-bottom;
    }

    .blank-line {
    }

    .line {
        clear:              both;
        margin-bottom:      6px;

        .col-one {
            float:              left;
            width:              @label-width;
            text-align:         right;
            color:              black;
            padding:            0;
        }
        .col-one-80 {
            .col-one;
            width:              @label-width-80;
        }

        .col-two {
            margin-left:        @label-width;
            text-align:         left;
            color:              #404040;
            padding:            0;
        }
        .col-two-80 {
            .col-two;
            margin-left:        @label-width-80;
        }

        .field-label {
            padding-right:      6px;
        }

        .value-text {
            display:            block;
            vertical-align:     bottom;
            margin-top:         0;
            margin-bottom:      0;
            padding:            1px 6px 1px 6px;
        }

        .text-box {
            background-color:   @greyF0;
            border:             1px dotted #ddd;
            padding:            0px 6px 0px 6px;
        }

        input {
            color:              black;
            background-color:   @input-yellow;
            font-size:          1em;
            width:              100%;
            margin-top:         0;
            margin-bottom:      0;
            padding:            0px 6px 0px 6px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing:    border-box;
            box-sizing:         border-box;         // border-box to make the input not taking up extra width on border and padding.
        }

        input:disabled {
            color:              #404040;
            background-color:   @greyF0;
            border:             1px dotted #ddd;
        }
        input:disabled.static {
            color:              #404040;
            background-color:   @greyF0;
            border:             1px dotted #ddd;
        }
        input[readonly] {
            color:              #404040;
            background-color:   @lightgray0;
            border:             1px dotted #ddd;
            cursor:             text;
        }
        input[readonly].static {
            color:              #404040;
            background-color:   @lightgray;
            border:             1px dotted #ddd;
            cursor:             text;
        }

        select {
            color:              black;
            background-color:   @input-yellow;
            font-size:          1em;
            width:              100%;
            height:             20px;
            margin-top:         0;
            margin-bottom:      0;
            padding:            0px 2px 0px 2px;
        }
        select:disabled {
            color:              #404040;
            background-color:   @lightgray0;
            border:             1px dotted #ddd;
        }

        textarea {
            color:              black;
            background-color:   @input-yellow;
            font-size:          1em;
            width:              100%;
            margin-top:         0;
            margin-bottom:      0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing:    border-box;
            box-sizing:         border-box;
        }
        textarea[readonly] {
            color:              #404040;
            background-color:   @greyF0;
            cursor:             text;
        }
        textarea:disabled {
            color:              #404040;
            background-color:   @lightgray;
            border:             1px dotted #ddd;
        }

    }

}

.folder-dates {
    // label used for date item
    label {
        display:                inline-block;
        padding:                2px 4px 1px 4px;
        margin:                 0;
        width:                  6.5em;
        height:                 1em;
        line-height:            1em;
        font-size:              1em;
        font-weight:            bold;
        color:                  white;
        text-shadow:            0 -1px 0 rgba(0, 0, 0, 0.25);
        white-space:            nowrap;
        vertical-align:         baseline;
        -webkit-border-radius:  3px;
        -moz-border-radius:     3px;
        border-radius:          3px;
    }

    label:hover,
    label:focus {
        text-decoration:        none;
        cursor:                 default;
    }

    th {
        .item-header;
        line-height:            1.6em;
    }
}

.font-bold {
    font-weight:    bold;
}

.font-normal {
    font-weight:    normal;
}

.note {
    color: @grey70;
}

.border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box; // border-box to make the input not taking up extra width on border and padding.
}

.boxsizing {
    height:             100%;
    .border-box;
}

.input-box {
    .boxsizing;
    font-size:          1em;
    line-height:        1em;
    margin:             0;
    width:              100%;
    padding:            3px 6px;
}
input.input-box {
    .input-box;
}

.input-box-slim {
    .input-box;
    padding:            0px 8px;
}
input.input-box-slim {
    .input-box-slim;
}

.select-box {
    .boxsizing;
    font-size:          1em;
    margin:             0;
    padding:            3px 2px;
    width:              100%;
}
select.select-box {
    .select-box;
}


.input-required {
    display:    inline-block;
    width:      8px;
}
.input-block {
    padding:    0px 10px 0px 0px;
}

input.input-username {
    height:     16px;
    width:      120px;
    padding:    2px 2px;
    margin:     2px 2px 2px 0px;
}


// Make the fucking checkboxes line up vertically with the labels.  Work on checkbox and radio.
//  <label class="input-mid-10"><input type="checkbox" /><span>Label text</span></label>
.input-mid-10 {
    height:         1.0em;          // height and line-height control the size of the checkbox.
    line-height:    1.0em;
    margin:         1px 0 1px 0;    // normal checkbox has some bottom margins; set it explicitly.

    input {
        height:     100%;           // height controls the size of the checkbox.  100% to make it same size as parent.
        margin:     0;              // remove all margin surrounding the checkbox to center it vertically and horizontally.
    }
    span {
        // .font-07;
    }
}
.input-mid-09 {
    height:         0.9em;          // height and line-height control the size of the checkbox.
    line-height:    0.9em;
    margin:         1px 0 1px 0;    // normal checkbox has some bottom margins; set it explicitly.

    input {
        height:     100%;           // height controls the size of the checkbox.  100% to make it same size as parent.
        margin:     0;              // remove all margin surrounding the checkbox to center it vertically and horizontally.
    }
    span {
        .font-09;
    }
}
.input-mid-07 {
    height:         0.8em;          // height and line-height control the size of the checkbox.
    line-height:    0.8em;
    margin:         1px 0 1px 0;    // normal checkbox has some bottom margins; set it explicitly.

    input {
        height:     100%;           // height controls the size of the checkbox.  100% to make it same size as parent.
        margin:     0;              // remove all margin surrounding the checkbox to center it vertically and horizontally.
    }
    span {
        .font-07;
    }
}
.input-tiny {
    .input-mid-07;
}


// a.image-link { border: 0px none; }

#app-busy {
    visibility: hidden;
    position:   fixed;    /* fixed position on viewport so that scrolling has no effect on it */
    top:        30px;
    right:      10px;
    z-index:    100;
}

.app-busy-icon {
    display:                none;       // Use display so jquery's show()/hide() would work.
    position:               fixed;      /* fixed position on viewport so that scrolling has no effect on it */
    top:                    30px;
    right:                  10px;
    z-index:                9999;
    width:                  32px;
    height:                 32px;
    background:             url('/public/images/busy_blue.gif') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size:   cover;
    -o-background-size:     cover;
    background-size:        cover;
}

// Override Bootstrap's margin-bottom for the tabs
.nav {
    margin-left: 0;
    margin-bottom: 0px;
    list-style: none;
}
// Override Bootstrap's background-color for the active tab
.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
    //background-color: @whitef5;
    background-image:   url('/public/images/bg-white-refined.jpg');
    //text-shadow:        1px 1px 1px #aaa;
    font-weight:        bold;
    color:              @theme-color;
    //color:              @darkblue2;
}

// add to .nav-tabs to add bottom border
.nav-no-content {
    border-bottom:      1px solid #a5a5a5;
}

.disabled-tab {
    pointer-events:     none;
    cursor:             not-allowed;
    .noselect;
}

.tab-panel {
    padding:            20px 16px 16px 16px;

    background-color:   @whitef5;
    //background-color:   white;
    //background-image:   url('/public/images/bg-white-refined.jpg');

    min-height:         400px;

    // Round border
    border-left:        1px solid #d5d5d5;
    border-right:       1px solid #d5d5d5;
    border-bottom:      1px solid #d5d5d5;

    // Add right and bottom margin so that the shadow would show.
    margin:             0 2px 2px 0px;

    // Shadow
    box-shadow:         1px 1px 0px #888;
    -webkit-box-shadow: 1px 1px 0px #888;
}

.tab-panel-folder {
    .tab-panel;
    padding:            6px 16px 16px 16px;

    .tab-panel-folderbar {
        margin:         2px 0px 2px 0px;
        // Reset text size and set height to set overall height.
        font-size:      12px;
        height:         12px;
        position:       relative;   // serves as container for absolute position children
        .tab-panel-folder-icon {
            position:       absolute;
            top:            -5px;
            right:          16px;
        }
    }
}

.tab-panel-attachment {
    .tab-panel;

    padding:            20px 20px 8px 20px;
    min-height:         0px;
}


.reference-panel {

    margin-bottom:              10px;

    .folder-bar-section {
        padding:                0px 10px 0px 0px;

        .reference-bar {
            padding:            0px 10px 0px 10px;  // left/right padding same as my-table to line up content.
        }
    }

    .reference-section {
        padding:                8px 20px 8px 20px;
        border:                 1px solid @olive;
        box-shadow:             1px 1px 0px #888;
        -webkit-box-shadow:     1px 1px 0px #888;
    }

}

#attachment_panel {
    padding:                0px 0px 16px 0px;
}

#attachment-pane {

}

#upload_panel {
    display:                none;   // hidden initially
    margin-top:             8px;
    padding:                8px 8px 20px 8px;
    border:                 1px solid #888;
    margin-bottom:          1px;
    -webkit-border-radius:  2;
    border-radius:          2px;
    box-shadow:             0px 1px 0px #888;
    -webkit-box-shadow:     0px 1px 0px #888;
}

.asset-oid-panel {
    position:           relative;   // start new coordinate system for children
    //    height:             1.5em;

    .asset-oid-canvas {
        position:       absolute;
        top:            0px;
        left:           0px;
        width:          250px;
        margin:         0;
        z-index:        1;
        .dbg-border;
    }

    .asset-oid-cmds {
        position:       absolute;
        top:            0px;
        right:          0px;
        margin:         0;
        z-index:        2;
    }

}

.pic-canvas {
    .pic-upload {
        display:        none;
        height:         144px;
        margin:         0;
        background:     #ebebeb;
        border:         1px dotted #888;
    }
    .pic-display {
        display:        none;
        height:         144px;
        img {
            width:      100%;
            max-height: 100%;
        }
        border:         1px dotted #888;
    }
}

.media-url-panel {
    position:           relative;   // start new coordinate system for children

    .media-url-cmds {
        position:       absolute;
        top:            0px;
        right:          0px;
        margin:         0;
        z-index:        2;
    }

    .media-url-canvas {
        position:       relative;
        min-height:     20px;
        z-index:        1;
        margin:         0;

        .pic-url-display {
            display:        none;
            height:         144px;
            img {
                max-width:  100%;
                max-height: 100%;
            }
        }

        .video-url-display {
            display:        none;
            iframe {
                width:      240px;
                height:     144px;
            }
        }
    }
}

.subobj-panel {
    .subobj-header {
        position:           relative;   // start new coordinate system for children

        .subobj-title {
            position:       relative;
            min-height:     20px;
            z-index:        1;
            margin:         0;
            color:          gray;
        }

        .subobj-cmds {
            position:       absolute;
            top:            0px;
            right:          0px;
            margin:         0;
            z-index:        2;
        }

    }

}


.folder-bar {
    padding:                0px 10px 0px 10px;  // left/right padding same as my-table to line up content.
}

.folder-section {
    padding:    10px 20px 60px 20px;
}

.right-actions {
    text-align:         right !important;
    padding-right:      10px;
}

.right-actions0 {
    text-align:         right !important;
    padding-right:      0px;
}
.right-actions1 {
    text-align:         right !important;
    padding-right:      1px;
}
.right-actions2 {
    text-align:         right !important;
    padding-right:      2px;
}

.left-actions0 {
    text-align:         left !important;
    padding-right:      0px;
}
.left-actions1 {
    text-align:         left !important;
    padding-right:      1px;
}
.left-actions2 {
    text-align:         left !important;
    padding-right:      2px;
}


.geo-1-mile td {
    border-top: 1px solid #d8d8d8;
}

.geo-summary-rating a {
    color:              black;
    text-decoration:    none;
}

.geo-summary-rating a:hover {
    color:              red;
    text-decoration:    underline;
}


#ainfo-gallery {
    width:          100%;
    margin-top:     8px;
    padding-left:   8px;

    #gallery {
        width:      60%;

        .slideshow-container {
            .slideshow {
            }
        }
        .image-title {
            font-weight:    normal;
            font-size:      1.0em;
        }
    }

    #thumbs {
        width:      32%;

        img {
            width:  50px;
            height: auto;
        }
    }

}

/* The overview track styles.
   -------------------------------------------------- */
.overview-track {


}


/* Grid styles.  Customize grid styles in slick-default-theme.css
   -------------------------------------------------- */

.grid-table-group {
    width:          1150px;
}

.grid-table {
    width:                  100%;
    height:                 450px;
    font-family:            arial;
    font-size:              9pt;
    border:                 1px solid #bbb;
    margin-bottom:          1px;
    -webkit-border-radius:  5px;
/* border-radius: 5px;  IE renders rounded corner very SLOW!! */
}

// Class for the inner div at each cell of the grid.  Used in columnFormatter().
.grid-cell {
    padding: 2px 4px 2px 4px;
    //  border: 1px dotted #BCBCBB;
}

.grid-cell-attachment {
}

.grid-cell-attachment img {
    width:              18px;
    height:             18px;
    padding:            0px 4px 0px 0px;
    vertical-align:     middle;
}

.grid-cell-percentage {
    float:              left;           // work with the overflow:hidden.  take fixed with at left, overflow:hidden takes the remaining
    width:              24px;
    text-align:         right;
    font-size:          7pt;
    padding:            0px 3px 0px 0px;
}

.grid-cell-percentage-bar {
    overflow:           hidden;         // when following the float:left div, take the remaining width of the parent.
    padding:            0 2px 0 0;      // pad 2 to show the whole drawn rect including the two 1px borders.
}

.grid-cell-percentage-drawn {
    display:                inline-block;
    -webkit-border-radius:  3px;
    height:                 6px;
    /* width: width will be set dynamically based on the percentage value in each cell. */
    vertical-align:         middle;
    border:                 1px solid black;
}

.screen-cover {
    position:           fixed;
    z-index:            9999;
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    background-image:   url('/public/images/bg-white-refined.jpg');
}

.vmiddle {
    vertical-align:     middle;
}

.bold {
    font-weight:        bold;
}

.italic {
    font-style:     italic;
}

.div-center {
    float:          none;
    margin:         0 auto;
    text-align:     center;
}

// Center a table inside a parent.  e.g. <table class="table-center">
.table-center {
    margin-left:    auto;
    margin-right:   auto;
}

.cell-center {
    text-align:     center;
    vertical-align: middle;
}

.cell-right {
    text-align: right;
}

.center {
    text-align: center !important;
}

.left {
    text-align: left !important;
}

.right {
    text-align: right !important;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.cond-excellent {
    height: 100%;
    background-color: cyan;
}

.cond-good {
    height: 100%;
    background-color: @green;
}

.cond-fair {
    height: 100%;
    background-color: @yellow;
}

.cond-bad {
    height: 100%;
    background-color: @orange;
}

.cond-worst {
    height: 100%;
    background-color: @red;
}

.cond-na {
    height: 100%;
    // background-color: @grey;
}

.bg-rating-no-data {
    background: @greyF0;
}

.bg-rating-1 {  // rating -1 for NA
                background: @theme-rating-1;
             }

.bg-rating0 {
    background: @theme-rating0;
}

.bg-rating1 {
    background: @theme-rating1;
}

.bg-rating2 {
    background: @theme-rating2;
}

.bg-rating3 {
    background: @theme-rating3;
}

.bg-rating4 {
    background: @theme-rating4;
}

.bg-rating5 {
    background: @theme-rating5;
}

.bg-rating6 {
    background: @theme-rating6;
}

.rating-dot {
    display:                inline-block;
    width:                  12px;
    height:                 12px;
    vertical-align:         middle;
    -webkit-border-radius:  5px;
    border-radius:          5px;
    box-shadow:             1px 1px 0px #888;
    -webkit-box-shadow:     1px 1px 0px #888;
}

.rating-1 {
    .rating-dot;
    .bg-rating-1;
}

.rating0 {
    .rating-dot;
    .bg-rating0;
}

.rating1 {
    .rating-dot;
    .bg-rating1;
}

.rating2 {
    .rating-dot;
    .bg-rating2;
}

.rating3 {
    .rating-dot;
    .bg-rating3;
}

.rating4 {
    .rating-dot;
    .bg-rating4;
}

.rating5 {
    .rating-dot;
    .bg-rating5;
}

.rating6 {
    .rating-dot;
    .bg-rating6;
}

.toggle {
    height: 9px;
    width: 9px;
    display: inline-block;
}

.toggle.expand {
    background: url(/public/images/expand.gif) no-repeat center center;
}

.toggle.collapse {
    background: url(/public/images/collapse.gif) no-repeat center center;
}

.toggle.expand-fill {
    background: url(/public/images/expand-fill.gif) no-repeat center center;
}

.toggle.collapse-fill {
    background: url(/public/images/collapse-fill.gif) no-repeat center center;
}

.grid-cmd-add {
    font-size:      10pt;
    font-style:     italic;
    color:          grey;
}

.grid-cmd-add:hover {
    font-style:     normal;
    color:          blue;
}

#grid-option-panel {
    display:        none;
    padding:        3px;
    background:     #dddddd;
    color:          black;
    font-family:    arial;
    font-size:      8pt;
}

#grid-option-panel .placeholder {
    color:          gray;
}

#grid-option-panel select {
    width:          auto;
    height:         25px;
    margin:         0 4px 0 4px;
}

#grid-option-panel input {
    height:         16px;
    margin:         0 4px 0 0;
}


// Override/replace Bootstrap's hero-unit with one having bkgd image
.hero-unit {
    padding:                30px 60px 30px 60px;
    margin-bottom:          20px;

    background-color:       @whitef5;
    background-image:       @theme-hero-unit-bg;
    background-repeat:      no-repeat;
    // For before IE9, uses jquery.backgroundSize.js, called in index.html's init js.
    background-size:        cover;

    border:                 1px solid #5f5f5f;
    -webkit-border-radius:  10px;
    border-radius:          10px;
    box-shadow:             2px 2px 6px #000;
    -webkit-box-shadow:     2px 2px 6px #000;
}

#hero-text {

    // Use semi-transparent png so rounded corners work in IE.
    background-image:       @theme-hero-text-bg;
    //background-image:       url(/public/images/metrolink/hero-text-bg.png);
    background-repeat:      no-repeat;
    background-size:        cover;

    padding:                5px 20px 5px 20px;
    font-family:            arial;
    color:                  white;
    text-align:             center;
    text-shadow:            3px 2px 2px #000;

    border:                 1px solid #5f5f5f;
    -webkit-border-radius:  24px;
    border-radius:          24px;
    box-shadow:             1px 1px 2px #000;
    -webkit-box-shadow:     1px 1px 2px #000;
}

.shortcut-grid {

    .shortcut-row {

        .shortcut {
            padding:                15px 10px 5px 10px;
            margin:                 0px 10px 30px 0px;
            text-align:             center;
            cursor:                 pointer;
            background-color:       #f8f8f8;
            border:                 1px solid #bbb;
            -webkit-border-radius:  8px;
            border-radius:          8px;
            box-shadow:             2px 2px 0px 0px #ccc;
            -webkit-box-shadow:     2px 2px 0px 0px #ccc;

            img {
                // Force scaling since user uploaded image is not going to be exactly 128x128
                width:              100px;
                height:             100px;
            }

            .shortcut-label {
                margin:             2px 0 0 0;
            }

        }

    }

}

.shortcut-list {

    .shortcut {
        padding:                6px 10px 6px 10px;
        margin:                 0px 0px 8px 0px;
        text-align:             left;
        cursor:                 pointer;
        background-color:       #f8f8f8;
        border:                 1px solid #ddd;
        -webkit-border-radius:  3px;
        border-radius:          3px;

        img {
            // Force scaling since user uploaded image is not going to be exactly 128x128
            width:              18px;
            height:             18px;
            vertical-align:     middle;
        }

        .shortcut-label {
            margin:             0 0 0 10px;
            font-size:          1.2em;
            vertical-align:     middle;
        }

    }

}

.whatsnew {
    padding:                4px 20px 30px 20px;
    background-color:       @whitef5;
    min-height:             180px;
    border:                 1px solid #bbb;
    -webkit-border-radius:  8px;
    border-radius:          8px;
    box-shadow:             1px 1px 0px 0px #ccc;
    -webkit-box-shadow:     1px 1px 0px 0px #ccc;

    .event-time {
        font-weight:        bold;
    }
    .event-type {
        font-style:         italic;
    }
    .event-user {
        .small-gray;
    }
    .event-desc {
    }

}

.small-select {
    width:          auto;
    height:         2.1em;
    line-height:    2.1em;
    background:     #fefefe;
    font-size:      0.9em;
    margin:         1px 0px 1px 0px;
}

.filter-options {

    select {
        .small-select;
        vertical-align: top;
    }

}

.login-panel {
    background-color:       @whitef5;
    // background-repeat:      no-repeat;
    // // For before IE9, uses jquery.backgroundSize.js, called in index.html's init js.
    // background-size:        cover;

    padding:                20px 50px 0px 40px;

    border:                 1px solid #5f5f5f;
    -webkit-border-radius:  10px;
    border-radius:          10px;
}

.tool-panel {
    background-color:       @whitef5;
    padding:                10px 30px 20px 30px;
    .graybb-s-border;

    ul li {
        font-size:          1.2em;
        line-height:        1.5em;
    }

}


/* The generic uploaddoc popup dialog
   -------------------------------------------------- */

.uploaddoc {
    display:        none;           // initially hidden.  will be shown via JQuery's .show()
    position:       absolute;
    top:            100px;
    left:           100px;
    width:          350px;
    padding:        20px 20px 0px 20px;
    z-index:        50;
    background-color: @white;
    border:         1px solid gray;
    box-shadow:         1px 1px 0px 0px #ccc;
    -webkit-box-shadow: 1px 1px 0px 0px #ccc;
}

#grid-cond-select {
    display:        none;           // initially hidden.  will be shown via JQuery's .show()
    position:       absolute;
    top:            100px;
    left:           100px;
    width:          350px;
    z-index:        51;
    //padding:        20px 20px 0px 20px;
    //background-color: @white;
    //border:         1px solid gray;
}

.dialog-box {
    padding:    20px 20px 20px 20px;
    .my-round-border;
}

.selected_item {
    color:      @darkblue;
}

.ot-label {
    float:              left;
    font-size:          8px;
}

.overview-track {
    float:              left;
    margin:             5px 4px;
}

.ot-item {
    float:              left;
    width:              2px;
    height:             6px;
    border-top:         1px solid gray;
    border-bottom:      1px solid gray;
    margin:             0;
    padding:            0;
}

.ot-end {
    clear:              both;
}

.ot-cond0 {
    background-color:   @white;
}

.ot-cond1 {
    background-color:   @cyan;
}

.ot-cond2 {
    background-color:   @green;
}

.ot-cond3 {
    background-color:   @yellow;
}

.ot-cond4 {
    background-color:   @brown;
}

.ot-cond5 {
    background-color:   @red;
}

// Override JQuery Dialog's background.  Bootstrap is interfering it.
.ui-widget {
    background:         white !important;
}
//.ui-dialog, .ui-widget, .ui-widget-content, .ui-corner-all, .ui-draggable, .ui-resizable {
//    background: yellow !important;
//}

// Class for the table in UiUtil.dlgTableSelector()
.dlg-table-selector {

    //border:             1px solid #bbb;

    th {
        padding:            4px 10px;
        text-align:         left;
        border-bottom:      1px solid gray;
    }

    td {
        padding:            4px 10px;
        text-align:         left;
        vertical-align:     middle;
        border:             none;

    }

    td.divider {
        .gray-border-top;
    }

}

#result-docs {

    .result-item {
        margin:             10px 0 10px 0;
        padding:            4px 8px 4px 8px;

        .result-link {
            font-size:              1.5em;
            a {
                color:              blue;
                text-decoration:    underline;
            }
        }

        .result-link-info {
            color:          #666;
        }

        .result-info {
            display:        block;  // force next line
            font-size:      1.0em;
            color:          #666;
        }

        .result-detail {
            font-size:      0.9em;
            color:          #777;
        }

    }

}

#result-pagination {

}

.pagination-bar {
    .pg-btn {
        display:                inline-block;
        min-width:              1em;
        margin-right:           4px;
        padding:                1px 2px 0px 2px;
        font-size:              0.9em;
        line-height:            1.1em;
        text-align:             center;
        background:             @lightgray2;
        border:                 1px solid #cccccc;
        -webkit-border-radius:  3px;
        -moz-border-radius:     3px;
        border-radius:          3px;
        text-decoration:        none;
    }
    .pg-btn-sel {
        .pg-btn;
        background:             @lightgray0;
    }
    .pg-btn-size {
        .pg-btn;
        padding:                1px 4px 0px 4px;
    }

}


/**** Media specific styles ****/

@media screen {

    .no-screen {
        display:none;
    }

}


@media print {

    .no-print {
        display:none;
    }

    body {
        color:              #000000;            // black color for text
        background-color:   #FFFFFF;            // white background on print page
        background-image:   none;               // avoid background image to cluster the page
        margin:             25mm 5mm 25mm 5mm;  // set page margin
        -webkit-print-color-adjust: exact;      // To enable background printing in Chrome
    }

    table {
        page-break-inside: avoid;
    }

    // Override bootstrap
    a[href]:after {
        content: none !important;
    }

    .navbar,
    .nav-items,
    .dropdown-menu-bar,
    .breadcrumb,
    .title-action-actions,
    #assetDataTabNav,
    #gallery .download,
    .btn-cmd,
    .footer-layout {
        //display:        none;
    }

    .main-container {
        padding: 0px;
        border: 0px;
        border-radius:0;
        box-shadow:0;
        width: 100%;
    }

    .tab-content {
        padding: 0;
    }

    .tab-panel {
        border:0;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
        margin:0;
        box-shadow:0;
    }

    .tmpl-form {

        padding:                10px 0px 40px 0px;
        border:                 0;
        box-shadow:             0;
        -webkit-box-shadow:     0;
        background:             white;
        border-radius:          0;
        -webkit-border-radius:  0;
    }

    .marker-container {
        padding:                5px 5px 5px 0px;

        .marker {
            background:         @grey !important;      // force color for print.
            color:              @white !important;     // force color for print.
        }

    }

    /*.starRating span.chosen-1   { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen0    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen1    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen2    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen3    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen4    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen5    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
    .starRating span.chosen6    { background: @RatingChosenBG-print !important; color: @RatingChosenColor-print !important; }
*/
}

/**** Media specific style end ****/


.filetype-img {
    vertical-align:     middle;
    width:              20px;
    height:             20px;
}

.cmd-img {
    vertical-align:     middle;
    width:              14px;
    height:             14px;
}

.file-section {
    background-color:       #f8f8f8;
    min-height:             800px;
    padding:                20px 20px 20px 20px;
    .graybb-s-border;
    -webkit-border-radius:  4px;
    border-radius:          4px;
    box-shadow:             1px 1px 0px 0px #ccc;
    -webkit-box-shadow:     1px 1px 0px 0px #ccc;


    .file-row {

        .file img {
            width:                  64px;
            height:                 64px;
        }
        .file {
            padding:                0px 0px 0px 0px;
            margin:                 0px 0px 30px 0px;
            text-align:             center;
        }

        .file-label {
            margin:                 4px 0 0 0;
            overflow:               hidden;
        }
    }

}


// Index-based indentation, for indenting levels.
.generate-labelindents(10);

.generate-labelindents(@count, @i: 0) when (@i < @count) {
    .label-indent@{i} { margin-left: (@i * 2em); }
    .generate-labelindents(@count, (@i + 1));
}


// ---- Tree ----
.tree {
    min-height:20px;
    padding: 10px 10px 30px 10px;
}
.tree > ul {
    // first ul after tree has no margin
    margin-left:0;
}
.tree > ul ul {
    margin-left:15px;
}
.tree li {
    list-style-type:none;
    margin:0;
    padding:8px 0px 0 0;
    position:relative;
}
.tree li::before, .tree li::after {
    content:'';
    left:-10px;
    position:absolute;
    right:auto;
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px;
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:10px;
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:2px 8px;
    text-decoration:none;
    cursor:pointer;
}
.tree li .badge {
    cursor:pointer;
}
.tree li .active {
    background-color: #f89406;
}
.tree li.parent_li>span {
    cursor:pointer;
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0;
}
.tree li:last-child::before {
    height:30px;
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000;
}

// ---- Tree end ----




// Container with the last div filling out the rest of the height.
.top-rest-container {
    display:        table;

    div {
        display:    table-row;
    }

    div.rest {
        height:     100%;
    }

}



// ---- D3 SVG begin ----

.svg-pt-rating {
    stroke:         gray;
    stroke-width:   1;
}
.svg-pt-rating-1        { .svg-pt-rating;   fill: @theme-rating-1;  }
.svg-pt-rating0         { .svg-pt-rating;   fill: @theme-rating0;   }
.svg-pt-rating1         { .svg-pt-rating;   fill: @theme-rating1;   }
.svg-pt-rating2         { .svg-pt-rating;   fill: @theme-rating2;   }
.svg-pt-rating3         { .svg-pt-rating;   fill: @theme-rating3;   }
.svg-pt-rating4         { .svg-pt-rating;   fill: @theme-rating4;   }
.svg-pt-rating5         { .svg-pt-rating;   fill: @theme-rating5;   }
.svg-pt-rating6         { .svg-pt-rating;   fill: @theme-rating6;   }

.svg-bar-rating {
    stroke-width:   0;
}
.svg-bar-rating-1        { .svg-bar-rating;   fill: @theme-rating-1;  }
.svg-bar-rating0         { .svg-bar-rating;   fill: @theme-rating0;   }
.svg-bar-rating1         { .svg-bar-rating;   fill: @theme-rating1;   }
.svg-bar-rating2         { .svg-bar-rating;   fill: @theme-rating2;   }
.svg-bar-rating3         { .svg-bar-rating;   fill: @theme-rating3;   }
.svg-bar-rating4         { .svg-bar-rating;   fill: @theme-rating4;   }
.svg-bar-rating5         { .svg-bar-rating;   fill: @theme-rating5;   }
.svg-bar-rating6         { .svg-bar-rating;   fill: @theme-rating6;   }

path.valueLine {    // line path of the value data graph
                    stroke:             lightgrey;
                    stroke-width:       1;
                    fill:               none;
                    opacity:            0.8;
               }

line.avgline {      // line of the average value
                    stroke:             @brown;
                    stroke-width:       3;
                    fill:               none;
                    opacity:            0.25;
             }

line.stddev {       // line of the stddev value
                    stroke:             @brown;
                    stroke-dasharray:   10,5;
                    stroke-width:       2;
                    fill:               none;
                    opacity:            0.2;
            }

path.mavgLine {     // line path of the moving avg graph
                    stroke:             purple;
                    stroke-width:       3;
                    fill:               none;
                    opacity:            0.25;
              }

.axis path,         // x-axis and y-axis
.axis line {
    fill:               none;
    stroke:             black;
    stroke-width:       1px;
    // shape-rendering: crispEdges; // crispEdges causes uneven line width at different location.
}

.grid .tick {       // grid lines
                    stroke:             lightgrey;
                    opacity:            0.7;
            }
.grid path {        // grid lines
                    stroke-width:     0;
           }

// ---- D3 SVG end ----