/* ============================================================================================== */
/* ========================================= theme outlined ===================================== */
/* ============================================================================================== */

.outlined-theme {}

.outlined-theme .field-group.input-field-group>.field.input-field,
.outlined-theme .field-group.select-field-group>.field.select-field,
.outlined-theme .field-group.textarea-field-group>.field.textarea-field,
.outlined-theme .field-group.upload-file-group>.field.upload-file-inside {
    background: none !important;
    border: 1px solid rgba(214, 214, 214, 1);
}

.outlined-theme .field-group>.field>.label-text,
.outlined-theme .field-group>.field.focus>.label-text,
.outlined-theme .field-group>.field.has-data>.label-text,
.outlined-theme .field-group>.field>.label-text.label-text-ontop,
.outlined-theme .field-group>.field.has-fix-text.prefix-text>.label-text,
.outlined-theme .field-group>.field.select-field>.label-text {
    left: 15px;
}

.outlined-theme .field-group>.field.select-field>.label-text {
    opacity: 0;
}

.outlined-theme .field-group>.field.select-field.focus>.label-text,
.outlined-theme .field-group>.field.select-field.has-data>.label-text {
    opacity: 1;
}

.outlined-theme .field-group>.field>.label-text {
    padding-left: 5px !important;
    padding-right: 5px !important;
    background-color: rgba(var(--customize-color-white), 1);
    line-height: calc(var(--field-line-height) - 2px);
}

/* leading icon */
.outlined-theme .field-group>.field.icon-field-enable.leading-icon-format>.label-text,
.outlined-theme .field-group>.field.icon-field-enable.leading-icon-format>.input-text {
    padding-left: var(--field-height);
}

/* trailing icon */
.outlined-theme .field-group>.field.icon-field-enable.trailing-icon-format>.input-text {
    padding-right: var(--field-height);
}

.outlined-theme .field-group>.field.icon-field-enable>.icon-field {
    width: var(--field-height);
    height: calc(var(--field-line-height) - 2px);
    padding: 0 !important;
}

.outlined-theme .field-group>.field.text-field-enable.suffix-text-format>.text-field.suffix-text {
    padding-right: 20px;
}

/* --------------------------------------------------------------- */
/* ------------------------- upload file ------------------------- */
/* --------------------------------------------------------------- */

/* upload */
.outlined-form .field-group.upload-file-group>.field.upload-file-inside {
    border: 1px solid rgba(214, 214, 214, 1) !important;
    border-radius: 5px !important;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside+.field.upload-file-inside {
    margin-top: 15px;
}

.outlined-form .field-group.upload-file-group .upload-file-btn>.col-btn {
    background-color: rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(214, 214, 214, 1);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

/* .outlined-form .field-group.upload-file-group .upload-file-btn>.col-btn:hover {
	background-color: rgba(0,0,0,0.1);	
} */
.outlined-form .field-group.upload-file-group>.field.upload-file-inside .upload-file-btn>.col-text {
    color: rgba(0, 0, 0, 0.3) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.3s ease;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside .upload-file-btn>.col-text .icon {
    font-size: 15px;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside.alert-required .upload-file-btn>.col-btn {
    color: rgba(225, 6, 19, 1) !important;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside.alert-required {
    border-color: rgba(225, 6, 19, 1) !important;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside.alert-required .upload-file-btn>.col-btn {
    background-color: rgba(225, 6, 19, 0.08);
    border-right: 1px solid rgba(225, 6, 19, 1);
}

.outlined-form .field-group.upload-file-group>.field:before {
    display: none !important;
}

.outlined-form .field-group.upload-file-group>.field.upload-file-inside.selected-file {
    border-color: rgba(var(--custom-rgb-color-secondary-2), 0.3) !important;
    background-color: rgba(var(--custom-rgb-color-secondary-2), 0.1) !important;
}

/* --------------------------------------------------------------- */
/* ---------------------------- alert ---------------------------- */
/* --------------------------------------------------------------- */

.outlined-theme .alert-required .message-alert-required {
    position: absolute;
    width: auto;
    height: 20px;
    line-height: 20px;
    top: 50%;
    left: auto;
    right: 0;
    padding: 0 20px 0 0;
    margin-top: -10px;
}

.outlined-theme .alert-required .field.leading-icon-format .message-alert-required {
    padding-left: calc(var(--field-height) - 5px);
}

.outlined-theme .alert-required .field.trailing-icon-format .message-alert-required {
    padding-right: calc(var(--field-height) - 5px);
}

.outlined-theme .field-group.alert-required.input-field-group>.field.input-field,
.outlined-theme .field-group.alert-required.select-field-group>.field.select-field,
.outlined-theme .field-group.alert-required.textarea-field-group>.field.textarea-field,
.outlined-theme .field-group.alert-required.upload-file-group>.field.upload-file-inside {
    border-color: rgba(var(--customize-color-red), 1);
    ;
}