@charset "UTF-8";

input::-webkit-input-placeholder {color: #cdcdcd;}
input::-moz-placeholder {color: #cdcdcd;}
input::-ms-input-placeholder {color: #cdcdcd;}

#fwm-params {padding-right: 700px; position: relative;}
#fwm-params:after {content:''; display: block; clear: both;}
	#fwm-params form {position: relative;}
		#fwm-params form table {margin-bottom: 30px;}
			#fwebmanifest_icons {display: inline-block; margin: 10px 0;}
				#fwebmanifest_icons img {display: block; max-width: 300px;}
			#fwm-params .extra-fields {margin: 15px 0 0;}
				#fwm-params .field-row {display: flex; justify-content: space-between; align-items: center; width: 25em;}
				@media screen and (max-width: 782px){ #fwm-params .field-row {width: 100%;} }
					#fwm-params .field-row label {width: 65px; margin-right: 10px;}
					#fwm-params .field-row .string-comp {display: inlnie-block; width: 8px; margin-right: 3px;}
					#fwm-params .field-row input {flex: 1;}
		/*------ PREVIEW ------*/
		#fwm-preview {display: none; width: 700px; height: 100%; padding: 80px 20px 20px; position: fixed; top: 0; right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
		#fwm-preview * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
			/*------ Tabs ------*/
			#fwm-preview .tablist {font-size: 0; text-align: center; margin: 25px auto 0;}
				#fwm-preview .tab {display: inline-block; vertical-align: middle; height: auto; font-weight: 700; font-size: 16px; padding: 8px 30px; margin: 0 5px; cursor: pointer;}
			/*------ Bookmark ------*/
			#bookmark {display: inline-block; vertical-align: middle; text-align: center; margin: 0 15px;}
				#bookmark .icon {display: block; width: 60px; height: 60px; border-radius: 2px; font: 40px/60px Arial; color: #fff; text-align: center; text-transform: uppercase; margin: 0 auto 3px; position: relative;}
					#bookmark .icon img {display: block; width: 100%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
				#bookmark .name {font-weight: 700; font-size: 12px;}
			/*------ Mockups ------*/
			#fwm-preview .mockup {display: none; width: 350px; height: 640px; background: #111; border-radius: 24px; padding: 60px 15px; margin: 0 auto; position: relative; -webkit-transition: all 0.1s ease-out 0s, transform 0.2s ease-out 0s; transition: all 0.1s ease-out 0s, transform 0.2s ease-out 0s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; -webkit-touch-callout: none;}
			#fwm-preview .mockup.visible {display: block;}
				/* Design */
				#fwm-preview .mockup .speaker {width: 70px; height: 8px; background: #343434; border-radius: 5px; margin: auto; position: absolute; left: 0; right: 0; top: 26px; bottom: auto;}
				#fwm-preview .mockup .camera {width: 10px; height: 10px; background: #343434; border-radius: 50%; position: absolute; top: 25px; right: 35px; left: auto;}
				#fwm-preview .mockup .controls {width: 3px; height: 100%; position: absolute; top: 0; right: -3px;}
					#fwm-preview .mockup .controls:before, #fwm-preview .mockup .controls:after {content:''; display: block; width: 100%; height: auto; background: #343434; border-radius: 0 6px 6px 0; position: absolute; left: 0; top: 0;}
					#fwm-preview .mockup .controls:before {height: 100px; top: 120px;}
					#fwm-preview .mockup .controls:after {height: 35px; top: 280px;}
				/* Screen */
				#fwm-preview .mockup .screen {display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; border-radius: 1px;}
					#fwm-preview .mockup .window-container {flex: 1; display: flex; flex-direction: column; max-width: 100%;}
						/* status bar */
						#fwm-preview .mockup .status-bar {display: flex; justify-content: flex-end; align-items: center; height: 25px; color: #fff; padding: 0 5px;}
							#fwm-preview .mockup .status-bar svg {height: 15px; fill: currentColor; margin-right: 8px;}
							#fwm-preview .mockup .status-bar .time {font-size: 12px;}
						/* browser bar */
						#fwm-preview .mockup .browser-bar {display: flex; align-items: center; background: #fdfdfd; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding: 6px 5px; position: relative; z-index: 3;}
							#fwm-preview .mockup .address-bar {flex: 1; background: #ededed; border-radius: 14px; padding: 6px 12px; overflow: hidden; white-space: nowrap;}
							#fwm-preview .mockup .browser-tabs {width: 18px; height: 18px; border: 2px solid currentColor; border-radius: 2px; font: 700 11px/14px Arial, sans-serif; color: #999; text-align: center; margin-left: 15px;}
							#fwm-preview .mockup .browser-menu {width: 3px; height: 3px; color: #666; background: currentColor; border-radius: 50%; margin: 0 10px 0 20px; position: relative;}
								#fwm-preview .mockup .browser-menu:before, #fwm-preview .mockup .browser-menu:after {content:''; display: block; width: 3px; height: 3px; background: currentColor; border-radius: 50%; position: absolute; left: 0;}
								#fwm-preview .mockup .browser-menu:before {top: -6px;}
								#fwm-preview .mockup .browser-menu:after {bottom: -6px;}
					/* navigation bar */
					#fwm-preview .mockup .navigation-bar {display: flex; justify-content: center; align-items: center; width: 100%; height: 36px; background: #000; color: #fff; padding: 0 5px;}
						#fwm-preview .mockup .navigation-bar svg {width: 16px; height: 16px; fill: currentColor;}
							#fwm-preview .mockup .navigation-bar .icon-back {order: 1;}
							#fwm-preview .mockup .navigation-bar .icon-home {order: 2; margin: 0 60px;}
							#fwm-preview .mockup .navigation-bar .icon-recent {order: 3;}
					/* window */
					#fwm-preview .mockup .window {flex: 1; display: flex; flex-direction: column; font-weight: 700; font-size: 15px; color: #000; text-align: center; position: relative;}
						#fwm-preview .mockup .icon {flex: 1; display: flex; flex-direction: column; justify-content: center;}
							#fwm-preview .mockup .icon img {display: block; width: 120px; height: 120px; margin: 0 auto;}
						#fwm-preview .mockup .name {flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 10px;}
						#fwm-preview .mockup .icon + .name {flex: 0 0 auto;}
						#fwm-preview .mockup .frame {width: 100%; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2;}
							#fwm-preview .mockup .frame iframe {display: block; width: 100%; height: 100%;}
			/* Landscape orientation */
			#fwm-preview.landscape .mockup {width: 660px; height: 360px; padding: 15px 60px;}
				#fwm-preview.landscape .mockup .speaker {width: 8px; height: 70px; left: 26px; right: auto; top: 0; bottom: 0;}
				#fwm-preview.landscape .mockup .camera {top: 35px; left: 25px; right: auto;}
				#fwm-preview.landscape .mockup .controls {width: 100%; height: 3px; top: -3px; right: 0;}
					#fwm-preview.landscape .mockup .controls:before, #fwm-preview.landscape .mockup .controls:after {width: auto; height: 100%; border-radius: 6px 6px 0 0;}
						#fwm-preview.landscape .mockup .controls:before {width: 100px; left: 120px; top: 0;}
						#fwm-preview.landscape .mockup .controls:after {width: 35px; left: 280px; top: 0;}
				#fwm-preview.landscape .mockup .screen {flex-direction: row;}
					#fwm-preview.landscape .mockup .window-container {max-width: calc(100% - 36px);}
					#fwm-preview.landscape .mockup .navigation-bar {flex-direction: column; width: 36px; height: 100%; padding: 5px 0;}
						#fwm-preview.landscape .mockup .navigation-bar .icon-back {order: 3;}
						#fwm-preview.landscape .mockup .navigation-bar .icon-home {order: 2; margin: 60px 0;}
						#fwm-preview.landscape .mockup .navigation-bar .icon-recent {order: 1;}
			/* Secondary orientation */
			#fwm-preview.secondary .mockup {-webkit-transform: rotate(180deg); transform: rotate(180deg);}
				#fwm-preview.secondary .mockup .screen {-webkit-transform: rotate(180deg); transform: rotate(180deg);}


/*------ Height < 850 ------*/
@media all and (max-height: 839px) and (min-width: 1600px){
	#fwm-preview {padding-top: 40px;}
}

/*------ Height < 800 ------*/
@media all and (max-height: 799px) and (min-height: 700px) and (min-width: 1600px){
	#fwm-preview {}
		#fwm-preview .mockup {-webkit-transform: scale(0.8); transform: scale(0.8); margin: -50px auto;}
		#fwm-preview.landscape .mockup {margin: -15px auto -50px;}
		#fwm-preview.secondary .mockup {-webkit-transform: scale(0.8) rotate(180deg); transform: scale(0.8) rotate(180deg);}
}

/*------ Height < 700 ------*/
@media all and (max-height: 699px) and (min-width: 1600px){
	#fwm-params {padding-right: 0;}
		#fwm-preview {padding: 0 0 40px; position: relative; top: auto; bottom: auto; left: auto; right: auto;}
}

/*------ Width < 1600 ------*/
@media all and (max-width: 1599px){
	#fwm-params {padding-right: 0;}
		#fwm-preview {padding: 0 0 40px; position: relative; top: auto; bottom: auto; left: auto; right: auto;}
}

/*------ Width < 1024 ------*/
@media all and (max-width: 1023px){
	#fwm-preview {display: none !important;}
}