html, body{ height: 100%; } body{ background: #FAFAFA !important; /* background-image: linear-gradient(-45deg, #000 10%, #fff 0); background-size: 6px 6px; */ margin: 0; /* font-family: 'Nunito' !important; */ font-family: Arial, Helvetica, sans-serif !important; color: #1B3E6F !important; font-size: 14px; } *:focus{ outline: none; } :hover{ transition: 0.3s !important; } /*Bootstrap*/ .btn-outline-danger{ background: #fff !important; border: solid 1px #ECEDF2 !important; color: #FF6469 !important; } .btn:disabled:hover{ cursor: default; } .custom-control-label::before{ border: solid 1px #C3CDDB !important; border-radius: 0 !important; } .custom-control-input:checked ~ .custom-control-label::before{ background: #1B3E6F !important; } .custom-radio .custom-control-label::before{ border-radius: 50% !important; } .custom-control-label{ font-size: 13px; line-height: 24px; } .form-check-input + span{ display: inline-flex !important; } .form-check-input + span i{ margin-right: 9px !important; } .form-control:focus{ background-color: #F4F9FE !important; } .label-input input[type="radio"]{ width: 14px !important; height: 14px; } .card-header .btn[aria-expanded="true"], .card-header .btn[aria-expanded="false"]{ padding-left: 25px !important; padding-right: 25px !important; border-radius: 0 !important; } .card-header .btn[aria-expanded="true"]{ background-color:#F4F9FE; } .card-header .btn[aria-expanded="false"]{ background-color:#fff; } /*NGX-TOASTR*/ .ngx-toastr{ border-radius: 2px !important; color: #1B3E6F !important; font-size: 13px !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; } .toast-success{ border-left: solid 5px #66BB00 !important; background: url(/assets/img/icon-required-yes.svg) 12px center #fff no-repeat !important; } .toast-error{ border-left: solid 5px #FF6469 !important; background: url(/assets/img/icon-error.svg) 12px center #fff no-repeat !important; background-size: 18px !important; } .toast-info{ border-left: solid 5px #1273EB !important; background: url(/assets/img/icon-info-color.svg) 12px center #fff no-repeat !important; } /*ICONS*/ .icon-menuDots{ font-size: 3px !important; color: #1B3E6F; vertical-align: middle; } /*Components*/ /* Menu Styles */ .primary-nav{ /* left: 0; */ position: fixed; z-index: 999; } .menu{ position: relative; } .menu ul{ margin: 0; padding: 0; list-style: none; } .open-panel{ border: none; background-color:#fff; padding: 0; } .logo-icon{ background: #fff; position: relative; display: block; text-align: center; padding: 16px 0; width: 50px; height: 60px; left: 0; top: 0; z-index: 1000; cursor: pointer; } .primary-nav .menu li{ position: relative; } .menu .icon{ position: absolute; top: 12px; right: 10px; pointer-events: none; width: 30px; height: 30px; color: #fff; text-align: center; } .menu .icon .fa{ vertical-align: middle; } .menu, .menu a, .menu a:visited{ color: #fff; text-decoration: none!important; position: relative; } .menu a{ display: block; white-space: nowrap; padding: 10px 1em; font-size: 12px; font-weight: bold; height: 52px; line-height: 30px; } .menu a:hover{ color: #fff; } .menu-dropdown li .icon{ text-align: center; font-size: 16px; color: #fff; line-height: 33px; } .menu-dropdown a{ cursor: pointer; } .menu-dropdown li.active .icon{ color: #fff; background: #265699; border-radius: 50%; } .menu-dropdown li:hover{ background: #172B4D; } .menu label{ margin-bottom: 0; display: block; } .menu label:hover{ cursor: pointer; } .menu input[type="checkbox"]{ display: none; } input#menu[type="checkbox"]{ display: none; } .sub-menu-dropdown{ display: none; } .new-wrapper{ position: absolute; left: 50px; width: calc(100% - 50px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } #menu:checked + ul.menu-dropdown{ left: 0; -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); animation: all .45s cubic-bezier(0.77, 0, 0.175, 1); } .sub-menu-checkbox:checked + ul.sub-menu-dropdown{ display: block!important; -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1); border-top: solid 2px #1B3E6F; } .openNav .new-wrapper{ position: absolute; transform: translate3d(200px, 0, 0); width: calc(100% - 250px); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } .downarrow{ background: transparent; position: absolute; right: 50px; top: 12px; color: #fff; width: 24px; height: 24px; text-align: center; display: block; } .downarrow:hover{ color: #fff; } .menu{ position: absolute; display: block; left: -200px; top: 0; width: 250px; height: 100vh; transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1); background-color: #1B3E6F; z-index: 999; } .menu-dropdown{ top: 0; overflow-y: auto; } .overflow-container{ position: relative; height: calc(100vh - 50px)!important; overflow-y: auto; border-top: 60px solid #fff; z-index: -1; display:block; } .menu .logotype{ position: absolute !important; top: 16px; left: 55px; display: block; } /* .sub-menu-dropdown{ background-color: #333; } */ .menu:hover{ position: absolute; left: 0; top: 0; } .openNav .menu:hover{ position: absolute; left: -200px; top: 60px; } .openNav .menu{ top: 60px; transform: translate3d(200px, 0, 0); transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1); } @-webkit-keyframes grow{ 0% { display: none; opacity: 0; } 50% { display: block; opacity: 0.5; } 100% { opacity: 1; } } @keyframes grow{ 0% { display: none; opacity: 0; } 50% { display: block; opacity: 0.5; } 100% { opacity: 1 } } /*User Profile*/ .userProfile .dropdown{ width: 99.5%; } .userProfile .dropdown:hover{ background: #172B4D !important; } .userProfile .dropdown-text{ background: transparent; border: 0; box-shadow: none; font-size: 13px; line-height: 40px; } .import-container-all{ width: 100%; padding-bottom: 20px; } .import-container{ width: 100%; background: #E7F1FC; margin-bottom: 20px; padding: 9px 18px; border: solid 1px #EEF4F9; } .import-container-input{ width: 40%; position: relative; display: inline-block; margin-right: 20px; } .import-container-input input{ width: 100%; height: 36px; padding: 5px 40px 5px 12px; border: 0px; border-radius: 2px; -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75); font-size: 13px; color: #172B4D; } .import-container-input input:focus{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18); } .import-container-input input::placeholder{ color: #959DA8 !important; } .enter-link{ position: absolute; right: 12px; font-size: 20px; top: 6px; color: #1273EB; } .enter-link:hover{ text-decoration: none; } .import-container-input input::placeholder{ color: #CFD7E5; } .import-container-span{ font-size: 12px; } .import-container-all .accordion .card-header{ padding: 0 !important; background: #fff !important; border-bottom: 0 !important; } .import-container-all .collapse.show{ border-top: solid 1px #ECEDF2; } .import-container-all .card-header .accordion-delete{ display: none; position: absolute; right: 15px; background: #F4F9FE; } .import-container-all .card-header:hover .accordion-delete{ display: inline; } .accordion-delete{ color: #FF6469; font-size: 18px; margin-top: 11px; } .accordion-delete:hover{ text-decoration: none; } /* .userProfile .dropdown-toggle{ height: 40px; } */ .userProfile .dropdown-toggle:hover ~ .dropdown-text, .userProfile .dropdown-toggle:focus ~ .dropdown-text{ background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } .userProfile .dropdown-text::after { right: 14px; top: 8px; width: 24px; height: 24px; background: url(/assets/img/img-userProfile.png) center center no-repeat; } .packagesFilter .custom-checkbox{ margin-left: 8px; } .packagesFilter .custom-control-label{ line-height: 28px !important; font-size: 14px !important; text-indent: 6px !important; } .packagesFilter .reset-filter{ margin-top: 6px; padding-top: 6px; padding-left: 9px; border-top: solid 1px #ECEDF2; font-size: 13px; } .packagesFilter .reset-filter a:hover{ background: none !important; text-decoration: none; color: #1B3E6F; } .tags-filter-list{ max-height: 260px; overflow-y: auto; } /**Packages Sort**/ .sort-packages{ font-size: 12px; font-weight: bold; color: #C3CDDB; } .sort-packages .dropdown{ width: 88px; } .sort-packages .dropdown-text{ background: transparent; border: 0; box-shadow: none; color: #1B3E6F; } .sort-packages .dropdown-text::after{ right: 18px !important; border: solid !important; border-color: #1B3E6F transparent transparent transparent !important; } .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ top: 12px !important; border-color: transparent transparent #1B3E6F transparent !important; } .sort-packages .dropdown-toggle:hover ~ .dropdown-text, .sort-packages .dropdown-toggle:focus ~ .dropdown-text{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); background: #fff; } .sort-packages .dropdown-content:hover, .sort-packages .dropdown-toggle:focus ~ .dropdown-content{ top: 30px; } .sort-packages .dropdown-content{ width: 88px; padding: 6px 0; background: #fff; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } .sort-packages .dropdown-content a{ color: #1B3E6F; font-size: 12px; } .sort-packages .dropdown-content a:hover{ color: #1B3E6F; background-color: #F4F9FE; text-decoration: unset; cursor: pointer; } /**Pagination**/ .page-item{ margin: 3px 2px 0; } .page-item .page-link, .page-item.disabled .page-link{ padding: 5px 9px; background: transparent !important; border: 0; color: #1B3E6F !important; font-size: 13px; font-weight: bold; } .page-item.active .page-link, .page-link:hover{ color: #1B3E6F !important; background-color: #fff !important; border-radius: 100% !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); outline: 0; } /**Packages Cards***/ /***Package Info Card***/ .packages-card .card{ width: 100%; margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } .packages-card .card:hover .packageName{ color: #1273EB !important; } .packages-card .card-title{ margin-bottom: 0 !important; font-size: 13px; font-weight: bold; color: #1B3E6F; } .packages-card .card-title span{ color: #1B3E6F; font-size: 11px; vertical-align: bottom; } .packages-card p{ font-size: 12px; color: #D0D7E4; } .packages-card p.package-desc{ margin-top: 6px; font-size: 13px; text-align: left; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #1B3E6F; } .packages-card p.package-desc:hover{ color: #1B3E6F !important; text-decoration: underline; } .packages-card [data-tooltip]::before, .packages-card .tooltip::before{ border: 0 !important; } .packages-card .tooltip:after, .packages-card [data-tooltip]:after { padding: 9px; font-size: 11px; background: #fff; border: solid 1px #E6EDF5; box-shadow: 0 0 12 rgba(0,0,0,0.8); border-radius: 3px; } /***Add Package Card***/ .addPaackage-card{ padding: 10px 0; background: #F4F9FE !important; border: solid 1px #D7E7F9 !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.18) !important; } .addPaackage-card .card-body img{ width: 30%; vertical-align: text-top; } .addPaackage-card a{ margin: 0; padding: 7px 15px; font-weight: bold; font-size: 12px; border-radius: 18px; border-width: 0px; border-style: solid; background-position: 15px center; background-repeat: no-repeat; text-align: left; } .addPaackage-card a:hover{ text-decoration: unset; } .btn-create-package i, .btn-import-package i{ margin-right: 9px; font-size: 14px; vertical-align: middle; } .btn-create-package, .btn-create-package:hover{ background-color: #1B3E6F; color: #fff; } .btn-import-package, .btn-import-package:hover{ background: #C3CDDB; color: #1B3E6F; } /***Actions Menu***/ .packages-card .dropdown{ width: auto; float: right; } .packages-card .dropdown-text{ background: transparent; border: 0; box-shadow: none; text-indent: 0; line-height: unset; border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: .6; } .packages-card .dropdown-text:hover{ opacity: 1; } .packages-card .dropdown-text::after{ display: none; } .packages-card .dropdown-text img{ padding: 9px 7px; } .packages-card .dropdown-content{ right: 0; width: 120px; padding: 6px 0; border: 0; border-radius: 50%; } /* .userProfile .dropdown-content{ bottom: 40px !important; top: unset !important; width: 100%; } */ /**Tab Nav**/ .nav-tabs{ border-bottom-color: #ECEDF2 !important; } .nav-link{ padding: 15px 20px 15px 20px !important; text-transform: uppercase !important; font-size: 12px; font-weight: bold; color: #C3CDDB !important; border: none !important; } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{ border: 0 !important; transition: 0.3s; } .nav-tabs .nav-link:hover{ color: #1B3E6F !important; } .nav-tabs .nav-link.active{ color: #1B3E6F !important; background: transparent !important; border: 0 !important; border-bottom: solid 2px #1B3E6F !important; } .nav-tabs .nav-link::before{ content: "|"; padding-right: 20px !important; color: #C3CDDB; font-weight: normal; position: absolute; left: 0px; } .nav-tabs .nav-link:first-child::before{ content: none; } .nav-tabs .nav-link:first-child{ padding-left: 20px !important; } .nav-item.nav-link.complete, .nav-item.active.complete{ padding: 15px 20px 15px 44px !important; background: url(/assets/img/icon-required-yes.svg) 20px center no-repeat !important; } .tabs-no-content{ font-size: 13px; font-weight: bold; } /**Sliding Search Input**/ .searchBox{ position: absolute; top: 0%; right: 0%; transform: translate(0%,-0%); height: 40px; } .searchButton{ float: right; margin-top: 18px; padding-left: 0 !important; padding-right: 24px !important; width: 60px; height: 20px; background: url(../src/assets/img/icon-search.svg) center center no-repeat; background-size: 24%; border: 0 !important; border-right: solid 1px #1B3E6F !important; display: flex; justify-content: center; align-items: center; transition: 0.4s; } .searchBox:hover > .searchInput{ width: 240px; border-bottom: solid 1px #C3CDDB; } .searchBox:hover > .searchInput::placeholder{ color: #C3CDDB; } .searchBox > .searchInput:focus{ border-bottom: solid 1px #1B3E6F !important; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); } .searchBox:hover > .searchButton{ color: #1B3E6F; } .searchInput{ border: none; background: none; outline: none; float: left; padding: 0; color: #1B3E6F; font-size: 12px; transition: 0.4s; line-height: 49px; width: 0px; } .searchInput::placeholder{ color: #BABBC3; } .searchBox-expanded{ width: 240px; border-bottom: solid 1px #C3CDDB; } /**Drop Down Menu**/ .dropdown{ position: relative; display: inline-block; text-align: left; width: 132px; z-index: 200; } .dropdown-text{ cursor: pointer; position: relative; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); width: 100%; } .dropdown-text:after{ position: absolute; right: 6px; top: 15px; content: ''; width: 0px; height: 0px; border-style: solid; /* border-width: 5px 4px 0 4px; border-color: #555 transparent transparent transparent; */ border:0px } .dropdown-toggle{ font-size: 0; z-index: 1; cursor: pointer; position: absolute; top: 0; border: none; padding: 0; margin: 0 0 0 1px; background: transparent; text-indent: -10px; height: 34px; width: 100%; } .dropdown-toggle:focus{ outline: 0; } .dropdown-content{ position: absolute; top: 32px; width: 140px; margin: 0; padding: 0; opacity: 0; visibility:hidden; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; list-style-type: none; border-radius: 3px; text-indent: 10px; line-height: 28px; background-color: #eee; border: 1px solid #ccc; } .dropdown-content a{ display: block; } .dropdown-content a:hover{ background: #e8e8e8; } .dropdown-toggle:hover ~ .dropdown-text, .dropdown-toggle:focus ~ .dropdown-text{ background-color: #e8e8e8; } .dropdown-toggle:focus ~ .dropdown-text{ box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); z-index: 2; } .dropdown-toggle:focus ~ .dropdown-text:after{ border-width: 0 4px 5px 4px; border-color: transparent transparent #555 transparent; } .dropdown-content:hover, .dropdown-toggle:focus ~ .dropdown-content{ opacity: 1; visibility:visible; top: 42px; } /**Card**/ /* Hover Shadow */ @keyframes hover { 50% { transform: translateY(-3px); } 100% { transform: translateY(-6px); } } @keyframes card { 0% { transform: translateY(6px); opacity: .3; } 50% { transform: translateY(3px); opacity: .8; } 100% { transform: translateY(6px); opacity: .3; } } .card { /* display: inline-block; position: relative; transition-duration: 0.2s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); */ margin-bottom: 25px !important; box-shadow: 0 0 1px rgba(0, 0, 0, 0); } /* .card:before { pointer-events: none; position: absolute; z-index: -1; content: ''; top: 100%; left: 5%; height: 10px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 70%); transition-duration: 0.2s; transition-property: transform opacity; } */ /* .card:hover { transform: translateY(-3px); animation-name: hover; animation-duration: 1s; animation-delay: 0.2s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: alternate; } .card:hover:before { opacity: .4; transform: translateY(3px); animation-name: card; animation-duration: 1s; animation-delay: .2s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: alternate; } */ .card-body{ padding: 10px 20px 20px !important; } /*Main Container*/ .main-container{ padding: 0 !important; } /*Profile & Help Area*/ .profile-help .navbar{ padding: 0 !important; } .profile-help .dropdown{ width: 50px; } .profile-help .dropdown-text{ border: 0; background: transparent; box-shadow: none; font-size: 13px; /* text-indent: -999px; */ } .profile-help .dropdown-text img{ width: 33px; height: 33px; border: solid 1px #fff; object-fit: cover; border-radius: 50%; } .profile-help .dropdown-toggle:hover ~ .dropdown-text{ background: #fff; } .profile-help .dropdown-toggle:hover ~ .dropdown-text img{ box-shadow: 0 2px 6px 6px rgba(47, 83, 151, .17); } .profile-help .dropdown-content{ right: 0; top: 47px; padding: 4px 0; background-color: #fff; border: 1px solid #ECEDF2; border-radius: 2px; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12) !important; } .profile-help .dropdown-content li:hover{ background-color: #ECEDF2; } .profile-help .dropdown-content a{ padding: 3px; color: #1B3E6F; font-size: 13px; } .profile-help .dropdown-content a:hover{ text-decoration: none; background-color: transparent; } .userMenu.dropdown{ margin-left: 9px; border-left: solid 1px #ECEDF2; } .helpMenu.dropdown{ width: 32px !important; } .helpMenu .dropdown-text{ text-indent: unset; text-align: center; } .helpMenu li:hover, .helpMenu li:hover i, .helpMenu li:hover p{ cursor: pointer; } .helpMenu li:not(:last-child){ margin-bottom: 9px; } .helpMenu .dropdown-text i{ text-align: center; font-size: 19px; color: #C3CDDB; vertical-align: middle; } .helpMenu:hover .dropdown-text i{ color: #1B3E6F; } .helpMenu .dropdown-content{ padding: 6px; } .helpMenu .dropdown-content a{ padding: 5px 12px !important; text-align: left; text-indent: 0; font-size: 14px; line-height: 22px; } .helpMenu .dropdown-content p{ display: inline; line-height: 15px; font-weight: bold; } .helpMenu .dropdown-content p:hover{ cursor: pointer; } .helpMenu .dropdown-content p label{ display: inline; } .helpMenu .dropdown-content p input{ display: none; } .helpMenu .dropdown-content span{ display: inline-block; padding-left: 18px; font-size: 13px; color: #C1CDDD; font-weight: normal; } .helpMenu .dropdown-toggle:focus ~ .dropdown-text{ background-color: #F4F9FE; border-radius: 50%; } .helpMenu .dropdown-content{ width: 262px; } .help-btn{ border-right: solid 1px #ECEDF2; } .help-btn .nav-link{ padding: 7px 8px 0 !important; } .help-btn i{ font-size: 19px; color: #C3CDDB; } .help-btn a:hover i{ color: #1B3E6F; } .header-button-save button{ border-radius: 50px; } /*Page Title*/ .page-title{ padding: 20px 30px; background:#fff; border-left: solid 1px #FAFAFA; margin-bottom: 21px; -webkit-box-shadow: 0 4px 10px 0 #eef0f5; box-shadow: 0 4px 10px 0 #eef0f5; position: relative; z-index: 300; /* position: fixed; width: calc(100% - 50px); */ } .page-title h2{ font-size: 16px; font-weight: bold; padding-top: 1px; } .page-title h2 span{ color: #C3CDDB; font-size: 14px; } /*Content*/ .body-container{ padding: 0 30px !important; } .body-container > .container{ padding: 0; } .search-filter-col{ padding-right: 0 !important; border-bottom: solid 1px #ECEDF2 !important; } /**Packages Filter**/ .packagesFilter{ margin-top: 12px; margin-bottom: 7px; z-index: 220 !important; } .packagesFilter .dropdown-toggle{ height: 36px !important; } .packagesFilter .dropdown-toggle:focus ~ .dropdown-text::after{ border-color: transparent transparent #1B3E6F transparent; } .packagesFilter .dropdown-text{ background: transparent; border: 0; box-shadow: none; text-indent: 14px; line-height: 30px; font-size: 12px; } .packagesFilter .dropdown-text::after{ right: 12px; border: solid !important; border-width: 5px 4px 0 4px !important; border-color: #1B3E6F transparent transparent transparent !important; } .packagesFilter .dropdown-toggle:hover ~ .dropdown-text, .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ background-color: transparent; box-shadow: none; border-radius: 0; } .packagesFilter .dropdown-toggle:focus ~ .dropdown-text{ background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } .packagesFilter .dropdown-text::after{ top: 12px; } .packagesFilter .dropdown-content{ padding: 6px 0; background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); border: 0; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .packagesFilter .dropdown-content li:hover .custom-checkbox{ cursor: pointer; } .packagesFilter .dropdown-content:hover, .packagesFilter .dropdown-toggle:focus ~ .dropdown-content{ top: 30px; } .packagesFilter .form-control{ padding: 12px 9px 12px 38px !important; border: 0 !important; border-bottom: solid 1px #D7E7F9 !important; background: url(../src/assets/img/icon-search.svg) 15px center no-repeat; background-size: 4%; border-radius: 0 !important; color: #1B3E6F; font-size: 13px; } .packagesFilter .form-control::placeholder{ color: #BABBC3; } .packagesFilter .form-control:focus{ box-shadow: none !important; border-bottom: solid 1px #1B3E6F !important; } .packagesFilter .custom-checkbox{ margin-left: 8px; } .packagesFilter .custom-control-input{ left: 10px; } .packagesFilter .custom-control-label{ line-height: 28px !important; font-size: 13px !important; text-indent: 6px !important; } .fillteredTags{ margin-left: 3px; padding: 3px 3px; background: #C3CDDB; color: #1B3E6F; font-weight: bold; border-radius: 4px; } /**Packages Sort**/ .sort-packages{ font-size: 12px; font-weight: bold; color: #C3CDDB; } .sort-packages .dropdown{ width: 88px; } .sort-packages .dropdown-text{ background: transparent; border: 0; box-shadow: none; color: #1B3E6F; } .sort-packages .dropdown-text::after{ border-color: #1B3E6F transparent transparent transparent; } .sort-packages .dropdown-toggle:focus ~ .dropdown-text::after{ border-color: transparent transparent #1B3E6F transparent; } .sort-packages .dropdown-toggle:hover ~ .dropdown-text, .sort-packages .dropdown-toggle:focus ~ .dropdown-text{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); background: #fff; } .sort-packages .dropdown-content:hover, .sort-packages .dropdown-toggle:focus ~ .dropdown-content{ top: 30px; } .sort-packages .dropdown-content{ width: 88px; padding: 6px 0; background: #fff; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15); } .sort-packages .dropdown-content a{ color: #1B3E6F; font-size: 12px; } .sort-packages .dropdown-content a:hover{ background-color: #F4F9FE; text-decoration: unset; } /**Pagination**/ .page-item .page-link, .page-item.disabled .page-link{ background: transparent !important; border: 0; color: #1B3E6F !important; font-size: 14px; } .page-link:hover{ color: #1B3E6F !important; background-color: #fff !important; border-radius: 100%; transition: 0.3s; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12); } .page-item.disabled{ opacity: .3; } /**Packages Cards***/ /***Package Info Card***/ .packages-card .card{ margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.12); } .packages-card .card:hover{ box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17); transition: all 0.5s ease; cursor: pointer; } .packages-card .card:hover .card-title, .packages-card .card:hover .card-title span{ color: #1273EB !important; } .packages-card .card-title{ margin-bottom: 0 !important; font-size: 14px; font-weight: bold; } .packages-card .card-title .packageName{ margin-bottom: 0; display: inline-block; width: auto; max-width: 64%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; vertical-align: bottom; color: #1B3E6F; } .packages-card .card-title:hover, .packages-card .card-title:hover .packageName{ text-decoration: none; color: #1273EB; } .packages-card .card-body{ padding-bottom: 0 !important; } .packages-card .card-footer .col{ padding-left: 3px !important; text-align: left; } /***Add Package Card***/ .addPaackage-card{ background: #F4F9FE !important; border: solid 1px #D7E7F9 !important; } .addPaackage-card:hover{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1) !important; } .addPaackage-card a:hover{ text-decoration: unset; } .addPaackage-card .card-footer .col{ padding: 0; text-align: right; } .addPaackage-card .card-footer .col:last-child{ text-align: left; } .btn-create-package, .btn-import-package{ width: auto; } .btn-create-package{ margin-bottom: 6px !important; } .btn-import-package{ margin-bottom: 15px !important; } .btn-create-package, .btn-create-package:hover{ background-color: #1B3E6F; border-color: #1B3E6F; color: #fff; } .btn-import-package, .btn-import-package:hover{ color: #1B3E6F; } /***Actions Menu***/ .packages-card .dropdown{ width: auto; float: right; } .packages-card .dropdown-text{ background: transparent; border: 0; box-shadow: none; text-indent: 0; line-height: unset; border-bottom-left-radius: 0; border-bottom-right-radius: 0; opacity: .6; } .packages-card .dropdown-text::after{ display: none; } .packages-card .dropdown-text img{ padding: 9px 7px; } .packages-card .dropdown-content{ right: 0; width: 120px; padding: 6px 0; border: 0; text-indent: 0; border-radius: 4px; border-top-right-radius: 0; background: #1B3E6F; } .packages-card .dropdown-content a{ padding-left: 12px; color: #fff; font-size: 12px; /* background-position: 14px center; background-size: 10%; background-repeat: no-repeat; */ } .packages-card .dropdown-content a i{ margin-right: 4px; } .packages-card .dropdown-content a:hover{ background-color: #172B4D; text-decoration: unset; color: #fff; } .packages-card .dropdown-content:hover, .packages-card .dropdown-toggle:focus ~ .dropdown-content{ top: 22px; } .packages-card .dropdown-toggle:focus ~ .dropdown-text .icon-menuDots{ color: #D0D7E4; } .packages-card .dropdown-toggle:hover ~ .dropdown-text{ background: transparent; opacity: 1; } .packages-card .dropdown-toggle:focus ~ .dropdown-text{ width: 27px; text-align: center; opacity: 1; background: #1B3E6F; box-shadow: none; } .package-version::before{ content: "|"; margin-left: 8px; margin-right: 6px; vertical-align: text-bottom; } /***Contributers***/ ul.package-contributers{ margin-bottom: 9px !important; padding-left: 0 !important; } .package-contributers li{ list-style: none; display: inline-block; } .package-contributers li{ margin-left: -5px; } .package-contributers li:first-child{ margin-left: 0; } .package-contributers li:last-child{ margin-left: 9px; } .package-modifier, .package-contributers button{ height: 20px !important; padding: 0 !important; border-radius: 100%; border: 0 !important; /*Hover Effect*/ -webkit-transition: box-shadow 0.2s ease; -moz-transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: inline-block; position: relative; } .package-modifier:before, .package-contributers button:before{ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 50%; bottom: 0; box-shadow: 0 0 0 2px #fff; content: ""; left: 0; position: absolute; right: 0; top: 0; } .package-modifier:hover, .package-contributers button:hover{ box-shadow: 0 0 0 2px #D7E7F9; text-decoration: none; } .package-modifier:hover:before, .package-contributers button:hover:before{ -webkit-transform: scale(0.925); -moz-transform: scale(0.925); -ms-transform: scale(0.925); -o-transform: scale(0.925); transform: scale(0.925); box-shadow: 0 0 0 1px #D7E7F9; opacity: 0.5; } .package-modifier img, .package-contributers button img{ width: 20px; height: 20px; object-fit: cover; vertical-align: top; border-radius: 100%; } .package-contributers a{ font-size: 12px; color: #1273EB; } .package-contributers a:hover{ text-decoration: unset; } /***Package Footer***/ .packages-card .card-footer{ padding: 0 !important; background: transparent !important; border-top-color: #F7F6F6 !important; } .packages-card .card-footer .col{ text-align: center; } .packages-card .card-footer .col:first-child{ border-right: solid 1px #F7F6F6; } .packages-card .card-footer .btn{ padding: 10px 0 10px 0 !important; background-color: transparent !important; color: #1B3E6F !important; border: 0; font-size: 13px; text-align: left; opacity: .4; } .packages-card .card-footer .btn:hover{ opacity: 1; } .packages-card .card-footer i{ margin-right: 6px; } .icon-deployed-active, .icon-deploy-inactive{ margin-right: 9px; display: inline; background-image: url(/assets/img/icon-deploy-active.svg); background-position: center center; background-repeat: no-repeat; vertical-align: baseline; } .icon-deploy-inactive{ background-image: url(/assets/img/icon-deploy-inactive.svg); } /*CREATE NEW ACTION MODAL*/ .createActionModal .modal-dialog{ max-width: 85%; } .createActionModal .modal-header{ padding-top: 21px !important; padding-bottom: 0 !important; border-bottom: 0; } .createActionModal .close{ margin: 0 !important; padding: 6px 13px 10px !important; width: auto; opacity: 1 !important; border-radius: 100%; } .createActionModal .close:hover{ background-color: #E0E8F2; } .createActionModal .icon-action-close{ font-size: 14px; font-weight: bold; } .createActionModal .modal-body{ padding-top: 0 !important; padding-bottom: 10px !important; } .createActionModal .modal-body .carousel-item{ padding-left: 20px; padding-right: 10px; } @keyframes fadeInScale { 0% { opacity: 0; -webkit-transform: scale(0) translateY(50%); transform: scale(0) translateY(50%); } 90% { -webkit-transform: scale(1.05); transform: scale(1.05); } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } } .card.actionType{ margin-bottom: 25px !important; padding: 220px 25px 50px; box-shadow: none; border-radius: 0; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .card.actionType:hover{ box-shadow: 0 10px 20px 0 rgba(27,62,111,.1); transition: 0.3s !important; } .createActionModal h3.mainHead{ text-transform: uppercase; margin-bottom: 6px; font-size: 14px; font-weight: bold; text-align: center; color: #C1CDDD; } .createActionModal h1{ margin-bottom: 21px; font-size: 22px; font-weight: bold; text-align: center; } .createActionModal .carousel-inner{ height: 510px; } .createActionModal .skip-btn{ float: unset; width: auto; color: #1273EB; font-weight: normal !important; font-size: 13px; border: solid 1px #F1F2FA; border-radius: 2px; } .createActionModal .skip-btn:hover{ background: #1273EB; color: #fff; box-shadow: 0 10px 20px 0 rgba(27,62,111,.1); } .actionType, .actionType:hover{ text-align: center; line-height: 40px; background-position: center 40px; background-repeat: no-repeat; background-size: 144px 172px; } .actionType h3, .actionType p{ margin: 0; } .actionType h3{ text-transform: uppercase; font-size: 13px; font-weight: bold; } .actionType p{ font-size: 13px !important; line-height: 24px; } .actionType .btn, .actionType:hover .btn{ opacity: 0; position: absolute; bottom: 0; left: 30% !important; margin-bottom: 26px; width: 100px; height: 30px; line-height: 15px; background: #1B3E6F; color: #fff; font-size: 12px; font-weight: bold; border-radius: 15px !important; -webkit-transform: translateY(-20%); transform: translateY(-20%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .actionType:hover .btn{ opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .actionType.custom{ background-image: url(/assets/img/icon-action-custom.svg); } .actionType.custom:hover{ cursor: pointer; background-image: url(/assets/img/icon-action-custom-hover.svg); } .actionType.default{ background-image: url(/assets/img/icon-action-default.svg); } .actionType.default:hover{ cursor: pointer; background-image: url(/assets/img/icon-action-default-hover.svg); } .actionType.recent{ background-image: url(/assets/img/icon-action-recent.svg); } .actionType.recent:hover{ cursor: pointer; background-image: url(/assets/img/icon-action-recent-hover.svg); } .actionType.import{ background-image: url(/assets/img/icon-action-import.svg); } .actionType.import:hover{ cursor: pointer; background-image: url(/assets/img/icon-action-import-hover.svg); } .createActionModal .carousel-indicators{ margin: 0; } .createActionModal .carousel-indicators li{ margin: 0; padding: 0; text-indent: 0; border: 0; } .createActionModal .back{ position: fixed !important; top: 83px; width: auto; padding:0 !important; } .actionFormWrapper{ width: 60%; margin: 0 auto; } .createActionModal .form-control.customAction{ width: 55%; margin: 70px auto; padding-left: 0; border-radius: 0; border: 0; border-bottom: solid 1px #E0E8F2; color: #1B3E6F !important; font-size: 14px; } .createActionModal .form-control:focus{ border-bottom: solid 1px #1B3E6F; background: transparent !important; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); text-shadow: none; } .createActionModal .form-control::placeholder{ color: #C3CDDB; } .createActionModal .submit, .createActionModal .submit:hover{ float: unset; width: 100px; height: 30px; background: #1B3E6F; color: #fff; font-size: 12px; font-weight: bold; border-radius: 15px !important; } .actionlabel{ margin-right: 2px; color: #C3CDDB; font-size: 11px; font-weight: bold; } .form-control.searchInput, .form-control.searchInput:focus{ float: right; width: 250px !important; height: 30px !important; padding-left: 32px !important; border: solid 1px #E0E8F2 !important; border-radius: 2px !important; background: url(../src/assets/img/icon-search-light.svg) 9px center no-repeat !important; font-size: 13px !important; color: #1B3E6F; } .actionsListScroll{ height: 228px; max-height: 228px; overflow: auto; } .createActionModal .actionName{ margin-bottom: 15px; padding: 9px 18px; box-shadow: 0 2px 6px rgba(47,83,151,0.15); } .createActionModal p.selectedActions{ margin-top: 20px; margin-bottom: 10px; color: #8D9FB7; font-size: 13px; } .createActionModal .sort-packages .dropdown{ width: 60%; } .createActionModal .sort-packages .dropdown-text::after { right: 6px; } .createActionModal .sort-packages .dropdown-content{ width: 100%; } .createActionModal .folder-upload-text button{ float: unset; } /* Border Fade */ .border-fade { display: inline-block; transition-duration: 0.3s; transition-property: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: inset 0 0 0 4px #ececec, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } .border-fade:hover { box-shadow: inset 0 0 0 4px #666, 0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */ } /*Content*/ /**Title Action Buttons**/ .page-title-actions li{ display: inline-block; text-align: center; } .title-action{ -webkit-transition: box-shadow 0.2s ease; -moz-transition: box-shadow 0.2s ease; transition: box-shadow 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 50%; color: #6a75eb; display: inline-block; font-size: 0.889em; height: 4em; margin: 0 1em 1em; position: relative; text-align: center; text-transform: lowercase; width: 4em; line-height: 4em; } .title-action:before{ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; border-radius: 50%; bottom: 0; box-shadow: 0 0 0 1px #000; content: ""; left: 0; position: absolute; right: 0; top: 0; } .title-action:hover{ box-shadow: 0 0 0 7px #07819b; text-decoration: none; } .title-action:hover:before{ -webkit-transform: scale(0.925); -moz-transform: scale(0.925); -ms-transform: scale(0.925); -o-transform: scale(0.925); transform: scale(0.925); box-shadow: 0 0 0 1px #07819b; opacity: 0.5; } /*Animation Button*/ /**Float**/ .float { display: inline-block; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .float:hover { transform: translateY(-5px); } /*TOOLTIP*/ /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; cursor: pointer; text-align: center; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px 20px !important; width: auto; background-color: #fff !important; color: #1B3E6F; content: attr(data-tooltip); font-size: 12px; line-height: 1.2; border-radius: 3px; } /* Directions */ /* Top (default) */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: 0; margin-bottom: -12px; border-bottom-color: #DEE8F3; border-bottom-color: rgba(222, 232, 243, 1.0); } /* Horizontally align top/bottom tooltips */ [data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -50%; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } /* Left */ .tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #fff; /* border-left-color: hsla(0, 0%, 20%, 0.9); */ } .tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 20%; } .tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #DEE8F3; border-bottom-color: rgba(222, 232, 243, 1.0); } .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); } /* Right */ .tooltip-right:before, .tooltip-right:after { bottom: 50%; left: 20%; } .tooltip-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #fff; /* border-right-color: hsla(0, 0%, 20%, 0.9); */ } .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip-left:before, .tooltip-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; } /*TooltipModule - Shady*/ .tooltip.in { opacity: 1.0 !important; filter:alpha(opacity=100) !important; } .tooltip:before, .tooltip:after{ width: 100% !important; } .tooltip .tooltip-inner{ width: auto !important; max-width: 280px !important; text-align: left!important; /* color:#1B3E6F; background-color: #fff !important; */ color:#1B3E6F; background-color: #C3CDDB !important; border: solid 1px #C3CDDB; border-radius: 3px !important; border-top-left-radius: 0 !important; font-size: 12px; opacity: 1.0 !important; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: #C3CDDB !important; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: #C3CDDB !important; } .btn{ padding-right: 20px !important; padding-left: 20px !important; } .btn.border-radius{ border-radius: 20px !important; } .btn-primary{ background-color: #1273EB !important; border-color: #1273EB !important; } .btn-primary:hover { background-color: #0069d9 !important; border-color: #0062cc !important; } .btn + .btn{ margin-left: 10px; } .package-view-button button{ width: 150px; float: right; } .package-view-button{ margin-top: 6px; } .package-view-button .btn{ padding: 6px 21px; border-radius: 18px; font-size: 13px !important; } .package-view-button .btn:hover{ opacity: .9; } .package-view-button .btn-primary{ background-color: #1B3E6F !important; border-color: #1B3E6F !important; } .package-view-button .btn-enrich, .package-view-button .btn-enrich:focus, .modal-footer .btn-primary.btn-enrich{ background: #EB9A34 !important; border-color: #EB9A34 !important; color: #fff; outline: none !important; } .package-view-button .btn-deploy{ background-color: #1273EB !important; border-color: #1273EB !important; color: #fff !important; /* background-color: #fff !important; border-color: #D0DFF1 !important; color: #1B3E6F !important; */ } .package-view-title { font-size: 11px; color: #1B3E6F; font-weight: bold; margin-bottom: 5px; margin-top: 20px; } .package-view-title+p{ font-size: 11px; margin-bottom: 0px; } .package-view-title+ul{ margin-bottom: 0px; } .package-view-button .btn-outline-secondary i{ font-size: 18px; margin-right: 4px; } .card.creat-card{ margin: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } .card.creat-card .single-line{ padding: 15px 25px 15px; } .card.creat-card .single-line-model{ padding: 0px; } .card.creat-card .editor-container{ padding: 25px; } .single-line label{ margin-bottom: 0px; } .single-line-model label{ margin-bottom: 0px; border-bottom: 1px solid #FAFAFA; padding: 15px 25px; } .single-line-model .label-name{ width: 325px; } .single-line-model .label-input{ width: calc(100% - 325px); } .single-line-model input{ border-bottom: 1px solid #FAFAFA !important; padding: 15px 25px 15px 0px; } .customKeyTitle span{ color: #C3CDDB !important; font-size: 11px; } .single-line-model input:focus, .single-line-custom-key input:focus{ border-bottom-color: #1B3E6F !important; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .6); } .model-note-container{ width: calc(100% - 325px); padding: 0px 25px 0px 0px ; margin-left: 325px; } .error-message{ font-size:11px ; color: #FF6469; } .tages-container{ margin-bottom: 25px; } .tag-notes{ font-size: 11px; color: #C3CDDB; padding: 5px 25px 5px 0px; margin-bottom: 5px; } .single-tage{ background: #E0E8F2; font-size: 13px; color: #1B3E6F; border-radius: 50px; padding: 5px 10px; margin-right:10px; margin-bottom: 10px; } .single-tage a{ color: #1B3E6F; font-size: 14px; } .label-name{ width: 300px; display: inline-block; margin-bottom: 0px; font-size: 13px; font-weight: bold; } .label-name span{ color:#FF6469 ; } .delete-key{ color: #FF6469; font-size: 10px; background: #FFE6E7; border: 1px solid #FFC9CB; padding: 3px 10px 2px; margin-left: 10px; border-radius: 5px; } .delete-key:hover{ color: #C94448; background: #FFC9CB; border: 1px solid #FF6469; text-decoration: none; } .label-input{ width: calc(100% - 300px); display: inline-block; } .form-check-input{ margin-left: 0px !important; margin-top: 2px !important; } .form-check-input+span{ margin-left: 20px; margin-right: 50px; font-size: 13px; display: flex; } .form-check-input+span i{ margin-right: 5px; margin-left: 5px; } .label-input input{ margin-bottom: 0px; outline: 0px; border: 0px; font-size: 14px; width: 100%; color: #1B3E6F; transition: all 250ms ease-out; } .label-input input:focus{ border-bottom: solid 1px #1B3E6F; background: transparent !important; -webkit-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); -moz-box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); box-shadow: 0 4px 6px -6px rgba(18, 115, 235, .8); text-shadow: none; } .label-input input:disabled{ background: #fff; opacity: .5; } .label-input input[type=radio]{ width: auto; } .label-input input[type=radio]+span{ font-size: 12px; display: block; margin-right: 100px; } .single-line select{ margin-bottom: 0px; padding-left: 10px; padding-right: 50px; outline: 0px; border: solid 1px #EEF4F9; background: none; background: url(/assets/img/arrow.svg) 90% center #F4F9FE no-repeat; background-size: 10px; width: auto; -webkit-appearance: none; -moz-appearance: none; text-indent: 0; text-overflow: ''; font-size: 13px; color: #1B3E6F; } .single-line select:focus{ box-shadow: 0 0 0 0; } .single-line select option:first-child{ color: #C3CDDB; } .single-line-model input::placeholder{ font-size: 14px; color: #C3CDDB; } .single-line-model.error{ color:#FF6469; } .single-line-model.error input, .label-input input.ng-invalid{ box-shadow: none; color:#FF6469; border-bottom: 1px solid #FF6469 !important; } .single-line .custom-key{ background: none; border: 0px; color:#1273EB ; font-size: 15px; } .single-line .custom-key:focus{ outline: none; } .creat-container{ padding:70px 100px 70px 70px; position: relative; } .single-custom-key{ width: 100%; margin-bottom: 21px; } .single-line-custom-key{ width: 45%; display: inline-block; } .single-line-custom-key-delete{ width: 10%; display: inline-block; border-bottom: 1px solid #FAFAFA; padding: 13px 12px 14px; } .single-line-custom-key label{ width: 150px; margin-bottom: 0px; border-bottom: 1px solid #FAFAFA; padding: 15px 25px; } .single-line-custom-key input{ border-bottom: 1px solid #FAFAFA !important; padding: 15px 25px 15px 0; } .single-line-custom-key input::placeholder{ font-size: 14px; color: #C3CDDB; } .single-line-custom-key .label-input{ width: calc(100% - 150px); } .single-line-custom-key .label-name span{ color: #C3CDDB !important; margin-right: 20px; } .custom-key-delete{ background: transparent; color: #FF6469; outline: 0px; border: 0px; } .custom-key-delete:focus{ outline: 0px; border: 0px; } hr{ margin-top: 0rem !important; margin-bottom: 0rem !important; border-top: 1px solid #efefef !important; } .creat-action-container{ position: fixed; right: 0px; top: 104px; width: 130px; text-align: center; } .action-button{ display: inline-block; width: 70px; margin-bottom: 12px; color: #BABBC3 !important; font-size: 10px; font-weight: bold; background: transparent; border: 0; padding: 0; } .action-button:disabled, .action-button:disabled:hover{ cursor: unset; opacity: .5 !important; } .action-button:hover{ text-decoration: none; cursor: pointer; } .action-button i{ background: #fff; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); width: 40px; height: 40px; text-align: center; line-height: 40px; border-radius: 40px; color: #1B3E6F; font-size: 17px; display: inline-block; } .action-button i:hover{ background: #dee2e6; } .action-button i.icon-save-sm{ background: #1273EB; color: #fff; font-size: 11px; } .action-button i.icon-discard-sm{ font-size: 11px; color: #C3CDDB; } /* .action-button.save{ color: #1273EB !important; } .action-button.save:hover{ opacity: .9; } */ .action-button.save{ color: #66BB00 !important; } /*Flash Glowing button style*/ .action-button.save i{ background-color: #66BB00; -webkit-animation: glowing 1500ms infinite; -moz-animation: glowing 1500ms infinite; -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; } @-webkit-keyframes glowing { 0% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; } 50% { background-color: #7CD116; -webkit-box-shadow: 0 0 40px #7CD116; } 100% { background-color: #66BB00; -webkit-box-shadow: 0 0 3px #66BB00; } } @-moz-keyframes glowing { 0% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; } 50% { background-color: #7CD116; -moz-box-shadow: 0 0 40px #7CD116; } 100% { background-color: #66BB00; -moz-box-shadow: 0 0 3px #66BB00; } } @-o-keyframes glowing { 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; } 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; } 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; } } @keyframes glowing { 0% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; } 50% { background-color: #7CD116; box-shadow: 0 0 40px #7CD116; } 100% { background-color: #66BB00; box-shadow: 0 0 3px #66BB00; } } /* .action-button.delete i{ color: #BABBC3; } */ .action-button.delete, .action-button.delete i, .action-button.delete:hover, .action-button.delete:hover .icon-delete-sm{ color: #FF6469 !important; } .mode-icon{ font-size: 20px; } /*MODAL*/ .modal-dialog{ margin-top: 60px !important; } .modal{ z-index: 11000000 !important; background: rgba(27, 62, 111, 0.10) !important; } .modal-content{ border-radius: 2px !important; border: 0 !important; box-shadow: 0 2px 6px rgba(47, 83, 151, .10);; } .modal-title{ font-size: 14px !important; } .modal-body{ padding: 1.5rem 1.5rem 1rem !important; } .enrichModal .modal-dialog{ max-width: 60% !important; } .modal-body p{ font-size: 14px; } .modal-body p span{ color: #FF6469; } .modal-header{ border-bottom-color: #ECEDF2 !important; padding: .7rem 1.5rem !important; } .modal-footer{ padding-top: 0 !important; border-top: 0 !important; } .modal-footer .btn{ padding: 8px 15px; font-weight: bold; font-size: 12px; border: 0 !important; } .modal-footer .btn-primary{ background-color: #1B3E6F !important; } .modal-footer .btn-secondary, .modal-footer .btn-secondary:hover{ background-color: transparent; color: #1273EB; opacity: .8; } .modal-footer .btn-secondary:hover{ opacity: 1; } .modal-footer .btn-secondary:active{ background-color: #E7F1FC !important; color: #1B3E6F !important; } .btn-modal-remove-file:hover{ cursor: pointer; } .action-button span{ width: 100%; display: inline-block; margin-top: 5px; } .creat-action-container hr{ margin: 0 46px; padding-bottom: 18px; } .btn-link:hover, .btn-link:focus{ text-decoration: none !important; } .btn-link::before{ content: "\f107"; font-family:'FontAwesome'; position: relative; margin-right: 20px; } .btn-link.collapsed::before{ content: "\f105"; font-family:'FontAwesome'; position: relative; margin-right: 25px; } .btn-link i{ margin-right: 10px; } .ngx-file-drop__content{ background: #F4F9FE; padding: 20px; height: auto !important; display: inline-block !important; width: 100%; } .ngx-file-drop__drop-zone{ border: 1px dashed #D7E7F9 !important; border-radius: 0px !important; height: auto !important; } .folder-upload{ width: 100%; margin: 15px auto 18px; display: inline-block; text-align: center; } .btn-group-sm>.btn, .btn-sm{ font-size: 12px; } .create-title{ margin-bottom: 0; font-size: 14px; font-weight: bold; /* text-transform: uppercase; */ line-height: 32px; } .folder-upload-text{ margin-top: 10px; width: 100%; display: inline-block; text-align: center; color:#242424 ; font-size: 14px; } .folder-upload-text button{ margin-left: 10px; font-size: 12px; } .folder-upload-type{ color:#A4B2C6 ; font-size: 10px; font-weight: bold; width: 100%; display: inline-block; text-align: center; } .upload-table{ margin: 15px 0 0; } .upload-table tr{ border: dashed 1px #D7E7F9; } .upload-table tr th{ border-bottom: solid 1px #F4F9FE !important; } .upload-table .table thead th{ padding: 6px 9px; border-top: 0px !important; font-weight: normal; font-size: 13px; } .upload-table .table thead th:first-child{ width: 24px; padding-right: 0; } .upload-table tr:last-child th{ border-bottom: 0 !important; } .upload-table .table{ margin-bottom: 0px !important; } .nav-tabs .nav-link{ position: relative; } .nav-tabs .nav-link.tab-done{ padding-left: 40px !important; } .nav-tabs .nav-link.tab-done::after{ content: "\f058"; position: absolute; font-family: 'FontAwesome'; left: 17px; font-size: 16px; top: 11px; color: #66BB00; } .authentication-container-all{ background: #F4F9FE; border:1px solid #D0DFF1 ; flex: 1; width: 100%; } .authentication-header{ width: 100%; background: #fff; font-size: 12px; color: #C3CDDB; font-weight: bold; padding: 10px 20px ; } .authentication-search{ width: 100%; background: #fff; font-size: 12px; color: #C3CDDB; font-weight: bold; position: relative; } .authentication-search::after{ content: "\f002"; font-family: 'FontAwesome'; position: absolute; left: 20px; top: 11px; } .authentication-search input{ width: 100%; background: #fff; font-size: 12px; color: #C3CDDB; font-weight: bold; padding: 10px 20px 10px 35px; border: 0px; border-top: 1px solid #D7E7F9; } .authentication-search input::placeholder{ color: #D0D7E4; font-size: 10px; font-weight:100; } .authentication-accordion{ width: 100%; padding: 20px; max-height: 300px; overflow: auto; } .authentication-accordion .card{ border-radius: 0px !important; margin-bottom: 10px !important; } .authentication-accordion .card-header{ padding: 0px !important; background: #fff !important; border-radius: 0px !important; font-size: 18px; font-weight: bold; } .authentication-accordion .card-header .btn-link{ color: #1B3E6F; width: 100%; text-align: left; padding: 9px 0px !important; font-size: 13px; font-weight: bold; } .authentication-accordion .custom-control{ display: inline-block; } .authentication-accordion .btn-link::before{ margin-right: 10px; } .authentication-accordion .btn-link.collapsed::before{ margin-right: 14px; } .template-mapping-accordion{ width: 100%; } .templateNote{ font-size: 12px; color: #C1CDDD; } .card-header .btn.regularTitle{ padding-left: 0 !important; padding-right: 0 !important; color: #1B3E6F; font-size: 13px; font-weight: bold; } .template-mapping-accordion .accordian-title{ color: #C3CDDB !important; font-size: 12px !important; font-weight: normal !important; } .card{ border-radius: 2px; border: 0; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); border: 0px !important; } .card-header{ padding: 0px 25px !important; background: #F4F9FE !important; border-radius: 0px !important; border-bottom: 1px solid #ECEDF2 !important; } .template-mapping-accordion .card-body{ padding: 20px 26px 0 !important; font-size: 14px; } .card-header .btn-link{ color: #1B3E6F; width: 100%; text-align: left; padding: 9px 0px !important; font-size: 13px; font-weight: bold; } .accordion .card{ margin-bottom: 0px !important; border-top: 1px solid #ECEDF2 !important; } .accordion > .card > .card-header{ padding: 0 !important; } .template-mapping-accordion .card{ margin-bottom: 25px !important; } .custom-control{ display: inline-block; } .btn-link::before{ margin-right: 10px; } .btn-link.collapsed::before{ margin-right: 14px; } .drap-drop-action{ padding: 12px 20px 9px 20px; color: #C3CDDB; cursor:move; font-size: 15px; } .modal-title { font-size: 13px; font-weight: bold; } .select-type{ background: #F4F9FE; border: 1px solid #D7E7F9; padding: 10px; text-align: center; color: #1273EB; font-size: 15px; width: 100%; position: relative; } .select-type:hover, .select-type.active{ background: #1B3E6F; border: 1px solid #D7E7F9; color: #fff; text-decoration: none; } .select-type-icon{ font-size: 35px; } .select-type::before{ content: ''; border: 1px solid #1273EB; width: 18px; height: 18px; border-radius: 18px; display: inline-block; left: 10px; position: absolute; } .select-type:hover::before, .select-type.active::before{ border: 1px solid #fff; } .select-type.active::after{ content: ''; background: #fff; width: 12px; height: 12px; border-radius: 18px; display: inline-block; left: 13px; position: absolute; top: 13px; } .ace_scroller{ overflow: auto !important; } .ace_print-margin{ left: 100% !important; background: #eee !important; } .ace_content{ width: 100% !important; } .ace_editor{ height: 55vh !important; line-height: 25px; border: 1px solid #ECEDF2; background-color: #fff; color: #1B3E6F !important; } .ace_gutter{ background: #E0E8F2 !important; border-right: 0px !important; color: #1B3E6F !important; } .ace_gutter-active-line{ background-color: #265699 !important; color: #fff; } .ace_cursor{ color: #265699 !important; } .ace-tm .ace_marker-layer .ace_active-line{ background: #F4F9FE !important; } .breadcrumb-header{ padding: 0px; margin: 0px; } .breadcrumb-header li{ list-style: none; display: inline-block; font-size: 14px; } .breadcrumb-header li:last-child::after{ display: none; } .breadcrumb-header li:last-child{ /* background: #F4F9FE; */ border-radius: 50px; color: #C3CDDB; padding: 0 10px 0 0; } .breadcrumb-header li:first-child, .breadcrumb-header li:first-child a{ font-size: 16px; font-weight: bold; padding: 0px; color: #1B3E6F !important; border-radius: 0px; background: transparent; } .create-template-import{ width: 100%; margin: 30px 0px 10px ; } .create-template-import a:hover{ text-decoration: none; } .mapping-source-load{ color: #1B3E6F; font-size: 10px; font-weight: bold; display: inline-block; vertical-align: top; margin-top: 20px; margin-bottom: 10px; margin:15px 30px 20px; } .mapping-source-load:hover{ text-decoration: none; } .mapping-source-load i { color: #1B3E6F; font-size: 36px; padding: 10px; border-radius: 100px; width: 70px; height: 70px; display: inline-block; line-height: 52px; margin-bottom: 20px; } .mapping-source-load:hover i{ background: #F4F9FE; } .mapping-source-load:hover span{ color: #1273EB; } .source-load-note{ color:#C3CDDB ; font-size: 8px; } .mapping-source-load.hover-disable{ opacity: .5; } .mapping-source-load.hover-disable:hover span{ color: #1B3E6F; } .mapping-source-load.hover-disable:hover i{ background: transparent; } .template-mapping-list{ background: #F4F9FE; border: 1px solid #E9F3FF; padding: 5px 10px; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); width: 100%; display: inline-block; margin-bottom: 20px; color: #1B3E6F; } .template-mapping-list:hover, .template-mapping-list.active { /* background: #1B3E6F; */ text-decoration: none; /* color: #fff !important; */ border-radius: 4px; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.3); } .template-mapping-list p, .template-mapping-list:hover p{ margin-bottom: 0; width: 60%; display: inline-block !important; } .template-mapping-list:hover p{ width: 90%; } .template-mapping-list:hover{ opacity: .9; } .template-mapping-list span{ background: #fff; border: solid 1px #E9F3FF; color: #2A81ED; font-size: 9px; float: right; border-radius: 50px; padding: 3px 10px; margin-left: 5px; } .template-mapping-list:hover span{ display: none; } .deleteTemplate{ display: none; position: absolute; right: 21px; top: 2px; border: 0; background: transparent; } .deleteTemplate i{ color: #FF6469 !important; font-size: 16px; } .template-mapping-list:hover .deleteTemplate{ display: inline; } .max-height-list{ max-height: 232px; padding-bottom: 5px !important; overflow: auto; } .create-template-mapping-button{ background: #C3CDDB; border-radius: 50px; font-size: 12px; font-weight: bold; padding: 10px 20px; margin-bottom: 20px; display: inline-block; cursor: pointer; } .create-template-mapping-button i{ margin-right: 5px; } .view-package-container{ padding: 20px 56px; } .package-type-icon{ color: #1B3E6F; background: #C1CDDD; width: 48px; height: 48px; border-radius: 48px; display: inline-block; text-align: center; line-height: 48px; font-size: 20px; /* margin-right: 20px; */ } .defintionsNote{ padding-left: 0; } .defintionsNote li{ line-height: 24px; list-style: none; font-size: 13px; } .package-name-container{ width: calc(100% - 60px); display: inline-block; } .package-name{ font-size: 16px; color: #1B3E6F; font-weight: bold; margin-top: 3px; } .package-name span{ font-size: 11px; } .package-name i{ font-size: 12px; color: #C3CDDB; margin-left: 5px; } .deply-status-icon{ margin-right: 4px; width: 1.6%; vertical-align: baseline; } .package-description{ color: #D0D7E4; font-size: 12px; font-weight: normal; } .package-auth-info{ font-size: 11px; } .package-auth-info p{ margin-bottom: 5px; } .package-auth-info div{ padding-left: 25px; border-right: solid 1px #F4F9FE; } .package-auth-info div:first-child{ padding-left: 15px; } .package-auth-info .col-4:first-child{ padding-left: 15px; } .package-auth-info div:last-child{ border-right: 0; } .package-auth-info .package-contributers{ margin-bottom: 0 !important; } .package-auth-info .package-contributers button img{ width: 20px; height: 20px; } .template-mapping-action{ margin-bottom: 20px; } .template-mapping-action button{ border-radius: 50px; padding: 4px 20px; font-size: 13px; } .template-mapping-action .btn-primary{ background:#5DBDBA !important ; border-color:#5DBDBA !important ; color: #fff !important ; } .template-mapping-action .btn-outline-secondary{ background:#fff !important ; border-color:#ECEDF2 !important ; color: #C3CDDB !important ; } .template-mapping-action .btn-outline-secondary:hover{ color: #1B3E6F !important; } .table-container{ width: 100%; } /* server-side-angular-way.component.css */ .no-data-available { text-align: center; } /* src/styles.css (i.e. your global style) */ .dataTables_empty { display: none; } .dataTables_length, .dataTables_filter{ margin-bottom: 6px; color: #1B3E6F !important; font-size: 13px; /* font-weight: bold; */ } .dataTables_filter input{ color: #1B3E6F; background: url(../src/assets/img/icon-search.svg) 9px center no-repeat; padding: 4px 9px 4px 24px !important; border: solid 1px #ECEDF2; border-radius: 4px; } .dataTables_filter input:focus{ box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); } .mapping-table th, .mapping-table td{ width: auto !important; padding: 7px 20px 7px 0 !important; border-bottom: solid 1px #ECEDF2 !important; font-size: 13px; } .mapping-table th:first-child, .mapping-table td:first-child{ padding-left: 20px !important; } .mapping-table thead th{ border-bottom-color: #ECEDF2 !important; } .mapping-table tbody tr:hover{ background-color: #F4F9FE !important; } .mapping-table th{ padding-top: 10px !important; padding-bottom: 10px !important; background: #F4F9FE; } .mapping-table td{ border-top: 0 !important; } table.dataTable.no-footer{ margin-bottom: 9px; border-bottom: solid 1px #ECEDF2 !important; } .dataTables_info{ padding-top: 12px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; } .dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_paginate a.paginate_button, .dataTables_wrapper .dataTables_paginate a.paginate_button.current, .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ margin-bottom: 3px; color: #1B3E6F !important; font-size: 13px; font-weight: bold; border: 0 !important; } .dataTables_wrapper .dataTables_paginate a.paginate_button:hover{ border: 0; color: #1B3E6F !important; background: none !important; } .dataTables_wrapper .dataTables_paginate a.paginate_button{ padding: 0.4em .9em !important; } .dataTables_wrapper .dataTables_paginate a.paginate_button.current{ color: #1B3E6F !important; background: #F4F9FE !important; border: solid 1px #EEF4F9 !important; border-radius: 100% !important; box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1); outline: 0; } .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled{ opacity: .6; } .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover{ cursor: default; background: none !important; border: 0 !important; } .mapping-table .form-control, .mapping-table .custom-select{ padding: 10px 6px; border-color: #EEF4F9; font-size: 14px; line-height: 12px; color: #1B3E6F; } .mapping-table .form-control{ box-shadow: 0 2px 4px rgba(47,83,151,0.1); } .mapping-table tbody tr:hover .form-control:focus, .mapping-table tbody tr:hover .custom-select{ background-color: #fff !important; } .mapping-table .custom-select{ background-color: #F4F9FE; color: #1B3E6F; } .mapping-table .form-control:disabled{ padding-left: 0; box-shadow: none; border: 0; background: transparent !important; color: #1B3E6F; } /* Windows View as 150% */ @media (resolution: 150dpi) { /* @media (-webkit-device-pixel-ratio: 1.5) { */ .body-container > .container{ max-width: 960px !important; } } /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575.98px) { .page-title{ padding: 18px; } } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767.98px) { } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991.98px) { } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199.98px) { } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { } /* Package Wizard panel */ .packageWizard.panel-wrap{ position: fixed; top: 100px; bottom: 0; right: 0; width: 350px; height: 200px; transform: translateX(100%); transition: .3s ease-out; z-index: 2000; } .packageWizard .panel{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; padding: 20px; padding-top: 9px; background: #1B3E6F; color: #fff; border-top: solid 6px #1273EB; box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important; border-radius: 3px !important; /* border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; */ text-align: center; } /* simulate panel state control -- this can also be triggered by a class name added to the body tag. Just using a checkbox sibling here for simplicity */ [type="checkbox"]:checked ~ .panel-wrap { transform: translateX(0%); } .packageWizard h3{ margin-bottom: 15px; font-weight: bold !important; font-size: 16px; } .packageWizard p{ margin-bottom: 12px; font-size: 14px; } .packageWizard span{ font-size: 13px; color: #C3CDDB; } .startTour{ margin-top: 15px; padding: 9px 21px; font-weight: bold; font-size: 12px; border: 0; border-radius: 18px; background-color: #1273EB; color: #fff; } .closeWizard{ margin-top: 12px; border: 0; background: none; font-weight: normal; color: #E0E8F2; font-size: 12px; } /*Wizard Content*/ .mat-menu-panel{ box-shadow: 0 2px 13px 6px rgba(47, 83, 151, .17) !important; border-radius: 3px !important; border-top: solid 3px #1273EB; } .mat-menu-panel::after { content: ''; display: block; width: 0; height: 0; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #1273EB; left: 9px; top: -8px; } .mat-card{ background: #1B3E6F !important; color: #fff !important; font-family: inherit !important; border-radius: 0 !important; } .mat-card-content, .mat-card-subtitle{ font-size: 13px; } .mat-card-title{ margin-bottom: 9px !important; font-weight: bold !important; font-size: 16px !important; } .mat-icon-button[disabled]{ color: rgba(224, 232, 242, .5) !important; }