cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css

   1
   2 body{
   3   /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
   4   background-size: 6px 6px !important;   */
   5   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important;
   6   background-color: #fff !important;
   7 }
   8
   9 /*Icons*/
  10 .icon-info{
  11   margin-left: 3px;
  12 }
  13 .icon-info::before{
  14   color: #fff;
  15 }
  16
  17 /*Bootstrap*/
  18 .controllerSidebar .nav-tabs{
  19   border-bottom-width: 2px;
  20 }
  21 .controllerSidebar .nav-tabs .nav-link{
  22   padding: 12px 0 !important;
  23   text-align: center;
  24 }
  25 .controllerSidebar .nav-tabs .nav-link::before{
  26   content: "";
  27 }
  28
  29 .editNavbar .nav-tabs{
  30   border-bottom-width: 0;
  31 }
  32 .editNavbar .nav-tabs .nav-link{
  33   padding: 12px 28px !important;
  34   text-align: center;
  35 }
  36 .editNavbar .nav-tabs .nav-link::before{
  37   content: "";
  38 }
  39 .editNavbar .nav-link{
  40   text-transform: initial !important;
  41 }
  42 .editNavbar .navbar,
  43 .editNavbar .navbar{
  44   padding: 0;
  45 }
  46
  47 /*Header*/
  48 header{
  49   position: relative;
  50   height: 60px;
  51   background-color: #1B3E6F;
  52   /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */
  53   z-index: 200000000 !important;
  54 }
  55 .logo{
  56   float: left;
  57   width: 50px;
  58   height: 60px;
  59   background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
  60 }
  61
  62 /**Bread Crumb**/
  63 .breadcrumb{
  64   padding: 9px 20px;
  65   background: transparent;
  66   line-height: 40px;
  67 }
  68 .breadcrumb a,
  69 .breadcrumb a:hover{
  70   color: #fff;
  71 }
  72 .breadcrumb .breadcrumb-item{
  73   font-size: 12px;
  74   font-weight: bold;
  75 }
  76 .breadcrumb .breadcrumb-item:first-child{
  77   font-size: 16px;
  78 }
  79 .breadcrumb-item + .breadcrumb-item::before{
  80   color: #fff;
  81 }
  82 .breadcrumb .breadcrumb-item.active p{
  83   display: inline;
  84   padding: 4px 10px;
  85   background: #F4F9FE;
  86   border-radius: 10px;
  87   color: #1B3E6F;
  88   font-size: 10px;
  89 }
  90 .designer-breadcrumb .fa-angle-right::before {
  91   color: #fff;
  92   line-height: 38px;
  93 }
  94 .sidebar-container{
  95   height: calc(100vh - 60px) !important;
  96 }
  97 /**Topology Actions**/
  98 .topology-actions{
  99   margin: 0;
 100   height: 60px;
 101 }
 102 .topology-actions > li{
 103   height: 59px;
 104   display: inline-block;
 105   padding: 0 20px;
 106 }
 107 .topology-actions > li:first-child{
 108   border-right: solid 1px #16396A;
 109 }
 110 .topology-actions .btn-group{
 111   margin-top: 11px;
 112 }
 113 .btn-group > .btn:not(:first-child){
 114   margin-left: 0;
 115 }
 116 .btn-topology-action,
 117 .btn-topology-action:hover{
 118   margin: 0 6px;
 119   padding: 4px 8px;
 120   color: #fff;
 121   border-radius: 50%;
 122   border: solid .5px #fff;
 123 }
 124 .btn-topology-action:last-child{
 125   margin-right: 0;
 126 }
 127 .btn-topology-action .fa{
 128   width: 16px;
 129   height: 16px;
 130   text-align: center;
 131 }
 132 .topology-actions .dropdown-text,
 133 .dropdown-toggle:hover ~ .dropdown-text,
 134 .dropdown-toggle:focus ~ .dropdown-text{
 135   top: 7px;
 136   text-indent: 15px;
 137   background: #1273EB !important;
 138   border-radius: 15px !important;
 139   border: 0;
 140   box-shadow: none;
 141   color: #fff !important;
 142   font-weight: bold;
 143   font-size: 13px;
 144 }
 145 .topology-actions .dropdown-text::after{
 146   right: 15px;
 147   top: 13px;
 148   border-style: solid !important;
 149   border-width: 5px 5px 0 5px !important;
 150   border-color: #fff transparent transparent transparent;
 151 }
 152 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
 153   top: 13px;
 154   border-style: solid !important;
 155   border-width: 0 5px 5px 5px !important;
 156   border-color: transparent transparent #fff transparent;
 157 }
 158 .topology-actions .dropdown-content:hover,
 159 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
 160   padding: 12px 0;
 161   text-indent: 0;
 162   background: #fff;
 163   border: 0;
 164   border-radius: 2px;
 165   box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
 166 }
 167 .topology-actions .dropdown-content a{
 168   padding: 0 20px;
 169   color: #1B3E6F;
 170   font-size: 13px;
 171 }
 172 .topology-actions .dropdown-content a:hover{
 173   background: #F4F9FE;
 174   text-decoration: none;
 175 }
 176 .package-info-btn{
 177   padding: 0 !important;
 178 }
 179 .package-info h3{
 180   font-size: 15px;
 181   font-weight: bold;
 182 }
 183 .package-info h3 span{
 184   font-size: 11px;
 185 }
 186 .package-info .badge{
 187   margin-right: 6px;
 188   padding: 4px 10px;
 189   background: #E0E8F2;
 190   border-radius: 12px;
 191   color: #1B3E6F;
 192   font-size: 11px;
 193   font-weight: normal;
 194 }
 195 .creator-pic{
 196   border-radius: 50%;
 197   width: 30px;
 198   height: 30px;
 199 }
 200 .package-info p{
 201   margin-bottom: 0;
 202   font-size: 11px;
 203   line-height: 20px;
 204 }
 205
 206
 207
 208
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220 /*Rotated Text*/
 221 button.rotate{
 222   position: absolute;
 223   margin-top: 1px;
 224   padding: 0;
 225   background: transparent;
 226   border: 0;
 227 }
 228 .rotate{
 229   vertical-align: bottom;
 230   /* text-align: center; */
 231 }
 232 .rotate span{
 233   display: inline-table !important;
 234   -ms-writing-mode: tb-rl;
 235   -webkit-writing-mode: vertical-rl;
 236   writing-mode: vertical-rl !important;
 237   transform: rotate(180deg);
 238   white-space: nowrap;
 239   background: #1B3E6F;
 240   padding: 15px 12px;
 241   font-weight: bold;
 242   font-size: 12px;
 243   color:#fff;
 244   /* border-bottom-left-radius: 2px; */
 245   border-top-left-radius: 2px;
 246 }
 247 .rotate i{
 248   margin-right: 3px;
 249   margin-top: 9px;
 250   font-size: 15px;
 251 }
 252 .rotate span:first-child{
 253   margin-bottom: 0;
 254 }
 255 .rotate a:hover{
 256   text-decoration: none;
 257 }
 258 #board-paper svg{
 259   top: 70px;
 260   left: 0;
 261 }
 262 .componentsList tspan{
 263   /* width:30px !important;  */
 264   font: normal 13px sans-serif;
 265   fill: #1B3E6F !important;
 266   overflow-wrap: break-word;
 267 }
 268 #board-paper #name tspan{
 269   /* fill: green; */
 270   text-align: center;
 271
 272 }
 273 tspan#type{
 274   text-align: center;
 275 }
 276 /*ACTIONS & COMPONENTS MENU*/
 277 .input-search-controller{
 278   height: 40px;
 279   padding-left: 42px;
 280   background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
 281   border-radius: 0;
 282   border: 0;
 283   border-bottom: solid 1px #D7E7F9;
 284   color: #1B3E6F;
 285   font-size: 13px;
 286 }
 287 .input-search-controller::placeholder{
 288   color: #D0D7E4;
 289   font-size: 11px;
 290 }
 291 .input-search-controller:focus{
 292   background-color: #fff !important;
 293   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 294   text-shadow: none;
 295   border-color: #DEE8F3;
 296 }
 297 .componentsList p{
 298   margin-bottom: 0;
 299   padding-left: 30px;
 300   background-position: left center;
 301   background-repeat: no-repeat;
 302 }
 303 p.compType-1{
 304   background-image: url(/assets/img/icon-comType1-sm.svg);
 305 }
 306 p.compType-2{
 307   background-image: url(/assets/img/icon-comType2-sm.svg);
 308 }
 309 p.compType-3{
 310   background-image: url(/assets/img/icon-comType3-sm.svg);
 311 }
 312 p.compType-4{
 313   background-image: url(/assets/img/icon-comType4-sm.svg);
 314 }
 315 /*Actions Wrapper*/
 316 .actions-wrapper{
 317   position: absolute;
 318   width: 100%;
 319   top: 0;
 320 }
 321 .actions-container{
 322   width: 92%;
 323   margin: 0 auto;
 324   background: red;
 325 }
 326
 327 .controllerSidebar{
 328   width: 320px;
 329   padding: 0;
 330   overflow: hidden !important;
 331   background: #F4F9FE;
 332   border: solid 1px #C1CDDD;
 333   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
 334 }
 335 .helpBox{
 336   position : absolute;
 337   bottom : 0;
 338   width: 100%;
 339   height : 40px;
 340   margin-top : 24px;
 341   padding-left: 20px;
 342   background: #fff;
 343   border-top: solid 1px #C1CDDD;
 344   font-size: 13px;
 345   line-height: 40px;
 346   color: #0070F4;
 347 }
 348 .helpBox .icon-info{
 349   margin-left: 0;
 350   margin-right: 10px;
 351 }
 352 .helpBox .icon-info::before{
 353   color: #0070F4 !important;
 354 }
 355 .controllerSidebar .row,
 356 .controllerSidebar .col{
 357   margin: 0;
 358   padding: 0;
 359 }
 360 .controllerSidebar h1{
 361   margin-bottom: 15px;
 362   padding: 12px 0 12px 12px;
 363   background: #fff;
 364   font-size: 12px;
 365   font-weight: bold;
 366   text-transform: uppercase;
 367   color: #C3CDDB;
 368 }
 369 .controllerSidebar b{
 370   margin-left: 12px;
 371   margin-bottom: 9px;
 372   font-size: 12px;
 373   color: #C3CDDB;
 374 }
 375
 376 .actionBtns .btn{
 377   margin: 0px 15px 16px -90px;
 378   /* padding: 9px 20px; */
 379   border-radius: 0px;
 380   font-size: 14px;
 381   font-weight: bold;
 382   /* outline: 0 !important; */
 383   float: left;
 384
 385 }
 386 .new-action,
 387 .new-action:hover{
 388   margin: 9px 0 4px 18px;
 389   padding: 6px;
 390   font-size: 13px;
 391   font-weight: bold;
 392   color: #1B3E6F;
 393 }
 394 .new-action:hover{
 395   background: #D7E7F9;
 396 }
 397 .componentsList{
 398   margin-top: 16px;
 399   padding: 0 20px 10px;
 400 }
 401 .componentsList{
 402   padding-bottom: 0;
 403   /* height: calc( 100vh - 218px)!important;
 404   overflow: scroll;*/
 405   background: #F4F9FE !important;
 406 }
 407 .custom-control.custom-checkbox:hover,
 408 .custom-control-label:hover{
 409   cursor: pointer;
 410 }
 411 .custom-control{
 412   height: 40px;
 413   font-size: 14px;
 414   line-height: 40px;
 415 }
 416 .custom-control:hover{
 417     background-color: white;
 418 }
 419 .actionsList,
 420 .componentsList{
 421   height: 65vh !important;
 422   overflow-y: auto;
 423 }
 424 .componentsList .list-group-item{
 425   margin-bottom: 10px;
 426   padding-left: 40px;
 427   background: #fff;
 428   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 429   border-radius: 2px;
 430 }
 431 .actionsList .custom-control-label{
 432   width: 100%;
 433   padding: 6px;
 434   vertical-align: unset;
 435   color: #1B3E6F;
 436   font-size: 13px;
 437   line-height: 20px;
 438   border-top-right-radius: 2px;
 439   border-bottom-right-radius: 2px;
 440 }
 441 .actionsList .custom-control-label::before,
 442 .actionsList .custom-control-label::after{
 443   top: 1.25rem;
 444 }
 445 .actionsList .custom-control-label p{
 446   color: #C7D0DD;
 447   font-size: 12px;
 448 }
 449 .custom-control-input:checked ~ .custom-control-label{
 450   background-color: #1B3E6F !important;
 451   color: #fff;
 452 }
 453 .inserActionBtns .btn{
 454   border-radius: 15px !important;
 455   padding: 6px 20px;
 456   font-size: 12px;
 457   font-weight: bold;
 458   border: 0;
 459
 460 }
 461 .inserActionBtns .btn:first-child{
 462   background: #1273EB;
 463   border: solid 1px #1273EB;
 464   color: #fff;
 465 }
 466 .inserActionBtns .btn:last-child{
 467   background: #fff;
 468   border: solid 1px #D9E6F2;
 469   color: #C3CDDB;
 470   margin-top: 14px;
 471 }
 472 .controllerSidebar .custom-control label{
 473   margin-bottom: 0;
 474 }
 475 .controllerSidebar .custom-control i{
 476   margin-right: 9px;
 477 }
 478 /*Components List*/
 479 .componentsList .list-group-item{
 480   padding-left: 36px;
 481   border: 0;
 482   font-size: 14px;
 483   background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
 484 }
 485
 486 /*CANVAS*/
 487 .source-button.editBar{
 488   position: absolute;
 489   z-index: 9999999;
 490   top: 60px;
 491   /* left: 50%; */
 492 }
 493 .editBar,
 494 .editBar2{
 495   width: calc(100% - 320px);
 496   margin: 0 auto 0 320px;
 497   height: 45px;
 498   padding: 0;
 499   padding-right: 20px;
 500   background:#F4F9FE;
 501   border-bottom: solid 1px #E8EFF8;
 502   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 503 }
 504
 505 .editBar .btn-group,
 506 .editBar2 .btn-group{
 507   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 508 }
 509 .editBar .toggoleBtn,
 510 .editBar2 .toggoleBtn{
 511   height: 43px;
 512   margin-right: 12px;
 513   background-color: #fff;
 514   background-repeat: no-repeat;
 515   background-position: left center;
 516   border: 0;
 517   color: #1B3E6F;
 518   font-size: 10px;
 519   border-top-left-radius: 0;
 520   border-top-right-radius: 4px;
 521   border-bottom-left-radius: 0;
 522   border-bottom-right-radius: 4px;
 523 }
 524 .editBar .toggoleBtn i,
 525 .editBar2 .toggoleBtn i{
 526   font-size: 20px;
 527 }
 528 .editBar .toggoleBtn.active,
 529 .editBar2 .toggoleBtn.active{
 530   background-color: #1B3E6F !important;
 531   color: #fff;
 532 }
 533 .viewBtns .topologySource{
 534   background-image: url(src/assets/img/icon-topologyView-active.svg);
 535 }
 536 .viewBtns .topologyView{
 537   background-image: url(src/assets/img/icon-topologySource.svg);
 538 }
 539 .card.actionContainer{
 540   margin: 20px 20px 40px 60px;
 541   background: transparent;
 542   border: 0;
 543 }
 544 .actionContainer .card-header{
 545   padding: 0;
 546   background: transparent;
 547   border: 0;
 548 }
 549 .actionContainer .card-header span{
 550   padding: 12px 20px;
 551   border-top-left-radius: 2px;
 552   border-top-right-radius: 2px;
 553   font-size: 12px;
 554   line-height: 38px;
 555   font-weight: bold;
 556   color: #1B3E6F;
 557   background: #C3CDDB;
 558 }
 559 .actionContainer .card-body{
 560   min-height: 170px;
 561   padding: 15px 20px !important;
 562   border: solid 1px #C3CDDB;
 563   background: #fff;
 564   box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
 565 }
 566 .actionContainer a{
 567   display: inline-block;
 568   width: 230px;
 569   height: 130px;
 570   margin: 20px;
 571   padding: 24px;
 572   background: #1B3E6F;
 573   color: #fff !important;
 574   text-align: center;
 575   border-radius: 2px;
 576   border: solid 1px #1B3E6F;
 577 }
 578 .actionContainer a:hover{
 579   cursor: pointer;
 580   border: dashed 1px #E9FCC6;
 581 }.componentContainer img{
 582   height: 38px;
 583 }
 584 .componentContainer h2{
 585   margin-top: 9px;
 586   font-size: 14px;
 587   font-weight: bold;
 588 }
 589 .componentContainer p{
 590   font-size: 12px;
 591 }
 592 .functionAttributeSidebar{
 593   width: 440px;
 594   padding: 0px;
 595   margin-top: 45px;
 596 }
 597 .functionAttributeSidebar .attributesContainer{
 598   background: #fff;
 599   border: solid 1px #C1CDDD;
 600   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 601 }
 602 /*ATTRIBUTES SIDE BAR*/
 603 .attributesSideBar{
 604   width: 396px;
 605   padding: 0px;
 606   margin-top: 50px;
 607 }
 608 .attributesSideBar .attributesContainer{
 609   background: #fff;
 610   border: solid 1px #C1CDDD;
 611   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 612 }
 613 .closeBar{
 614   float: left;
 615   width: 50%;
 616   height: 42px;
 617   background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
 618   border: 0;
 619   outline: 0;
 620   margin-left: -30px;
 621 }
 622 .closeBar:focus{
 623   outline: none;
 624 }
 625 .attributesContainer h1{
 626   margin-bottom: 10px;
 627   padding: 12px 0 12px 15px;
 628   background: #DEE8F3;
 629   font-size: 12px;
 630   font-weight: bold;
 631   text-transform: uppercase;
 632   color: #1B3E6F;
 633 }
 634 .attributesContainer h6{
 635   margin-bottom: 10px;
 636   padding: 12px 0 12px 15px;
 637   background: #DEE8F3;
 638   font-size: 12px;
 639   font-weight: bold;
 640   text-transform: uppercase;
 641   color: #1B3E6F;
 642 }
 643 .actionName{
 644   margin-bottom: 21px;
 645 }
 646 .attributesContainer label{
 647   color: #1B3E6F;
 648   text-transform: uppercase;
 649   font-size: 11px;
 650   font-weight: bold;
 651 }
 652 .attributesContainer .form-group{
 653   margin-bottom: 9px;
 654 }
 655 .attributesContainer .form-control{
 656   border-color: #F0F5FC;
 657   border-radius: 2px;
 658   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 659   color: #103D73;
 660   font-size: 13px;
 661 }
 662 .attributesContainer .form-control:focus{
 663   border-color: #66bfff;
 664   box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
 665 }
 666 .attributesContainer .form-control::placeholder{
 667   color: #CFD7E5;
 668 }
 669 .scrolll{
 670   max-height: 88.75vh;
 671   overflow-y: auto;
 672 }
 673 .accordion > .card{
 674   margin-bottom: 0 !important;
 675   border: 0;
 676 }
 677 .accordion > .card .card-header{
 678   margin: 0;
 679   padding: 0;
 680   background-color: #F4F9FE;
 681   border: 0;
 682   border-radius: 0;
 683 }
 684 .accordion > .card .card-body{
 685   padding-bottom: 10px !important;
 686 }
 687 .accordion .btn-link{
 688   padding: 0;
 689   color: #C3CDDB;
 690   font-weight: bold;
 691   font-size: 13px;
 692   text-transform: uppercase;
 693   line-height: 15px;
 694 }
 695 .accordion .btn-link:hover{
 696   color: #103D73;
 697   text-decoration: unset;
 698 }
 699 .accordion .card-header .btn-link[aria-expanded="true"]:after,
 700 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 701   margin-right: 9px;
 702   font-family: 'FontAwesome';
 703   float: left;
 704   font-weight: normal;
 705   font-size: 12px;
 706 }
 707 .accordion .card-header .btn-link[aria-expanded="true"]:after{
 708   content: "\f078";
 709 }
 710 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 711   content: "\f054";
 712 }
 713 .btn-addAttribute{
 714   width: 20px;
 715   height: 20px;
 716   background-image: url(/assets/img/icon-add.svg);
 717   background-position: center center;
 718   background-repeat: no-repeat;
 719   vertical-align: sub;
 720 }
 721 .btn-addAttribute:hover{
 722   background-image: url(/assets/img/icon-add-hover.svg);
 723 }
 724 .btn-deleteAttribute{
 725   padding: 5px 10px;
 726   background: #FFE6E7;
 727   border: solid .5px #FFC9CB;
 728   border-radius: 2px;
 729   color: #FF6469;
 730   font-size: 10px;
 731
 732 }
 733 /* .source-button{
 734   position: absolute;
 735     z-index: 9999999;
 736     top: 60px;
 737     left: 50%;
 738 } */
 739 /*jointjs paper*/
 740 /* #board-paper {
 741     position: relative;
 742     border: 1px solid gray;
 743     display: inline-block;
 744     background: transparent;
 745     overflow: hidden;
 746 }
 747 #board-paper svg {
 748     background: transparent;
 749 }
 750 #board-paper svg .link {
 751     z-index: 2;
 752 }
 753 .html-element {
 754     position: absolute;
 755     background: #F4F9FE;
 756     pointer-events: none;
 757     -webkit-user-select: none;
 758     z-index: 2;
 759 } */
 760 .attributesContainer .dropdown-text,
 761 .dropdown-toggle:hover ~ .dropdown-text,
 762 .dropdown-toggle:focus ~ .dropdown-text{
 763   top: 7px;
 764   text-indent: 15px;
 765   background: #F4F9FE;
 766   border-radius: 5px;
 767   border: 0;
 768   box-shadow: whitesmoke;
 769   color: #1B3E6F;
 770   font-weight: bold;
 771   font-size: 13px;
 772 }
 773 .radio-btn{
 774   margin-left: 12px;
 775   font-weight: bold;
 776 }
 777 .function-attribute{
 778   margin-right: -16px;
 779 }
 780 .trash-span{
 781   margin-left: 150px;
 782   font-size:15px
 783 }
 784
 785 .editBar2{
 786   width: 100%;
 787   margin: 0;
 788 }
 789
 790 .viewBtns .btn{
 791   margin-top: 14px;
 792   padding-left: 30px!important;
 793   border: 0;
 794   font-size: 12px;
 795   color: #1B3E6F !important;
 796   background-color: #fff !important;
 797   background-repeat: no-repeat;
 798   background-position: 10px center;
 799 }
 800 .viewBtns .btn.active{
 801   background-color: #1B3E6F !important;
 802   color: #fff !important;
 803 }
 804
 805
 806 .joint-paper{
 807   width: 94% !important;
 808   height: 100vh !important;
 809   margin: 0 auto !important;
 810 }
 811 ul.templateLegend{
 812   margin: 0;
 813 }
 814 .templateLegend li{
 815   float: left;
 816   list-style: none;
 817   font-size: 11px;
 818 }
 819 .templateLegend li:not(:last-child){
 820   margin-right: 24px;
 821 }
 822 .templateLegend .requirement i{
 823   color: #FF6B6B;
 824 }
 825 .templateLegend .capability i{
 826   color: #0ABDE3;
 827 }
 828 ul.editor{
 829   margin-right: -40px;
 830   margin-top: 16px;
 831 }
 832 .editor li{
 833   list-style: none;
 834 }
 835 .roundBtn .btn{
 836   width: 15px;
 837   height: 15px;
 838   padding: 0px;
 839   border-radius: 15px;
 840   font-size: 10px;
 841   text-align: center;
 842   background-color:rgb(215, 234, 250);
 843   color: white;
 844   margin: 5px;
 845 }