.form-group{
     
}
.form-group:not(:last-child){
     margin-bottom:20px;
}
.form-group-controls{
     margin-top: 6px;
}

/*=========================
   VALIDATION STATES
=========================*/
.is-invalid{
     border-color:var(--danger-color)!important;
     box-shadow:0 0 0 4px rgba(220,38,38,.1)!important;
}

.is-valid{
     border-color:var(--success-color)!important;
     box-shadow:0 0 0 4px rgba(22,163,74,.1)!important;
}

/*=======================
  INPUT ERRORS
===========================*/

.input_error {
     border-color: #dc2626!important;
}

.field-error {
     margin-top: 0.4rem;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
     color: #991b1b;
     background: #fef2f2;
     border-left: 3px solid #dc2626;
     border-radius: 0 4px 4px 0;
}

/* =========================
   BUTTONS
========================= */

button,
.form-action-btn{
     border:none;
     height:35px;
     padding:0 16px;
     border-radius:14px;
     font-size:13px;
     font-weight:500;
     cursor:pointer;
     text-decoration: none;
     transition:
        transform var(--transition),
        opacity var(--transition),
        background var(--transition);
}

button:focus{
     outline:none;
}

button:hover{
     transform:translateY(-1px);
}

button:active{
     transform:translateY(0);
}

.btn-primary{
     background:var(--primary-color);
     color:#fff;
}

.btn-secondary{
     background:#e2e8f0;
     color:#1e293b;
}

.btn-danger{
     background:var(--danger-color);
     color:#fff;
}

.btn-cancel{
     background:var(--text-color-light);
     color:#000;
}

/*=========================
    FIELD LABEL
=========================*/

label{
     font-size:13px;
     font-weight:600;
     color:#1e293b;
}

.required{
     color:var(--danger-color);
     margin-left:4px;
}

/*=========================
   FIELD HELP TEXT
=========================*/

.help-text{
     font-size:13px;
     color:var(--text-color-muted);
     margin-top:-2px;
}

.error-text{
    font-size:13px;
    color:var(--danger-color);
}

/*=========================
   GENERAL STYLES FOR INPUTS
=========================*/
input,
textarea,
select{
     width:100%;
     border:1px solid #d1d5db;
     background:#fff;
     color:var(--text-color);
     border-radius:9px;
     height:40px;
     padding-left:8px;
     padding-right:8px;
     font-size:12px;
     outline:none;
     transition:
         border-color var(--transition),
         box-shadow var(--transition),
         background var(--transition);
}

input:hover,
textarea:hover,
select:hover{
     border-color:var(--hard-border);
}

input:focus,
textarea:focus,
select:focus{
     border-color:var(--primary-color);
     box-shadow:0 0 0 4px var(--primary-color-soft);
     outline:none;
}

input::placeholder,
textarea::placeholder{
     color:#94a3b8;
} 

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"]{
     cursor:pointer;
}