/* ==========================================================================           
 *
 *    Select Styles
 *
 * ========================================================================== */
  select.form-select {
	width: 100%;
	font-size: 12px;
	background-color: #f5f9fc;
	color: #000;
	font-family: "Poppins", sans-serif;
	line-height: 1rem;
    padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	border-color: transparent;
	background-size: 10px 10px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%233b3b3b' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");

	&:hover, &:focus {
		border-color: #007BFF;
		box-shadow: none;
		transition: all 0.2s;
	}
  }

  select.top-form-select {
	width: 250px;
	font-size: 12px;
	background-color: transparent;
	color: #000;
	font-family: "Poppins", sans-serif;
	line-height: 1rem;
    padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	opacity: 0;
	border-color: transparent;
  }


/* ==========================================================================           
 *
 *    AI Image Styles
 *
 * ========================================================================== */
#image-side-space {
	margin-right: 284px;
	transition: margin 0.3s ease;

	.card-top {
		float: right;

		a,
		#main-settings-toggle-minimized {
			i {
				vertical-align: super;
				transition: all 0.3s ease;

				&:hover, &:focus {
					color: $primaryTextActiveColor!important;
				}
			}
		}
	}

	.card-bottom {
		float: right;

		.custom-switch {
			&:hover {
				cursor: pointer;
			}
		}
	}

	#negative-prompt {
		display: none;
	}
}

.image-prompt-wrapper {
	border-radius: 50vh;

	.image-prompt {
		.input-box {

			width: 90%;
			.form-control {
				height: 48px;
				line-height: 48px;
				padding: 0 20px;
				background-color: #FFF!important;
				border-radius: 50vh;
				border-top-right-radius: 0px;
				border-bottom-right-radius: 0px;
				border-color: $body-background;

				&:focus {
					border-color: #007bff;
				}

			}
		}

		.negative {
			width: 100%;
			.form-control {
				border-radius: 50vh;
			}			
		}

		#image-generate {
			height: 48px;
			font-size: 14px;
			text-transform: none;
			font-weight: 600;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			min-width: 170px;
			background: #000;
			border-color: #000;

			&:hover, &:focus {
				background: $primaryTextActiveColor;
				border-color: $primaryTextActiveColor;
			}

			:disabled {
				background-color: green;
				cursor: not-allowed;
			}
		 }
	}
}

#image-settings-wrapper {
	width: 300px;
    max-height: 100%;
    background: #fff !important;
    transition: right 0.3s ease, width 0.3s ease;
    top: 74px;
    position: fixed;
    right: 0;
    bottom: 0;
	overflow-y: scroll;

	.image-settings {

		#main-settings-toggle-minimized {
			position: absolute;
			right: 1rem;
			display: none;
		}

		.image-numbers {
			.quantity {
				position: relative;
				width: 120px;

				a {
					display: block;
					position: absolute;
					width: 24px;
					height: 24px;
					text-decoration: none;
					border-radius: 100%;
					top: 50%;
					margin-top: -12px;
					background: #f5f9fc;
				}

				.decrease {
					left: 8px;
				}

				.increase {
					right: 8px;
				}

				a:after {
					position: absolute;
					width: 8px;
					height: 2px;
					margin: -1px 0 0 -4px;
				}

				a.increase:before {
					position: absolute;
					width: 2px;
					height: 8px;
					margin: -4px 0 0 -1px;
				}

				a.increase:before, 
				a:after {
					background-color: #1e1e2d;
					left: 50%;
					top: 50%;
					content: '';
				}

				input {
					width: 100%;
					max-width: 100%;
					min-width: 100%;
					border-radius: 20px;
					display: block;
					height: 40px;
					text-align: center;
					font-size: 12px;
					color: #1e1e2d;
					padding: 0 34px;
					border: 1px solid #ebecf1;
				}

				input::-webkit-outer-spin-button,
				input::-webkit-inner-spin-button {
					-webkit-appearance: none;
					margin: 0;
				}

				input[type=number] {
					-moz-appearance: textfield;
				}
			}			
		}

		#style-button {
			width: 100%;
			font-size: 12px;
			background-color: #f5f9fc;
			color: #000;
			font-family: "Poppins", sans-serif;
			line-height: 1rem;
			padding: 0.45rem 1rem;
			border-radius: 0.5rem;
			border-color: transparent;
			text-align: left;
			box-shadow: none;
			outline: none;

			img {
				width: 25px;
				height: 25px;
				margin-right: 0.5rem;
				border-radius: 5px;
			}

			i {
				float: right;
				font-size: 10px;
				line-height: 1.5;
				transition: all 0.3s ease;
			}

			.extra-line-height {
				line-height: 2.3;
			}

			.style-button-img {
				display: none;
			}

			&:hover {
				border-color: $primaryTextActiveColor;
				transition: all 0.2s;
				
			}
		}

		.rotate-90 {
			border-color: $primaryTextActiveColor!important;
			i {
				rotate: 90deg;
			}
		}

		.style-button-img-placeholder {
			padding: 0.75rem 1rem!important;
		}

		#advanced-settings-wrapper {
			display: none;
		}

		.range {
			position: relative;
			display: flex;
			-ms-align-items: center;
			align-items: center;

			.range_in {
				position: relative;
				width: 100%;

				input {
					-webkit-appearance: none;
					width: 100%;
					margin: 0;
					outline: 0;
					border: none;
					background-color: #c0bcca;
				}

				.slider {
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -2px;
					pointer-events: none;
					background: $primaryTextActiveColor;
				}

				.slider:before {
					width: 14px;
					height: 14px;
					background: $primaryTextActiveColor;
					cursor: pointer;
					border-radius: 100%;
					position: absolute;
					display: block;
					right: 0;
					top: 50%;
					margin-top: -7px;
					content: '';
					z-index: 2;
				}

				.slider:after {
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					position: absolute;
					content: '';
					border-radius: 5px 0 0 5px;
				}

				.slider, input {
					display: block;
					height: 4px;
					border-radius: 5px;
				}	

				input::-webkit-slider-thumb {
					-webkit-appearance: none;
					appearance: none;
					width: 14px;
					height: 14px;
					background: $primaryTextActiveColor;
					cursor: pointer;
					border-radius: 100%;
					opacity: 0
				}

				input::-moz-range-thumb {
					width: 14px;
					height: 14px;
					background: $primaryTextActiveColor;
					cursor: pointer;
					border-radius: 100%;
					z-index: 3;
					opacity: 0
				}
			}

			.value {
				flex: auto;
				width: 40px;
				text-align: right;
				padding-left: 10px;
				font-size: 12px;
			}
		}

		.middle {
			width: 100%;
			text-align: center;
		
			input[type=radio] {
				display: none;
			}
		
			input[type=radio]:checked + .box {
				background-color: #000;
				box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2), 0 2px 1px -1px rgba(50, 50, 50, 0.12), 0 1px 1px 0 rgba(50, 50, 50, 0.14);
			}
		
			input[type=radio]:checked + .box span {
				color: white;
			}
		
			.box {
				background-color: #fff;
				transition: all 250ms ease;
				will-change: transition;
				display: inline-block;
				text-align: center;
				cursor: pointer;
				position: relative;
				font-weight: 800;
				border-radius: 15px;
				padding: 6px 16px;
				line-height: 1;
			}
		
			.box span {
				position: relative;
				transition: all 300ms ease;
				font-size: 12px;
				user-select: none;
				color: #1e1e2d;
			  }
		}
	}
}

