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 .template-list.active {
  91   display: inline;
  92   padding: 4px 10px;
  93   background: #F4F9FE;
  94   border-radius: 10px;
  95   color: #1B3E6F;
  96   font-size: 10px;
  97 }
  98 .designer-breadcrumb .fa-angle-right::before {
  99   color: #fff;
 100   line-height: 38px;
 101 }
 102 .sidebar-container{
 103   height: calc(100vh - 60px) !important;
 104 }
 105 /**Topology Actions**/
 106 .topology-actions{
 107   margin: 0;
 108   height: 60px;
 109 }
 110 .topology-actions > li{
 111   height: 59px;
 112   display: inline-block;
 113   padding: 0 20px;
 114 }
 115 .topology-actions > li:first-child{
 116   border-right: solid 1px #16396A;
 117 }
 118 .topology-actions .btn-group{
 119   margin-top: 11px;
 120 }
 121 .btn-group > .btn:not(:first-child){
 122   margin-left: 0;
 123 }
 124 .btn-topology-action,
 125 .btn-topology-action:hover{
 126   margin: 0 6px;
 127   padding: 3px 8px;
 128   color: #fff;
 129   border-radius: 50%;
 130   border: solid .5px #fff;
 131 }
 132 .btn-topology-action:last-child{
 133   margin-right: 0;
 134 }
 135 .btn-topology-action .fa{
 136   /* width: 16px;
 137   height: 16px; */
 138   text-align: center;
 139   font-size: 14px;
 140 }
 141 .topology-actions .dropdown-text,
 142 .dropdown-toggle:hover ~ .dropdown-text,
 143 .dropdown-toggle:focus ~ .dropdown-text{
 144   top: 7px;
 145   text-indent: 15px;
 146   background: #1273EB !important;
 147   border-radius: 15px !important;
 148   border: 0;
 149   box-shadow: none;
 150   color: #fff !important;
 151   font-weight: bold;
 152   font-size: 13px;
 153 }
 154 .topology-actions .dropdown-text::after{
 155   right: 15px;
 156   top: 13px;
 157   border-style: solid !important;
 158   border-width: 5px 5px 0 5px !important;
 159   border-color: #fff transparent transparent transparent;
 160 }
 161 .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
 162   top: 13px;
 163   border-style: solid !important;
 164   border-width: 0 5px 5px 5px !important;
 165   border-color: transparent transparent #fff transparent;
 166 }
 167 .topology-actions .dropdown-content:hover,
 168 .topology-actions .dropdown-toggle:focus ~ .dropdown-content{
 169   padding: 12px 0;
 170   text-indent: 0;
 171   background: #fff;
 172   border: 0;
 173   border-radius: 2px;
 174   box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
 175 }
 176 .topology-actions .dropdown-content a{
 177   padding: 0 20px;
 178   color: #1B3E6F;
 179   font-size: 13px;
 180 }
 181 .topology-actions .dropdown-content a:hover{
 182   background: #F4F9FE;
 183   text-decoration: none;
 184 }
 185 .package-info-btn{
 186   padding: 0 !important;
 187 }
 188 .package-info h3{
 189   font-size: 13px;
 190   font-weight: bold;
 191 }
 192 .package-info h3 span{
 193   font-size: 11px;
 194 }
 195 .package-info .badge{
 196   margin-right: 6px;
 197   padding: 4px 10px;
 198   background: #E0E8F2;
 199   border-radius: 12px;
 200   color: #1B3E6F;
 201   font-size: 11px;
 202   font-weight: normal;
 203 }
 204 .creator-pic{
 205   border-radius: 50%;
 206   width: 30px;
 207   height: 30px;
 208 }
 209 .package-info p{
 210   margin-bottom: 0;
 211   font-size: 11px;
 212   line-height: 20px;
 213 }
 214 .save-blueprint li:hover{
 215   cursor: pointer;
 216 }
 217
 218
 219
 220
 221
 222
 223
 224
 225
 226
 227
 228
 229
 230
 231 /*Rotated Text*/
 232 button.rotate{
 233   position: absolute;
 234   margin-top: 1px;
 235   padding: 0;
 236   background: transparent;
 237   border: 0;
 238 }
 239 .rotate{
 240   vertical-align: bottom;
 241   /* text-align: center; */
 242 }
 243 .rotate span{
 244   display: inline-table !important;
 245   -ms-writing-mode: tb-rl;
 246   -webkit-writing-mode: vertical-rl;
 247   writing-mode: vertical-rl !important;
 248   transform: rotate(180deg);
 249   white-space: nowrap;
 250   background: #1B3E6F;
 251   padding: 15px 12px;
 252   font-weight: bold;
 253   font-size: 12px;
 254   color:#fff;
 255   /* border-bottom-left-radius: 2px; */
 256   border-top-left-radius: 2px;
 257 }
 258 .rotate i{
 259   margin-right: 3px;
 260   margin-top: 9px;
 261   font-size: 15px;
 262 }
 263 .rotate span:first-child{
 264   margin-bottom: 0;
 265 }
 266 .rotate a:hover{
 267   text-decoration: none;
 268 }
 269 #board-paper svg{
 270   top: 70px;
 271   left: 0;
 272 }
 273 .componentsList tspan{
 274   /* width:30px !important;  */
 275   font: normal 13px sans-serif;
 276   fill: #1B3E6F !important;
 277   overflow-wrap: break-word;
 278 }
 279 #board-paper #name tspan{
 280   /* fill: green; */
 281   text-align: center;
 282
 283 }
 284 tspan#type{
 285   text-align: center;
 286 }
 287 /*ACTIONS & COMPONENTS MENU*/
 288 .input-search-controller{
 289   height: 40px;
 290   padding-left: 42px;
 291   background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat;
 292   border-radius: 0;
 293   border: 0;
 294   border-bottom: solid 1px #D7E7F9;
 295   color: #1B3E6F;
 296   font-size: 13px;
 297 }
 298 .input-search-controller::placeholder{
 299   color: #D0D7E4;
 300   font-size: 11px;
 301 }
 302 .input-search-controller:focus{
 303   background-color: #fff !important;
 304   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 305   text-shadow: none;
 306   border-color: #DEE8F3;
 307 }
 308 .componentsList p{
 309   margin-bottom: 0;
 310   padding-left: 30px;
 311   background-position: left center;
 312   background-repeat: no-repeat;
 313 }
 314 p.compType-1{
 315   background-image: url(/assets/img/icon-comType1-sm.svg);
 316 }
 317 p.compType-2{
 318   background-image: url(/assets/img/icon-comType2-sm.svg);
 319 }
 320 p.compType-3{
 321   background-image: url(/assets/img/icon-comType3-sm.svg);
 322 }
 323 p.compType-4{
 324   background-image: url(/assets/img/icon-comType4-sm.svg);
 325 }
 326 /*Actions Wrapper*/
 327 .actions-wrapper{
 328   position: absolute;
 329   width: 100%;
 330   top: 0;
 331 }
 332 .actions-container{
 333   width: 92%;
 334   margin: 0 auto;
 335   background: red;
 336 }
 337
 338 .controllerSidebar{
 339   width: 320px;
 340   padding: 0;
 341   overflow: hidden !important;
 342   background: #F4F9FE;
 343   border: solid 1px #C1CDDD;
 344   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
 345 }
 346 .helpBox{
 347   position : absolute;
 348   bottom : 0;
 349   width: 100%;
 350   height : 40px;
 351   margin-top : 24px;
 352   padding-left: 20px;
 353   background: #fff;
 354   border-top: solid 1px #C1CDDD;
 355   font-size: 13px;
 356   line-height: 40px;
 357   color: #0070F4;
 358 }
 359 .helpBox .icon-info{
 360   margin-left: 0;
 361   margin-right: 10px;
 362 }
 363 .helpBox .icon-info::before{
 364   color: #0070F4 !important;
 365 }
 366 .controllerSidebar .row,
 367 .controllerSidebar .col{
 368   margin: 0;
 369   padding: 0;
 370 }
 371 .controllerSidebar h1{
 372   margin-bottom: 15px;
 373   padding: 12px 0 12px 12px;
 374   background: #fff;
 375   font-size: 12px;
 376   font-weight: bold;
 377   text-transform: uppercase;
 378   color: #C3CDDB;
 379 }
 380 .controllerSidebar b{
 381   margin-left: 12px;
 382   margin-bottom: 9px;
 383   font-size: 12px;
 384   color: #C3CDDB;
 385 }
 386
 387 .actionBtns .btn{
 388   margin: 0px 15px 16px -90px;
 389   /* padding: 9px 20px; */
 390   border-radius: 0px;
 391   font-size: 14px;
 392   font-weight: bold;
 393   /* outline: 0 !important; */
 394   float: left;
 395
 396 }
 397 .new-action,
 398 .new-action:hover{
 399   margin: 9px 0 4px 3px;
 400   padding: 6px;
 401   font-size: 12px;
 402   font-weight: bold;
 403   color: #1B3E6F;
 404 }
 405 .new-action:hover{
 406   background: #D7E7F9;
 407 }
 408 .componentsList{
 409   margin-top: 16px;
 410   padding: 0 20px 10px;
 411 }
 412 .componentsList{
 413   padding-bottom: 0;
 414   /* height: calc( 100vh - 218px)!important;
 415   overflow: scroll;*/
 416   background: #F4F9FE !important;
 417 }
 418 .custom-control.custom-checkbox:hover,
 419 .custom-control-label:hover{
 420   cursor: pointer;
 421 }
 422 .custom-control{
 423   height: 40px;
 424   font-size: 14px;
 425   line-height: 40px;
 426 }
 427 .custom-control:hover{
 428     background-color: white;
 429 }
 430 .actionsList,
 431 .componentsList{
 432   height: 65vh !important;
 433   overflow-y: auto;
 434 }
 435 .componentsList .list-group-item{
 436   margin-bottom: 10px;
 437   padding-left: 40px;
 438   background: #fff;
 439   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 440   border-radius: 2px;
 441 }
 442 .actionsList .custom-control-label{
 443   width: 100%;
 444   padding: 6px;
 445   vertical-align: unset;
 446   color: #1B3E6F;
 447   font-size: 13px;
 448   line-height: 20px;
 449   border-top-right-radius: 2px;
 450   border-bottom-right-radius: 2px;
 451 }
 452 .actionsList .custom-control-label::before,
 453 .actionsList .custom-control-label::after{
 454   top: 1.25rem;
 455 }
 456 .actionsList .custom-control-label p{
 457   color: #C7D0DD;
 458   font-size: 12px;
 459 }
 460 .custom-control-input:checked ~ .custom-control-label{
 461   background-color: #1B3E6F !important;
 462   color: #fff;
 463 }
 464 .inserActionBtns .btn{
 465   border-radius: 15px !important;
 466   padding: 6px 20px;
 467   font-size: 12px;
 468   font-weight: bold;
 469   border: 0;
 470
 471 }
 472 .inserActionBtns .btn:first-child{
 473   background: #1273EB;
 474   border: solid 1px #1273EB;
 475   color: #fff;
 476 }
 477 .inserActionBtns .btn:last-child{
 478   background: #fff;
 479   border: solid 1px #D9E6F2;
 480   color: #C3CDDB;
 481   margin-top: 14px;
 482 }
 483 .controllerSidebar .custom-control label{
 484   margin-bottom: 0;
 485 }
 486 .controllerSidebar .custom-control i{
 487   margin-right: 9px;
 488 }
 489 /*Components List*/
 490 .componentsList .list-group-item{
 491   padding-left: 36px;
 492   border: 0;
 493   font-size: 14px;
 494   background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
 495 }
 496
 497 /*CANVAS*/
 498 .source-button.editBar{
 499   position: absolute;
 500   z-index: 1000 /*9999999*/;
 501   top: 60px;
 502   /* left: 50%; */
 503 }
 504 .editBar,
 505 .editBar2{
 506   width: calc(100% - 320px);
 507   margin: 0 auto 0 320px;
 508   height: 45px;
 509   padding: 0;
 510   padding-right: 20px;
 511   background:#F4F9FE;
 512   border-bottom: solid 1px #E8EFF8;
 513   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 514 }
 515
 516 .editBar .btn-group,
 517 .editBar2 .btn-group{
 518   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 519 }
 520 .editBar .toggoleBtn,
 521 .editBar2 .toggoleBtn{
 522   height: 43px;
 523   margin-right: 12px;
 524   background-color: #fff;
 525   background-repeat: no-repeat;
 526   background-position: left center;
 527   border: 0;
 528   color: #1B3E6F;
 529   font-size: 10px;
 530   border-top-left-radius: 0;
 531   border-top-right-radius: 4px;
 532   border-bottom-left-radius: 0;
 533   border-bottom-right-radius: 4px;
 534 }
 535 .editBar .toggoleBtn i,
 536 .editBar2 .toggoleBtn i{
 537   font-size: 20px;
 538 }
 539 .editBar .toggoleBtn.active,
 540 .editBar2 .toggoleBtn.active{
 541   padding: 0 10px !important;
 542   background-color: #1B3E6F !important;
 543   color: #fff;
 544 }
 545 .viewBtns .topologySource{
 546   background-image: url(src/assets/img/icon-topologyView-active.svg);
 547 }
 548 .viewBtns .topologyView{
 549   background-image: url(src/assets/img/icon-topologySource.svg);
 550 }
 551 .card.actionContainer{
 552   margin: 20px 20px 40px 60px;
 553   background: transparent;
 554   border: 0;
 555 }
 556 .actionContainer .card-header{
 557   padding: 0;
 558   background: transparent;
 559   border: 0;
 560 }
 561 .actionContainer .card-header span{
 562   padding: 12px 20px;
 563   border-top-left-radius: 2px;
 564   border-top-right-radius: 2px;
 565   font-size: 12px;
 566   line-height: 38px;
 567   font-weight: bold;
 568   color: #1B3E6F;
 569   background: #C3CDDB;
 570 }
 571 .actionContainer .card-body{
 572   min-height: 170px;
 573   padding: 15px 20px !important;
 574   border: solid 1px #C3CDDB;
 575   background: #fff;
 576   box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
 577 }
 578 .actionContainer a{
 579   display: inline-block;
 580   width: 230px;
 581   height: 130px;
 582   margin: 20px;
 583   padding: 24px;
 584   background: #1B3E6F;
 585   color: #fff !important;
 586   text-align: center;
 587   border-radius: 2px;
 588   border: solid 1px #1B3E6F;
 589 }
 590 .actionContainer a:hover{
 591   cursor: pointer;
 592   border: dashed 1px #E9FCC6;
 593 }.componentContainer img{
 594   height: 38px;
 595 }
 596 .componentContainer h2{
 597   margin-top: 9px;
 598   font-size: 14px;
 599   font-weight: bold;
 600 }
 601 .componentContainer p{
 602   font-size: 12px;
 603 }
 604 .attributeSidebar{
 605   width: 440px;
 606   padding: 0px;
 607   margin-top: 45px;
 608 }
 609 .attributesContainer{
 610   padding: 0;
 611   background: #fff;
 612   border: solid 1px #C1CDDD;
 613   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 614 }
 615 /*ATTRIBUTES SIDE BAR*/
 616 .attributesSideBar{
 617   width: 358px;
 618   padding: 0px;
 619   margin-top: 45px;
 620 }
 621 .attributesSideBar .attributesContainer{
 622   height: 85.9vh;
 623   overflow-y: hidden;
 624   padding-bottom: 20px;
 625   background: #fff;
 626   border: solid 1px #C1CDDD;
 627   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 628 }
 629 .closeBar{
 630   float: left;
 631   padding: 0 !important;
 632   width: 38px;
 633   height: 35px;
 634   background:#D9E3EE;
 635   border: 0;
 636   outline: 0;
 637 }
 638 .closeBar:focus{
 639   outline: none;
 640 }
 641 .attributesContainer .scrollWrapper{
 642   overflow-y: auto;
 643   height: 79vh;
 644 }
 645 .attributesContainer .nav-link{
 646   padding-top: 7px !important;
 647   padding-bottom: 7px !important;
 648   color: #1B3E6F !important;
 649   text-transform: capitalize !important;
 650   border: solid 1px #ECEDF2 !important;
 651   border-radius: 0 !important;
 652 }
 653 .attributesContainer .nav-item:first-child a{
 654   border-top-left-radius: 4px !important;
 655   border-bottom-left-radius: 4px !important;
 656   border-right-width: 0 !important;
 657 }
 658 .attributesContainer .nav-item:last-child a{
 659   border-top-right-radius: 4px !important;
 660   border-bottom-right-radius: 4px !important;
 661   border-left-width: 0 !important;
 662 }
 663 .nav-pills .nav-link.active{
 664   background-color: #1B3E6F;
 665   color: #fff !important;
 666 }
 667 .attributesContainer h1{
 668   margin-bottom: 10px;
 669   padding: 12px 0 12px 15px;
 670   background: #DEE8F3;
 671   font-size: 12px;
 672   font-weight: bold;
 673   text-transform: uppercase;
 674   color: #1B3E6F;
 675 }
 676 .attributesContainertTitle{
 677   height: 35px;
 678   margin-bottom: 9px !important;
 679   padding: 0;
 680   background: #DEE8F3;
 681   font-size: 12px;
 682 }
 683 .add-attribute{
 684   margin: 15px 0;
 685   padding: 15px 9px;
 686   background-color: #F4F9FE;
 687 }
 688 .add-attribute h5{
 689   padding: 0;
 690   margin-bottom: 12px;
 691   font-size: 12px;
 692   font-weight: bold;
 693   text-transform: uppercase;
 694   color: #1B3E6F;
 695 }
 696 .add-attribute .btn{
 697   width: 100%;
 698   background-color: #fff;
 699   border: solid 1px #C1CDDD;
 700   color: #1B3E6F;
 701   line-height: 18px;
 702   border-radius: 4px;
 703 }
 704 .add-attribute .btn:hover{
 705   background-color: #1B3E6F;
 706 }
 707 .add-attribute .btn:hover i::before{
 708   color: #fff;
 709 }
 710 .icon-function-attribute{
 711   font-size: 18px;
 712 }
 713 .add-attribute span{
 714   font-size: 11px;
 715   line-height: 16px;
 716 }
 717 .attributesContainertTitle .btn-group{
 718   margin-top: 3px;
 719 }
 720 .attributesContainertTitle .btn{
 721   margin-left: 8px !important;
 722   padding: 1px 9px !important;
 723   border-radius: 4px !important;
 724 }
 725 .attributesContainer h6{
 726   padding: 0;
 727   margin-bottom: 0;
 728   background: #DEE8F3;
 729   line-height: 35px !important;
 730   font-size: 12px;
 731   font-weight: bold;
 732   text-transform: uppercase;
 733   color: #1B3E6F;
 734 }
 735 .view-source,
 736 .view-source:hover{
 737   background: #103D73;
 738   border-color: #D0DFF1;
 739   color: #fff;
 740   font-size: 11px;
 741 }
 742 .trash-item,
 743 .trash-item:hover{
 744   background: #fff;
 745   border-color: #D0DFF1;
 746   color: #103D73;
 747 }
 748 .trash-item{
 749   font-size: 14px;
 750 }
 751 .attributesContainer label{
 752   color: #1B3E6F;
 753   /* text-transform: uppercase; */
 754   font-size: 12px;
 755   font-weight: bold;
 756 }
 757 .attributesContainer label.custom-control-label{
 758   text-transform: unset;
 759   font-weight: normal;
 760 }
 761 .attributesContainer .form-group{
 762   margin-bottom: 9px;
 763 }
 764 .attributesContainer .form-control{
 765   border-color: #F0F5FC;
 766   border-radius: 2px;
 767   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 768   color: #103D73;
 769   font-size: 13px;
 770 }
 771 .attributesContainer .form-control:focus{
 772   border-color: #66bfff;
 773   box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
 774 }
 775 .attributesContainer .form-control::placeholder{
 776   color: #CFD7E5;
 777 }
 778 .attributesContainer .attribute-value{
 779   text-transform: unset;
 780   display: block;
 781   width: 100%;
 782   padding: 0 .75rem .375rem 0;
 783   font-size: 12px;
 784   font-weight: normal;
 785 }
 786 .attributesContainer textarea{
 787   height: 60px;
 788 }
 789 .icon-required-star{
 790   font-size: 10px;
 791 }
 792 .optional-attribute::before{
 793   color: #CAD3E0;
 794 }
 795 .attributeOptions{
 796   display: none;
 797   border: 0;
 798 }
 799 .attributeOptions a:not(:first-child){
 800   margin-left: 18px;
 801 }
 802 .attributeOptions i{
 803   color: #103D73 !important;
 804   font-size: 16px;
 805 }
 806 .editAttribute i{
 807   font-size: 14px;
 808 }
 809 .action-attributes .form-group{
 810   display: inline-block;
 811   width: 100%;
 812   padding-left: 12px;
 813   /* line-height: 30px; */
 814 }
 815 .action-attributes .form-group:hover{
 816   cursor: pointer !important;
 817   background-color: #F5FAFF;
 818 }
 819 .action-attributes .form-group:hover label{
 820   cursor: pointer !important;
 821   /* padding-left: 12px; */
 822 }
 823 .action-attributes .form-group:hover .attributeOptions{
 824   display: inline-block;
 825   position: relative;
 826   left: 8%;
 827   top: 3px;
 828 }
 829
 830 .btn-select-template{
 831   background-color: #C3CDDB;
 832   border-radius: 2px;
 833   color: #1B3E6F;
 834   font-size: 12px;
 835 }
 836 .btn-select-template i{
 837   font-size: 16px;
 838   vertical-align: text-bottom;
 839 }
 840 .attribute-wrap{
 841   padding-bottom: 15px;
 842   margin-bottom: 9px;
 843   border-bottom: solid 1px #F4F9FE;
 844 }
 845 .attribute-wrap .form-group{
 846   margin-bottom: 0;
 847 }
 848 .template-mapping-list{
 849   margin-bottom: 15px;
 850   font-size: 13px;
 851 }
 852 .template-mapping-list p{
 853   width: 56%;
 854 }
 855 .deleteTemplate{
 856   right: 30px;
 857   top: -8px;
 858 }
 859 .deleteTemplate i{
 860   color: #103D73 !important;
 861 }
 862 .icon-close::before{
 863   color: #103D73;
 864   font-size: 10px !important;
 865 }
 866 .accordion{
 867   margin-top: 12px;
 868 }
 869 .accordion > .card{
 870   margin-bottom: 0 !important;
 871   border: 0;
 872   box-shadow: none;
 873 }
 874 .card-header .btn-link,
 875 .accordion .card-header .btn-link[aria-expanded="true"],
 876 .accordion .card-header .btn-link[aria-expanded="false"]{
 877   padding-left: 15px !important;
 878   padding-right: 15px !important;
 879 }
 880 .accordion > .card .card-header{
 881   margin: 0;
 882   padding: 0 !important;
 883   background-color: #F4F9FE;
 884   border: 0;
 885   border-radius: 0;
 886 }
 887
 888 .accordion > .card .card-body{
 889   padding-top: 20px !important;
 890   padding-bottom: 0 !important;
 891 }
 892 .accordion .btn-link{
 893   padding: 0;
 894   color: #C3CDDB;
 895   font-weight: bold;
 896   font-size: 13px;
 897   text-transform: uppercase;
 898   line-height: 15px;
 899 }
 900 .btn-link::before{
 901   font-size: 15px !important;
 902 }
 903 .accordion .btn-link:hover{
 904   color: #103D73;
 905   text-decoration: unset;
 906 }
 907 .accordion .card-header .btn-link[aria-expanded="true"]:after,
 908 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 909   margin-right: 9px;
 910   font-family: 'FontAwesome';
 911   float: left;
 912   font-weight: normal;
 913   font-size: 12px;
 914 }
 915 /* .accordion .card-header .btn-link[aria-expanded="true"]:after{
 916   content: "\f078";
 917 }
 918 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 919   content: "\f054";
 920 } */
 921 .btn-addAttribute{
 922   width: 20px;
 923   height: 20px;
 924   background-image: url(/assets/img/icon-add.svg);
 925   background-position: center center;
 926   background-repeat: no-repeat;
 927   vertical-align: sub;
 928 }
 929 .btn-addAttribute:hover{
 930   background-image: url(/assets/img/icon-add-hover.svg);
 931 }
 932 .btn-deleteAttribute{
 933   padding: 5px 10px;
 934   background: #FFE6E7;
 935   border: solid .5px #FFC9CB;
 936   border-radius: 2px;
 937   color: #FF6469;
 938   font-size: 10px;
 939
 940 }
 941 /* .source-button{
 942   position: absolute;
 943     z-index: 9999999;
 944     top: 60px;
 945     left: 50%;
 946 } */
 947 /*jointjs paper*/
 948 /* #board-paper {
 949     position: relative;
 950     border: 1px solid gray;
 951     display: inline-block;
 952     background: transparent;
 953     overflow: hidden;
 954 }
 955 #board-paper svg {
 956     background: transparent;
 957 }
 958 #board-paper svg .link {
 959     z-index: 2;
 960 }
 961 .html-element {
 962     position: absolute;
 963     background: #F4F9FE;
 964     pointer-events: none;
 965     -webkit-user-select: none;
 966     z-index: 2;
 967 } */
 968 .attributesContainer .dropdown-text,
 969 .dropdown-toggle:hover ~ .dropdown-text,
 970 .dropdown-toggle:focus ~ .dropdown-text{
 971   top: 7px;
 972   text-indent: 15px;
 973   background: #F4F9FE;
 974   border-radius: 5px;
 975   border: 0;
 976   box-shadow: whitesmoke;
 977   color: #1B3E6F;
 978   font-weight: bold;
 979   font-size: 13px;
 980 }
 981 .radio-btn{
 982   margin-left: 12px;
 983   font-weight: bold;
 984 }
 985 .trash-span{
 986   font-size:15px
 987 }
 988
 989 .editBar2{
 990   width: 100%;
 991   margin: 0;
 992 }
 993
 994 .viewBtns .btn{
 995   margin-top: 14px;
 996   padding-left: 30px!important;
 997   border: 0;
 998   font-size: 11px;
 999   color: #1B3E6F !important;
1000   background-color: #fff !important;
1001   background-repeat: no-repeat;
1002   background-position: 10px center;
1003 }
1004 .viewBtns .btn.active{
1005   background-color: #1B3E6F !important;
1006   color: #fff !important;
1007 }
1008
1009
1010 .joint-paper{
1011   width: 94% !important;
1012   height: 100vh !important;
1013   margin: 0 auto !important;
1014 }
1015 ul.templateLegend{
1016   margin: 0;
1017 }
1018 .templateLegend li{
1019   float: left;
1020   list-style: none;
1021   font-size: 11px;
1022 }
1023 .templateLegend li:not(:last-child){
1024   margin-right: 24px;
1025 }
1026 .templateLegend .requirement i{
1027   color: #FF6B6B;
1028 }
1029 .templateLegend .capability i{
1030   color: #0ABDE3;
1031 }
1032 ul.editor{
1033   /* margin-right: -40px; */
1034   margin-top: 16px;
1035 }
1036 .editor li{
1037   list-style: none;
1038 }
1039 .editor .btn {
1040   padding: 0 8px !important;
1041   box-shadow: none;
1042 }
1043 .ace_editor{
1044   top: 5.4vh;
1045   height: 92vh !important;
1046 }
1047 .dsl-editor {
1048   height: 500px;
1049 }
1050 .vertical_line{
1051     border-left: 1px solid rgba(66, 169, 192, 0.1);
1052     height: 45px;
1053     margin-left: 12px;
1054     margin-right: 12px;
1055 }
1056 .zoom-percent{
1057   font-size: 12px;
1058 }
1059 /*Modal*/
1060 .modal-backdrop{z-index: -1}
1061 .modal-holder.modal-backdrop{z-index: 100}
1062 .modal-holder + .modal-dialog {z-index: 1000}
1063 .modal-dialog{
1064   max-width: 680px;
1065 }