[Summary view] [Print] [Text view]

   1  @import "../../../../libraries/bootstrap/less/mixins.less";
   2  
   3  @font-face {
   4      font-family: 'Open Sans';
   5      font-style: normal;
   6      font-weight: 400;
   7      src: url('../../../../resources/fonts/OpenSans-Regular-webfont.eot');
   8      src: url('../../../../resources/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
   9           url('../../../../resources/fonts/OpenSans-Regular-webfont.woff') format('woff'),
  10           url('../../../../resources/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
  11           url('../../../../resources/fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
  12  }
  13  
  14  // Body Stylings

  15  
  16  body {
  17      width: 100%;
  18      font-family : 'Open Sans',@baseFontFamily !important;
  19      font-size : @baseFontSize !important;//

  20      background: @bodyColor;
  21      color: darken(@baseFontColor,10%);
  22  }
  23  hr{
  24          margin: 8px 0;
  25          border-bottom: 1px solid @lightColorBorder;
  26  }
  27  
  28  //***********************************************************//

  29  //----------------- Top Menu bar stylings--------------------//

  30  //***********************************************************//

  31  .navbar.navbar-fixed-top {
  32      .marginbottomZero;
  33      #topMenus{

  34          .marginbottomZero;
  35          .navbar-inner{
  36              height: 40px;
  37              .gradientBar(@menubarColor,@menubarColor);
  38              .menuBar{
  39                  .nav.modulesList{
  40                      li.tabs{
  41                          a{
  42                              color: @menubarLink;
  43                          }
  44                          &:first-child > a{
  45                              padding: 10px 12px 9px;
  46                          }
  47                          a.selected{
  48                              background: @menubarLinkBackground;
  49                              color: @menubarLinkSelected;
  50                              font-weight: bold;
  51                          }
  52                          &:hover a{
  53                              background: lighten(@menubarLinkBackground,10%);
  54                              color: @menubarLinkSelected;
  55                          }
  56                      }
  57                  }
  58                  #commonMoreMenu{

  59                      .moreMenus{
  60                          div a#menubar_item_moduleManager{
  61                              color: @moreMenulinks;
  62                          }
  63                          .moduleNames{
  64                              margin-bottom: 2px;
  65                              a{
  66                                  font-size: 0.9em;
  67                                  padding : 3% !important;
  68                                  color: @moreMenulinks !important;
  69                                  &:hover{
  70                                      text-decoration : none;
  71                                      background: @menubarColor;
  72                                      color: @menubarLinkSelected !important;
  73                                  }
  74                              }
  75                          }
  76                      }
  77                      li a{
  78                          color: @menubarLink;
  79                      }
  80                      li.open{
  81                          background: @menubarLinkBackground;
  82                          font-weight: bold;
  83                          a{
  84                              color: @menubarLinkSelected;
  85                          }
  86                      }
  87                  }
  88              }
  89          }
  90      }
  91  }
  92  // All dropdown stylings

  93  #collapsedMenu{

  94      display: block;
  95      position: relative;
  96      a{
  97          color: @menubarLink;
  98      }
  99      .dropdown-menu{
 100          .shortDropdown{
 101              max-height: 300px;
 102              overflow-y: scroll;
 103              padding: 10px;
 104              position: relative;
 105              z-index: 10000;
 106              -webkit-overflow-scrolling: touch;
 107              -webkit-transform: translateZ(0);
 108              .moduleNames{
 109                  margin-bottom: 2px;
 110                  a{
 111                      font-size: 0.9em;
 112                      padding : 3% !important;
 113                      color: @moreMenulinks !important;
 114                      &:hover{
 115                          text-decoration : none;
 116                          background: @menubarColor;
 117                          color: @menubarLinkSelected !important;
 118                      }
 119                  }
 120              }
 121          }
 122  
 123      }
 124  }
 125  
 126  .moreMenus{
 127      &.leftAligned{
 128          &:after,&:before{
 129              left : 21px !important;
 130          }
 131      }
 132      strong{
 133          font-size: 1.1em;
 134          color: @moreMenulinks;
 135      }
 136      &:after,&:before{
 137              left : 292px !important;
 138      }
 139      width: 52em;
 140      padding: 24%;
 141      left: -270px;
 142      border-radius : 2px;
 143  }
 144  // Announcement

 145  .announcement{
 146          .marStyle{
 147              width:100%;
 148           }
 149      .hide;
 150      background: @notificationBackground;
 151      padding: 2px 0;
 152      border-bottom: 1px solid @notificationborder;
 153      max-height: 24px;
 154      width:100%;
 155  }
 156  // Right Header links

 157  #headerLinks{

 158       padding: 10px 0 7px;
 159       min-width: 240px;
 160       float: right !important;
 161       .headerLinksContainer{
 162          margin-right: 10px;
 163          &>[class*="span"] {
 164              float: left;
 165              margin-left: 15px;
 166          }
 167          .dropdown.open .dropdown-toggle{
 168              background: transparent;
 169          }
 170          ul.dropdown-menu{
 171              top: 30px;
 172              &:after, &:before{
 173                  right:15px;
 174                  left: auto;
 175              }
 176          }
 177          .settingIcons ul.dropdown-menu{
 178              left: -132px;
 179              top: 30px;
 180              &:after, &:before{
 181                  right:15px;
 182                  left: auto;
 183              }
 184          }
 185          &> span a img, &> span a.userName{
 186              color: @menubarLink;
 187              .cursorPointer;
 188              .caret {
 189                      border-top: 4px solid @menubarLink;
 190               }
 191          }
 192      }
 193  }
 194  
 195  .dropdown-menu.pull-right {
 196      right: 0;
 197      left: auto;
 198      cursor: pointer;
 199  }
 200  
 201  .navbar .dropdown-menu, .dropdown-menu{
 202      border-radius: 2px !important;
 203      li a{
 204          padding: 7px 15px;
 205      }
 206      li a:hover{
 207          background :@menubarColor;
 208          text-shadow: none;
 209      }
 210  }
 211  
 212  // Change Theme dropdown stylings //

 213  .themeMenuContainer{
 214      min-width:110px;
 215      width: 110px;
 216      left: -84px !important;
 217      padding: 10px 0;
 218      .themeMenu{
 219          padding: 0 10px;
 220          .boxSizingBorderBox;
 221          .themeElement{
 222              cursor: pointer;
 223              margin: 5px;
 224              height: 20px;
 225              width: 20px;
 226              .boxSizingBorderBox;
 227              &:hover{
 228                  .themeSelected;
 229              }
 230          }
 231          .themeSelected{
 232              border: 1px solid #000;
 233              background-image: url("../../../../libraries/bootstrap/img/glyphicons-halflings-white.png") !important;
 234              background-position: -286px 2px;
 235          }
 236      }
 237  }
 238  
 239  // Media queries for responsive menu bar

 240  @media screen and (min-width: 1161px) {
 241      #mediumNav, #shortNav, #headerLinksCompact{

 242          display: none;
 243      }
 244      #largeNav{

 245          margin-left: 10px;
 246          margin-right: 0;
 247      }
 248      .commonActionsButtonContainer{
 249          margin-right: 10px;
 250      }
 251  }
 252  @media screen and (max-width: 1160px) and  (min-width: 960px){
 253      #largeNav, #shortNav,#headerLinksCompact, .adv-search, .notificationMessageHolder {

 254          display: none;
 255      }
 256      .companyLogo{
 257          width: 100%;
 258      }
 259      .customFilterMainSpan .select2-container{
 260          width:300px !important;
 261      }
 262      .commonActionsButtonContainer{
 263          margin-top: 4px;
 264      }
 265      *{
 266          zoom:1 !important;
 267      }
 268  }
 269  @media screen and (max-width: 960px){
 270      #mediumNav, #largeNav,#headerLinksBig, #commonMoreMenu,.nav.quickActions, #leftPanel, #toggleButton,.companyLogo,.notificationMessageHolder, .adv-search, .select-search .chzn-container.chzn-container-single{

 271          display: none !important;
 272      }
 273      .bodyContents{
 274          margin: 0 !important;
 275      }
 276      #rightPanel{

 277          width: 100% !important;
 278      }
 279      .actionsContainer {
 280          &> .span2{
 281              display: none !important;
 282          }
 283          .span10{
 284              padding: 0 12px;
 285              .boxSizingBorderBox;
 286          }
 287      }
 288      .span3#headerLinks{
 289          padding: 5px 5px 0;
 290      }
 291      .menuBar .span9, .span3#headerLinks{
 292          .boxSizingBorderBox;
 293          min-width:80px;
 294          .qCreate{
 295              display: inline-block;
 296              margin: 0px;
 297              img{
 298                  margin-bottom: 3px;
 299                  margin-right: 5px;
 300              }
 301              ul li.title{
 302                  padding: 5px 0 0 15px;
 303              }
 304          }
 305          li.tabs{
 306              &:first-child > a{
 307                  padding: 10px 12px 9px;
 308              }
 309          }
 310      }
 311  
 312      .customFilterMainSpan .select2-container{
 313          width:300px !important;
 314      }
 315      #quickCreateModules{

 316          width: 100% !important;
 317          padding: 0 !important;
 318      }
 319      .CompactQC{
 320              max-height: 300px;
 321              overflow-y: scroll;
 322              overflow-x: hidden;
 323              a:hover{
 324                  text-decoration: none;
 325              }
 326      }
 327      #headerLinksCompact{

 328           display: inline-block;
 329           float: right;
 330          .btn-navbar{
 331              background: @menubarLinkBackground;
 332              display: inline-block;
 333              margin-right: 3px;
 334              margin-top: 2px;
 335              float: none;
 336          }
 337          ul.dropdown-menu{
 338              left: -115px;
 339              &:after, &:before{
 340                  right:15px;
 341                  left: auto;
 342              }
 343          }
 344          ul.dropdownStyles{
 345              left: -130px;
 346          }
 347          #compactquickCreate{

 348              &:hover{
 349                  background: none;
 350              }
 351              .quickCreateModule:hover{
 352                  text-decoration: none;
 353                  color: @themeLinkColorInverse !important;
 354              }
 355          }
 356      }
 357      .searchElement{
 358          min-width:440px;
 359          padding-left:10px;
 360      }
 361  }
 362  
 363  // common Actions container

 364  .commonActionsContainer{
 365      //Company Logo

 366      .companyLogo{
 367          display: inline-block;
 368          height : 3.5em;
 369          margin-top: 0.3em;
 370          margin-left: 20px;
 371          img{
 372              height: 98%;
 373              max-width: 100%;
 374              .boxSizingBorderBox;
 375          }
 376      }
 377      .marginbottomZero;
 378      .actionsContainer{
 379          background: @actionsContainerBackground;
 380          border-bottom: 1px solid @actionsContainerBorder;
 381          box-shadow: 0 1px 3px 0 @actionsContainerShadow;
 382          height:50px;
 383          .boxSizingBorderBox;
 384          &>.span10 > .row-fluid{
 385              margin-top: 9px;
 386          }
 387          &>.span2{
 388              height:50px;
 389          }
 390      }
 391      // Top Searchbar Stylings

 392      .searchElement{
 393          margin-top:2px;
 394          .searchBar,.select-search{
 395              display: inline-block;
 396              vertical-align: top;
 397              input{
 398                  margin-bottom: 0;
 399              }
 400              .adv-search{
 401                  margin: 4px 0 0 10px;
 402                  a{
 403                      color: @advSearch;
 404                      .cursorPointer;
 405                  }
 406              }
 407              .search-icon{
 408                  border-radius: 2px !important;
 409                  margin-left: 4px;
 410                  padding: 4px 20px;
 411                  cursor: pointer;
 412                  background: @searchButton;
 413                  border: 1px solid @themeBorder;
 414              }
 415              .chzn-container-single{
 416                  .chzn-results{
 417                          max-height: 450px;
 418                      }
 419                  .chzn-single{
 420                      border-radius: 2px 0 0 2px;
 421                      border: 1px solid @searchChznBorder;
 422                      border-right: 0;
 423                      background: @searchChzn;
 424                          div{
 425                              border-radius: 2px;
 426                              background: @searchChzn;
 427                              border-left: 0px !important;
 428                          }
 429                      }
 430                  }
 431                  .chzn-single.chzn-single-with-drop{
 432                      div b{
 433                          box-shadow: 0 1px 0 @white inset;
 434                      }
 435                  }
 436                  #globalSearchValue{

 437                      border-radius: 0;
 438                  }
 439          }
 440      }
 441  
 442      .dropdown-menu.dropdownStyles.commonActionsButtonDropDown{
 443          left: -371px !important;
 444          min-width: 400px;
 445          top: 28px;
 446          li.title{
 447              padding: 5px 0 0 15px;
 448          }
 449          a{
 450              .cursorPointer;
 451          }
 452          #quickCreateModules{

 453              padding:  0 5px;
 454              div a:hover{
 455                  color: @menubarLinkSelected;
 456              }
 457          }
 458      }
 459  }
 460  
 461  // Main container

 462  .mainContainer{
 463      min-height: 500px;
 464      margin-top: 90px;
 465      background: @mainContainer;
 466      min-width:1200px;
 467      &> .span2{
 468          padding: 0 1.06383%;
 469          height: auto !important;
 470          min-width: 174px;
 471      }
 472      .contentsDiv{
 473          min-height: 500px;
 474          background: lighten(@bodyBackgroundColor,4%);
 475          .boxSizingBorderBox;
 476          border-left: 1px solid darken(@actionsContainerBorder,10%);
 477          position: relative;
 478      }
 479      #leftPanel{

 480          .gradientBar(@mainContainer,@mainContainer);
 481      }
 482  }
 483  // CSS for toggle button

 484  .toggleButton {
 485      background: @mainContainer;
 486      font-weight: bold;
 487      padding: 5px 2px !important;
 488      position: absolute;
 489      top: 20px;
 490      left: -1px;
 491      cursor: pointer;
 492      width: 10px;
 493      z-index:100;
 494      border: 1px solid @lightColorBorder;
 495      border-left:0;
 496      display: inline-block;
 497  }
 498  
 499  .toggleButton .icon-chevron-left {
 500      background-position: -434px -72px !important;
 501      .icon-inverted;
 502  }
 503  
 504  .toggleButton .icon-chevron-right {
 505      background-position: -460px -72px !important;
 506      .icon-inverted;
 507  }
 508  // SideBar Stylings

 509  .quickLinksDiv{
 510      margin: 10px 0;
 511      p{
 512          font-size: 1.2em;
 513          padding: 5% 0 0 11%;
 514          height: 28px;
 515          cursor: pointer;
 516          box-shadow: 0 0 0 1px @lightColorBorder;
 517          border-top: 1px solid @white !important;
 518          .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
 519          position: relative;
 520          border-radius: 2px;
 521          a{
 522              color: darken(@baseFontColor,10%);
 523          }
 524          a:hover{
 525              text-decoration: none;
 526          }
 527      }
 528      p.selectedQuickLink{
 529          .gradientBar(lighten(@menubarLinkBackground,10%),lighten(@menubarLinkBackground,10%));
 530          background-image: none;
 531          position: relative;
 532          border: 1px solid @menubarLinkSelected;
 533          box-shadow: 4px 0 3px -4px darken(@menubarLinkBackground,30%) inset;
 534          a{
 535              color: @menubarLinkSelected;
 536          }
 537      }
 538  
 539      p.selectedQuickLink a:after{
 540          border-bottom: 19px solid rgba(0, 0, 0, 0);
 541          border-left: 10px solid lighten(@menubarLinkBackground,10%);
 542          border-top: 19px solid rgba(0, 0, 0, 0);
 543          content: " ";
 544          display: inline-block;
 545          position: absolute;
 546          left: 100%;
 547          top:0;
 548      }
 549  }
 550  .quickWidgetContainer {
 551      li{
 552          a{
 553              overflow: hidden;
 554              white-space: normal;
 555              padding: 5px;
 556              margin: 0;
 557              width : 100%;
 558              .boxSizingBorderBox;
 559          }
 560      }
 561      .quickWidget{
 562          margin-bottom:10px;
 563          border: 1px solid @lightColorBorder;
 564          .box-shadow(0 0 3px -1px @lightColorBorder);
 565          .quickWidgetHeader {
 566              .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
 567               text-shadow: 0px 1px @white;
 568               border-top: 1px solid @white;
 569               border-bottom: 1px solid @lightColorBorder;
 570              .cursorPointer;
 571              padding: 8px;
 572              h5{
 573                  color: darken(@baseFontColor,10%);
 574                  margin-left: 15px;
 575                  float: left !important; // to Avoid pull-right

 576              }
 577          }
 578          .widgetContainer {
 579               background-color : @contentsBackground;
 580               &>div{
 581                  .boxSizingBorderBox;
 582                  padding: 7px 0;
 583               }
 584          }
 585      }
 586  }
 587  
 588  .sidebarTitleBlock{
 589      padding: 12px 0;
 590      a{
 591          color: darken(@baseFontColor,5%) !important;
 592          &:hover{
 593              text-decoration: none;
 594          }
 595      }
 596  }
 597  #selectAllMsgDiv, #deSelectAllMsgDiv{

 598      .hide;
 599      background-color: @selectAllMsgDivColor;
 600      padding: 0.01%;
 601      .textAlignCenter;
 602  }
 603  
 604  //-- Modal Stylings --//

 605  /** Advance Search **/

 606  
 607  #advanceSearchContainer {

 608      background-color : @contentsBackground;
 609      position: relative;
 610      .filterElements{
 611          margin: 10px;
 612      }
 613      .filterContainer{
 614          padding: 0 15x;
 615          .deleteCondition{
 616              vertical-align: middle;
 617              margin: 6px;
 618          }
 619      }
 620      form{
 621          margin-bottom: 0;
 622          &>div{
 623              margin-bottom: 0;
 624          }
 625      }
 626      .modal-footer{
 627          padding-bottom: 5px;
 628      }
 629  }
 630  
 631  /** Global Search **/

 632  .blockUI, #globalmodal{
 633      width: 100%;
 634      form{
 635          margin:0 0 0;
 636      }
 637  }
 638  .globalSearchResults{
 639       .contentsBackground;
 640       border: 1px solid darken(@lightColorBorder,10%);
 641      .box-shadow(0 0 3px -1px @lightColorBorder);
 642       min-width: 280px;
 643       min-height:500px;
 644      .highlightedHeader{
 645             .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
 646              text-shadow: 0px 1px @white;
 647              border-bottom: 1px solid @lightColorBorder;
 648              color: @baseFontColor;
 649              padding:8px 5px;
 650      }
 651      #showFilter{

 652             color : @themeLinkColor;
 653      }
 654      //Search results popup

 655      .contents{
 656          .boxSizingBorderBox;
 657          padding: 5% 5% 10% 3%;
 658          max-height:500px;
 659          min-width: 280px;
 660          &> label{
 661              padding: 5px;
 662              border-bottom: 1px solid @lightColorBorder;
 663          }
 664          ul{
 665              li {
 666                  a{
 667                      margin: 5px 0;
 668                      padding: 7px;
 669                      span{
 670                          color: @themeLinkColor;
 671                          opacity: 0.5;
 672                          font-size: 0.8em;
 673                          p{margin:0 !important;}
 674                      }
 675                  }
 676              }
 677          }
 678      }
 679  }
 680  //-- Module Level Dashboards --//

 681  .dashboardHeading{
 682      h2{
 683          padding-bottom:8px;
 684      }
 685      hr{
 686          border-bottom: 1px solid @lightColorBorder;
 687      }
 688      .dropdown-menu{
 689          left: -70px;
 690          right: 0;
 691      }
 692  }
 693  
 694  //--- Dashboard Stylings ---//

 695  .dashboardContainer{
 696      padding:0;
 697      .dashboardHeading{
 698          padding: 10px 0 0;
 699          background: @dashboardHeader;
 700          h2{
 701              padding: 0 0 8px 20px;
 702          }
 703          .btn-toolbar{
 704              padding: 3px 20px 0 0;
 705          }
 706          hr{
 707              border-bottom: 1px solid @lightColorBorder;
 708          }
 709          .dropdown-menu {
 710               left: -82px;
 711          }
 712      }
 713  }
 714  .widgetsList{
 715      max-height: 400px;
 716      overflow-y: auto;
 717      overflow-x : hidden;
 718      li{
 719          display: block;
 720          a{
 721              white-space: normal;
 722              word-wrap: break-word;
 723          }
 724      }
 725  }
 726  
 727  .dashboard_notebookWidget_view .row-fluid{
 728      margin-bottom: 5px;
 729  }
 730  .gridster{
 731      margin-left: 0;
 732      width: 100%;
 733      .boxSizingBorderBox;
 734      ul{
 735          width: auto;
 736          display: block;
 737          .boxSizingBorderBox;
 738          min-height: 460px;
 739      }
 740  }
 741  .gridster ul{
 742      list-style: none;
 743      li.dashboardWidget{
 744          background: @contentsBackground;
 745          border-radius: 1px;
 746          border: 1px solid @lightColorBorder;
 747          .box-shadow(0 0 3px -1px @lightColorBorder);
 748          .dashboardWidgetHeader{
 749              .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
 750              text-shadow: 0px 1px @white;
 751              border-top: 1px solid @white;
 752              border-bottom: 1px solid @lightColorBorder;
 753              color: @baseFontColor;
 754              cursor: move;
 755              table{
 756                  height: 28px;
 757              }
 758              padding : 5px;
 759              .dashboardTitle{
 760                  text-align: left;
 761                  padding-left : 10px;
 762              }
 763              .widgeticons{
 764                  opacity: 0.5;
 765                  padding-right: 6px;
 766              }
 767          }
 768          .filterContainer{
 769                  position : absolute;
 770                  border: 1px solid @lightColorBorder;
 771                  background: @contentsBackground;
 772                  margin-left: -7px;
 773                  margin-right : 3px;
 774                  margin-top : 4px;
 775                  padding: 8px 0;
 776                  border-radius: 0 0 5px 5px;
 777                  box-shadow: 0 5px 8px -5px @grey;
 778                  div    span{
 779                      margin-top: 6px;
 780                  }
 781                  .span5{
 782                      margin-top: 3px;
 783                  }
 784              }
 785          .dashboardWidgetContent{
 786              padding: 10px 0;
 787              line-height: 20px;
 788          }
 789          .widgeticons {
 790              min-width: 50px;
 791              height:30px;
 792              margin-right:30px;
 793              visibility: hidden;
 794              a {
 795                  cursor: pointer;
 796                  text-decoration: none;
 797                  i{
 798                      .icon-inverted;
 799                  }
 800              }
 801          }
 802      }
 803  
 804      .widgetChartContainer{
 805              margin-left:10px;
 806      }
 807  }
 808  
 809  //--ListView stylings--//

 810  
 811  .listViewPageDiv{
 812      margin: 11px 0;
 813      #listViewEntriesMainCheckBox{

 814          //margin-left: 8px;

 815      }
 816  }
 817  .customFilterMainSpan{
 818      width: 100%;
 819      .select2-container{
 820          width: 95% !important;
 821      }
 822  }
 823  
 824  // Select2 overwrites

 825  .select2-container .select2-choice{
 826          border-radius: 2px;
 827          background:  @contentsBackground;
 828          border-color: @lightColorBorder;
 829          font-size: 14px;
 830          letter-spacing: 0.01em;
 831          color: darken(@baseFontColor,10%);
 832          div{
 833              border-radius: 0;
 834              border-left: 0;
 835              background:  @contentsBackground;
 836          }
 837  }
 838  .select2-drop{
 839      border-color: @lightColorBorder;
 840      .select2-no-results{
 841          padding: 1px 10px;
 842      }
 843      ul.filterActions{
 844          list-style: none !important;
 845          li{
 846              cursor: pointer;
 847          }
 848      }
 849  }
 850  .ui-autocomplete .ui-menu-item{
 851      #ui-active-menuitem{

 852          background:  @baseThemeColor;
 853          border-radius: 0;
 854      }
 855  }
 856  li.ui-timepicker-selected,
 857  .ui-timepicker-list li:hover,
 858  .ui-timepicker-list:hover .ui-timepicker-selected:hover{
 859      background:  @baseThemeColor;
 860  }
 861  
 862  /*Do not shrink select2 input box in layout editor*/

 863  #relatedTabOrder .select2-input{

 864      min-width: 200px;
 865  }
 866  
 867  .alphabetSorting{
 868      .alphabetSearch{
 869          a{
 870              vertical-align: middle;
 871              display: inline-block;
 872              margin-bottom: 2px;
 873          }
 874          &:hover{
 875              background: @bodyBackgroundColor;
 876          }
 877      }
 878  }
 879  
 880  .listViewActions{
 881      .settingsIcon{
 882          display: inline-block;
 883          margin-left: 5px;
 884      }
 885      &>.btn-group{
 886          min-width:105px;
 887      }
 888  }
 889  
 890   // Pagination dropdown //

 891  #listViewPageJumpDropDown, #relatedListPageJumpDropDown{

 892       left: -60px;
 893  }
 894  
 895  .pageNumbers{
 896      display: inline-block;
 897      margin-right: 5px;
 898      margin-top: 6px;
 899      vertical-align: top;
 900      .totalNumberOfRecords{
 901          margin: 0 5px;
 902      }
 903  }
 904  
 905  .listSearchContributor{
 906      min-width: 100px;
 907      margin-bottom: 0 !important;
 908  }
 909  
 910  //Horizontal top scroll

 911  .contents-topscroll, #reportDetails{
 912      overflow-x: auto !important;
 913      overflow-y: visible;
 914  }
 915  .contents-bottomscroll{
 916      overflow-x: auto !important;
 917  }
 918  .bottomscroll-div,.topscroll-div {
 919      display: table;
 920      min-width: 100%;
 921  }
 922  .listViewLoadingImageBlock{
 923      background: none;
 924      border-radius: 0px;
 925      box-shadow: none;
 926      text-align: center;
 927  
 928  }
 929  
 930  //--Detail view stylings--//

 931  .detailViewContainer{
 932      padding: 0 20px;
 933  }
 934  .userPreferences{
 935      .contents{
 936          padding-left: 0 !important;
 937      }
 938      .details{
 939          border-right: 0 !important;
 940      }
 941  }
 942  .detailViewTitle{
 943      padding: 1.5% 0 0 1%;
 944      .boxSizingBorderBox;
 945      .recordLabel{
 946          font-size: 16px;
 947          font-weight: bold;
 948          width: 20em;
 949      }
 950      .detailViewButtoncontainer{
 951          margin-top: 8px;
 952      }
 953      .detailViewPagingButton{
 954          margin-top: 8px;
 955          padding-right: 10px;
 956          .boxSizingBorderBox;
 957      }
 958      .btn-toolbar{
 959          margin: 0;
 960      }
 961  }
 962  .detailview-table{
 963      th, td{
 964          vertical-align: middle;
 965          label{
 966              margin-bottom: 3px;
 967          }
 968      }
 969  }
 970  .detailViewInfo{
 971      box-shadow: 0 -4px 4px -4px lighten(@actionsContainerShadow,5%);
 972      margin-top : 10px;
 973      .contents{
 974          padding: 2.2% 0 0 2.2%;
 975          min-height:450px;
 976      }
 977      .details{
 978          min-height: 600px;
 979          padding-right: 1.5%;
 980          border-right: 4px solid @baseThemeColor;
 981          padding-bottom: 10px;
 982      }
 983      .related{
 984          .nav-stacked{
 985              //position: fixed;

 986              //width: 11%;

 987          }
 988          .nav-pills .active > a, .nav-pills .active > a:hover{
 989              background: @baseThemeColor;
 990              border-radius: 1px;
 991              margin-top:0;
 992              margin-bottom: 2px;
 993          }
 994      }
 995  }
 996  .fieldLabel {
 997      width: 20%;
 998      background: lighten(@editViewLabel,3%);
 999  }
