form input[type=email], form input[type=file], form input[type=number], form input[type=password], form input[type=text], form select, form textarea, input[type="tel" i]
 {
    background-color: #fff !important;
    border: 2px solid #ddd;
    border-radius: 4px;
    flex: 1 1;
    font-size: 16px;
    height: 47px;
    outline: none;
    padding: 0 15px;
    transition: .3s;
    width: 100%;
    font-family: "Open Sans", sans-serif;
}
form input, form select, form textarea {
    box-sizing: border-box;
}
form select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding-right: 30px; /* Space for the icon */
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"/%3E%3C/svg%3E') no-repeat right 10px center;
    background-size: 16px;
}
form textarea {
    padding: 15px 15px;
    height: 80px;
    width: 100%;
}
form input[type="file"] {
    padding-top: 5px;
}
form input[type="file"]::-webkit-file-upload-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
    margin-right: 10px;
}
form input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #0056b3;
}
form a {
    color: #EF233C;
    font-weight: bold;
    text-decoration: solid;
}
form a:visited {
    color: #EF233C;
}
form a:hover {
    color: #EF233C;
    text-decoration: underline;
}
form .button-group, .modal-content .button-group {
    text-align: right;
}
form p.link-register {
    margin: 30px 0 0 0;
}
form .input-group {
    margin-top: 15px;
    display: flex;
    flex-direction: row;
    gap: 25px;
}
form .input-group .input-label label{
    font-size: 14px;
    color: #8D99AE;
    padding-bottom: 5px;
    display: block;
}
form .input-group .input-label label.gray{
    color: #9C9FB9;
}
form .input-label.w100 {
    width: 100%;
}
form .input-label.w80 {
    width: 80%;
}
form .input-label.w70 {
    width: 70%;
}
form .input-label.w50 {
    width: 50%;
}
form .input-label.w30 {
    width: 30%;
}
form .input-label.w20 {
    width: 20%;
}
form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #CD002F;
}
form .button-group.onmodal, .modal-content .button-group.onmodal{
    margin-top: 20px;
}
form .button-group.onmodal button.back, .modal-content .button-group.onmodal .button.back{
    float: left;
}
.button {
    margin: 0;
}
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap:15px;
  max-width: 412px;
}
.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.checkbox-icon {
  display: inline-block;
  width: 16px;
  height: 10px;
  background-color: #fff;
  border-radius: 2px;
  border: 3px solid #fff;
  outline: 3px solid #595b71;
  position: relative;
}
.checkbox-input:checked + .checkbox-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #dc3545; 
  border: 3px solid #fff;
  outline: 3px solid #595b71;
  border-radius: 2px;
  width: 10px;
  height: 10px;
}
.home-register-card-new .checkbox-label {
  color: #fff;
}
.form-delivery-order {
    width: 100%;
    margin-top: 0px;
}
.client-modal .modal-content .button-group, .modal-content.payment-modal .button-group {
    display: flex;
    justify-content: space-between;
}
.form-message{
    margin-top: 20px;
}

/*--- Settings Form ----*/
.form-grid {
    grid-gap: 1.5rem;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}
.form-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.form-group label {
    color: #333;
    display: block;
    font-weight: 600;
    margin-bottom: .5rem;
}
.form-group input {
    border-radius: 4px !important;
    font-size: 1rem !important;
    padding: .8rem !important;
    width: 100% !important;
}
.form-actions{
    display: flex;
    justify-content: end;
    margin-top: 15px;
    margin-right: 10px;
}
.password-toggle {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    height: 1.5rem;
    padding: 0;
    position: absolute;
    right: .75rem;
    top: 45%;
    transform: translateY(-50%);
    transition: color .2s ease;
    width: 1.5rem;
}
.settings-pass {
    display: grid;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.settings-pass .form-actions {
    margin-right: 0px;
}
.pass {
    width: 100%;
    position: relative;
}
.pass-btn{
    position: relative;
}
.success-msg {
    background-color: #9af6a0;
    color: #067a00;
}
.error-msg {
    border-radius: 5px;
    box-sizing: border-box;
    color: #7a0000;
    background-color: #f69aa5;
}
.error-msg, .success-msg {
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 10px;
    padding: 10px;
    text-align: left;
    width: 100%;
}
.modal-content.payment-modal .button-group{
    margin-top: 15px;
}
.card-element-container {
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 4px;
    min-height: 48px;
    padding: 0 10px;
}

/*--- Button Upload Img ---*/
.url div {
    width: 100%;
}
input#image-url {
    padding-right: 10px;
    box-sizing: border-box;
    width: 100%;
}

.remove{
    font-size: 16px;
    color: #C7182D;
    font-weight: 600;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% - 8px);
    padding: 0 12px;
    border: none;
    background-color: #fff;
}
form .input-group .img-button-content {
    display: flex;
    gap: 12px;
}
.img-button-content .action{
    font-size: 16px;
    font-weight: 600;
    padding: 12.5px 10px;
}
.img-button-content  .url{
    flex-grow: 1;
    position: relative;
}
.button-img{
    display: flex;
    gap: 7px;
}
.product-form .checkbox-icon{
    height: 20px;
    width: 20px;
    outline: none;
    border-color: #2B2D42;
    border-radius: 4px;
}
.product-form .checkbox-container{
    gap: 10px;
}
input#product_image_url {
    padding-right: 95px;
}