.xtfw-settings-form {

	position: relative;
	padding: 25px;

	&:not(.xtfw-settings-sectioned) {
		padding: 15px 25px 25px;

		.xtfw-settings-form-footer{
			margin: 30px 0 0;
		}
	}

	&.xtfw-settings-sectioned {

		.xtfw-settings-section {
			padding: 0 10px;
		}

		.xtfw-settings-form-footer{
			margin: 15px 20px 0;
		}

		@media screen and (max-width: 782px) {
			padding:0;

			.xtfw-settings-section {
				padding: 10px 20px 10px 20px;
			}

			.xtfw-settings-form-footer{
				margin: 15px 20px;
				text-align: center;
			}
		}

	}

	.xtfw-settings-section {
		position: relative;
		border: 0;

		&:last-of-type{
			border-bottom:1px solid #eaeaea;
		}
	}

	.xtfw-settings-title {
		background: transparent;
		border: 0;
		border-radius: 0;
		padding: 10px 0 10px 20px;
		font-size: 16px;
		font-weight: 500;
		border-bottom: 1px solid transparent;
		border-top:1px solid #eaeaea;
		cursor: pointer;
		transition: background-color .3s,color .3s, box-shadow .3s, border-color .3s;
		will-change: auto;
		margin: 0;
		color:#777;

		&:first-of-type {
			border-top-color: transparent;
		}
		&:nth-last-child(3) {
			border-bottom-color: #eaeaea;
		}

		.ui-accordion-header-icon {
			left: initial;
			right: .5em;
			top: 50%;
			transform: translateY(-50%);
			margin-top: 0;
			color:#777;
			transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
		}

		&:not(.ui-accordion-header-active):hover{
			box-shadow: 0 0 5px rgba(40,40,40,0.15);
			color: #000;
			z-index: 1000;
			border-color: transparent;

			+ div + .xtfw-settings-title {
				border-top-color: transparent;
			}

			.ui-accordion-header-icon {
				color:#000;
			}
		}

		&.ui-accordion-header-active{
			background: #eaeaea;
			color:#000;
			.ui-accordion-header-icon {
				color:#000;
			}
			+ .xtfw-settings-section + .xtfw-settings-title{
				border-top:1px solid #eaeaea;
			}
		}

		+ .xtfw-settings-section{
			display: none;
		}
	}

	.xtfw-section-description{
		margin: 20px 0;
		padding: 8px 12px;
		color: #54544b;
		font-style: italic;
		background: #ffffdc;
		display: inline-block;

		p{
			margin: 0!important;
		}
	}

	.xtfw-settings-preview-title {
		display: block;
		font-weight: 600;
		font-size: 12px;
		margin: 0 0 15px;

		@media screen and (max-width: 600px) {
			text-align: center;
		}
	}
	.xtfw-settings-preview-section {
		display: flex;
		flex-direction: row-reverse;
		box-sizing: border-box;

		@media screen and (max-width: 600px) {
			flex-direction: column;
		}
	}

	.xtfw-settings-preview-settings {
		flex: 1;

		@media screen and (max-width: 1140px) {
			.forminp-group {
				.form-table tbody {
					flex-direction: column;
					padding-top: 5px;
					tr{
						width:100%!important;
					}
				}
			}
		}
	}
	
	.xtfw-settings-preview-sidebar {
		padding: 15px 0 0 5%;
		width: 250px;
		bottom:50px;
		z-index: 99999999;

		*{
			box-sizing: border-box;
		}

		.inner-wrapper-sticky {
			left: initial!important;
		}

		@media screen and (max-width: 600px) {
			width: initial;
			padding: 0 0 5% 0;
			border-bottom: 1px dashed #eaeaea;

			.xtfw-settings-preview{
				margin: 0 auto;
			}
		}
	}

	.xtfw-settings-preview{

		--xtfw-spinner-color: #444;

		position: relative;
		width: 200px;
	}

	.form-table {

		font-family: Verdana,Arial,sans-serif;
		margin-top: 0;

		.inline-block {
			display: inline-block;
		}

		th,
		td {
			border-top: 1px dashed #eaeaea;
			padding: 15px 0;

			a:not(.button){
				color: #1c95e0;
			}

		}
		tr{

			&:first-child {
				th,
				td {
					border-top:0;
				}
			}

			&.hidden{
				display: none!important;
			}
		}

		th {
			width:40%;

			&.fullwidth {
				width:100%;
				padding:0;
			}

			label {
				position: relative;
				display: block;
				width: 85%;
				font-size: 12px;
				padding-right: 15%;
			}

			@media screen and (max-width: 782px) {
				width: auto;
				border-bottom:0;
				padding-bottom:0;
			}
		}

		td {
			vertical-align: middle;

			label {
				font-size: 12px;
				margin-top: -7px;
				display: block;

				+ fieldset{
					margin-top: 10px;
				}
			}

			@media screen and (max-width: 782px) {
				padding-bottom: 10px;
				margin-bottom: 12px;
				border-top: 0;

				label {
					margin-top: 0;
				}
			}
		}

		fieldset{

			&.flex-box {

				display: flex;

				@media screen and (max-width: 782px) {
					flex-direction: column;
				}

				> * {
					&:not(.button):not(span) {
						flex: 1;
					}

					@media screen and (max-width: 782px) {
						&:not(:last-child) {
							margin-bottom: 10px!important;
						}
					}

					@media screen and (min-width: 783px) {
						&:not(:last-of-type) {
							margin-right: 6px;
						}

						+ *:not(.button):not(span) {
							margin-left: 10px;
						}
					}
				}
			}

			&:not(:last-of-type) {
				margin-bottom: 15px;
			}
		}

		small {
			font-weight: initial;
			color: #444;
		}

		input.regular-input,
		input[type=date],
		input[type=datetime-local],
		input[type=datetime],
		input[type=email],
		input[type=number],
		input[type=password],
		input[type=tel],
		input[type=text]:not(.xtfw-colorpicker),
		input[type=time],
		input[type=url],
		input[type=week],
		textarea,
		select{
			min-width:inherit!important;
			width:100%!important;
			margin: 0;
			padding: 6px 12px;
			box-sizing: border-box;
			vertical-align: middle;
			display: block;
			font-size: 0.9em;

			@media screen and (min-width: 783px) {
				min-width:400px!important;
				&.inline-input {
					width: auto!important;
					min-width: auto!important;
					display: inline-block;
				}
			}
		}

		.input-group {
			position: relative;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			-webkit-box-align: stretch;
			-ms-flex-align: stretch;
			align-items: stretch;
			width: 100%;
		}

		.input-group-append,
		.input-group-prepend {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
		}

		.input-group-prepend {
			margin-right: -1px;

			.input-group-text {
				border-top-left-radius: $input-radius;
				border-bottom-left-radius: $input-radius;
			}
		}

		.input-group-append {
			margin-left: -1px;

			.input-group-text{
				border-top-right-radius: $input-radius;
				border-bottom-right-radius: $input-radius;
			}
		}

		.input-group-text {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			padding: 6px 10px;
			margin-bottom: 0;
			font-size: 0.9rem;
			font-weight: 400;
			color: $input-color;
			text-align: center;
			white-space: nowrap;
			border: 1px solid $input-border-color;
			background: #f4f4f4;
		}

		select{
			width: 100%;
			height: 40px;
			padding: 6px 30px 6px 6px;

			@media screen and (max-width: 782px) {
				+ select {
					margin-top: 10px;
				}
			}
		}

		.select2-selection__rendered{
			font-size: 0.9em;
		}

		input.hasDatepicker {
			width: 250px !important;
			display: inline-block !important;
		}

		.ui-datepicker-trigger {
			position: absolute;
			margin-left: -10px;
			margin-top: 4px;
			transform: translateX(-100%) translateY(50%);
		}

		.forminp-group {

			@media screen and (min-width: 783px) {

				&[data-cols="1"] {
					tbody{
						flex-direction: column;
					}
				}

				&:not([data-visible="1"]) {

					&[data-cols="2"] tbody tr,
					&.row-1-col-2 tbody tr:nth-child(1),
					&.row-2-col-2 tbody tr:nth-child(2),
					&.row-3-col-2 tbody tr:nth-child(3),
					&.row-4-col-2 tbody tr:nth-child(4),
					&.row-5-col-2 tbody tr:nth-child(5){
						width: 50%;
					}

					&[data-cols="3"] tbody tr,
					&.row-1-col-3 tbody tr:nth-child(1),
					&.row-2-col-3 tbody tr:nth-child(2),
					&.row-3-col-3 tbody tr:nth-child(3),
					&.row-4-col-3 tbody tr:nth-child(4),
					&.row-5-col-3 tbody tr:nth-child(5){
						width: 33.33%;
					}
				}

				&[data-cols="1"] tbody tr,
				&.row-1-col-1 tbody tr:nth-child(1),
				&.row-2-col-1 tbody tr:nth-child(2),
				&.row-3-col-1 tbody tr:nth-child(3),
				&.row-4-col-1 tbody tr:nth-child(4),
				&.row-5-col-1 tbody tr:nth-child(5){
					width: 100%;
				}

			}

			.form-table {

				tbody {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -15px -10px;

					@media screen and (max-width: 782px) {
						flex-direction: column;
						padding-top:5px;
					}

					tr {
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						padding: 0 15px 10px;
						width: 100%;

						th,
						td {
							border: none;
							flex: 1;
							padding: 0;
							width: 100%;
						}

						th {

							label{
								padding-right:10px;
								padding-bottom:5px;
								font-weight: 500;
								color: #565555;
								min-width: initial;
								top: 0;

								.xtfw-settings-reset {
									position: relative;
									top: -1px;
								}
							}
						}
					}
				}
			}

			.xtfw-settings-section {
				border: none !important;
				padding: 0 !important;
			}
		}



		.xtfw-settings-image{
			display:none;
		}
		.xtfw-settings-image-mobile{
			display:block;
		}

		@media screen and (min-width: 783px) {
			th label {
				min-width: 150px;
				top: 5px;
			}
			td,
			th{
				padding: 20px 10px;
			}

			.xtfw-settings-image{
				display:block;
				max-width: 1000px;
			}
			.xtfw-settings-image-mobile{
				display:none;
			}

		}

	}

	.xtfw-help-tip {
		right: -5px;
		top: -3px;
		position: absolute;
	}

	.description {
		color: #666 !important;
		font-size: 12px !important;
		margin: 1em 0 0 0 !important;
		opacity: 0.8;
		font-style: italic;

		&:not(.inline){
			display: block!important;
		}
	}

	.button-primary{
		--xtfw-spinner-color: #fff;
	}
	.button{
		--xtfw-spinner-color: #444;
		&:hover{
			--xtfw-spinner-color: #fff;
		}
	}

	.button-primary,
	.button{

		--xtfw-spinner-overlay: transparent;
		--xtfw-spinner-size: 15px;
		--xtfw-spinner-border-size: 2px;

		position: relative;

		&.processing{
			color: transparent!important;
		}
	}

	#xtfw-reset-all-settings + .inline-confirmation-block{
		margin-top:20px;

		.inline-confirmation-message {
			color: #c51919;
		}
	}

}