1000  
1001  //-- Summary View--//

1002  .summaryView {
1003      border: 1px solid lighten(@lightColorBorder,5%);
1004      .box-shadow(1px 1px 3px @lightColorBorder);
1005      border-radius: 2px;
1006      background: @contentsBackground;
1007      margin-bottom:10px;
1008      padding: 25px 20px 5px;
1009      .boxSizingBorderBox;
1010      .summary-table tr.summaryViewEntries:last-child{
1011          .fieldValue,.fieldLabel{
1012              border-bottom: 1px solid @lightColorBorder;
1013          }
1014      }
1015      .summaryViewEntries{
1016          .fieldLabel{
1017              vertical-align: top;
1018              padding: 5px 0 5px 5%;
1019              border-top: 1px solid @lightColorBorder;
1020              border-right: 1px solid @lightColorBorder;
1021          }
1022          .fieldValue{
1023              vertical-align: top;
1024              padding: 5px 0 5px 5%;
1025              border-top: 1px solid @lightColorBorder;
1026          }
1027          &:hover{
1028              .summaryViewEdit {
1029                  .fullOpacity;
1030              }
1031          }
1032          .summaryViewEdit{
1033              .zeroOpacity;
1034          }
1035      }
1036      .toggleViewByMode{
1037          margin: 8px 0;
1038      }
1039  }
1040  .summaryWidgetContainer{
1041          border-radius: 2px;
1042          .box-shadow(1px 1px 3px @lightColorBorder);
1043          border: 1px solid lighten(@lightColorBorder,5%);
1044          background: @contentsBackground;
1045          margin-bottom:10px;
1046          padding: 15px;
1047          .widget_header{
1048              padding-bottom: 10px;
1049              padding-top: 0;
1050              border-bottom: 1px solid @lightColorBorder;
1051              button, &>.span8, &>.span9{
1052                  margin:0;
1053              }
1054              h4{
1055                  padding-top: 7px;
1056              }
1057          }
1058          .widget_contents{
1059              padding-top:10px;
1060              .span4{
1061                  width: 40.4255%;
1062              }
1063          }
1064  }
1065  .commentContainer{
1066      .commentTitle{
1067          .boxSizingBorderBox;
1068          margin-bottom: 10px;
1069          textarea{
1070              width:100%;
1071              .boxSizingBorderBox;
1072          }
1073      }
1074  }
1075  // Project summary view styles //

