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