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 /*PAUSE*/
 270 /* #board-paper svg{
 271   top: 30px;
 272   left: 0;
 273   height: 95%;
 274 } */
 275 /* .ng-sidebar__content.ng-sidebar__content--animate{
 276   padding-top: 70px !important;
 277 } */
 278
 279 .functionsList tspan{
 280   /* width:30px !important;  */
 281   font: normal 13px sans-serif;
 282   fill: #1B3E6F !important;
 283   overflow-wrap: break-word;
 284 }
 285 #board-paper #name tspan{
 286   /* fill: green; */
 287   text-align: center;
 288
 289 }
 290 tspan#type{
 291   text-align: center;
 292 }
 293 /*ACTIONS & COMPONENTS MENU*/
 294 .input-search-controller{
 295   height: 40px;
 296   padding-left: 36px;
 297   background: url(src/assets/img/icon-search-light.svg) #fff 15px center no-repeat;
 298   background-size: 4.5%;
 299   border-radius: 0;
 300   border: 0;
 301   border-bottom: solid 1px #D7E7F9;
 302   color: #1B3E6F;
 303   font-size: 13px;
 304 }
 305 .input-search-controller::placeholder{
 306   color: #D0D7E4;
 307   font-size: 12px;
 308 }
 309 .input-search-controller:focus{
 310   background-color: #fff !important;
 311   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
 312   text-shadow: none;
 313   border-color: #DEE8F3;
 314 }
 315 .functionsList p{
 316   margin-bottom: 0;
 317   padding-left: 30px;
 318   background-position: left center;
 319   background-repeat: no-repeat;
 320 }
 321 p.compType-1{
 322   background-image: url(/assets/img/icon-comType1-sm.svg);
 323 }
 324 p.compType-2{
 325   background-image: url(/assets/img/icon-comType2-sm.svg);
 326 }
 327 p.compType-3{
 328   background-image: url(/assets/img/icon-comType3-sm.svg);
 329 }
 330 p.compType-4{
 331   background-image: url(/assets/img/icon-comType4-sm.svg);
 332 }
 333 /*Actions Wrapper*/
 334 .actions-wrapper{
 335   position: absolute;
 336   width: 100%;
 337   top: 0;
 338 }
 339 .actions-container{
 340   width: 92%;
 341   margin: 0 auto;
 342   background: red;
 343 }
 344 .actionSubList{
 345   margin:0 0 0 4px; /* indentation */
 346   padding:0;
 347   list-style:none;
 348   position:relative;
 349 }
 350 .actionSubList:before {
 351   content: "";
 352   display: block;
 353   width: 0;
 354   position: absolute;
 355   top: 0;
 356   bottom: 0;
 357   left: 0;
 358   border-left: 1px solid #C1CDDD;
 359 }
 360 .actionSubList li{
 361   margin: 0;
 362   padding: 0 1.5em; /* indentation + .5em */
 363   line-height: 32px;
 364   position: relative;
 365 }
 366 .actionSubList li::before{
 367   content: "";
 368   display: block;
 369   width: 10px; /* same with indentation */
 370   height: 0;
 371   border-top: 1px solid #C1CDDD;
 372   margin-top: -1px; /* border top width */
 373   position: absolute;
 374   top: 16px; /* (line-height/2) */
 375   left: 0;
 376 }
 377 .actionSubList li:last-child:before {
 378   background: #F4F9FE; /* same with body background */
 379   height: auto;
 380   top: 16px; /* (line-height/2) */
 381   bottom: 0;
 382 }
 383
 384 .controllerSidebar{
 385   width: 320px;
 386   padding: 0;
 387   overflow: hidden !important;
 388   background: #F4F9FE;
 389   border: solid 1px #C1CDDD;
 390   box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
 391 }
 392 .helpBox{
 393   position : absolute;
 394   bottom : 0;
 395   width: 100%;
 396   height : 40px;
 397   margin-top : 24px;
 398   padding-left: 20px;
 399   background: #fff;
 400   border-top: solid 1px #C1CDDD;
 401   font-size: 13px;
 402   line-height: 40px;
 403   color: #0070F4;
 404 }
 405 .helpBox .icon-info{
 406   margin-left: 0;
 407   margin-right: 10px;
 408 }
 409 .helpBox .icon-info::before{
 410   color: #0070F4 !important;
 411 }
 412 .controllerSidebar .row,
 413 .controllerSidebar .col{
 414   margin: 0;
 415   padding: 0;
 416 }
 417 .controllerSidebar h1{
 418   margin-bottom: 15px;
 419   padding: 12px 0 12px 12px;
 420   background: #fff;
 421   font-size: 12px;
 422   font-weight: bold;
 423   text-transform: uppercase;
 424   color: #C3CDDB;
 425 }
 426 .controllerSidebar b{
 427   margin-left: 12px;
 428   margin-bottom: 9px;
 429   font-size: 12px;
 430   color: #C3CDDB;
 431 }
 432 /*PAUSE*/
 433 .functionsList .joint-paper{
 434   width: 100% !important;
 435   height: 72vh !important;
 436   margin: 0 !important;
 437 }
 438 .actionBtns .btn{
 439   margin: 0px 15px 16px -90px;
 440   /* padding: 9px 20px; */
 441   border-radius: 0px;
 442   font-size: 14px;
 443   font-weight: bold;
 444   /* outline: 0 !important; */
 445   float: left;
 446 }
 447 .actionsList li:hover,
 448 .actionsList li label:hover{
 449   cursor: pointer;
 450 }
 451 .new-action,
 452 .new-action:hover{
 453   margin: 9px 0 4px 3px;
 454   padding: 6px;
 455   font-size: 13px;
 456   font-weight: bold;
 457   color: #1B3E6F;
 458 }
 459 .new-action:hover{
 460   background: #D7E7F9;
 461 }
 462 .functionsList{
 463   height: calc(100vh - 200px);
 464   overflow-y: auto;
 465 }
 466 .custom-control.custom-checkbox:hover,
 467 .custom-control-label:hover{
 468   cursor: pointer;
 469 }
 470 .custom-control{
 471   height: 40px;
 472   font-size: 14px;
 473   line-height: 40px;
 474 }
 475 .custom-control:hover{
 476     background-color: white;
 477 }
 478 .actionsList{
 479   height: 65vh !important;
 480   overflow-y: auto;
 481 }
 482 .actionsList ul{
 483   padding-left: 0;
 484 }
 485 .actionsList li{
 486   list-style: none;
 487 }
 488 .functionsList .list-group-item{
 489   margin-bottom: 10px;
 490   padding-left: 40px;
 491   background: #fff;
 492   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 493   border-radius: 2px;
 494 }
 495 .functionsList .joint-paper{
 496   background: transparent !important;
 497 }
 498 .actionsList .custom-control-label{
 499   width: 100%;
 500   padding: 6px;
 501   vertical-align: unset;
 502   color: #1B3E6F;
 503   font-size: 13px;
 504   line-height: 20px;
 505   border-top-right-radius: 2px;
 506   border-bottom-right-radius: 2px;
 507 }
 508 .actionsList .custom-control-label::before,
 509 .actionsList .custom-control-label::after{
 510   top: 1.25rem;
 511 }
 512 .actionsList .custom-control-label p{
 513   color: #C7D0DD;
 514   font-size: 12px;
 515 }
 516 /* .custom-control-input:checked ~ .custom-control-label{
 517   background-color: #1B3E6F !important;
 518   color: #fff;
 519 } */
 520 .inserActionBtns .btn{
 521   border-radius: 15px !important;
 522   padding: 6px 20px;
 523   font-size: 12px;
 524   font-weight: bold;
 525   border: 0;
 526
 527 }
 528 .inserActionBtns .btn:first-child{
 529   background: #1273EB;
 530   border: solid 1px #1273EB;
 531   color: #fff;
 532 }
 533 .inserActionBtns .btn:last-child{
 534   background: #fff;
 535   border: solid 1px #D9E6F2;
 536   color: #C3CDDB;
 537   margin-top: 14px;
 538 }
 539 .controllerSidebar .custom-control label{
 540   margin-bottom: 0;
 541 }
 542 .controllerSidebar .custom-control i{
 543   margin-right: 9px;
 544 }
 545 /*Components List*/
 546 .functionsList .list-group-item{
 547   padding-left: 36px;
 548   border: 0;
 549   font-size: 14px;
 550   background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat;
 551 }
 552
 553 /*CANVAS*/
 554 .source-button.editBar{
 555   position: absolute;
 556   z-index: 1000 /*9999999*/;
 557   top: 60px;
 558   /* left: 50%; */
 559 }
 560 .editBar,
 561 .editBar2{
 562   width: calc(100% - 320px);
 563   margin: 0 auto 0 320px;
 564   height: 45px;
 565   padding: 0;
 566   padding-right: 20px;
 567   background:#F4F9FE;
 568   border-bottom: solid 1px #E8EFF8;
 569   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 570 }
 571
 572 .editBar .btn-group,
 573 .editBar2 .btn-group{
 574   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 575 }
 576 .editBar .toggoleBtn,
 577 .editBar2 .toggoleBtn{
 578   height: 43px;
 579   margin-right: 12px;
 580   background-color: #fff;
 581   background-repeat: no-repeat;
 582   background-position: left center;
 583   border: 0;
 584   color: #1B3E6F;
 585   font-size: 10px;
 586   border-top-left-radius: 0;
 587   border-top-right-radius: 4px;
 588   border-bottom-left-radius: 0;
 589   border-bottom-right-radius: 4px;
 590 }
 591 .editBar .toggoleBtn i,
 592 .editBar2 .toggoleBtn i{
 593   font-size: 20px;
 594 }
 595 .editBar .toggoleBtn.active,
 596 .editBar2 .toggoleBtn.active{
 597   padding: 0 10px !important;
 598   background-color: #1B3E6F !important;
 599   color: #fff;
 600 }
 601 .viewBtns .topologySource{
 602   background-image: url(src/assets/img/icon-topologyView-active.svg);
 603 }
 604 .viewBtns .topologyView{
 605   background-image: url(src/assets/img/icon-topologySource.svg);
 606 }
 607 .card.actionContainer{
 608   margin: 20px 20px 40px 60px;
 609   background: transparent;
 610   border: 0;
 611 }
 612 .actionContainer .card-header{
 613   padding: 0;
 614   background: transparent;
 615   border: 0;
 616 }
 617 .actionContainer .card-header span{
 618   padding: 12px 20px;
 619   border-top-left-radius: 2px;
 620   border-top-right-radius: 2px;
 621   font-size: 12px;
 622   line-height: 38px;
 623   font-weight: bold;
 624   color: #1B3E6F;
 625   background: #C3CDDB;
 626 }
 627 .actionContainer .card-body{
 628   min-height: 170px;
 629   padding: 15px 20px !important;
 630   border: solid 1px #C3CDDB;
 631   background: #fff;
 632   box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
 633 }
 634 .actionContainer a{
 635   display: inline-block;
 636   width: 230px;
 637   height: 130px;
 638   margin: 20px;
 639   padding: 24px;
 640   background: #1B3E6F;
 641   color: #fff !important;
 642   text-align: center;
 643   border-radius: 2px;
 644   border: solid 1px #1B3E6F;
 645 }
 646 .actionContainer a:hover{
 647   cursor: pointer;
 648   border: dashed 1px #E9FCC6;
 649 }.componentContainer img{
 650   height: 38px;
 651 }
 652 .componentContainer h2{
 653   margin-top: 9px;
 654   font-size: 14px;
 655   font-weight: bold;
 656 }
 657 .componentContainer p{
 658   font-size: 12px;
 659 }
 660 .attributeSidebar{
 661   width: 440px;
 662   padding: 0px;
 663   margin-top: 45px;
 664 }
 665 .attributesContainer{
 666   padding: 0;
 667   background: #fff;
 668   border: solid 1px #C1CDDD;
 669   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 670 }
 671 /*ATTRIBUTES SIDE BAR*/
 672 .attributesSideBar{
 673   width: 358px;
 674   padding: 0px;
 675   margin-top: 45px;
 676 }
 677 .attributesSideBar .attributesContainer{
 678   height: 85.9vh;
 679   overflow-y: hidden;
 680   padding-bottom: 20px;
 681   background: #fff;
 682   border: solid 1px #C1CDDD;
 683   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 684 }
 685 .closeBar{
 686   float: left;
 687   padding: 0 !important;
 688   width: 38px;
 689   height: 35px;
 690   background:#D9E3EE;
 691   border: 0;
 692   outline: 0;
 693 }
 694 .closeBar:focus{
 695   outline: none;
 696 }
 697 .attributesContainer .scrollWrapper{
 698   overflow-y: auto;
 699   height: 79vh;
 700 }
 701 .attributesContainer .nav-link{
 702   padding-top: 7px !important;
 703   padding-bottom: 7px !important;
 704   color: #1B3E6F !important;
 705   text-transform: capitalize !important;
 706   border: solid 1px #ECEDF2 !important;
 707   border-radius: 0 !important;
 708 }
 709 .attributesContainer .nav-item:first-child a{
 710   border-top-left-radius: 4px !important;
 711   border-bottom-left-radius: 4px !important;
 712   border-right-width: 0 !important;
 713 }
 714 .attributesContainer .nav-item:last-child a{
 715   border-top-right-radius: 4px !important;
 716   border-bottom-right-radius: 4px !important;
 717   border-left-width: 0 !important;
 718 }
 719 .nav-pills .nav-link.active{
 720   background-color: #1B3E6F;
 721   color: #fff !important;
 722 }
 723 .add-attribute .btn i{
 724   font-weight: bold;
 725 }
 726 .attributesContainer h1{
 727   margin-bottom: 10px;
 728   padding: 12px 0 12px 15px;
 729   background: #DEE8F3;
 730   font-size: 12px;
 731   font-weight: bold;
 732   text-transform: uppercase;
 733   color: #1B3E6F;
 734 }
 735 .attributesContainertTitle{
 736   height: 35px;
 737   margin-bottom: 9px !important;
 738   padding: 0;
 739   background: #DEE8F3;
 740   font-size: 12px;
 741 }
 742 .add-attribute{
 743   margin: 15px 0;
 744   padding: 15px 9px;
 745   background-color: #F4F9FE;
 746 }
 747 .add-attribute h5{
 748   padding: 0;
 749   margin-bottom: 12px;
 750   font-size: 12px;
 751   font-weight: bold;
 752   text-transform: uppercase;
 753   color: #1B3E6F;
 754 }
 755 .add-attribute .btn{
 756   width: 100%;
 757   background-color: #fff;
 758   border: solid 1px #C1CDDD;
 759   color: #1B3E6F;
 760   line-height: 18px;
 761   border-radius: 4px;
 762 }
 763 .add-attribute .btn:hover{
 764   background-color: #1B3E6F;
 765 }
 766 .add-attribute .btn:hover i::before{
 767   color: #fff;
 768 }
 769 .add-attribute .btn:focus{
 770   box-shadow: none;
 771 }
 772 .icon-function-attribute{
 773   font-size: 18px;
 774 }
 775 .add-attribute span{
 776   font-size: 11px;
 777   line-height: 16px;
 778 }
 779 .attributesContainertTitle .btn-group{
 780   margin-top: 3px;
 781 }
 782 .attributesContainertTitle .btn{
 783   margin-left: 8px !important;
 784   padding: 1px 9px !important;
 785   border-radius: 4px !important;
 786 }
 787 .attributesContainer h6{
 788   padding: 0;
 789   margin-bottom: 0;
 790   background: #DEE8F3;
 791   line-height: 35px !important;
 792   font-size: 12px;
 793   font-weight: bold;
 794   text-transform: uppercase;
 795   color: #1B3E6F;
 796 }
 797 .view-source,
 798 .view-source:hover{
 799   background: #103D73;
 800   border-color: #D0DFF1;
 801   color: #fff;
 802   font-size: 11px;
 803 }
 804 .trash-item,
 805 .trash-item:hover{
 806   background: #fff;
 807   border-color: #D0DFF1;
 808   color: #103D73;
 809 }
 810 .trash-item{
 811   font-size: 14px;
 812 }
 813 .attributesContainer label{
 814   margin-bottom: 0;
 815   color: #1B3E6F;
 816   /* text-transform: uppercase; */
 817   font-size: 12px;
 818   font-weight: bold;
 819   line-height: 32px;
 820 }
 821 .attributesContainer label.custom-control-label{
 822   text-transform: unset;
 823   font-weight: normal;
 824 }
 825 .attributesContainer .form-group{
 826   margin-bottom: 9px;
 827 }
 828 .attributesContainer .form-control{
 829   border-color: #F0F5FC;
 830   border-radius: 2px;
 831   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 832   color: #103D73;
 833   font-size: 13px;
 834 }
 835 .attributesContainer .form-control:focus{
 836   border-color: #66bfff;
 837   box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
 838 }
 839 .attributesContainer .form-control::placeholder{
 840   color: #CFD7E5;
 841 }
 842 .attributesContainer .attribute-value{
 843   text-transform: unset;
 844   display: block;
 845   width: 100%;
 846   padding: 0 .75rem .375rem 0;
 847   font-size: 12px;
 848   font-weight: normal;
 849 }
 850 .attributesContainer textarea{
 851   height: 60px;
 852 }
 853 .icon-required-star{
 854   margin-left: 2px;
 855   font-size: 10px;
 856 }
 857 .optional-attribute::before{
 858   color: #CAD3E0;
 859 }
 860 .attributeOptions{
 861   display: none;
 862   border: 0;
 863 }
 864 .attributeOptions a:not(:first-child){
 865   margin-left: 14px;
 866 }
 867 .attributeOptions i{
 868   color: #103D73 !important;
 869   font-size: 16px;
 870 }
 871 .editAttribute i{
 872   font-size: 14px;
 873 }
 874 .action-attributes .form-group{
 875   display: inline-block;
 876   width: 100%;
 877   padding-left: 12px;
 878   /* line-height: 30px; */
 879 }
 880 .action-attributes .form-group:hover{
 881   cursor: pointer !important;
 882   background-color: #F5FAFF;
 883 }
 884 .action-attributes .form-group:hover label{
 885   cursor: pointer !important;
 886   /* padding-left: 12px; */
 887 }
 888 .action-attributes .form-group:hover .attributeOptions{
 889   display: inline-block;
 890   position: relative;
 891   left: 8%;
 892   top: 3px;
 893 }
 894
 895 .btn-select-template{
 896   display: inherit;
 897   background-color: #C3CDDB;
 898   border-radius: 2px;
 899   color: #1B3E6F;
 900   font-size: 12px;
 901 }
 902 .btn-select-template i{
 903   font-size: 16px;
 904   vertical-align: text-bottom;
 905 }
 906 .attribute-wrap{
 907   padding-bottom: 15px;
 908   margin-bottom: 9px;
 909   border-bottom: solid 1px #F4F9FE;
 910 }
 911 .function-accordion .attribute-wrap:nth-last-child(1){
 912   margin-bottom: 0;
 913   padding-bottom: 0;
 914   border-bottom: 0;
 915 }
 916 .attribute-wrap .form-group{
 917   margin-bottom: 0;
 918 }
 919 .template-mapping-list{
 920   margin-bottom: 15px;
 921   font-size: 13px;
 922 }
 923 .template-mapping-list p{
 924   width: 56%;
 925 }
 926 .deleteTemplate{
 927   right: 30px;
 928   top: -8px;
 929 }
 930 .deleteTemplate i{
 931   color: #103D73 !important;
 932 }
 933 .icon-close::before{
 934   color: #103D73;
 935   font-size: 10px !important;
 936 }
 937 /*Accordion*/
 938 .accordion{
 939   margin-top: 12px;
 940 }
 941 .accordion .card-header .btn-link{
 942   padding-left: 20px !important;
 943   padding-right: 20px !important;
 944 }
 945 .accordion > .card{
 946   box-shadow: none;
 947   margin-bottom: 0 !important;
 948 }
 949 .accordion > .card .card-body{
 950   padding-bottom: 0 !important;
 951 }
 952 .function-accordion .card{
 953   overflow: inherit !important;
 954   box-shadow: none;
 955 }
 956 /*
 957 .accordion .card-header .btn-link[aria-expanded="true"],
 958 .accordion .card-header .btn-link[aria-expanded="false"]{
 959   padding-left: 20px !important;
 960   padding-right: 20px !important;
 961 }
 962 .accordion > .card .card-header{
 963   margin: 0;
 964   padding: 0 !important;
 965   background-color: #F4F9FE;
 966   border: 0;
 967   border-radius: 0;
 968 }
 969
 970 .accordion > .card .card-body{
 971   padding-top: 20px !important;
 972   padding-bottom: 0 !important;
 973 }
 974 .accordion .btn-link{
 975   padding: 0;
 976   color: #C3CDDB;
 977   font-weight: bold;
 978   font-size: 13px;
 979   text-transform: uppercase;
 980   line-height: 15px;
 981 }
 982 .btn-link::before{
 983   font-size: 15px !important;
 984 }
 985 .accordion .btn-link:hover{
 986   color: #103D73;
 987   text-decoration: unset;
 988 }
 989 .accordion .card-header .btn-link[aria-expanded="true"]:after,
 990 .accordion .card-header .btn-link[aria-expanded="false"]:after{
 991   margin-right: 9px;
 992   font-family: 'FontAwesome';
 993   float: left;
 994   font-weight: normal;
 995   font-size: 12px;
 996 } */
 997
 998
 999
