catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less

   1
   2 .composition{
   3     .sdc-workspace-container{
   4         .w-sdc-main-container{
   5             .w-sdc-main-right-container{
   6                 left:0;
   7                 //overflow-y: scroll;
   8                 .sdc-workspace-top-bar {
   9                     padding-left: 295px;
  10                     .not-latest{
  11                         left: 270px;
  12                     }
  13                 }
  14                 .w-sdc-main-container-body-content{
  15                     padding: 0 0 0 247px;
  16                 }
  17
  18                 > div:first-child{
  19                     padding: 0;
  20                 }
  21             }
  22         }
  23     }
  24 }
  25
  26 .workspace-composition {
  27     height:100%;
  28     display: block;
  29     text-align: left;
  30     align-items: left;
  31     padding: 0;
  32
  33
  34
  35     // ---------------------------------------------------------------------------------------------------
  36     // Sidebar
  37     // ---------------------------------------------------------------------------------------------------
  38
  39
  40
  41     .w-sdc-designer-sidebar-toggle {
  42         background-color: @main_color_p;
  43         border-left: 1px solid @main_color_o;
  44         border-bottom: 1px solid @main_color_o;
  45         height: 21px;
  46         position: absolute;
  47         right: 0;
  48         top: 53px;
  49         width: 17px;
  50         transition: right 0.2s;
  51         z-index: 10;
  52         .box-shadow(-1px 1px 3px 0  @main_color_n);
  53
  54         &.active {
  55             right: 302px;
  56             .w-sdc-designer-sidebar-toggle-icon{
  57                 transform: rotate(180deg);
  58             }
  59         }
  60
  61     }
  62
  63     .w-sdc-designer-sidebar-toggle-icon {
  64         margin-left: 6px;
  65         margin-top: 6px;
  66     }
  67
  68     .w-sdc-designer-sidebar {
  69         background-color:@main_color_p ;
  70         .noselect;
  71         bottom: @footer_height;
  72         position: fixed;
  73         right: -302px;
  74         width: 302px;
  75         top: 102px;
  76         transition: right 0.2s;
  77         z-index: 9;
  78         .box-shadow(-7px -3px 6px -8px @main_color_n);
  79
  80     }
  81
  82     .w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
  83         right: 0;
  84
  85     }
  86
  87     .w-sdc-designer-sidebar-head {
  88         padding: 36px 30px 30px 30px;
  89         height: 120px;
  90     }
  91
  92     .w-sdc-designer-sidebar-logo-ph {
  93         display: inline-block;
  94         vertical-align: middle;
  95         line-height: 48px;
  96         height: 48px;
  97     }
  98
  99     .w-sdc-designer-sidebar-logo {
 100         .g_6;
 101         display: inline-block;
 102         margin-left: 10px;
 103         font-weight: 500;
 104     }
 105
 106     .w-sdc-designer-sidebar-logo-title {
 107         .s_16_r;
 108         .selectable;
 109         vertical-align: middle;
 110         text-overflow: ellipsis;
 111         max-width: 167px;
 112         display: inline-block;
 113         white-space: nowrap;
 114         overflow: hidden;
 115     }
 116
 117     .w-sdc-designer-update-resource-icon {
 118         .hand;
 119         position: absolute;
 120         right: 20px;
 121         top: 10px;
 122     }
 123
 124     .w-sdc-designer-delete-resource-icon {
 125         .hand;
 126         position: absolute;
 127         right: 40px;
 128         top: 10px;
 129     }
 130
 131     .w-sdc-designer-sidebar-tabs {
 132         .bg_e;
 133     }
 134
 135     .w-sdc-designer-sidebar-tabs::after {
 136         clear: both;
 137         content: '';
 138         display: table;
 139     }
 140
 141     .i-sdc-designer-sidebar-tab {
 142         background-color: @main_color_p;
 143         border: 1px solid @tlv_color_u;;
 144         border-left: none;
 145         display: inline-block;
 146         float: left;
 147         height: 36px;
 148         padding-top: 9px;
 149         text-align: center;
 150         width: 60px;
 151         .hand;
 152
 153         &:focus {
 154             outline: none;
 155         }
 156         &.tab-disabled {
 157             /* .disabled; */
 158         }
 159         &.active, &:hover:enabled {
 160             background-color: @tlv_color_u;
 161             .i-sdc-designer-sidebar-tab-icon {
 162                 opacity: 1;
 163
 164
 165             }
 166
 167         }
 168
 169         div& {
 170             padding-top: 0;
 171         }
 172         /*for tooltip on disabled buttons*/
 173     }
 174
 175     .i-sdc-designer-sidebar-tab-icon {
 176         margin-top: 5px ;
 177         //  opacity: .4;
 178     }
 179
 180     .w-sdc-designer-sidebar-tab-content {
 181         .perfect-scrollbar;
 182         height: 100%;
 183     }
 184
 185     .w-sdc-designer-sidebar-tab-content-view {
 186         position: absolute;
 187         top: 156px;
 188         bottom: 0;
 189         width: 100%;
 190         padding-bottom: 10px;
 191
 192     }
 193
 194     .w-sdc-designer-sidebar-section {
 195     }
 196
 197     .w-sdc-designer-sidebar-section-title {
 198         .m_14_m;
 199         background-color: @tlv_color_u;
 200         .hand;
 201         clear: both;
 202         height: 32px;
 203         line-height: 32px;
 204         margin-top: 1px;
 205         padding: 0 40px 0 20px;
 206         overflow: hidden;
 207         text-overflow: ellipsis;
 208         white-space: nowrap;
 209         position: relative;
 210         width: 100%;
 211         display: block;
 212
 213         &.expanded {
 214             .w-sdc-designer-sidebar-section-title-icon {
 215                 transform: rotate(180deg);
 216             }
 217         }
 218     }
 219
 220     .w-sdc-designer-sidebar-section-title-text {
 221         max-width: 240px;
 222         display: inline-block;
 223         overflow: hidden;
 224         text-overflow: ellipsis;
 225         white-space: nowrap;
 226         position: relative;
 227     }
 228
 229     .w-sdc-designer-sidebar-section-title-icon {
 230         .hand;
 231         .sprite-new;
 232         .arrow-up;
 233         right: 16px;
 234         top: 10px;
 235         transition: .3s all;
 236         position: absolute;
 237     }
 238
 239     .w-sdc-designer-sidebar-section-content {
 240         overflow: hidden;
 241         text-overflow: ellipsis;
 242         white-space: nowrap;
 243     }
 244
 245     .w-sdc-designer-sidebar-section-title {
 246         text-transform: uppercase;
 247     }
 248
 249     .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
 250         margin: 0 auto;
 251     }
 252
 253     .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
 254         margin: 0 auto 1px;
 255
 256     }
 257
 258     .i-sdc-designer-sidebar-section-content-item {
 259         .b_7;
 260         font-size: 13px;
 261         margin-bottom: 5px;
 262         overflow: hidden;
 263         text-overflow: ellipsis;
 264         white-space: nowrap;
 265         //max-width: 250px;
 266
 267         &.description {
 268             margin-top: 28px;
 269             white-space: normal;
 270             word-wrap: break-word;
 271         }
 272     }
 273
 274     .i-sdc-designer-sidebar-section-content-item-tag {
 275         .g_7;
 276         .bg_c;
 277         border-radius: 4px;
 278         display: inline-block;
 279         line-height: 25px;
 280         margin: 0 4px 6px 0;
 281         min-width: 50px;
 282         padding: 0 9px;
 283         text-align: center;
 284         max-width: 280px;
 285         white-space: nowrap;
 286         overflow: hidden;
 287         text-overflow: ellipsis;
 288     }
 289
 290     .w-sdc-designer-sidebar-section-footer {
 291         margin-top: 10px;
 292         text-align: center;
 293         width: 100%;
 294     }
 295
 296
 297
 298     .w-sdc-designer-sidebar-section-footer-action {
 299         width: 180px;
 300         margin-top: 10px;
 301     }
 302
 303     //////////////////////Relationship
 304     .w-sdc-designer-sidebar-section-requirements {
 305         border-bottom: 1px solid @color_e;
 306         margin: 0 13px 20px 13px;
 307         padding: 15px 0 0;
 308     }
 309
 310     .w-sdc-designer-sidebar-section-requirements-item {
 311         margin-bottom: 20px;
 312     }
 313
 314     .w-sdc-designer-sidebar-section-requirements-label {
 315         display: inline-block;
 316         overflow: hidden;
 317         text-overflow: ellipsis;
 318         vertical-align: middle;
 319         white-space: nowrap;
 320         width: 102px;
 321     }
 322
 323     .w-sdc-designer-sidebar-section-requirements-select {
 324         border: 1px solid @color_e;
 325         min-height: 30px;
 326         padding: 4px 13px;
 327         width: 168px;
 328     }
 329
 330     //////////////////////Properties
 331     .i-sdc-designer-sidebar-section-content-item-property-and-attribute {
 332         .b_7;
 333         border-bottom: 1px solid @color_e;
 334         min-height: 72px;
 335         padding: 15px 10px 10px 18px;
 336         position: relative;
 337
 338         &:first-child {
 339             //margin-top: -18px;
 340         }
 341
 342         &:hover {
 343             // .bg_c_hover;
 344             .bg_c;
 345             transition: all .3s;
 346
 347             .i-sdc-designer-sidebar-section-content-item-button {
 348                 display: block;
 349             }
 350         }
 351     }
 352
 353     .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
 354         overflow: hidden;
 355         text-overflow: ellipsis;
 356         max-width: 200px;
 357         white-space: nowrap;
 358         display: inline-block;
 359         &:hover {
 360             .a_7;
 361         }
 362     }
 363
 364     .i-sdc-designer-sidebar-section-content-item-property-value {
 365         overflow: hidden;
 366         text-overflow: ellipsis;
 367         max-width: 200px;
 368         display: inline-block;
 369         white-space: nowrap;
 370
 371     }
 372
 373     .i-sdc-designer-sidebar-section-content-item-property-label-value {
 374     }
 375
 376     .i-sdc-designer-sidebar-section-content-item-button {
 377         display: none;
 378         position: absolute;
 379         top: 25px;
 380
 381         &.update {
 382             background-color: transparent;
 383             border: 0;
 384             right: 60px;
 385         }
 386
 387         &.delete {
 388             background-color: transparent;
 389             border: 0;
 390             right: 13px;
 391         }
 392
 393         &.download {
 394             background-color: transparent;
 395             border: 0;
 396             right: 35px;
 397         }
 398
 399         &.download-env {
 400             background-color: transparent;
 401             border: 0;
 402             right: 35px;
 403             margin-top: 65px;
 404         }
 405
 406         &.update-env {
 407             background-color: transparent;
 408             border: 0;
 409             right: 15px;
 410             margin-top: 65px;
 411         }
 412
 413         &.attach {
 414             background-color: transparent;
 415             border: 0;
 416             right: 15px;
 417         }
 418     }
 419
 420     // ---------------------------------------------------------------------------------------------------
 421     // Canvas
 422     // ---------------------------------------------------------------------------------------------------
 423     .w-sdc-designer-canvas {
 424         height:100%;
 425         .noselect;
 426         .bg_c;
 427         bottom: 0;
 428         // position: fixed;
 429         //right: 0;
 430         //left: 240px;
 431         //top: 94px;
 432         .view-mode{
 433             background-color: #f8f8f8;
 434             border:0;
 435         }
 436     }
 437
 438     .w-sdc-designer-canvas.sidebaractive {
 439         //right: 300px;
 440     }
 441
 442     .w-sdc-designer-element {
 443         .hand;
 444         width: 200px;
 445         height: 100px;
 446         position: absolute;
 447         text-align: center;
 448         top: 50%;
 449         margin-top: -200px;
 450         left: 50%;
 451         margin-left: -50px;
 452     }
 453
 454     .w-sdc-designer-resource-label {
 455         .q_7;
 456     }
 457
 458     .w-sdc-designer-resource-label-indicator {
 459         .bg_q;
 460         border-radius: 50%;
 461         display: inline-block;
 462         height: 10px;
 463         margin-right: 6px;
 464         vertical-align: middle;
 465         width: 10px;
 466
 467         &.valid {
 468             .bg_l;
 469         }
 470
 471         &.invalid {
 472             .bg_h;
 473         }
 474     }
 475
 476     // ---------------------------------------------------------------------------------------------------
 477     // Leftbar
 478     // ---------------------------------------------------------------------------------------------------
 479     .w-sdc-designer-leftbar {
 480         background-color:  @main_color_p;
 481         bottom: 0;
 482         left: 0;
 483         overflow-y: scroll;
 484         overflow-x: hidden;
 485         position: absolute;
 486         top: 0;
 487         width: 244px;
 488         .box-shadow(7px -3px 6px -8px @main_color_n);
 489
 490     }
 491
 492     .w-sdc-designer-leftbar-title {
 493
 494         .p_16_m;
 495         background-color:  @main_color_n;
 496         line-height: 40px;
 497         padding: 0 17px;
 498     }
 499
 500     .w-sdc-designer-leftbar-title-count {
 501         float: right;
 502     }
 503
 504     .w-scd-diagram-container {
 505         // left: 240px;
 506         //right: 300px;
 507     }
 508
 509     .w-sdc-designer-leftbar-search {
 510         background-color:  @tlv_color_u;
 511         padding: 10px;
 512         white-space: nowrap;
 513         position: relative;
 514     }
 515
 516     .w-sdc-designer-leftbar-search-input {
 517         border: 1px solid @color_e;
 518         .border-radius(4px);
 519         height: 30px;
 520         margin: 0;
 521         padding: 0px 28px 3px 10px;
 522         vertical-align: 4px;
 523         width: 100%;
 524         outline: none;
 525         font-style: italic;
 526     }
 527
 528     .w-sdc-designer-leftbar-search-filter {
 529
 530     }
 531
 532     .i-sdc-designer-leftbar-section {
 533         .hand;
 534     }
 535
 536     .i-sdc-designer-leftbar-section-title {
 537         .m_14_m;
 538         background-color:  @tlv_color_u;
 539         .hand;
 540         clear: both;
 541         height: 40px;
 542         line-height: 40px;
 543         margin-top: 1px;
 544         padding: 0 10px;
 545         position: relative;
 546         text-transform: uppercase;
 547         font-weight: bold;
 548     }
 549
 550     .i-sdc-designer-leftbar-section-title-icon {
 551         .hand;
 552         .sprite-new;
 553         .arrow-up;
 554         width: 15px;
 555         height: 9px;
 556         position: absolute;
 557         right: 13px;
 558         top: 18px;
 559         transition: .3s all;
 560     }
 561
 562     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-title-icon {
 563         transform: rotate(180deg);
 564         margin-right: 2px;
 565     }
 566
 567     .i-sdc-designer-leftbar-section-content {
 568         background-color:  @main_color_o;
 569     }
 570
 571     .i-sdc-designer-leftbar-section-content-item {
 572         background-color:  @main_color_p;
 573         overflow: hidden;
 574
 575         &:hover {
 576             background-color:  @main_color_p;
 577         }
 578
 579         .cp{
 580             margin: 6px;
 581         }
 582
 583         .vl{
 584             margin: 6px;
 585         }
 586     }
 587
 588     .i-sdc-designer-leftbar-section-content-subcat {
 589         .m_14_m;
 590         background-color:  @tlv_color_t;
 591         line-height: 35px;
 592         padding: 0 10px;
 593         cursor: default;
 594
 595
 596         &:hover {
 597             background-color:  @func_color_r;
 598         }
 599
 600
 601     }
 602
 603     .i-sdc-designer-leftbar-section .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
 604         max-height: 0px;
 605         margin: 0 auto;
 606         transition: all .3s;
 607     }
 608
 609     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
 610         max-height: 64px;
 611         margin: 0 auto 1px auto;
 612         //  padding: 4px 13px;
 613     }
 614
 615     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-subcat {
 616         margin: 0;
 617     }
 618
 619     .i-sdc-designer-leftbar-section-content-item-icon-ph {
 620         display: inline-block;
 621         margin: 12px 0 12px 10px;
 622         pointer-events: auto;
 623
 624         .non-certified {
 625             position: relative;
 626             left: 27px;
 627             bottom: 6px;
 628             .sprite;
 629             .s-sdc-state-non-certified;
 630             display: block;
 631
 632             &.smaller-icon {
 633                 bottom: 6px;
 634                 left: 13px;
 635             }
 636         }
 637
 638
 639
 640     }
 641
 642     .non-certified {
 643         position: relative;
 644         left: 43px;
 645         bottom: 3px;
 646         .sprite;
 647         .s-sdc-state-non-certified;
 648         display: block;
 649
 650         &.smaller-icon {
 651             left: 35px;
 652             bottom: -14px;
 653         }
 654     }
 655     /*
 656     .i-sdc-composition-leftbar-section-content-item-icon {
 657         background-image: url('../../../styles/images/resource-icons/default.png');
 658         // position: absolute;
 659         right: 20px;
 660         top: 10px;
 661         height: 40px;
 662         width: 40px;
 663         background-size: 40px;
 664     }
 665     */
 666
 667     .i-sdc-designer-leftbar-section-content-item-info {
 668         display: inline-block;
 669         // margin-left: 10px;
 670         //overflow: hidden;
 671         // vertical-align: middle;
 672         width: 160px;
 673         padding: 0 0 0 10px;
 674     }
 675
 676     .i-sdc-designer-leftbar-section-content-item-info-title {
 677         .m_13_m;
 678         line-height: 14px;
 679         overflow: hidden;
 680         text-overflow: ellipsis;
 681         max-width: 120px;
 682         display: inline-block;
 683         white-space: nowrap;
 684         vertical-align: bottom;
 685     }
 686
 687     .i-sdc-designer-leftbar-section-content-item-info-text {
 688         .m_13_r;
 689         line-height: 15px;
 690         overflow: hidden;
 691         text-overflow: ellipsis;
 692         white-space: nowrap;
 693     }
 694
 695     .i-sdc-designer-leftbar-section-content-item-info-text-link {
 696         color: @color_s;
 697         text-decoration: underline;
 698         float: right;
 699         position: absolute;
 700         right: 17px;
 701         // bottom: 5px;
 702     }
 703
 704     // ---------------------------------------------------------------------------------------------------
 705     // Form actions
 706     // ---------------------------------------------------------------------------------------------------
 707     .w-sdc-form-actions-container.add-property {
 708         text-align: center;
 709         width: 100%;
 710         margin-top: 2px;
 711         margin-bottom: 12px;
 712
 713         .w-sdc-form-action {
 714             width: 245px;
 715         }
 716         .w-sdc-form-action.add-property-add-another {
 717             .bg_a;
 718             margin-left: 35px;
 719         }
 720         .w-sdc-form-action.add-property-done {
 721             margin-left: 312px;
 722         }
 723         .w-sdc-form-action.save {
 724             margin-left: 327px;
 725             margin-bottom: 30px;
 726         }
 727
 728     }
 729
 730     // ---------------------------------------------------------------------------------------------------
 731     // Top menu
 732     // ---------------------------------------------------------------------------------------------------
 733     .w-sdc-header-menu {
 734         padding: 25px 0;
 735         text-align: center;
 736         white-space: nowrap;
 737     }
 738
 739     .i-sdc-header-menu-item {
 740         cursor: pointer;
 741         display: inline-block;
 742         height: 43px;
 743         min-width: 93px;
 744         padding: 0 38px;
 745         position: relative;
 746         vertical-align: middle;
 747
 748         &::after {
 749             border-right: 1px solid @color_m;
 750             content: '';
 751             display: block;
 752             height: 43px;
 753             right: 0;
 754             position: absolute;
 755             top: 0;
 756             width: 2px;
 757         }
 758
 759         &:first-child {
 760             &::before {
 761                 border-right: 1px solid @color_m;
 762                 content: '';
 763                 display: block;
 764                 height: 43px;
 765                 left: 0;
 766                 position: absolute;
 767                 top: 0;
 768                 width: 2px;
 769             }
 770         }
 771     }
 772
 773     .i-sdc-header-menu-item-icon {
 774         display: inline-block;
 775         height: 20px;
 776         width: 28px;
 777     }
 778
 779     .i-sdc-header-menu-item-label {
 780         .g_1;
 781         line-height: 18px;
 782     }
 783
 784     //Canvas search menu
 785     .w-sdc-search-menu {
 786         position:absolute;
 787         right: 18px;
 788         top:53px;
 789         transition: right 0.2s;
 790         display: flex;
 791         flex-direction: column;
 792         align-items: flex-end;
 793         margin-right:10px;
 794
 795         &.with-sidebar {
 796             right:320px;
 797         }
 798
 799         .search-with-autocomplete-container.composition-search {
 800             margin-top: 12px;
 801
 802             .search-bar-input {
 803                 width: 250px;
 804                 padding:2px 50px 2px 10px;
 805                 transition:all 0.4s;
 806             }
 807             .clear-search-x {
 808                 top: 17px
 809             }
 810
 811             &:not(:hover):not(.autocomplete-visible):not(.active){
 812                 border-radius: 0;
 813                 box-shadow:none;
 814
 815                 .search-bar-input:not(:focus){
 816                     width: 0px;
 817                     padding:0;
 818                     border:none;
 819                 }
 820                 .clear-search-x {
 821                     display:none;
 822                 }
 823                 .search-bar-input:not(:focus) ~ .search-bar-button {
 824                     border-radius: 2px;
 825                     border:solid 1px #fff;
 826                 }
 827             }
 828         }
 829
 830         .zoom-icons {
 831             border:solid 1px #fff;
 832             border-radius: 2px;
 833             box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
 834             background-color:  rgba(234, 234, 234, 0.88);
 835             background-repeat: no-repeat;
 836             margin-top: 10px;
 837
 838             &:hover {
 839                 cursor:pointer;
 840             }
 841
 842             &:active {
 843                 border:none;
 844                 background-color:  rgba(31, 171, 223, 0.88);
 845             }
 846         }
 847     }
 848
 849     // ---------------------------------------------------------------------------------------------------
 850     // Canvas inline menu
 851     // ---------------------------------------------------------------------------------------------------
 852     .w-sdc-canvas-menu {
 853         position: fixed;
 854         z-index: 100;
 855
 856         border-style: solid;
 857         border-width: 1px;
 858         border-color: #d8d8d8;
 859         box-sizing: border-box;
 860         background-color: #ffffff;
 861         box-shadow: 0px 2px 2px 0px rgba(24, 24, 25, 0.1);
 862         width: 91px;
 863
 864         /*        &.vl-type-select{
 865                     width: 173px;
 866                 }
 867         */
 868
 869         h3 {
 870             color: @func_color_s;
 871             font-size: 14px;
 872             font-weight: bold;
 873             margin: 0;
 874             padding: 7px 11px;
 875             border-bottom: 1px solid #e5e5e5;
 876         }
 877
 878         .w-sdc-canvas-menu-content {
 879             padding: 5px 5px;
 880
 881             &.vl-select{
 882                 border-bottom: #d8d8d8 solid 1px;
 883                 line-height: 15px;
 884
 885                 .tlv-radio {
 886                     padding: 3px 0px;
 887
 888                     .tlv-radio-label {
 889                         padding: 3px 0px;
 890
 891                         &::before {
 892                             margin-right: 10px;
 893                         }
 894                     }
 895                 }
 896             }
 897
 898             .w-sdc-canvas-menu-content-update-button {
 899                 .sprite;
 900                 .sprite.e-sdc-small-icon-delete;
 901                 .hand;
 902                 position: absolute;
 903                 top: 15px;
 904                 right: 10px;
 905             }
 906             .w-sdc-canvas-menu-content-delete-button {
 907                 .sprite;
 908                 .sprite.e-sdc-small-icon-delete;
 909                 .hand;
 910                 margin: 0 8px 0 6px;
 911             }
 912         }
 913
 914         .w-sdc-canvas-menu-arrow {
 915             //TODO: Missing image for small blue triangle.
 916             background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE1OTIzNDI1MENFQjExRTU4ODRERTI1MDM2REZCOUYzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE1OTIzNDI2MENFQjExRTU4ODRERTI1MDM2REZCOUYzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTU5MjM0MjMwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTU5MjM0MjQwQ0VCMTFFNTg4NERFMjUwMzZERkI5RjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4gBXTlAAAAOElEQVR42mK0rp7NgASMgZgFiE/CBJjQJPcA8U4gNkdXAJMUAGJ+ZEVMaJIwAFfEhEUSRRFAgAEAVtgJyiLAPWAAAAAASUVORK5CYII=');
 917             content: '';
 918             display: block;
 919             height: 21px;
 920             position: absolute;
 921             right: 12px;
 922             top: -24px;
 923             width: 184px;
 924             background-repeat: no-repeat;
 925             background-position: 175px 16px;
 926         }
 927
 928     }
 929 }
 930 /*.right-tab-loader {
 931     border: 16px solid #f3f3f3; !* Light grey *!
 932     border-top: 16px solid #3498db; !* Blue *!
 933     border-radius: 50%;
 934     width: 120px;
 935     height: 120px;
 936     animation: spin 2s linear infinite;
 937 }*/
 938
 939 @keyframes spin {
 940     0% { transform: rotate(0deg); }
 941     100% { transform: rotate(360deg); }
 942 }