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

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