/* Styles for the admin panel of the app */
/*****************************************/

.country-select .flag{
	background-image:url("https://cdnjs.cloudflare.com/ajax/libs/country-select-js/2.0.1/img/flags.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
	.country-select .flag{
		background-image:url("https://cdnjs.cloudflare.com/ajax/libs/country-select-js/2.0.1/img/flags@2x.png")
	}
}

.fk-spinner{
	position:fixed;
	padding:0;
	margin:0;

	top:0;
	left:0;
	opacity:0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.fk-spinner.fk-enabled{
	opacity:1;
	pointer-events: initial;
}

.fk-ui{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	opacity:0;
}

.fk-ui.fk-enabled{
	opacity:1;
}

.fk-hidden{
	opacity:0;
}

.mb-removed{
	display:none;
}


.fk-max-desktop{
	display:block;
	position:relative;
	min-height:200px;
	max-width:800px;
	min-width:200px;
}

.fk-spop-control{
	display:none;
}

.fk-spop-control.fk-visible{
	display:block;
}

#fk-debug-log{
	position:fixed;
	bottom:25px;
	left:25px;
	height:10em;
	width:100%;
	overflow:auto;
	z-index:10;
	pointer-events: none;
	opacity:0;
}
#fk-debug-log , #fk-debug-log *{
	color:#BBB;
	pointer-events: none;
}

/* Only enable debug log in debug mode */
.fk-debug #fk-debug-log{
	opacity:1;
}

.fk-debug{
	/*background-image: url(/static/images/under_construction.png);*/
	background-image: url(/static/images/work_in_progress_bg.svg);
	background-repeat: repeat;
}

.fk-ui, .fk-spinner, #fk-settings {
/* From https://matthewlein.com/tools/ceaser */
-webkit-transition: all 500ms cubic-bezier(0.695, 0, 0.275, 1); /* older webkit */
-webkit-transition: all 500ms cubic-bezier(0.695, -0.030, 0.275, 1.405);
   -moz-transition: all 500ms cubic-bezier(0.695, -0.030, 0.275, 1.405);
     -o-transition: all 500ms cubic-bezier(0.695, -0.030, 0.275, 1.405);
        transition: all 500ms cubic-bezier(0.695, -0.030, 0.275, 1.405); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.695, 0, 0.275, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.695, -0.030, 0.275, 1.405);
   -moz-transition-timing-function: cubic-bezier(0.695, -0.030, 0.275, 1.405);
     -o-transition-timing-function: cubic-bezier(0.695, -0.030, 0.275, 1.405);
        transition-timing-function: cubic-bezier(0.695, -0.030, 0.275, 1.405); /* custom */
}


.fk-timer-indicator-part{
	display:block;
	background:black;
	height:0.5em;
	width:20%;
	float:left;
	clear:none;
}

.fk-timer-indicator-part.fk-part-wait{
	background:orange;
}
.fk-timer-indicator-part.fk-part-show{
	background:green;
}
.fk-timer-indicator-part.fk-part-transition{
	background:red;
}

.fk-time-label{
	color:#444;
	font-size:70%;
	width:5em;
	height:auto;
	float:left;
	clear:none;
	white-space: nowrap; 
}

.fk-time-start{
	
}



.mb_validation_error{
    color: #bba308;
}

.mb-hide{
    opacity:0.0;
}


/***********************************/
/* Theme preview swatch (mini preview) */

.mb-theme-mini-preview{
    width:10em;
    border-width:3px;
    border-color: var(--mb_theme_border_color);
    border-style:solid;
    background-color: var(--mb_theme_background_color);
    border-radius:1.5em;
    overflow:hidden;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    display: table-cell;
    vertical-align: middle;
}

.mb-theme-mini-preview h1{
    font-size:120%;
    font-weight:bold;
}

.mb-theme-mini-preview > div{
    float:left;
    padding:1em;
    box-sizing: border-box;
}

.mb-theme-mini-preview > .left, .mb-theme-mini-preview > .right{
    width:50%;
    height:100%;
    position:relative;
}

.mb-theme-mini-preview > .left{
    background-color: var(--mb_theme_secondary_background_color);
    color: var(--mb_theme_secondary_text_color);
}

.mb-theme-mini-preview > .right{
    background-color: var(--mb_theme_primary_background_color);
    color: var(--mb_theme_primary_text_color);
}


/***********************************/

.fk-time-needle{
	background:#333;
	border-radius: 0% 0% 50% 50%;
	width:0.5em;
	height:0.5em;
	opacity:0;
	margin-left:100%;
}

.fk-time-needle.fk-enabled{
	opacity:1;
}