1076  .recordDetails{
1077      .squeezedWell{
1078          padding: 3% 2%;
1079          min-height: 105px;
1080          .boxSizingBorderBox;
1081      }
1082  }
1083  //--Edit View Stylings--//

1084  /*#EditView{

1085      input[type="radio"]{

1086          margin: -2px 3px 0 0 !important;

1087      }

1088  }*/
1089  .recordEditView{
1090      .contentHeader{
1091          padding: 1.5% 0;
1092      }
1093      .table{
1094          .fieldLabel, .fieldValue{
1095              vertical-align: middle;
1096          }
1097      }
1098      .table tbody tr:hover td, .table tbody tr:hover th {
1099          background: lighten(@editViewLabel,3%);
1100      }
1101  }
1102  
1103  //-- Comment stylings --//

1104  // Comments block

1105  .commentContainer{
1106      //padding: 10px 10px 10px 20px ;

1107      border-radius: 2px;
1108      hr{
1109          margin: 0 !important;
1110      }
1111      .addCommentBlock .commentsControls{
1112          display: inline-block;
1113      }
1114      .commentsList > .liStyleNone > .commentDetails{
1115          .commentDiv{
1116              width:100%;
1117          }
1118      }
1119      .commentDetails{
1120          background:@bodyColor;
1121          border: 1px solid @lightColorBorder;
1122          margin-bottom: 5px;
1123          border-radius: 2px;
1124          padding: 10px 10px 5px;
1125          display: inline-block;
1126          min-width: 400px;
1127          .boxSizingBorderBox;
1128          .commentDiv{
1129              width: 380px;
1130          }
1131  
1132      }
1133      .commentorInfo{
1134          p{
1135              margin-bottom: 0;
1136          }
1137          .commentorName{
1138              //color: @generalLinkColor;

1139              &:hover{
1140                  //color: @linkColorHover;

1141              }
1142          }
1143      }
1144      .addCommentBlock {
1145          .gradientBar(@bodyBackgroundColor,@bodyBackgroundColor);
1146          border: 1px solid @lightColorBorder;
1147          padding: 12px 12px 5px;
1148          min-height: 115px;
1149          margin-top: 15px;
1150          display: block;
1151          .commentcontent{
1152              //box-shadow: inset 0px 0px 8px -5px @boxShadowColor !important;

1153              padding : 8px !important;
1154              .boxSizingBorderBox;
1155              width: 100%;
1156              resize: none;
1157          }
1158      }
1159      .commentInfoContent{
1160          padding: 1px 0;
1161          word-wrap : break-word;
1162      }
1163  }
1164  
1165  .commentTitle {
1166      .span1 {
1167          .boxSizingBorderBox;
1168          img{
1169              min-width:32px;
1170              min-height:32px;
1171          }
1172      }
1173  }
1174  
1175  .commentsList > ul{
1176      margin-left: 0;
1177  }
1178  .singleComment{
1179      .editedStatus{
1180          .boxSizingBorderBox;
1181          padding: 5px 0 5px 32px;
1182          p{
1183              margin-bottom: 0;
1184          }
1185      }
1186      .commentActionsDiv{
1187          display: none;
1188          p{
1189              margin-bottom: 0;
1190          }
1191      }
1192      &:hover{
1193          .commentActionsDiv{
1194              display: block;
1195              margin-bottom: 3px;
1196          }
1197      }
1198  }
1199  
1200  
1201  // Recent Comments block

