@import 'partials';

.custom-modal {

	background-color: rgba(0, 0, 0, 0.707);
	z-index: 9999;
	color: #fff;


	.h2,
	h2 {
		font-size: 30px;
		font-weight: 700;
		margin: 15px 0 0 0;

		@media($sm-1679) {
			font-size: 28px;
		}

		@media($sm-1481) {
			font-size: 26px;
		}

		@media($sm-1199) {
			font-size: 24px;
		}

		@media($sm-991) {
			font-size: 22px;
		}

		@media($sm-767) {
			font-size: 20px;
		}

		@media($sm-767) {
			font-size: 18px;
		}
	}

	.modal-content {
		display: flex;
		background-color: #000000f2;
		border-radius: 22px;
		border: 1px solid #232323;
	}

	.h3,
	h3 {
		color: #fff;
		margin: 0 0 10px 0;
		font-size: 30px;
		font-weight: 700;
		margin: 15px 0 0 0;

		@media($sm-1679) {
			font-size: 28px;
		}

		@media($sm-1481) {
			font-size: 26px;
		}

		@media($sm-1199) {
			font-size: 24px;
		}

		@media($sm-991) {
			font-size: 22px;
		}

		@media($sm-767) {
			font-size: 20px;
		}

		@media($sm-767) {
			font-size: 18px;
		}
	}

	p {
		color: #fff;
		font-weight: 300;
	}

	.close-btn {
		background-image: url(../img/close_ic.svg);
		width: 25px;
		height: 25px;
		background-position: center;
		background-repeat: no-repeat;
		margin: auto 0 auto auto;
		background-color: #00000000;
		border: 0;

		@media($sm-1679) {
			width: 20px;
			height: 20px;
		}
	}

	.primary-btn {
		background: radial-gradient(circle, rgba(249, 181, 72, 1) 0%, rgba(174, 109, 4, 1) 50%);
		background: #f9b548 radial-gradient(circle, rgba(249, 181, 72, 1) 40%, rgba(200, 133, 25, 1) 100%) !important;
		border-radius: 25px;
		min-width: 182px;
		font-size: 14px;
		padding: 15px 20px;
		border: 1px solid #F9B548;
	}

	.modal-icon {

		img {
			max-width: 100%;
			margin: 0 0 24px 0;
		}
	}

	.amount-cover {


		@media($sm-767) {
			margin: 15px 0 0 0;
		}
	}

	.amount {
		color: #DA9E3F;
		font-size: 35px;
		margin: 15px 0 0 0;
		font-weight: 600;
	}

	.form-control {
		border: 0.83px solid rgba(55, 55, 55, 1);
		height: 55px;
		background-color: transparent;
		display: flex;
		align-items: center;
		padding-left: 15px;
		background-color: transparent;
		border-radius: 30px;
		color: #fff;
		font-size: 16px;

		&::placeholder {
			color: rgba(255, 255, 255, 0.3);
			font-size: 14px;
		}

		@media($sm-1679) {
			height: 50px;
		}

		@media($sm-1481) {
			height: 48px;
		}

		@media($sm-1199) {
			height: 46px;
		}

		&:focus,
		&:active,
		&:focus-within {
			outline: none;
			box-shadow: none;
		}
	}

	label {

		font-weight: 500;
		font-size: 15.36px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #fff;

		@media($sm-1679) {
			font-size: 13px;
		}


	}

	.modal-title {
		color: #fff;
		display: flex;
		align-items: center;
		font-weight: 700;
		font-size: 30px;
		line-height: 24.5px;
		letter-spacing: 0.3px;
		vertical-align: middle;
		justify-content: center;

		@media($sm-1679) {
			font-size: 28px;
		}

		@media($sm-1481) {
			font-size: 26px;
		}

		@media($sm-1199) {
			font-size: 24px;
		}

		@media($sm-991) {
			font-size: 22px;
		}

		@media($sm-767) {
			font-size: 20px;
		}

		@media($sm-579) {
			font-size: 18px;
		}

		.light {
			font-weight: 300;
		}

		.icon {
			margin-right: 15px;
		}

	}


	.content {

		font-weight: 500;
		font-size: 20px;
		line-height: 26.5px;
		letter-spacing: 0%;
		text-align: center;
		vertical-align: middle;
		color: rgba(255, 255, 255, 0.3);
		padding-top: 23px;

		@media($sm-1679) {
			font-size: 18px;
		}

		@media($sm-1481) {
			font-size: 16px;
		}

		@media($sm-1199) {
			font-size: 14px;
		}

		@media($sm-991) {
			font-size: 12px;
		}

	}

	.modal-footer {
		padding-top: 50px;
		padding-bottom: 80px;
		justify-content: center;
		border: 0px;

		@media($sm-1679) {
			padding: 30px 0px;
		}

		@media($sm-1481) {
			padding: 30px 0px;
		}

		.btn {
		width: 193px;
		height: 51px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-weight: 500;
		font-size: 15px;
		line-height: 19.5px;
		letter-spacing: 0.3px;
		text-align: center;
		vertical-align: middle;
		border-radius: 50px;
		border: none;
		background: #f9b548 radial-gradient(circle, rgba(249, 181, 72, 1) 40%, rgba(200, 133, 25, 1) 100%) !important;

		// Hover shimmer effect
		position: relative;
		overflow: hidden;
		z-index: 1;
		transition: transform 0.3s ease, box-shadow 0.3s ease;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
			transform: translateX(-100%);
			transition: transform 0.6s ease;
			z-index: 0;
		}

		&:hover {
			// transform: translateY(-3px) scale(1.03);
			// box-shadow: 0 10px 25px rgba(249, 181, 72, 0.4);
			 transform: translateY(-5px);
		}

		&:hover::before {
			transform: translateX(100%);
		}

		&.back-btn {
			background: rgba(153, 153, 153, 0.3) !important;
			border: 1px solid rgba(176, 176, 176, 0.36);
			color: #fff;
			border-radius: 30px;

			&:hover {
			transform: translateY(-3px) scale(1.03);
			box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
			}

			&:hover::before {
			transform: translateX(100%);
			}
		}

		@media ($sm-1679) {
			height: 48px;
			font-size: 13px;
		}

		@media ($sm-1481) {
			height: 46px;
		}

		@media ($sm-479) {
			width: 100%;
		}
		}


		.modal-content {
			border: 1px solid rgba(35, 35, 35, 1);
		}
	}


	.modal-dialog {


		.modal-body {
			padding: 0px 100px;

			@media($sm-1679) {
				padding: 0px 80px;
			}

			@media($sm-1481) {
				padding: 0px 60px;
			}

			@media($sm-1199) {
				padding: 0px 40px;
			}
		}
	}
}

