/*!
 * iikoh
 * development by Mike Repka
 * webberin.dev
 *
 * Licensed MIT for open source use
 *
 * https://iikoh.com
 * Copyright 2024 Mike Repka
 */

:root {
	--black: #191919;
	--white: #fff;
	--gray: #9d9d9d;
	--bg: #f5f5f5;
	--bg-transparent: rgba(245, 245, 245, .5);
	--border-color: #e5e5e5;
	--input-border: #e2e2e2;
	--input-border-hover: #cecece;
	--input-border-active: #cecece;

	--wo-shadow: rgba(109,109,109,.2);
	--wo-white-transparent: rgba(255,255,255,0.8);
	--wo-bg-transparent: rgba(244,244,244,0.8);

	--select-bg: #eee;
	--select-border: #dedede;
	--tab-border: #ebebeb;

	--primary: #ff545f;
	--primary-light: #ff9b6e;
	--primary-dim: #ff004e;

	--success: #47e5af;
	--success-light: #43efa0;
	--success-dim: #4bdbbe;

	--danger: #f2bc9b;
	--danger-border: #f19f8a;

	--gutter: 1rem;
	--wo-gutter: 1rem;
	--gutter-gap: 2rem;
	--border: 1rem;

	--font-size: 0.875rem;
	--wo-font-size: 0.875rem;
}
@media (max-width: 1024px) {
	:root {
		--gutter: 4vw;
		--gutter-gap: 4vw;
	}
}

/* Normalize */
::selection{color: var(--white);background-color: var(--primary)}
html{font-size:16px}
@media (min-width: 320px) and (max-width: 767px) {html{font-size: calc(13px + (16 - 13) * ((100vw - 320px) / (767 - 320)))}}
a{color: var(--wo-primary)}*:focus,*:active,*:hover{outline:none}*,*::before,*::after{box-sizing:border-box}html{font-size:16px}body{margin:0;padding:0}.--empty{border:var(--primary) !important}
* {
	font-family: 'Lato', sans-serif;
}
pre,pre code{padding:0 !important;margin:0 !important;white-space:pre}pre code{background:var(--wo-bg) !important;border-radius: var(--wo-border-radius-input);}pre,pre *{font-family:'Courier New',Courier,monospace}pre code{padding:1rem !important}

.__wo-holder-20,
.__wo-holder-10,
.__wo-holder-5,
.__wo-holder-1,
.__wo-holder-0 {
	display: table;
	width: 100%;
}
.__wo-holder-20 {
	height: calc(var(--gutter)*2);
}
.__wo-holder-10 {
	height: calc(var(--gutter)*1);
}
.__wo-holder-5 {
	height: calc(var(--gutter)*.5);
}
.__wo-holder-1 {
	height: calc(var(--gutter)*.1);
}
.__wo-holder-0 {
	height: 0rem;
}

h1,h2,h3,h4,h5,h6 {
	padding: 0;
	margin: 0;
	display: block;
	margin-bottom: calc(var(--gutter)*.5);
	font-weight: 600;
	color: var(--black);
}
h1 {
	font-size: calc(var(--font-size)*1.5);
}
h2 {
	font-size: calc(var(--font-size)*1.5);
}
h3 {
	font-size: calc(var(--font-size)*1.25);
}
h4 {
	font-size: calc(var(--font-size)*1.15);
}
h5 {
	font-size: calc(var(--font-size)*1);
}
h6 {
	font-size: calc(var(--font-size)*.875);
	font-weight: 400;
}
p {
	padding: 0;
	margin: 0;
	margin-bottom: calc(var(--gutter)*1);
	font-size: var(--font-size);
	color: var(--black);
	line-height: calc(var(--gutter)*1.5);
	max-width: 100%;
	overflow-y: auto;
}
.--nomargin {
	margin: 0 !important;
}

a {
	font-size: var(--font-size);
	color: var(--black);
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}