.fk-time-end{
	float:right;
	text-align:right;
}

.fk-timer-indicator-parts{
	width:100%;
	display:block;
	overflow:hidden;
}

.fk-test{
	float:left;
	clear:none;
}

.fk-panel {
	background-color: #fff;
	box-shadow: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
	border-radius: 3px;
	box-sizing: border-box;
	color: rgb(33, 43, 54);
	position: relative;
	opacity:0;
	z-index:1;
	
	margin: 25px 0px 0px 25px;
	width: auto;
	height:auto;
	float:left;
	clear:both;
	display:block;
}


.fk-panel.fk-enabled {
	opacity:1;
}


.fk-panel > h2{
	text-align:center;
	margin:0.5em;
}


.fk-panel th{
	font-weight: bold;
}

#fk-settings-preview{

}


.fk-panel.fk-collapsed table {
	display:none;
}

.fk-panel.fk-collapsed{
	width:auto !important;
}

.fk-panel .fk-header-button, .fk_wizard_button{
	margin:0.5em;
	min-width: 10em;
}

.fk_wizard_button svg, .fk-header-button svg{
	height: 2rem;
	width: 2rem;
	max-height: 100%;
	max-width: 100%;
	position: relative;

	display: block;
	float:left;
	justify-content: center;
	align-items: center;
	min-width: 1px;
	min-height: 1px;
	fill: #637381;
	margin-right:0.25em;
}

.fk_wizard_button{
	color: white;
}

.fk_wizard_button svg{
	fill: white !important;
}

.fk-preview-item{
	padding:0;
	margin:0;
	width:2em;
	height:2em;
	box-sizing: border-box;
	border-radius:0px;
	border-width:4px;
	border-color:#333;
	border-style:solid;
	background-color: #f52082;
	box-shadow: 4px 5px 12px -7px rgba(0,0,0,0.6);
	opacity:1;
	color:#20f582;
	font-weight:bold;
	text-align: center;
}

.fk-preview-item.fk-half{
	width:1em;
}

.fk-preview-item.fk-half.fk-a{
	border-width:4px;
	border-right:0px;
}

.fk-preview-item.fk-half.fk-b{
	border-width:4px;
	border-left:0px;
}

.fk-preview-item.fk-border-round{
	border-radius:999px !important;
}

.fk-preview-item.fk-border-thin{
	border-width:1px !important;
}

.fk-preview-item.fk-border-color{
	border-color:#20f582 !important;
}

.fk-preview-item.fk-background-color{
	background-color:#20f582 !important;
}

.fk-float-my-kids > *{
	float:left;
	clear:none;
}

.fk-preview-slider-bob{
	width: 70%!important;
	margin:0.60em;
}

#fk-product-photo-preview{
	height:3em;
}


#fk-settings-content .by{
	font-size:8pt;
	text-rendering: optimizeLegibility;
	white-space: nowrap;
	text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
#fk-settings-content .by, #fk-settings-content .by *{
	color:#f52082!important;
}

#fk-location-flag-preview{
	height:2em;
	width:2.666em;
}

.fk-nobr{
	white-space: nowrap;
}


.fk-icon {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	display: block;
	line-height: 1em;
	height: 1.5em;
	width: 2em;
}

.fk-save-button{
	margin:0.5em;
}

.fk-icon:before {
	content: '\00a0';
}

.fk-icon.help {
	background-image: url(/static/images/icons/help.svg);
	display: inline-block;
	top: -0.33em;
}

.fk-icon.turtle {
	background-image: url(/static/images/icons/turtle.svg);
}

.fk-icon.rabbit {
	background-image: url(/static/images/icons/rabbit.svg);
}

.fk-icon.palette {
	background-image: url(/static/images/icons/palette.svg);
}

.fk-icon.horizontal {
	background-image: url(/static/images/icons/horizontal.svg);
}

.fk-icon.vertical {
	background-image: url(/static/images/icons/vertical.svg);
}

.fk-icon.velocity {
	background-image: url(/static/images/icons/velocity.svg);
}

.fk-icon.hourglass_up {
	background-image: url(/static/images/icons/hourglass_up.svg);
}

.fk-icon.hourglass_down {
	background-image: url(/static/images/icons/hourglass_down.svg);
}

.fk-icon.border_width {
	background-image: url(/static/images/icons/border_width.svg);
}

.fk-icon.border_radius {
	background-image: url(/static/images/icons/border_radius.svg);
}

.fk-icon.edge_right {
	background-image: url(/static/images/icons/edge_right.svg);
}

