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

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