/*
-------------------

	Basekit

	Template · Forms
	Fev . 2022

	© Exactuflow
	http://basekit.exactusensu.pt

	Table of Contents

	· Forms

-------------------
*/


/* Forms ------------------------------------- */

	form {}

	/* Form . Header ------------------------- */

		form .form-header{}

		form .form-header.title{}

	/* Fieldsets ------------------------------------- */

		fieldset {
			padding: 0px;
			border: none;
			background-image: linear-gradient(to right, #24556e 10%, rgba(255, 255, 255, 0) 0%);
			background-position: top;
			background-size: 6px 1px;
			background-repeat: repeat-x;
		}

		/* Fieldsets . Colors . Default */

			fieldset.fs_default {				background-image: linear-gradient(to right, #24556e 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_primary {				background-image: linear-gradient(to right, #0088ba 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_secondary {				background-image: linear-gradient(to right, #ffd000 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_default legend { 		color: #24556e; }
			fieldset.fs_primary legend { 		color: #0088ba; }
			fieldset.fs_secondary legend {		color: #ffd000; }

		/* Fieldsets . Colors . Red */

			fieldset.fs_red {					background-image: linear-gradient(to right, #d45353 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_red_dark { 				background-image: linear-gradient(to right, #801e1e 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_red_medium {			background-image: linear-gradient(to right, #c45656 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_red_light {				background-image: linear-gradient(to right, #da9494 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_red legend { 			color: #d45353; }
			fieldset.fs_red_dark legend { 		color: #801e1e; }
			fieldset.fs_red_medium legend {		color: #c45656; }
			fieldset.fs_red_light legend {		color: #da9494; }

		/* Fieldsets . Colors . Green */

			fieldset.fs_green {					background-image: linear-gradient(to right, #39b876 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_green_dark { 			background-image: linear-gradient(to right, #00735b 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_green_medium {			background-image: linear-gradient(to right, #20a864 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_green_light {			background-image: linear-gradient(to right, #8bcc95 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_green legend { 			color: #39b876; }
			fieldset.fs_green_dark legend { 	color: #00735b; }
			fieldset.fs_green_medium legend {	color: #20a864; }
			fieldset.fs_green_light legend {	color: #8bcc95; }

		/* Fieldsets . Colors . Blue */

			fieldset.fs_blue {					background-image: linear-gradient(to right, #007ee5 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_blue_dark { 			background-image: linear-gradient(to right, #004b73 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_blue_medium {			background-image: linear-gradient(to right, #0075b3 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_blue_light {			background-image: linear-gradient(to right, #aec9df 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_blue legend { 			color: #007ee5; }
			fieldset.fs_blue_dark legend { 		color: #004b73; }
			fieldset.fs_blue_medium legend {	color: #0075b3; }
			fieldset.fs_blue_light legend {		color: #aec9df; }

		/* Fieldsets . Colors . Orange */

			fieldset.fs_orange {				background-image: linear-gradient(to right, #ffaa54 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_orange_dark { 			background-image: linear-gradient(to right, #bf6100 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_orange_medium {			background-image: linear-gradient(to right, #eba457 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_orange_light {			background-image: linear-gradient(to right, #ffe2c4 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_orange legend { 		color: #ffaa54; }
			fieldset.fs_orange_dark legend { 	color: #bf6100; }
			fieldset.fs_orange_medium legend {	color: #eba457; }
			fieldset.fs_orange_light legend {	color: #ffe2c4; }

		/* Fieldsets . Colors . Yellow */

			fieldset.fs_yellow {				background-image: linear-gradient(to right, #ffea00 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_yellow_dark { 			background-image: linear-gradient(to right, #ffbe00 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_yellow_medium {			background-image: linear-gradient(to right, #ffd24a 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_yellow_light {			background-image: linear-gradient(to right, #fff1c7 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_yellow legend { 		color: #ffea00; }
			fieldset.fs_yellow_dark legend { 	color: #ffbe00; }
			fieldset.fs_yellow_medium legend {	color: #ffd24a; }
			fieldset.fs_yellow_light legend {	color: #fff1c7; }

		/* Fieldsets . Colors . Grey */

			fieldset.fs_grey {					background-image: linear-gradient(to right, #4d4d4d 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_grey_dark { 			background-image: linear-gradient(to right, #414042 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_grey_medium {			background-image: linear-gradient(to right, #939598 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_grey_light {			background-image: linear-gradient(to right, #e6e7e8 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_grey legend { 			color: #4d4d4d; }
			fieldset.fs_grey_dark legend { 		color: #414042; }
			fieldset.fs_grey_medium legend {	color: #939598; }
			fieldset.fs_grey_light legend {		color: #e6e7e8; }

		/* Fieldsets . Colors . Black */

			fieldset.fs_black {					background-image: linear-gradient(to right, #000000 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_black_dark { 			background-image: linear-gradient(to right, #000000 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_black_medium {			background-image: linear-gradient(to right, rgba(0,0,0,0.5) 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_black_light {			background-image: linear-gradient(to right, rgba(0,0,0,0.2) 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_black legend { 			color: #000000; }
			fieldset.fs_black_dark legend { 	color: #000000; }
			fieldset.fs_black_medium legend {	color: rgba(0,0,0,0.5); }
			fieldset.fs_black_light legend {	color: rgba(0,0,0,0.2); }

		/* Fieldsets . Colors . White */

			fieldset.fs_white {					background-image: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_white_dark { 			background-image: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_white_medium {			background-image: linear-gradient(to right, rgba(255,255,255,0.5) 10%, rgba(255, 255, 255, 0) 0%); }
			fieldset.fs_white_light {			background-image: linear-gradient(to right, rgba(255,255,255,0.2) 10%, rgba(255, 255, 255, 0) 0%); }

			fieldset.fs_white legend { 			color: #ffffff; }
			fieldset.fs_white_dark legend { 	color: #ffffff; }
			fieldset.fs_white_light legend {	color: rgba(255,255,255,0.5); }
			fieldset.fs_white_light legend {	color: rgba(255,255,255,0.2); }

		/* Fieldsets . Legend */

			fieldset legend {
				background-color: #ffffff;
			}

			fieldset legend:before{
				content: "•";
			}

		/* Fieldsets . Extra small screens */

			@media (min-width: 100px) {

				fieldset {
					padding-bottom: 40px;
				}

				fieldset legend {
					margin-bottom: 20px;
					padding-right: 6px;
				}

				fieldset legend:before {
					margin-right: 4px;
				}

			}

		/* Fieldsets . Small screens */

			@media (min-width: 768px) {

				fieldset {
					padding-bottom: 30px;
				}

				fieldset legend {
					margin-bottom: 20px;
					padding-right: 6px;
				}

				fieldset legend:before {
					margin-right: 4px;
				}

			}

		/* Fieldsets . Medium screens */

			@media (min-width: 990px) {

				fieldset {
					padding-bottom: 40px;
				}

				fieldset legend {
					margin-bottom: 30px;
					padding-right: 6px;
				}

				fieldset legend:before {
					margin-right: 4px;
				}

			}

		/* Fieldsets . Large screens */

			@media (min-width: 1200px) {

				fieldset {
					padding-bottom: 40px;
				}

				fieldset legend {
					margin-bottom: 30px;
					padding-right: 6px;
				}

				fieldset legend:before {
					margin-right: 4px;
				}

			}


	/* Form . Row ---------------------- */

		form row {

		}

	/* Form . Column ---------------------- */

		form column {

		}

		form column:last-child {
			/*margin-bottom: 0px !important;*/
		}

	/* Form . Text */

		form h2 {
			font-size: 100%;
			font-weight: 400;
			margin-bottom: 20px;
			opacity: 0.6;
		}

	/* Form . Footer ------------------------- */

		form .form-footer{}

		form .form-footer .button-container{}

		form .form-footer .form-options{}
		form .form-footer .form-options.after-save{}

		form .form-footer .button-container .button{}

	/* Form Buttons -------------------------- */

		.form.button.edit{}
		.form.button.save{}
		.form.button.cancel{}

	/* Forms . Extra small screens ----------- */

		@media (min-width: 100px) {

			form row {
				margin-bottom: 16px;
			}

			form column {
				margin-bottom: 20px;
				padding: 0px 3px !important;
			}

			form h2 {
				margin-bottom: 20px;
			}

		}

	/* Forms . Small screens ----------------- */

		@media (min-width: 768px) {

			form row {
				margin-bottom: 10px;
			}

			form column {
				padding: 0px 10px !important;
			}

			form h2 {
				margin-bottom: 20px;
			}

		}

	/* Forms . Medium screens ---------------- */

		@media (min-width: 990px) {

			form row {
				margin-bottom: 20px;
			}

			form column {
				padding: 0px 16px !important;
			}

			form h2 {
				margin-bottom: 24px;
			}

		}

	/* Forms . Large screens ----------------- */

		@media (min-width: 1200px) {

			form row {
				margin-bottom: 20px;
			}

			form column {
				padding: 0px 20px !important;
			}

			form h2 {
				margin-bottom: 24px;
			}

		}