input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/*** FIELDS ***/
.form_field {
	position: relative;
}
.field_label{
	font-size: 13px;
	margin-bottom: 5px;
	color: var(--gray400);
}
.title_label.field_label{
	font-weight: 500;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--gray200);
    padding-bottom: 5px;
}
.field_help {
	font-size: 12px;
	color: #939fac;
	margin-top: 5px;
	line-height: 130%;
}
.field_help a{
	text-decoration: underline;
}
.footer_help{
	font-size: 11px;
	text-transform: uppercase;
	margin-top: 15px;
	font-weight: 500;
}
.footer_help a{
	text-decoration: underline;
}
.errors_list{
	display: inline-flex;
	width: 100%;
	gap: 5px;
	text-align: center;
	list-style: none;
	margin: 15px 0 0 0;
	padding: 0;
	line-height: 100%;
	font-size: 12px;
}
.errors_list li{
	width: 100%;
	padding:10px;
	background: var(--redColor);
	color: #FFF;
	border-radius: 5px;
}

/*** FIELD EXTRAS ***/
.input_actions{
	position: absolute;
	top:5px;
	right:5px;
	gap: 5px;
}
.input_actions input{
	display: none;
}
.input_actions input + .icon_button{
	--btnColor: var(--gray250);
}
.input_actions input:checked + .icon_button{
	--btnColor: var(--purpleColor);
}
.search_input{
	background-image: url(../images/search.svg);
    background-size: 20px;
    background-position: calc(100% - 10px) center;
    background-repeat: no-repeat;
}

/*** NUMBER INPUT ***/
.icon_before{
	position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 35px;
    height: 45px;
    font-size: 14px;
    opacity: 0.5;
}
.icon_before + input{
	padding-left: 35px !important;
}

/*** SPINNER ***/
.spinner_wrapper {
	border: 1px solid var(--gray250);
	border-radius: 3px;
}
.spinner_wrapper > span{
	width: 45px;
	height: 45px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: #FFF;
	cursor: pointer;
}
.spinner_wrapper > span.disabled{
	opacity: 0.5;
	pointer-events: none;
}
.spinner_minus{
	border-radius: 3px 0 0 3px;
}
.spinner_plus{
	border-radius: 0 3px 3px 0;
}
.spinner_wrapper input[type=number]{
	text-align: center;
	width: 60px;
	border-radius: 0;
	border-width: 0 1px;
}

/*** UPLOAD FIELD ***/

/** GENERALS **/
.file_item_actions > *{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	font-size: 12px;
	color: #FFF;
	cursor: pointer;
}
.file_uploader_box{
	position: relative;
	float: left;
	width: 100%;
	border: 2px dashed var(--gray300);
	background: var(--bs-gray-100);
	border-radius: 10px;
	transition: all 0.3s;
	cursor: pointer;
}
.file_uploader_box:hover{
	background: var(--bs-gray-200);
}

