/* ==========================================================
   VERTICAL FIELD
   ========================================================== */

.field-vertical {

    display: flex;

    flex-direction: column;

    gap: 3px;

    margin-bottom: 12px;
}


/* ==========================================================
   HORIZONTAL FIELD
   ========================================================== */

.field-horizontal {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}


/* ==========================================================
   INLINE FIELD
   ========================================================== */

.field-inline {

    display: inline-flex;

    align-items: center;

    gap: 8px;
}


/* ==========================================================
   FIELD GROW
   ========================================================== */

.field-grow {

    flex: 1;
}


/* ==========================================================
   FIELD AUTO
   ========================================================== */

.field-auto {

    width: auto;
}


/* ==========================================================
   FIELD SMALL
   ========================================================== */

.field-small {

    width: 180px;
}


/* ==========================================================
   FIELD MEDIUM
   ========================================================== */

.field-medium {

    width: 320px;
}


/* ==========================================================
   FIELD LARGE
   ========================================================== */

.field-large {

    width: 500px;
}