@tech-diefra/fluig-ui 1.2.1 → 1.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/style.css +1316 -1
  2. package/package.json +1 -1
package/dist/style.css CHANGED
@@ -1 +1,1316 @@
1
- @charset "UTF-8";.dfe{--colorPrimary: #00916d;--colorSecondaryOne: #006f62;--colorSecondaryTwo: #c4d600;--colorAux01: #2898bd;--colorAux02: #206a83;--colorAux03: #cd519d;--colorAux04: #943d73;--dfeErrorColor: #ff5630;--green: #24d456;--red: #fc2f25;--orange: #ff7f30;--yellow: #edf11d;--purple: #a230ff;--blue: #0e81e6}.page-header :is(h1,h2,h3,h4,h5,h6){color:var(--colorSecondaryOne)!important;padding:0!important;margin:0!important}.page-header>h3{display:flex;align-items:center;font-size:22px;gap:10px}.form-group>label{font-weight:200!important;color:var(--colorPrimary)!important;font-size:16px}input:focus,textarea:focus,select:focus{border-color:var(--colorPrimary)!important}textarea{resize:none;max-height:60px}.text-danger{font-size:12px;margin-top:1px!important}.select-view{display:inline-block;width:100%;border:1px solid #ccc;border-radius:4px;background-color:#fff}.select-wrapper{position:relative;width:100%}.select-control{height:34px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;overflow:hidden;width:100%;font-size:14px;font-weight:200;border:1px solid #ccc;border-radius:4px;background-color:#fff;padding:10px 14px}.select-display{width:100%;height:34px;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center}.select-dropdown{position:absolute;top:66px;left:0;right:0;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 6px #0000001a}.select-search{padding:5px 10px;border-bottom:1px solid #eee}.select-search-input{width:100%;font-size:12px;padding:4px 10px;border:1px solid #ccc;border-radius:4px}.select-options{list-style:none;margin:0;padding:6px;max-height:200px;overflow-y:auto;margin-bottom:0!important}.select-option{padding:8px;font-size:14px;cursor:pointer;border-radius:4px;white-space:nowrap;overflow:hidden;margin:0!important}.select-option.readOnly{color:#888;cursor:default}.handleHover:hover{background-color:#00916d;color:#fff;font-weight:700}.border-red{border:1px solid #c80000!important}.text-danger{margin-top:4px;color:#c80000!important;margin-bottom:0!important}.select-wrapper>.readOnly{background-color:#eee;cursor:default}.select-display.readOnly{opacity:.5}.checkbox-group-custom{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 20px}.custom-checkbox{width:30%;position:relative;display:flex;align-items:center;cursor:pointer;font-size:14px;-webkit-user-select:none;user-select:none;padding-left:20px;white-space:noWrap;margin:0!important}.custom-checkbox input{position:absolute;opacity:0;cursor:pointer}.custom-checkbox .checkmark{position:absolute;top:1px;left:0;height:16px;width:16px;background-color:#fff;border:2px solid #a5a5a5;border-radius:100%;transition:all .2s ease}.custom-checkbox.checked .checkmark,.custom-checkbox:hover .checkmark{border-color:var(--colorPrimary)}.custom-checkbox.checked .checkmark:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background-color:var(--colorPrimary);border-color:var(--colorPrimary);border-radius:100%}.custom-checkbox>span{width:50%;color:#838383;font-weight:200;margin:0}.custom-checkbox.readOnly,.checkbox-group-custom.readOnly{pointer-events:none;opacity:.9}.btn-group{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.btn-group>label.btn{--btnBase: #cccccc;--btnText: #555;--bgColor: var(--customColor, var(--btnBase));--hoverColor: color-mix(in srgb, var(--bgColor), white 50%);--borderColor: color-mix(in srgb, var(--bgColor), black 20%);min-width:200px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:1px solid var(--btnBase);border-radius:6px;cursor:pointer;background-color:#fff;color:var(--btnText);transition:all .2s ease-in-out;font-weight:400}.btn-group>label.btn:hover{background-color:var(--hoverColor);border-color:var(--borderColor);color:var(--borderColor)}.btn-group label.btn:has(input[type=radio]:checked){background-color:var(--bgColor)!important;border-color:var(--borderColor)!important;color:#fff!important;box-shadow:0 2px 5px #00000026;font-weight:600;cursor:default}.btn-group label.btn i{font-size:1.1em}.btn-group.view-mode label.btn{opacity:.5;pointer-events:none;filter:grayscale(100%)}.btn-group.view-mode label.btn:has(input[type=radio]:checked){opacity:1;filter:none;background-color:var(--bgColor)!important;border-color:var(--borderColor)!important;color:#fff!important}.column{display:flex!important;flex-direction:column!important}.react-datepicker__navigation-icon:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{border-color:#ccc;border-style:solid;border-width:3px 3px 0 0;content:"";display:block;height:9px;position:absolute;top:6px;width:9px}.react-datepicker-wrapper{display:inline-block;padding:0;border:0}.react-datepicker{font-family:Helvetica Neue,helvetica,arial,sans-serif;font-size:.8rem;background-color:#fff;color:#000;border:1px solid #aeaeae;border-radius:.3rem;display:inline-block;position:relative;line-height:initial}.react-datepicker--time-only .react-datepicker__time-container{border-left:0}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker-popper{z-index:1;line-height:0}.react-datepicker-popper .react-datepicker__triangle{stroke:#aeaeae}.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle{fill:#f0f0f0;color:#f0f0f0}.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle{fill:#fff;color:#fff}.react-datepicker__header{text-align:center;background-color:#f0f0f0;border-bottom:1px solid #aeaeae;border-top-left-radius:.3rem;padding:8px 0;position:relative}.react-datepicker__header--time{padding-bottom:8px;padding-left:5px;padding-right:5px}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:.3rem}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 15px}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:#000;font-weight:700;font-size:.944rem}h2.react-datepicker__current-month{padding:0;margin:0}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:2px;padding:0;border:none;z-index:1;height:32px;width:32px;text-indent:-999em;overflow:hidden}.react-datepicker__navigation--previous{left:2px}.react-datepicker__navigation--next{right:2px}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:85px}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto}.react-datepicker__navigation--years-previous{top:4px}.react-datepicker__navigation--years-upcoming{top:-4px}.react-datepicker__navigation:hover *:before{border-color:#a6a6a6}.react-datepicker__navigation-icon{position:relative;top:-1px;font-size:20px;width:0}.react-datepicker__navigation-icon--next{left:-2px}.react-datepicker__navigation-icon--next:before{transform:rotate(45deg);left:-7px}.react-datepicker__navigation-icon--previous{right:-2px}.react-datepicker__navigation-icon--previous:before{transform:rotate(225deg);right:-7px}.react-datepicker__month-container{float:left}.react-datepicker__year{margin:.4rem;text-align:center}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:180px}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__month{margin:.4rem;text-align:center}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:2px}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:5px 0 10px 15px;text-align:left}.react-datepicker__input-time-container .react-datepicker-time__caption,.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:10px}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]{-moz-appearance:textfield}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:5px;display:inline-block}.react-datepicker__time-container{float:right;border-left:1px solid #aeaeae;width:85px}.react-datepicker__time-container--with-today-button{display:inline;border:1px solid #aeaeae;border-radius:.3rem;position:absolute;right:-87px;top:0}.react-datepicker__time-container .react-datepicker__time{position:relative;background:#fff;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:85px;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:.3rem}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(195px + .85rem);overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:30px;padding:5px 10px;white-space:nowrap}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:#f0f0f0}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:#216ba5;color:#fff;font-weight:700}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:#216ba5}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:#ccc}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent}.react-datepicker__week-number{color:#ccc;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer}.react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__week-number--selected{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__week-number--selected:hover{background-color:#1d5d90}.react-datepicker__day-names{white-space:nowrap;margin-bottom:-8px}.react-datepicker__week{white-space:nowrap}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:#000;display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:.166rem}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer}.react-datepicker__day:not([aria-disabled=true]):hover,.react-datepicker__month-text:not([aria-disabled=true]):hover,.react-datepicker__quarter-text:not([aria-disabled=true]):hover,.react-datepicker__year-text:not([aria-disabled=true]):hover{border-radius:.3rem;background-color:#f0f0f0}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:700}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:.3rem;background-color:#3dcc4a;color:#fff}.react-datepicker__day--highlighted:not([aria-disabled=true]):hover,.react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,.react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover{background-color:#32be3f}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:#f0f}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:green}.react-datepicker__day--holidays,.react-datepicker__month-text--holidays,.react-datepicker__quarter-text--holidays,.react-datepicker__year-text--holidays{position:relative;border-radius:.3rem;background-color:#ff6803;color:#fff}.react-datepicker__day--holidays .overlay,.react-datepicker__month-text--holidays .overlay,.react-datepicker__quarter-text--holidays .overlay,.react-datepicker__year-text--holidays .overlay{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__day--holidays:not([aria-disabled=true]):hover,.react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,.react-datepicker__year-text--holidays:not([aria-disabled=true]):hover{background-color:#cf5300}.react-datepicker__day--holidays:hover .overlay,.react-datepicker__month-text--holidays:hover .overlay,.react-datepicker__quarter-text--holidays:hover .overlay,.react-datepicker__year-text--holidays:hover .overlay{visibility:visible;opacity:1}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:.3rem;background-color:#216ba5;color:#fff}.react-datepicker__day--selected:not([aria-disabled=true]):hover,.react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__day--in-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,.react-datepicker__year-text--in-range:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:.3rem;background-color:#bad9f1;color:#000}.react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,.react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover{background-color:#1d5d90}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:#216ba580}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:#f0f0f0;color:#000}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:#ccc}.react-datepicker__day--disabled .overlay,.react-datepicker__month-text--disabled .overlay,.react-datepicker__quarter-text--disabled .overlay,.react-datepicker__year-text--disabled .overlay{position:absolute;bottom:70%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:4px;border-radius:4px;white-space:nowrap;visibility:hidden;opacity:0;transition:visibility 0s,opacity .3s ease-in-out}.react-datepicker__input-container{position:relative;display:inline-block;width:100%}.react-datepicker__input-container .react-datepicker__calendar-icon{position:absolute;padding:.5rem;box-sizing:content-box}.react-datepicker__view-calendar-icon input{padding:6px 10px 5px 25px}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:1px solid transparent;border-radius:.3rem;position:relative}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:#b3b3b3}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-16px;top:0}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:#f0f0f0;position:absolute;width:50%;left:25%;top:30px;z-index:1;text-align:center;border-radius:.3rem;border:1px solid #aeaeae}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:150px;overflow-y:scroll}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:20px;width:100%;display:block;margin-left:auto;margin-right:auto}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:.3rem;border-top-right-radius:.3rem}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:#ccc}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:#b3b3b3}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:#b3b3b3}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:15px}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 6px 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle}.react-datepicker__close-icon:after{cursor:pointer;background-color:#216ba5;color:#fff;border-radius:50%;height:16px;width:16px;padding:2px;font-size:12px;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:"×"}.react-datepicker__close-icon--disabled{cursor:default}.react-datepicker__close-icon--disabled:after{cursor:default;background-color:#ccc}.react-datepicker__today-button{background:#f0f0f0;border-top:1px solid #aeaeae;cursor:pointer;text-align:center;font-weight:700;padding:5px 0;clear:left}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:#000c;left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem}@media (max-width: 400px),(max-height: 550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem}.react-datepicker__children-container{width:13.8rem;margin:.4rem;padding-right:.2rem;padding-left:.2rem;height:auto}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap}.react-datepicker__calendar-icon{width:1em;height:1em;vertical-align:-.125em}.react-datepicker__header__dropdown{display:none}.react-datepicker__header{background-color:var(--colorPrimary)}.react-datepicker__navigation-icon:before{border-color:#fff}.react-datepicker__current-month{font-size:16px!important;color:#fff!important;margin:10px!important}.react-datepicker__navigation{border-radius:4px;margin-top:10px;top:5px;width:20px;height:20px}.react-datepicker__navigation-icon{top:10px}.react-datepicker__day-names{background-color:#eee}.react-datepicker__day-name{color:#858585}.react-datepicker__day--today{background-color:var(--colorSecondaryTwo);border-radius:4px}.react-datepicker__day--keyboard-selected{border:1px dashed var(--colorSecondaryTwo);background-color:#c4d6002b}.react-datepicker__day--selected{background-color:var(--colorPrimary)}.react-datepicker-wrapper{width:100%}.react-datepicker__input-container{width:100%;font-size:10px}.react-datepicker__day--selected:after{background-color:var(--colorPrimary)}.react-datepicker__close-icon:after{background-color:var(--colorPrimary);font-size:16px;display:flex;align-items:center;justify-content:center}.status-badge{--badgeMainColor: var(--customColor, #3a3a3b);background:linear-gradient(45deg,var(--badgeMainColor) 0%,var(--badgeMainColor) 50%,var(--badgeMainColor) 100%);background:linear-gradient(45deg,color-mix(in srgb,var(--badgeMainColor),white 30%) 0%,var(--badgeMainColor) 70%,color-mix(in srgb,var(--badgeMainColor),black 10%) 100%);width:100%;height:34px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:3px;color:#fff;font-weight:400;font-size:14px;font-style:italic;transition:all .3s ease}.status-badge.default{--badgeMainColor: #555}.header-actions{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:16px}.header-actions>h3{margin:0!important;font-weight:600;color:#58595b}.header-actions>div{display:flex;gap:8px}.header-handle{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.handle-actions{display:flex;align-items:center;gap:16px}.table-wrapper{width:100%;margin-bottom:20px;border-bottom:1px solid rgb(228,228,228)}.table-wrapper h3{margin:0!important}.table-fixed .table-scroll{overflow-x:auto}.table-fluid .table-scroll{overflow-x:hidden}.table-scroll{position:relative;overflow-y:auto;min-height:400px;max-height:400px}.table-fixed th,.table-fixed td{white-space:nowrap}.table-custom{width:100%;border-collapse:separate;border-spacing:0;border-radius:4px;border:1px solid #ddd;overflow:hidden;background-color:#fff}.btn-add{background-color:var(--colorPrimary, #00916d);border:none;color:#fff!important;border-radius:4px;padding:8px 16px;font-size:14px!important;cursor:pointer;transition:opacity .2s}.btn-add:hover{opacity:.9}.table-custom thead{background-color:#ebebeb}.table-custom thead tr th{position:sticky;top:0;z-index:2;padding:12px 16px;border-bottom:2px solid #ddd;border-left:1px solid #ddd;text-align:left;font-weight:700;color:#696969}.table-custom thead tr th:first-child{border-left:none}.table-custom tbody tr td{border-left:1px solid #e1e1e1;padding:12px 16px;vertical-align:middle}.table-custom tbody tr td:first-child{border-left:none}.table-custom tbody tr:nth-child(2n){background-color:#f9f9f9}.table-custom tbody tr:hover{background-color:#f0f0f0}.table-custom th,.table-custom td{overflow:hidden;text-overflow:ellipsis}.table-custom td{flex-wrap:nowrap}.table-custom .form-control{margin-bottom:0!important;height:34px}.text-center{text-align:center}.table-custom tbody tr.empty-row td{height:400px;vertical-align:middle}
1
+ @charset "UTF-8";
2
+ .dfe {
3
+ --colorPrimary: #00916d;
4
+ --colorSecondaryOne: #006f62;
5
+ --colorSecondaryTwo: #c4d600;
6
+ --colorAux01: #2898bd;
7
+ --colorAux02: #206a83;
8
+ --colorAux03: #cd519d;
9
+ --colorAux04: #943d73;
10
+ --dfeErrorColor: #ff5630;
11
+ --green: #24d456;
12
+ --red: #fc2f25;
13
+ --orange: #ff7f30;
14
+ --yellow: #edf11d;
15
+ --purple: #a230ff;
16
+ --blue: #0e81e6;
17
+ }
18
+ .page-header :is(h1, h2, h3, h4, h5, h6) {
19
+ color: var(--colorSecondaryOne) !important;
20
+ padding: 0 !important;
21
+ margin: 0 !important;
22
+ }
23
+ .page-header > h3 {
24
+ display: flex;
25
+ align-items: center;
26
+ font-size: 22px;
27
+ gap: 10px;
28
+ }
29
+ .form-group > label {
30
+ font-weight: 200 !important;
31
+ color: var(--colorPrimary) !important;
32
+ font-size: 16px;
33
+ }
34
+ input:focus,
35
+ textarea:focus,
36
+ select:focus {
37
+ border-color: var(--colorPrimary) !important;
38
+ }
39
+ textarea {
40
+ resize: none;
41
+ max-height: 60px;
42
+ }
43
+ .text-danger {
44
+ font-size: 12px;
45
+ margin-top: 1px !important;
46
+ }
47
+ .select-view {
48
+ display: inline-block;
49
+ width: 100%;
50
+ border: 1px solid #ccc;
51
+ border-radius: 4px;
52
+ background-color: #fff;
53
+ }
54
+ .select-wrapper {
55
+ position: relative;
56
+ width: 100%;
57
+ }
58
+ .select-control {
59
+ height: 34px;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: space-between;
63
+ cursor: pointer;
64
+ overflow: hidden;
65
+ width: 100%;
66
+ font-size: 14px;
67
+ font-weight: 200;
68
+ border: 1px solid #ccc;
69
+ border-radius: 4px;
70
+ background-color: #fff;
71
+ padding: 10px 14px;
72
+ }
73
+ .select-display {
74
+ width: 100%;
75
+ height: 34px;
76
+ white-space: nowrap;
77
+ text-overflow: ellipsis;
78
+ display: flex;
79
+ align-items: center;
80
+ }
81
+ .select-dropdown {
82
+ position: absolute;
83
+ top: 66px;
84
+ left: 0;
85
+ right: 0;
86
+ z-index: 1000;
87
+ background: #fff;
88
+ border: 1px solid #ccc;
89
+ border-radius: 4px;
90
+ box-shadow: 0 2px 6px #0000001a;
91
+ }
92
+ .select-search {
93
+ padding: 5px 10px;
94
+ border-bottom: 1px solid #eee;
95
+ }
96
+ .select-search-input {
97
+ width: 100%;
98
+ font-size: 12px;
99
+ padding: 4px 10px;
100
+ border: 1px solid #ccc;
101
+ border-radius: 4px;
102
+ }
103
+ .select-options {
104
+ list-style: none;
105
+ margin: 0;
106
+ padding: 6px;
107
+ max-height: 200px;
108
+ overflow-y: auto;
109
+ margin-bottom: 0 !important;
110
+ }
111
+ .select-option {
112
+ padding: 8px;
113
+ font-size: 14px;
114
+ cursor: pointer;
115
+ border-radius: 4px;
116
+ white-space: nowrap;
117
+ overflow: hidden;
118
+ margin: 0 !important;
119
+ }
120
+ .select-option.readOnly {
121
+ color: #888;
122
+ cursor: default;
123
+ }
124
+ .handleHover:hover {
125
+ background-color: #00916d;
126
+ color: #fff;
127
+ font-weight: 700;
128
+ }
129
+ .border-red {
130
+ border: 1px solid #c80000 !important;
131
+ }
132
+ .text-danger {
133
+ margin-top: 4px;
134
+ color: #c80000 !important;
135
+ margin-bottom: 0 !important;
136
+ }
137
+ .select-wrapper > .readOnly {
138
+ background-color: #eee;
139
+ cursor: default;
140
+ }
141
+ .select-display.readOnly {
142
+ opacity: 0.5;
143
+ }
144
+ .checkbox-group-custom {
145
+ width: 100%;
146
+ display: grid;
147
+ grid-template-columns: 1fr 1fr 1fr;
148
+ gap: 10px 20px;
149
+ }
150
+ .custom-checkbox {
151
+ width: 30%;
152
+ position: relative;
153
+ display: flex;
154
+ align-items: center;
155
+ cursor: pointer;
156
+ font-size: 14px;
157
+ -webkit-user-select: none;
158
+ user-select: none;
159
+ padding-left: 20px;
160
+ white-space: noWrap;
161
+ margin: 0 !important;
162
+ }
163
+ .custom-checkbox input {
164
+ position: absolute;
165
+ opacity: 0;
166
+ cursor: pointer;
167
+ }
168
+ .custom-checkbox .checkmark {
169
+ position: absolute;
170
+ top: 1px;
171
+ left: 0;
172
+ height: 16px;
173
+ width: 16px;
174
+ background-color: #fff;
175
+ border: 2px solid #a5a5a5;
176
+ border-radius: 100%;
177
+ transition: all 0.2s ease;
178
+ }
179
+ .custom-checkbox.checked .checkmark,
180
+ .custom-checkbox:hover .checkmark {
181
+ border-color: var(--colorPrimary);
182
+ }
183
+ .custom-checkbox.checked .checkmark:after {
184
+ content: "";
185
+ position: absolute;
186
+ top: 50%;
187
+ left: 50%;
188
+ transform: translate(-50%, -50%);
189
+ width: 8px;
190
+ height: 8px;
191
+ background-color: var(--colorPrimary);
192
+ border-color: var(--colorPrimary);
193
+ border-radius: 100%;
194
+ }
195
+ .custom-checkbox > span {
196
+ width: 50%;
197
+ color: #838383;
198
+ font-weight: 200;
199
+ margin: 0;
200
+ }
201
+ .custom-checkbox.readOnly,
202
+ .checkbox-group-custom.readOnly {
203
+ pointer-events: none;
204
+ opacity: 0.9;
205
+ }
206
+ .btn-group {
207
+ display: flex;
208
+ gap: 8px;
209
+ margin-top: 6px;
210
+ flex-wrap: wrap;
211
+ }
212
+ .btn-group > label.btn {
213
+ --btnBase: #cccccc;
214
+ --btnText: #555;
215
+ --bgColor: var(--customColor, var(--btnBase));
216
+ --hoverColor: color-mix(in srgb, var(--bgColor), white 50%);
217
+ --borderColor: color-mix(in srgb, var(--bgColor), black 20%);
218
+ min-width: 200px;
219
+ display: flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+ gap: 6px;
223
+ padding: 8px 16px;
224
+ border: 1px solid var(--btnBase);
225
+ border-radius: 6px;
226
+ cursor: pointer;
227
+ background-color: #fff;
228
+ color: var(--btnText);
229
+ transition: all 0.2s ease-in-out;
230
+ font-weight: 400;
231
+ }
232
+ .btn-group > label.btn:hover {
233
+ background-color: var(--hoverColor);
234
+ border-color: var(--borderColor);
235
+ color: var(--borderColor);
236
+ }
237
+ .btn-group label.btn:has(input[type="radio"]:checked) {
238
+ background-color: var(--bgColor) !important;
239
+ border-color: var(--borderColor) !important;
240
+ color: #fff !important;
241
+ box-shadow: 0 2px 5px #00000026;
242
+ font-weight: 600;
243
+ cursor: default;
244
+ }
245
+ .btn-group label.btn i {
246
+ font-size: 1.1em;
247
+ }
248
+ .btn-group.view-mode label.btn {
249
+ opacity: 0.5;
250
+ pointer-events: none;
251
+ filter: grayscale(100%);
252
+ }
253
+ .btn-group.view-mode label.btn:has(input[type="radio"]:checked) {
254
+ opacity: 1;
255
+ filter: none;
256
+ background-color: var(--bgColor) !important;
257
+ border-color: var(--borderColor) !important;
258
+ color: #fff !important;
259
+ }
260
+ .column {
261
+ display: flex !important;
262
+ flex-direction: column !important;
263
+ }
264
+ .react-datepicker__navigation-icon:before,
265
+ .react-datepicker__year-read-view--down-arrow,
266
+ .react-datepicker__month-read-view--down-arrow,
267
+ .react-datepicker__month-year-read-view--down-arrow {
268
+ border-color: #ccc;
269
+ border-style: solid;
270
+ border-width: 3px 3px 0 0;
271
+ content: "";
272
+ display: block;
273
+ height: 9px;
274
+ position: absolute;
275
+ top: 6px;
276
+ width: 9px;
277
+ }
278
+ .react-datepicker-wrapper {
279
+ display: inline-block;
280
+ padding: 0;
281
+ border: 0;
282
+ }
283
+ .react-datepicker {
284
+ font-family:
285
+ Helvetica Neue,
286
+ helvetica,
287
+ arial,
288
+ sans-serif;
289
+ font-size: 0.8rem;
290
+ background-color: #fff;
291
+ color: #000;
292
+ border: 1px solid #aeaeae;
293
+ border-radius: 0.3rem;
294
+ display: inline-block;
295
+ position: relative;
296
+ line-height: initial;
297
+ }
298
+ .react-datepicker--time-only .react-datepicker__time-container {
299
+ border-left: 0;
300
+ }
301
+ .react-datepicker--time-only .react-datepicker__time,
302
+ .react-datepicker--time-only .react-datepicker__time-box {
303
+ border-bottom-left-radius: 0.3rem;
304
+ border-bottom-right-radius: 0.3rem;
305
+ }
306
+ .react-datepicker-popper {
307
+ z-index: 1;
308
+ line-height: 0;
309
+ }
310
+ .react-datepicker-popper .react-datepicker__triangle {
311
+ stroke: #aeaeae;
312
+ }
313
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
314
+ fill: #f0f0f0;
315
+ color: #f0f0f0;
316
+ }
317
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
318
+ fill: #fff;
319
+ color: #fff;
320
+ }
321
+ .react-datepicker__header {
322
+ text-align: center;
323
+ background-color: #f0f0f0;
324
+ border-bottom: 1px solid #aeaeae;
325
+ border-top-left-radius: 0.3rem;
326
+ padding: 8px 0;
327
+ position: relative;
328
+ }
329
+ .react-datepicker__header--time {
330
+ padding-bottom: 8px;
331
+ padding-left: 5px;
332
+ padding-right: 5px;
333
+ }
334
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
335
+ border-top-left-radius: 0;
336
+ }
337
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
338
+ border-top-right-radius: 0.3rem;
339
+ }
340
+ .react-datepicker__year-dropdown-container--select,
341
+ .react-datepicker__month-dropdown-container--select,
342
+ .react-datepicker__month-year-dropdown-container--select,
343
+ .react-datepicker__year-dropdown-container--scroll,
344
+ .react-datepicker__month-dropdown-container--scroll,
345
+ .react-datepicker__month-year-dropdown-container--scroll {
346
+ display: inline-block;
347
+ margin: 0 15px;
348
+ }
349
+ .react-datepicker__current-month,
350
+ .react-datepicker-time__header,
351
+ .react-datepicker-year-header {
352
+ margin-top: 0;
353
+ color: #000;
354
+ font-weight: 700;
355
+ font-size: 0.944rem;
356
+ }
357
+ h2.react-datepicker__current-month {
358
+ padding: 0;
359
+ margin: 0;
360
+ }
361
+ .react-datepicker-time__header {
362
+ text-overflow: ellipsis;
363
+ white-space: nowrap;
364
+ overflow: hidden;
365
+ }
366
+ .react-datepicker__navigation {
367
+ align-items: center;
368
+ background: none;
369
+ display: flex;
370
+ justify-content: center;
371
+ text-align: center;
372
+ cursor: pointer;
373
+ position: absolute;
374
+ top: 2px;
375
+ padding: 0;
376
+ border: none;
377
+ z-index: 1;
378
+ height: 32px;
379
+ width: 32px;
380
+ text-indent: -999em;
381
+ overflow: hidden;
382
+ }
383
+ .react-datepicker__navigation--previous {
384
+ left: 2px;
385
+ }
386
+ .react-datepicker__navigation--next {
387
+ right: 2px;
388
+ }
389
+ .react-datepicker__navigation--next--with-time:not(
390
+ .react-datepicker__navigation--next--with-today-button
391
+ ) {
392
+ right: 85px;
393
+ }
394
+ .react-datepicker__navigation--years {
395
+ position: relative;
396
+ top: 0;
397
+ display: block;
398
+ margin-left: auto;
399
+ margin-right: auto;
400
+ }
401
+ .react-datepicker__navigation--years-previous {
402
+ top: 4px;
403
+ }
404
+ .react-datepicker__navigation--years-upcoming {
405
+ top: -4px;
406
+ }
407
+ .react-datepicker__navigation:hover *:before {
408
+ border-color: #a6a6a6;
409
+ }
410
+ .react-datepicker__navigation-icon {
411
+ position: relative;
412
+ top: -1px;
413
+ font-size: 20px;
414
+ width: 0;
415
+ }
416
+ .react-datepicker__navigation-icon--next {
417
+ left: -2px;
418
+ }
419
+ .react-datepicker__navigation-icon--next:before {
420
+ transform: rotate(45deg);
421
+ left: -7px;
422
+ }
423
+ .react-datepicker__navigation-icon--previous {
424
+ right: -2px;
425
+ }
426
+ .react-datepicker__navigation-icon--previous:before {
427
+ transform: rotate(225deg);
428
+ right: -7px;
429
+ }
430
+ .react-datepicker__month-container {
431
+ float: left;
432
+ }
433
+ .react-datepicker__year {
434
+ margin: 0.4rem;
435
+ text-align: center;
436
+ }
437
+ .react-datepicker__year-wrapper {
438
+ display: flex;
439
+ flex-wrap: wrap;
440
+ max-width: 180px;
441
+ }
442
+ .react-datepicker__year .react-datepicker__year-text {
443
+ display: inline-block;
444
+ width: 4rem;
445
+ margin: 2px;
446
+ }
447
+ .react-datepicker__month {
448
+ margin: 0.4rem;
449
+ text-align: center;
450
+ }
451
+ .react-datepicker__month .react-datepicker__month-text,
452
+ .react-datepicker__month .react-datepicker__quarter-text {
453
+ display: inline-block;
454
+ width: 4rem;
455
+ margin: 2px;
456
+ }
457
+ .react-datepicker__input-time-container {
458
+ clear: both;
459
+ width: 100%;
460
+ float: left;
461
+ margin: 5px 0 10px 15px;
462
+ text-align: left;
463
+ }
464
+ .react-datepicker__input-time-container .react-datepicker-time__caption,
465
+ .react-datepicker__input-time-container
466
+ .react-datepicker-time__input-container {
467
+ display: inline-block;
468
+ }
469
+ .react-datepicker__input-time-container
470
+ .react-datepicker-time__input-container
471
+ .react-datepicker-time__input {
472
+ display: inline-block;
473
+ margin-left: 10px;
474
+ }
475
+ .react-datepicker__input-time-container
476
+ .react-datepicker-time__input-container
477
+ .react-datepicker-time__input
478
+ input {
479
+ width: auto;
480
+ }
481
+ .react-datepicker__input-time-container
482
+ .react-datepicker-time__input-container
483
+ .react-datepicker-time__input
484
+ input[type="time"]::-webkit-inner-spin-button,
485
+ .react-datepicker__input-time-container
486
+ .react-datepicker-time__input-container
487
+ .react-datepicker-time__input
488
+ input[type="time"]::-webkit-outer-spin-button {
489
+ -webkit-appearance: none;
490
+ margin: 0;
491
+ }
492
+ .react-datepicker__input-time-container
493
+ .react-datepicker-time__input-container
494
+ .react-datepicker-time__input
495
+ input[type="time"] {
496
+ -moz-appearance: textfield;
497
+ }
498
+ .react-datepicker__input-time-container
499
+ .react-datepicker-time__input-container
500
+ .react-datepicker-time__delimiter {
501
+ margin-left: 5px;
502
+ display: inline-block;
503
+ }
504
+ .react-datepicker__time-container {
505
+ float: right;
506
+ border-left: 1px solid #aeaeae;
507
+ width: 85px;
508
+ }
509
+ .react-datepicker__time-container--with-today-button {
510
+ display: inline;
511
+ border: 1px solid #aeaeae;
512
+ border-radius: 0.3rem;
513
+ position: absolute;
514
+ right: -87px;
515
+ top: 0;
516
+ }
517
+ .react-datepicker__time-container .react-datepicker__time {
518
+ position: relative;
519
+ background: #fff;
520
+ border-bottom-right-radius: 0.3rem;
521
+ }
522
+ .react-datepicker__time-container
523
+ .react-datepicker__time
524
+ .react-datepicker__time-box {
525
+ width: 85px;
526
+ overflow-x: hidden;
527
+ margin: 0 auto;
528
+ text-align: center;
529
+ border-bottom-right-radius: 0.3rem;
530
+ }
531
+ .react-datepicker__time-container
532
+ .react-datepicker__time
533
+ .react-datepicker__time-box
534
+ ul.react-datepicker__time-list {
535
+ list-style: none;
536
+ margin: 0;
537
+ height: calc(195px + 0.85rem);
538
+ overflow-y: scroll;
539
+ padding-right: 0;
540
+ padding-left: 0;
541
+ width: 100%;
542
+ box-sizing: content-box;
543
+ }
544
+ .react-datepicker__time-container
545
+ .react-datepicker__time
546
+ .react-datepicker__time-box
547
+ ul.react-datepicker__time-list
548
+ li.react-datepicker__time-list-item {
549
+ height: 30px;
550
+ padding: 5px 10px;
551
+ white-space: nowrap;
552
+ }
553
+ .react-datepicker__time-container
554
+ .react-datepicker__time
555
+ .react-datepicker__time-box
556
+ ul.react-datepicker__time-list
557
+ li.react-datepicker__time-list-item:hover {
558
+ cursor: pointer;
559
+ background-color: #f0f0f0;
560
+ }
561
+ .react-datepicker__time-container
562
+ .react-datepicker__time
563
+ .react-datepicker__time-box
564
+ ul.react-datepicker__time-list
565
+ li.react-datepicker__time-list-item--selected {
566
+ background-color: #216ba5;
567
+ color: #fff;
568
+ font-weight: 700;
569
+ }
570
+ .react-datepicker__time-container
571
+ .react-datepicker__time
572
+ .react-datepicker__time-box
573
+ ul.react-datepicker__time-list
574
+ li.react-datepicker__time-list-item--selected:hover {
575
+ background-color: #216ba5;
576
+ }
577
+ .react-datepicker__time-container
578
+ .react-datepicker__time
579
+ .react-datepicker__time-box
580
+ ul.react-datepicker__time-list
581
+ li.react-datepicker__time-list-item--disabled {
582
+ color: #ccc;
583
+ }
584
+ .react-datepicker__time-container
585
+ .react-datepicker__time
586
+ .react-datepicker__time-box
587
+ ul.react-datepicker__time-list
588
+ li.react-datepicker__time-list-item--disabled:hover {
589
+ cursor: default;
590
+ background-color: transparent;
591
+ }
592
+ .react-datepicker__week-number {
593
+ color: #ccc;
594
+ display: inline-block;
595
+ width: 1.7rem;
596
+ line-height: 1.7rem;
597
+ text-align: center;
598
+ margin: 0.166rem;
599
+ }
600
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
601
+ cursor: pointer;
602
+ }
603
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(
604
+ .react-datepicker__week-number--selected
605
+ ):hover {
606
+ border-radius: 0.3rem;
607
+ background-color: #f0f0f0;
608
+ }
609
+ .react-datepicker__week-number--selected {
610
+ border-radius: 0.3rem;
611
+ background-color: #216ba5;
612
+ color: #fff;
613
+ }
614
+ .react-datepicker__week-number--selected:hover {
615
+ background-color: #1d5d90;
616
+ }
617
+ .react-datepicker__day-names {
618
+ white-space: nowrap;
619
+ margin-bottom: -8px;
620
+ }
621
+ .react-datepicker__week {
622
+ white-space: nowrap;
623
+ }
624
+ .react-datepicker__day-name,
625
+ .react-datepicker__day,
626
+ .react-datepicker__time-name {
627
+ color: #000;
628
+ display: inline-block;
629
+ width: 1.7rem;
630
+ line-height: 1.7rem;
631
+ text-align: center;
632
+ margin: 0.166rem;
633
+ }
634
+ .react-datepicker__day,
635
+ .react-datepicker__month-text,
636
+ .react-datepicker__quarter-text,
637
+ .react-datepicker__year-text {
638
+ cursor: pointer;
639
+ }
640
+ .react-datepicker__day:not([aria-disabled="true"]):hover,
641
+ .react-datepicker__month-text:not([aria-disabled="true"]):hover,
642
+ .react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
643
+ .react-datepicker__year-text:not([aria-disabled="true"]):hover {
644
+ border-radius: 0.3rem;
645
+ background-color: #f0f0f0;
646
+ }
647
+ .react-datepicker__day--today,
648
+ .react-datepicker__month-text--today,
649
+ .react-datepicker__quarter-text--today,
650
+ .react-datepicker__year-text--today {
651
+ font-weight: 700;
652
+ }
653
+ .react-datepicker__day--highlighted,
654
+ .react-datepicker__month-text--highlighted,
655
+ .react-datepicker__quarter-text--highlighted,
656
+ .react-datepicker__year-text--highlighted {
657
+ border-radius: 0.3rem;
658
+ background-color: #3dcc4a;
659
+ color: #fff;
660
+ }
661
+ .react-datepicker__day--highlighted:not([aria-disabled="true"]):hover,
662
+ .react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover,
663
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover,
664
+ .react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
665
+ background-color: #32be3f;
666
+ }
667
+ .react-datepicker__day--highlighted-custom-1,
668
+ .react-datepicker__month-text--highlighted-custom-1,
669
+ .react-datepicker__quarter-text--highlighted-custom-1,
670
+ .react-datepicker__year-text--highlighted-custom-1 {
671
+ color: #f0f;
672
+ }
673
+ .react-datepicker__day--highlighted-custom-2,
674
+ .react-datepicker__month-text--highlighted-custom-2,
675
+ .react-datepicker__quarter-text--highlighted-custom-2,
676
+ .react-datepicker__year-text--highlighted-custom-2 {
677
+ color: green;
678
+ }
679
+ .react-datepicker__day--holidays,
680
+ .react-datepicker__month-text--holidays,
681
+ .react-datepicker__quarter-text--holidays,
682
+ .react-datepicker__year-text--holidays {
683
+ position: relative;
684
+ border-radius: 0.3rem;
685
+ background-color: #ff6803;
686
+ color: #fff;
687
+ }
688
+ .react-datepicker__day--holidays .overlay,
689
+ .react-datepicker__month-text--holidays .overlay,
690
+ .react-datepicker__quarter-text--holidays .overlay,
691
+ .react-datepicker__year-text--holidays .overlay {
692
+ position: absolute;
693
+ bottom: 100%;
694
+ left: 50%;
695
+ transform: translate(-50%);
696
+ background-color: #333;
697
+ color: #fff;
698
+ padding: 4px;
699
+ border-radius: 4px;
700
+ white-space: nowrap;
701
+ visibility: hidden;
702
+ opacity: 0;
703
+ transition:
704
+ visibility 0s,
705
+ opacity 0.3s ease-in-out;
706
+ }
707
+ .react-datepicker__day--holidays:not([aria-disabled="true"]):hover,
708
+ .react-datepicker__month-text--holidays:not([aria-disabled="true"]):hover,
709
+ .react-datepicker__quarter-text--holidays:not([aria-disabled="true"]):hover,
710
+ .react-datepicker__year-text--holidays:not([aria-disabled="true"]):hover {
711
+ background-color: #cf5300;
712
+ }
713
+ .react-datepicker__day--holidays:hover .overlay,
714
+ .react-datepicker__month-text--holidays:hover .overlay,
715
+ .react-datepicker__quarter-text--holidays:hover .overlay,
716
+ .react-datepicker__year-text--holidays:hover .overlay {
717
+ visibility: visible;
718
+ opacity: 1;
719
+ }
720
+ .react-datepicker__day--selected,
721
+ .react-datepicker__day--in-selecting-range,
722
+ .react-datepicker__day--in-range,
723
+ .react-datepicker__month-text--selected,
724
+ .react-datepicker__month-text--in-selecting-range,
725
+ .react-datepicker__month-text--in-range,
726
+ .react-datepicker__quarter-text--selected,
727
+ .react-datepicker__quarter-text--in-selecting-range,
728
+ .react-datepicker__quarter-text--in-range,
729
+ .react-datepicker__year-text--selected,
730
+ .react-datepicker__year-text--in-selecting-range,
731
+ .react-datepicker__year-text--in-range {
732
+ border-radius: 0.3rem;
733
+ background-color: #216ba5;
734
+ color: #fff;
735
+ }
736
+ .react-datepicker__day--selected:not([aria-disabled="true"]):hover,
737
+ .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
738
+ .react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
739
+ .react-datepicker__month-text--selected:not([aria-disabled="true"]):hover,
740
+ .react-datepicker__month-text--in-selecting-range:not(
741
+ [aria-disabled="true"]
742
+ ):hover,
743
+ .react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover,
744
+ .react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover,
745
+ .react-datepicker__quarter-text--in-selecting-range:not(
746
+ [aria-disabled="true"]
747
+ ):hover,
748
+ .react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover,
749
+ .react-datepicker__year-text--selected:not([aria-disabled="true"]):hover,
750
+ .react-datepicker__year-text--in-selecting-range:not(
751
+ [aria-disabled="true"]
752
+ ):hover,
753
+ .react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
754
+ background-color: #1d5d90;
755
+ }
756
+ .react-datepicker__day--keyboard-selected,
757
+ .react-datepicker__month-text--keyboard-selected,
758
+ .react-datepicker__quarter-text--keyboard-selected,
759
+ .react-datepicker__year-text--keyboard-selected {
760
+ border-radius: 0.3rem;
761
+ background-color: #bad9f1;
762
+ color: #000;
763
+ }
764
+ .react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
765
+ .react-datepicker__month-text--keyboard-selected:not(
766
+ [aria-disabled="true"]
767
+ ):hover,
768
+ .react-datepicker__quarter-text--keyboard-selected:not(
769
+ [aria-disabled="true"]
770
+ ):hover,
771
+ .react-datepicker__year-text--keyboard-selected:not(
772
+ [aria-disabled="true"]
773
+ ):hover {
774
+ background-color: #1d5d90;
775
+ }
776
+ .react-datepicker__day--in-selecting-range:not(
777
+ .react-datepicker__day--in-range,
778
+ .react-datepicker__month-text--in-range,
779
+ .react-datepicker__quarter-text--in-range,
780
+ .react-datepicker__year-text--in-range
781
+ ),
782
+ .react-datepicker__month-text--in-selecting-range:not(
783
+ .react-datepicker__day--in-range,
784
+ .react-datepicker__month-text--in-range,
785
+ .react-datepicker__quarter-text--in-range,
786
+ .react-datepicker__year-text--in-range
787
+ ),
788
+ .react-datepicker__quarter-text--in-selecting-range:not(
789
+ .react-datepicker__day--in-range,
790
+ .react-datepicker__month-text--in-range,
791
+ .react-datepicker__quarter-text--in-range,
792
+ .react-datepicker__year-text--in-range
793
+ ),
794
+ .react-datepicker__year-text--in-selecting-range:not(
795
+ .react-datepicker__day--in-range,
796
+ .react-datepicker__month-text--in-range,
797
+ .react-datepicker__quarter-text--in-range,
798
+ .react-datepicker__year-text--in-range
799
+ ) {
800
+ background-color: #216ba580;
801
+ }
802
+ .react-datepicker__month--selecting-range
803
+ .react-datepicker__day--in-range:not(
804
+ .react-datepicker__day--in-selecting-range,
805
+ .react-datepicker__month-text--in-selecting-range,
806
+ .react-datepicker__quarter-text--in-selecting-range,
807
+ .react-datepicker__year-text--in-selecting-range
808
+ ),
809
+ .react-datepicker__year--selecting-range
810
+ .react-datepicker__day--in-range:not(
811
+ .react-datepicker__day--in-selecting-range,
812
+ .react-datepicker__month-text--in-selecting-range,
813
+ .react-datepicker__quarter-text--in-selecting-range,
814
+ .react-datepicker__year-text--in-selecting-range
815
+ ),
816
+ .react-datepicker__month--selecting-range
817
+ .react-datepicker__month-text--in-range:not(
818
+ .react-datepicker__day--in-selecting-range,
819
+ .react-datepicker__month-text--in-selecting-range,
820
+ .react-datepicker__quarter-text--in-selecting-range,
821
+ .react-datepicker__year-text--in-selecting-range
822
+ ),
823
+ .react-datepicker__year--selecting-range
824
+ .react-datepicker__month-text--in-range:not(
825
+ .react-datepicker__day--in-selecting-range,
826
+ .react-datepicker__month-text--in-selecting-range,
827
+ .react-datepicker__quarter-text--in-selecting-range,
828
+ .react-datepicker__year-text--in-selecting-range
829
+ ),
830
+ .react-datepicker__month--selecting-range
831
+ .react-datepicker__quarter-text--in-range:not(
832
+ .react-datepicker__day--in-selecting-range,
833
+ .react-datepicker__month-text--in-selecting-range,
834
+ .react-datepicker__quarter-text--in-selecting-range,
835
+ .react-datepicker__year-text--in-selecting-range
836
+ ),
837
+ .react-datepicker__year--selecting-range
838
+ .react-datepicker__quarter-text--in-range:not(
839
+ .react-datepicker__day--in-selecting-range,
840
+ .react-datepicker__month-text--in-selecting-range,
841
+ .react-datepicker__quarter-text--in-selecting-range,
842
+ .react-datepicker__year-text--in-selecting-range
843
+ ),
844
+ .react-datepicker__month--selecting-range
845
+ .react-datepicker__year-text--in-range:not(
846
+ .react-datepicker__day--in-selecting-range,
847
+ .react-datepicker__month-text--in-selecting-range,
848
+ .react-datepicker__quarter-text--in-selecting-range,
849
+ .react-datepicker__year-text--in-selecting-range
850
+ ),
851
+ .react-datepicker__year--selecting-range
852
+ .react-datepicker__year-text--in-range:not(
853
+ .react-datepicker__day--in-selecting-range,
854
+ .react-datepicker__month-text--in-selecting-range,
855
+ .react-datepicker__quarter-text--in-selecting-range,
856
+ .react-datepicker__year-text--in-selecting-range
857
+ ) {
858
+ background-color: #f0f0f0;
859
+ color: #000;
860
+ }
861
+ .react-datepicker__day--disabled,
862
+ .react-datepicker__month-text--disabled,
863
+ .react-datepicker__quarter-text--disabled,
864
+ .react-datepicker__year-text--disabled {
865
+ cursor: default;
866
+ color: #ccc;
867
+ }
868
+ .react-datepicker__day--disabled .overlay,
869
+ .react-datepicker__month-text--disabled .overlay,
870
+ .react-datepicker__quarter-text--disabled .overlay,
871
+ .react-datepicker__year-text--disabled .overlay {
872
+ position: absolute;
873
+ bottom: 70%;
874
+ left: 50%;
875
+ transform: translate(-50%);
876
+ background-color: #333;
877
+ color: #fff;
878
+ padding: 4px;
879
+ border-radius: 4px;
880
+ white-space: nowrap;
881
+ visibility: hidden;
882
+ opacity: 0;
883
+ transition:
884
+ visibility 0s,
885
+ opacity 0.3s ease-in-out;
886
+ }
887
+ .react-datepicker__input-container {
888
+ position: relative;
889
+ display: inline-block;
890
+ width: 100%;
891
+ }
892
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
893
+ position: absolute;
894
+ padding: 0.5rem;
895
+ box-sizing: content-box;
896
+ }
897
+ .react-datepicker__view-calendar-icon input {
898
+ padding: 6px 10px 5px 25px;
899
+ }
900
+ .react-datepicker__year-read-view,
901
+ .react-datepicker__month-read-view,
902
+ .react-datepicker__month-year-read-view {
903
+ border: 1px solid transparent;
904
+ border-radius: 0.3rem;
905
+ position: relative;
906
+ }
907
+ .react-datepicker__year-read-view:hover,
908
+ .react-datepicker__month-read-view:hover,
909
+ .react-datepicker__month-year-read-view:hover {
910
+ cursor: pointer;
911
+ }
912
+ .react-datepicker__year-read-view:hover
913
+ .react-datepicker__year-read-view--down-arrow,
914
+ .react-datepicker__year-read-view:hover
915
+ .react-datepicker__month-read-view--down-arrow,
916
+ .react-datepicker__month-read-view:hover
917
+ .react-datepicker__year-read-view--down-arrow,
918
+ .react-datepicker__month-read-view:hover
919
+ .react-datepicker__month-read-view--down-arrow,
920
+ .react-datepicker__month-year-read-view:hover
921
+ .react-datepicker__year-read-view--down-arrow,
922
+ .react-datepicker__month-year-read-view:hover
923
+ .react-datepicker__month-read-view--down-arrow {
924
+ border-top-color: #b3b3b3;
925
+ }
926
+ .react-datepicker__year-read-view--down-arrow,
927
+ .react-datepicker__month-read-view--down-arrow,
928
+ .react-datepicker__month-year-read-view--down-arrow {
929
+ transform: rotate(135deg);
930
+ right: -16px;
931
+ top: 0;
932
+ }
933
+ .react-datepicker__year-dropdown,
934
+ .react-datepicker__month-dropdown,
935
+ .react-datepicker__month-year-dropdown {
936
+ background-color: #f0f0f0;
937
+ position: absolute;
938
+ width: 50%;
939
+ left: 25%;
940
+ top: 30px;
941
+ z-index: 1;
942
+ text-align: center;
943
+ border-radius: 0.3rem;
944
+ border: 1px solid #aeaeae;
945
+ }
946
+ .react-datepicker__year-dropdown:hover,
947
+ .react-datepicker__month-dropdown:hover,
948
+ .react-datepicker__month-year-dropdown:hover {
949
+ cursor: pointer;
950
+ }
951
+ .react-datepicker__year-dropdown--scrollable,
952
+ .react-datepicker__month-dropdown--scrollable,
953
+ .react-datepicker__month-year-dropdown--scrollable {
954
+ height: 150px;
955
+ overflow-y: scroll;
956
+ }
957
+ .react-datepicker__year-option,
958
+ .react-datepicker__month-option,
959
+ .react-datepicker__month-year-option {
960
+ line-height: 20px;
961
+ width: 100%;
962
+ display: block;
963
+ margin-left: auto;
964
+ margin-right: auto;
965
+ }
966
+ .react-datepicker__year-option:first-of-type,
967
+ .react-datepicker__month-option:first-of-type,
968
+ .react-datepicker__month-year-option:first-of-type {
969
+ border-top-left-radius: 0.3rem;
970
+ border-top-right-radius: 0.3rem;
971
+ }
972
+ .react-datepicker__year-option:last-of-type,
973
+ .react-datepicker__month-option:last-of-type,
974
+ .react-datepicker__month-year-option:last-of-type {
975
+ -webkit-user-select: none;
976
+ -moz-user-select: none;
977
+ -ms-user-select: none;
978
+ user-select: none;
979
+ border-bottom-left-radius: 0.3rem;
980
+ border-bottom-right-radius: 0.3rem;
981
+ }
982
+ .react-datepicker__year-option:hover,
983
+ .react-datepicker__month-option:hover,
984
+ .react-datepicker__month-year-option:hover {
985
+ background-color: #ccc;
986
+ }
987
+ .react-datepicker__year-option:hover
988
+ .react-datepicker__navigation--years-upcoming,
989
+ .react-datepicker__month-option:hover
990
+ .react-datepicker__navigation--years-upcoming,
991
+ .react-datepicker__month-year-option:hover
992
+ .react-datepicker__navigation--years-upcoming {
993
+ border-bottom-color: #b3b3b3;
994
+ }
995
+ .react-datepicker__year-option:hover
996
+ .react-datepicker__navigation--years-previous,
997
+ .react-datepicker__month-option:hover
998
+ .react-datepicker__navigation--years-previous,
999
+ .react-datepicker__month-year-option:hover
1000
+ .react-datepicker__navigation--years-previous {
1001
+ border-top-color: #b3b3b3;
1002
+ }
1003
+ .react-datepicker__year-option--selected,
1004
+ .react-datepicker__month-option--selected,
1005
+ .react-datepicker__month-year-option--selected {
1006
+ position: absolute;
1007
+ left: 15px;
1008
+ }
1009
+ .react-datepicker__close-icon {
1010
+ cursor: pointer;
1011
+ background-color: transparent;
1012
+ border: 0;
1013
+ outline: 0;
1014
+ padding: 0 6px 0 0;
1015
+ position: absolute;
1016
+ top: 0;
1017
+ right: 0;
1018
+ height: 100%;
1019
+ display: table-cell;
1020
+ vertical-align: middle;
1021
+ }
1022
+ .react-datepicker__close-icon:after {
1023
+ cursor: pointer;
1024
+ background-color: #216ba5;
1025
+ color: #fff;
1026
+ border-radius: 50%;
1027
+ height: 16px;
1028
+ width: 16px;
1029
+ padding: 2px;
1030
+ font-size: 12px;
1031
+ line-height: 1;
1032
+ text-align: center;
1033
+ display: table-cell;
1034
+ vertical-align: middle;
1035
+ content: "×";
1036
+ }
1037
+ .react-datepicker__close-icon--disabled {
1038
+ cursor: default;
1039
+ }
1040
+ .react-datepicker__close-icon--disabled:after {
1041
+ cursor: default;
1042
+ background-color: #ccc;
1043
+ }
1044
+ .react-datepicker__today-button {
1045
+ background: #f0f0f0;
1046
+ border-top: 1px solid #aeaeae;
1047
+ cursor: pointer;
1048
+ text-align: center;
1049
+ font-weight: 700;
1050
+ padding: 5px 0;
1051
+ clear: left;
1052
+ }
1053
+ .react-datepicker__portal {
1054
+ position: fixed;
1055
+ width: 100vw;
1056
+ height: 100vh;
1057
+ background-color: #000c;
1058
+ left: 0;
1059
+ top: 0;
1060
+ justify-content: center;
1061
+ align-items: center;
1062
+ display: flex;
1063
+ z-index: 2147483647;
1064
+ }
1065
+ .react-datepicker__portal .react-datepicker__day-name,
1066
+ .react-datepicker__portal .react-datepicker__day,
1067
+ .react-datepicker__portal .react-datepicker__time-name {
1068
+ width: 3rem;
1069
+ line-height: 3rem;
1070
+ }
1071
+ @media (max-width: 400px), (max-height: 550px) {
1072
+ .react-datepicker__portal .react-datepicker__day-name,
1073
+ .react-datepicker__portal .react-datepicker__day,
1074
+ .react-datepicker__portal .react-datepicker__time-name {
1075
+ width: 2rem;
1076
+ line-height: 2rem;
1077
+ }
1078
+ }
1079
+ .react-datepicker__portal .react-datepicker__current-month,
1080
+ .react-datepicker__portal .react-datepicker-time__header {
1081
+ font-size: 1.44rem;
1082
+ }
1083
+ .react-datepicker__children-container {
1084
+ width: 13.8rem;
1085
+ margin: 0.4rem;
1086
+ padding-right: 0.2rem;
1087
+ padding-left: 0.2rem;
1088
+ height: auto;
1089
+ }
1090
+ .react-datepicker__aria-live {
1091
+ position: absolute;
1092
+ clip-path: circle(0);
1093
+ border: 0;
1094
+ height: 1px;
1095
+ margin: -1px;
1096
+ overflow: hidden;
1097
+ padding: 0;
1098
+ width: 1px;
1099
+ white-space: nowrap;
1100
+ }
1101
+ .react-datepicker__calendar-icon {
1102
+ width: 1em;
1103
+ height: 1em;
1104
+ vertical-align: -0.125em;
1105
+ }
1106
+ .react-datepicker__header__dropdown {
1107
+ display: none;
1108
+ }
1109
+ .react-datepicker__header {
1110
+ background-color: var(--colorPrimary);
1111
+ }
1112
+ .react-datepicker__navigation-icon:before {
1113
+ border-color: #fff;
1114
+ }
1115
+ .react-datepicker__current-month {
1116
+ font-size: 16px !important;
1117
+ color: #fff !important;
1118
+ margin: 10px !important;
1119
+ }
1120
+ .react-datepicker__navigation {
1121
+ border-radius: 4px;
1122
+ margin-top: 10px;
1123
+ top: 5px;
1124
+ width: 20px;
1125
+ height: 20px;
1126
+ }
1127
+ .react-datepicker__navigation-icon {
1128
+ top: 10px;
1129
+ }
1130
+ .react-datepicker__day-names {
1131
+ background-color: #eee;
1132
+ }
1133
+ .react-datepicker__day-name {
1134
+ color: #858585;
1135
+ }
1136
+ .react-datepicker__day--today {
1137
+ background-color: var(--colorSecondaryTwo);
1138
+ border-radius: 4px;
1139
+ }
1140
+ .react-datepicker__day--keyboard-selected {
1141
+ border: 1px dashed var(--colorSecondaryTwo);
1142
+ background-color: #c4d6002b;
1143
+ }
1144
+ .react-datepicker__day--selected {
1145
+ background-color: var(--colorPrimary);
1146
+ }
1147
+ .react-datepicker-wrapper {
1148
+ width: 100%;
1149
+ }
1150
+ .react-datepicker__input-container {
1151
+ width: 100%;
1152
+ font-size: 10px;
1153
+ }
1154
+ .react-datepicker__day--selected:after {
1155
+ background-color: var(--colorPrimary);
1156
+ }
1157
+ .react-datepicker__close-icon:after {
1158
+ background-color: var(--colorPrimary);
1159
+ font-size: 16px;
1160
+ display: flex;
1161
+ align-items: center;
1162
+ justify-content: center;
1163
+ }
1164
+ .status-badge {
1165
+ --badgeMainColor: var(--customColor, #3a3a3b);
1166
+ background: linear-gradient(
1167
+ 45deg,
1168
+ var(--badgeMainColor) 0%,
1169
+ var(--badgeMainColor) 50%,
1170
+ var(--badgeMainColor) 100%
1171
+ );
1172
+ background: linear-gradient(
1173
+ 45deg,
1174
+ color-mix(in srgb, var(--badgeMainColor), white 30%) 0%,
1175
+ var(--badgeMainColor) 70%,
1176
+ color-mix(in srgb, var(--badgeMainColor), black 10%) 100%
1177
+ );
1178
+ width: 100%;
1179
+ height: 34px;
1180
+ display: flex;
1181
+ align-items: center;
1182
+ justify-content: center;
1183
+ gap: 8px;
1184
+ border-radius: 3px;
1185
+ color: #fff;
1186
+ font-weight: 400;
1187
+ font-size: 14px;
1188
+ font-style: italic;
1189
+ transition: all 0.3s ease;
1190
+ }
1191
+ .status-badge.default {
1192
+ --badgeMainColor: #555;
1193
+ }
1194
+ .header-actions {
1195
+ display: flex;
1196
+ align-items: center;
1197
+ justify-content: space-between;
1198
+ width: 100%;
1199
+ margin-bottom: 16px;
1200
+ }
1201
+ .header-actions > h3 {
1202
+ margin: 0 !important;
1203
+ font-weight: 600;
1204
+ color: #58595b;
1205
+ }
1206
+ .header-actions > div {
1207
+ display: flex;
1208
+ gap: 8px;
1209
+ }
1210
+ .header-handle {
1211
+ display: flex;
1212
+ align-items: center;
1213
+ justify-content: space-between;
1214
+ margin-bottom: 16px;
1215
+ }
1216
+ .handle-actions {
1217
+ display: flex;
1218
+ align-items: center;
1219
+ gap: 16px;
1220
+ }
1221
+ .table-wrapper {
1222
+ width: 100%;
1223
+ margin-bottom: 20px;
1224
+ border-bottom: 1px solid rgb(228, 228, 228);
1225
+ }
1226
+ .table-wrapper h3 {
1227
+ margin: 0 !important;
1228
+ }
1229
+ .table-fixed .table-scroll {
1230
+ overflow-x: auto;
1231
+ }
1232
+ .table-fluid .table-scroll {
1233
+ overflow-x: hidden;
1234
+ }
1235
+ .table-scroll {
1236
+ position: relative;
1237
+ overflow-y: auto;
1238
+ min-height: 400px;
1239
+ max-height: 400px;
1240
+ }
1241
+ .table-fixed th,
1242
+ .table-fixed td {
1243
+ white-space: nowrap;
1244
+ }
1245
+ .table-custom {
1246
+ width: 100%;
1247
+ border-collapse: separate;
1248
+ border-spacing: 0;
1249
+ border-radius: 4px;
1250
+ border: 1px solid #ddd;
1251
+ overflow: hidden;
1252
+ background-color: #fff;
1253
+ }
1254
+ .btn-add {
1255
+ background-color: var(--colorPrimary, #00916d);
1256
+ border: none;
1257
+ color: #fff !important;
1258
+ border-radius: 4px;
1259
+ padding: 8px 16px;
1260
+ font-size: 14px !important;
1261
+ cursor: pointer;
1262
+ transition: opacity 0.2s;
1263
+ }
1264
+ .btn-add:hover {
1265
+ opacity: 0.9;
1266
+ }
1267
+ .table-custom thead {
1268
+ background-color: #ebebeb;
1269
+ }
1270
+ .table-custom thead tr th {
1271
+ position: sticky;
1272
+ top: 0;
1273
+ z-index: 2;
1274
+ padding: 12px 16px;
1275
+ border-bottom: 2px solid #ddd;
1276
+ border-left: 1px solid #ddd;
1277
+ text-align: left;
1278
+ font-weight: 700;
1279
+ color: #696969;
1280
+ }
1281
+ .table-custom thead tr th:first-child {
1282
+ border-left: none;
1283
+ }
1284
+ .table-custom tbody tr td {
1285
+ border-left: 1px solid #e1e1e1;
1286
+ padding: 12px 16px;
1287
+ vertical-align: middle;
1288
+ }
1289
+ .table-custom tbody tr td:first-child {
1290
+ border-left: none;
1291
+ }
1292
+ .table-custom tbody tr:nth-child(2n) {
1293
+ background-color: #f9f9f9;
1294
+ }
1295
+ .table-custom tbody tr:hover {
1296
+ background-color: #f0f0f0;
1297
+ }
1298
+ .table-custom th,
1299
+ .table-custom td {
1300
+ overflow: hidden;
1301
+ text-overflow: ellipsis;
1302
+ }
1303
+ .table-custom td {
1304
+ flex-wrap: nowrap;
1305
+ }
1306
+ .table-custom .form-control {
1307
+ margin-bottom: 0 !important;
1308
+ height: 34px;
1309
+ }
1310
+ .text-center {
1311
+ text-align: center;
1312
+ }
1313
+ .table-custom tbody tr.empty-row td {
1314
+ height: 400px;
1315
+ vertical-align: middle;
1316
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tech-diefra/fluig-ui",
3
- "version": "1.2.1",
3
+ "version": "1.2.2",
4
4
  "type": "module",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",