.photo{
	height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    .photo-header{
    	padding: 20px;
	    position: fixed;
	    left: 0;
	    top: 0;
	    right: 0;
    	.btn-icon{
    		height: 48px;
		    line-height: 48px;
		    width: 48px;
		    padding: 0!important;
    	}
    }
    .btn{
		border: 0;
	}
	.main{
		height: 75%;
		margin: 0!important;
		padding: 0!important;
		align-items: center;
    	display: flex;
		img {
		  margin: 0 auto;
		  max-width: 100%; /* This rule is very important, please do not ignore this! */
		}
		canvas{
			margin: 0 auto;
		}
	}
	.control{
		background-color: #fff;
		height: 155px;
		min-height: inherit!important;
		line-height: inherit!important;
		padding-top: 25px;
		.flexbox-item{
			text-align: center;
			.mainBtn{
				.zhidian-font{
					font-size: 36px;/*px*/
				}
			}
		}	
	}
	.popup-dialog{
		padding-bottom: 0;
	}
	.cutRotate{
		position: absolute;
	    width: 100%;
	    bottom: 0;
	    float: left;
		.zhidian-font{
			font-size: 20px;/*px*/
		}
		.buttonGroup1{
			height: 40px;
			.cutOrRoate{
				text-align: center;
				.btn.disabled{
					opacity: .35;
				}
			}
		}
		
		.cutRotatePanel{
			width: 200%;
			.cutPanel{
				width: 50%;
				float: left;
				.buttonGroup2{
					height: 50px;
					overflow: hidden;
					.resetCut{
						float: left;
						margin-left: 10px;
					}
					.sureCut{
						float: right;
						margin-right: 10px;
					}
					.btn{
						padding: 3px 15px;
						line-height: inherit;
						min-width: 70px;
					}
				}
				.buttonGroup3{
					height: 85px;
					text-align: center;
					.zhidian-font{
						font-size: 24px;/*px*/
					}
				}
			}
			.rotatePanel{
				width: 50%;
				float: left;
				height: 135px;
    			line-height: 135px;
    			.buttonGroup4{
    				text-align: center;
    				.zhidian-font{
						font-size: 34px;/*px*/
					}
					.resetCut{
						padding: 3px 15px;
						// line-height: inherit;
						min-width: 70px;
					}
    			}
			}
		}
	}
	.filterousPanel{
		.filterousList{
			height: 100px;
    		margin-top: 10px;
			ul{
				color: #000;
				-webkit-overflow-scrolling: touch;
				overflow-x: scroll;
			    display: block;
			    white-space: nowrap;
			    li{
			    	padding: 5px;
    				padding-right: 0;
    				cursor: pointer;
    				p{
    					margin-top: -20px;
					    color: #fff;
					    text-align: center;
					    font-weight: 800;
    				}
    				img{
						max-width: 70px;
					}
    				&:last-child{
    					padding-right: 5px;
    				}
			    }
				
			}
		}
		.zhidian-font{
			font-size: 20px;/*px*/
		}
	}
	.doodlePanel{
		position: absolute;
    	width: 100%;
    	margin-top: -18px;
		.zhidian-font{
			font-size: 20px;/*px*/
		}
		.colorSpan{
			height: 40px;
			li{
				&.checked{
					transition: transform .1s;
					transform:scale(1.2);
				}
			}
			
		}
		.doodleTools{
			margin: 8px 0;
			li{
				width: 15%;
				text-align: center;
				color: #000;
				padding: 5px 8px;
				&.checked{
					transition: background-color .2s;
					background-color: rgba(0, 0, 0, 0.07);
				}
			}
		}
		.doodleLineBorder{
			width: 100%;
			margin: 8px auto;
			color: #000;
			text-align: center;
			li{
				padding: 5px 8px;
				&.checked{
					transition: background-color .2s;
					background-color: rgba(0, 0, 0, 0.07);
				}
				.dot1{
				    width: 20px;
				    height: 20px;
				    transform: scale(.4);
				    float: left;
				}
				.dot2{
				    width: 20px;
				    height: 20px;
				    transform: scale(.6);
				    float: left;
				}
				.dot3{
				    width: 20px;
				    height: 20px;
				    transform: scale(.8);
				    float: left;
				}
				.dot4{
				    width: 20px;
				    height: 20px;
				    float: left;
				}
			}
		}
		.buttonGroup5{
			height: 40px;
		}
	}
}