$accent: #2271b1;        // used $$HKITIMP
$accentbright: #007cba;
$disabled: #ccc;
$borderdark: #ccc;       // used $$HKITIMP
$highlightdark: #80bedd;
$highlight: #e3f4fb;
$redhighlight: #d63638;  // used $$HKITIMP
$noteorange: #f78d1b;    // used $$HKITIMP
$notegreen: #00a32a;     // used $$HKITIMP
:root {
	--hootaccent-col: #2271b1;
	--hootaccent-font: #ffffff;
	--hootaccent-def: #2271b1; // #0073aa
}

/*** General ***/

.hootimp-highlight { font-style: normal; color: $accent; }
.hootimp-highlightbg { background: #eee; padding: 5px 10px; }



/*** Layout ***/
#hootabt-wrap.hootabt-hkimp-multi {}
#hootabt-wrap.hootabt-hkimp-multisingle {}
// == hkit's div structure ==
.hootabt-hkimp-multisingle {
	.hootimp-content { max-width: 938px; margin: 0 auto; } // keeping same as 980px - 40px padding - 2px border when not widened
}
.hootabt-hkimp-multi {
	.hootabt-blockid--grid-hki {
		background: none; padding: 0; border: none;
	}
	.hootkitimp_idx {
		padding-left: 0; padding-right: 0;
		.hootkitimp_idx-item {
			overflow: hidden;
			border-color: #c9d2d7;
			transition: box-shadow 0.3s ease;
			&:hover { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); }
		}
		.hootkitimp_idx-previewlink { background: rgba(255, 255, 255, 0.5); }
		.hootkitimp_idx-foot { box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.2); }
	}
}
// == theme's div structure ==
.hootabt-hkimp-multi,
.hootabt-hkimp-multisingle {
	&.hootabt-widen {
		.hootabt-gridgen, .hootabt-gridbox, .hootabt-gridconbox, .hootabt-gridflex { max-width: 980px; }
	}
}




/*** Multi Demo ***/

#hootkitimp-multi {}
.hootkitimp-multi {}
	#hootkitimp_idx {}
	.hootkitimp_idx { display: none; &.hootkit-active { -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; } }
		.hootkitimp_idx-item {}
		.hootkitimp_idx-locked {}
		.hootkitimp_idx-more {}
			.hootkitimp_idx-ss {}
				.hootkitimp_idx-previewlink {}
				.hootkitimp_idx-moremsg {}
			.hootkitimp_idx-foot {}
				.hootkitimp_idx-label {}
				.hootkitimp_idx-btn {}
	.hootkitimp-single { display: none; &.hootkit-active { display: block; } }
		.hootkitimp-single-header {}
			.hootkitimp-backtomulti {}
		.hootimp-content {}
			.hootkitimp-single-notice {}
			.hootkitimp-single-warning {}

