/* CSS Document */

    .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: 0.25rem; padding: 6px 10px 6px 10px; color: #2a68ec; font-weight: 400; background-color: white;}
	.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: #FFFFFF;}
	.ready{border-radius: 15px; background-color: #1D8400; color: white; 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: white; 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:#BBBBBB; padding: 0.5em 0.75em; font-size: 85%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap;
    vertical-align: baseline; border-radius: 0.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;}
    
    
    .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: white; 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 {
      /* ... (existing styles) */
      padding-right: 40px; /* Make room for the caret and the cross */
    }

    .select-container::before,
    .select-container::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    /* Caret (Down Arrow) */
    .select-container::before {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 8px solid #8B8B8B;
      right: 12px;
      z-index: 1;
    }

    /* Cross (X) */
    .select-container::after {
      content: "\2715"; /* Unicode for 'X' */
      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, 0.1);
      -webkit-appearance: none; /* for older versions of Safari */
      appearance: none;
      font-weight: 300;
      color: #626262;
    }

    .selectlist:focus {
      border: 1px solid #8B8B8B;
      outline: none;
      box-shadow: 0 2px 4px rgba(98, 0, 234, 0.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, 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, 0.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: bold;
  line-height: 1.1;
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

.form-control + .form-control {
  margin-top: 1em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #9DBAF8;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.35em;
  height: 1.35em;
  border: 0.15em solid #9DBAF8;
  border-radius: 0.15em;
  transform: translateY(-0.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);
  /* Windows High Contrast Mode */
  background-color: #2A68EC;
  border-radius: 0.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;
        }

        /* Show the first panel initially */
        .panel:nth-child(1) {
            display: block;
        }

        /* Button styles */
        .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: 0px 4px 16px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 4px 16px rgba(0,0,0,0.08);box-shadow: 0px 4px 16px rgba(0,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;
}

/* Hide the default radio button */
input[type="radio"] {
  display: none;
}

/* Style for selected option */
input[type="radio"]:checked + .radio-label + .radio-circle {
  border: 2px solid #903B9E;
}

input[type="radio"]:checked + .radio-label + .radio-circle + .inner-circle {
  background: #903B9E;
}

/* Style for default-selected option */
.default-selected .radio-circle {
  border: 2px solid #903B9E;
}

.form-container .field {
  
  padding: 8px;
  margin-bottom: 10px;
}

.form-container .label {
  display: block;
  margin-bottom: 5px;
}

/* When radio button is selected */
.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 */
}

.purple-border {
  border-color: #903B9E; /* Purple */
  color: #903B9E;
  background-color: #F6EBF8;
}


/* Solid Blue Button */
.btn-solid-blue {
  background-color: #0047FF; /* Blue */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-solid-blue:hover {
  background-color: white;
  color: #0047FF; /* Blue */
  border: 2px solid #0047FF; /* Blue */
  padding: 10px 22px;
}

/* White Button with Blue Border */
.btn-white-blue-border {
  background-color: white;
  color: #0047FF; /* Blue */
  padding: 10px 24px;
  border: 2px solid #0047FF; /* Blue */
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-white-blue-border:hover {
  background-color: #0047FF; /* Blue */
  color: white;
}

/* White Button with Blue Border */
.ActionButton {
  background-color: white;
  color: #0047FF; /* Blue */
  padding: 6px 16px;
  border: 1px solid #0047FF; /* Blue */
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 11px;
}

.ActionButton:hover {
  background-color: #0047FF; /* Blue */
  color: white;
}



.greena {color: #1D8400;}
.bggrey {background-color: #F8F7FB;}
.bgwhite{background-color: white;}
.ml20 {margin-left: 20px;}
.tr {text-align:  right;}

.icon-circle {
  width: 20px;
  height: 20px;
  background-color: #0047FF; /* or any colour you want for the circle */
  border-radius: 50%; /* makes it circular */
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-inside {
  color: white; /* Font color */
}

.person-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%; /* makes it circular */
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 2px white;
}

.icon-inside {
  color: white; /* Font color */
}


.width175 {width: 175px; font-size: 13px;}
.width375 {width: 375px; 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
  /* Add more styling as needed */
}

.overlay-textdue {
  position: absolute;
  top: 89.5%;
  left: 59%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 700
  /* Add more styling as needed */
}

.Invoicelineitems {padding-bottom: 20px;}

.Invoicelineitems table {
  width: 100%;
  border-collapse: collapse;
  
}


/* Alternating row colours */
.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; /* remove the resize handle */
  transition: border-color 0.3s ease;
  border-radius: 6px;
  font-family: Poppins;
}

.material-textarea textarea:focus {
  border-color: #3f51b5; /* A nice blue for focus */
}

.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: 0.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;
  /* Additional table styling if needed */
}

.emailheader{background-color: grey; color: white;}
.emaiheader thead {border-left: solid 1px hsla(0,0%,100%,1.00); border-left: solid 1px hsla(0,0%,100%,1.00);}

/* White Button with Blue Border */
.btn-approve {
  background-color: #007002;
  color: white; /* Blue */
  padding: 8px 36px;
  border-radius: 4px;
  border: solid 2px #007002;
}

.btn-reject {
  background-color: #A00101;
  color: white; /* Blue */
  padding: 8px 36px;
  border-radius: 4px;
  border: solid 2px #A00101;
}

.btn-review {
  background-color: #FC9700;
  color: white; /* Blue */
  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, 0.7); /* Dim background */
  z-index: 9999;
}

#modal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 400px;
  background: white;
  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: 0px 4px 16px rgba(0,0,0,0.08);
-moz-box-shadow: 0px 4px 16px rgba(0,0,0,0.08);box-shadow: 0px 4px 16px rgba(0,0,0,0.08);}


.upload {background-color: white;}
.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: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 18px 40px 18px 40px; color: white; width: 400px;}

.supplierstep {border-radius: 15px; background: linear-gradient(84deg, #5C0094 14.72%, #B63EFF 107.02%);
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); padding: 18px 40px 18px 40px; color: white; width: 400px;}