.fk-icon.edge_left {
	background-image: url(/static/images/icons/edge_left.svg);
}

.fk-icon.cloud {
	height: 1.5em;
	width: 2em;
}

.fk-icon.cloud.wait {
	background-image: url(/static/images/icons/cloud/wait.svg);
}

.fk-icon.cloud.wait-put {
	background-image: url(/static/images/icons/cloud/wait-put.svg);
}

.fk-icon.cloud.wait-fetch {
	background-image: url(/static/images/icons/cloud/wait-fetch.svg);
}

.fk-icon.cloud.ok {
	background-image: url(/static/images/icons/cloud/ok.svg);
}

.fk-icon.cloud.bad {
	background-image: url(/static/images/icons/cloud/bad.svg);
}

.fk-icon.warning {
	background-image: url(/static/images/icons/warning.svg);
}

.fk-icon.info {
	background-image: url(/static/images/icons/info.svg);
}

.fk-icon.error {
	background-image: url(/static/images/icons/error.svg);
}

.fk-label-icon {
	padding-left:1.8em;
	color:#ccc;
	padding-top:0.2em;
}

.mb-app-enable{
	margin-top:0.4em;
	margin-left:0.9em;
}

.mb-app-enabled-label{
	margin-left:-4em;
}

.mb-app-enabled-label.fk-disabled{
	color:red;
}


/**** START product selector/swatch widgets ***/

.fk-product-swatch-widget
, .fk-product-selector-button {
	max-width: 20.3em;
	overflow: hidden;
	/* text-overflow: ellipsis;*/ /*Some bug makes text disappear completely when this is enabled*/
	white-space: nowrap;
}


.fk-product-swatch-widget >img
, .fk-product-selector-button > img {
	vertical-align: middle;
	max-width:3em;
	display: inline-block;
}

.fk-product-swatch-widget >span
.fk-product-selector-button > span {
	vertical-align: middle;
	display: inline-block;
}

.fk-product-selector-dialogue select[name=fk-product-id]
, .fk-product-selector-dialogue select[name=fk-product-variant-id]{
	max-width:10em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fk-display-none {
   position: absolute !important;
   top: -99999px !important;
   left: -99999px !important;
}

/**** END product selector widget ***/

#mb-settings-feature-matrix .switch{
	margin-top: 0.3em;
}

#mb-settings-feature-matrix p{
	margin-top: 0.4em;
}


/*
Progress bar. USAGE: <div class="fk-progress-bar"><div class="progress" style="width:12%">&nbsp;</div></div>
*/

.fk-progress-bar {
 width: 100%;
 height: 1rem;
 background-color: #1f4b9a;
 border-radius: 25000px;
 position: relative;
 margin:0;
 padding:0;
}


.fk-progress-bar .progress {
 top: 0;
 left: 0;
 width:10%;
 min-width:1rem;
 height: 100%;
 border-radius: 25000px;
 background-color: #3a80f0;
}
/* end progress bar*/




.fk-wide{
	width:100%;
}

.fk-badge, .fk-notify-badge {
	background: #fbeb96;
	text-align: center;
	border-radius: .5em .5em .5em .5em;
	color: #1c2023;
	padding: 0.5em 0.5em;
	font-size: 70%;
	white-space: nowrap;
}


.fk-notify-badge {
	position: absolute;
	right: -2em;
	top: .3em;
	padding: 0px 0.5em;
}


.fk-colorswatch{
	border-radius:999px;
	width:2.5em!important;
	height:2.5em!important;
	margin:1em;
	border-radius:999px;
	border: 3px solid #333;
	float:left;
}

.fk-virtual-browser{
	border-top:0;
	border:1px solid #ccc;
	border-bottom:4px solid #666;
	border-radius: 0px 0px 4px 4px;
	opacity:0;
	overflow: hidden;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,255));

	display: block;
	/*position: absolute;*/
	opacity:1;
	z-index:0;

	padding:0;
	margin:0;
	/*box-shadow: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15), 0px 5px 12px -7px rgba(0,0,0,1.0);*/
	
	 mask-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1.0));
}

.fk-virtual-browser.fk-enabled{
	opacity:1;
}

.fk-virtual-browser.fk-left{
	border-left:4px solid #666;
}

.fk-virtual-browser.fk-right{
	border-right:4px solid #666;
}


#fk-preview{
	max-width:830px;
	bottom: 0px;
	height:250px;
	/*box-sizing: border-box;*/
	box-sizing: content-box;
	overflow: hidden !important;
	position:relative;
	display:block;
}


#fk-mini-preview{
	box-sizing: content-box;
	position:relative;
	display:block;
}