ecomp-portal-FE-common/client/app/views/dashboard/dashboard.less

   1 .w-ecomp-dashboard-home {\r
   2  .bg_portalWhite;//white for 1702\r
   3    position: @page-main-position;\r
   4   top: @page-main-top;\r
   5   left: @page-main-left;\r
   6   right: @page-main-right;\r
   7   bottom: @page-main-bottom;\r
   8   padding-top: @padding-top;\r
   9   overflow-y: @page-main-overflow-y;\r
  10   padding-left: @padding-left-side;\r
  11 \r
  12   .gridster-item-container .gridster-item-body {\r
  13     overflow-y:auto;\r
  14     overflow-x:hidden;\r
  15   }\r
  16 \r
  17   .dashboard-home-container {\r
  18       position: relative;\r
  19       padding-right: 0;\r
  20       padding-left: 0;\r
  21       padding-bottom: @container-bottom;\r
  22 \r
  23     .dashboard-home-title {\r
  24       .blackText24m;\r
  25       margin: auto;\r
  26       .content_justify;\r
  27     }\r
  28     \r
  29     .portals-list {\r
  30       min-height: 70vh;\r
  31       //display: flex;\r
  32       justify-content: center;\r
  33       flex-flow: row wrap;\r
  34       width: @table-width;\r
  35       //margin-left: 230px;\r
  36       margin-bottom: 63px;\r
  37           margin:auto;\r
  38       .app-gridster-header {\r
  39         background-color: @u;\r
  40         font-size:12px;\r
  41         overflow:hidden\r
  42       }\r
  43 \r
  44       .app-gridster-footer {\r
  45         background-color: @u;\r
  46       }\r
  47 \r
  48       .portals-list-item {\r
  49         background-color: @u;\r
  50         border-radius: 2px;\r
  51         box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);\r
  52         display: inline-block;\r
  53         width: 360px;\r
  54         height: 300px;\r
  55         background-size: cover;\r
  56         cursor: pointer;\r
  57         margin: 15px;\r
  58         overflow: hidden;\r
  59 \r
  60         .portals-item-info {\r
  61           background-color: @u;\r
  62           height: 120px;\r
  63           top: 180px;\r
  64           position: relative;\r
  65           box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.1);\r
  66           padding: 16px;\r
  67 \r
  68           .info-title {\r
  69             .blackText24m;\r
  70             margin-bottom: 4px;\r
  71             \r
  72             text-overflow: ellipsis;\r
  73             overflow: hidden;\r
  74           }\r
  75           .info-description {\r
  76             .portalDBlue16r;\r
  77             text-overflow: ellipsis;\r
  78             white-space: nowrap;\r
  79             overflow: hidden;\r
  80           }\r
  81           .info-button {\r
  82             .btn-green;\r
  83             width: 96px;\r
  84             position: absolute;\r
  85             bottom: 16px;\r
  86             left: 16px;\r
  87           }\r
  88 \r
  89           &:hover {\r
  90             opacity: .93;\r
  91             z-index: 3;\r
  92           }\r
  93         }\r
  94       }\r
  95     }\r
  96   }\r
  97 }\r
  98 .w-ecomp-main-error{      \r
  99   .portalRed;\r
 100   position: absolute;\r
 101   width: 100%;\r
 102   line-height: 1.5em;   \r
 103 }\r
 104 .w-ecomp-main-disclaimer {\r
 105   text-align: center;\r
 106   .dGray14r;\r
 107   //position: absolute;\r
 108   bottom: -75px;\r
 109   line-height: 1.5em;\r
 110   margin: 0 auto;\r
 111   width:1170px;\r
 112   position: relative;\r
 113 \r
 114 }\r
 115 \r
 116 @keyframes fadein {\r
 117   from {\r
 118     opacity: 0;\r
 119   }\r
 120   to {\r
 121     opacity: 1;\r
 122   }\r
 123 }\r
 124 \r
 125 .slide.ng-hide-add, \r
 126 .slide.ng-hide-remove,\r
 127 .slide.ng-enter,\r
 128 .slide.ng-leave {\r
 129   transition: all 0.5s ease;\r
 130 }\r
 131 .slide.ng-hide,\r
 132 .slide.ng-enter {\r
 133   transform: translate(-100%, 0);\r
 134 }\r
 135 .slide.ng-enter-active {\r
 136   transform: translate(0, 0);\r
 137 }\r
 138 .slide.ng-leave {\r
 139   transform: translate(0, 0);\r
 140 }\r
 141 .slide.ng-leave-active {\r
 142   transform: translate(+100%, 0);\r
 143 }\r
 144 .dashboard-boarder{\r
 145         // border: 2px solid #ccc!important;    \r
 146         // border-radius: 16px!important; \r
 147           height: 210px;\r
 148     overflow: auto;\r
 149 }\r
 150 .dashboard-information-boarder{\r
 151         border: 2px solid #ccc!important; \r
 152         border-radius: 16px!important;    \r
 153 }\r
 154 \r
 155 #information-section {\r
 156    margin-top:50px;\r
 157 }\r
 158 \r
 159 .information-section-title{\r
 160     color: #0574ac;\r
 161     font-family: Omnes-ECOMP-W02-Bold,Arial;\r
 162     font-size: 25px;\r
 163     margin: 20px;\r
 164     width: 1170px;\r
 165 }\r
 166 #left {\r
 167     float: left;\r
 168     width: 33%;\r
 169     height:300px;\r
 170     background-color: white;\r
 171 }\r
 172 \r
 173 #center {\r
 174     float: right;\r
 175     width: 33%;\r
 176     height:300px;\r
 177         background: white;\r
 178 } \r
 179 #right {\r
 180     margin-left:34%;\r
 181         margin-right:34%;\r
 182         height:300px;\r
 183         background:white;\r
 184 }  \r
 185 \r
 186 \r
 187 /*hover*/\r
 188 \r
 189 \r
 190 .dock ul{\r
 191 display: inline-block;\r
 192 \r
 193 width: auto;\r
 194 margin: 0px;\r
 195 padding: 0px;\r
 196 list-style: none;\r
 197 \r
 198 }\r
 199 .dock ul li {\r
 200 width: auto;\r
 201 height: auto;\r
 202 display: inline-block;\r
 203 bottom: 0;\r
 204 vertical-align: bottom;\r
 205 margin-top: -43px;\r
 206 }\r
 207 .dock ul li a {\r
 208 display: block;\r
 209 height: 150px;\r
 210 width: 150px;\r
 211 position: relative;\r
 212 -webkit-transition-property: width, height,margin-top;\r
 213 -webkit-transition-duration: 0.5s;\r
 214 -o-transition-property: width, height,margin-top;\r
 215 -o-transition-duration: 0.5s;\r
 216 -moz-transition-property: width, height,margin-top;\r
 217 -moz-transition-duration: 0.5s;\r
 218 }\r
 219 .dock ul li a:hover {\r
 220 width: 200px;\r
 221 height: 200px;\r
 222 margin-top: -50px;\r
 223 }\r
 224 .dock ul li a img {\r
 225 width: 100%;\r
 226 position: absolute;\r
 227 bottom: 0;\r
 228 left: 0;\r
 229 border: none;\r
 230 padding: 0px 0px 0px 30px;\r
 231 }\r
 232 .dock_left{\r
 233 width: 31px;\r
 234 -webkit-transform: rotate(33deg);\r
 235 -moz-transform: rotate(33deg);\r
 236 -o-transform: rotate(33deg);\r
 237 position: relative;\r
 238 background: #EEE;\r
 239 overflow: hidden;\r
 240 float: left;\r
 241 height: 100px;\r
 242 z-index: 2;\r
 243 margin: -18px;\r
 244 }\r
 245 .dock_right{\r
 246 width: 36px;\r
 247 -webkit-transform: rotate(-33deg);\r
 248 -moz-transform: rotate(-33deg);\r
 249 -o-transform: rotate(-33deg);\r
 250 position: relative;\r
 251 background: #EEE;\r
 252 overflow: hidden;\r
 253 float: left;\r
 254 height: 100px;\r
 255 z-index: 2;\r
 256 margin: -18px;\r
 257 }\r
 258 \r
 259 \r
 260 \r
 261 \r
 262 /*Time for the CSS*/\r
 263 * {margin: 0; padding: 0;}\r
 264 body {background: #ccc;}\r
 265 \r
 266 .slider{\r
 267         width: 640px; /*Same as width of the large image*/\r
 268         position: relative;\r
 269         /*Instead of height we will use padding*/\r
 270         padding-top: 320px; /*That helps bring the labels down*/\r
 271         \r
 272         margin: 50px auto;\r
 273         \r
 274         /*Lets add a shadow*/\r
 275         box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);\r
 276 }\r
 277 \r
 278 \r
 279 /*Last thing remaining is to add transitions*/\r
 280 .slider>img{\r
 281         position: absolute;\r
 282         left: 0; top: 0;\r
 283         transition: all 0.5s;\r
 284 }\r
 285 \r
 286 .slider input[name='slide_switch'] {\r
 287         display: none;\r
 288 }\r
 289 \r
 290 .slider label {\r
 291         /*Lets add some spacing for the thumbnails*/\r
 292         margin: 18px 0 0 18px;\r
 293         border: 3px solid #999;\r
 294         \r
 295         float: left;\r
 296         cursor: pointer;\r
 297         transition: all 0.5s;\r
 298         \r
 299         /*Default style = low opacity*/\r
 300         opacity: 0.6;\r
 301 }\r
 302 \r
 303 .slider label img{\r
 304         display: block;\r
 305 }\r
 306 \r
 307 /*Time to add the click effects*/\r
 308 .slider input[name='slide_switch']:checked+label {\r
 309         border-color: #666;\r
 310         opacity: 1;\r
 311 }\r
 312 /*Clicking any thumbnail now should change its opacity(style)*/\r
 313 /*Time to work on the main images*/\r
 314 .slider input[name='slide_switch'] ~ img {\r
 315         opacity: 0;\r
 316         transform: scale(1.1);\r
 317 }\r
 318 /*That hides all main images at a 110% size\r
 319 On click the images will be displayed at normal size to complete the effect\r
 320 */\r
 321 .slider input[name='slide_switch']:checked+label+img {\r
 322         opacity: 1;\r
 323         transform: scale(1);\r
 324 }\r
 325 /*Clicking on any thumbnail now should activate the image related to it*/\r
 326 \r
 327 /*We are done :)*/\r
 328 \r
 329 \r
 330 \r
 331 .accordion {\r
 332         width: 895px; height: 320px;\r
 333         overflow: hidden;\r
 334   box-shadow: 0 10px 6px -6px #111;\r
 335   margin: 20px auto\r
 336 }\r
 337 .accordion ul { width: 200% }\r
 338 \r
 339 .accordion li {\r
 340         position: relative;\r
 341         display: block;\r
 342         width: 160px;\r
 343         float: left;\r
 344   box-shadow: 0 0 30px 8px #222;\r
 345         transition: all 0.4s ease .300ms;\r
 346 }\r
 347 \r
 348 .accordion ul:hover li {width: 40px }\r
 349 .accordion ul li:hover {width: 640px }\r
 350 \r
 351 .caption {\r
 352         background: rgba(0, 0, 0, 0.5);\r
 353         position: absolute;\r
 354   bottom: 0;    \r
 355         width: 640px\r
 356 }\r
 357 \r
 358 .caption a {\r
 359         display: block;\r
 360         color: #fff;\r
 361         text-decoration: none;\r
 362   font: normal 16px 'Lato', Helvetica, Arial, sans-serif;\r
 363   -webkit-font-smoothing: antialiased;\r
 364         padding: 15px;\r
 365 }\r
 366 \r
 367 \r
 368 /*events*/\r
 369 .events-date{\r
 370         margin-left: 10px; \r
 371         float:left; \r
 372         white-space: normal; \r
 373         display: inline-block; \r
 374         vertical-align: middle;\r
 375     width: 55px;\r
 376 }\r
 377 .event-title-div{\r
 378         float: left;\r
 379         width: 235px;\r
 380         line-height: 20px;\r
 381     padding: 5px;\r
 382         font-size: 14px; \r
 383         margin-left: 4px;\r
 384 }\r
 385 .events-date{\r
 386         height: 20px;\r
 387         margin-left: 4px; \r
 388         font-size: 14px; \r
 389 }\r
 390 .events-content{\r
 391         font-size: 14px; \r
 392         color: #444;\r
 393     margin-right: 10px;\r
 394 }\r
 395 .events-content-body{\r
 396         margin-top:5px;\r
 397         color:#444;\r
 398         margin-left:12px;\r
 399         line-height:1.5;\r
 400 }\r
 401 .events {\r
 402         border-radius: 4px;\r
 403         padding: 3px;\r
 404         -webkit-user-select: none;   \r
 405 }\r
 406 .events ul {\r
 407         float: left;\r
 408         width:100%;\r
 409         -webkit-user-select: none\r
 410 }\r
 411 .events ul li {\r
 412         line-height: 30px; \r
 413         list-style: none;\r
 414     border-bottom: 2px solid grey;\r
 415     height: 100%;\r
 416     min-height: 42px;\r
 417 }\r
 418 .events ul li:hover {\r
 419     background: #ddd;\r
 420     cursor: pointer;\r
 421 }\r
 422 .events ul li a {\r
 423         color: black;\r
 424         text-decoration: none;\r
 425         font: 14px Helvetica, Arial, sans-serif;\r
 426         -webkit-font-smoothing: antialiased;\r
 427         -webkit-user-select: none;\r
 428         font-family: "Omnes-ECOMP-W02", Arial;\r
 429 }\r
 430 .events-link{\r
 431         color: #067ab4 !important; \r
 432 }\r
 433 \r
 434 \r
 435 /*widgets*/\r
 436 \r
 437 .handle-e{\r
 438     width: 5px;\r
 439 }\r
 440 \r
 441 .singleBtnBorder {\r
 442     border-radius: 6px 6px 6px 6px;  \r
 443 }\r
 444 \r
 445 .widgetHeaderBtn{\r
 446     \r
 447     height: 30px;\r
 448     background-color: #FFFFFF;\r
 449     position: relative;\r
 450     display: inline-block;\r
 451     -moz-background-clip: padding-box;\r
 452     -webkit-background-clip: padding-box;\r
 453     background-clip: padding-box;\r
 454     -webkit-box-sizing: border-box;\r
 455     -moz-box-sizing: border-box;\r
 456     box-sizing: border-box;\r
 457     padding: 8px 20px;\r
 458     font-size: 14px;\r
 459     line-height: 14px;\r
 460     min-width: 60px;\r
 461     border: none;\r
 462     border-radius: 6px;\r
 463     background-color: #ffffff;\r
 464     background-image: none;\r
 465     color: #ffffff;\r
 466     vertical-align: middle;\r
 467     text-align: center;\r
 468     text-decoration: none;\r
 469     text-transform: capitalize;\r
 470     text-shadow: none !important;\r
 471     white-space: nowrap;\r
 472     cursor: pointer;\r
 473     -webkit-user-select: none;\r
 474     -moz-user-select: none;\r
 475     -ms-user-select: none;\r
 476     -o-user-select: none;\r
 477     user-select: none;\r
 478     -webkit-transition: background-color 0.3s ease-out;\r
 479     -moz-transition: background-color 0.3s ease-out;\r
 480     transition: background-color 0.3s ease-out;\r
 481     }\r
 482   \r
 483 .widgetHeaderBtnPosition {\r
 484         width: 30px;\r
 485     min-width: 0px;\r
 486     border: 1px solid #AAAAAA;\r
 487     padding-left: 3px;\r
 488     padding-right: 5px;\r
 489     }\r
 490     \r
 491 .icon-anchor {\r
 492     color: #888;\r
 493 }\r
 494    \r
 495 .widgetHeaderBtn:hover, .widgetHeaderBtn:focus {\r
 496     background: rgba(0, 0, 0, 0);\r
 497     color: #3a7999;\r
 498     box-shadow: inset 0 0 0 2px #3a7999;\r
 499 }\r
 500 /*news*/\r
 501 \r
 502 @keyframes ticker {\r
 503         0%   {margin-top: 0}\r
 504         25%  {margin-top: -55px}\r
 505         50%  {margin-top: -110px}\r
 506         75%  {margin-top: -165px}\r
 507         100% {margin-top: 0}\r
 508 }\r
 509 \r
 510 body { background: #333; width: 100%; height: 100% }\r
 511 \r
 512 .news {\r
 513  \r
 514   width: 350px;\r
 515   height: 250px;\r
 516   margin: 0px auto;\r
 517   // overflow: auto;\r
 518   border-radius: 4px;\r
 519   padding: 3px;\r
 520   -webkit-user-select: none;\r
 521      \r
 522 } \r
 523 \r
 524 \r
 525 \r
 526 .news ul {\r
 527   float: left;\r
 528   width:100%;\r
 529   // animation: ticker 25s cubic-bezier(1, 0, .5, 0) infinite;\r
 530   -webkit-user-select: none\r
 531 }\r
 532 \r
 533 .news ul li {line-height: 30px; list-style: none;\r
 534     border-bottom: 2px solid grey;\r
 535     min-height: 42px;\r
 536  }\r
 537  \r
 538 .news ul li:hover {\r
 539     background: #ddd;\r
 540     cursor: pointer;\r
 541 }\r
 542 \r
 543 .news ul li a {\r
 544   color: black;\r
 545   text-decoration: none;\r
 546   font-size: 14px;\r
 547   line-height: 1.5;\r
 548   display: inline-block;\r
 549   width:100%;\r
 550   min-height:40px;\r
 551   padding-top: 5px;\r
 552   padding-bottom: 5px;\r
 553   -webkit-font-smoothing: antialiased;\r
 554   -webkit-user-select: none;\r
 555 }\r
 556 \r
 557 .news ul:hover { animation-play-state: paused }\r
 558 .news span:hover+ul { animation-play-state: paused }\r
 559 /*resources*/\r
 560 .resources {\r
 561  \r
 562   width: 100%;\r
 563   height: 200px;\r
 564   margin-left: 5px;\r
 565   border-radius: 4px;\r
 566   padding: 3px;\r
 567   -webkit-user-select: none;\r
 568      \r
 569 } \r
 570 \r
 571 \r
 572 \r
 573 .resources ul {\r
 574   float: left;\r
 575   width:100%;\r
 576  \r
 577   -webkit-user-select: none\r
 578 }\r
 579 \r
 580 .resources ul li {line-height: 30px; list-style: none;\r
 581     border-bottom: 2px solid grey;\r
 582     min-height: 42px;\r
 583  }\r
 584  \r
 585 .resources ul li:hover {\r
 586     background: #ddd;\r
 587     cursor: pointer;\r
 588 }\r
 589 \r
 590 .resources ul li a {\r
 591   color: black;\r
 592   text-decoration: none;\r
 593   font-size: 14px;\r
 594   line-height: 1.5;\r
 595   width:100%;\r
 596   min-height:40px;\r
 597   display: inline-block;\r
 598   padding-top: 5px;\r
 599   padding-bottom: 5px;\r
 600   -webkit-font-smoothing: antialiased;\r
 601   -webkit-user-select: none;\r
 602 }\r
 603 \r
 604 \r
 605 /* OTHER COLORS */\r
 606 .blue { background: #347fd0 }\r
 607 .blue span { background: #2c66be }\r
 608 .red { background: #d23435 }\r
 609 .red span { background: #c22b2c }\r
 610 .green { background: #699B67 }\r
 611 .green span { background: #547d52 }\r
 612 .magenta { background: #b63ace }\r
 613 .magenta span { background: #842696 }\r
 614 \r
 615 \r
 616 /*broadcast*/\r
 617 \r
 618 .box-one {\r
 619   -webkit-transition:all linear 0.4s;\r
 620   transition:all linear 0.4s;\r
 621   height:100px; width:200px; background:white;    border: 2px solid #ccc!important;\r
 622     border-radius: 16px!important;\r
 623 }\r
 624 .box-one.ng-hide {\r
 625 display: block!important;\r
 626   opacity:0;\r
 627 }\r
 628 \r
 629 .gridsterContent{\r
 630         height:120px;\r
 631 }\r
 632 \r
 633 .gridster-item{\r
 634     z-index:0 !important;\r
 635 }\r
 636 .gridsterAppContent{\r
 637         height:120px;\r
 638         \r
 639 }\r
 640 \r
 641  .gridsterImage{\r
 642         height:84px; \r
 643         width:168px;\r
 644  }\r
 645  .grider-content-ecomp{\r
 646         transition: transform 0.5s ease-out;\r
 647  }\r
 648   .grider-content-ecomp:hover{\r
 649     transform: scale(1.1);\r
 650 }\r
 651 \r
 652 \r
 653 /*information section*/\r
 654 \r
 655 .information-section{\r
 656         /*margin-top:25px;*/\r
 657 }\r
 658 .information-section-gridsterContent{\r
 659         /*height:300px;*/\r
 660 }\r
 661 .information-sections-gridster-header{\r
 662         color: #0574ac;\r
 663     font-family: Omnes-ECOMP-W02-Bold,Arial;\r
 664     font-size: 25px;\r
 665    \r
 666 }\r
 667 /*application empty div*/\r
 668 .app-error-block {\r
 669     padding-top: 10px;\r
 670    \r
 671 }\r
 672 /*news empty div*/\r
 673 .activity-error-block {\r
 674     padding-top: 60px;\r
 675    \r
 676 }\r
 677 \r
 678 .activity-error-msg1{\r
 679         text-align: center;\r
 680     margin-top: 20px;\r
 681     font-family: "Omnes-ECOMP-W02", Arial;\r
 682     color: #444;\r
 683     font-size: 20px;\r
 684     \r
 685 }\r
 686 \r
 687 .newstape {\r
 688   background: white;\r
 689   color: black;\r
 690   height: 400px;\r
 691   overflow: hidden;\r
 692 }\r
 693 \r
 694 .newstape-content {\r
 695   position: relative;\r
 696   padding: 15px;\r
 697 }\r
 698 \r
 699 .newstape-drag { cursor: ns-resize; }\r
 700 \r
 701 .text-center { text-align: center; }\r
 702 \r
 703 .text-right { text-align: right; }\r
 704 \r
 705 .text-justify { text-align: justify; }\r
 706 \r
 707 // #newsContainer{\r
 708 //   overflow:auto;\r
 709 //   height: 100%;\r
 710 // }\r
 711 \r
 712 /*widget header*/\r
 713 .optionsMenu{\r
 714             position: absolute;\r
 715     list-style: none;\r
 716     top: 25px;\r
 717     right: 10px;\r
 718     border: 1px solid #067ab4;\r
 719     display: none;\r
 720     z-index: 2;\r
 721     border-radius: 6px 0px 6px 6px;\r
 722     background: #fff;\r
 723     width: 130px;\r
 724 }\r
 725 \r
 726 .optionsMenuLink {\r
 727     position: relative;\r
 728     padding-left: 8px;\r
 729     padding-right: 2px;\r
 730     font-size: 12px;\r
 731     line-height: 30px;\r
 732     color: #444444;\r
 733 }\r
 734 .optionsMenu > li:hover a {\r
 735     color: #ffffff !important;\r
 736 }\r
 737 .optionsMenu > li {\r
 738     width: 100%;\r
 739     text-align: left;\r
 740 }\r
 741 .optionsMenu > li:hover {\r
 742     background-color: #0faaf7;\r
 743     border-color: none !important;\r
 744     cursor: pointer;\r
 745 }\r
 746 \r
 747 .dashboardSortHeader{\r
 748     margin-left: 756px;\r
 749 }\r
 750 \r
 751 #dashboardAddWidgetPreference{\r
 752     display: inline-block; \r
 753     font-size: 14px; \r
 754     color: #3e3e3e; \r
 755     width: 69%; \r
 756     text-align: center; \r
 757     padding: 15px 0px 15px 0px;\r
 758     font-family: "Omnes-ECOMP-W02", Arial;\r
 759 }\r
 760 \r
 761 #dashboardAddWidgetPreference:hover{\r
 762     background-color: #0568ae;\r
 763     color:white !important; \r
 764 }\r
 765 \r
 766 #dashboardDefaultPreference{\r
 767     display: inline-block; \r
 768     font-size: 14px; \r
 769     color: #3e3e3e; \r
 770     width: 30%; \r
 771     text-align: center; \r
 772     padding: 15px 0px 15px 0px; \r
 773     font-family: "Omnes-ECOMP-W02", Arial;\r
 774 }\r
 775 \r
 776 #dashboardDefaultPreference:hover{\r
 777     background-color: #0568ae;\r
 778     color:white !important;    \r
 779 }\r
 780 \r
 781 .simulateGridHeader{\r
 782         position: relative;\r
 783     height: 50px !important;\r
 784     border: 1px solid #d3d3d3;\r
 785     border-bottom: 0;\r
 786     background-color: #E5E5E5;\r
 787     white-space: nowrap;\r
 788     text-overflow: ellipsis;\r
 789     z-index: 1;\r
 790 }\r
 791 \r
 792 .simulateGridHeaderTitle{\r
 793         line-height: 44px;\r
 794     margin-left: 26px;\r
 795     font-family: "Omnes-ECOMP-W02", Arial;\r
 796     font-size: 18px; \r
 797     color: #444444;\r
 798     float: left;\r
 799 }\r
 800 \r
 801 .simulateGridHeaderHandle{\r
 802         cursor: move;\r
 803     margin: 12px;\r
 804     position: absolute;\r
 805     top: 0;\r
 806     left: 0;\r
 807     border: 0;\r
 808     vertical-align: middle;\r
 809     -ms-interpolation-mode: bicubic;\r
 810     display: block;\r
 811 }\r
 812 \r
 813 /* apps gridsters */\r
 814 ul {\r
 815     list-style: none;\r
 816 }\r
 817 .gridster-box {\r
 818     height: 100%;\r
 819     border: 1px solid #ccc;\r
 820     background-color: #fff;\r
 821         transition: transform 0.5s ease-out;\r
 822 }\r
 823 .gridster-box-header {\r
 824     background-color: #fff;\r
 825     padding: 0 0px 0 10px;\r
 826     border-bottom: 1px solid #ccc;\r
 827     position: relative;\r
 828     height: 50px !important;\r
 829 }\r
 830 .gridster-box-header h3 {\r
 831     margin-top: 15px;\r
 832     display: inline-block;\r
 833     font-family: "Omnes-ECOMP-W02", Arial;\r
 834 }\r
 835 \r
 836 .gridster-box-header i {\r
 837 font-size: 22px; \r
 838 }\r
 839 \r
 840 .gridster-box-content {\r
 841     padding: 59px;\r
 842 }\r
 843 .gridster-box:hover{\r
 844     transform: scale(1.1);\r
 845 }\r
 846 .gridster-box-header-btns {\r
 847     top: 15px;\r
 848     right: 10px;\r
 849     position: absolute;\r
 850 }\r
 851 \r
 852 /*** widgets ***/\r
 853 ul {\r
 854     list-style: none;\r
 855 }\r
 856 .box {\r
 857     height: 100%;\r
 858     border: 1px solid #ccc;\r
 859     background-color: #fff;\r
 860     font-family: "Omnes-ECOMP-W02", Arial;\r
 861 }\r
 862 .box-header {\r
 863         height : 50px;\r
 864     background-color: #fff;\r
 865     padding: 0 30px 0 10px;\r
 866     border-bottom: 1px solid #ccc;\r
 867     position: relative;\r
 868 }\r
 869 .box-header h3 {\r
 870     margin-top: 15px;\r
 871     display: inline-block;\r
 872     font-size: 16px;\r
 873 }\r
 874 .box-content {\r
 875     position: absolute;\r
 876     width: 100%;\r
 877     top: 50px;\r
 878     left: 0;\r
 879     right: 0;\r
 880     bottom: 29px;\r
 881     border: 1px solid #d3d3d3;\r
 882     box-sizing: border-box;\r
 883     overflow-y: auto;\r
 884     overflow-x: hidden;\r
 885     color: #444444;\r
 886     bottom: 0px;\r
 887 }\r
 888 .box-header-btns {\r
 889     top: 10px;\r
 890     right: 10px;\r
 891     cursor: pointer;\r
 892     position: absolute;\r
 893 }\r
 894 \r
 895 #widget-boarder{\r
 896   background-color: #eee;\r
 897   border: 1px dashed white;\r
 898 }\r
 899 .icon-content-gridguide{\r
 900 cursor:move;\r
 901 }