.expand-main-width {
	margin-right: 2rem!important;
}

.shrink-main-settings {
	width: 0px!important;
}


.grid-item { 
	width: 100%;
	height: 100%;
	padding: 3%;

	.grid-image-wrapper {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 2px 4px 12px rgb(0 0 0 / 8%);
		position: relative;

		.grid-buttons {
			position: absolute;
			top: 50%;
			text-align: center;
			z-index: 5;
			display: flex;
			width: 120%;
			margin: auto;
			justify-content: center;

			.grid-image-view {
				z-index: 12;
				i {
					background-color: #0000005c;
					color: #fff;
					width: 40px;
					height: 40px;
					border-radius: 33px;
					line-height: 40px;
					box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
					transform: translate(-50%,-50%) scale(.4);
					visibility: hidden;
					opacity: 0;
					-webkit-transition: all 250ms cubic-bezier(.24,.22,.015,1.56);
					transition: all 250ms cubic-bezier(.24,.22,.015,1.56);
					margin-right: 0.5rem;
	
					&:hover {
						background-color: #000;
						color: #FF9D00;
					}
				}
			}
	
		}

		.grid-image {
			display: block;
			position: relative;
			height: 100%;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform .7s cubic-bezier(.2,1,.22,1),opacity 0.6s ease 0.25s;
				-webkit-transition: transform .7s cubic-bezier(.2,1,.22,1),opacity 0.6s ease 0.25s;
			}

			&:hover {
				img {
					transform: scale(1.07);
    				-webkit-transform: scale(1.07)
				}
			}
		}

		.grid-description {
			position: absolute;
			bottom: 0px;
			padding-left: 10px;
			padding-bottom: 5px;
			color: #FFF;
			background: linear-gradient(180.49deg, rgba(0, 0, 0, 0) 37.77%, rgba(0, 0, 0, 0.32) 65.93%, rgba(0, 0, 0, 0.48) 78.19%, rgba(0, 0, 0, 0.64) 87.41%, rgba(0, 0, 0, 0.8) 98.87%);
			transform: translateY(50px);
			transition: all 250ms ease;
			width: 100%;

			span {
				font-weight: 900;
			}

			p {
				line-height: 1.1;
			}
		}

		&:hover {
			.grid-image-view {
				i {
					visibility: visible;
					opacity: 1;
					transform: translate(-50%,-50%) scale(1);
				}
			}

			.grid-description {
				transform: translateY(0);
			}
		}
	}
}

