@amxchange/grid-view-web-client/dist/main.css

amxchange grid view framework web client in react ( a module extracted from existing jax )

.grid-container .grid-filters{display:flex}.grid-container .grid-filters-fields{display:flex;gap:15px;align-items:flex-end;margin-bottom:15px;flex-wrap:wrap}.grid-container .grid-filters-fields>div{width:160px}.grid-container .grid-filters-btns{display:flex;gap:10px;align-items:flex-end;margin-bottom:15px}.grid-container .grid-table .ReactTable{z-index:1;color:#000;border:1px solid rgba(0,0,0,.2)}.grid-container .grid-table .ReactTable .-filters{border-bottom:solid 1px rgba(0,0,0,.2) !important}.grid-container .grid-table .ReactTable .-header{box-shadow:none;border-bottom:solid 1px rgba(0,0,0,.2)}.grid-container .grid-table .ReactTable .-header .rt-th{background:#45a655 !important;color:#fff}.grid-container .grid-table .ReactTable .rt-thead .rt-tr .rt-th{border-right:1px solid rgba(0,0,0,.2)}.grid-container .grid-table .ReactTable .rt-tbody{overflow:visible}.grid-container .grid-table .ReactTable .rt-tbody .rt-tr-group{border-bottom:solid 1px rgba(0,0,0,.2)}.grid-container .grid-table .ReactTable .rt-tbody .rt-tr-group :hover .rt-td{color:#fff;background:gray !important}.grid-container .grid-table .ReactTable .rt-tbody .rt-tr-group .rt-tr .rt-td{border-right:1px solid rgba(0,0,0,.2)}.grid-container .grid-filters-btns{margin-left:.5rem}.grid-container .grid-filters-btns .MuiButtonBase-root{height:50px;margin:2px;width:100px;background-color:#45a655;color:#fff}
.input-field-sec{position:relative;display:flex;flex-wrap:wrap;height:52px}.input-field-sec label{color:#000;font-weight:500}.input-field-sec .MuiFormControl-root{width:100%}@media(min-width: 600px){.input-field-sec .MuiContainer-root{padding:0}}.input-field-sec .MuiInputBase-input{padding:14.5px 12px;font-weight:500;color:#000}.input-field-sec.select-box label{background:#fff;color:#000;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:500;font-size:1rem;line-height:1.4375em;letter-spacing:.00938em;padding:0 5px 0 5px;margin:0 0 0 -5px;position:relative;display:block;transform-origin:top left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(133% - 32px);position:absolute;left:0;top:0;-webkit-transform:translate(14px, -9px) scale(0.75);-moz-transform:translate(14px, -9px) scale(0.75);-ms-transform:translate(14px, -9px) scale(0.75);transform:translate(14px, -9px) scale(0.75);-webkit-transition:color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;z-index:2;pointer-events:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-field-sec.select-box .react-select{width:100%;color:#000;font-weight:500}.input-field-sec.select-box .react-select__control{height:100%;z-index:1}.input-field-sec.select-box .react-select__menu{z-index:3}.input-field-sec.error-field.input-field-sec.select-box .react-select__control{border-color:#d32f2f}.input-field-sec.error-field.input-field-sec.date-box .Mui-error .MuiOutlinedInput-notchedOutline{border-color:#d32f2f}.input-field-sec.date-box label{background:#fff;color:#000;font-family:"Roboto","Helvetica","Arial",sans-serif;font-weight:500;font-size:1rem;line-height:1.4375em;letter-spacing:.00938em;padding:0 5px 0 5px;margin:0 0 0 -5px;position:relative;display:block;transform-origin:top left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(133% - 32px);position:absolute;left:0;top:0;-webkit-transform:translate(14px, -9px) scale(0.75);-moz-transform:translate(14px, -9px) scale(0.75);-ms-transform:translate(14px, -9px) scale(0.75);transform:translate(14px, -9px) scale(0.75);-webkit-transition:color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,-webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;transition:color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;z-index:2;pointer-events:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-field-sec.date-box .custom-date-input{width:100%}.input-field-sec.date-box .Mui-error .MuiOutlinedInput-notchedOutline{border-color:rgba(0,0,0,.23)}.error-field .helperTextError{position:absolute;padding:4px 7px;margin:1em 0;color:#fff;top:90%;background:#a93434;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:4px;min-width:100px;z-index:10;font-size:12px;line-height:normal}.error-field .helperTextError:after{content:"";position:absolute;border-style:solid;display:block;width:0;top:-6px;left:50px;bottom:auto;left:auto;border-width:0 9px 9px;border-color:#a93434 rgba(0,0,0,0)}.radio-group{min-height:auto;width:auto;display:flex;align-items:center}.switch{display:flex;align-items:center;width:auto}.input-field-sec.sm{width:160px !important}.input-field-sec.md{width:200px !important}.input-field-sec.lg{width:400px !important}.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar{width:10px}.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track{background:#fff}.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb:hover{background:#555}