1202  .recentComments{
1203      margin: 0;
1204      padding: 0;
1205      .boxSizingBorderBox;
1206      .commentDiv{
1207          min-width: 100%;
1208      }
1209      .addCommentBlock{
1210          border: 0;
1211          margin-top:0;
1212          display: block;
1213      }
1214      .commentDetails{
1215          display: block;
1216      }
1217  }
1218  
1219  .singleComment:hover .commentActions .replyComment{
1220      display: inline-block;
1221  }
1222  
1223  .commentActionsContainer{
1224      a{
1225          &:hover{
1226              text-decoration : none;
1227          }
1228      }
1229      .editStatus{
1230          padding:5px 2px;
1231          .boxSizingBorderBox;
1232          p{
1233              margin-bottom: 0;
1234          }
1235      }
1236  }
1237  //-------------------------

1238  //************* TABLE STYLINGS *****************//

1239  .table{
1240      background: @contentsBackground;
1241  }
1242  .table-bordered{
1243          border-radius: 1px;
1244          margin-bottom: 0;
1245          th{
1246              border-top: 1px solid @white !important;
1247          }
1248  }
1249  .table th{
1250      .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
1251      text-shadow: 0px 1px @white;
1252      //border-bottom: 1px solid @lightColorBorder;

1253      color: @baseFontColor;
1254  }
1255  
1256  .listViewEntriesTable.table-bordered th + th, .listViewEntriesTable.table-bordered td + td,
1257  .listViewEntriesTable.table-bordered th + td, .listViewEntriesTable.table-bordered td + th{
1258      border-left: 0;
1259  }
1260  /*

1261  .table-bordered th + th, .table-bordered td + td, .table-bordered th + td, .table-bordered td + th{

1262      border-left-color: @lightColorBorder;

1263  }

1264  .listViewEntriesTable tbody tr td{

1265      border-left: 1px solid @lightColorBorder;

1266  }

1267  .listViewEntriesTable tbody tr td:first-child{

1268      border-left: 0 none;

1269  }

1270  .listViewEntriesTable tbody td:last-child{

1271      border-left: 0;

1272  }*/
1273  
1274  .table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child{
1275      border-radius: 1px 0 0;
1276  }
1277  .equalSplit{
1278      td:nth-child(odd){
1279          width:20%;
1280      }
1281      td:nth-child(even){
1282          width:30%;
1283      }
1284  }
1285  td.fieldValue input, td.fieldValue .input-append{
1286      margin-bottom:0;
1287  }
1288  // List view stylings //

1289  .actionImage, .actionImages{
1290      .zeroOpacity;
1291  }
1292  .listViewHeaders a{
1293      color: @dashboardWidgetHeaderText;
1294  }
1295  .listViewEntriesDiv .listViewHeaders th{
1296      .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
1297      border-bottom: 1px solid @lightColorBorder;
1298  }
1299  .listViewEntriesDiv, .listViewEntriesDiv td{
1300      overflow: visible;
1301  }
1302  
1303  .listViewEntriesTable .listViewHeaders a.listViewHeaderValues{
1304      color: @dashboardWidgetHeaderText;
1305      &:hover{
1306          text-decoration: none;
1307      }
1308      .icon-chevron-down.icon-white,.icon-chevron-up.icon-white{
1309          background-image: url("../../../../libraries/bootstrap/img/glyphicons-halflings.png");
1310          opacity: 0.7;
1311          margin-top: 1px;
1312      }
1313  }
1314  .listViewEntriesTable td.listViewEntryValue, .listViewEntries td{
1315      vertical-align: middle;
1316      cursor: pointer;
1317      overflow: visible;
1318          padding:5px;
1319      &:hover{
1320          .actionImages, .actions{
1321              .fullOpacity;
1322          }
1323      }
1324  }
1325  /*opacity applied for summary view edit, comment actions, activity widget edit*/

1326  .summaryViewEntries .summaryViewEdit, .activityStatus .editStatus, .addedCalendars .actionImage{
1327      .zeroOpacity;
1328  }
1329  
1330  .summaryViewEntries:hover .fieldValue .summaryViewEdit, .activityStatus:hover .editStatus, .addedCalendars:hover .actionImage{
1331      .fullOpacity;
1332  }
1333  .listViewEntriesTable tr:hover td .actions .actionImages{
1334      .fullOpacity;
1335  }
1336  
1337  .listViewBasicAction.dropdown-menu {
1338      width:100%;
1339      input{
1340          border-radius: 2px;
1341          height: 24px;
1342          margin-bottom: 0;
1343          margin-top: -2px;
1344          width: 100%;
1345          .boxSizingBorderBox;
1346      }
1347  }
1348  .emptyRecordsDiv{
1349      width: 100%;
1350      border: 1px solid @lightColorBorder;
1351      .boxSizingBorderBox;
1352      text-align: center;
1353      font-size: 16px;
1354      padding: 5% 0;
1355      td{
1356          .boxSizingBorderBox;
1357          text-align: center;
1358          font-size: 16px;
1359          padding: 5% 0;
1360      }
1361  }
1362  
1363  // Styles for custom filter creation

1364  .CustomFilterViewTitle{
1365      padding-top: 1%;
1366  }
1367  #CustomView .filterActions{

1368      padding-bottom: 20px;
1369      overflow: hidden;
1370  }
1371  .select2-container.select2-container-multi.columnsSelect{
1372      width: 100% !important;
1373  }
1374  .filterConditionsDiv{
1375      padding-bottom: 0;
1376  }
1377  .conditionGroup{
1378      .header{
1379          margin-bottom: 20px;
1380          font-size: 1.2em;
1381      }
1382      .contents{
1383          .conditionRow{
1384              margin-bottom: 10px;
1385              select, input{
1386                  width: 90%;
1387              }
1388              .chzn-results li{
1389                  line-height: 20px;
1390              }
1391          }
1392      }
1393      .deleteCondition{
1394          vertical-align: bottom;
1395      }
1396  }
1397  
1398  //Import

1399  .searchUIBasic{
1400      border-collapse: separate !important;
1401      border-spacing: 10px !important;
1402          margin: 0 10%;
1403      .importContents{
1404          border: 1px solid lighten(@lightColorBorder,5%);
1405          .box-shadow(1px 1px 3px @lightColorBorder);
1406          border-radius: 2px;
1407          background: @contentsBackground;
1408          margin-bottom:10px;
1409          padding: 25px 20px 5px;
1410          .boxSizingBorderBox;
1411      }
1412      .listRow{
1413          .listViewHeaders > td{
1414              color: @themeLinkColor;
1415          }
1416          .defaultInputTextContainer{
1417              max-width: 87% !important;
1418              margin-bottom : 0 !important;
1419          }
1420      }
1421  }
1422  
1423  // Inventory Popups Styles //

1424  //Line Items

1425  // fix for line item taxmode, currency background header block

1426  #lineItemTab.table{

1427      tr:first-child{
1428          &:hover th~td{
1429              .gradientBar(@dashboardWidgetHeader,@dashboardWidgetHeader);
1430          }
1431      }
1432      tr:nth-child(2){
1433          &:hover td{
1434              background : none;
1435          }
1436      }
1437  
1438  }
1439  .lineItemTable tr td {
1440      width: 0%;
1441      div.finalDiscountUI,
1442      div.discountUI,
1443      div#shipping_handling_div,
1444      div.taxUI,
1445      div.finalTaxUI{
1446          border: 2px solid darken(@lightColorBorder,10%);
1447          border-radius: 2px;
1448          table tr td, table tr th{
1449              border-left: 0;
1450          }
1451      }
1452  }
1453  
1454  .lineItemTable tr:hover td {
1455      width: 0%;
1456      div.finalDiscountUI table tr td {
1457          background: none !important;
1458      }
1459      div.discountUI table tr td{
1460          background: none !important;
1461      }
1462      div#shipping_handling_div table tr td{
1463          background: none !important;
1464      }
1465      span.taxDivContainer div table tr td{
1466          background: none !important;
1467      }
1468      div.finalTaxUI table tr td{
1469          background: none !important;
1470      }
1471  }
1472  
1473  // Fix complete

1474  
1475  .lineItemResult{
1476      width: 70.5% !important;
1477      a:hover{
1478          color: @themeLinkColor;
1479      }
1480  }
1481  
1482  .lineItemInputBox{
1483      width: 45%;
1484      float: right;
1485      text-align: right;
1486  }
1487  
1488  .smallInputBox{
1489      width: 45%;
1490      height: 12px;
1491  }
1492  
1493  .lineItemCommentBox{
1494      width: 70%;
1495      height: 40px;
1496  }
1497  
1498  .inventoryLineItemHeader{
1499      float:left;
1500      margin: 7px;
1501      //.textShadow(@headerTextColor,0,0,1px,@headerTextShadowColor);

1502  }
1503  
1504  //Clean up the below css

1505  .discountUI, .taxUI, .finalDiscountUI , .finalTaxUI, #shipping_handling_div{
1506      position: absolute;
1507      left: 46%;
1508      width: 27%;
1509      z-index: 500;
1510      box-shadow : 1px 0px 7px @lightColorBorder;
1511      border-radius : 6px;
1512      table.table{
1513          margin-bottom: 0;
1514      }
1515      .table tbody tr:first-child th:first-child{
1516          border-radius : 4px 0 0 0 !important;
1517      }
1518      .table tbody tr:first-child th:last-child{
1519          border-radius : 0 4px 0 0 !important;
1520      }
1521  }
1522  .LineItemDirectPriceReduction{
1523      width: 65% !important;
1524  }
1525  
1526  // Labels Editor //

1527  th.htColHeader, .handsontable thead th{
1528      .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
1529      border-bottom: 1px solid @lightColorBorder;
1530      padding: 6px 2px;
1531  }
1532  
1533  //************************************************//

1534  //-- Settings --//

1535  //***********************************************//

1536  .contentHeader {
1537      padding: 15px;
1538      padding-left: 5px;
1539      line-height: 20px;
1540  }
1541  .contentsDiv > div{
1542      padding: 0 20px;
1543  }
1544  #settingsQuickWidgetContainer{

1545      .widgetContainer.accordion-body{
1546          border-bottom: none !important;
1547          &>div:hover{
1548              background: @mainContainer;
1549          }
1550          .selectedMenuItem {
1551              background-color : @mainContainer;
1552              border-bottom : 1px solid @lightColorBorder !important;
1553              border-top : 1px solid @lightColorBorder !important;
1554              font-weight: bold;
1555              a{
1556                  color : @baseFontColor;
1557                  }
1558          }
1559          border-bottom : 3px solid @lightColorBorder;
1560          .menuItem{
1561              a{
1562                  color : @baseFontColor;
1563                  &:hover{
1564                      text-decoration : none;
1565                  }
1566              }
1567              &:hover{
1568                  .pinUnpinShortCut{
1569                      .displayInlineBlock;
1570                      margin-top: 3px;
1571                      opacity : 0.8;
1572                      &:hover {
1573                          opacity : 1;
1574                      }
1575                  }
1576              }
1577          }
1578      }
1579  }
1580  #settingsShortCutsContainer{