// Index
.hootkitimp_idx {
	flex-wrap: wrap;
	justify-content: flex-start; align-items: stretch;
	gap: 30px;
	padding: 10px;
}
.hootkitimp_idx-item {
	position: relative;
	width: calc(33.2% - 20px); box-sizing: border-box;
	border: solid 1px #d6e1e8;
}
$footer-minheight: 50px;
div.hootkitimp_idx-ss {
	width: 100%; min-height: 50px;
	position: relative;
	padding-bottom: $footer-minheight;
	height: 100%; box-sizing: border-box;
	img { max-width: 480px; width: 100%; display: block; margin: 0 auto; }
	&:hover .hootkitimp_idx-previewlink { opacity: 1; }
}
.hootkitimp_idx-previewlink {
	opacity: 0; transition: opacity 0.3s ease;
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	-ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex;
	justify-content: center; align-items: center;
	font-size: 16px; text-decoration: none; text-transform: uppercase; font-weight: 500;
	background: rgba(0,0,0,0.1);
	em { font-style: normal; background: #fff; padding: 7px 14px; border-radius: 5px; border: solid 1px #ddd; }
	em { box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); border-radius: 0; }
}
.hootkitimp_idx-more .hootkitimp_idx-ss {
	box-shadow: inset 0px 0px 18px 0px rgba(80, 80, 80, 0.15);
}
.hootkitimp_idx-moremsg {
	width: 100%; height: 100%; min-height: 250px;
	-ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex;
	justify-content: center; align-items: center;
	font-size: 30px; font-weight: 600; text-transform: uppercase; color: #cfcfcf;
	text-shadow: 1px 1px 1px #ffffff, -1px -1px 1px #8f8f8f;
}
.hootkitimp_idx-foot {
	-ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex;
	justify-content: space-between; align-items: center;
	width: 100%; box-sizing: border-box;
	padding: 10px; border-top: solid 1px #d6e1e8;
	position: absolute; bottom: 0; background: #fafafa; min-height: $footer-minheight;
	.hootkitimp_idx-btn { background: #fff; }
}
.hootkitimp_idx-label {
	margin-left: 4px; font-weight: 500; font-size: 15px;
	line-height: 18px; padding: 7px 0;
	span.dashicons { font-size: 18px; }
}
@media only screen and (max-width: 1079px) {
	.hootkitimp_idx-item { width: calc(50% - 15px); }
}
@media screen and (max-width: 782px) {
	.hootkitimp_idx-item { width: 100%; }
}

// Singletons
.hootkitimp-single-header {
	font-size: 16px; line-height: 1.5em;
	margin-bottom: 20px; background: #f5f5f5;
	.hootkitimp-backtomulti { text-decoration: none; display: inline-block; padding: 9px 15px; }
	span.dashicons {
		font-size: inherit; line-height: inherit; width: 1.5em;
		border: solid 1px; border-radius: 50%;
		vertical-align: top;
		margin-right: 5px;
	}
}
.hootkitimp-single-notice {
	text-align: center; font-size: 1.1em;
	padding: 25px 5px; margin-top: 25px;
	background: #f5f5f5; border: solid 5px #ddd;
	h5 { margin: 0; font-size: 1.3em; text-transform: uppercase; }
	p { font-size: inherit; margin: 1em 0 1.2em; }
	.button { font-size: inherit; }
}
.hootkitimp-single-warning {
	padding: 12px 17px;
	margin: 1.4em -10px;
	border: 1px solid;
	position: relative;
	border-color: #d1cecf; background: #fffafb; color: #7f3048;
}





/*** Layout ***/

.hootimp-content {
	width: 100%; max-width: 1200px;
	overflow: hidden;
	padding: 5px; margin: -5px;
}
.hootimp-footer {
	a { text-decoration: none !important; opacity: 0.8; }
	a:hover { opacity: 1; }
	.hootabt-blockdesc { background: #fafafa; border: solid 1px #ddd; padding: 8px 25px; text-align: right; }
}
div.hootimp-footer.hootabt-gridgen { /* margin-top: -15px; */ margin-bottom: 0; }

/*** Demo Install ***/

.hootimp-content-install {
	display: flex; align-items: stretch; flex-wrap: wrap;
}
.hootimp-screenshots {
	width: 53%;
	padding: 1px 0 3px;
}
.hootimp-screenshot {
	margin-right: 25px;
	min-height: 500px; height: 100%;
	border: 1px solid #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
	background: #fafafa;
	position: relative; overflow: hidden;
	img { width: 100%; position: absolute; }
}
.hootimp-theme-info {
	width: 47%;
	box-sizing: border-box; padding: 0 10px;
	h2 {
		margin: 0;
		font-size: 32px; font-weight: 100; line-height: 1.3;
		span {
			font-size: 13px; font-weight: 400;
			margin-left: 5px;
			display: inline-block;
		}
	}
}

@media only screen and (max-width: 960px) {
	.hootimp-screenshots, .hootimp-theme-info { width: 100%; margin: 10px 0; float: none; }
	.hootimp-screenshot { min-height: 400px; max-width: 600px; margin-right: auto; margin-left: auto; }
}

/*** Form ***/

#hootimp-form {}
.hootimp-form {
	h4 { font-size: 1.2em; margin: 0 0 10px; }
	.hootimp-h4desc { position: relative; top: -5px; margin-bottom: 4px; font-style: italic; }
}
.hootimp-op-group {
	background: #fafafa;
	border: solid 1px $borderdark; border-radius: 4px;
	margin: 25px -10px 0;
	padding: 20px;
	& > div:last-child { margin-bottom: 0; }
	h5 {
		text-transform: uppercase;
		text-align: center;
		font-size: 13px; line-height: 20px; color: #888;
		margin: 0 0 12px;
		position: relative;
		span { background: #fafafa; padding: 0 5px; position: relative; }
		&:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: $borderdark; }
	}
	.hootimp-opbox + h5 { margin-top: 22px; }
	.hootimp-opbox { max-width: none; }
}

.hootimp-opbox {
	display: flex; justify-content: flex-start; align-items: center;
	width: 100%; max-width: 400px;
	margin-bottom: 12px;
}
.hootimp-optoggle {
	flex-shrink: 0;
	position: relative; width: 30px; height: 18px;
	margin: 2px 12px 0 4px;
	input { opacity: 0; width: 0; height: 0; }
}
.hootimp-oplabel {
	flex-grow: 1;
	em { margin: 0 2px; }
}

// content opbox
.hootimp-opbox--content {}
.hootimp-opbox--xml {}
.hootimp-opbox--wcxml {} .hootimp--nowc .hootimp-opbox--wcxml { display: none; }
.hootimp-opbox--dat {}
.hootimp-opbox--wie {}

// plugin opbox
.hootimp-opbox--plugin {}
.hootimp-opbox--plugin_unavailable {
	.hootimp-opnote--unavailable { display: block; }
}
.hootimp-opbox--plugin_active {
	.hootimp-opnote--active { display: block; }
}
.hootimp-opbox--plugin_installed {
	.hootimp-opnote--installed { display: block; }
}
.hootimp-opbox--plugin_noaction {
	[class^="hootimp-opnote--"] { display: none; }
}
.hootimp-opbox--plugin_reqd {}

.hootimp-opnote {
	min-width: 64px; flex-shrink: 0;
	margin-left: 4px;
	span.dashicons {
		font-size: 14px; line-height: 1.3em; width: 18px; height: 1.3em;
		vertical-align: bottom;
	}
	& > div { display: none; }
}
.hootimp-opnote--unavailable { color: $noteorange; }
.hootimp-opnote--installed { color: $noteorange; }
.hootimp-opnote--active { color: $notegreen; .dashicons { font-size: 18px; line-height: 1em; height: 1em; } }

// Form actions
.hootimp-action { margin-top: 20px; height: 46px; }
.hootimp-submit {
	&.button.button-hero { font-size: 14px; height: 46px; line-height: 3.14285714; padding: 0 36px; }
}

// Toggle Box
.hootabt-wrap {
.hootimp-opbox--plugin_reqd,
.hootimp-opbox--plugin_active {
}
.hootimp-opbox--plugin_reqd input + .hootimp-toggle,
.hootimp-opbox--plugin_active .hootimp-toggle {
	background-color: var(--hootaccent-col); opacity: 0.5;
	&:before { background-color: $highlight; -webkit-transform: translateX(13px); -ms-transform: translateX(13px); transform: translateX(13px); }
}
}

/*** Load Processing ***/

.hootimp-loader,
.hootimp-complete  { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.hootimp-loaderror { display: none; margin: 1em -10px 0; font-weight: 500; }
.hootimp-form {
	position: relative;
	&.hootimp-formloader    { .hootimp-loader { display: block; }    .hootimp-noloader { opacity: 0; } }
	&.hootimp-formcomplete  { .hootimp-complete { display: block; }  .hootimp-noloader { opacity: 0; } }
	&.hootimp-formloaderror { .hootimp-loaderror { display: block; }                                   }
}

// 1. Loading
.hootimp-loaderbar {
	width: 100%;
	height: 10px;
	background: #eee;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 8px;
	div { 
		height: 100%;
		width: 20%;
		background: linear-gradient(45deg, $accent 25%, $highlightdark 25%, $highlightdark 50%, $accent 50%, $accent 75%, $highlightdark 75%, $highlightdark);
		background-size: 10px 10px;
		border-radius: 2px 0 0 2px;
		transition: width 0.3s ease;
		animation: hootmove 2s linear infinite;
	}
	@keyframes hootmove {
		0% { background-position: 0 0; }
		100% { background-position: 30px 0; }
	}
}
#hootimp-loadermsg {
	font-size: 14px; line-height: 1.5em;
	span { font-weight: 600; }
	em { font-style: normal; }
	.waitmsg {
		border-top: solid 1px #ddd; padding-top: 10px;
		margin-top: 15px;
		& > div { color: $accent; font-weight: normal; }
	}
	.dashicons-update { display: inline-block; margin-right: 4px; animation: hootspin 2s linear infinite; }
	@keyframes hootspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
}

// 2. Success
.hootimp-complete {
	& > div { display:flex; align-items:center; }
	ol { margin-left: 1em; }
	li { margin-bottom: 8px; }
}
.hootimp-complete-icon {
	display:flex; justify-content:center; align-items:center;
	height: 25px; width: 25px; box-sizing: border-box;
	margin-right: 8px;
	border: 2px solid #fff; border-radius: 50%; border-top-color: #2ed573;
	animation: hootrot 1s forwards linear;
	@keyframes hootrot {
		0% { transform: rotate(0); }
		100% { transform: rotate(1800deg); border: 2px solid #2ed573; }
	}
	&:before {
		content:"\f147"; font-family:"dashicons"; font-weight:400;
		font-size:20px; line-height: 20px; width: 25px;
		color:#2ed573;
		opacity:0;
		transform:rotate(180deg);
		animation:hootspinfadein 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); animation-delay: 1s;
		@keyframes hootspinfadein{
			0% { transform:rotate(180deg); opacity:0; }
			100% { transform:rotate(0); opacity:1; }
		}
	}
}

// 3. Error
.hootimp-loaderror-details {}

// 2.3. Log
.hootimp-show-log {}
.hootimp-load-details {}
.hootimp-form > .hootimp-load-details { display: none; }

/*** jconfirm ***/

.jconfirm.jconfirm-white .jconfirm-bg,
.jconfirm.jconfirm-light .jconfirm-bg { opacity: 0.6; }
.jconfirm-content {
	font-size: 15px; line-height: 1.5em;
	padding: 10px 10px 0;
	h2 { margin-top: 0; }
	ol { margin-bottom: 0; }
	p { font-size: inherit; line-height: inherit; }
	pre { white-space: break-spaces; }
}
.jconfirm .jconfirm-box { max-width: 600px; }
.jconfirm .jconfirm-box .jconfirm-buttons {
	padding: 0 10px 20px;
	button {
		padding: 6px 16px; margin-left: 8px;
		border: solid 1px $accent;
	}
}
.jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button {
	text-transform: none;
	font-weight: normal;
}