@import "../../styles/variables";

.photogalary-form {
	width: 100%;
	min-height: 100vh;
	margin: auto;

	background: -webkit-linear-gradient(top, #fff, $color-mint); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
	background: -moz-linear-gradient(top, #fff, $color-mint); /* Firefox 3.6-15 */
	background: -o-linear-gradient(top,  #fff, $color-mint); /* Opera 11.1-12 */
	background: linear-gradient(to bottom,  #fff, $color-mint);

	&__content {
		max-width: 1000px;
        height: 100%;
		position: relative;
		// top: 40%;
		// left: 20%;
		// transform: translate(-50%, -50%);
		margin: auto;
		padding: 2rem;
		border-left: 1px solid $color-mint;
        border-right: 1px solid $color-mint;
        border-bottom: 1px solid $color-mint;
		background-color: #eee;
		padding-bottom: 3%;
	}

	&__photogalary-form__selects{
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	}

	&__text {
		font-size: 1.6rem;
    }
    
    &__form-title{
        // font-size: 2rem;
        // margin-bottom: 1rem;
		// color: #5acec2;
		color: $color-mint;
		font-size: 3rem;
		letter-spacing: 0.2;
		font-weight: 600;
		text-shadow: 3px 3px 3px #000;
		margin-bottom: 3%;
    }

	&__toggle-span {
		font-size: 1.6rem;
		font-weight: bold;
		color: rgb(102, 104, 223);
	}

	&__photogalary-box {
		margin-bottom: 2rem;
	}

	&__photogalary-box {
		margin-top: 2rem;
		width: 100%;
    }
    
    &__picture-input {
        display: flex;
        flex-direction: column;
        width: 100%;
    
        font-size: 1.3rem;
        font-weight: 600;
    }

	&__error-photogalary-text {
		margin-top: 1rem;
		text-align: center;
		width: 100%;
		color: #8f240a;
		font-size: 2rem;
	}

	&__picture {
		width: 100%;
		height: 30%;
		border: 1px solid $color-mint;
		margin-bottom: 2rem;
    }

    &__picture-btn {
		width: 20%;
		border: 1px solid $color-mint;
		border-radius: 3px;
        display: block;
        margin-bottom: 3%;

		color: #fff;
		background-color: $color-mint;
		border: none;
		cursor: pointer;
		font-weight: 500;
		font-size: 1.2rem;
		transition: 0.2s;
		padding: 0.5rem;

		&:focus {
			outline: none;
		}
		&:hover {
			outline: none;
			transform: translateY(-1px);
			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
			&:after {
				transform: scaleX(1.4) scaleY(1.6);
				opacity: 0;
			}
		}

		&:disabled {
			color: $color-mint;
			border: 1px solid $color-mint;
			background-color: #eee;
        }
        
    }

	&__submit-btn {
		width: 100%;
		border: 1px solid #5acec2;
		border-radius: 3px;
		display: block;

		color: #fff;
		background-color: #5acec2;
		border: none;
		cursor: pointer;
		font-weight: 600;
		font-size: 1.2rem;
		transition: 0.2s;
		padding: 1.3rem 1rem;

		&:focus {
			outline: none;
		}
		&:hover {
			outline: none;
			transform: translateY(-1px);
			box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
			&:after {
				transform: scaleX(1.4) scaleY(1.6);
				opacity: 0;
			}
		}

		&:disabled {
			color: #5acec2;
			border: 1px solid #5acec2;
			background-color: #eee;
        }
        
	}

}