1581      .boxSizingBorderBox;
1582      min-height : 350px;
1583      padding: 1% 3%;
1584      .moduleBlock{
1585          min-height: 60px;
1586      }
1587      .span3.moduleBlock:hover{
1588          .unpin{
1589              display: inline-block;
1590              opacity : 0.4;
1591              &:hover {
1592                  opacity : 0.8;
1593              }
1594          }
1595      }
1596  }
1597  
1598  .widget_header{
1599      padding: 12px 0 3px;
1600      h3, button{
1601          margin-top: 5px;
1602          &.btn-success{
1603              margin-top: 0;
1604          }
1605      }
1606  }
1607  
1608  .settingsIndexPage{
1609      .settingsSummary{
1610          text-align: center;
1611          margin-top: 10px;
1612          a{
1613              display: inline-block;
1614              background: @dashboardWidgetHeader;
1615              color: @baseFontColor;
1616              border-radius: 2px;
1617              min-width: 200px;
1618              padding: 20px 0 10px;
1619              border: 1px solid @lightColorBorder;
1620              .summaryText{
1621                  display: inline-block;
1622                  margin-top :20px;
1623                  font-size: 15px;
1624              }
1625              &:hover{
1626              .summaryText, .summaryCount{
1627                  color :@themeLinkColor;
1628              }
1629          }
1630      }
1631  }
1632      .moduleBlock{
1633          h5{
1634              font-size: 1.2em;
1635              margin-bottom: 5px;
1636          }
1637          &:hover{
1638              background: @dashboardWidgetHeader;
1639          }
1640      }
1641  }
1642  #userPageHeader{

1643      padding: 8px 0 0;
1644      //border-bottom: 1px solid @lightColorBorder;

1645      #userHeading h3{

1646          margin-top: 10px;
1647      }
1648  }
1649  .treeView {
1650      li{
1651          border-left: 4px solid @lightColorBorder;
1652          list-style: none;
1653          padding-top: 15px;
1654          .toolbar-handle{
1655              .btn{
1656                  margin:0px;
1657              }
1658              margin-left: 10px;
1659              position: relative;
1660          }
1661          .toolbar-handle a:before{
1662              background: none repeat scroll 0 0 #DDDDDD;
1663              content: " ";
1664              display: inline-block;
1665              height: 4px;
1666              left: -10px;
1667              position: absolute;
1668              top: 12px;
1669              width: 10px;
1670          }
1671      }
1672      .btn{
1673          margin-bottom: 10px;
1674      }
1675  }
1676  // Profiles

1677  .profilesEditView{
1678      tr.blockHeader th{
1679          text-align: center;
1680          &:first-child{
1681              text-align: left;
1682          }
1683      }
1684      input{
1685          margin-right: 5px;
1686      }
1687      tr td.row-fluid{
1688          table.table{
1689              border-left: none;
1690              margin-bottom: 20px;
1691          }
1692      }
1693      tr:hover td.row-fluid{
1694          background: none;
1695          table.table tr td{
1696              background: none;
1697          }
1698          table.table tr:hover td{
1699              background: none;
1700          }
1701          table.table td{
1702              background: @dashboardWidgetHeader;
1703          }
1704      }
1705  }
1706  
1707  // Settings > Groups //

1708  
1709  #s2id_memberList, .groupMembersColors{

1710     li > div{
1711          margin-left: 10px;
1712      }
1713    .Users{
1714          background-color : @users !important;
1715          padding: 5px;
1716          margin-bottom: 2px;
1717          .backgroundImageNone;
1718     }
1719     .Groups {
1720          background-color : @groups !important;
1721          .backgroundImageNone;
1722          padding: 5px;
1723          margin-bottom: 2px;
1724     }
1725      .Roles{
1726          background-color : @roles !important;
1727          .backgroundImageNone;
1728          padding: 5px;
1729          margin-bottom: 2px;
1730     }
1731     .RoleAndSubordinates{
1732          background-color : @rolesAndSubordinates !important;
1733          .backgroundImageNone;
1734          padding: 5px;
1735          margin-bottom: 2px;
1736     }
1737  }
1738  .collectiveGroupMembers{
1739      border : 1px solid @lightColorBorder;
1740      border-top : 0;
1741      ul{
1742          padding: 0;
1743          margin: 0;
1744          li{
1745              padding: 4px 0;
1746              .boxSizingBorderBox;
1747              a{
1748                  display: inline-block;
1749                  .boxSizingBorderBox;
1750                  width:100%;
1751                  margin: 0;
1752              }
1753          }
1754          li.groupLabel{
1755              background-color : @dashboardWidgetHeader;
1756              border-bottom : 1px solid @lightColorBorder;
1757              border-top : 1px solid @lightColorBorder;
1758              padding: 10px 5px;
1759              margin:0;
1760              color: @baseFontColor;
1761          }
1762      }
1763  }
1764  
1765  
1766  // Slider control

1767  .mini-slider-control{
1768      width: 50px;
1769  }
1770  
1771  .mini-slider-control + div{
1772      margin-left: 15px;
1773  }
1774  
1775  .mini-slider-control .ui-slider-handle {
1776      border: 0;
1777      border-radius: 50%;
1778      height: 16px;
1779      top: -2px;
1780      width: 16px;
1781      cursor: pointer;
1782      &:focus{
1783          outline: none;
1784      }
1785  }
1786  .ui-widget-content{
1787      border-radius: 6px;
1788      border-color: @white;
1789      box-shadow: 0 0 3px -1px inset;
1790      margin-top: 2px;
1791      margin-left: 5px;
1792      height: 12px;
1793  }
1794  .ui-slider-disabled{
1795      opacity: 0.5;
1796      border-color: @lightColorBorder;
1797      box-shadow: none;
1798      cursor: not-allowed;
1799      .ui-slider-handle{
1800          cursor: not-allowed;
1801      }
1802      &+div{
1803          opacity: 0.5;
1804          cursor: not-allowed;
1805      }
1806  }
1807  .mini-slider-control[data-value="0"] .ui-slider-handle {
1808      background: #7d7e7d; /* Old browsers */
1809      background: -moz-linear-gradient(top,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
1810      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
1811      background: -webkit-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
1812      background: -o-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
1813      background: -ms-linear-gradient(top,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
1814      background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
1815      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
1816  }
1817  
1818  .mini-slider-control[data-value="1"] .ui-slider-handle {
1819      background: #ffb76b; /* Old browsers */
1820      background: -moz-linear-gradient(top,  #ffb76b 0%, #ffa73d 0%, #ff7c00 49%, #ff7f04 100%); /* FF3.6+ */
1821      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffb76b), color-stop(0%,#ffa73d), color-stop(49%,#ff7c00), color-stop(100%,#ff7f04)); /* Chrome,Safari4+ */
1822      background: -webkit-linear-gradient(top,  #ffb76b 0%,#ffa73d 0%,#ff7c00 49%,#ff7f04 100%); /* Chrome10+,Safari5.1+ */
1823      background: -o-linear-gradient(top,  #ffb76b 0%,#ffa73d 0%,#ff7c00 49%,#ff7f04 100%); /* Opera 11.10+ */
1824      background: -ms-linear-gradient(top,  #ffb76b 0%,#ffa73d 0%,#ff7c00 49%,#ff7f04 100%); /* IE10+ */
1825      background: linear-gradient(to bottom,  #ffb76b 0%,#ffa73d 0%,#ff7c00 49%,#ff7f04 100%); /* W3C */
1826      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=0 ); /* IE6-9 */
1827  }
1828  
1829  .mini-slider-control[data-value="2"] .ui-slider-handle {
1830      background: #bfd255; /* Old browsers */
1831      background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 79%, #72aa00 100%, #9ecb2d 100%); /* FF3.6+ */
1832      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bfd255), color-stop(79%,#8eb92a), color-stop(100%,#72aa00), color-stop(100%,#9ecb2d)); /* Chrome,Safari4+ */
1833      background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 79%,#72aa00 100%,#9ecb2d 100%); /* Chrome10+,Safari5.1+ */
1834      background: -o-linear-gradient(top, #bfd255 0%,#8eb92a 79%,#72aa00 100%,#9ecb2d 100%); /* Opera 11.10+ */
1835      background: -ms-linear-gradient(top, #bfd255 0%,#8eb92a 79%,#72aa00 100%,#9ecb2d 100%); /* IE10+ */
1836      background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 79%,#72aa00 100%,#9ecb2d 100%); /* W3C */
1837      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 ); /* IE6-9 */
1838  }
1839  
1840  // Module Manager

1841  #moduleManagerContents{

1842      padding-bottom: 10px;
1843      .moduleManagerBlock{
1844          .moduleName{
1845              margin-top: 4px;
1846          }
1847          .btn-group.open .dropdown-menu{
1848              left: -144%;
1849          }
1850      }
1851      .modulesTable{
1852          td{
1853              width: 50%;
1854          }
1855      }
1856  }
1857  #importModules .contents .row-fluid{

1858      margin-bottom: 2.2%;
1859  }
1860  .extensionWidgetContainer{
1861      background-color: @white;
1862      border: 1px solid @lightColorBorder;
1863      min-height: 200px;
1864      padding: 2%;
1865      .extension_contents{
1866          margin-top: 2%;
1867          .contentsBackground;
1868          border: 1px solid @lightColorBorder;
1869          padding: 10px;
1870                  min-height: 230px;
1871          .slimScrollDiv{
1872              padding-right: 10px;
1873          }
1874      }
1875          .extension_contents:hover {
1876              border-radius: 4px;
1877          }
1878      .extension_header .font-x-x-large{
1879          font-size: 1.5em;
1880          padding-left:3px;
1881          font-weight: bold;
1882          color: @themeLinkColor;
1883      }
1884      .extensionDescription {
1885          line-height: 20px;
1886      }
1887      .extensionInfo{
1888          padding-top: 5%;
1889      }
1890          .thumbnailImage {
1891              height: 130px;
1892              width: 130px;
1893              float: right;
1894          }
1895  }
1896  
1897  .extensionWidgetContainer:hover{
1898      background: #fafafa;
1899      box-shadow: 1px 1px 14px 0px #ccc;
1900  }
1901  //Module Manager - general class to apply opacity to actions

1902  .opacity .actions{
1903      .zeroOpacity;
1904  }
1905  .opacity:hover .actions{
1906      .fullOpacity;
1907  }
1908  
1909  // Sharing Access

1910  .sharingAccessDetails{
1911      margin-bottom: 30px;
1912      td,th{
1913          text-align: center;
1914          vertical-align: middle !important;
1915      }
1916      tr td:first-child, tr th:first-child{
1917          text-align: left;
1918      }
1919      td.row-fluid > div{
1920          display: block;
1921      }
1922      .customRuleContainer:hover{
1923          background: none;
1924      }
1925      hr{
1926          border-bottom: 1px solid darken(@lightColorBorder,13%);
1927      }
1928      .title{
1929          padding: 1%;
1930          .boxSizingBorderBox;
1931          .rulehead{
1932              padding-top: 5px;
1933          }
1934      }
1935      .customRuleEntries:hover .actionImages{
1936          .fullOpacity;
1937      }
1938  }
1939  // Layout Editor

1940  .layoutContent{
1941      border-top: 4px solid @baseThemeColor;
1942      #moduleBlocks .editFieldsTable{

1943          margin-bottom:20px;
1944          .fieldLabel{
1945              background: none;
1946          }
1947          .layoutBlockHeader{
1948              .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
1949              text-shadow: 0px 1px @white;
1950              border-top: 1px solid @white;
1951              border-bottom: 1px solid @lightColorBorder;
1952              .blockLabel{
1953                  padding-top: 13px;
1954              }
1955              .blockActions .btn-group{
1956                  margin-top: 5px;
1957                  .dropdown-menu{
1958                      left: -100%;
1959                  }
1960              }
1961          }
1962      }
1963      .relatedTabModulesList{
1964          padding: 2% 1%;
1965      }
1966  }
1967  .fieldDetailsForm{
1968      .search-choice-close{
1969          padding: 0;
1970      }
1971  }
1972  .border1px {
1973      border: 1px solid @lightColorBorder;
1974  }
1975  
1976  .blockFieldsList {
1977      .opacity {
1978          margin-left : 0.5% !important;
1979          .dropdown-menu a {
1980              padding : 0px !important;
1981  
1982          }
1983          a.dropdown-toggle.editFieldDetails{
1984              box-shadow: none;
1985          }
1986      }
1987      .editFields{
1988          .dropdown-menu{
1989                  z-index: 1000003;
1990                  padding:0;
1991                  left: -215px;
1992                  position: absolute;
1993                  .modal-header{
1994                      border-width: 0;
1995                      border-bottom-width: 1px;
1996                      .cancel{
1997                          padding-right: 0;
1998                          font-weight: bold;
1999                      }
2000                  }
2001                  .modal-footer .cancel{
2002                      padding: 0 8px 0 3px;
2003                  }
2004              }
2005          &:hover{
2006              background: @dashboardWidgetHeader !important;
2007          }
2008      }
2009  }
2010  
2011  //-- Picklist Editor --//

2012  #modulePickListValuesContainer .layoutContent{

2013      padding-left: 2%;
2014      .selectedCell, .selectedListItem{
2015          background: lighten(@baseThemeColor,40%);
2016          white-space: nowrap;
2017      }
2018      .pickListValue{
2019          cursor : pointer;
2020  
2021      }
2022  }
2023  
2024  .nonEditableValuesDiv .nonEditablePicklistValues{
2025      margin-left: 0;
2026      li{
2027          padding: 3px 15px;
2028          margin-bottom: 2px;
2029          background: #E0F2FF;
2030      }
2031  }
2032  //-- Popover Content --//

2033  .popover {
2034      z-index : 1000023 !important;
2035  }
2036  .popover-content{
2037      .fieldLabel{
2038          width:35%;
2039          white-space: normal;
2040      }
2041  }
2042  //Picklist dependencyGraph//

2043  #dependencyGraph{

2044      .tableHeading{
2045          text-align: center;
2046          padding-top: 30px;
2047          font-size: 1.2em;
2048          font-weight: bold;
2049      }
2050      .depandencyTable{
2051          border: 1px solid @lightColorBorder;
2052          background: @dashboardWidgetHeader;
2053          .blockHeader{
2054                  border-bottom: 1px solid @lightColorBorder;
2055          }
2056          .picklistValueMapping{
2057              border-bottom: 1px solid @lightColorBorder;
2058          }
2059      }
2060      .dependencyMapping{
2061          text-align: center;
2062          border-left: 1px solid @lightColorBorder;
2063          border-right: 1px solid @lightColorBorder;
2064          background: @contentsBackground;
2065          .mCSB_container{
2066              margin-bottom: 16px !important;
2067          }
2068          .pickListDependencyTable{
2069              border: 0;
2070              .blockHeader th{
2071                  background: @dashboardWidgetHeader;
2072                  border-bottom: 1px solid @lightColorBorder;
2073              }
2074              .selectedCell{
2075                  background: lighten(@baseThemeColor,40%);
2076              }
2077          }
2078      }
2079  }
2080  //-- WebForms --/

2081  .webformFieldInfo{
2082      margin-bottom: 250px;
2083  }
2084  .targetFieldsTableContainer{
2085      input[type="text"]{
2086          min-width: 100px;
2087      }
2088  }
2089  //--Customize record numbering--//

2090  #customRecordNumbering.table thead th{

2091      vertical-align: middle;
2092  }
2093  //Mail Converter Styles//

2094  .addMailBoxBlock {
2095      margin-left: 83px;
2096      padding: 0 !important;
2097      font-size: 12px;
2098  }
2099  
2100  .addMailBoxStep{
2101      background: @contentsBackground;
2102      padding: 30px 0;
2103      border: 1px solid @lightColorBorder;
2104      border-radius: 1px;
2105      min-height: 170px;
2106  }
2107  
2108  .mailConveterDesc {
2109      height:350px;
2110      width:96%;
2111      border: 1.5px solid;
2112      border-radius:2px;
2113      border-color:#dddddd;
2114      font-size:11pt;
2115      margin-top: 55px;
2116      margin-left: 20px;
2117      background: @contentsBackground;
2118  }
2119  
2120  #mailBoxLabel {

2121      margin-top:15px;
2122      margin-left: -18px;
2123      font-size: 12pt;
2124      width: 75px;
2125  }
2126  
2127  .mailBoxDropdownWrapper {
2128      height: 49px;
2129      width: 70%;
2130      background: url('../images/mailbox-icon.png') no-repeat 5px 5px;
2131      overflow: hidden;
2132      border: 1px solid #dddddd;
2133  }
2134  
2135  .mailBoxDropdown {
2136      background: transparent url('../images/downArrowBlue.png') no-repeat 236px 13px;
2137      width: 110%;
2138      height: 50px;
2139      font-size: 14pt;
2140      color: #0065a6;
2141      padding: 10px 55px;
2142      padding-right: 0;
2143  }
2144  
2145  #mailConverterDragIcon {

