/*input:autofill, input:-webkit-autofill, input:-webkit-autofill::first-line, input:-webkit-autofill:focus, input:-webkit-autofill:focus::first-line, input:-webkit-autofill:active, input:-webkit-autofill:active::first-line { font-size: 16px; color: red !important;-webkit-text-fill-color: red;font-size-adjust: none !important; }*/ input[type="color"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="color"]::-moz-color-swatch-wrapper { width: 30px; float: right; } input[type="color"]::-webkit-color-swatch-wrapper { width: 30px; float: right; } input[type="color"]::-moz-color-swatch { border-radius: 3px; border: 1px solid #dee2e6; } input[type="color"]::-webkit-color-swatch { border-radius: 3px; border: 1px solid #dee2e6; } .unselected input[type=color]::-webkit-color-swatch { background: transparent !important; opacity: 0 !important; } input:focus + label + .iconpicker-popover { opacity: 1 !important; } input[type="file"]::-webkit-file-upload-button { display: none; } input[type="file"]::file-selector-button { display: none; } textarea { height: 106px !important; } textarea.form-control-4-lines { height: 130px !important; } textarea.form-control-6-lines { height: 178px !important; } .v1 .select2-selection { height: 58px !important; } .v1 .select2-selection__rendered { height: 56px !important; padding: 26px 36px 10px 12px !important; line-height: 20px !important; } .DZ_container { position: relative; min-height: 80px; border: 1px solid #dee2e6; border-radius: 0.375rem; background: #D6E0EE; color: #646464; overflow: hidden; } .dz-tall .DZ_container { min-height: 240px; } .dz-small .DZ_container { min-height: 120px; } .dz-tall.dz-square .DZ_container { min-width: 240px; } .dz-small.dz-square .DZ_container { min-width: 120px; } .DZ_container:hover, .DZ_container.filedrag { background: #3466AA; color: white; } .DZ_image { position: absolute; z-index: 1; left: 10px; top: 10px; right: 10px; bottom: 10px; background-position: center; background-repeat: no-repeat; background-size: contain; } .DZ_text { position: absolute; z-index: 2; left: 10px; top: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; } .DZ_text > div { display: flex; flex-wrap: wrap; justify-content: center; } .DZ_text i { font-size: 18px; } .DZ_text span { display: block; width: 100%; text-align: center; font-size: 14px; } .DZ_dropzone { position: absolute; z-index: 3; left: 0; top: 0; right: 0; bottom: 0; border: none !important; background: none !important; } .DZ_dropzone .dz-preview { width: 100%; margin: 0; padding: 6px 0; border: none; background: none; box-shadow: none; } .DZ_dropzone .dz-preview .dz-details { width: 100%; height: 19px; margin: 0; padding: 0; border: none; background: none; } .DZ_dropzone .dz-preview .dz-details .dz-filename { width: 100%; padding: 0 6px; } .DZ_dropzone .dz-preview .dz-details .dz-size { display: none; } .DZ_dropzone .dz-preview .dz-details img { display: none !important; } .DZ_dropzone .dz-preview .dz-progress { top: 25px; margin: 0; } .DZ_dropzone .dz-preview .dz-success-mark, .DZ_dropzone .dz-preview .dz-error-mark, .DZ_dropzone .dz-preview .dz-error-message { display: none; } .DZ_list > div { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 1px; } .DZ_list > div:before { display: block; content: ""; position: absolute; left: 3px; bottom: 0; right: 3px; height: 1px; background: #D6E0EE; } .DZ_list > div > div:first-child { font-size: 14px; line-height: 24px; } .DZ_list > div > div:last-child { cursor: pointer; transition: all 0.3s; } .DZ_list > div > div:last-child:hover { color: var(--rot); } .bwForm { display: flex; flex-wrap: wrap; padding: 1rem; } .bwForm > div { padding: 1rem; } .bwButtons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; } /************************************************************************************************************************************/ /******* V2 *******/ .v2.form-floating:after { display: none; content: ""; position: absolute; z-index: 1; top: 10px; right: 9px; font: 12px/16px "Font Awesome 6 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; color: #646464; } .v2.form-floating.v2-select:after { display: block; content: "\f078"; } .v2.form-floating.v2-time:after { display: block; content: "\f017"; } .v2.form-floating.v2-date:after { display: block; content: "\f073"; } .v2.form-floating.v2-icon:after { display: block; content: "\f425"; } .v2.form-floating.v2-number input { padding-right: 32px; } .v2.form-floating.v2-number > div { position: absolute; z-index: 100; display: flex; align-items: center; justify-content: center; width: 24px; right: 4px; height: 18px; font-size: 12px; line-height: 16px; text-align: center; cursor: pointer; } .v2.form-floating.v2-number > div:hover { background-color: var(--gray-verylight); } .v2.form-floating.v2-number > div:nth-last-child(2) { top: 2px; padding-top: 2px; } .v2.form-floating.v2-number > div:nth-last-child(1) { top: 19px; padding-bottom: 2px; } .v2.form-floating textarea, .v2.form-floating select, .v2.form-floating input { position: relative; z-index: 2; height: 39px !important; padding: 5px 15px !important; line-height: 22px !important; background: transparent !important; -webkit-box-shadow: 0 0 0 30px transparent inset !important; } .v2.form-floating input[type="number"] { padding: 0 0 0 15px !important; line-height: 32px !important; } .v2.form-floating textarea { height: 78px !important; } .v2.form-floating textarea.form-control-4-lines { height: 100px !important; } .v2.form-floating textarea.form-control-6-lines { height: 144px !important; } .v2.form-floating>label { position: absolute; z-index: 3; top: 10px !important; left: 7px !important; width: auto !important; max-width: calc(100% - 20px); padding: 3px 5px !important; height: 24px !important; line-height: 12px !important; font-size: 12px !important; color: rgb(150,150,150) !important; border: none !important; background: white !important; transform-origin: 0 0; transform: none !important; opacity: 1 !important; transition: all .1s ease-in-out; } .v2.form-floating textarea:focus + label, .v2.form-floating input:focus + label { left: 12px !important; top: -5px !important; height: 16px !important; font-size: 12px !important; padding: 0 5px !important; color: rgb(134,183,254) !important; } .v2.form-floating.v2-select > label, .v2.form-floating.v2-time > label, .v2.form-floating.v2-date > label, .v2.form-floating.v2-icon > label { max-width: calc(100% - 32px) !important; } .v2.form-floating select + label, .v2.form-floating select + span + label, .v2.form-floating textarea:not(:placeholder-shown) + label, .v2.form-floating input:not(:placeholder-shown) + label { left: 12px !important; top: -5px !important; height: 16px !important; font-size: 12px !important; padding: 0 5px !important; } .v2.form-floating.v2-color input[type="color"] { padding: 5px 35px 5px 15px !important; } .v2.form-floating.v2-color input[type="color"] + label { left: 7px !important; top: 10px !important; width: calc(100% - 90px) !important; height: 24px !important; font-size: 12px !important; padding: 3px 5px !important; } .v2.form-floating.v2-color i { position: absolute; z-index: 100; top: 5px; right: 5px; padding: 5px; cursor: pointer; } .v2.form-floating.v2-color i:hover { color: var(--danger); } .form-control, .form-control-plaintext, .form-select { height: calc(2rem + calc(var(--bs-border-width) * 2)) !important; min-height: calc(2rem + calc(var(--bs-border-width) * 2)) !important; line-height: 2; } .v2.has-button i { width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; width: 30px; position: absolute; z-index: 2; top: 3px; right: 3px; color: #969696; } .v2.has-button input { padding: 5px 51px 5px 15px !important; } .v2.has-button label { max-width: calc(100% - 56px) !important; } .v2.has-button input[type=text] + label + i:before { content: "\f070"; } .v2.has-button input[type=password] + label + i:before { content: "\f06e"; } .v2 .btn { padding: 5px 10px; color: var(--gray-dark) !important; background: var(--blue10) !important; border-color: var(--blue10) !important; } .v2 .btn:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .v2 .btn.btn-primary { color: white !important; background: var(--blue) !important; border-color: var(--blue) !important; } .v2 .btn.btn-primary:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .v2 .btn.btn-secondary { color: white !important; background: var(--blue50) !important; border-color: var(--blue50) !important; } .v2 .btn.btn-secondary:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .v2 .btn.btn-success { color: white !important; background: var(--success) !important; border-color: var(--success) !important; } .v2 .btn.btn-success:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .v2 .btn.btn-danger { color: white !important; background: var(--danger) !important; border-color: var(--danger) !important; } .v2 .btn.btn-danger:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .v2 .btn.btn-hover-success:hover { color: white !important; background: var(--success) !important; border-color: var(--success) !important; } .v2 .btn.btn-hover-danger:hover { color: white !important; background: var(--danger) !important; border-color: var(--danger) !important; } .v2 .btn:disabled { color: var(--gray-light) !important; background: var(--gray-ultralight) !important; border-color: var(--gray-ultralight) !important; } .v2 .btn > * + * { margin-left: 0.5rem; } .v2 .btn.text-jusitified { display: flex; align-items: center; } .v2 .btn.text-jusitified > * + * { margin-left: auto; } /************************************************************************************************************************************/ /******* V3 *******/ .v3-spacer { height: 1px; background: var(--gray-verylight); } .v3 { position: relative; min-height: 36px; } .v3:after { display: none; content: ""; position: absolute; z-index: 1; top: 9px; right: 9px; font: 12px/16px "Font Awesome 6 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; } .v3.v3-select:after { display: block; content: "\f078"; } .v3.v3-fa:after { display: block; content: var(--content); } .v3.v3-time:after { display: block; content: "\f017"; } .v3.v3-date:after { display: block; content: "\f073"; } .v3.v3-icon:after { display: block; content: "\f425"; } .v3.form-floating textarea, .v3.form-floating select, .v3 input { position: relative; z-index: 2; height: 36px !important; padding: 5px 15px !important; line-height: 22px !important; background: transparent !important; -webkit-box-shadow: 0 0 0 30px transparent inset !important; } .v3.form-floating input[type="number"] { padding: 0 0 0 15px !important; line-height: 32px !important; } .v3.form-floating textarea { height: 78px !important; } .v3.form-floating textarea.form-control-4-lines { height: 100px !important; } .v3.form-floating textarea.form-control-6-lines { height: 144px !important; } .v3>label { position: absolute; z-index: 3; top: -10px !important; left: 12px !important; width: auto !important; max-width: calc(100% - 20px); padding: 0 5px !important; height: 16px !important; line-height: 16px !important; font-size: 12px !important; color: var(--windows11-font) !important; border: none !important; transform-origin: 0 0; transform: none !important; opacity: 1 !important; transition: all .1s ease-in-out; overflow: hidden; text-align: start; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .v3.form-floating textarea:focus + label, .v3 input:focus + label { color: rgb(134,183,254) !important; } .v2.form-floating.v2-select > label, .v2.form-floating.v2-fa > label, .v2.form-floating.v2-time > label, .v2.form-floating.v2-date > label, .v2.form-floating.v2-icon > label { max-width: calc(100% - 32px) !important; } .v3.has-button i { width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; width: 30px; position: absolute; z-index: 2; top: 3px; right: 3px; color: #969696; } .v3.v3-color input[type="color"] { padding: 5px 35px 5px 15px !important; } /*.v3.v3-color input[type="color"] + label { left: 7px !important; top: 6px !important; width: calc(100% - 84px) !important; height: 24px !important; font-size: 16px !important; padding: 3px 5px !important; }*/ .v3.v3-color i { position: absolute; z-index: 100; top: 5px; right: 5px; padding: 5px; cursor: pointer; } .v3.v3-color i:hover { color: var(--danger); } .v3.has-button input { padding: 5px 51px 5px 15px !important; } .v3.has-button label { max-width: calc(100% - 56px) !important; } .v3.has-button input[type=text] + label + i:before { content: "\f070"; } .v3.has-button input[type=password] + label + i:before { content: "\f06e"; } .select2-container *, .select2 * { border-color: #dee2e6 !important; } .select2-selection { height: 36px !important; } .select2-container--focus .select2-selection { border-color: #86b7fe !important; } .select2-selection__rendered { height: 34px !important; padding: 5px 25px 5px 15px !important; line-height: 24px !important; } .select2-selection__arrow { display: none !important; } body > .datepicker { margin-top: 5px; } body > .datepicker > div { display: block; } body > .bootstrap-timepicker-widget { margin-top: 5px; } body > .bootstrap-timepicker-widget input { width: 35px !important; border: 1px solid #dee2e6 !important; } .bi { font-family: 'Font Awesome 6 Free'; font-weight: 900; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto; } .bi-chevron-left:before { content: "\f053"; } .bi-chevron-up:before { content: "\f077"; } .bi-chevron-right:before { content: "\f054"; } .bi-chevron-down:before { content: "\f078"; } /* .btn { padding: 5px 12px; } */ .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* Marco Test */ .form-floating:after { display: none; content: ""; position: absolute; z-index: 1; top: 10px; right: 9px; font: 12px/16px "Font Awesome 6 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; font-weight: 900; color: #646464; } .form-floating-select:after { display: block; content: "\f078"; } .form-floating-time:after { display: block; content: "\f017"; } .form-floating-date:after { display: block; content: "\f073"; } .form-floating-icon:after { display: block; content: "\f425"; } .form-floating textarea, .form-floating select, .form-floating input { position: relative; z-index: 2; height: 39px !important; padding: 5px 15px !important; line-height: 22px !important; background: transparent; -webkit-box-shadow: 0 0 0 30px transparent inset !important; } .form-floating input[type="number"] { padding: 0 0 0 15px !important; line-height: 32px !important; } .form-floating textarea { height: 78px !important; } .form-floating textarea.form-control-4-lines { height: 100px !important; } .form-floating textarea.form-control-6-lines { height: 144px !important; } .form-floating>label { position: absolute; z-index: 3; top: 10px !important; left: 7px !important; width: auto !important; max-width: calc(100% - 20px); padding: 3px 5px !important; height: 24px !important; line-height: 12px !important; font-size: 12px !important; color: rgb(150,150,150) !important; border: none !important; background: white !important; transform-origin: 0 0; transform: none !important; opacity: 1 !important; transition: all .1s ease-in-out; } .form-floating textarea:focus + label, .form-floating input:focus + label { left: 7px !important; top: -5px !important; height: 16px !important; font-size: 12px !important; padding: 0 5px !important; color: rgb(134,183,254) !important; } .form-floating-select > label, .form-floating-time > label, .form-floating-date > label, .form-floating-icon > label { max-width: calc(100% - 32px) !important; } .form-floating select + label, .form-floating select + span + label, .form-floating textarea:not(:placeholder-shown) + label, .form-floating input:not(:placeholder-shown) + label { left: 7px !important; top: -5px !important; height: 16px !important; font-size: 12px !important; padding: 0 5px !important; } .form-floating-color input[type="color"] { padding: 5px 35px 5px 15px !important; } .form-floating-color input[type="color"] + label { left: 7px !important; top: 6px !important; width: calc(100% - 84px) !important; height: 24px !important; font-size: 16px !important; padding: 3px 5px !important; } .form-floating-color i { position: absolute; z-index: 100; top: 5px; right: 5px; padding: 5px; cursor: pointer; } .form-floating-color i:hover { color: var(--danger); } .form-control, .form-control-plaintext, .form-select { height: calc(2rem + calc(var(--bs-border-width) * 2)) !important; min-height: calc(2rem + calc(var(--bs-border-width) * 2)) !important; line-height: 2; } .has-button i { width: 30px; height: 30px; line-height: 30px; text-align: center; cursor: pointer; width: 30px; position: absolute; z-index: 2; top: 3px; right: 3px; color: #969696; } .has-button input { padding: 5px 51px 5px 15px !important; } .has-button label { max-width: calc(100% - 56px) !important; } .has-button input[type=text] + label + i:before { content: "\f070"; } .has-button input[type=password] + label + i:before { content: "\f06e"; } .btn { height: 39px; line-height: 27px; padding: 5px 10px; color: var(--gray-dark) !important; background: var(--blue10) !important; border-color: var(--blue10) !important; } .btn:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .btn.btn-primary { color: white !important; background: var(--blue) !important; border-color: var(--blue) !important; } .btn.btn-primary:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .btn.btn-secondary { color: white !important; background: var(--blue50) !important; border-color: var(--blue50) !important; } .btn.btn-secondary:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .btn.btn-success { color: white !important; background: var(--success) !important; border-color: var(--success) !important; } .btn.btn-success:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .btn.btn-danger { color: white !important; background: var(--danger) !important; border-color: var(--danger) !important; } .btn.btn-danger:hover { color: white !important; background: var(--gray-dark) !important; border-color: var(--gray-dark) !important; } .btn.btn-hover-success:hover { color: white !important; background: var(--success) !important; border-color: var(--success) !important; } .btn.btn-hover-danger:hover { color: white !important; background: var(--danger) !important; border-color: var(--danger) !important; } .btn:disabled { color: var(--gray-light) !important; background: var(--gray-ultralight) !important; border-color: var(--gray-ultralight) !important; } .btn > * + * { margin-left: 0.5rem; } .btn.text-jusitified { display: flex; align-items: center; } .btn.text-jusitified > * + * { margin-left: auto; } .form-floating-select > label, .form-floating-fa > label, .form-floating-time > label, .form-floating-date > label, .form-floating-icon > label { max-width: calc(100% - 32px) !important; } table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover td{ background-color: #d9edf7 !important; } table.dataTable tbody tr.selected th.focus,table.dataTable tbody tr.selected td.focus { outline: none !important; } table.dataTable tbody tr.selected > * { color: black; } table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * { box-shadow: none !important; } table.dataTable tbody th.focus, table.dataTable tbody td.focus { outline: none !important; } table.dataTable thead th, table.dataTable tfoot th { font-weight: normal; } .bwDatatable .dataTables_scrollBody > table > tbody > tr > td:first-child { font-weight: normal; }