/*togglebox*/
.togglebox{position: relative; margin-top: var(--padding-v); margin-bottom: var(--padding-v)}

.toggleHead {cursor:pointer;}
.toggleHead, .togglebox.showicon .toggleHead i svg{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;}
.toggleHead>:last-child{margin-bottom: 0}

.togglebox.showicon .toggleHead {padding-left:3em; position: relative;}
.togglebox.showicon .toggleHead i{ display: block; position: absolute; left: 0; top:0;}
.togglebox.showicon .toggleHead i svg{background-color: hsl(var(--color-link)); color: hsl(var(--color-light));}
.togglebox.showicon .toggleHead.has-background{padding-left:calc(var(--padding-v) + 3em)}
.togglebox.showicon .toggleHead.has-background i{left:var(--padding-v); top:var(--padding-h);}
.togglebox.showicon.right .toggleHead {padding-right:2em; padding-left:0}
.togglebox.showicon.right .toggleHead i{right: 0; left: auto;}

.togglebox.showicon.right .toggleHead.has-background{padding-right:calc(var(--padding-v) + 3em); padding-left:var(--padding-v) }
.togglebox.showicon.right .toggleHead.has-background i{right: var(--padding-v); left: auto; }

.togglebox.showicon:not(.init):hover .toggleHead i svg,.togglebox.on.showicon .toggleHead i svg{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);}

.togglebox .toggleCont>:first-child:before{content:'';display: block;height:1px;}

.togglebox .toggleCont, .togglebox .toggleCont.has-background {
	display:block;
	max-height:0px;
	overflow:hidden;
	padding-top:0;
	padding-bottom: 0;
	-webkit-transition: all 0.8s cubic-bezier(0,1,0,1);
	-moz-transition: all 0.8s cubic-bezier(0,1,0,1);
	-ms-transition: all 0.8s cubic-bezier(0,1,0,1);
	-o-transition: all 0.8s cubic-bezier(0,1,0,1);
	transition: all 0.8s cubic-bezier(0,1,0,1);
}
.togglebox:not(.init):hover .toggleCont, .togglebox.on .toggleCont{
	display:block;
	max-height:4000px;
	padding-top:var(--padding-v);
	padding-bottom:var(--padding-v);
	-webkit-transition: all 0.8s cubic-bezier(1,0,1,0);
	-moz-transition: all 0.8s cubic-bezier(1,0,1,0);
	-ms-transition: all 0.8s cubic-bezier(1,0,1,0);
	-o-transition: all 0.8s cubic-bezier(1,0,1,0);
	transition: all 0.8s cubic-bezier(1,0,1,0);
}
[class*="editor"] .toggleCont{max-height:4000px !important}