1000
1001 /* .accordion .card-header .btn-link[aria-expanded="true"]:after{
1002   content: "\f078";
1003 }
1004 .accordion .card-header .btn-link[aria-expanded="false"]:after{
1005   content: "\f054";
1006 } */
1007 .btn-addAttribute{
1008   width: 20px;
1009   height: 20px;
1010   background-image: url(/assets/img/icon-add.svg);
1011   background-position: center center;
1012   background-repeat: no-repeat;
1013   vertical-align: sub;
1014 }
1015 .btn-addAttribute:hover{
1016   background-image: url(/assets/img/icon-add-hover.svg);
1017 }
1018 .btn-deleteAttribute{
1019   padding: 5px 10px;
1020   background: #FFE6E7;
1021   border: solid .5px #FFC9CB;
1022   border-radius: 2px;
1023   color: #FF6469;
1024   font-size: 10px;
1025
1026 }
1027 /* .source-button{
1028   position: absolute;
1029     z-index: 9999999;
1030     top: 60px;
1031     left: 50%;
1032 } */
1033 /*jointjs paper*/
1034 /* #board-paper {
1035     position: relative;
1036     border: 1px solid gray;
1037     display: inline-block;
1038     background: transparent;
1039     overflow: hidden;
1040 }
1041 #board-paper svg {
1042     background: transparent;
1043 }
1044 #board-paper svg .link {
1045     z-index: 2;
1046 }
1047 .html-element {
1048     position: absolute;
1049     background: #F4F9FE;
1050     pointer-events: none;
1051     -webkit-user-select: none;
1052     z-index: 2;
1053 } */
1054 .attributesContainer .dropdown-text,
1055 .dropdown-toggle:hover ~ .dropdown-text,
1056 .dropdown-toggle:focus ~ .dropdown-text{
1057   top: 7px;
1058   text-indent: 15px;
1059   background: #F4F9FE;
1060   border-radius: 5px;
1061   border: 0;
1062   box-shadow: whitesmoke;
1063   color: #1B3E6F;
1064   font-weight: bold;
1065   font-size: 13px;
1066 }
1067 .radio-btn{
1068   margin-left: 12px;
1069   font-weight: bold;
1070 }
1071 .trash-span{
1072   font-size:15px
1073 }
1074
1075 .editBar2{
1076   width: 100%;
1077   margin: 0;
1078 }
1079
1080 .viewBtns .btn{
1081   margin-top: 14px;
1082   padding-left: 30px!important;
1083   border: 0;
1084   font-size: 11px;
1085   color: #1B3E6F !important;
1086   background-color: #fff !important;
1087   background-repeat: no-repeat;
1088   background-position: 10px center;
1089 }
1090 .viewBtns .btn.active{
1091   background-color: #1B3E6F !important;
1092   color: #fff !important;
1093 }
1094 /*PAUSE*/
1095 /*
1096 .joint-paper{
1097   width: 96.4% !important;
1098   height: 80vh !important;
1099   margin: 60px auto 0 !important;
1100 } */
1101 ul.templateLegend{
1102   margin: 0;
1103 }
1104 .templateLegend li{
1105   float: left;
1106   list-style: none;
1107   font-size: 11px;
1108 }
1109 .templateLegend li:not(:last-child){
1110   margin-right: 24px;
1111 }
1112 .templateLegend .requirement i{
1113   color: #FF6B6B;
1114 }
1115 .templateLegend .capability i{
1116   color: #0ABDE3;
1117 }
1118 ul.editor{
1119   /* margin-right: -40px; */
1120   margin-top: 16px;
1121 }
1122 .editor li{
1123   list-style: none;
1124 }
1125 .editor .btn {
1126   padding: 0 8px !important;
1127   box-shadow: none;
1128 }
1129 .ace_editor{
1130   top: 5.4vh;
1131   height: 92vh !important;
1132 }
1133 .dsl-editor {
1134   height: 500px;
1135 }
1136 .vertical_line{
1137     border-left: 1px solid rgba(66, 169, 192, 0.1);
1138     height: 45px;
1139     margin-left: 12px;
1140     margin-right: 12px;
1141 }
1142 .zoom-percent{
1143   font-size: 12px;
1144 }
1145 /*Modal*/
1146 .modal{
1147   top: 60px;
1148 }
1149 .modal-backdrop{
1150   z-index: 0 !important;
1151   opacity: 0 !important;
1152 }
1153 /* .modal-holder.modal-backdrop{z-index: 100}
1154 .modal-holder + .modal-dialog {z-index: 1000} */
1155 .modal-dialog{
1156   max-width: 50%;
1157 }
1158 .modal-body{
1159   padding: 18px 24px !important;
1160   font-size: 14px;
1161 }
1162
1163 .createAttributeTabs .nav-link{
1164   padding-top: 0 !important;
1165 }
1166 .createAttributeTabs .nav-item a{
1167   color: #C3CDDB !important;
1168 }
1169 .createAttributeTabs .nav-item a,
1170 .createAttributeTabs .nav-item a.active{
1171   border-radius: 0 !important;
1172 }
1173 .createAttributeTabs .nav-link{
1174   text-transform: uppercase !important;
1175   border-radius: 0 !important;
1176   border: 0 !important;
1177 }
1178 .createAttributeTabs .nav-link.active{
1179   border-radius: 0 !important;
1180   border-bottom: solid 1px #1B3E6F !important;
1181 }
1182 .createAttributeTabs .nav-item{
1183   margin-left: 50px;
1184 }
1185 .createAttributeTabs .tab-content{
1186   margin-top: 20px;
1187   padding: 20px 50px;
1188   border: solid 1px #F4F9FE;
1189 }
1190 .createAttributeTabs .listBoxTitle{
1191   font-size: 11px;
1192   line-height: 29px;
1193 }
1194 .createAttributeTabs .notation{
1195   margin-left: 3px;
1196   color: #C3CDDB !important;
1197   font-weight: normal;
1198 }
1199 .addedFunctionsList,
1200 .nestedAttributes{
1201   background: #F4F9FE;
1202   border: solid 1px #D0DFF1 !important;
1203 }
1204 .addedFunctionsList .scrollWrapper,
1205 .nestedAttributes .scrollWrapper{
1206   height: 150px;
1207   max-height: 260px;
1208   overflow-y: auto;
1209 }
1210 .addedFunctionsList .input-search-controller,
1211 .nestedAttributes .input-search-controller{
1212   height: 32px;
1213   padding-left: 28px !important;
1214   background-position: 9px;
1215 }
1216 .addedFunctionsList .input-search-controller::placeholder,
1217 .nestedAttributes .input-search-controller::placeholder{
1218   font-weight: bold;
1219 }
1220 .create-form .addedFunctionsList .input-search-controller:focus,
1221 .create-form .nestedAttributes .input-search-controller:focus{
1222   background-color: #fff !important;
1223 }
1224 .nestedAttributes .noAttributes{
1225   margin: 12px;
1226   font-weight: bold;
1227   font-size: 12px;
1228 }
1229 .addedFunctionsList .list-group-item{
1230   margin-bottom: 0;
1231   padding-left: 10px;
1232   padding-right: 12px;
1233   text-align: left;
1234   font-size: 12px;
1235   border: 0 !important;
1236   border-radius: 0 !important;
1237   background-color: transparent !important;
1238 }
1239 .addedFunctionsList .list-group-item:hover{
1240   background-color: #fff !important;
1241   color: #1B3E6F;
1242 }
1243 .addedFunctionsList .list-group-item.active{
1244   background-color: #E0E8F2 !important;
1245 }
1246 .addedFunctionsList .list-group-item i{
1247   font-size: 18px;
1248   vertical-align: middle;
1249 }
1250 .addedFunctionsList .list-group-item i:last-child{
1251   float: right;
1252   font-size: 15px;
1253   line-height: 17px;
1254 }
1255 .nestedAttributes .btn-group{
1256   display: grid;
1257 }
1258 .nestedAttributes .btn-group .btn{
1259   padding-left: 10px !important;
1260   padding-right: 10px !important;
1261   height: 36px;
1262   border-radius: 0;
1263   background-color: transparent;
1264   border: 0;
1265   color: #1B3E6F !important;
1266   text-align: left;
1267   font-weight: normal;
1268   line-height: 24px;
1269 }
1270 .nestedAttributes .btn-group .btn:hover{
1271   background-color: #fff !important;
1272 }
1273 .nestedAttributes .btn-group .btn.active,
1274 .nestedAttributes .btn-group .btn.active:hover{
1275   background-color: #E0E8F2 !important;
1276   outline: 0;
1277 }
1278 .nestedAttributes .btn-group .btn.active:focus{
1279   box-shadow: none;
1280   border: 0;
1281 }
1282 /*FORM*/
1283 .create-form .col-form-label{
1284   color: #1B3E6F;
1285   font-size: 12px;
1286   font-weight: bold;
1287 }
1288 .create-form .col-form-label span{
1289   color: #FF6469;
1290 }
1291 .create-form .form-control{
1292   margin-bottom: 9px;
1293   padding-left: 0;
1294   padding-right: 0;
1295   border-radius: 0;
1296   border: 0;
1297   border-bottom: solid 1px #EFEFF4;
1298   font-size: 13px;
1299   box-shadow: none !important;
1300   color: #1B3E6F;
1301 }
1302 .create-form .form-control::placeholder{
1303   color: #C3CDDB;
1304 }
1305 .create-form .form-control:focus{
1306   border-bottom-color: #1B3E6F;
1307   -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1308   -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1309   box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6) !important;
1310   background-color: transparent !important;
1311   text-shadow: none;
1312 }
1313 .list-group-item{
1314   margin-bottom: 9px;
1315   padding: 9px 1.25rem;
1316   border-color: #E6EDF5;
1317   font-size: 11px;
1318   color: #1B3E6F;
1319   font-weight: bold;
1320   text-align: center;
1321 }
1322 .list-group-item.active{
1323   color: #1B3E6F;
1324   background-color: #C3CDDB;
1325   border-color: #C3CDDB;
1326 }
1327 .list-group-horizontal .list-group-item + .list-group-item{
1328   border-left-width: 1px;
1329 }
1330 .create-form .custom-control-input:checked ~ .custom-control-label{
1331   background-color: transparent !important;
1332   color: #1B3E6F;
1333 }
1334 /*Optional Attributes Menu*/
1335 .optional-attributes-menu{
1336   margin-top: 20px;
1337   padding: 10px 20px;
1338   border-top: solid 1px #ECEDF2;
1339   border-bottom: solid 1px #ECEDF2;
1340   background-color: #F4F9FE;
1341 }
1342 .optional-attributes-menu .dropdown{
1343   width: 100%;
1344 }
1345 .optional-attributes-menu .dropdown-text,
1346 .optional-attributes-menu .dropdown-text:hover,
1347 .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
1348 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
1349   top: 0;
1350   text-align: center;
1351   font-weight: normal;
1352   text-indent: 0;
1353   background-color: #fff;
1354   box-shadow: none;
1355   border: solid 1px #C1CDDD;
1356   border-radius: 2px;
1357 }
1358 .optional-attributes-menu .dropdown-toggle:hover ~ .dropdown-text,
1359 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-text{
1360   background-color: #D0DFF1 !important;
1361   border-color: #C1CDDD;
1362   border-radius: 2px !important;
1363   color: #1B3E6F !important;
1364 }
1365 .optional-attributes-menu .dropdown-text i{
1366   font-size: 17px;
1367   vertical-align: middle;
1368 }
1369 .optional-attributes-menu .dropdown-content:hover,
1370 .optional-attributes-menu .dropdown-toggle:focus ~ .dropdown-content{
1371   top: 36px;
1372   width: 100%;
1373   padding: 5px 0;
1374   border-radius: 2px;
1375   background-color: #F4F9FE;
1376   border-color: #D0DFF1;
1377   font-size: 13px;
1378 }
1379 .optional-attributes-menu .dropdown-content li{
1380   padding: 0 5px;
1381   line-height: 36px;
1382   border-bottom: solid 1px #EAF4FF;
1383 }
1384 .optional-attributes-menu .dropdown-content li a{
1385   display: inline;
1386 }
1387 .optional-attributes-menu .dropdown-content li:hover,
1388 .optional-attributes-menu .dropdown-content li:hover a{
1389   background-color: #D0DFF1;
1390 }
1391 .optional-attributes-menu li i{
1392   font-size: 20px;
1393   margin-top: 10px;
1394   margin-right: 10px;
1395 }
1396
1397 .temp-buttons .btn{
1398   font-size: 13px;
1399   margin: 12px;
1400   padding: 8px 12px !important;
1401   line-height: 14px;
1402 }