.fileuploader-droparea{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	background: var(--gray300);
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.fileuploader-dragging .fileuploader-droparea{
	opacity: 0.4;
	visibility: visible;
}

/** IMAGE UPLOAD **/
.upload_input_wrapper {
	padding: 10px;
	border: 1px solid var(--gray250);
	border-radius: 3px;
	text-align: center;
}
.fileuploader-theme-upload_box{
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 180px;
	padding: 0;
	margin: 0;
	background: none;
}
.fileuploader-theme-upload_box .file_uploader_box::after{
	content: '\f182';
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: calc(50% - 20px);
	left: calc(50% - 20px);
	width: 40px;
	height: 40px;
	font-size: 25px;
	color: var(--gray300);
	font-family: uicons-regular-rounded;
	transform: scale(0.9);
	transition: all 0.3s;
	opacity: 0.8;
}
.fileuploader-theme-upload_box .file_uploader_box:hover::after{
	opacity: 1;
	transform: scale(1);
}
.fileuploader-theme-upload_box .spacer{
	padding-top:100%;
}
.fileuploader-theme-upload_box .thumbnails_area{
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	padding: 5px;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	overflow: hidden;
}
.fileuploader-theme-upload_box.with_items .thumbnails_area{
	display: inline-block;
}

.fileuploader-item-image {
	position: absolute;
	top: 5px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	overflow: hidden;
	border-radius: 5px;
	background: var(--gray100);
}
.fileuploader-item-image img {
	float: left;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	border-radius: 5px;
	max-width: none;
	max-height: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.fileuploader-theme-upload_box .file_item_actions{
	position: absolute;
	top:10px;
	right:10px;
	background: rgba(89, 96, 104, 0.7);
	border-radius: 5px;
	opacity: 0;
	gap:5px;
	transition: all 0.3s;
}
.fileuploader-theme-upload_box .file_item:hover .file_item_actions{
	opacity: 1;
}
.fileuploader-theme-upload_box .file_item_actions:hover{
	opacity: 1;
	background: var(--gray400);
}

/** UPLOADER SHAPES **/
.circle_uploader_shape .file_uploader_box,
.circle_uploader_shape .fileuploader-theme-upload_box .thumbnails_area,
.circle_uploader_shape .fileuploader-item-image{
	border-radius: 50%;
}
.circle_uploader_shape  .fileuploader-theme-upload_box .file_item_actions{
	top: inherit;
    bottom: 15px;
    right: 50%;
    transform: translateX(50%);
    background: rgba(89, 96, 104, 0.9);
}

/*** FILE UPLOAD ***/
.fileuploader-theme-upload_file {
	position: relative;
	display: inline-block;
	width: 100%;
	padding: 0;
	background: none;
	margin: 0;
}
.fileuploader-theme-upload_file .file_uploader_box {
	height: 35px;
	border-radius: 5px;
}
.fileuploader-theme-upload_file .uploader_label{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	transform: translate(-50%, -50%);
	color: var(--gray400);
}
.fileuploader-theme-upload_file .uploader_label i{
	font-size: 15px;
}
.fileuploader-theme-upload_file .file_item_actions{
	gap:5px;
	width: 30px;
}
.fileuploader-theme-upload_file .file_items{
	position: relative;
	display: none;
	margin-top:10px;
}
.fileuploader-theme-upload_file.with_items .file_items{
	display: inline-block;
}
.fileuploader-theme-upload_file .file_item{
	padding: 5px 10px;
	background: var(--bs-gray-200);
	border-radius: 5px;
}
.column-title{
	width: calc(100% - 40px);
}
.fileuploader-theme-upload_file .file_name {
	font-size: 12px;
	font-weight: 500;
}
.fileuploader-theme-upload_file .file_size{
	font-size: 11px;
	opacity: 0.7;
}
.fileuploader-theme-upload_file .remove_item{
	background: var(--redColor);
	border-radius: 5px;
	height: 25px;
	width: 25px;
	font-size: 9px;
}
.fileuploader-theme-upload_file .progress-bar{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--gray50);
}
.fileuploader-theme-upload_file .progress-bar > span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
}
.fileuploader-theme-upload_file .fileuploader-progressbar,
.fileuploader-theme-upload_file .fileuploader-progressbar .bar{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.fileuploader-theme-upload_file .fileuploader-progressbar .bar{
	background: var(--greenColor);
}
.limit_reached .file_uploader_box{
	display: none;
}
.limit_reached .file_items{
	margin-top: 0;
}

/*** CHECKBOX FIELD ***/
.checkbox_wrapper{
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

/*** CHECKBOX LIST ***/
.checkbox_list{
	list-style: none;
}
.checkbox_label{
	gap:10px;
	cursor: pointer;
}
.checkbox_list > *{
	width:var(--columns)
}

/*** SWITCH ***/
.switch_box_wrapper{
	cursor: pointer;
	display: inline-block;
}
.field_label + .switch_box_wrapper{
	margin: 8px 0 0 0;
}
.switch_box_wrapper input{
	display: none;
}
.switch_box{
	gap: 5px;
}
.switch_label{
	font-size: 13px;
	color: var(--gray400);
}
.switch{
	position: relative;
	display: inline-block;
	width: 35px;
	height: 20px;
	border-radius: 99px;
	border:1px solid var(--gray300);
	transition: all 0.3s;
}
.switch::before{
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	transition: all 0.3s;
	background: var(--gray300);
}
input:checked + .switch_box .switch{
	border-color: var(--greenColor);
}
input:checked + .switch_box .switch::before{
	right:16px;
	background: var(--greenColor);
}

/*** TAXONOMIES CHECKBOXES **/
.catogories_box {
	list-style: none;
	background: var(--gray50);
	padding: 15px;
	max-height: 200px;
	overflow: auto;
	border: 2px solid transparent;
	margin: 0;
	gap: 5px;
}
.required_checkbox.error + label + .catogories_box{
	border-color:var(--redColor);
}
.catogories_box li{
	margin:3px 0 0 0;
}
.catogories_box label{
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	cursor: pointer;
	line-height: 20px;
}
.catogories_box li .children{
	float:left;
	width:100%;
	box-sizing:border-box;
	list-style:none;
	padding:0 0 0 20px;
}

/*** TAGS FIELDS ***/
.selectize-input{
	border: 1px solid var(--gray250);
	box-shadow: none;
	padding: 0 10px;
}
.selectize-input > input,
.selectize-input > input[type=text]{
	height: 43px;
}
.selectize-input.has-items > input,
.selectize-input.has-items > input[type=text]{
	height: 36px;
}
.selectize-input.focus{
	box-shadow: none;
}
.selectize-control.multi .selectize-input [data-value]{
	text-shadow: none;
	background: var(--blueColor500);
	box-shadow: none;
	padding: 5px 10px;
	border: none;
}
.selectize-control.multi .selectize-input [data-value].active{
	background: var(--blueColor600);
	border: none;
}
.selectize-dropdown {
    margin: -1px 0 0 0 !important;
}

/** SELECT TAGS FIELDS **/
.selectize-control.single .selectize-input:after {
	right: 10px;
	margin-top: 0;
	border-color: #7c97b3 transparent transparent transparent;
}
.selectize-control.single .selectize-input.locked{
	background: #eef0f3;
	pointer-events:none;
	color: #283c55b0;
}

/*** SEARCH SELECT FIELD ***/
.selectize-control.single .selectize-input{
	float: left;
	height: 45px;
    line-height: 45px;
    background: #FFF;
    border: 1px solid var(--gray250);
    box-shadow: none;
}
.last_field > .selectize-control .selectize-dropdown{
	float: left;
	position: relative !important;
	top:0 !important;
	margin: 0 !important;
}
.selecitize_item{
	line-height:25px;
	font-size:12px;
	padding:5px 10px;
	box-sizing:border-box;
	border-bottom: 1px solid #f6f8fc;
}
.selecitize_selected_item .caption{
	display: inline-block;
	font-size: 90%;
	color: var(--gray500);
	margin-top:3px;
}
.selecitize_item .caption{
	display: inline-block;
	font-size: 90%;
	color: var(--gray500);
	margin:-3px 0 3px;
}

/*** FIELD SET ***/
fieldset{
	border: 1px solid var(--gray250);
	padding: 20px;
	box-sizing: border-box;
	margin: 0 0 10px 0;
	align-content: start;
}
legend{
	font-size: 13px;
	text-transform: uppercase;
	padding: 0 10px;
	color: var(--gray400);
	letter-spacing: 2px;
	font-weight: bold;
}

/*** SORTABLE LIST ***/
.sortable_list,
.nestable_list_wrapper-empty{
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 0;
	padding: 15px 15px 30px 15px;
	border: 1px solid var(--gray250);
	border-radius: 3px;
	min-height: 90px;
	list-style: none;
}
.sortable_list.dradding_list{
	position: absolute;
	padding: 0;
	border: none;
	pointer-events: none;
	z-index: 99999;
}
.sortable_list > li > .sortable_list{
	padding: 0 0 0 30px;
    border: none;
    margin-top: 10px;
	gap: 10px;
}
.list_field_actions {
	transform: translateY(-50%);
}
.list_item .list_item_wrapper{
	width: calc(100% - 50px);
	padding-left: 30px;
    background: var(--bs-gray-100);
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,0.15);
}
.list_item .list_item_header{
	padding: 15px;
}
.only_fields_edition .list_item{
	width: 100%;
}
.only_fields_edition .list_item:last-child{
	margin-bottom: -15px;
}
.icon_button.delete_list_item{
	position: absolute;
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
}
.sortable_list_base .delete_list_item{
	display: none;
}
.list_item_handle{
	position: absolute;
    top: 0;
    left: -30px;
    width: 30px;
    color: var(--gray250);
    background: var(--gray150);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: grab;
}
.list_item_handle:hover{
	color: var(--gray300);
}

/*** BLOCKS FIELD ***/
.sortable_boxes{
	gap: 5px;
	margin: 0;
	padding: 15px;
	background: var(--gray300);
	list-style: none;
	border-radius: 5px;
}
.sortable_box{
	float: left;
	position: relative;
	margin: 0;
	width: calc(20% - 20px);
	min-height: 80px;
	min-width: 150px;
	border-radius: 5px;
}
.sortable_box_handle {
	float: left;
	height: 20px;
	line-height: 20px;
	color: var(--gray300);
	background: var(--gray50);
	border-radius: 3px 3px 0 0;
	border-bottom: 1px solid var(--gray100);
	cursor: move;
}
.sortable_box_handle i {
	font-size: 14px;
}
.sortable_box_body{
	float:left;
	background: #FFF;
	padding: 20px 15px 20px 20px;
	font-size: 12px;
	line-height: 20px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(50% + 13px), 10px 50%, 0 calc(50% - 13px));;
}
/*
.sortable_box:before{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	left: 0;
	border-style: solid;
	border-width: 17px 0 17px 12px;
	border-color: transparent transparent transparent var(--gray300);
}
*/
.sortable_box:after{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	right: -8px;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent #FFF;
}
.add_sortable_box{
	float: left;
	position: relative;
	margin-left:10px;
	width: calc(20% - 20px);
	min-width: 150px;
	min-height: 80px;
	color: rgba(255,255,255,0.6);
	background: rgba(0,0,0,0.2);
	border: 2px dashed rgba(255,255,255,0.6);
	border-radius: 5px;
	cursor: pointer;
}
.add_sortable_box:hover{
	color: rgba(255,255,255,1);
	border: 2px dashed rgba(255,255,255,1);
}
.sortable_box_delete{
	float: left;
	height: 20px;
	line-height: 20px;
	background: var(--gray50);
	border-top: 1px solid var(--gray100);
	color: var(--redColor);
	font-size: 15px;
	border-radius: 0 0 3px 3px;
	cursor: pointer;
	transition: all 0.3s;
}
.sortable_box_delete:hover{
	background:var(--redColor);
	color:#FFF;
}
.sortable_box_options{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
	background: var(--purpleColor);
	opacity:0;
	transition:all 0.3s;
}
.sortable_box_options:before{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	left: -3px;
	border-style: solid;
	border-width: 17px 0 17px 12px;
	border-color: transparent transparent transparent #f2f5ff;
}
.sortable_box_options:after{
	content: '';
	position: absolute;
	top: calc(50% - 15px);
	right: -10px;
	border-style: solid;
	border-width: 15px 0 15px 10px;
	border-color: transparent transparent transparent var(--purpleColor);
}
.sortable_box_options:hover{
	opacity:1;
}
.sortable_box_options i{
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	font-size:18px;
	transform:translate(-50%, -50%);
}
.sortable_box_placeholder i{
	font-size: 27px;
}

