.InputGroupComponent {
	position: relative;
	display: block;
	margin: 20px 0;
	.form-control {
		@media #{$small} {
			font-size: 1.125rem;
		}
	}
	.form-control:focus {
		box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.8);
	}
	label {
		font-size: 14px;
		font-weight: $st-font-semibold;
		color: $st-secondary-bg;
		padding-left: 2px;
	}
	input {
		color:$st-text-primary!important;
		font-weight: $st-font-medium;
		border: 1px solid #979797 !important;
		border-radius: 4px;
		box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.5);
	}
	.status-icon {
		position: absolute;
		right: 8px;
		top: 53%;
	}
	.rotate {
		animation: spin 4s linear infinite;
	}
	::placeholder {
		color: $st-text-primary;
		opacity: 0.75;
		font-weight: $st-font-regular;
	}
}

.SelectInputGroupComponent {
	margin: 10px 20px;
	margin-left: 0;
	label {
		font-size: 14px;
		font-weight: $st-font-medium;
		color: $st-text-primary!important;
		padding-left: 2px;
	}
	.react-select__control {
		border: 1px solid #979797;
		box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.5) !important;
	}
	.react-select__placeholder {
		color: $st-text-primary!important;
		font-weight: $st-font-medium;
		opacity: 0.75;
	}
	.react-select__single-value {
		color: $st-text-primary!important;
		font-weight: $st-font-medium;
	}
	.react-select__indicator {
		color: $st-text-primary!important;
	}
	.react-select__indicator-separator {
		display: none;
	}
	.react-select__menu {
		z-index: 10000;
		box-shadow: 0 3px 10px 0 rgba(189, 207, 212, 0.5) !important;
	}
	div {
		outline: none !important;
		box-shadow: none !important;
	}
	.beta-label {
		color: #bab9b9;
		font-size: 10px;
		position: relative;
		top: 0px;
		left: 5px;
		width: 40px;
		font-weight: $st-font-semibold;
	}
}

.ButtonComponent {
	display: inline-block;
	margin: 10px 20px;
	.btn {
		background: $st-primary-bg;
		color: $st-fourth-bg;
		padding: 10px 30px;
		 
		font-weight: $st-font-regular;
		border-radius: 25px;
		font-size: 16px;
		min-width: 135px;
		&:hover {
			box-shadow: 0 6px 18px rgba(201, 201, 201, 0.9);
    		transition: .3s all ease;
			background: $st-btn-fifth;
			color: $st-text-ninth;
		}
    	@media #{$small} {
			padding: 10px 15px;
			font-size: 14px;
		}
		@media #{$xsmall} {
			padding: 10px;
			min-width: 110px;
		}
	}
	.cancelbtn {
		background: $st-secondary-bg!important;
		border: none;
		opacity: 0.6;
		&:hover {
			opacity: 1;
		}
	}
}

.FABComponent {
	position: fixed;
	left: 40px;
	bottom: 40px;
	z-index: 1;
	@media #{$small} {
		left: 20px;
		bottom: 10px;
	}
	.btn-fab {
		padding: 0;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: $st-third-bg;
		color: $st-fourth-bg;
		transition: all 0.3s ease;
		box-shadow: 0 0px 30px 0px rgba(95, 127, 138, 0.5) !important;
		@media #{$small} {
			width: 60px;
			height: 60px;
		}
		&:hover {
			transform: rotate(90deg);
		}
		&:active {
			background: $st-primary-bg;
			opacity: 0.9;
		}
	}
}

.CheckBoxGroupComponent {
	// display: inline-block;
	margin: 10px 20px;
	margin-left: 0;
	cursor: pointer;
	user-select: none;
	&.disabled {
		pointer-events: none;
	}
	.icon {
		color: $st-text-primary;
		&.colored {
			color: $st-secondary-bg;
		}
	}
	span {
		padding-left: 20px;
		color: $st-text-primary;
		// width: 85%;
		width: 100%;
		vertical-align: top;
		display: inline-block;
	}
}

.RadioGroupComponent {
	// display: inline-block;
	margin: 10px 20px;
	margin-left: 0;
	user-select: none;
	.radio-item {
		margin: 10px 0;
		cursor: pointer;
	}
	.icon {
		color: $st-text-primary;
		&.colored {
			color: $st-secondary-bg;
		}
	}
	span {
		padding-left: 20px;
		color: $st-text-primary;
	}
}

/** Modal Dialog Styling **/
.MuiDialog-container {
	.MuiPaper-root {
		border-radius: 12px;
	}
	.MuiDialogTitle-root {
		padding: 18px 10px;
		background: $st-primary-bg;
		.MuiTypography-h6 {
			padding: 0 6px;
			color: $st-fourth-bg;
			display: flex;
			svg{
				margin: 15px 0 0 0;
			}
		}
		.MuiSvgIcon-root {
			color: $st-fourth-bg;
		}
		.MuiButtonBase-root {
			top: 10px;
			color: #9e9e9e;
			right: 8px;
			position: absolute;
		}
	}
	.MuiDialogContent-root {
		padding: 25px 16px;
		.MuiTypography-body1 {
			font-size: 14px;
			@media #{$xxsmall} {
				font-size: 11px;
			}
		}
		.MuiTypography-colorTextSecondary {
			color: $st-text-secondary;
		}
		@media #{$medium} {
			padding: 20px;
		}
		@media #{$xsmall} {
			padding: 16px;
		}
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
	}
}