/* temp solution - conflict with other appmode pages */
.activeContainer .content-container.appmode{
	padding-left:300px !important;
}
@media screen and (max-width: 1150px) and (min-width: 801px){
	.activeContainer .content-container.appmode{
		padding-left:250px !important;
	}
}
@media screen and (max-width: 800px){
	.activeContainer .content-container.appmode{
		padding-left:0px !important;
	}
}
/* end of temp solution */

button.showMobileMenu{
	display:none !important;
}

.skinPreviewArea{padding-top:0}
.skinPreviewArea .previewModesToolbar{ border-radius:0; border:none; box-shadow:none; margin-top: 10px; text-align: center; margin: auto; position: static; display: inline-block; width: 368px; vertical-align:top}
.skinPreviewArea .previewModesToolbar ul{ font-size:0; vertical-align:top }
.skinPreviewArea .previewModesToolbar ul li{display: inline-block; vertical-align: top; background-color: #eaf0f6; border: 1px solid #cbd6e2; border-right: 0; color: #506e91; border-radius: 0; position:relative; cursor: pointer;}
.skinPreviewArea .previewModesToolbar ul li:hover{ background-color: #f5f8fa; color: #506e91; }
	
.skinPreviewArea .previewModesToolbar ul li:first-child{ border-right: 1px solid #cbd6e2; border-radius: 5px 0 0 5px;}
.skinPreviewArea .previewModesToolbar ul li:nth-child(3){ border-right: 1px solid #cbd6e2; border-radius: 0 5px 5px 0; }

.skinPreviewArea .skinPreview-content { padding: 20px 30px 0 30px; }
.skinPreviewArea .skinPreview-head{ padding: 6px 30px;}
.skinPreviewArea .skinPreview-head .headCenter{float:none}
.skinPreviewArea .skinPreview-head .headCenter ul li .btn{ padding: 12px 66px 12px 10px; background: transparent; }
.skinPreviewArea .skinPreview-head .headCenter ul li .btn.active{ background-color: #cbd6e2 !important; border-color: #7c98b6 !important; color: #506e91 !important; box-shadow:none!important}	
.skinPreviewArea .skinPreview-head .headCenter ul li .btn i{ font-size:30px; color: #506e91 !important;}
.skinPreviewArea .previewModesToolbar ul li span{
    font-size: 12px;
    line-height: 12px;
    position: absolute;
    display: inline-block;
    left: 16px;
    width: 100%;
    color: #506e91;	
	top: 14px;
}

.skinPreviewArea .headLeft{max-width: 30%;}
.skinPreviewArea .skinPreview-head p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:none}
.skinPreviewArea .useThisSkin{margin-top:11px}
.skinPreviewArea .skinPreview-head .backToSkins b{    
	position: absolute; margin: auto; left: 0; right: 0; bottom: 16px; color: #434a54; font-size: 0; display:block
}
.skinPreviewArea .skinPreview-head .backToSkins b:before {
    content: "Back"; display: block; font-size: 12px; position: absolute; left: 0; right: 0; bottom: 0;
}


.skinPreviewArea .skinPreview-head h3{ margin-bottom: 10px;}
.skinPreviewArea .skinPreview-head button.prev{margin-left:0; padding-left:0}

.skinPreviewArea .simulatorContainer{width:auto}
.skinPreviewArea .simulatorContainer .simulator.desktop{ width: 1284px!important; border: 2px solid #cbd6e2; border-radius: 8px 8px 0 0; height: auto; background-image:none; padding: 0; max-width:100%!important}
.skinPreviewArea .simulatorContainer .simulator.fullscreen{ width: 100%; border: 2px solid #cbd6e2; border-radius: 8px 8px 0 0; height: auto; background-image:none; padding: 0;}
.skinPreviewArea .toolbar, .skinPreviewArea .toolbar-top-bar, .skinPreviewArea .toolbar-bottom-bar{display:none}
.skinPreviewArea .toolbar-camera, .skinPreviewArea .toolbar-speaker, .skinPreviewArea .toolbar-home{background: #eaf0f6; vertical-align:top; display:inline-block}
.simulatorContainer .simulator .toolbar{width: 100%; line-height: 12px; text-align: left; padding: 4px 8px 4px 16px; border-bottom: 2px solid #cbd6e2;}
.skinPreviewArea .simulatorContainer .simulator.desktop .toolbar, .skinPreviewArea .simulatorContainer .simulator.fullscreen .toolbar{ display:block;  }
	
.skinPreviewArea .simulatorContainer .simulator.portrait .toolbar-top-bar,
.skinPreviewArea .simulatorContainer .simulator.portrait .toolbar-bottom-bar{
	display:block; height: 90px; text-align:center
}
	
.skinPreviewArea .simulatorContainer .simulator.landscape .toolbar-top-bar,
.skinPreviewArea .simulatorContainer .simulator.landscape .toolbar-bottom-bar{
	display:inline-block; width: 90px; text-align:center; height:100%; vertical-align: top;position:relative
}	
.skinPreviewArea .toolbar-camera{
	height: 10px; width: 10px; border-radius: 50%;
}	
.skinPreviewArea .toolbar-speaker{ border-radius: 6px; }
.skinPreviewArea .portrait .toolbar-camera{ margin-top: 40px; }
.skinPreviewArea .landscape .toolbar-camera{ display: block; text-align: center; margin-left: 40px; }
.skinPreviewArea .landscape.tablet .toolbar-camera{ margin-top: 341.5px; }
.skinPreviewArea.landscape.mobile .toolbar-camera{ margin-top: 135px; }	
.skinPreviewArea .portrait .toolbar-speaker{ height: 6px; width: 60px; margin-left: 16px; margin-top: 42px;
}	
.skinPreviewArea .landscape .toolbar-speaker{ width: 6px; height: 60px; margin-left: 2px; margin-top: 15px;
}
.skinPreviewArea .toolbar-home{ border-radius: 50%; height: 50px; width: 50px;}
.skinPreviewArea .portrait .toolbar-home{ margin-top: 20px; }
.skinPreviewArea .landscape.mobile .toolbar-home,
.skinPreviewArea .landscape.tablet .toolbar-home,
.skinPreviewArea .landscape.mobile .toolbar-camera,
.skinPreviewArea .landscape.tablet .toolbar-camera,
.skinPreviewArea .landscape.mobile .toolbar-speaker,
.skinPreviewArea .landscape.tablet .toolbar-speaker{ 
	display: inline-block; vertical-align: middle; white-space: nowrap; position: absolute; left: 0; right: 0; margin: auto; ;
}
.skinPreviewArea .landscape.mobile .toolbar-home, .skinPreviewArea .landscape.tablet .toolbar-home{top: 50%; top: calc(50% - 25px)}
.skinPreviewArea .landscape.mobile .toolbar-camera, .skinPreviewArea .landscape.tablet .toolbar-camera{top: 50%; top: calc(50% - 38px)}
.skinPreviewArea .landscape.mobile .toolbar-speaker, .skinPreviewArea .landscape.tablet .toolbar-speaker{top: 50%; top: calc(50% - 22px)}

.skinPreviewArea .simulatorContainer .simulator.tablet,
.skinPreviewArea .simulatorContainer .simulator.mobile{
	background:none; background: #cbd6e2!important; border: 2px solid #cbd6e2;  border-radius: 40px; height:auto;
}

.skinPreviewArea .simulatorContainer .simulator.tablet.portrait,
.skinPreviewArea .simulatorContainer .simulator.mobile.portrait{
	padding: 0 16px !important;
}
	
.skinPreviewArea .simulatorContainer .simulator.tablet.landscape,
.skinPreviewArea .simulatorContainer .simulator.mobile.landscape{
	padding:16px 0 !important;
}

.skinPreviewArea .simulatorContainer .simulator.tablet.portrait{
	width: 804px!important;
	max-width: 100%;
}

.skinPreviewArea .simulatorContainer .simulator.tablet.landscape{
	width: 1217px!important;
	height: 804px;
	/*max-height: calc(100vh - 130px);*/
	max-width: 100%;
}

.skinPreviewArea .simulatorContainer .simulator.mobile.portrait{
	width: 411px!important;;
}

.skinPreviewArea .simulatorContainer .simulator.mobile.landscape{
	width: 840px!important;
	height: 411px;
	/*max-height: calc(100vh - 130px);*/
	max-width:100%
}

.skinPreviewArea .simulatorContainer .toolbar-button{
	display: inline-block;
	height: 12px;
	width: 12px;
	margin-right: 7.2px;
	border: 2px solid #cbd6e2;
	border-radius: 50%;
	margin-top: 4px;
    margin-bottom: 4px;
}

.skinPreviewArea .simulatorContainer .toolbar-button:nth-child(1){background-color: #FF5C5C; border-color:#FF5C5C}
.skinPreviewArea .simulatorContainer .toolbar-button:nth-child(2){background-color: #FDBC44; border-color:#FDBC44}
.skinPreviewArea .simulatorContainer .toolbar-button:nth-child(3){background-color: #24CB40; border-color:#24CB40}

.skinPreviewArea .simulatorContainer .toolbar-input{
	border: 2px solid #cbd6e2;
    width: 300px;
    display: inline-block;
    margin-left: 20px;
    height: 20px;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: top;
    padding-left: 8px;
}

.skinPreviewArea .simulatorContainer .toolbar-input span{
	font-size: 14px;
    line-height: 16px;
    color: #434a54;
	vertical-align: top;
    display: inline-block;
	user-select: none;
}

.skinPreviewArea .simulatorContainer .simulator #iframeWrapper{
	overflow: hidden !important;
	background-color: #fff;
}
.skinPreviewArea .simulatorContainer .simulator.desktop #iframeWrapper{
	max-width:none!important
}

.skinPreviewArea .simulatorContainer .simulator.desktop #iframeWrapper,
.skinPreviewArea .simulatorContainer .simulator.fullscreen #iframeWrapper{
	height: calc(100vh - 258px) !important;;
}

.skinPreviewArea .simulatorContainer .simulator.tablet.portrait #iframeWrapper{
	height: 1024px;
}
.skinPreviewArea .simulatorContainer .simulator.mobile.portrait #iframeWrapper{
	height: 647px;
}

.skinPreviewArea .simulatorContainer .simulator.mobile.landscape #iframeWrapper{
	width: 647px;
	display: inline-block;
	max-width: calc(100% - 189px);	
}

.skinPreviewArea .simulatorContainer .simulator.tablet.landscape #iframeWrapper{
	width: 1024px;
	display: inline-block;
	max-width: calc(100% - 189px);	
}

.skinPreviewArea .simulatorContainer .simulator #iframeWrapper.mobile-wrapper{
	overflow-y:auto!important;-webkit-overflow-scrolling:touch;-webkit-transform: translateZ(0);
}

.skinPreviewArea .simulatorContainer .simulator iframe{
	height:100%;
	border:none;
	background:transparent
}

.skinPreviewArea .simulatorContainer .simulator.tablet iframe,
.skinPreviewArea .simulatorContainer .simulator.mobile iframe{
	height:100% !important;
}


@media screen and (min-width: 1250px){
	.wizardSteps.fixed ~ .skinPreviewArea { margin-top: 100px; }
	.wizardSteps.fixed~.skinPreviewArea .skinPreview-head{ margin: 0; position: fixed; top: 107px; width: 100%; width: calc(100% - 300px); left: 300px; z-index: 90; }
	.loggedout .wizardSteps.fixed~.skinPreviewArea .skinPreview-head{top: 46px;}
	.loggedout .wizardSteps ~ .skinPreviewArea{margin-top: -16px!important;}
}

@media screen and (max-width: 1680px){
	.skinPreviewArea .previewModesToolbar { margin-left: 0; }
}


@media only screen and (max-width: 1000px){
	.skinPreviewArea .skinPreview-head { padding: 16px 30px; }
}


@media only screen and (min-width: 1000px) and (max-width: 1180px) {
	.headRight .btn{font-size:12px;}
}


@media only screen and (min-width: 800px) and (max-width: 1300px) {
	.skinPreviewArea .previewModesToolbar{display:inline-block; width:auto}
	.skinPreviewArea .previewModesToolbar ul{text-align:left; display:inline-block; width:auto}
	.skinPreviewArea .previewModesToolbar ul li{text-align:center}
	.skinPreviewArea .previewModesToolbar ul li .btn{padding:12px 23px 36px}
}
@media only screen and (max-width: 800px){
	.toolbar-top-bar, .toolbar-bottom-bar{display:none!important}
	.skinPreviewArea{margin: 20px 0;}
	.skinPreviewArea .toolbar{display:block}
	.skinPreviewArea .simulatorContainer .simulator{height:100%!important}
	.skinPreviewArea .simulatorContainer .simulator.tablet.portrait #iframeWrapper,
	.skinPreviewArea .simulatorContainer .simulator.mobile.portrait #iframeWrapper,
	.skinPreviewArea .simulatorContainer .simulator.tablet.landscape #iframeWrapper,
	.skinPreviewArea .simulatorContainer .simulator.mobile.landscape #iframeWrapper{
		height: calc(100vh - 170px) !important;
		max-width:100%!important;
		width:100%
	}
	.skinPreviewArea .simulatorContainer .simulator.mobile.portrait,
	.skinPreviewArea .simulatorContainer .simulator.tablet.portrait,
	.skinPreviewArea .simulatorContainer .simulator.mobile.landscape,
	.skinPreviewArea .simulatorContainer .simulator.tablet.landscape{
		width:100%!important;
		border-radius: 8px 8px 0 0;
		max-width:100%;
		background:none!important;
	}
	.skinPreviewArea .previewRotate{display:none!important}
	
	.skinPreviewArea .skinPreview-head{
		padding: 14px;
		padding-left: 60px;
		padding-right: 0;
	}
	.skinPreviewArea .headLeft{margin:0}
	.skinPreviewArea .headRight{display:block}
	.skinPreviewArea .useThisSkin{    
		position: fixed;
		display: block;
		bottom: 0;
		width: 100%;
		width: calc(100% - 16px);
		z-index: 4000;
		left: 0;
		padding: 22px 5px;
	}
	.skinPreviewArea .skinPreview-head .btn.next b, .skinPreviewArea .skinPreview-head .btn.prev b{ display:inline-block 	}
}

@media only screen and (max-width: 450px){
	.skinPreviewArea .simulatorContainer .toolbar-input{max-width:170px}
	.skinPreviewArea .simulatorContainer .toolbar-input span{font-size:12px}
	.skinPreviewArea .skinPreview-head .btn.next, .skinPreviewArea .skinPreview-head .btn.prev{ font-size: 11px; }
}