2146      margin-top: 12px;
2147  }
2148  
2149  #mailConverterBody {

2150      padding-top: 20px;
2151      margin-left: 0px;
2152  }
2153  
2154  .ruleHead{
2155      padding: 6px 0;
2156      background: darken(@dashboardWidgetHeader,10%);
2157  }
2158  
2159  .mailConverterRuleBlock {
2160      font-size:14px;
2161      line-height: 30px;
2162      border: 1.5px solid;
2163      border-color:#dddddd;
2164  }
2165  
2166  .mailConverterRuleLegend {
2167      font-size: 14px;
2168      color: #0065a6;
2169      margin-bottom:10px;
2170      background: @dashboardWidgetHeader;
2171  }
2172  
2173  #mailConverterStats {

2174      font-size: 10pt;
2175      margin-top: 5px;
2176      margin-left: -10px;
2177  }
2178  
2179  .addMailBoxBlock {
2180      border-color: #dddddd;
2181      margin-left: 83px;
2182      margin-top: 20px;
2183      padding-top: 30px;
2184      padding-left: 200px;
2185      padding-bottom: 20px;
2186      padding-right: 30px;
2187      font-size: 11pt;
2188  }
2189  
2190  //--Workflows stylings--//

2191  .taskTypeUi{
2192      &>.row-fluid{
2193          margin: 10px 0;
2194      }
2195  }
2196  
2197  #taskListContainer .listViewEntriesTable tr td:last-child{

2198      border-left: 1px solid @lightColorBorder;
2199  }
2200  
2201  #workflow_step2 > .row-fluid{

2202      padding: 20px;
2203      .boxSizingBorderBox;
2204      min-height: 400px;
2205  }
2206  
2207  // Mail Manager //

2208  
2209  #open_email_con{

2210      .detailViewTitle{
2211          padding: 0;
2212          .detailViewPagingButton{
2213              margin-top: 0;
2214              padding-right: 0;
2215          }
2216      }
2217  }
2218  
2219  #foldersList .nav-list{

2220      padding-right: 0;
2221  }
2222  
2223  // Mass Edit table //

2224  .massEditTable th + th, .massEditTable td + td, .massEditTable th + td, .massEditTable td + th{
2225      border-left: 0;
2226  }
2227  
2228  .nav.massEditTabs{
2229      margin-bottom: 0;
2230      border-bottom: 0;
2231      li.active{
2232          a{
2233              background : @menubarColor;
2234              color : @menubarLinkSelected;
2235              margin-left: 10px;
2236          }
2237      }
2238      li a:hover{
2239          border-bottom: 1px solid @menubarColor;
2240      }
2241  }
2242  
2243  .massEditContent{
2244      border-top:3px solid @menubarColor;
2245  }
2246  
2247  //-- Calendar OverWrites--//

2248  //Calendar Settings

2249  
2250  .calendarSettingsContainer{
2251      width : 700px;
2252      .control-label{
2253          width : 26%;
2254      }
2255  }
2256  
2257  #calendarSettings{

2258      margin: 1px 0 3px;
2259  }
2260  
2261  .calendarMassEdit{
2262      min-width:400px;
2263  }
2264  .fc-state-default .fc-button-effect {
2265      top: 100% !important;
2266  }
2267  //-- Calender events Colors--//

2268  .fc-event-style1,.fc-event-style1 .fc-event-skin { background: @fc-style1; border-color: @fc-style1; font-weight: normal; text-shadow: none; }
2269  .fc-event-style2,.fc-event-style2 .fc-event-skin { background: @fc-style2; border-color: @fc-style2; font-weight: normal; text-shadow: none; }
2270  .fc-event-style3,.fc-event-style3 .fc-event-skin { background: @fc-style3; border-color: @fc-style3; font-weight: normal; text-shadow: none; }
2271  .fc-event-style4,.fc-event-style4 .fc-event-skin { background: @fc-style4; border-color: @fc-style4; font-weight: normal; text-shadow: none; }
2272  .fc-event-style5,.fc-event-style5 .fc-event-skin { background: @fc-style5; border-color: @fc-style5; font-weight: normal; text-shadow: none; }
2273  .fc-event-style6,.fc-event-style6 .fc-event-skin { background: @fc-style6; border-color: @fc-style6; font-weight: normal; text-shadow: none; }
2274  .fc-event-style7,.fc-event-style7 .fc-event-calendarMassEditskin { background: @fc-style7; border-color: @fc-style7; font-weight: normal; text-shadow: none; }
2275  .fc-event-style8,.fc-event-style8 .fc-event-skin { background: @fc-style8; border-color: @fc-style8; font-weight: normal; text-shadow: none; }
2276  #calendarview th {

2277      color : @black;
2278  }
2279  
2280  .fc-agenda-divider + div{
2281      overflow-y: visible !important;
2282  }
2283  
2284  .fc-button{
2285      border-radius :0 !important;
2286      padding: 5px 10px !important;
2287      &:active .fc-button-inner{
2288          background: transparent;
2289          .fc-button-content{
2290              color: @white;
2291          }
2292      }
2293      &.fc-state-active .fc-button-inner .fc-button-content,
2294      &:active .fc-button-inner .fc-button-content{
2295          color: @black !important;
2296          background: transparent;
2297          background-image: none;
2298      }
2299  }
2300  
2301  .fc-header-title h2{
2302      font-size: 15px;
2303      line-height: 20px;
2304  }
2305  
2306  .fc-widget-header {
2307      padding: 7px 0px !important;
2308      color: #666;
2309      background: #eee;
2310      border-color: #ccc;
2311  }
2312  
2313  .fc-content {
2314      background: #fff;
2315      margin-top: 15px;
2316  }
2317  
2318  .fc-content td:hover{
2319      background: #f3f3f3;
2320  }
2321  
2322  
2323  //---Button stylings---//

2324  // Listview setting button dropdown