input {
	font-size: calc(var(--font-size)*1);
	border: 1px solid var(--input-border);
	padding: calc(var(--gutter)*.5) calc(var(--gutter)*.75);
	width: 100%;
	background-color: var(--white);
	color: var(--black);

	border-radius: calc(var(--border)*.5);
	-moz-border-radius: calc(var(--border)*.5);
	-webkit-border-radius: calc(var(--border)*.5);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
input:hover {
	border: 1px solid var(--input-border-hover);
}
input:active {
	border: 1px solid var(--input-border-active);
}

/* WO Grid */
.__wo-row {
	padding: 0;
	width: calc(100% - ( (var(--gutter) *2) + var(--gutter-gap) ) * 2 + (var(--gutter) * .75) );
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.__wo-row {
	width: calc(100% + (var(--gutter) * 1));
	margin-left: calc(var(--gutter) / 2 * -1);
}
.__wo-grid {
	padding: 0;
	margin: 0;
	margin-left: calc((var(--gutter-gap) * 1) - (var(--gutter)*.5));
	margin-right: calc((var(--gutter-gap) * 1) - (var(--gutter)*.5));
	position: relative;
	z-index: 1;
}
.__wo-col-m-0,
.__wo-col-m-1,
.__wo-col-m-2,
.__wo-col-m-3,
.__wo-col-m-4,
.__wo-col-m-5,
.__wo-col-m-6,
.__wo-col-m-7,
.__wo-col-m-8,
.__wo-col-m-9,
.__wo-col-m-10,
.__wo-col-m-11,
.__wo-col-m-12 {
	display: block;
	margin-left: calc(var(--gutter) / 2);
	margin-right: calc(var(--gutter) / 2);
	float: left;
	margin-bottom: var(--gutter);
}
.__wo-col-m-0 {
	width: 0%;
}
.__wo-col-m-1 {
	width: calc(8.333333% - var(--gutter))
}
.__wo-col-m-2 {
	width: calc(16.666667% - var(--gutter))
}
.__wo-col-m-3 {
	width: calc(25% - var(--gutter))
}
.__wo-col-m-4 {
	width: calc(33.333333% - var(--gutter))
}
.__wo-col-m-5 {
	width: calc(41.666667% - var(--gutter))
}
.__wo-col-m-6 {
	width: calc(50% - var(--gutter))
}
.__wo-col-m-7 {
	width: calc(58.333333% - var(--gutter))
}
.__wo-col-m-8 {
	width: calc(66.666667% - var(--gutter))
}
.__wo-col-m-9 {
	width: calc(75% - var(--gutter))
}
.__wo-col-m-10 {
	width: calc(83.333333% - var(--gutter))
}
.__wo-col-m-11 {
	width: calc(91.666667% - var(--gutter))
}
.__wo-col-m-12 {
	width: calc(100% - var(--gutter))
}
.--m-hidden {
	display: none !important
}
.--xs-hidden {
	display: block
}
@media (max-width: 768px) {
	.__wo-row {
		width: calc(100% + (var(--gutter-xs) * 1));
	}
	.__wo-grid {
		margin-left: calc(var(--gutter-xs) * -1);
		margin-right: calc(var(--gutter-xs) * -1);
	}
	.__wo-col-xs-1,
	.__wo-col-xs-2,
	.__wo-col-xs-3,
	.__wo-col-xs-4,
	.__wo-col-xs-5,
	.__wo-col-xs-6,
	.__wo-col-xs-7,
	.__wo-col-xs-8,
	.__wo-col-xs-9,
	.__wo-col-xs-10,
	.__wo-col-xs-11,
	.__wo-col-xs-12 {
		display: block;
		margin-left: var(--gutter-xs);
		margin-right: var(--gutter-xs);
		margin-bottom: var(--gutter-xs);
		float: left;
	}
	.__wo-col-m-1,
	.__wo-col-m-2,
	.__wo-col-m-3,
	.__wo-col-m-4,
	.__wo-col-m-5,
	.__wo-col-m-6,
	.__wo-col-m-7,
	.__wo-col-m-8,
	.__wo-col-m-9,
	.__wo-col-m-10,
	.__wo-col-m-11,
	.__wo-col-m-12 {
		width: calc(100% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-1 {
		width: calc(8.333333% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-2 {
		width: calc(16.666667% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-3 {
		width: calc(25% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-4 {
		width: calc(33.333333% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-5 {
		width: calc(41.666667% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-6 {
		width: calc(50% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-7 {
		width: calc(58.333333% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-8 {
		width: calc(66.666667% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-9 {
		width: calc(75% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-10 {
		width: calc(83.333333% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-11 {
		width: calc(91.666667% - (var(--gutter-xs)*2))
	}
	.__wo-col-xs-12 {
		width: calc(100% - (var(--gutter-xs)*2))
	}
	.--xs-hidden {
		display: none !important
	}
	.--m-hidden {
		display: block !important
	}
}

.__wo-btn-group {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	z-index: 1;
	border: 1px solid var(--input-border);
	width: 100%;

	border-radius: calc(var(--border)*.5);
	-moz-border-radius: calc(var(--border)*.5);
	-webkit-border-radius: calc(var(--border)*.5);
}
.__wo-btn-group button,
.__wo-btn-group a {
	display: block;
	margin: 0;
	font-size: var(--font-size);
	color: var(--black);
	background: var(--white);
	padding: calc(var(--gutter)*.5) calc(var(--gutter)*.75);
	/* border: 1px solid var(--wo-bg-dim); */
	border: none;
	cursor: pointer;
	text-decoration: none;
	font-style: normal;
	font-weight: 400;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;

	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__wo-btn-group button:hover,
.__wo-btn-group a:hover,
.__wo-btn-group input:hover {
	color: var(--wo-black);
	background: var(--white);
}
.__wo-btn-group button:active,
.__wo-btn-group a:active,
.__wo-btn-group input:active,
.__wo-btn-group button.active,
.__wo-btn-group a.active,
.__wo-btn-group input.active {
	color: var(--wo-black);
	background: var(--white);
}

.__wo-btn-group button,
.__wo-btn-group button:hover,
.__wo-btn-group button:active,
.__wo-btn-group button:focus {
	border: none !important;
}
.__wo-btn-group input {
	display: block;
	margin: 0;
	font-size: var(--font-size);
	color: var(--black);
	background: var(--white);
	padding: calc(var(--gutter)*.5) calc(var(--gutter)*.75);
	border: none;

	text-decoration: none;
	font-style: normal;
	font-weight: 400;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__wo-btn-group *:first-child {
	border-radius: calc(var(--border)*.5) 0 0 calc(var(--border)*.5);
	-moz-border-radius: calc(var(--border)*.5) 0 0 calc(var(--border)*.5);
	-webkit-border-radius: calc(var(--border)*.5) 0 0 calc(var(--border)*.5);
}
.__wo-btn-group *:last-child {
	border-radius: 0 calc(var(--border)*.5) calc(var(--border)*.5) 0;
	-moz-border-radius: 0 calc(var(--border)*.5) calc(var(--border)*.5) 0;
	-webkit-border-radius: 0 calc(var(--border)*.5) calc(var(--border)*.5) 0;
}

/* WO Buttons */
.__wo-btn {
	display: inline-block;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size);
	color: var(--black);
	background: var(--select-bg);
	margin: 0;
	padding: calc(var(--font-size) * .5) calc(var(--font-size) * 1.5);
	border: 1px solid var(--select-border);
	cursor: pointer;
	text-decoration: none;
	font-style: normal;
	font-weight: 400;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;
	box-sizing: border-box;

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__wo-btn.--mb {
	margin-bottom: calc(var(--gutter)*.5);
}
.__wo-btn.--border-square {
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.__wo-btn.--border-circle {
	border-radius: calc(var(--border)*10);
	-moz-border-radius: calc(var(--border)*10);
	-webkit-border-radius: calc(var(--border)*10);
}
.__wo-btn:hover {
	color: var(--black);
	background: var(--select-bg);
	border: 1px solid var(--select-border);
}
.__wo-btn:active,
.__wo-btn.active {
	color: var(--black);
	background: var(--select-bg);
	border: 1px solid var(--select-border);
}

.__wo-btn.--outline {
	border-color: var(--black);
	color: var(--black);
	background-color: rgba(0,0,0,0);
}
.__wo-btn.--outline:hover,
.__wo-btn.--outline:focus {
	border-color: var(--black);
	color: var(--white);
	background-color: var(--black);
}
.__wo-btn.--outline:active,
.__wo-btn.--outline.active {
	border-color: var(--gray);
	color: var(--white);
	background-color: var(--gray);
}

.__wo-btn.--disabled,
.__wo-btn[disabled] {
	cursor: not-allowed;
	opacity: .5;
}

.__wo-btn i {
	font-size: inherit;
	margin-left: 0;
}

.__wo-btn.--wo-size-xs,
.__wo-btn.--size-xs {
	padding: calc(var(--font-size) * .35) calc(var(--font-size) * .75);
	font-size: calc(var(--font-size) * .6);
}
.__wo-btn.--wo-size-s,
.__wo-btn.--size-s {
	padding: calc(var(--font-size) * .5) calc(var(--font-size) * 1);
	font-size: calc(var(--font-size) * .75);
}
.__wo-btn.--wo-size-m,
.__wo-btn.--size-m {
	padding: calc(var(--font-size) * .75) calc(var(--font-size) * 1.25);
	font-size: calc(var(--font-size) * 1);
}
.__wo-btn.--wo-size-l,
.__wo-btn.--size-l {
	padding: calc(var(--font-size) * .75) calc(var(--font-size) * 1.5);
	font-size: calc(var(--font-size) * 1.1);
}
.__wo-btn.--wo-size-xl,
.__wo-btn.--size-xl {
	padding: calc(var(--font-size) * 1) calc(var(--font-size) * 1.75);
	font-size: calc(var(--font-size) * 1.25);
}
.__wo-btn.--wo-size-100,
.__wo-btn.--size-100 {
	padding: calc(var(--font-size) * .5) 0;
	width: 100%;
	font-size: calc(var(--font-size) * 1);
}

.__wo-btn.--danger {
	background-color: var(--danger);
	border-color: var(--danger-border);
	color: var(--black);
}
.__wo-btn.--danger:hover {
	background-color: var(--danger-border);
	border-color: var(--danger-border);
	color: var(--black);
}
.__wo-btn.--danger:active {
	background-color: var(--danger);
	border-color: var(--danger-border);
	color: var(--black);
}

.__wo-btn.--success {
	background-color: var(--success);
	border-color: var(--success-light);
	color: var(--black);
}
.__wo-btn.--success:hover {
	background-color: var(--success-light);
	border-color: var(--success-dim);
	color: var(--black);
}
.__wo-btn.--success:active {
	background-color: var(--success-dim);
	border-color: var(--success-dim);
	color: var(--black);
}

label.__wo-btn {

}
label.__wo-btn input {
	position: absolute;
	left: -9999999rem;
}

.__wo-alert {
	display: block;
	position: relative;
	width: 100%;
	font-size: var(--wo-font-size);
	color: var(--wo-black);
	background: var(--select-bg);
	margin: 0;
	margin-bottom: calc(var(--wo-font-size) * .5);
	padding: calc(var(--wo-font-size) * .75) calc(var(--wo-font-size) * 1);
	border: 1px solid var(--input-border);
	font-style: normal;
	font-weight: 400;
	box-sizing: border-box;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: normal;
	text-transform: none;
	text-indent: 0px;
	text-shadow: none;

	border-radius: calc(var(--border)*.5);
	-moz-border-radius: calc(var(--border)*.5);
	-webkit-border-radius: calc(var(--border)*.5);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;

}
.__wo-alert h1,
.__wo-alert h2,
.__wo-alert h3,
.__wo-alert h4,
.__wo-alert h5,
.__wo-alert h6 {
	font-size: var(--wo-font-size);
	margin: 0;
	margin-bottom: calc(var(--wo-font-size) * .5);
	font-weight: 500;
}
.__wo-alert p {
	margin: 0;
	font-size: var(--wo-font-size);
}

.__wo-alert.--primary {
	color: var(--wo-primary-text);
	background-color: var(--wo-primary-bg);
	border-color: var(--wo-primary-light);
}
.__wo-alert.--success {
	color: var(--black);
	background-color: var(--success);
	border-color: var(--success-dim);
}
.__wo-alert.--danger {
	color: var(--black);
	background-color: var(--danger);
	border-color: var(--danger-border);
}
.__wo-alert.--warning {
	color: var(--wo-warning-text);
	background-color: var(--wo-warning-bg);
	border-color: var(--wo-warning-light);
}
.__wo-alert.--info {
	color: var(--wo-info-text);
	background-color: var(--wo-info-bg);
	border-color: var(--wo-info-light);
}

.__wo-alert a {
	color: var(--wo-black);
	text-decoration: underline;
}
.__wo-alert a:hover {
	text-decoration: none;
}
.__wo-alert.--primary a {
	color: var(--wo-primary-text);
}
.__wo-alert.--success a {
	color: var(--wo-success-text);
}
.__wo-alert.--danger a {
	color: var(--wo-danger-text);
}
.__wo-alert.--warning a {
	color: var(--wo-warning-text);
}
.__wo-alert.--info a {
	color: var(--wo-info-text);
}

.__wo-alert .__remove-btn {
	font-size: calc(var(--wo-font-size) * 1.5);
	text-decoration: none;
	color: var(--wo-black);
	line-height: 0;
	letter-spacing: normal;
	position: absolute;
	right: 0;
	top: calc(var(--wo-font-size) * .25);
	padding: calc(var(--wo-font-size) * 1) var(--wo-font-size);
	opacity: .5;

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__wo-alert .__remove-btn:hover {
	opacity: 1;
}
.__wo-alert.--primary .__remove-btn {
	color: var(--wo-primary-text);
}
.__wo-alert.--success .__remove-btn {
	color: var(--wo-success-text);
}
.__wo-alert.--danger .__remove-btn {
	color: var(--wo-danger-text);
}
.__wo-alert.--warning .__remove-btn {
	color: var(--wo-warning-text);
}
.__wo-alert.--info .__remove-btn {
	color: var(--wo-info-text);
}


/* WO Form */
.__wo-form {

}
.__wo-form.--inline {

}

.__wo-form .__data-row {
	display: block;
	margin-bottom: calc(var(--wo-gutter) * 1.5);
}
.__wo-form .__data-row label {
	display: block;
	font-size: calc(var(--wo-font-size)*1);
	font-weight: 400;
	color: var(--wo-gray);
	cursor: pointer;
	margin-bottom: calc(var(--wo-gutter)*.5);
}
.__wo-form .__data-row .__data-control {
	display: block;
}
.__wo-form .__data-row .__data-control.--grid-2,
.__wo-form .__data-row .__data-control.--grid-3,
.__wo-form .__data-row .__data-control.--grid-4 {
	display: grid;
	grid-template-rows: auto;
	column-gap: var(--wo-gutter);
}
.__wo-form .__data-row .__data-control.--grid-2 {
	grid-template-columns: 1fr 1fr;
}
.__wo-form .__data-row .__data-control.--grid-3 {
	grid-template-columns: 1fr 1fr 1fr;
}
.__wo-form .__data-row .__data-control.--grid-3 {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.__wo-form .__data-row .__data-control input {
	
}
.__wo-form .__data-row .__data-control input:hover {
	
}
.__wo-form .__data-row .__data-control input:active,
.__wo-form .__data-row .__data-control input:focus {
	
}
.__wo-form .__data-row .__data-control.__tags {
	margin-bottom: 0;
}
.__wo-form .__data-row .__data-control.__tags ul {

}
.__wo-form .__data-row .__data-control.__tags ul li {

}
.__wo-form .__data-row .__data-control.__tags ul li label {
	
}
.__wo-form .__data-row .__data-control.__tags ul li label span {
	display: block;
	background-color: var(--wo-white);
	border: 1px solid var(--wo-white);
	color: var(--wo-black);
	font-size: calc(var(--wo-font-size) * .875);
	padding: calc(var(--wo-gutter)*.25) calc(var(--wo-gutter)*.75);
	text-decoration: none;

	border-radius: var(--wo-border-radius-circle);
	-moz-border-radius: var(--wo-border-radius-circle);
	-webkit-border-radius: var(--wo-border-radius-circle);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__wo-form .__data-row .__data-control.__tags ul li label input:checked + span {
	background-color: var(--wo-danger);
	border: 1px solid var(--wo-danger);
	color: var(--wo-white);
}
.__wo-form .__data-row .__data-control.__tags ul li label input[type=checkbox] {
	display: inline;
	padding: 0;
	margin: 0;
	border: none;
	width: 0;
	height: 0;
	background: none;
	position: absolute;
	z-index: -1;
	left: -9999999px;
}
.__wo-form .__data-row .__data-control.--picture {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
}
.__wo-form .__data-row .__data-control.--picture .__pict {
	display: block;
	margin-right: calc(var(--gutter)*2);
}
.__wo-form .__data-row .__data-control.--picture .__uplaod {
	display: block;
	width: calc(100% - (var(--gutter) * 5 + var(--gutter) * 2));
}
.__wo-form .__data-row .__data-control.--picture .__uplaod label {
	white-space: nowrap;
	width: auto;
	max-width: calc(var(--gutter) * 10);
	text-align: center;
	margin-bottom: 0;
}
.__wo-form .__data-row .__data-control.--picture .__uplaod [data-alerts] {
	display: block;
}
.__wo-form .__data-row .__data-control.--picture .__uplaod [data-alerts] > div {
	margin-top: calc(var(--gutter)*.5);
	max-width: 60%;
}
.__wo-form .__data-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.__wo-dropdown {
	width: auto;
	box-sizing: border-box;
	display: inline-block;
	border: .1rem solid var(--tab-border);
	background-color: var(--wo-bg-transparent);
	backdrop-filter: saturate(180%) blur(calc(var(--wo-gutter)*1.25));
	-o-backdrop-filter: saturate(180%) blur(calc(var(--wo-gutter)*1.25));
	-moz-backdrop-filter: saturate(180%) blur(calc(var(--wo-gutter)*1.25));
	-webkit-backdrop-filter: saturate(180%) blur(calc(var(--wo-gutter)*1.25));
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	padding: calc(var(--wo-gutter) * .5) 0 !important;
	border-radius: calc(var(--border) * .25);
	-moz-border-radius: calc(var(--border) * .25);
	-webkit-border-radius: calc(var(--border) * .25);
	/* box-shadow: calc(var(--wo-gutter) * .5) calc(var(--wo-gutter) * .5) calc(var(--wo-gutter) * 1) var(--wo-shadow); */
	z-index: 9999;
	text-align: left;
}
.__wo-dropdown.--active {
	opacity: 1;
	visibility: visible;
}
.__wo-dropdown ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.__wo-dropdown ul li {
	/* word-wrap: break-word; */
	white-space: nowrap;
}
.__wo-dropdown ul li a {
	font-size: calc(var(--font-size) * 1);
	text-decoration: none;
	display: block;
	color: var(--black);
	padding: calc(var(--wo-gutter) * .5) calc(var(--wo-gutter) * 1) !important;
	transition: all .15s ease-out;
	-o-transition: all .15s ease-out;
	-ms-transition: all .15s ease-out;
	-moz-transition: all .15s ease-out;
	-webkit-transition: all .15s ease-out;
}
.__wo-dropdown ul li a:hover {
	background-color: var(--primary);
	color: var(--white);
	text-decoration: none !important;
}
.__wo-dropdown ul li a i {
	display: inline-block;
	margin-right: calc(var(--wo-gutter) * 1);
}

/* iikoh styles */

html,body {
	background-color: var(--white);
	color: var(--black);
	overflow-x: hidden;
}
main {
	display: block;
}

.__pict {
	display: block;
	background-color: var(--bg);
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-o-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	border: 1px solid var(--tab-border);
	max-width: calc(var(--gutter)*5);
	width: calc(var(--gutter)*5);
	max-height: calc(var(--gutter)*5);
	height: calc(var(--gutter)*5);
	width: calc(var(--gutter) * 5 + var(--gutter) * 2);

	border-radius: calc(var(--border) * 100);
	-moz-border-radius: calc(var(--border) * 100);
	-webkit-border-radius: calc(var(--border) * 100);
}

main header {
	display: flex;
	justify-content: center;
	background-color: var(--white);
}
main header .__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - var(--gutter-gap)*2);
	max-width: 1920px;
	height: calc(var(--gutter)*4.5);
	margin: 0 calc(var(--gutter-gap)*1);
}
main header > div {
	/* border: 1px solid red; */
}
main header .__logo a img {
	width: calc(var(--gutter)*7.5);
}
main header .__link {
	width: calc(var(--gutter)*20);
	text-align: right;
	margin: 0 3rem;
}
main header .__link a {
	font-weight: 600;
	text-decoration: none;
	font-size: calc(var(--font-size)*1.25);
}
main header .__link a:hover {
	text-decoration: underline;
}
main header .__search {
	text-align: center;
	width: calc(100% - (var(--gutter)*(7.5 + 20 + 20 + 11)));
}
main header .__search input {
	background-color: var(--bg);
	border-color: var(--input-border-hover);
	/* width: calc(var(--gutter)*20); */
	width: 100%;

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);
}
main header .__create-btn {
	width: calc(var(--gutter)*20);
	text-align: left;
	margin: 0 3rem;
}
main header .__create-btn .__wo-btn {

}
main header .__icons {
	width: calc(var(--gutter)*11);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
main header .__icons a {
	display: block;
	margin-left: calc(var(--gutter)*1.5);
}
main header .__icons a:first-child {
	margin-left: 0;
}
main header .__icons a img {

}
main header .__icons a:last-child img {
	width: calc(var(--gutter)*2.5);
	height: calc(var(--gutter)*2.5);
	border: 1px solid var(--border-color);

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);
}

.__login {

}
.__login .__login-panel {
	position: relative;
	background-color: var(--bg);
	color: var(--black);
	border: 1px solid var(--border-color);
	padding: calc(var(--gutter)*2);

	border-radius: calc(var(--border)*1);
	-moz-border-radius: calc(var(--border)*1);
	-webkit-border-radius: calc(var(--border)*1);
}
.__login .__login-panel .__oauth {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
}
.__login .__login-panel .__oauth a {
	display: block;
	margin-right: calc(var(--gutter)*1.75);
	opacity: 0.75;

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__login .__login-panel .__oauth a:hover {
	opacity: 1;
}
.__login .__login-panel .__oauth a img {
	width: calc(var(--gutter)*1.5);
}
.__login .__login-panel .__email button i {
	color: var(--primary);
}
.__login .__login-panel .__bg-layer {
	position: absolute;
	background-attachment: scroll;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: transparent;
	background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	z-index: -1;
}
.__login .__login-panel .__bg-layer.--layer-1 {
	width: 15.75rem;
	height: 21.875rem;
	top: 4rem;
	left: -12rem;
	opacity: .8;
}
.__login .__login-panel .__bg-layer.--layer-2 {
	width: 21rem;
	height: 18.75rem;
	top: 5rem;
	right: -17rem;
	opacity: .8;
}
@media (max-width: 1024px) {
	.__login .__login-panel	{
		background-color: var(--bg-transparent);

		backdrop-filter: saturate(180%) blur(calc(var(--gutter)*1.25));
		-o-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*1.25));
		-moz-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*1.25));
		-webkit-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*1.25));
	}
}

.__xhr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: var(--bg-transparent);
	color: var(--black);
	z-index: 999;
	top: 0;
	left: 0;

	backdrop-filter: saturate(180%) blur(calc(var(--gutter)*.25));
	-o-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*.25));
	-moz-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*.25));
	-webkit-backdrop-filter: saturate(180%) blur(calc(var(--gutter)*.25));

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;

	border-radius: calc(var(--border)*1);
	-moz-border-radius: calc(var(--border)*1);
	-webkit-border-radius: calc(var(--border)*1);

	opacity: 0;
	visibility: hidden;
}
.__xhr.--active {
	opacity: 1;
	visibility: visible;
}

.__radio-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: var(--select-bg);
	border: 1px solid var(--select-border);

	border-radius: calc(var(--border)*.75);
	-moz-border-radius: calc(var(--border)*.75);
	-webkit-border-radius: calc(var(--border)*.75);
}
.__radio-group label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% / 3);
	padding: calc(var(--gutter)*.25) calc(var(--gutter)*.25);
	cursor: pointer;
}
.__radio-group label input {
	display: none;
}
.__radio-group label span {
	display: block;
	width: 100%;
	font-weight: 400;
	text-align: center;
	color: var(--gray);
	padding: calc(var(--gutter)*.5) 0;
	background-color: transparent;

	border-radius: calc(var(--border)*.5);
	-moz-border-radius: calc(var(--border)*.5);
	-webkit-border-radius: calc(var(--border)*.5);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;
}
.__radio-group label input:checked + span {
	font-weight: 400;
	color: var(--black);
	background-color: var(--white);
}

article {
	display: flex;
	justify-content: center;
	background-color: var(--white);
}
article .__wrapper {
	width: calc(100% - var(--gutter-gap)*2);
	max-width: 1920px;
	margin: 0 calc(var(--gutter-gap)*1);
	height: auto;
	position: relative;
}
article .__wrapper.--box {
	background-color: var(--bg);
	border: 1px solid var(--input-border);
	padding: calc(var(--gutter)*1.875);
	
	min-height: calc(100vh - (var(--gutter)*4.5) - (var(--gutter)*2));
	height: auto;
	/* overflow-x: hidden;
	overflow-y: auto; */
	margin-bottom: calc(var(--gutter)*2);

	border-radius: calc(var(--border)*1);
	-moz-border-radius: calc(var(--border)*1);
	-webkit-border-radius: calc(var(--border)*1);
}
article .__wrapper.--box.--fixed {
	padding-bottom: 0;
}
/* article .__wrapper.--box::before,
article .__wrapper.--box::after {
	content: '';
	display: block;
	margin: 0 auto;
	position: fixed;
	width: calc(100% - var(--gutter-gap)*2 - 2px);
	height: calc(var(--gutter)*1.875);
	left: 0;
	right: 0;
}
article .__wrapper.--box::before {
	top: calc(var(--gutter)*4.5 + 1px);
	background: rgba(245,245,245,0);
	background: linear-gradient(180deg, rgba(245,245,245,1) 10%, rgba(245,245,245,0) 100%);

	border-radius: calc(var(--border)*1) calc(var(--border)*1) 0 0;
	-moz-border-radius: calc(var(--border)*1) calc(var(--border)*1) 0 0;
	-webkit-border-radius: calc(var(--border)*1) calc(var(--border)*1) 0 0;
}
article .__wrapper.--box::after {
	bottom: calc(var(--gutter)*2 + 1px);
	background: rgba(245,245,245,0);
	background: linear-gradient(0deg, rgba(245,245,245,1) 10%, rgba(245,245,245,0) 100%);

	border-radius: 0 0 calc(var(--border)*1) calc(var(--border)*1);
	-moz-border-radius: 0 0 calc(var(--border)*1) calc(var(--border)*1);
	-webkit-border-radius: 0 0 calc(var(--border)*1) calc(var(--border)*1);
} */

.__form-fixed {
	width: calc(var(--gutter)*40);
	margin: 0 auto;
	height: 100%;
}
.__form-fixed .__form-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: calc(var(--gutter)*0);
	height: calc(var(--gutter)*2.812);
	position: relative;
	z-index: 10;
}
.__form-fixed .__form-header > div {
	margin-right: calc(var(--gutter)*1.5);
}
.__form-fixed .__form-header > button:last-child {
	margin-left: calc(var(--gutter)*1.5);
}
.__form-fixed .__form-body {
	z-index: 9;
	display: block;
	width: 100%;
	height: auto;
	overflow: auto;
	position: relative;
	padding-top: calc(var(--gutter)*2);
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.__form-fixed .__form-body::-webkit-scrollbar { 
	display: none;
}
.__form-fixed .__form-body::before,
.__form-fixed .__form-body::after {
	content: '';
	display: block;
	margin: 0 auto;
	position: fixed;
	width: calc(var(--gutter)*40);
	height: calc(var(--gutter)*1.875);
	left: 0;
	right: 0;
}
.__form-fixed .__form-body::before {
	top: calc(var(--gutter)*4.5 + var(--gutter)*2.812 + var(--gutter)*2 - 2px);
	background: rgba(245,245,245,0);
	background: linear-gradient(180deg, rgba(245,245,245,1) 10%, rgba(245,245,245,0) 100%);
}
.__form-fixed .__form-body::after {
	bottom: calc(var(--gutter)*2 + 1px);
	background: rgba(245,245,245,0);
	background: linear-gradient(0deg, rgba(245,245,245,1) 10%, rgba(245,245,245,0) 100%);
}
.__form-header.--profile-tabs {
	width: calc(var(--gutter)*30);
}

.__wo-tab-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background-color: var(--white);
	border: 1px solid var(--tab-border);

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);
}
.__wo-tab-header a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% / 3);
	padding: calc(var(--gutter)*.25) calc(var(--gutter)*.25);
	cursor: pointer;
	text-decoration: none;
}
.__wo-tab-header a:hover {

}
.__wo-tab-header a.--active {

}
.__wo-tab-header a span {
	display: block;
	width: 100%;
	font-weight: 400;
	font-size: calc(var(--font-size)*1);
	text-align: center;
	color: var(--gray);
	padding: calc(var(--gutter)*.5) 0;
	background-color: transparent;
	border: 1px solid transparent;

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);

	transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-webkit-transition: all .3s ease-out;	
}
.__wo-tab-header a.--active span {
	font-weight: 400;
	color: var(--black);
	background-color: var(--bg);
	border: 1px solid var(--input-border-hover);
}
.__wo-tab-content {

}
.__wo-tab-content > section {
	display: none;
}
.__wo-tab-content > section.--active {
	display: block;
}

.__wrapper .--box {
	background-color: var(--bg);
	border: 1px solid var(--input-border);
	padding: calc(var(--gutter)*1.875);
	
	min-height: calc(100vh - (var(--gutter)*4.5) - (var(--gutter)*2));
	height: auto;
	/* overflow-x: hidden;
	overflow-y: auto; */
	margin-bottom: calc(var(--gutter)*2);

	border-radius: calc(var(--border)*1);
	-moz-border-radius: calc(var(--border)*1);
	-webkit-border-radius: calc(var(--border)*1);
}
.__wrapper .--profile {
	display: flex;
	min-height: calc(100vh - (var(--gutter)*4.5) - (var(--gutter)*2));
	height: auto;
	align-items: flex-start;
	justify-content: space-between;
	flex-direction: column;
}
.__wrapper .--profile .__body {
	width: 100%;
}
.__wrapper .--profile .__body .__profile {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}
.__wrapper .--profile .__body .__profile .__pict {
	display: block;
	margin-right: calc(var(--gutter)*1);
}
.__wrapper .--profile .__body .__profile .__name {
	display: block;
	width: calc(100% - (var(--gutter)*5 + var(--gutter)*1));
}
.__wrapper .--profile .__body .__profile .__name strong {
	display: block;
	font-size: calc(var(--font-size) * 1.286);
	line-height: calc(var(--font-size)*2);
	padding-top: calc(var(--gutter)*1.25);
}
.__wrapper .--profile .__body .__profile .__name span {
	display: block;
	font-size: calc(var(--font-size) * 1);
	color: var(--gray);
}
.__wrapper .--profile .__body .__profile .__name span textarea {
	font-size: calc(var(--font-size) * 1);
	color: var(--black);
	border: none;
	padding: 0;
	width: 100%;
	background-color: transparent;
	color: var(--black);
	cursor: text;
	max-width: calc(100% - var(--gutter)*1);
	width: 100%;
	max-height: calc(var(--gutter)*2.5);
	height: 100%;
	resize: none;
	overflow: hidden;
}
.__wrapper .--profile .__body .__profile .__name span textarea.--disabled {
	border: none;
	background-color: transparent;
	padding: 0;
	cursor: pointer;
	color: var(--gray);
}
.__wrapper .--profile .__body .--noty {
	font-size: var(--font-size);
	color: var(--black);
}
.__wrapper .--profile .__footer {

}
.__wrapper .--profile .__footer span {
	color: var(--gray);
	font-size: var(--font-size);
}

.__wrapper .--profile .__body .__location {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	font-size: calc(var(--font-size)*1);
}
.__wrapper .--profile .__body .__location img {
	display: block;
	margin-right: calc(var(--gutter)*.5);
}

.__wrapper .--profile .__body .__company {
	line-height: calc(var(--font-size)*1.5);
}
.__wrapper .--profile .__body .__company span {
	font-size: calc(var(--font-size)*1);
	display: block;
}
.__wrapper .--profile .__body .__company a {
	display: inline-block;
	color: var(--gray);
}

.__wrapper .--profile .__body .__links {
	width: calc(var(--gutter)*15);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: auto;
	column-gap: calc(var(--gutter)*.5);
	row-gap: calc(var(--gutter)*.5);
}
.__wrapper .--profile .__body .__links a {
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
}
.__wrapper .--profile .__body .__links a img {
	width: calc(var(--gutter)*1.5);
}

.__profile-grid {

}
.__profile-grid .__item {
	background-color: var(--white);
	border: 1px solid var(--tab-border);
	height: calc(var(--gutter)*16);

	border-radius: calc(var(--border)*1);
	-moz-border-radius: calc(var(--border)*1);
	-webkit-border-radius: calc(var(--border)*1);
}
.__profile-grid .__item.-blank {
	
}
.__profile-grid .__item .__add {
	width: 100%;
	height: calc(var(--gutter)*16);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	flex-direction: column;
}
.__profile-grid .__item .__add img {
	position: relative;
	background-color: var(--bg);
	border: 1px solid var(--tab-border);
	width: calc(var(--gutter)*4);
	height: calc(var(--gutter)*4);
	padding: calc(var(--gutter)*.75);
	margin-bottom: calc(var(--gutter)*3);
	transform: translateY(calc(var(--gutter)*1));

	border-radius: calc(var(--border)*100);
	-moz-border-radius: calc(var(--border)*100);
	-webkit-border-radius: calc(var(--border)*100);
}
.__profile-grid .__item .__add span {
	position: relative;
	margin-bottom: calc(var(--gutter)*3);
	transform: translateY(calc(var(--gutter)*1));
	font-size: calc(var(--font-size)*1);
	height: calc(var(--gutter)*4);
	padding: calc(var(--gutter)*.75);
	color: var(--gray);
	text-align: center;
}
.__profile-grid .__item .__add button {
	position: relative;
	transform: translateY(calc(var(--gutter)*1));
	/* position: absolute;
	margin: 0 auto;
	bottom: calc(var(--gutter)*2); */
}