// .btn-primary {
// 	background: radial-gradient(circle, rgba(249, 181, 72, 1) 0%, rgba(174, 109, 4, 1) 50%);
// 	border-radius: 25px;
// 	min-width: 182px;
// 	font-size: 14px;
// 	padding: 15px 20px;
// 	border: 1px solid #F9B548;
// }


// .btn-cancel {
// 	background: #B0B0B0;
// 	border-radius: 25px;
// 	min-width: 182px;
// 	font-size: 14px;
// 	padding: 15px 20px;
// 	border: 1px solid #B0B0B0;
// }


.success-modal {

	.modal-dialog {

		// max-width: 508px;
		.modal-body {
			padding: 70px 70px 0px 70px;

			@media($sm-1679) {
				padding: 60px 60px 0px 60px;
			}

			@media($sm-1481) {
				padding: 50px 50px 0px 50px;
			}

			@media($sm-1199) {
				padding: 40px 40px 0px 40px;
			}

			// max-width: 508px;
			// max-height: 535px;
		}
	}

	// .modal-body{
	// 	padding: 0px !important;
	// }

	.modal-footer {
		padding: 36px 0px 70px 0px;

		@media($sm-1679) {
			padding-bottom: 60px;
		}

		@media($sm-1481) {
			padding-bottom: 50px;
		}

		@media($sm-1199) {
			padding-bottom: 40px;
		}

		// margin: 0 0 80px 0;
	}

}