/*** FORM HEADLINE ***/
.gwfield_form_headline{
	border-bottom: 1px solid var(--gray200);
	padding: 15px 0;
}
.gwfield_form_headline.box_header{
	width: calc(100% + 60px);
	max-width: calc(100% + 44px);
	margin: -6px 0 0 -22px;
	padding: 20px 35px;
	border-bottom: 1px solid var(--gray200);
	border-radius: 5px 5px 0 0;
}
.form_headline{
	margin: 0;
	text-transform: uppercase;
	color: var(--gray400);
	font-size: 15px;
	letter-spacing: 1px;
}
.gwfield_form_headline .subtitle{
	font-size: 14px;
	margin-top: 5px;
	font-weight: 500;
	color: var(--gray300);
}

/*** IMPORT FIELD ***/
.import_field_form_wrapper{
	padding: 30px;
	background: #FFF;
	border-radius: 5px;
}
.import_sidebar{
	position: absolute;
	top:0;
	right:0;
	border: 1px solid var(--gray250);
	background: #FFF;
	border-radius: 3px;
	overflow: auto;
}
.sidebar_fixed .import_sidebar{
	position: fixed;
	top: 30px;
	right:30px;
}
.import_sidebar_header{
	padding: 15px;
	border-bottom: 1px solid var(--gray200);
}
.import_sidebar_header h3{
	margin: 0;
	text-transform: uppercase;
	color: var(--gray400);
	font-size: 13px;
	letter-spacing: 1px;
}
.import_sidebar_fields {
	padding: 15px;
	gap: 10px;
	overflow: auto;
	max-height: calc(100vh - 220px);
}
.import_sidebar_fields > *{
	padding: 10px;
	background: var(--gray50);
	border-radius: 3px;
	color: var(--gray400);
	font-weight: 500;
	transition:all 0.5s;
}
.import_sidebar_fields > *:hover{
	background: var(--gray200);
}
.field_col_input span{
	font-size: 11px;
	margin-bottom: 4px;
	opacity: 0.7;
}
.field_col_input .drag_column{
	font-size: 14px;
	cursor: grab;
}
.field_col_input .drag_column:hover{
	color: var(--purpleColor);
}

