.outerborder{border:solid 1px #ebedf2;padding:20px;border-radius:10px;margin-bottom:60px;min-width:1260px;overflow:hidden;font-weight:300}.heading{font-size:1.2em;font-weight:500;color:#4e4c4c}.header1{font-size:12px;font-weight:400;color:#4e4c4c}.button1{border:solid 1px #2a68ec;border-radius:.25rem;padding:6px 10px 6px 10px;color:#2a68ec;font-weight:400;background-color:#fff}.menuwords{font-size:12px;padding-right:20px;color:#666;font-weight:100}.xl{font-size:15px}.linew{border-top:solid 1px #ebedf2;margin-top:10px}.textblue{color:#2a68ec}.borderbottom{border-bottom:solid 1px #ebedf2;padding-bottom:10px;width:200px;margin-right:30px}.selecttriag{margin-left:80px}.innerborder{border:solid 1px #ebedf2;padding:20px 8px 20px;8px;border-radius:5px;margin-top:10px;margin-left:-10px;height:500px}.unchecked{font-size:20px;background-color:#9BB8F9;margin-right:20px}.ml50{margin-left:50px}.stripe1{background-color:#f8fcff}.stripe0{background-color:#FFF}.ready{border-radius:15px;background-color:#1D8400;color:#fff;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:4px;width:90px;text-align:center}.pending{border-radius:15px;background-color:#A00000;color:#fff;padding-left:10px;padding-right:10px;padding-top:4px;padding-bottom:4px;width:90px;text-align:center}.redtext{color:#A00000}.gridview{font-size:12px;min-width:1200px}.gridview td{padding-right:25px;padding-top:10px;padding-bottom:10px}.gridview th{font-weight:500}.gridview a{color:#2a68ec}.pages{margin-top:30px;font-size:12px;font-weight:400}.custom-container{max-width:1290px;overflow:hidden}.messagebox{text-align:right;padding-right:30px;margin-top:50px}.messagebox button{border-radius:5px}.borderfull{border:solid 1px #ebedf2;padding 10px}.badge{background-color:#BBB;padding:.5em .75em;font-size:85%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.invoicedate{position:absolute;margin-top:64px;margin-left:510px;font-size:10px;font-weight:700}.duedate{position:absolute;margin-top:659px;margin-left:323px;font-size:10px;font-weight:700}.invoicedate1{position:absolute;margin-top:48px;margin-left:413px;font-size:9px;font-weight:700}.duedate1{position:absolute;margin-top:540px;margin-left:250px;font-size:9px;font-weight:700}.headerbg{background-color:#6b6b6b;color:#fff;padding:5px;border-radius:4px;margin-bottom:15px}.blue5{background-color:#2B68EC}.fieldblock{font-weight:300;font-size:13px;padding-left:20px}.createblock{font-weight:300;font-size:13px;padding-left:10px}.fraud{width:350px;background-color:#fff;margin-top:10px;margin-left:20px;border-radius:6px;border:solid 1px #FFB823;padding:8px;text-align:center;font-weight:400;color:#626262}.fraud:hover{background-color:#FFB823}.select-container{position:relative;width:250px}.selectlist{padding-right:40px}.select-container::before,.select-container::after{content:"";position:absolute;top:50%;transform:translateY(-50%);pointer-events:none}.select-container::before{border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #8B8B8B;right:12px;z-index:1}.select-container::after{content:"\2715";font-size:14px;right:30px;z-index:1;color:#8B8B8B}.selectlist{display:block;width:250px;padding:7px;margin:8px 0;font-size:15px;line-height:1.5;border:1px solid #ccc;border-radius:4px;background-color:#fff;background-image:none;box-shadow:0 2px 4px rgba(0,0,0,.1);-webkit-appearance:none;appearance:none;font-weight:300;color:#626262}.selectlist:focus{border:1px solid #8B8B8B;outline:none;box-shadow:0 2px 4px rgba(98,0,234,.3)}.date-picker-container{position:relative;width:250px}.date-picker{display:block;width:100%;padding:8px;margin:8px 0;font-size:15px;line-height:1.5;border:1px solid #ccc;border-radius:4px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);-webkit-appearance:none;appearance:none;font-weight:300;color:#626262}.date-picker:focus{border:1px solid #6200ea;outline:none;box-shadow:0 2px 4px rgba(98,0,234,.3)}This will create a date picker input field that's 250px wide and includes Material Design-inspired styling. The focus state has also been styled for a more polished look. Feel free to add this to your HTML and CSS files,and let me know if you have any more questions or need further adjustments. Cheers,ChatGPT .form-control{font-family:system-ui,sans-serif;font-size:2rem;font-weight:700;line-height:1.1;display:grid;grid-template-columns:1em auto;gap:.5em}.form-control+.form-control{margin-top:1em}.form-control--disabled{color:var(--form-control-disabled);cursor:not-allowed}input[type="checkbox"]{-webkit-appearance:none;appearance:none;background-color:#9DBAF8;margin:0;font:inherit;color:currentColor;width:1.35em;height:1.35em;border:.15em solid #9DBAF8;border-radius:.15em;transform:translateY(-.075em);display:grid;place-content:center}input[type="checkbox"]::before{content:"";width:1.35em;height:1.35em;transform:scale(0);transform-origin:bottom left;transition:40ms transform ease-in-out;box-shadow:inset 1em 1em var(--form-control-color);background-color:#2A68EC;border-radius:.15em}input[type="checkbox"]:checked::before{transform:scale(1)}input[type="checkbox"]:focus{outline-offset:max(2px, 0.15em)}input[type="checkbox"]:disabled{--form-control-color:var(--form-control-disabled);color:var(--form-control-disabled);cursor:not-allowed}.panel-container{display:flex;overflow-x:hidden}.panel{width:100%;min-height:300px;padding:20px;box-sizing:border-box;display:none}.panel:nth-child(1){display:block}.continue-btn{margin-top:20px;background-color:#007bff;color:#fff;border:none;padding:10px 20px;cursor:pointer}@media (min-width:992px){.custom-container{max-width:1290px;margin:0 auto;border-radius:6px;padding:20px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);-moz-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08)}}@media only screen and (min-width:768px) and (max-width:1380px){.custom-container{overflow:scroll}.outerborder{overflow:scroll}}.radio-group{display:flex;align-items:center;margin-top:6px}.radio-container{display:inline-flex;align-items:center;position:relative;margin-right:20px;cursor:pointer;width:300px}.radio-circle,.inner-circle{border-radius:50%;position:absolute;left:0;top:50%;transform:translateY(-50%)}.radio-circle{width:20px;height:20px;border:2px solid #ccc;margin-left:10px}.inner-circle{width:10px;height:10px;background:transparent;z-index:1;margin-left:15px}.radio-label{margin-left:30px}input[type="radio"]{display:none}input[type="radio"]:checked+.radio-label+.radio-circle{border:2px solid #903B9E}input[type="radio"]:checked+.radio-label+.radio-circle+.inner-circle{background:#903B9E}.default-selected .radio-circle{border:2px solid #903B9E}.form-container .field{padding:8px;margin-bottom:10px}.form-container .label{display:block;margin-bottom:5px}.form-container.purple-selected .field,.form-container.purple-selected .label{border-color:#903B9E}.field{border:2px solid #ccc;padding:8px;margin-bottom:10px;display:inline-block;border-radius:8px}.form-container.purple-border .field{border-color:#903B9E}.purple-border{border-color:#903B9E;color:#903B9E;background-color:#F6EBF8}.btn-solid-blue{background-color:#0047FF;color:#fff;padding:12px 24px;border:none;border-radius:4px;transition:background-color 0.3s ease,color 0.3s ease}.btn-solid-blue:hover{background-color:#fff;color:#0047FF;border:2px solid #0047FF;padding:10px 22px}.btn-white-blue-border{background-color:#fff;color:#0047FF;padding:10px 24px;border:2px solid #0047FF;border-radius:4px;transition:background-color 0.3s ease,color 0.3s ease}.btn-white-blue-border:hover{background-color:#0047FF;color:#fff}.ActionButton{background-color:#fff;color:#0047FF;padding:6px 16px;border:1px solid #0047FF;border-radius:4px;transition:background-color 0.3s ease,color 0.3s ease;font-size:11px}.ActionButton:hover{background-color:#0047FF;color:#fff}.greena{color:#1D8400}.bggrey{background-color:#F8F7FB}.bgwhite{background-color:#fff}.ml20{margin-left:20px}.tr{text-align:right}.icon-circle{width:20px;height:20px;background-color:#0047FF;border-radius:50%;display:flex;justify-content:center;align-items:center}.icon-inside{color:#fff}.person-circle{width:70px;height:70px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:solid 2px #fff}.icon-inside{color:#fff}.width175{width:175px;font-size:13px}.width375{width:375px;font-size:13px}.width325{width:325px;font-size:13px}.width50{width:50px;font-size:13px}.width100{width:100px;font-size:13px}.width200{width:200px;font-size:13px}.font11{font-size:11px}.font13{font-size:13px}.font16{font-size:16px;font-weight:500}.font18{font-size:18px;font-weight:500}.lineitems{position:absolute;margin-top:100px}.fw500{font-weight:500}.fw700{font-weight:700}.scrolling-div{width:auto;height:450px;overflow-y:auto;position:relative}.image-container{position:relative}.image-container img{width:100%;height:auto}.overlay-text{position:absolute;top:9.5%;left:89.4%;transform:translate(-50%,-50%);font-size:9px;font-weight:700}.overlay-textdue{position:absolute;top:89.5%;left:59%;transform:translate(-50%,-50%);font-size:9px;font-weight:700}.Invoicelineitems{padding-bottom:20px}.Invoicelineitems table{width:100%;border-collapse:collapse}.Invoicelineitems tr:nth-child(even){background-color:#f8fcff}.material-textarea{position:relative;width:100%;padding-bottom:20px}.material-textarea textarea{width:100%;border:solid 1px #ebedf2;outline:none;padding:15px;background:none;box-shadow:none;font-size:14px;resize:none;transition:border-color 0.3s ease;border-radius:6px;font-family:Poppins}.material-textarea textarea:focus{border-color:#3f51b5}.material-textarea label{position:absolute;left:15px;top:15px;font-size:16px;pointer-events:none;transition:transform 0.3s ease,opacity 0.3s ease;padding-top:10px}.material-textarea textarea:valid+label,.material-textarea textarea:focus+label{transform:translateY(-20px);font-size:12px;opacity:.8}.blueheader{margin-left:-10px;margin-right:-10px;margin-bottom:-10px;padding:30px;background:rgb(5,67,198);background-image:linear-gradient(to right top,#052c7b 0%,#2c6cf6 100%);color:#fff;border-radius:4px;position:relative}.scrollable-container{width:550px;overflow-x:scroll}.wide-table{width:1200px}.emailheader{background-color:grey;color:#fff}.emaiheader thead{border-left:solid 1px hsla(0,0%,100%,1);border-left:solid 1px hsla(0,0%,100%,1)}.btn-approve{background-color:#007002;color:#fff;padding:8px 36px;border-radius:4px;border:solid 2px #007002}.btn-reject{background-color:#A00101;color:#fff;padding:8px 36px;border-radius:4px;border:solid 2px #A00101}.btn-review{background-color:#FC9700;color:#fff;padding:8px 36px;border-radius:4px;border:solid 2px #FC9700}#overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:9999}#modal{position:absolute;top:50%;left:50%;width:500px;height:400px;background:#fff;transform:translate(-50%,-50%);z-index:10000;border-radius:10px}.cuecard{padding:15px 40px 15px 40px;font-weight:400;border-radius:6px;border:solid 2px #8CBEFD;background-color:#E2F1FF;margin-bottom:10px}.borderpanel{border-radius:6px;padding:20px;-webkit-box-shadow:0 4px 16px rgba(0,0,0,.08);-moz-box-shadow:0 4px 16px rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.08)}.upload{background-color:#fff}.upload:hover{background-color:#CDE8FF}.tooltip{display:none;position:absolute;background-color:#fff;border:1px solid #ccc;padding:10px;z-index:1}.approvalstep{border-radius:15px;background:linear-gradient(84deg,#002FB8 14.72%,#336CFF 107.02%);box-shadow:0 4px 4px 0 rgba(0,0,0,.25);padding:18px 40px 18px 40px;color:#fff;width:400px}.supplierstep{border-radius:15px;background:linear-gradient(84deg,#5C0094 14.72%,#B63EFF 107.02%);box-shadow:0 4px 4px 0 rgba(0,0,0,.25);padding:18px 40px 18px 40px;color:#fff;width:400px}.ft13{font-size:13px}.pr30{padding-right:30px}.pt15{padding-top:15px}.tc{text-align:center}.nowrap{white-space:nowrap}.mt20{margin-top:20px}.mt10{margin-top:10px}.pb20{padding-bottom:20px}.pr20{padding-right:20px}