body{ /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important; background-size: 6px 6px !important; */ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important; background-color: #fff !important; } /*Icons*/ .icon-info{ margin-left: 3px; } .icon-info::before{ color: #fff; } /*Bootstrap*/ .controllerSidebar .nav-tabs{ border-bottom-width: 2px; } .controllerSidebar .nav-tabs .nav-link{ padding: 12px 0 !important; text-align: center; } .controllerSidebar .nav-tabs .nav-link::before{ content: ""; } .editNavbar .nav-tabs{ border-bottom-width: 0; } .editNavbar .nav-tabs .nav-link{ padding: 12px 28px !important; text-align: center; } .editNavbar .nav-tabs .nav-link::before{ content: ""; } .editNavbar .nav-link{ text-transform: initial !important; } .editNavbar .navbar, .editNavbar .navbar{ padding: 0; } /*Header*/ header{ position: relative; height: 60px; background-color: #1B3E6F; /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */ z-index: 200000000 !important; } .logo{ float: left; width: 50px; height: 60px; background: url(/assets/img/logo-icon.svg) center center #fff no-repeat; } /**Bread Crumb**/ .breadcrumb{ padding: 9px 20px; background: transparent; line-height: 40px; } .breadcrumb a, .breadcrumb a:hover{ color: #fff; } .breadcrumb .breadcrumb-item{ font-size: 12px; font-weight: bold; } .breadcrumb .breadcrumb-item:first-child{ font-size: 16px; } .breadcrumb-item + .breadcrumb-item::before{ color: #fff; } .breadcrumb .breadcrumb-item.active p{ display: inline; padding: 4px 10px; background: #F4F9FE; border-radius: 10px; color: #1B3E6F; font-size: 10px; } .designer-breadcrumb .fa-angle-right::before { color: #fff; line-height: 38px; } .sidebar-container{ height: calc(100vh - 60px) !important; } /**Topology Actions**/ .topology-actions{ margin: 0; height: 60px; } .topology-actions > li{ height: 59px; display: inline-block; padding: 0 20px; } .topology-actions > li:first-child{ border-right: solid 1px #16396A; } .topology-actions .btn-group{ margin-top: 11px; } .btn-group > .btn:not(:first-child){ margin-left: 0; } .btn-topology-action, .btn-topology-action:hover{ margin: 0 6px; padding: 4px 8px; color: #fff; border-radius: 50%; border: solid .5px #fff; } .btn-topology-action:last-child{ margin-right: 0; } .btn-topology-action .fa{ width: 16px; height: 16px; text-align: center; } .topology-actions .dropdown-text, .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text{ top: 7px; text-indent: 15px; background: #1273EB !important; border-radius: 15px !important; border: 0; box-shadow: none; color: #fff !important; font-weight: bold; font-size: 13px; } .topology-actions .dropdown-text::after{ right: 15px; top: 13px; border-style: solid !important; border-width: 5px 5px 0 5px !important; border-color: #fff transparent transparent transparent; } .topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{ top: 13px; border-style: solid !important; border-width: 0 5px 5px 5px !important; border-color: transparent transparent #fff transparent; } .topology-actions .dropdown-content:hover, .topology-actions .dropdown-toggle:focus ~ .dropdown-content{ padding: 12px 0; text-indent: 0; background: #fff; border: 0; border-radius: 2px; box-shadow: 0 2px 6px rgba(47, 83, 151, .15) } .topology-actions .dropdown-content a{ padding: 0 20px; color: #1B3E6F; font-size: 13px; } .topology-actions .dropdown-content a:hover{ background: #F4F9FE; text-decoration: none; } .package-info-btn{ padding: 0 !important; } .package-info h3{ font-size: 15px; font-weight: bold; } .package-info h3 span{ font-size: 11px; } .package-info .badge{ margin-right: 6px; padding: 4px 10px; background: #E0E8F2; border-radius: 12px; color: #1B3E6F; font-size: 11px; font-weight: normal; } .creator-pic{ border-radius: 50%; width: 30px; height: 30px; } .package-info p{ margin-bottom: 0; font-size: 11px; line-height: 20px; } /*Rotated Text*/ button.rotate{ position: absolute; margin-top: 1px; padding: 0; background: transparent; border: 0; } .rotate{ vertical-align: bottom; /* text-align: center; */ } .rotate span{ display: inline-table !important; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl !important; transform: rotate(180deg); white-space: nowrap; background: #1B3E6F; padding: 15px 12px; font-weight: bold; font-size: 12px; color:#fff; /* border-bottom-left-radius: 2px; */ border-top-left-radius: 2px; } .rotate i{ margin-right: 3px; margin-top: 9px; font-size: 15px; } .rotate span:first-child{ margin-bottom: 0; } .rotate a:hover{ text-decoration: none; } #board-paper svg{ top: 70px; left: 0; } .componentsList tspan{ /* width:30px !important; */ font: normal 13px sans-serif; fill: #1B3E6F !important; overflow-wrap: break-word; } #board-paper #name tspan{ /* fill: green; */ text-align: center; } tspan#type{ text-align: center; } /*ACTIONS & COMPONENTS MENU*/ .input-search-controller{ height: 40px; padding-left: 42px; background: url(src/assets/img/icon-search-light.svg) #fff 21px center no-repeat; border-radius: 0; border: 0; border-bottom: solid 1px #D7E7F9; color: #1B3E6F; font-size: 13px; } .input-search-controller::placeholder{ color: #D0D7E4; font-size: 11px; } .input-search-controller:focus{ background-color: #fff !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); text-shadow: none; border-color: #DEE8F3; } .componentsList p{ margin-bottom: 0; padding-left: 30px; background-position: left center; background-repeat: no-repeat; } p.compType-1{ background-image: url(/assets/img/icon-comType1-sm.svg); } p.compType-2{ background-image: url(/assets/img/icon-comType2-sm.svg); } p.compType-3{ background-image: url(/assets/img/icon-comType3-sm.svg); } p.compType-4{ background-image: url(/assets/img/icon-comType4-sm.svg); } /*Actions Wrapper*/ .actions-wrapper{ position: absolute; width: 100%; top: 0; } .actions-container{ width: 92%; margin: 0 auto; background: red; } .controllerSidebar{ width: 320px; padding: 0; overflow: hidden !important; background: #F4F9FE; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .10); } .helpBox{ position : absolute; bottom : 0; width: 100%; height : 40px; margin-top : 24px; padding-left: 20px; background: #fff; border-top: solid 1px #C1CDDD; font-size: 13px; line-height: 40px; color: #0070F4; } .helpBox .icon-info{ margin-left: 0; margin-right: 10px; } .helpBox .icon-info::before{ color: #0070F4 !important; } .controllerSidebar .row, .controllerSidebar .col{ margin: 0; padding: 0; } .controllerSidebar h1{ margin-bottom: 15px; padding: 12px 0 12px 12px; background: #fff; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #C3CDDB; } .controllerSidebar b{ margin-left: 12px; margin-bottom: 9px; font-size: 12px; color: #C3CDDB; } .actionBtns .btn{ margin: 0px 15px 16px -90px; /* padding: 9px 20px; */ border-radius: 0px; font-size: 14px; font-weight: bold; /* outline: 0 !important; */ float: left; } .new-action, .new-action:hover{ margin: 9px 0 4px 18px; padding: 6px; font-size: 13px; font-weight: bold; color: #1B3E6F; } .new-action:hover{ background: #D7E7F9; } .componentsList{ margin-top: 16px; padding: 0 20px 10px; } .componentsList{ padding-bottom: 0; /* height: calc( 100vh - 218px)!important; overflow: scroll;*/ background: #F4F9FE !important; } .custom-control.custom-checkbox:hover, .custom-control-label:hover{ cursor: pointer; } .custom-control{ height: 40px; font-size: 14px; line-height: 40px; } .custom-control:hover{ background-color: white; } .actionsList, .componentsList{ height: 65vh !important; overflow-y: auto; } .componentsList .list-group-item{ margin-bottom: 10px; padding-left: 40px; background: #fff; box-shadow: 0 2px 6px rgba(47, 83, 151, .15); border-radius: 2px; } .actionsList .custom-control-label{ width: 100%; padding: 6px; vertical-align: unset; color: #1B3E6F; font-size: 13px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .actionsList .custom-control-label::before, .actionsList .custom-control-label::after{ top: 1.25rem; } .actionsList .custom-control-label p{ color: #C7D0DD; font-size: 12px; } .custom-control-input:checked ~ .custom-control-label{ background-color: #1B3E6F !important; color: #fff; } .inserActionBtns .btn{ border-radius: 15px !important; padding: 6px 20px; font-size: 12px; font-weight: bold; border: 0; } .inserActionBtns .btn:first-child{ background: #1273EB; border: solid 1px #1273EB; color: #fff; } .inserActionBtns .btn:last-child{ background: #fff; border: solid 1px #D9E6F2; color: #C3CDDB; margin-top: 14px; } .controllerSidebar .custom-control label{ margin-bottom: 0; } .controllerSidebar .custom-control i{ margin-right: 9px; } /*Components List*/ .componentsList .list-group-item{ padding-left: 36px; border: 0; font-size: 14px; background: url(src/assets/img/icon-drag.svg) #fff 20px center no-repeat; } /*CANVAS*/ .source-button.editBar{ position: absolute; z-index: 9999999; top: 60px; /* left: 50%; */ } .editBar, .editBar2{ width: calc(100% - 320px); margin: 0 auto 0 320px; height: 45px; padding: 0; padding-right: 20px; background:#F4F9FE; border-bottom: solid 1px #E8EFF8; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .editBar .btn-group, .editBar2 .btn-group{ box-shadow: 0 2px 6px rgba(47, 83, 151, .15); } .editBar .toggoleBtn, .editBar2 .toggoleBtn{ height: 43px; margin-right: 12px; background-color: #fff; background-repeat: no-repeat; background-position: left center; border: 0; color: #1B3E6F; font-size: 10px; border-top-left-radius: 0; border-top-right-radius: 4px; border-bottom-left-radius: 0; border-bottom-right-radius: 4px; } .editBar .toggoleBtn i, .editBar2 .toggoleBtn i{ font-size: 20px; } .editBar .toggoleBtn.active, .editBar2 .toggoleBtn.active{ background-color: #1B3E6F !important; color: #fff; } .viewBtns .topologySource{ background-image: url(src/assets/img/icon-topologyView-active.svg); } .viewBtns .topologyView{ background-image: url(src/assets/img/icon-topologySource.svg); } .card.actionContainer{ margin: 20px 20px 40px 60px; background: transparent; border: 0; } .actionContainer .card-header{ padding: 0; background: transparent; border: 0; } .actionContainer .card-header span{ padding: 12px 20px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: 12px; line-height: 38px; font-weight: bold; color: #1B3E6F; background: #C3CDDB; } .actionContainer .card-body{ min-height: 170px; padding: 15px 20px !important; border: solid 1px #C3CDDB; background: #fff; box-shadow: 0 2px 6px rgba(18, 115, 235, .1); } .actionContainer a{ display: inline-block; width: 230px; height: 130px; margin: 20px; padding: 24px; background: #1B3E6F; color: #fff !important; text-align: center; border-radius: 2px; border: solid 1px #1B3E6F; } .actionContainer a:hover{ cursor: pointer; border: dashed 1px #E9FCC6; }.componentContainer img{ height: 38px; } .componentContainer h2{ margin-top: 9px; font-size: 14px; font-weight: bold; } .componentContainer p{ font-size: 12px; } .functionAttributeSidebar{ width: 440px; padding: 0px; margin-top: 45px; } .functionAttributeSidebar .attributesContainer{ background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } /*ATTRIBUTES SIDE BAR*/ .attributesSideBar{ width: 396px; padding: 0px; margin-top: 50px; } .attributesSideBar .attributesContainer{ background: #fff; border: solid 1px #C1CDDD; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); } .closeBar{ float: left; width: 50%; height: 42px; background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ; border: 0; outline: 0; margin-left: -30px; } .closeBar:focus{ outline: none; } .attributesContainer h1{ margin-bottom: 10px; padding: 12px 0 12px 15px; background: #DEE8F3; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } .attributesContainer h6{ margin-bottom: 10px; padding: 12px 0 12px 15px; background: #DEE8F3; font-size: 12px; font-weight: bold; text-transform: uppercase; color: #1B3E6F; } .actionName{ margin-bottom: 21px; } .attributesContainer label{ color: #1B3E6F; text-transform: uppercase; font-size: 11px; font-weight: bold; } .attributesContainer .form-group{ margin-bottom: 9px; } .attributesContainer .form-control{ border-color: #F0F5FC; border-radius: 2px; box-shadow: 0 2px 6px rgba(47, 83, 151, .1); color: #103D73; font-size: 13px; } .attributesContainer .form-control:focus{ border-color: #66bfff; box-shadow: 0 0 0 4px rgba(0,149,255,0.15); } .attributesContainer .form-control::placeholder{ color: #CFD7E5; } .scrolll{ max-height: 88.75vh; overflow-y: auto; } .accordion > .card{ margin-bottom: 0 !important; border: 0; } .accordion > .card .card-header{ margin: 0; padding: 0; background-color: #F4F9FE; border: 0; border-radius: 0; } .accordion > .card .card-body{ padding-bottom: 10px !important; } .accordion .btn-link{ padding: 0; color: #C3CDDB; font-weight: bold; font-size: 13px; text-transform: uppercase; line-height: 15px; } .accordion .btn-link:hover{ color: #103D73; text-decoration: unset; } .accordion .card-header .btn-link[aria-expanded="true"]:after, .accordion .card-header .btn-link[aria-expanded="false"]:after{ margin-right: 9px; font-family: 'FontAwesome'; float: left; font-weight: normal; font-size: 12px; } .accordion .card-header .btn-link[aria-expanded="true"]:after{ content: "\f078"; } .accordion .card-header .btn-link[aria-expanded="false"]:after{ content: "\f054"; } .btn-addAttribute{ width: 20px; height: 20px; background-image: url(/assets/img/icon-add.svg); background-position: center center; background-repeat: no-repeat; vertical-align: sub; } .btn-addAttribute:hover{ background-image: url(/assets/img/icon-add-hover.svg); } .btn-deleteAttribute{ padding: 5px 10px; background: #FFE6E7; border: solid .5px #FFC9CB; border-radius: 2px; color: #FF6469; font-size: 10px; } /* .source-button{ position: absolute; z-index: 9999999; top: 60px; left: 50%; } */ /*jointjs paper*/ /* #board-paper { position: relative; border: 1px solid gray; display: inline-block; background: transparent; overflow: hidden; } #board-paper svg { background: transparent; } #board-paper svg .link { z-index: 2; } .html-element { position: absolute; background: #F4F9FE; pointer-events: none; -webkit-user-select: none; z-index: 2; } */ .attributesContainer .dropdown-text, .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text{ top: 7px; text-indent: 15px; background: #F4F9FE; border-radius: 5px; border: 0; box-shadow: whitesmoke; color: #1B3E6F; font-weight: bold; font-size: 13px; } .radio-btn{ margin-left: 12px; font-weight: bold; } .function-attribute{ margin-right: -16px; } .trash-span{ margin-left: 150px; font-size:15px } .editBar2{ width: 100%; margin: 0; } .viewBtns .btn{ margin-top: 14px; padding-left: 30px!important; border: 0; font-size: 12px; color: #1B3E6F !important; background-color: #fff !important; background-repeat: no-repeat; background-position: 10px center; } .viewBtns .btn.active{ background-color: #1B3E6F !important; color: #fff !important; } .joint-paper{ width: 94% !important; height: 100vh !important; margin: 0 auto !important; } ul.templateLegend{ margin: 0; } .templateLegend li{ float: left; list-style: none; font-size: 11px; } .templateLegend li:not(:last-child){ margin-right: 24px; } .templateLegend .requirement i{ color: #FF6B6B; } .templateLegend .capability i{ color: #0ABDE3; } ul.editor{ margin-right: -40px; margin-top: 16px; } .editor li{ list-style: none; } .roundBtn .btn{ width: 15px; height: 15px; padding: 0px; border-radius: 15px; font-size: 10px; text-align: center; background-color:rgb(215, 234, 250); color: white; margin: 5px; }