.modal{
	background-color: rgba(0,0,0,0.5);
	bottom: 0;
	display: none; 
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 5
}
	.modal-content{
		background-color: #ffffff;
		padding: 20px;
		left: 50%;
		margin: auto;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 500px;
		text-align: center;
	}

		.modal-options{

		}

			.modal-options li{
		    display: inline-block;
			}

			.modal-options li:first-child{
		    margin-right: 30px;
			}

				.modal-options li input{
					display: none;
				}

					.modal-options li input[type='radio']:checked ~ label span::after{
						background-color: #FFB742;
						height: 12px;
						width: 12px;
					}

				.modal-options li label{
					vertical-align: middle;
					font-size: 18px;
					cursor: pointer;
				}

					.modal-options li label span{
						border-radius: 50px;
						border: 1px solid #37484A;
						cursor: pointer;
						display: inline-block;
						height: 20px;
						margin-right: 5px;
						vertical-align: middle;
						width: 20px;
						position: relative;
					}

						.modal-options li label span::after{
							content: '';
							display: block;
							height: 0;
							width: 0;
							border-radius: 50px;
							left: 50%;
							position: absolute;
							top: 50%;
							transform: translate(-50%,-50%);
							transition: 0.3s;
						}

		.modal-body{
			position: relative;
	    margin: 25px 0 0;
			display: none;
		}

		.modal-input{
			position: relative;
			margin-bottom: 10px;
		}

	.modal-close{
		position: absolute;
    right: 15px;
    top: 0;
	}

		.modal-close:hover{
			cursor: pointer;
		}
		
		.modal-close::after{
		  content: '\00d7';
		  display: block;
		  font-size: 27px;
		  color: #333333;
		}

	.modal-title{
		margin-bottom: 15px;
		color: #333333;
		font-weight: 400;
		text-align: left;
		font-size: 22px;
		display: block;
	}

		.modal-content input{
			display: block;
			width: 100%;
			border: 1px solid #cccccc;
			padding: 5px 10px;
			font-size: 18px;
			border-radius: 5px;
		}

			.modal-content input[type='number']{
				width: 25%;
			}

		.view-btn{
			background-color: transparent;
			background-image: url(../../images/view.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: 80%;
			border: none;
			border-left: 1px solid #cccccc;
			border-radius: 0 5px 5px 0;
			height: 33px;
			position: absolute;
			right: 0;
			top: 0;
			width: 40px;
		}

			.view-btn:hover{
				cursor: pointer;
			}

		.modal-content img{
			display: none;
			width: auto;
			height: 120px;
		}

		.encrypted-message{
			font-size: 20px;
			color: #1b8e99;
			margin: 20px auto 0;
		}

			.encrypted-message span{
				color: #333333;
				display: block;
			}

@media screen and (max-width: 767px){
	.modal-content{
		width: 90%;
	}
		.modal-content input{
			font-size: 16px;
		}

	.modal-options li {
		display: block;
		text-align: left;
		margin-bottom: 10px;
	}
}