/** SPECIAL FIELDS **/
.input_action{
	position: absolute;
	top: 0;
	right: 0;
	width: 45px;
	height: 45px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--gray400);
	cursor: pointer;
}

/*** POST FORM ***/
.form_panel_sidebar_widget{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	overflow: auto;
}
.sidebar_fixed .form_panel_sidebar_widget{
	position: fixed;
	top: 30px;
	right: 30px;
}

.form_panel_tabs {
	gap:5px;
}
.sidebar_tab {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	padding: 5px;
	border-radius: 99px;
	gap: 10px;
	cursor: pointer;
	transition: all 0.5s;
}
.sidebar_tab.active{
	background: var(--gray400);
	color: #FFF;
}
.sidebar_tab > i{
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background: var(--gray400);
	color: #FFF;
	border-radius: 50%;
}
.sidebar_tab.active > i{
	background: #FFF;
	color: var(--gray400);
}

/*** PINCODE INPUT ***/
.pincode_wrapper{
	gap: 5px;
}
.pincode_wrapper input[type=number]{
	width: 50px;
	border: none;
	background: var(--gray200);
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

/*** COLOR PICKER ***/
input[type=text].color_picker{
	padding: 0 10px 0 43px;
}
.color_picker_box{
	position: absolute;
	top: 4px;
    left: 4px;
    width: 36px;
    height: 36px;
	border-radius: 3px;
	border: 1px solid var(--gray100);
	cursor: pointer;
}
.color_picker_accept{
	position: absolute;
    top: 4px;
    right: 4px;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    background: var(--greenColor);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}