2325  .listViewSetting.dropdown-menu{
2326      left: -150px;
2327  }
2328  button{
2329  
2330  }
2331  
2332  .btn{
2333      font-weight: bold;
2334      background-color: none ;
2335      background-image: none;
2336      border-radius: 0 !important;
2337      &:focus{
2338          outline: 0;
2339      }
2340  }
2341  
2342  .btn-primary{
2343      background: @primarybtnColor;
2344      &:hover{
2345          background: darken(@primarybtnColor, 15%);
2346      }
2347  }
2348  
2349  .addButton{
2350      background: @addButton;
2351      text-shadow: none;
2352      border-radius: 0 !important;
2353      &:hover{
2354          border-radius: 0 !important;
2355          background-position: 0 0;
2356          background: @addButton;
2357      }
2358      .caret{
2359      }
2360      i{
2361        .icon-inverted;
2362      }
2363      i.caret{
2364          background-size:0;
2365      }
2366  }
2367  
2368  .saveButton, .btn-success{
2369      margin-right: 5px;
2370  }
2371  
2372  .cancelLink{
2373      .cursorPointer;
2374          color :    @deleteButton;
2375          margin: 6px 8px;
2376          font-size : @baseFontSize !important;
2377      &:hover{
2378          color : @deleteButton !important;
2379       }
2380  }
2381  
2382  .addCustomRule{
2383      float: right;
2384  }
2385  
2386  .importMore{
2387      background: @addButton;
2388      //.textShadow(@textColor,1px,1px,1px,@textShadowColor);

2389      &:hover{
2390          //box-shadow: 1px 1px 3px @boxShadowColor !important;

2391         // border-style: solid;

2392          //border-color: @darkColorBorder !important;

2393      }
2394  }
2395  
2396  .lastImport{
2397      background: @addButton;
2398      //.textShadow(@textColor,1px,1px,1px,@textShadowColor);

2399      &:hover{
2400          //box-shadow: 1px 1px 3px @boxShadowColor !important;

2401          //border-style: solid;

2402          //border-color: @darkColorBorder !important;

2403      }
2404  }
2405  
2406  .undoImport{
2407      background: @importUndoLastImport;
2408      //.textShadow(@textColor,1px,1px,1px,@textShadowColor);

2409      &:hover{
2410          //box-shadow: 1px 1px 3px @boxShadowColor !important;

2411          //border-style: solid;

2412          //border-color: @darkColorBorder !important;

2413      }
2414  }
2415  
2416  .close{
2417      border : none;
2418      background: none repeat scroll 0 0 transparent;
2419      border: 0 none;
2420      cursor: pointer;
2421  }
2422  
2423  .resetButton{
2424      margin-top:0 !important;
2425  }
2426  
2427  .vtGlyph {
2428    display: inline-block;
2429    width: 14px;
2430    height: 14px;
2431    line-height: 14px;
2432    vertical-align: text-top;
2433    background-image: url("../images/vtGlyph.png");
2434    background-position: 0 0;
2435    background-repeat: no-repeat;
2436    *margin-right: .3em;
2437  }
2438  
2439  .vticon-pageJump{
2440        background-position: 0 0;
2441  }
2442  
2443  .vticon-call-inbound{
2444        background-position: -14px 0;
2445  }
2446  
2447  .vticon-call-outbound{
2448        background-position: -28px 0;
2449  }
2450  #massEdit .cancelLinkContainer{

2451      padding: 5px 0;
2452      margin-left: 0.5em;
2453  }
2454  
2455  .ui-pnotify{
2456      z-index: 1000023;
2457  }
2458  /*Feedback UI*/

2459  .feedback {
2460      z-index: 10002;
2461  }
2462  
2463  .feedback .handle {
2464      z-index: 10003;
2465      display: block;
2466      position: fixed;
2467      bottom: 50px;
2468      left: -30px;
2469          left: 0\9;
2470          bottom: 100px\9;
2471      background: #2C2C2C;
2472      color: white;
2473      padding: 7px 15px;
2474      border:1px solid gray;
2475      text-decoration: none;
2476      outline: none;
2477      // http://scottgale.com/blog/css-vertical-text/2010/03/01/

2478      -webkit-transform:rotate(270deg);
2479      -moz-transform:rotate(270deg);
2480      -o-transform: rotate(270deg);
2481      -ms-transform: rotate(270deg);
2482      transform: rotate(270deg);
2483          // IE8 Rotate

2484          // http://www.boogdesign.com/examples/transforms/matrix-calculator.html

2485          -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
2486          filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');
2487  }
2488  
2489  .feedback .handle:hover {
2490      text-decoration: none;
2491  }
2492  
2493  /* Footer */

2494  .vtFooter {
2495      text-align: center;
2496      p{
2497          background: @footerBackground;
2498          color: @themeLinkColorInverse;
2499          border-top: 1px solid @lightColorBorder;
2500          padding: 1px 0;
2501          font-size: 0.9em;
2502          margin-bottom:0;
2503          a{
2504              color: @menubarLinkSelected;
2505          }
2506      }
2507  }
2508  
2509  /* Footer */

2510  
2511  /*****Loading message **********/

2512  .imageHolder{
2513      background: url('../images/loadback.png') repeat-y;
2514      background-position: center;
2515      padding: 10px 0;
2516  }
2517  //-- BreadCrumbs -- //

2518  
2519  .breadcrumbContainer{
2520      padding:2% 2% 0 2%;
2521      .boxSizingBorderBox;
2522      height: auto;
2523  }
2524  
2525  .breadcrumb{
2526      display: inline-block;
2527      height: auto;
2528      height: 40px;
2529  }
2530  
2531  .crumbs{
2532      height: 40px;
2533      margin: 0;
2534      padding: 0 20px 0 0;
2535      display: inline-block;
2536      font-family: sans-serif;
2537  }
2538  
2539  .crumbs li:after{
2540      content: '\0000a0';
2541      width:0;
2542      height:0;
2543      border-left:19px solid #ECECEC;
2544      border-top:20px solid transparent;
2545      border-bottom:20px solid transparent;
2546      display: inline-block;
2547      position: relative;
2548      top: -20px;
2549      left: 18px;
2550      zoom: 1;
2551  }
2552  
2553  .crumbs li{
2554      height:0;
2555      border-top:20px solid #ECECEC;
2556      border-bottom:20px solid #ECECEC;
2557      border-left:20px solid transparent;
2558      display: inline-block;
2559      cursor: pointer;
2560      box-shadow: 0 1px #ddd;
2561      margin-right: 5px;
2562  }
2563  
2564  .crumbs li a{
2565      display: inline-block;
2566      float: left;
2567      margin-top: -13px;
2568      font-size: 14px;
2569      font-weight: bold;
2570      color: #666;
2571      text-decoration: none;
2572  }
2573  
2574  .crumbs li:hover{
2575      height:0;
2576      border-top:20px solid lighten(@baseThemeColor,5%);
2577      border-bottom:20px solid lighten(@baseThemeColor,5%);
2578      box-shadow: 0 1px lighten(@baseThemeColor,5%);
2579      a{
2580          color: @white;
2581      }
2582  }
2583  
2584  .crumbs li:hover:after {
2585      border-left:20px solid lighten(@baseThemeColor,5%) !important;
2586  }
2587  
2588  .crumbs li.active{
2589      height:0;
2590      border-top:20px solid @baseThemeColor;
2591      border-bottom:20px solid @baseThemeColor;
2592      box-shadow: 0 1px @baseThemeColor;
2593  }
2594  
2595  .crumbs li.active:after{
2596      border-left: 18px solid @baseThemeColor !important;
2597  }
2598  
2599  .stepText{
2600      display: inline-block;
2601      white-space: nowrap;
2602      overflow: hidden;
2603      font-size: 13px;
2604      vertical-align: bottom;
2605  }
2606  
2607  .active .stepText,
2608  .active .stepNum{
2609      color: #fff;
2610  }
2611  
2612  .stepNum{
2613      display: inline-block;
2614      padding: 0 5px;
2615      overflow: hidden;
2616      font-size: 20px;
2617      vertical-align: top;
2618      margin-top: 5px;
2619  }
2620  
2621  //css used for engagement level in contacts and leads

2622  
2623  .greyStar {
2624      background-image: url("../images/stars.png");
2625      background-position: 20px 20px;
2626      height: 20px;
2627      width: 20px;
2628      display: inline-block;
2629  }
2630  
2631  .yellowStar {
2632      background-image: url('../images/stars.png');
2633      background-position: 0 20px;
2634      width: 20px;
2635      height: 20px;
2636      display: inline-block;
2637  }
2638  
2639  
2640  //--JavaScript overwrites--//

2641  .blockUI{
2642      border-radius: 2px !important;
2643      border: 0 !important;
2644  }
2645  textarea.span11{
2646      width :100% !important;
2647      .boxSizingBorderBox;
2648  }
2649  
2650  // Listview Popover //

2651  .popover {
2652      .popover-inner{
2653          border-radius: 2px;
2654          font-size:0.8em;
2655          box-shadow: 0;
2656          .popover-title{
2657              color: @baseFontColor;
2658              font-size: 15px;
2659          }
2660          .close{
2661              color: @black !important;
2662              margin-top: 3px;
2663              opacity: 0.5 !important;
2664              &:hover{
2665                  opacity: 1 !important;
2666              }
2667          }
2668          td{
2669              padding: 3px 5px;
2670              overflow-wrap: break-word;
2671          }
2672          .detailViewInfo{
2673              margin-top:0;
2674              box-shadow: 0;
2675              .fieldLabel label{
2676                  font-size:1em;
2677              }
2678          }
2679      }
2680  }
2681  
2682  // Find Duplicates Popup //

2683  #findDuplicate{

2684      &>.control-group{
2685          margin-bottom: 0;
2686          width: 400px;
2687      }
2688  }
2689  
2690  #moveReports .modal-body {

2691      padding: 20px 40px;
2692  }
2693  
2694  //Compose Email Popup//

2695  #composeEmailContainer{

2696      padding: 0 20px;
2697      .MultiFile-wrap{
2698          display: inline-block;
2699      }
2700      .MultiFile-intercepted .ui-wrapper{
2701          min-height: 400px;
2702      }
2703  }
2704  
2705  // Tranfer Ownership popup //

2706  #transferOwnershipContainer .select2-container.select2-container-multi{

2707      max-width: 220px;
2708  }
2709  
2710  //Convert Lead

2711  
2712  .fieldInfo.in{
2713      overflow:visible !important;
2714      height: auto !important;
2715  }
2716  
2717  .moduleSelection{
2718      border-radius: 2px 2px 0 0 !important;
2719      border: 1px solid @lightColorBorder !important;
2720      .gradientBar(lighten(@dashboardWidgetHeader,1%),@dashboardWidgetHeader);
2721      color: @dashboardWidgetHeaderText;
2722  }
2723  
2724  .convertLeadModules{
2725      margin-bottom: 2%;
2726      border: 1px none;
2727  }
2728  
2729  .moduleBlock{
2730      border-radius: 0px !important;
2731  }
2732  
2733  .overflowVisible{
2734      overflow:visible !important;
2735  }
2736  
2737  .convertLeadError{
2738      border: 3px solid rgb(153, 153, 153);
2739      background-color: rgb(255, 255, 255);
2740      width: 55%;
2741      position: relative;
2742      z-index: 10000000;
2743      table td{
2744          border-bottom: 1px solid rgb(204, 204, 204);
2745          nowrap: nowrap;
2746          width:70%;
2747      }
2748  }
2749  
2750  .bootbox, .alert{
2751      z-index: 1000023;
2752  }
2753  
2754  // Chozen Overwrites //