.check-out-modal {
	.modal-dialog {
		max-width: 972px;
	}
	.form-check{
		padding-left: 0px;
	}
	.modal-content {
		width: 100%;
		// min-width: 972px;
		// max-height: 1200px;

		.modal-body {
			padding: 30px 64px 64px 64px;

			@media($sm-1679) {
				padding: 20px 54px 54px 54px;
			}

			@media($sm-1481) {
				padding: 20px 44px 44px 44px;
			}

			@media($sm-1199) {
				padding: 20px;
			}

			.form-grp {
				margin: 0 0 26px 0;
			}

			label {
				font-size: 18px;
				font-weight: 500;
				color: #fff;
				margin-right: 15px;

				@media($sm-1679) {
					font-size: 16px;
				}

				@media($sm-1481) {
					font-size: 14px;
				}
			}

			.amount-cover {
				.amount-label {
					color: #fff;
					font-weight: 400;
					font-size: 19.9px;
					line-height: 30.47px;
					letter-spacing: 0.37px;
					vertical-align: middle;

					@media($sm-1679) {
						font-size: 17px;
					}

					@media($sm-1481) {
						font-size: 15px;
					}

					@media($sm-1199) {
						font-size: 13px;
					}

				}

				.amount {

					font-weight: 700;
					font-style: Bold;
					font-size: 34.82px;
					line-height: 36.65px;
					letter-spacing: 0.33px;
					vertical-align: middle;
					color: rgba(218, 158, 63, 1);

					@media($sm-1679) {
						font-size: 32px;
					}

					@media($sm-1481) {
						font-size: 28px;
					}

					@media($sm-1199) {
						font-size: 26px;
					}

					@media($sm-991) {
						font-size: 24px;
					}

					@media($sm-767) {
						font-size: 22px;
					}

				}
			}

			.form {
				padding-top: 30px;

				.form-grp {
					padding-bottom: 15px;

					@media($sm-1679) {
						padding-bottom: 10px;
					}

					@media($sm-1481) {
						padding-bottom: 5px;
					}
				}
			}

			.address-box {
				border-top: 1px solid #373737;
				margin: 10px 0 0 0;

				&.address-box1 {
					border: none;
				}

				.address-title {
					margin: 0px;
					margin-bottom: 40px;
					margin-top: 10px;
				}
			}

			.card-icons {
				position: absolute;
				right: 10px;
				bottom: 10px;
			}


			.sumary-title {
				margin-bottom: 40px;
			}

			.inner-sec {
				margin-bottom: 24px;
				&.col-md-9{
					margin-left: -25px;
				}
			}

		}

		.modal-header {
			padding: 55px 40px;
		}

		.modal-footer {
			// padding: 0px 55px 55px;
			@media($sm-1679){
				padding: 30px 30px;
			}
		}
		.form-control{
			background-color: #000;
		}
	}


	.check-step {
		width: 100%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;

		.step {

			span {
				width: 37px;
				height: 37px;
				text-align: center;
				border: 1px solid #eee;
			}

			label {
				color: #fff;
				margin: 10px 0 0 0;
			}
		}


		.divider {
			width: 92px;
			height: 2px;
			background: #F9B548;
			margin: -30px 0px 0 10px;
		}
	}

	.progress-wrapper {
		display: flex;
		align-items: center;
		gap: 20px;
		padding-bottom: 80px;

		@media($sm-1679) {
			padding-bottom: 60px;
		}

		@media($sm-1481) {
			padding-bottom: 40px;
		}

		@media($sm-1199) {
			padding-bottom: 30px;
		}

		.step {
			display: flex;
			flex-direction: column;
			align-items: center;

			.circle {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				background-color: #1f1f1f;
				color: #ccc;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-weight: 600;
				position: relative;

				img.check-img {
					width: 14px;
					height: 14px;
				}
			}

			.label {
				color: rgba(154, 154, 154, 1);
				font-weight: 500;
				font-style: Medium;
				font-size: 16.64px;
				line-height: 100%;
				letter-spacing: 0%;
				margin-top: 11px;

				@media($sm-1679) {
					font-size: 14px;
				}

			}

			&.done {
				.label {
					color: #fff;
				}

				.circle {
					background-color: #f4a825; // orange
					color: white;
				}
			}
		}

		.divider {
			height: 2px;
			width: 92px;
			background-color: rgba(249, 181, 72, 1);
			margin: 0 10px;
		}
	}

}


