html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

.winbox {
	background: transparent;
}

.winbox iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.winbox {
	position: fixed;
	left: 0;
	top: 0;
	transition: width 0.3s, height 0.3s, transform 0.3s;
	transition-timing-function: cubic-bezier(0.3, 1, 0.3, 1);
	will-change: transform, width, height;
	contain: layout size;
	text-align: left;
	touch-action: none;
}

.wb-header {
	display: flex;
	flex-direction: row-reverse;
	width: min-content;
	left: 0;
	top: 0;
	height: var(--tab-height);
	overflow: hidden;
	border-width: 0px;
	border-top-left-radius: var(--curve-radius);
	border-top-right-radius: var(--curve-radius);
}

.wb-title {
	cursor: move;
	height: 100%;
	line-height: calc(var(--tab-height)*1.1);
	align-self: start;
	white-space: nowrap;
	padding-left: 1em;
	/* padding-right: 1em; */
	overflow: hidden;
	text-overflow: ellipsis;
}

.no-close .wb-title {
	padding-right: 1em;
}

.wb-body {

	position: absolute;
	top: var(--tab-height);
	left: 0;
	right: 0;
	bottom: 0;

	overflow: auto;
	-webkit-overflow-scrolling: touch;
	/* overflow-scrolling: touch; */
	will-change: contents;
	contain: strict;

	border-style: solid;
	border-width: var(--border-width);
	border-top-left-radius: 0;
	border-top-right-radius: var(--curve-radius);
	border-bottom-left-radius: var(--curve-radius);
	border-bottom-right-radius: var(--curve-radius);

	margin-top: 0 !important;
	margin-left: 0 !important;
}

.wb-icon {
	float: right;
	height: calc(var(--tab-height)*1.1);
	max-width: 100%;
	text-align: center;
}

.wb-icon * {
	display: inline-block;
	width: var(--tab-height);
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	max-width: 100%;
}

.wb-n, .wb-e, .wb-s, .wb-w, .wb-nw, .wb-ne, .wb-sw, .wb-se {
	position: absolute;
}

.wb-n {
	top: 	calc(2.0*var(--corner-drag));
	left: 	0;
	right: 	0;
	height: calc(0.5*var(--corner-drag));
	cursor: n-resize;
}

.wb-e {
	top: 	calc(2*var(--corner-drag));
	right: 	calc(-1*var(--corner-drag));
	bottom: 0;
	width: 	calc(1.0*var(--corner-drag));
	cursor: e-resize;
}

.wb-s {
	bottom: calc(-1*var(--corner-drag));
	left: 	0;
	right: 	0;
	height: calc(2.0*var(--corner-drag));
	cursor: s-resize;
}

.wb-w {
	top: 	calc(2*var(--corner-drag));
	left: 	calc(0*var(--corner-drag));
	bottom: 0;
	width: 	calc(1.0*var(--corner-drag));
	cursor: w-resize;
}

.wb-nw {
	top: 	calc(2.0*var(--corner-drag));
	left: 	calc(0*var(--corner-drag));
	width: 	calc(1.0*var(--corner-drag));
	height: calc(1.0*var(--corner-drag));
	cursor: nw-resize;
}

.wb-ne {
	top: 	calc(2.0*var(--corner-drag));
	right: 	calc(0*var(--corner-drag));
	width: 	calc( .0*var(--corner-drag));
	height: calc(1.0*var(--corner-drag));
	cursor: ne-resize;
}

.wb-sw {
	bottom: calc(-1*var(--corner-drag));
	left: 	calc(0*var(--corner-drag));
	width: 	calc(2.0*var(--corner-drag));
	height: calc(2.0*var(--corner-drag));
	cursor: sw-resize;
}

.wb-se {
	bottom: calc(-1*var(--corner-drag));
	right: 	calc(-1*var(--corner-drag));
	width: 	calc(2.0*var(--corner-drag));
	height: calc(2.0*var(--corner-drag));
	cursor: se-resize;
}

.wb-min {
	background-image: url("../../images/winbox/min.svg");
	background-size: 0.75em auto;
	background-position: center bottom 11px;
}

.wb-max {
	background-image: url("../../images/winbox/max.svg");
	background-size: 0.75em auto;
}

.wb-close {
	background-image: url("../../images/winbox/close.svg");
	background-size: 0.75em auto;
}

.wb-full {
	background-image: url("../../images/winbox/full.svg");
	background-size: 0.75em auto;
}

.winbox.min .wb-body ~ div,
.winbox.max .wb-body ~ div {
	pointer-events: none;
}

.winbox.max .wb-title {
	cursor: default;
}

.winbox.min .wb-full,
.winbox.min .wb-min {
	display: none;
}

.winbox.min .wb-title {
	cursor: default;
}

.winbox.min .wb-body > * {
	display: none;
}

.max {
	box-shadow: none;
}

.max .wb-body {
	margin: 0 !important;
}

body.wb-drag .winbox {
	transition: none;
}

body.wb-drag iframe {
	pointer-events: none;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 0.85;
	}
}

.no-animation {
	transition: none;
}

.no-shadow {
	box-shadow: none;
}

.no-header .wb-header {
	display: none;
}

.no-header .wb-body {
	top: 0;
}

.no-min .wb-min {
	display: none;
}

.no-max .wb-max {
	display: none;
}

.no-full .wb-full {
	display: none;
}

.no-close .wb-close {
	display: none;
}

.no-resize .wb-body ~ div {
	display: none;
}

.no-move:not(.min) .wb-title {
	pointer-events: none;
}