.custom-modal {
	.modal {		
		display: none;
		position: fixed; 
		z-index: 10; 
		width: 100%; 
		height: 100%; 
		overflow: auto; 

		.close {
			i {
				&:hover {
					color: #000;
					cursor: pointer;
				}
			}
		}

		.modal-body {
			overflow: hidden;
    		overflow-y: auto;
		}

		.modal-content {
			background-color: #FFF;
			width: 320px;
			max-height: 400px;
			border-radius: 1rem;
			float: right;
			margin-right: 305px;
			margin-top: 310px;
			padding: 0.5rem;
			border: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		}

		.image-styles-wrapper {
			text-align: center;
			
			.image-style {
				input[type=radio] {
					display: none;
				}
			
				input[type=radio]:checked + .image-label {
					border-color: $primaryTextActiveColor;
					box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2), 0 2px 1px -1px rgba(50, 50, 50, 0.12), 0 1px 1px 0 rgba(50, 50, 50, 0.14);
				}
				
				.image-label {
					overflow: hidden;
					position: relative;
					border-radius: 10px;
					border: 2px solid #FFF;

					img {
						cursor: pointer;
						object-position: center;
						object-fit: cover;
						height: 100%;
					}

					.bg-dark-overlay {
						background: linear-gradient(180.49deg, rgba(0, 0, 0, 0) 37.77%, rgba(0, 0, 0, 0.32) 65.93%, rgba(0, 0, 0, 0.48) 78.19%, rgba(0, 0, 0, 0.64) 87.41%, rgba(0, 0, 0, 0.8) 98.87%);
						width: 100%;
						height: 30px;
						position: absolute;
						right: 0px;
						bottom: 0px;
						left: 0px;
						opacity: 0.7;
					}

					span {
						position: absolute;
						color: #FFF;
						bottom: 3px;
						font-size: 10px;
						font-weight: 700;
						display: flex;
						width: 100%;
						margin: auto;
						justify-content: center;
					}

					&:hover {
						border-color: $primaryTextActiveColor;
						box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.2), 0 2px 1px -1px rgba(50, 50, 50, 0.12), 0 1px 1px 0 rgba(50, 50, 50, 0.14);
					}
				}
			}			
		}
	}
}

.image-modal {
	.modal-header {
		background: #0f0f11;
		color: #FFF;
		padding-bottom: 0;

		.btn-close {
			font-size: 16px;
			padding: 0;
			background: #FFF url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ2NCAzMkg0OEMyMS41IDMyIDAgNTMuNSAwIDgwdjM1MmMwIDI2LjUgMjEuNSA0OCA0OCA0OGg0MTZjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWODBjMC0yNi41LTIxLjUtNDgtNDgtNDh6bS04My42IDI5MC41YzQuOCA0LjggNC44IDEyLjYgMCAxNy40bC00MC41IDQwLjVjLTQuOCA0LjgtMTIuNiA0LjgtMTcuNCAwTDI1NiAzMTMuM2wtNjYuNSA2Ny4xYy00LjggNC44LTEyLjYgNC44LTE3LjQgMGwtNDAuNS00MC41Yy00LjgtNC44LTQuOC0xMi42IDAtMTcuNGw2Ny4xLTY2LjUtNjcuMS02Ni41Yy00LjgtNC44LTQuOC0xMi42IDAtMTcuNGw0MC41LTQwLjVjNC44LTQuOCAxMi42LTQuOCAxNy40IDBsNjYuNSA2Ny4xIDY2LjUtNjcuMWM0LjgtNC44IDEyLjYtNC44IDE3LjQgMGw0MC41IDQwLjVjNC44IDQuOCA0LjggMTIuNiAwIDE3LjRMMzEzLjMgMjU2bDY3LjEgNjYuNXoiLz48L3N2Zz4=);
		}
	}
	.modal-content {
		box-shadow: 0 7px 15px rgba(0,0,0,0.35);
	}

	.modal-body {
		padding: 0.5rem 1rem 1rem;
		background: #0f0f11;

		.image-view-box {
			width: auto;
			height: auto;
			position: relative;

			img {
				border-radius: 5px;
			}

			.download-image {
				position: absolute;
				background-color: #0000005c;
				color: #fff;
				width: 40px;
				height: 40px;
				border-radius: 5px;
				line-height: 40px;
				box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
				left: 10px;
				top: 10px;

				&:hover {
					background: #0f0f11;
					color: $primaryTextActiveColor;
				}
			}
		}

		.image-description-box {
			.description-title {
				color: #7e7a86;
				letter-spacing: 0.5px;
				font-weight: 500;
				text-transform: uppercase;
				margin-bottom: 2px;
				font-size: 12px;
			}

			.description-data {
				font-size: 14px;
				color: #FFF;
			}

			.image-prompt {
				background: #FFF;
				border-radius: 5px;
				min-height: 120px;
    			padding: 1rem;
			}
		}
	}
}

.style-initial-state {
	display: none;
}

.hide-all {
	display: none!important;
}

.show-all {
	display: block!important;
}