.form {
	padding-top: 64px;

	.form-grp {
		position: relative;

		.error-msg {
			position: absolute;
			color: red;
			font-weight: 500;
			padding-left: 20px;
			width: 100%;
		}

	}

	.form-label {

		font-weight: 500;
		font-size: 15.36px;
		line-height: 100%;
		letter-spacing: 0%;
		color: #fff;

		@media($sm-1679) {
			font-size: 13px;
		}

	}

	.form-control {
		border: 0.83px solid #373737;
		height: 55px;
		display: flex;
		align-items: center;
		background-color: transparent;
		border-radius: 30px;
		color: #fff;
		font-weight: 500;
		font-size: 14.46px;
		line-height: 100%;
		letter-spacing: 0%;
		padding-left: 25px;

		&::placeholder {
			color: rgba(255, 255, 255, 0.30);
		}
	}

	.forgot-password-sec {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 120px;
		padding-top: 20px;
		max-width: 65%;

		.form-check-label {
			font-family: Barlow Semi Condensed;
			font-weight: 400;
			font-size: 15.36px;
			line-height: 100%;
			letter-spacing: 0%;
			color: #fff;

			@media($sm-1679) {
				font-size: 13px;
			}
		}

		.forgot-password {

			font-weight: 400;
			font-size: 16px;
			line-height: 24.5px;
			letter-spacing: 0.3px;
			text-align: right;
			vertical-align: middle;
			color: #F9B548;
			text-decoration: none;

			@media($sm-1679) {
				font-size: 14px;
			}

			@media($sm-1481) {
				font-size: 12px;
			}
		}
	}

	.register-sec {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.txt {
			color: #fff;
			font-weight: 600;
			font-size: 16px;
			line-height: 24.5px;
			letter-spacing: 0.3px;
			vertical-align: middle;
			margin-bottom: 0px;

			.register-link {
				color: #F9B548;
				text-decoration: none;
			}

		}

		.btn-group {
			display: flex;
			align-items: center;

			.btn {
				border: 1px solid #B0B0B0;
				height: 51px;
				width: 167px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(153, 153, 153, 0.30);
				font-weight: 500;
				font-size: 15px;
				line-height: 19.5px;
				letter-spacing: 0.3px;
				text-align: center;
				vertical-align: middle;
				border: 1px solid rgba(176, 176, 176, 0.36);
				color: #fff;
				border-radius: 30px;
				backdrop-filter: blur(33.400001525878906px);
				margin-right: 25px;

				@media($sm-1679) {
					font-size: 13px;
				}

				&.login-btn {
					background:
						linear-gradient(0deg, #F9B548, #F9B548),
						linear-gradient(180deg, rgba(243, 238, 255, 0) 0%, rgba(243, 238, 255, 0.04) 100%),
						radial-gradient(55.41% 227.78% at 50% 277.78%, #F9B548 40%, #C88519 100%);
					box-shadow: 0px -8px 20px 0px #F9B548 inset;

					box-shadow: 0px 0px 12px 0px #FFFFFF14 inset;

					box-shadow: 0px 0px 0px 1px #FFC66C inset;

					box-shadow: 0px 10px 11px 0px #F9B54824;

					margin-right: 0px;
				}
			}
		}
	}
}


[type="radio"]:checked,
[type="radio"]:not(:checked) {
	position: absolute;
	left: -9999px;
}

[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
	position: relative;
	padding-left: 28px;
	cursor: pointer;
	line-height: 20px;
	display: inline-block;
	color: #fff;
}

[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 22px;
	background: url(../img/radio-in-active.svg);


}

[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
	content: '';
	width: 22px;
	height: 22px;
	background: url(../img/radio-active.svg);
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 100%;
	-webkit-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

[type="radio"]:not(:checked)+label:after {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}

[type="radio"]:checked+label:after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.otp-modal {

	.otp-inputs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 55px;
		padding-bottom: 18px;
		color: #fff;

		@media($sm-1679) {
			padding-top: 50px;
		}

		@media($sm-1481) {
			padding-top: 45px;
		}

		@media($sm-1199) {
			padding-top: 40px;
		}

		.otp-box {
			border: 0.83px solid rgba(55, 55, 55, 1);
			background-color: transparent;
			height: 68px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 12px;
			width: calc(100%/6 - 10px);
			gap: 13px;
			flex-shrink: 0;
			font-size: 16px;
			color: #fff;

			@media($sm-1679) {
				height: 60px;
				font-size: 14px;
				// width: 60px;
			}

			@media($sm-1481) {
				height: 56px;
				// width: 56px;
			}

			@media($sm-1281) {
				// height: 48px;
				// width: 48px;
			}

			@media($sm-479) {
				height: 40px;
				border-radius: 8px;

			}

			&:focus,
			&:active,
			&:focus-within {
				outline: none;
				box-shadow: none;
			}
		}
	}

	.modal-dialog {
		max-width: 661px;
	}

	.resend-tex {

		font-weight: 400;
		font-size: 16px;
		line-height: 26.5px;
		letter-spacing: 0%;

		vertical-align: middle;
		color: rgba(255, 255, 255, 0.3);

		@media($sm-1679) {
			font-size: 14px;
		}

		@media($sm-1481) {
			font-size: 12px;
		}

	}


}

.forgot-modal {

	.form-grp {
		padding-top: 70px;

		@media($sm-1679) {
			padding-top: 50px;
		}

		@media($sm-1481) {
			padding-top: 30px;
		}

		label {

			font-weight: 500;
			font-size: 15.36px;
			line-height: 100%;
			letter-spacing: 0%;
			color: #fff;

			@media($sm-1679) {
				font-size: 13px;
			}


		}

		.form-control {
			border: 0.83px solid rgba(55, 55, 55, 1);
			height: 55px;
			background-color: transparent;
			display: flex;
			align-items: center;
			padding-left: 15px;
			background-color: transparent;
			border-radius: 30px;

			&::placeholder {
				color: rgba(255, 255, 255, 0.3);
			}

			@media($sm-1679) {
				height: 50px;
			}

			@media($sm-1481) {
				height: 48px;
			}

			@media($sm-1199) {
				height: 46px;
			}
		}
	}
}

.setpassword {
	.modal-dialog {
		max-width: 548px;

		.modal-body {
			padding-left: 70px;
			padding-right: 70px;
		}
	}

	.icon-bx {
		padding-bottom: 66px;
		text-align: left;
		justify-content: flex-start;
		@media($sm-1679){
			padding-bottom: 50px;
		}
		@media($sm-1481){
			padding-bottom: 40px;
		}
		@media($sm-991){
			padding-bottom: 30px;
		}
	}

	.form-group {
		padding-bottom: 30px;
	}

	.modal-footer {
		justify-content: space-between;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 66px;
		padding-top: 30px;

		@media($sm-479) {
			flex-wrap: wrap;
		}

		.btn.back-btn {
			border: 1px solid #B0B0B0;
			background: rgba(153, 153, 153, .30) !important;
			border: 1px solid rgba(176, 176, 176, .36);
			color: #fff;
			border-radius: 30px;
			gap: 483px;
			backdrop-filter: blur(33.400001525878906px);
		}

		.btn {
			width: 47%;

			@media($sm-1281) {
				width: 48%;
			}

			@media($sm-479) {
				width: 100%;
			}

		}
	}

	.toggle-password {
		position: absolute;
		right: 20px;
		bottom: 48px;
		&.eye-ico{
                   position: absolute;
                    right: 32px;
                    top: 41px;
					@media($sm-1481){
						top: 37px;
					}
                    img{
                            filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2%) hue-rotate(318deg) brightness(113%) contrast(100%);
                            width: 28px;
                            height: 20px;

                    }

            }
	}
}

@import 'partials';


.custom-modal {
	.custom-inp-cover {
		position: relative;
		margin-bottom: 45px;
.custom-phone-wrapper{
	.parsley-required,.parsley-pattern{
		bottom: -66px;
		@media($sm-1679){
			bottom: -58px;
		}
	}
    .custom-select-code{
        width: 100px;
        // background-color: transparent;
		background-color: #000 !important;
        border: 0.83px solid rgba(55, 55, 55, 1);
        border-radius: 30px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
         color: #fff;
         &:focus,&:active,&:focus-within{
				outline: none;
				box-shadow: none;
			}
    }
    .custom-phone-input{
         border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
        border-left: 0px !important;
    }
}
		@media ($sm-1679) {
			margin-bottom: 30px;
		}

		@media ($sm-1481) {
			margin-bottom: 20px;
		}

		@media ($sm-579) {
			margin-bottom: 18px;
		}

		.inp-alrt {
			position: absolute;
			left: 20px;
			font-size: 13px;
			color: red;

			@media ($sm-579) {
				font-size: 12px;
			}
		}

		.form-label {
			color: #fff;
			font-family: Barlow Semi Condensed;
			font-weight: 500;

			@media ($sm-1679) {
				font-size: 14px;
			}
		}

		.input-group-custom {
			border-radius: 30px;
			border: 0.83px solid #373737;
			background-color: transparent;
			padding-right: 15px;

			.custom-inp {
				box-shadow: none;
				background-color: transparent;
				border: none;
				color: #fff;
				padding: 5px 20px;
				height: 55px;

				@media ($sm-1679) {
					height: 48px;
				}

				@media ($sm-1481) {
					height: 43px;
				}

				@media ($sm-579) {
					height: 40px;
				}
				&.email-inp{
					cursor: not-allowed;
				}
			}

			.inp-rgt-btn {
				background-color: transparent;
				color: #fff;
				border: none;

				img {
					@media ($sm-1679) {
						width: 23px;
					}

					@media ($sm-1481) {
						width: 20px;
					}
				}
			}
		}
	}
}

.chage-pswd-width {
	.modal-dialog {
		@media (min-width: 768px) {
			max-width: 550px;
		}
	}
}

.chage-pswd-modal {
	.modal-dialog {
		.modal-body {
			padding: 0px 80px 100px;

			@media ($sm-1679) {
				padding: 0px 80px 80px;
			}

			@media ($sm-1481) {
				padding: 0px 70px 50px;
			}

			@media ($sm-579) {
				padding: 0px 20px 40px;
			}

			.modal-title {
				justify-content: unset;
				margin-bottom: 60px;

				@media ($sm-1679) {
					margin-bottom: 40px;
				}

				@media ($sm-1481) {
					margin-bottom: 30px;
				}
			}
		}
	}

	.modal-footer {
		&.d-flex {
			.btn {
				width: calc(50% - 13px);

				@media ($sm-1679) {
					margin-bottom: 30px;
				}
			}
		}
	}

	.modal-footer {
		padding: 0;

		@media ($sm-1679) {
			padding-top: 15px;
		}

		.btn {
			margin-bottom: 0 !important;

			@media ($sm-1679) {
				height: 48px;
			}

			@media ($sm-1481) {
				height: 45px;
			}
		}
	}
}

.logout-modal {
	.modal-dialog {
		@media (min-width: 768px) {
			max-width: 550px;
		}

		.modal-body {
			padding: 60px 80px 80px;

			@media ($sm-1679) {
				padding: 40px 80px 60px;
			}

			@media ($sm-1481) {
				padding: 30px 70px 50px;
			}

			@media ($sm-579) {
				padding: 20px 20px 40px;
			}
		}
	}

	.logout-modal-block {
		.img-block {
			margin-bottom: 50px;

			@media ($sm-1679) {
				margin-bottom: 40px;
			}

			@media ($sm-579) {
				margin-bottom: 30px;
			}

			img {
				@media ($sm-1679) {
					max-height: 110px;
				}

				@media ($sm-1481) {
					max-height: 100px;
				}

				@media ($sm-579) {
					max-height: 80px;
				}
			}
		}

		.txt-block {
			margin-bottom: 35px;
			text-align: center;
			color: #fff;

			h3 {
				font-size: 30px;
				font-weight: 700;
				color: $primary;

				@media ($sm-1679) {
					font-size: 26px;
				}

				span {
					color: #fff;
					font-weight: 300;
				}
			}

			p {
				color: #fff;
			}
		}
	}

	.modal-footer {
		&.d-flex {
			.btn {
				width: calc(50% - 13px);

				@media ($sm-1679) {
					margin-bottom: 30px;
				}
			}
		}
	}

	.modal-footer {
		padding: 0;

		@media ($sm-1679) {
			padding-top: 15px;
		}

		.btn {
			margin-bottom: 0 !important;

			@media ($sm-1679) {
				height: 48px;
			}

			@media ($sm-1481) {
				height: 45px;
			}
		}
	}
}

.edit-profile-modal {
	.modal-footer {
		padding: 0;

		@media ($sm-1679) {
			padding-top: 15px;
		}

		.btn {
			margin-bottom: 0 !important;

			@media ($sm-1679) {
				height: 48px;
			}

			@media ($sm-1481) {
				height: 45px;
			}
		}
	}

	.modal-dialog {
		@media (min-width: 1200px) {
			max-width: 970px;
		}
	}

	.modal-footer {
		.btn {
			max-width: 180px;
		}

		.back-btn {
			margin-right: 25px;
		}
	}
}