2755  .chzn-container{
2756      vertical-align: middle;
2757  }
2758  .chzn-container .chzn-results {
2759      li{
2760          margin-right: 7px;
2761      }
2762      .highlighted{
2763          background :@menubarColor;
2764      }
2765  }
2766  
2767  // Select2 overwrites //

2768  .select2-results{
2769      .select2-highlighted{
2770          background :@menubarColor;
2771      }
2772  }
2773  
2774  .select2-result-label{
2775      .filterActionImgs{
2776          margin-top: 3px;
2777      }
2778      i{
2779          background-image: url("../../../../libraries/bootstrap/img/glyphicons-halflings-white.png");
2780      }
2781  }
2782  
2783  // Select2 Plugin customization

2784  .select2-container-multi .select2-choices .select2-search-choice {
2785      cursor: move;
2786  }
2787  
2788  .select2-search-field{
2789      display: block;
2790      width:100%;
2791  }
2792  
2793  //Auto Complete Reference Field

2794  
2795  .ui-autocomplete-loading {
2796      background: url('../images/load.gif') no-repeat right center;
2797  }
2798  
2799  .ui-autocomplete{
2800      height: auto !important;
2801      border-radius: 1px !important;
2802  }
2803  
2804  .dropdown-menu.pull-right{
2805      &:after,&:before{
2806          right : 3px;
2807          left : auto;
2808          top: -5px;
2809          border-bottom-width: 6px;
2810      }
2811  }
2812  // Bootstrap overwrites //

2813  
2814  
2815  a{
2816      color: darken(@themeLinkColor,5%);
2817      &:hover{
2818          color: darken(@themeLinkColor,15%);
2819          text-decoration: none;
2820          cursor: pointer;
2821      }
2822      &:active, &:focus{
2823          outline: 0;
2824      }
2825  }
2826  
2827  .well{
2828      border-radius: 2px;
2829      padding: 15px;
2830  }
2831  
2832  .verticalBottomSpacing{
2833      margin-bottom: 10px;
2834  }
2835  
2836  .mergeTables {
2837      margin-bottom: 0px;
2838  }
2839  
2840  .font-x-x-large{
2841      font-size: 18px;
2842      line-height: 28px;
2843  }
2844  
2845  img{
2846      //-- Hack/Fix for overflowing actions container searchbar next line for Arial font --//

2847      max-width: 95%;
2848  }
2849  
2850  form{
2851      margin: 0;
2852  }
2853  
2854  .input-prepend .add-on, .input-append .add-on,.input-prepend.input-append .add-on:first-child, .input-prepend.input-append .btn:first-child{
2855      line-height: 22px;
2856      border-radius: 1px !important;
2857  }
2858  
2859  input, textarea, select,
2860  .uneditable-input, input[type="text"], input[type="password"],
2861  .ui-autocomplete-input, textarea, .uneditable-input,
2862  .chzn-container-single .chzn-single, .chzn-container-single .chzn-single div,
2863  .input-prepend .add-on, .input-append .add-on{
2864      border-radius : 1px;
2865  }
2866  
2867  .fc-state-default .fc-button-effect span{
2868      background: none;
2869  }
2870  
2871  .input-prepend.input-append input,
2872  .input-prepend.input-append select,
2873  .input-prepend.input-append .uneditable-input {
2874    -webkit-border-radius: 0;
2875       -moz-border-radius: 0;
2876            border-radius: 0;
2877  }
2878  
2879  .input-prepend.input-append .add-on:first-child,
2880  .input-prepend.input-append .btn:first-child {
2881    margin-right: -1px;
2882    -webkit-border-radius: 3px 0 0 3px;
2883       -moz-border-radius: 3px 0 0 3px;
2884            border-radius: 3px 0 0 3px;
2885  }
2886  
2887  .input-prepend.input-append .add-on:last-child,
2888  .input-prepend.input-append .btn:last-child {
2889    margin-left: -1px;
2890    -webkit-border-radius: 0 3px 3px 0;
2891       -moz-border-radius: 0 3px 3px 0;
2892            border-radius: 0 3px 3px 0;
2893  }
2894  
2895  .dateField{
2896      width: 183px;
2897  }
2898  // To make align addon icons vertically middle

2899  .form-horizontal{
2900      [class^="icon-"], [class*=" icon-"]{
2901          vertical-align: baseline;
2902      }
2903  }
2904  
2905  // Other over writes

2906  
2907  //Time picker styles

2908  .timePicker{
2909      width: 8.5em !important;
2910      //layout editor drop down should show

2911      z-index: 1000029 !important;
2912  }
2913  
2914  .datepicker {
2915      //layout editor drop down should show

2916      z-index: 1000029 !important;
2917  }
2918  
2919  //Color picker styles

2920  .colorpicker {
2921      //color picker should highlight than full calendar view

2922      z-index: 1029 !important;
2923  
2924      //color picker input override by bootstrap

2925      input {
2926          width : 30px !important;
2927      }
2928  
2929      //color picker input color overriding by editview inputs

2930      input[type="text"], input {
2931          color : #898989 !important;
2932      }
2933  }
2934  
2935  //color picker input override by bootstrap

2936  .colorpicker_hex input {
2937      width : 45px !important;
2938  }
2939  
2940  //Fix for background scroll when modal is open

2941    .modal-body.accordion{
2942        margin-bottom: 0;
2943        .boxSizingBorderBox;
2944    }
2945  .modal-open {
2946      overflow : hidden;
2947      /** modal will be having z-index as 10001 **/

2948      .datepicker, .timePicker{
2949          z-index : 1000008 !important;
2950      }
2951      .chzn-drop{
2952          z-index : 1000008 !important;
2953      }
2954  }
2955  .modal-open .massEditContent, .tab-content, .overflowVisible{
2956      overflow: visible;
2957  }
2958  // Select2 Plugin customization

2959  .select2-container-multi .select2-choices .select2-search-choice {
2960      cursor: move;
2961  }
2962  
2963  //Fix for no file chosen issue with mutlifile plugin.

2964  .removeNoFileChosen{
2965      color: transparent !important;
2966  }
2967  
2968  .modelContainer{
2969      .modal-header {
2970          border-radius: 2px 2px 0 0;
2971      }
2972      form{
2973          border-radius: 0 0 2px 2px;
2974      }
2975  }
2976  
2977  // Css Classes used here

2978  .hide{
2979      display: none;
2980  }
2981  i{
2982      .cursorPointer;
2983  }
2984  .marginbottomZero{
2985      margin-bottom: 0 !important;
2986  }
2987  .marginLeftZero{
2988      margin-left: 0 !important;
2989  }
2990  .clearfix{
2991      clear: both !important;
2992  }
2993  textarea{
2994      .boxSizingBorderBox;
2995      width:100%;
2996  }
2997  //Mixin for textoverflow ellipsis

2998  .textOverflowEllipsisMixin(@width,@textOverflow : ellipsis){
2999      overflow : hidden;
3000      text-overflow : @textOverflow;
3001      white-space : nowrap;
3002      width : @width;
3003  }
3004  .textOverflowEllipsis{
3005      .textOverflowEllipsisMixin(9em,ellipsis);
3006  }
3007  
3008  .margin0px{
3009      margin: 0 !important;
3010  }
3011  .padding10{
3012      padding: 10px;
3013      padding-bottom: 0;
3014  }
3015  .padding20{
3016      padding: 20px;
3017  }
3018  .pushDown{
3019      margin-top: 5px;
3020  }
3021  .boxSizingBorderBox{
3022          -webkit-box-sizing: border-box;
3023          -moz-box-sizing : border-box;
3024          box-sizing : border-box;
3025          word-wrap : break-word;
3026  }
3027  .boxSizingContentBox{
3028      -webkit-box-sizing: content-box;
3029      -moz-box-sizing : content-box;
3030      box-sizing : content-box;
3031  }
3032  .cursorPointer {
3033      cursor: pointer;
3034      text-decoration: none !important;
3035  }
3036  .zeroOpacity {
3037      opacity : 0;
3038      /*for IE*/

3039      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
3040      filter: alpha(opacity=0);
3041  }
3042  
3043  .dullOpacity{
3044      opacity: 0.8;
3045      /*for IE*/

3046      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
3047      filter: alpha(opacity=80);
3048  }
3049  
3050  .fullOpacity{
3051      opacity : 1;
3052      /*for IE*/

3053      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
3054      filter: alpha(opacity=100);
3055  }
3056  .redColor{
3057      color: red;
3058  }
3059  .highlightBackgroundColor{
3060      background: @mainContainer;
3061  }
3062  .contentsBackground{
3063      background: @contentsBackground;
3064      border: 1px solid @lightColorBorder;
3065  }
3066  .textAlignCenter{
3067      text-align: center;
3068  }
3069  .textAlignRight{
3070      text-align: right;
3071  }
3072  .alignMiddle{
3073      vertical-align: middle;
3074  }
3075  .alignTop{
3076      vertical-align: top;
3077  }
3078  .padding1per{
3079      padding: 1%;
3080  }
3081  .paddingTop20{
3082      padding-top: 20px;
3083  }
3084  .padding20px{
3085      padding: 20px;
3086  }
3087  .padding-bottom1per{
3088      padding-bottom: 1%;
3089  }
3090  .marginBottom10px{
3091      margin-bottom:10px;
3092  }
3093  .displayInlineBlock{
3094      display: inline-block;
3095  }
3096  .backgroundImageNone{
3097      background-image : none;
3098  }
3099  .liStyleNone{
3100      list-style: none outside none;
3101  }
3102  .fontBold {
3103      font-weight: bold !important;
3104  }
3105  
3106  .icon-inverted{
3107       //background-image: url("../../../../libraries/bootstrap/img/glyphicons-halflings-white.png") !important;

3108  }
3109  .icon-plus.icon-white{
3110      background-image: url("../../../../libraries/bootstrap/img/glyphicons-halflings.png") !important;
3111      opacity :0.8;
3112  }
3113  
3114  // Feedback and support hidden temporarily ///

3115  .livesupport_tab,#userfeedback {
3116      display: none !important;
3117  }
3118  
3119  // Reports //

3120  #reportDetails table tr td.summary{

3121      border-bottom: 0;
3122      border-top: 0;
3123  }
3124  
3125  #portalDetailViewHttpError {

3126      padding-bottom: 7px;
3127      margin-top: 50px;
3128      color: red;
3129      text-align: center;
3130  }
3131  
3132  .wide, 
3133  .table td.wide, 
3134  .listViewEntries td.wide, 
3135  td.listViewEntryValue.wide { 
3136       padding: 8px!important; 
3137  } 
3138  .medium, 
3139  .table td.medium, 
3140  .listViewEntries td.medium, 
3141  td.listViewEntryValue.medium { 
3142      padding: 5px 6px!important; 
3143  } 
3144  .narrow, 
3145  .table td.narrow, 
3146  .listViewEntries td.narrow, 
3147  td.listViewEntryValue.narrow { 
3148      padding: 2px 4px!important; 
3149  } 
3150  .table thead th.narrow { 
3151      vertical-align: middle; 
3152  } 
3153  td.listViewEntryValue .row-fluid input { 
3154      padding: 0; 
3155      margin-bottom: 0; 
3156  } 
3157  .listViewContentDiv { 
3158      position: relative; 
3159  }