.success-color { color: green; } .warning-color { color: orange; } .error-color { color: red; } .info-color { color: lightblue; } .jumbotron.vertical-center { margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */ } .vertical-center { min-height: 60%; /* Fallback for vh unit */ min-height: 60vh; /* You might also want to use 'height' property instead. Note that for percentage values of 'height' or 'min-height' properties, the 'height' of the parent element should be specified explicitly. In this case the parent of '.vertical-center' is the element */ /* Make it a flex container */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Align the bootstrap's container vertically */ -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; /* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */ width: 100%; /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers hence the bootstrap's container won't be aligned to the center anymore. Therefore, we should use the following declarations to get it centered again */ -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } #single-line-edit-btn { margin: 5px 20px -10px 20px; } .delete-body { font-size: 15px; padding-bottom: 50px; } .delete-body-multiple { font-size: 15px; } .delete-info { margin-bottom: 20px; } .delete-instr { margin-bottom: 2px; } .delete-input-row { width: 75%; display: inline; margin-left: 10px; } .delete-label-row { padding-top: 10px; } .button-row { margin-right: 50px; } .button-icon:hover { cursor: pointer; } .inline-textarea { font-size: 17px; resize: none; max-height: 34px; padding: 3px; } .inline-textarea-large { max-height: 80px; } .inline-form { display: inline-block; width: 97%; padding: 0; margin: 0; } .inline-form-opt { float: right; margin-top: -30px; margin-right: 5px; } .inline-form-opt i { float: right; font-size: 23px !important; color: #a94442; } .inline-form-opt p { font-size: 18px; color: gray; display: inline; margin-right: 10px; } .display-inline { display: inline !important; } .display-inline-block { display: inline-block !important; } .display-block { display: block !important; } .display-flex { display: flex !important; } .space-between { justify-content: space-between; } .table-select-row { cursor: pointer; } .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } .cursor-default { cursor: default; } .no-click { pointer-events: none; } .not-editable { } .details-box-shadow { box-shadow: 0 0 10px 0 grey; } .details-box-title { padding: 0.5em; height: 2em; } .details-box-body { border-top: 1px solid lightgrey; padding: 0.5em; } .details-box-footer { border-top: 1px solid lightgrey; padding: 0.5em; } .ps-link { color: black; } .ps-scroll { overflow-y: scroll; height: 800px; } .td-selected-row { background-color: #00bdef; } .multiline-textarea { border: none; width: 100%; } .scroll-content { position: relative; float: left; width: 97%; background: white; } .scroll-fixed-content { position: fixed; top: 315px; right: 25px; bottom: 25px; width: 40%; overflow-y: scroll; background: white; } .scroll-fixed-content-3 { position: fixed; top: 280px; right: 25px; bottom: 25px; width: 32%; overflow-y: scroll; background: white; } p.vertical { writing-mode: vertical-rl; text-orientation: upright; padding: 0.5em 0.5em 2em 0.2em; } p.special { background: red; border-right: 2px solid blue; } .white-box { background: white; padding: 0.5em; } .mouse-hover:hover { background-color: #f2f2f2; } .form-separator { padding-bottom: 0.5em; border-bottom: 1px solid lightgrey; } #table-wrapper { position: relative; } #table-scroll { height: 500px; overflow: auto; margin-top: 20px; } #table-wrapper table { width: 100%; } #table-wrapper table * { } #table-wrapper table thead th .text { position: absolute; top: -20px; z-index: 2; height: 20px; width: 35%; } .sortable-list { } .sortable-list ul { } .sortable-list li { list-style: none outside none; } .sortable-placeholder { list-style: none outside none; background: red; } .just-added { background: #dff8f3; } .definition-form-inline-actions div { display: inline; } .blink { animation: blink 2s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } @keyframes blink { to { visibility: hidden; } } @-webkit-keyframes blink { to { visibility: hidden; } } .ps-paperclip { color: green; } .well { display: flex; gap: 8px; min-height: 20px; padding: 10px; margin-bottom: 20px; border: 1px solid #e3e3e3; } /* BOOTSTRAP CHANGES */ a { color: var(--sl-color-primary-900); } .panel-default > .panel-heading { } .panel-default > .panel-heading-empty { color: #333; background-color: inherit; border-color: inherit; padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .breadcrumb { background-color: var(--sl-color-neutral-0) !important; font-weight: 700; font-size: 12px; color: var(--sl-color-neutral-500); } .breadcrumb li button { font-size: 12px; } .panel-heading-blank { padding-top: 5px; padding-bottom: 5px; padding-left: 5px; background-color: transparent !important; } .input-group-addon, .table-hover > tbody > tr:hover, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active, .table > thead > tr > th.active { background-color: var(--sl-color-warning-200) !important; } .table > tbody > tr.info > td, .table > tbody > tr.info > th, .table > tbody > tr > td.info, .table > tbody > tr > th.info, .table > tfoot > tr.info > td, .table > tfoot > tr.info > th, .table > tfoot > tr > td.info, .table > tfoot > tr > th.info, .table > thead > tr.info > td, .table > thead > tr.info > th, .table > thead > tr > td.info, .table > thead > tr > th.info, tr > td.info, tr > th.info, tr.info > td, tr.info > th, tr > td.info, tr > th.info { background-color: var(--sl-color-warning-200); } .table > tbody > tr.selected-item > td, .table > tbody > tr.selected-item > th, .table > tbody > tr > td.selected-item, .table > tbody > tr > th.selected-item, .table > tfoot > tr.selected-item > td, .table > tfoot > tr.selected-item > th, .table > tfoot > tr > td.selected-item, .table > tfoot > tr > th.selected-item, .table > thead > tr.selected-item > td, .table > thead > tr.selected-item > th, .table > thead > tr > td.selected-item, .table > thead > tr > th.selected-item, tr > td.selected-item, tr > th.selected-item, tr.selected-item > td, tr.selected-item > th, tr > td.selected-item, tr > th.selected-item { background-color: var(--sl-color-warning-200); } .table-hover > tbody > tr:hover { background-color: var(--sl-color-neutral-50) !important; } .table-hover > tbody > tr.no-hover:hover { background-color: transparent !important; } .input-group-addon { background-color: var(--sl-color-neutral-50) !important; } .input-group-addon.btn-success { background-color: var(--sl-color-success-600) !important; } .no-shadow { -webkit-box-shadow: none !important; box-shadow: none !important; } .table > tbody > tr > td.active ~ td { background-color: var(--sl-color-warning-200) !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover { color: #fff; background-color: var(--sl-color-primary-950); } .list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover { background-color: var(--sl-color-warning-200); border-color: var(--sl-color-warning-200); color: #333; } .btn { font-weight: bold; } .btn:focus { outline: none !important; } .btn.active { outline: none !important; } .btn.inactive { background: var(--sl-color-neutral-0); } .btn-success { background-color: var(--sl-color-success-600); border-color: var(--sl-color-success-600); color: var(--sl-color-neutral-0); } .btn-success:hover { background-color: var(--sl-color-success-500); border-color: var(--sl-color-success-500); color: var(--sl-color-neutral-0); } .btn-default { color: #333333 !important; } .btn-noticeable { background: #cde9e9 !important; } .btn.active, .btn:active, .btn.active:focus { background: var(--sl-color-warning-200); } .panel-title { margin-top: 0; margin-bottom: 0; font-size: 14px; font-weight: bold; color: inherit; } .navbar-fixed-top { border-width: 0; background-color: var(--sl-color-primary-900) !important; } .nav > li > a:focus, .nav > li > a.no-hover:hover { background-color: transparent; } .nav-tabs { font-size: 13px; font-weight: bold; } .nav-tabs > li > a { padding: 12px 11px; } .nav-tabs > li.module > a { color: var(--sl-color-neutral-0); font-weight: bold !important; } .nav-tabs .dropdown-menu { background-color: var(--sl-color-primary-950); } .nav-tabs .dropdown-menu li a:hover { color: var(--sl-color-neutral-0); } .nav-tabs .dropdown-menu li.active a:hover { color: #333333; background-color: white; } .nav .open > a, .nav .open > a:focus, .nav .open > a:hover { background-color: rgba(0, 0, 0, 0.2); } .nav-tabs .dropdown-menu > li > a { font-weight: bold; } .nav-tabs > li.active-group > a { color: #333 !important; cursor: pointer; background-color: white !important; } .nav-tabs > li.active-group > a:hover { color: #333 !important; background-color: white; } .label-info { background-color: var(--sl-color-primary-500) !important; } .table-disabled { background: #fafafa !important; } li.current { background-color: #f9f9f9 !important; } .table-hover > tbody > tr.info:hover > td, .table-hover > tbody > tr.info:hover > th, .table-hover > tbody > tr:hover > .info, .table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr > th.info:hover { background-color: var(--sl-color-warning-100); } /* PS-CHECKBOX AND PS-RADIO */ .ps-checkbox { color: var(--sl-color-primary-950); margin: 0; padding: 0; vertical-align: middle; display: inline; border-radius: 0 !important; } .ps-checkbox .cr, .ps-radio .cr { position: relative; display: inline-block; border: 1px solid var(--sl-color-primary-950); width: 1em; height: 1em; float: left; margin-right: 0.5em; } .ps-checkbox .label-name { position: relative; top: -3px; user-select: none; } .ps-radio .cr { border-radius: 0.25em !important; } .ps-radio .cr { border-radius: 50%; } .ps-checkbox .cr .cr-icon, .ps-radio .cr .cr-icon { position: absolute; font-size: 0.8em; line-height: 0; top: 50%; left: 1%; } .ps-radio .cr .cr-icon { margin-left: 0.04em; } .ps-checkbox label { margin: 0; padding: 0; } .ps-checkbox label input[type="checkbox"], .ps-radio label input[type="radio"] { display: none; } .ps-checkbox label input[type="checkbox"] + .cr > .cr-icon, .ps-radio label input[type="radio"] + .cr > .cr-icon { transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all 10ms ease-in; } .ps-checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .ps-radio label input[type="radio"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; } .ps-checkbox label input[type="checkbox"]:disabled + .cr, .ps-radio label div input[type="radio"]:disabled + .cr { opacity: 0.2; } /* PS-HAMBURGER-MENU */ .ps-hamburger-menu .confirm-click-dialog { margin-top: 2em; } .ps-hamburger-menu .dropdown-menu > li > a.dialog:hover { background-color: transparent !important; } .ps-hamburger-menu.dropdown-menu-left .dropdown-menu { right: auto !important; left: 0 !important; } .ps-hamburger-menu .dropdown-menu > li { user-select: none; } /* LIST-SELECTOR, USER-LIST-SELECTOR, CONTACT-LIST-SELECTOR, ... */ .list-selector ul li { display: flex; flex-direction: row; align-items: center; min-height: 40px; } .list-selector .ps-checkbox .label-name { font-weight: normal; top: 0; } .list-selector .labels { } .user-list-selector .labels, .contact-list-selector .labels { } .list-selector .labels .label { border-radius: 4px !important; display: inline-block; padding: 4px 8px; } /* important! */ .contact-list-selector > ul li { display: inherit; flex-direction: inherit; align-items: inherit; min-height: auto; } .contact-list-selector .list-group { margin-bottom: 0; } .contact-list-selector .list-group-item { padding: 0; margin-bottom: -1px; background-color: #fff; border: none; border-radius: 0; } .contact-list-selector .labels .label.label-info { background-color: #7d77bf !important; } .customer-list-selector .labels .label { font-size: 100%; font-weight: 500; } .customer-list-selector dl dd { overflow: hidden; text-overflow: ellipsis; width: 336px; } .ikk-components-list-selector .list-group { margin-bottom: 0; } .ikk-components-list-selector .list-group .list-group-item { padding-bottom: 5px; } .ikk-components-list-selector .list-group .list-group .list-group-item { border-color: transparent; } .project-info .label { border-radius: 4px !important; padding: 4px 8px; font-size: 100%; font-weight: 500; color: #333; } .project-info dl dd { overflow: hidden; text-overflow: ellipsis; width: 336px; } /* BUTTON ICONS */ .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { color: #fff; text-decoration: none; background-color: var(--sl-color-primary-900); outline: 0; } .dropdown-menu > li > a { border: none; } .delete-icon { } .delete-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f1f8"; margin-right: 7px; } .save-icon { background-color: var(--sl-color-success-600) !important; border-color: var(--sl-color-success-600); color: var(--sl-color-neutral-0) !important; } .save-icon:hover { background-color: var(--sl-color-success-500) !important; border-color: var(--sl-color-success-500); color: var(--sl-color-neutral-0) !important; } .save-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f0c7"; margin-right: 7px; } .edit-icon { } .edit-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f044"; margin-right: 5px; } .add-icon { background-color: var(--sl-color-primary-600); border-color: var(--sl-color-primary-600); color: var(--sl-color-neutral-0) !important; } .add-icon:hover { background-color: var(--sl-color-primary-500); border-color: var(--sl-color-primary-600); color: var(--sl-color-neutral-0) !important; } .add-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f0fe"; margin-right: 7px; } .add-circle-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f055"; margin-right: 7px; } .add-event { } .add-event::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f271"; margin-right: 7px; } .cancel-icon, .reset-icon { } .cancel-icon::before, .reset-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f05e"; margin-right: 5px; } .pdf-icon { } .pdf-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f1c1"; margin-right: 7px; } .details-icon { } .details-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f30f"; margin-right: 7px; } .other-action-icon, .other-action-icon.active { } .other-action-icon::before { font-family: "sans-serif", "Font Awesome 5 Pro"; font-weight: 300; content: "\f5cb"; margin-right: 7px; } /* PS-COMMON MODULE */ .fs18 { font-size: 18px !important; } .fs20 { font-size: 20px !important; } .fs24 { font-size: 24px !important; } .fs28 { font-size: 28px !important; } .fs32 { font-size: 32px !important; } .fs38 { font-size: 38px !important; } .fs48 { font-size: 48px !important; } .fs64 { font-size: 64px !important; } .fs9 { font-size: 9px !important; } .fs10 { font-size: 10px !important; } .fs14 { font-size: 14px !important; } .fs16 { font-size: 16px !important; } .fs13 { font-size: 13px !important; } .fs12 { font-size: 12px !important; } .fs11 { font-size: 11px !important; } .m-0 { margin: 0; } .m-05 { margin: 0.5em; } .m-2 { margin: 2em; } .m-4 { margin: 4em; } .mt-0 { margin-top: 0 !important; } .mr0 { margin-right: 0 !important; } .mt-05 { margin-top: 0.5em; } .mt4 { margin-top: 4px; } .mb-0 { margin-bottom: 0; } .mb-05 { margin-bottom: 0.5em; } .mb-1 { margin-bottom: 1em; } .mb-15 { margin-bottom: 1.5em; } .mt-0 { margin-top: 0; } .mt6 { margin-top: 6px; } .mt5 { margin-top: 5px !important; } .mb-1 { margin-bottom: 1em; } .mr-2 { margin-right: 2em; } .ml-8 { margin-left: 8em !important; } .ml-9 { margin-left: 9em !important; } .ml-2 { margin-left: 2em !important; } .ml6 { margin-left: 6px !important; } .mt-2 { margin-top: 2em !important; } .mt-3 { margin-top: 3em !important; } .mt-4 { margin-top: 4em !important; } .mb-2 { margin-bottom: 2em !important; } .mb-3 { margin-bottom: 3em !important; } .mr-1 { margin-right: 1em; } .ml0 { margin-left: 0 !important; } .mb-5 { margin-bottom: 5rem !important; } .mb-7 { margin-bottom: 7rem !important; } .ml-1 { margin-left: 1em !important; } .ml-3 { margin-left: 3em !important; } .ml1 { margin-left: 1px; } .ml2 { margin-left: 2px !important; } .mr2 { margin-right: 2px !important; } .mt-1 { margin-top: 1em; } .mb2 { margin-bottom: 2px !important; } .mb6 { margin-bottom: 6px; } .mb-1 { margin-bottom: 1em; } .p-0, .p0 { padding: 0 !important; } .p4 { padding: 4px; } .pt-0 { padding-top: 0; } .pt-05 { padding-top: 0.5em !important; } .pb-05 { padding-bottom: 0.5em !important; } .pt-1 { padding-top: 1em !important; } .pt-2 { padding-top: 2em !important; } .p-05 { padding: 0.5em; } .pl-0 { padding-left: 0 !important; } .pl10 { padding-left: 10px !important; } .pl-03 { padding-left: 0.3em; } .pr10 { padding-right: 10px; } .pl22 { padding-left: 22px !important; } .pl32 { padding-left: 32px !important; } .pl42 { padding-left: 42px !important; } .pl190 { padding-left: 190px !important; } .pl220 { padding-left: 220px !important; } .pl50 { padding-left: 50px; } .pl-5 { padding-left: 5px !important; } .pl5 { padding-left: 5px !important; } .pl10 { padding-left: 10px !important; } .pr-5 { padding-right: 5px !important; } .pr5 { padding-right: 5px !important; } .pl-05 { padding-left: 0.5em !important; } .pr-2 { padding-right: 2em !important; } .pr0, .pr-0 { padding-right: 0; } .pr7 { padding-right: 7px; } .pl-1 { padding-left: 1em; } .pr-15 { padding-right: 1.5rem; } .pl-2 { padding-left: 2em !important; } .pl-3 { padding-left: 2em !important; } .pl-4 { padding-left: 4em !important; } .pl-5 { padding-left: 5em !important; } .pt-2 { padding-top: 2em !important; } .pt-3 { padding-top: 3em !important; } .pt2 { padding-top: 2px; } .pb2 { padding-bottom: 2px; } .pb-1 { padding-bottom: 1em !important; } .pb-2 { padding-bottom: 2em !important; } .pb-3 { padding-bottom: 3em !important; } .pb-4 { padding-bottom: 4em !important; } .pb0 { padding-bottom: 0 !important; } .pb4 { padding-bottom: 4px; } .pb100 { padding-bottom: 100px !important; } .p-5 { padding: 5px !important; } .p-10 { padding: 10px !important; } .p-15 { padding: 15px !important; } .pt-5 { padding-top: 5px !important; } .pt-10 { padding-top: 10px !important; } .lh30 { line-height: 30px; } .lh40 { line-height: 40px; } .lh0 { line-height: 0; } .h10 { height: 10px; } .h20 { height: 20px; } .h30 { height: 30px; } .h50 { height: 50px; } .h40 { height: 40px; } .h60 { height: 60px; } .h100 { height: 100px; } .h150 { height: 150px; } .h200 { height: 200px; } .h260 { height: 260px; } .h500 { height: 500px; } .h600 { height: 600px; } .h700 { height: 700px; } .h100p { height: 100% !important; } .w400 { width: 400px; } .min-h100p { min-height: 100%; /*overflow-y: hidden;*/ } .vat { vertical-align: text-top !important; } .vam { vertical-align: middle !important; } .vatb { vertical-align: text-bottom; } .ttu { text-transform: uppercase; } .lsn, .list-style-none { list-style: none; } .scroll-y { overflow-y: scroll; } .scroll-y-auto { overflow-y: auto; } .scroll-x-hidden { overflow-x: hidden; } .align-middle { vertical-align: middle !important; } .yellow-color { color: #ffdd26 !important; } .gray-color { color: #d3d3d3 !important; } .text-color { color: #333333; } .lightblue { background-color: var(--sl-color-neutral-50); } .bg-col3 { background-color: var(--sl-color-neutral-50); } .focus-color { background-color: var(--sl-color-warning-200) !important; } .fwn { font-weight: normal !important; } .white { background-color: white !important; } .text-bold { font-weight: bold; } .text-underline { text-decoration: underline !important; } .no-underline { text-decoration: none !important; } .no-wrap { white-space: nowrap; } .text-normal { font-weight: normal !important; } .text-italic { font-style: italic !important; } .text-blue { color: var(--sl-color-primary-950) !important; } .text-col2 { color: var(--sl-color-primary-950) !important; } .text-darkblue { color: #21588a !important; } .text-navyblue { color: var(--sl-color-primary-700) !important; } .text-col4 { color: var(--sl-color-primary-700) !important; } .text-lightblue { color: #a0caff !important; } .text-green { color: #008000 !important; } .text-yellow { color: #dcc435 !important; } .text-transparent { color: transparent !important; } .text-red { color: red; } .text-failure { color: var(--sl-color-danger-500) !important; } .text-col3 { color: var(--sl-color-primary-50); } .text-col0, .text-turquoise { color: var(--sl-color-primary-100); } .yellow { background-color: #ffe798 !important; } .blue { background-color: var(--sl-color-primary-700) !important; } .text-gray { color: #b8b8b8 !important; } .text-darkgray { color: #aaaaaa !important; } .text-white { color: var(--sl-color-neutral-0) !important; } .text-col1 { color: var(--sl-color-neutral-0); } .text-dark { color: #333333 !important; } .text-col5 { color: #333333 !important; } .blue-gray { background-color: var(--sl-color-primary-700) !important; } .bg-col2 { background-color: var(--sl-color-primary-700) !important; } .bg-col1 { background-color: var(--sl-color-primary-500) !important; } .bg-col3 { background-color: var(--sl-color-neutral-50) !important; } .bg-col4 { background-color: var(--sl-color-neutral-200) !important; } .bg-col5 { background-color: var(--sl-color-primary-700) !important; } .bg-col6 { background-color: #19548f !important; } .bg-col0 { background-color: var(--sl-color-neutral-0) !important; } .text-bold { font-weight: bold !important; } .btn-transparent { border: none !important; background-color: transparent !important; } .btn-primary { background-color: var(--sl-color-primary-600); border-color: var(--sl-color-primary-600); color: var(--sl-color-neutral-0); } .btn-primary:hover { background-color: var(--sl-color-primary-500); border-color: var(--sl-color-primary-500); color: var(--sl-color-neutral-0); } .btn-danger { background-color: var(--sl-color-danger-600); border-color: var(--sl-color-danger-600); color: var(--sl-color-neutral-0) !important; } .btn-danger:hover { background-color: var(--sl-color-danger-500); border-color: var(--sl-color-danger-500); color: var(--sl-color-neutral-0) !important; } .btn-warning { background-color: var(--sl-color-warning-600) !important; border-color: var(--sl-color-warning-600); color: var(--sl-color-neutral-0) !important; } .btn-warning:hover { background-color: var(--sl-color-warning-500) !important; border-color: var(--sl-color-warning-500); color: var(--sl-color-neutral-0) !important; } .alert-warning { background-color: var(--sl-color-warning-100) !important; border-color: var(--sl-color-warning-200); color: var(--sl-color-warning-700) !important; } .alert-success { background-color: var(--sl-color-success-100) !important; border-color: var(--sl-color-success-200); color: var(--sl-color-success-700) !important; } .alert-danger { background-color: var(--sl-color-danger-100) !important; border-color: var(--sl-color-danger-200); color: var(--sl-color-danger-700) !important; } .inherit-height { height: inherit !important; } .inherit-width { width: inherit !important; } .border-radius-0 { border-radius: 0 !important; } .border-0 { border: 0 !important; } .border-top-0 { border-top: 0 !important; } .border-right-0 { border-right: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; } .border-left-0 { border-left: 0 !important; } .border-white { border: 1px solid white; } .br1 { border-right: 1px; } .bl1 { border-left: 1px; } .no-radius * { border-radius: 0 !important; } .no-select { user-select: none; } .no-shadow { -webkit-box-shadow: none !important; box-shadow: none !important; } .bottom-shadow { box-shadow: rgba(0, 0, 0, 0.4) 0 1px 8px; } .no-border { border: none !important; } .no-border { border: none !important; } .border-top { border-top: 1px solid var(--sl-color-neutral-200) !important; } .border2-top { border-top: 2px solid var(--sl-color-neutral-200) !important; } .border-left { border-left: 1px solid var(--sl-color-neutral-200); } .border-right { border-right: 1px solid var(--sl-color-neutral-200); } .border-bottom { border-bottom: 1px solid var(--sl-color-neutral-200) !important; } .border-red { border-bottom: 2px solid #ff5b5b; } .no-decoration { text-decoration: none; } .bb4 { border-bottom: 4px solid var(--sl-color-neutral-200); } .border-1 { border: 1px solid var(--sl-color-neutral-200); } .btn.border-1 { border: 1px solid #cccccc; } .no-background { background-color: transparent !important; } .muted-background { background-color: #f3f3f3 !important; } .radius-10 { border-radius: 10px !important; } .w2p { width: 2%; } .w5p { width: 5%; } .w10p { width: 10%; } .w15p { width: 15%; } .w20p { width: 20%; } .w30 { width: 30px; } .w40 { width: 40px; } .w50 { width: 50px; } .w80 { width: 80px; } .w85 { width: 85px; } .w90 { width: 90px; } .w100 { width: 100px; } .w160 { width: 160px; } .w180 { width: 180px; } .w200 { width: 200px; } .w30p { width: 30% !important; } .w40p { width: 40% !important; } .w50p { width: 50% !important; } .w60p { width: 60% !important; } .w100p { width: 100% !important; } .w70p { width: 70% !important; } .margin-auto { margin: 0 auto; } .break-word { word-break: break-word; } .break-all { word-break: break-all; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .white-space { white-space: normal; } .sticky { position: -webkit-sticky; position: sticky; } .position-fixed { position: fixed; } .position-absolute { position: absolute; } .position-relative { position: relative; } .bg-transparent { background-color: transparent !important; } .border-red { border-bottom: 2px solid #ff5b5b !important; } .focus-color { background-color: var(--sl-color-warning-200); } .right0, .right-0 { right: 0; } .left0 { left: 0; } .top0, .top-0 { top: 0; } .left-100p { left: 100%; } .bottom0 { bottom: 0; } .tal { text-align: left !important; } .tar { text-align: right !important; } .tac { text-align: center !important; } .paddings { padding: 65px 15px 15px 15px; } ul.inline li { display: inline; white-space: nowrap; } .dashed-line-vert-right { border-right: 1px dashed #93b1da; } .dashed-line-vert-left { border-left: 1px dashed #93b1da; } .text-yellow { color: #ffe798; } .tab-with-subtitle { padding-top: 5px !important; padding-bottom: 4px !important; } #nprogress { color: orange !important; background-color: orange !important; } /* TABLE FIXES */ td .form-group-sm button, .form-group-sm button { font-size: 12px !important; line-height: 1.4 !important; } tr.new-item { color: #333333; border-left: 3px solid #008000; background-color: rgba(0, 128, 0, 0.04); } tr.updated-item { color: #333333; border-left: 3px solid var(--sl-color-primary-950); background-color: rgba(51, 122, 183, 0.04); } tr.selected-item { color: #333333; border-left: none; background-color: var(--sl-color-warning-200); } tr.default-item { color: #333333; border-left: none; background-color: transparent; } tr.hidden-item { visibility: collapse; } tr.display-item { visibility: visible; } .badge-invert { background-color: var(--sl-color-neutral-0); border: 1px solid #cccccc; color: #333333; } .badge-disabled { background-color: var(--sl-color-neutral-200); border: 1px solid #cccccc; color: #999999; } .text-vertical { writing-mode: tb-rl; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .basic-form { background-color: #f9f9f9 !important; border: 1px solid var(--sl-color-neutral-200) !important; padding: 20px 30px; } /* TIMELINE */ #timeline { position: relative; max-width: 1100px; width: 100%; margin: 0 auto; } #timeline .timeline-start, #timeline .timeline-end { margin-left: 1em; display: table; font-size: 18px; font-weight: 900; text-transform: uppercase; padding: 0 23px; color: #fff; max-width: 5%; width: 100%; text-align: center; } #timeline .timeline-center-line { position: absolute; width: 4px; height: 100%; top: 0; left: 25%; margin-left: -2px; background: rgb(80, 80, 80); z-index: 100; } #timeline .timeline-timeline-content { padding-top: 67px; padding-bottom: 67px; } .timeline-action { width: 100%; height: 100%; position: relative; overflow: hidden; margin: 20px 0; } .timeline-action .content-left-container { max-width: 20%; width: 100%; margin-left: 1em; float: left; } .timeline-action .content-right-container { max-width: 70%; width: 100%; float: right; margin-right: 1em; } .timeline-action .timeline-author { display: block; font-weight: 400; font-size: 14px; line-height: 24px; color: #242424; text-align: right; } .timeline-action .content-left { position: relative; width: auto; border: 1px solid var(--sl-color-neutral-200); background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); padding: 1.1em; } .timeline-action .content-right { position: relative; width: auto; border: 1px solid var(--sl-color-neutral-200); background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); padding: 1.1em; } .timeline-action p { margin: 0 0 0 60px; padding: 0; font-weight: 400; color: #242424; font-size: 14px; line-height: 24px; position: relative; } .timeline-action p span.timeline-date { position: absolute; color: rgb(80, 80, 80); } .timeline-action .content-left:before { position: absolute; top: -5px; font-size: 23px; color: #fff; } .timeline-action .content-right:before { position: absolute; top: -5px; font-size: 23px; color: #fff; } .timeline-action .content-left:before { content: "\f0da"; font-family: "Font Awesome 5 Pro"; font-weight: 400; right: -10px; color: var(--sl-color-neutral-200); } .timeline-action .content-right:before { content: "\f0d9"; font-family: "Font Awesome 5 Pro"; font-weight: 400; left: -10px; color: var(--sl-color-neutral-200); } .overview-item { padding-bottom: 0.5em; } .overview-name { font-weight: bold; padding-bottom: 0.2em; } .overview-item:hover { background: whitesmoke; } .overview-description { font-style: italic; } .pdf-theme1-box-color { width: 18px; height: 18px; background: #000000; } .pdf-theme2-box-color { width: 18px; height: 18px; background: #005695; } .simple-list li:hover { background: var(--sl-color-neutral-50); } .simple-list li.active:hover, .simple-list li.active { background: var(--sl-color-warning-200); border: 1px solid #adadad; font-weight: bold; } .blinking { animation: blinker 0.4s cubic-bezier(0.5, 0, 1, 1) infinite alternate; } @keyframes blinker { from { opacity: 1; } to { opacity: 0; } } .rotating { animation: spin 0.6s linear infinite; } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* SHEET PAPER */ .paper { width: 100%; padding: 60px 20px 20px 20px; background-color: #f7f7f7; position: relative; overflow: hidden; box-shadow: inset 1px 1px #e4e4e4; } .paper:before { content: ""; display: block; position: absolute; top: 0; right: 0; border-width: 0 38px 38px 0; border-style: solid; border-color: var(--sl-color-neutral-200) var(--sl-color-neutral-0); border-bottom-left-radius: 8px; box-shadow: 0 0 2px #aaa; transition: all 0.5s ease-in-out; -webkit-border-bottom-left-radius: 8px; -webkit-box-shadow: 0 0 2px #aaa; -moz-box-shadow: 0 0 2px #aaa; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; } .paper:hover:before { border-width: 0 44px 44px 0; } .label-success { background-color: var(--sl-color-success-700); } .label-default { background-color: var(--sl-color-neutral-500); } .label-primary { background-color: var(--sl-color-primary-900); } .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover { background-color: var(--sl-color-success-500); border-color: var(--sl-color-success-500); color: var(--sl-color-neutral-0); } /* WIZARD */ .wizard .audible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .wizard .steps { padding-top: 30px; padding-bottom: 37.5px; } .wizard .steps > ul { list-style: none; padding-left: 0; display: flex; justify-content: space-between; background-image: linear-gradient(#f5f6fa, #f5f6fa); background-size: calc(100% - 75px) 2px; background-repeat: no-repeat; background-position: center 20px; margin-bottom: 0; } .wizard .steps > ul li a { display: inline-block; text-align: center; } .wizard .steps > ul li a:hover { text-decoration: none; } .wizard .steps > ul li .bd-wizard-step-indicator { position: relative; display: inline-block; width: 25px; height: 25px; margin-top: 8.5px; margin-bottom: 8.5px; border-radius: 50%; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15); background-color: var(--sl-color-neutral-0); transition: all 0.4s ease-in-out, box-shadow 0s; } .wizard .steps > ul li .bd-wizard-step-indicator::before { font-family: "Font Awesome 5 Pro", sans-serif; content: "\f192"; font-size: 8px; width: 8px; height: 8px; opacity: 0.42; color: #6f787d; transition: all 0.4s ease-in-out; } .wizard .steps > ul li .bd-wizard-step-title { font-size: 14px; font-weight: bold; color: #6f787d; margin-top: 10px; } .wizard .steps > ul li.current { background: transparent !important; } .wizard .steps > ul li.current .bd-wizard-step-indicator { background-color: var(--sl-color-warning-200); box-shadow: 0 0 0 8px rgba(234, 228, 150, 0.38); } .wizard .steps > ul li.done .bd-wizard-step-indicator { background-color: var(--sl-color-success-700); box-shadow: 0 0 0 8px rgba(24, 139, 102, 0.15); } .wizard .steps > ul li.current .bd-wizard-step-indicator::before { content: ""; } .wizard .steps > ul li.done .bd-wizard-step-indicator::before { content: "\f00c"; color: #fff; opacity: 1; font-size: 13px; top: 2px; position: relative; } .wizard .content { margin-bottom: 45px; } .wizard .content .title { display: none; } .wizard .content .bd-wizard-step-title { font-size: 20px; font-weight: bold; color: #7b7f89; margin-bottom: 45px; } .wizard .content p { font-size: 16px; color: #030303; } .wizard .content .form-control { padding: 16px 29px; min-height: 50px; border-radius: 4px; border: solid 1px #ececec; } .wizard .content .form-control::-webkit-input-placeholder { color: #919aa3; } .wizard .content .form-control::-moz-placeholder { color: #919aa3; } .wizard .content .form-control:-ms-input-placeholder { color: #919aa3; } .wizard .content .form-control::-ms-input-placeholder { color: #919aa3; } .wizard .content .form-control::placeholder { color: #919aa3; } .wizard .actions > ul { list-style: none; padding-left: 0; display: flex; } .wizard .actions li a:hover { text-decoration: none !important; } .wizard .actions li a { display: inline-block; border-radius: 6px; background-color: #00d69f; padding: 16px 30px; color: #fff; font-weight: bold; text-decoration: none; } .wizard .actions li.disabled { display: none; } .flex-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .form-disabled * { pointer-events: none; opacity: 0.5; } .form-disabled .rotating { opacity: 1 !important; } .form-disabled .busy-indicator { position: absolute; z-index: 999; top: 20%; left: 46%; } /** Chat boot */ .sf-activator-frame { bottom: 1em !important; right: 12em !important; } a:focus, a:hover { color: var(--sl-color-primary-600); text-decoration: underline; } .datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover { background-image: linear-gradient( to bottom, var(--sl-color-primary-500), var(--sl-color-primary-700) ); } /** grid table */ grid-table { display: grid; } grid-table grid-header, grid-table row { display: grid; gap: var(--sl-spacing-small); align-items: center; /* Below attribute should be placed in component directly */ /* grid-template-columns: repeat(8, 1fr); */ } grid-table grid-header { align-items: start; padding-bottom: var(--sl-spacing-small); } grid-table grid-header column { padding-right: 10px; } grid-table grid-body { display: grid; grid-auto-rows: minmax(40px, auto); } grid-table grid-body row { border-top: 1px solid var(--sl-color-neutral-200); cursor: pointer; } grid-table grid-body row.header column { border-right: 1px solid var(--sl-color-neutral-200); } grid-table grid-body row.header column:last-child { border-right: none; } grid-table grid-body row:hover { background: var(--sl-color-neutral-100); } .workers tr td { } .workers tr.not-editable td { }