::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track{ border-radius: 4px; }

div.controls::-webkit-scrollbar-thumb { background: #143f5d; }
div.controls::-webkit-scrollbar-track { background: #5081a4; }

::-webkit-scrollbar-thumb { background: #232323; }
::-webkit-scrollbar-track { background: #fff; }

div.interface { box-shadow: 0 0 10px 0px #000; }

div.interface,
div.light-boxes{
	min-width: 412px;
	max-width: 1366px;
	min-height: 100vh;
	margin: 0 auto;
}

div.light-boxes{ right:0; }

body, body * {margin:0; padding: 0; }

span{ display: inline-block; }

ul{ list-style-type: none; }

div.run{
	border-top: 2px solid #136eae;
	border-bottom: 2px solid #062337;
}

div.run div.minview div.min-slide{ background: #e2e6e9; }
div.viewopt{ background: #093453; }
div.run div.runtop{ background: #0f5485; }
div.run div.config.slide div.slideconf{ border-left: 3px solid #0e5181; }

div.run div.floatconf{ background: #e0e6eb; border: 10px solid #33a1cc; color: #132735; font-weight: 900; }

div.run div.floatconf:before{ background: #33a1cc; }
div.run div.floatconf:after{ background: #e0e6eb; }

div.viewopt span:not(.del):not(.sclose){ filter: drop-shadow(2px 2px 2px #000) }


div.start {
	margin: 110px 0 0 0;
    height: 300px;
    background: #0e2e44;
	width: calc(100% - 45px);
    float: left;
}

div.start h1{
	text-align: center;
	font-size: 4em;
    color: #fff;
	padding: 40px 0 0 0;
	margin: 0 0 28px 0;
	}

div.start button {
    margin: 0 auto;
    display: block;
    padding: 10px 60px;
    font-size: 1.8em;
    background: #2b7ab1;
    color: #fff;
    border: 0;
    border-radius: 3px;
    text-transform: uppercase;
}

div.forms {
	height: 100vh;
    width: 45px;
    background: #000;
	zoverflow: hidden;
    float: left;
}

div.forms h2 { display: none; }

div.forms li{
	color: #fff;
    height: 65px;
    width: 40px;
    margin: 0 auto 10px;
	overflow: hidden;
	text-align: center;
    padding: 6px 0 0;
}

div.forms li.active {

	background: #24628d;
    border: 1px solid #174869;
    border-radius: 4px;

}

div.forms img{ width: 32px; }

div.new,div.run{ display: none; }

div.light-boxes{
	
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.5);
	
}

div.light-boxes div.new,
div.light-boxes div.run{ display: block; }

div.new{
	height: 450px;
    width: 66%;
    background: #fff;
    margin: 80px auto 0;
    border-radius: 6px;
	overflow: hidden;
	position: relative;
}

div.new.name div.form-name{ transform: translate(0, 0); }

div.new div.form-name{
	
	z-index: 2;
	position: absolute;
	height: inherit;
    width: 100%;
    background: #1a4563;
	overflow: hidden;
	transform: translate(-100.1%, 0);
	transition: transform 1s ease;

}

div.new div.form-name div{
	display: table;
    margin: 100px auto 30px;
	}

div.new div.form-name h2{ 

    font-size: 2em;
    margin: 0 0 34px 0;
	color: #fff;

}

div.new div.form-name input{

    display: block;
    width: 100%;
    height: 36px;
	margin: 0 0 14px 0;
	font-size: 1.4em;
	text-align: center;

}

div.new div.form-name button{

	padding: 8px 48px;
    font-size: 1.3em;
    margin: 0 auto;
    display: block;
    background: #ffffff;
    border: 1px solid #828282;
    border-radius: 4px;
    text-transform: uppercase;

}

div.new.full div.controls{
	overflow: hidden;
	width: 0;
}

div.controls{
	height: inherit;
	width: 32.1%;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
    background: #24628d;
	transition: width 1s ease;
}

div.new.elements div.elm{ width: auto; height: auto; }
div.elm{
	width: 0;
	height: 0;
	overflow: hidden; 
}


div.elm ul li{
	float: left;
    height: 78px;
    width: 26%;
    padding: 8px;
    position: relative;
    margin: 2px;
    border-radius: 6px;
}

div.elm li.last{ background: #0d2f46; }

div.elm li img{

    width: 80%;
    display: block;
    margin: 5px auto 0;

}

div.elm li span{
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
}

div.new.options div.opt{ width: auto; height: auto; }

div.opt{
	width: 0;
	height: 0;
	overflow: hidden;
	}

div.opt{ width: 86%; }

div.opt.field-styles .field{ width: 100%; }
div.opt.field-styles .field.check{
	width: 30px;
    margin: 0;
    float: right;
	}

div.opt.field-styles div[id*=div-]{ width: 90%; margin: 0 auto 18px; }
div.opt.field-styles label{ margin: 0 0 10px 0; color: #fff; min-height: 0; }
div.opt.field-styles .field.radio{ width: 24px; height: 24px; }

div.opt div.field-options{ display: none; }
div.opt div.form-options{ margin-top: 205px; }

div.new.options.allow div.opt div.field-options{ display: block; }
div.new.options.allow div.opt div.form-options{ margin-top: unset; }

div.opt div.form-options span{

	display: block;
    text-align: center;
    color: #fff;
    font-size: 1.3em;
    background: #134365;
    padding: 8px 0;

}

div.opt div.form-options div.broker{ display:none; }

div.opt div.form-options div.section{ height: 0; overflow: hidden; }

div.json + div[id*=div-text]{ display: none; }
div.json.allow + div[id*=div-text]{ display: block; }

div.opt div.editable { max-height: 92px; overflow: auto; }

div.new.options.form div.form-options div.section{ height: auto; overflow: hidden; }

div.view div.viewhide{
    position: absolute;
    height: 95px;
	font-size:0;
    width: 38px;
    top: calc(50% - 64px);
    left: 0;
	z-index:1;
}

div.view div.viewhide span{
	background: #103650;
    border-radius: 14px;
    padding: 8px 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0px 0 -15px 0;
}

div.view div.viewhide span img { width: 20px; transition: transform .5s ease; }
div.view div.viewhide span:nth-child(3) img { transition-delay: .9s; }
div.view div.viewhide span.active img { transform: rotate(900deg); }
 
div.new.full div.view{ transition: width 1.1s ease; width: 100%; }
 
div.view{ 
	height: inherit;
	width: 67.9%;
	float: left;
	position:relative;
	transition: width .9s ease;
	}
	
	
div.view div.viewform{
	height: inherit;
    overflow-y: auto;
    overflow-x: hidden;
} 

div.view div.save{ 
padding: 15px 0;
position: absolute;
bottom: 0;
width: 100%;
background: #2c2d2d;
height: 40px;
z-index: 1;
}

div.view div.save div:nth-child(1){ padding-top: 3px; } 
div.view div.save div:not(.loader){ 
	display: table;
	width: auto;
	margin: 0 auto;
	vertical-align: top;
	}
 
div.view div.save button{ 
	padding: 6px 18px;
	font-size: 16px;
	background: #fff;
    border: 1px solid;
    border-radius: 4px;
	}
	
div.view div.save button:nth-of-type(1){ margin: 0 15px 0 0; }


div.view div.save.saved div:nth-child(2){ height: 40px; }
div.view div.save div:nth-child(2){ margin-left: 40px; width: 40px; height: 0; overflow: hidden; display: none; }

div.view div.save span.run{

	background: url("img/play.png") no-repeat 0 0/100% 100%;
    height: 40px;
    width: 40px;
    font-size: 0;
	vertical-align: middle;

}
 

form.field-styles{
	margin: 0 auto;
	width: 85%;
	padding: 40px 0 100px;
	}

.field-styles div.active{ outline: 2px solid lightskyblue; }
.field-styles div.submit-section div[id*=title]{ display: none; }
.field-styles div[id*=div-]{
margin: 0 0 18px 0;
min-height: 30px;
}

.field-styles label,
.field-styles .field,
.field-styles h2,
.field-styles h3{ display: inline-block; vertical-align: top; min-height: 32px; min-width: 38px; }

.field-styles label{
	min-width: 40px;
	width: 160px;
    font-weight: 900;
    font-size: 1.05em;
    position: relative;
    top: 5px;
	margin: 0 10px 0 0;
}
     
.field-styles .field{ min-width: 20px; width: 250px; border: 1px solid #a9a9a9; box-sizing: border-box; }

.field-styles .field.check{ width: 30px; margin: 0 10px 0 160px; }
     
.field-styles input{     
	height: 30px;
	display: inline-block;
    vertical-align: top;
	}
	
x-file{ display: inline-block; height: 30px; width: 100px; text-align: center; }
x-file x-archive{ display:block; height:inherit; width: inherit; padding-top: 5px; }
x-file.field input{ display:none; }

x-hidden[id*=hidden].field{
	padding-top: 5px;
	text-align: center;
    font-weight: 900;
    border: 0;
	margin-left: calc(75% - 268px);
}

x-line{
	height: 30px;
    width: 200px;
    margin-left: calc(75% - 218px);
    border: 0;
	display: inline-block;
	font-size: 0;
}

x-line x-stroke{
	border: inherit;
	display: inherit;
	width:inherit;
	border-bottom: 1px solid #737373;
	height: 50%;
}

	
div.run div.broker,
div.broker:first-child{ display: none; }

x-broker{
	height: 30px;
    width: calc(100% - 18px);
	font-size: 0;
	opacity: 0.2;
	display:block;
}

x-broker:after{
	background: url("img/separator.png") 0px 0px / 10% 100% repeat-x;
    display: block;
    width: 98%;
    height: 26px;
    content: "#";
    margin: 0 auto;
    font-size: 0;
}
	
.field-styles span.section-del{
	
	height: 15px;
    width: 15px;
    background: url("img/arrow-down.png") no-repeat 0 0/100%;
    float: right;

}

.field-styles span.del{
    height: 18px;
    width: 18px;
	font-size: 0;
    background: url("img/del.png") no-repeat 0 0/100% 100%;
	vertical-align: text-bottom;
	float: right;
	position: relative;
    top: 6px;
}

div.edge.activate{
   display: inline-block;
   margin: 0;
   outline: 2px solid dodgerblue;
   outline-offset: 4px;
   position: relative;
   vertical-align: top;
}

div.edge.sep{
	height: 8px;
	width: 8px;
	margin: 0;
	min-height: auto;
	display: inline-block;
	vertical-align: bottom;
	}

:not(.label)+div.edge.sep{ display: none; }

div.edge.activate span.edge-span:after{
    content: "#";
    font-size: 0;
    display: inline-block;
    height: 8px;
    width: 8px;
    background: #154d73;
    border-radius: 10px;
    position: absolute;
    top: calc(50% - 4px);
	margin: 0 auto;
    left: 0;
    right: 0;
}

div.edge.activate span.edge-span{
    height: 100%;
    width: 10px;
	position:absolute;
	z-index: 1;
}

div.edge.activate span.edgeMove{
    padding: 0 10px;
    border: 1px solid #0d4165;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    height: 18px;
    position: absolute;
    bottom: calc(100% - 14px);
    background: #24628d;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-top: 0;
}

div.edge.activate span.edgeMove:after{

    height: 11px;
    width: 11px;
    background: url("img/move.png") no-repeat 0 0/100% 100%;
    border-radius: 0;
    top: calc(50% - 5px);
	
}

div.edge.activate span.edgeL{
    right: 100%;
    top: 0%;
}

div.edge.activate span.edgeR{
	left: 100%;
    top: 0%;
}

div.edge.activate span.edgeB{
	top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
	width: 100%;
    height: 10px;
    text-align: center;
}

span.close.button{

	right: 19% !important;
    top: 15% !important;
    height: 30px;
    width: 30px;
    font-size: 0;
    background: #e20000;
	position: absolute;
	top:0;
	right: 0;

}

div.new+span.close.button{ 
	right: 19% !important;
    top: 15% !important;
	}
	
div.run+span.close.button{
	right: 10% !important;
    top: 10% !important;
	}

div.run { 

    width: 90%;
    margin: 6vh auto 0;
    background: #fff;
    height: 567px;
	border-radius: 4px;
    position: relative;
}

div.run div.runtop{ height: 25px; }

div.run div.viewform{

    height: 436px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;

}

div.run form{  display: table; width: auto; margin: 0; }

div.run div.section.active{ outline: none; }

div.run div.section div[id*=div-hidden],
div.run div.section span.section-del{ display: none; min-height:0; }

div.viewopt{

	position: relative;
    height: 105px;
	padding: 1px 0 0;

}

div.run div.minview{
	float: left;
	height: inherit;
	width: calc(100% - 193px);
}

div.run div.minview div.min-slide{

    margin: 2px 0 0;
    width: 81.28%;
	overflow: hidden;
    height: 99px;
	border: 1px solid #1e225a;
    border-top: 0;
    border-bottom: 0;
	float: right;

}

div.run div.minview div,
div.run div.minview ul{ height: inherit; }

div.run div.minview ul{ margin: 0 auto; }

div.run div.minview ul li.active{
    margin-top: 5px;
    padding: 34px 0;
}

div.run div.minview ul li + li{ margin-left: 25px; }

div.run div.minview ul li{

    display: inline-block;
	vertical-align: top;
    background: #fff;
    width: 110px;
    margin-top: 10px;
    text-align: center;
    padding: 30px 0;
    font-weight: 900;
    text-transform: uppercase;
	box-shadow: 0px 0px 3px #000;

}

div.run div.config{
	float: left;
    margin: 0 5.6% 0 0;
    margin: 0;
	position:relative;
	height: inherit;
	background: inherit;
}

div.run div.config.slide div.slideconf{ right: 105px; width: 148px; }

div.run div.config.return div.slideconf{ right: 100%; padding-left: 16px; }

div.run div.config.float div.slideconf{ overflow: visible; }

div.run div.config.float div.floatconf{ display: block; z-index: 1; }

div.run div.slideconf>div{ width: 148px; position: relative; }
div.run div.slideconf{

	width: 0;
	overflow: hidden;
	transition: width 1s, right 1s;
	position: absolute;
	right: 105px;
	height: calc(100% - 6px);
	margin-top: 2px;
	background: inherit;
	padding: 0 0 0 20px;

}

div.run div.floatconf{

	position: absolute;
    bottom: 54px;
	border-radius: 4px;
	display: none;
	padding: 10px;
	font-size: 1.04em;
}
div.run div.floatconf span.sclose{

    height: 14px;
    width: 14px;
    margin: 0;
    float: right;
    background: url("img/del.png") no-repeat 0 0/100%;
    position: relative;
    left: 6px;

}

div.run div.floatconf:before{ top: calc(100% + 5px); }
div.run div.floatconf:after{ top: calc(100% - 5px); }

div.run div.floatconf:before,
div.run div.floatconf:after{

	display: inline-block;
    content: "#";
    height: 10px;
    width: 10px;
    position: absolute;
    font-size: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
	transform: rotate(45deg);

}

div.floatconf.field-styles label{ margin: 0 0 12px; }
div.floatconf.field-styles div{ margin: 0 0 5px 0; }
div.floatconf.field-styles .field{ width: 225px; margin: 0; }
div.floatconf.field-styles .check{ min-width: 18px; width: 18px; }

div.floatconf.field-styles h2{ margin: 18px 0 30px 0; width: 100%; text-align: center; }

div.run div.config.autofill label,
div.run div.config.autofill .field{ display: block; width: 100%; text-align: center; }

div.run div.config.autofill x-dropdown{ height: 75px; overflow-y: auto; }

div.run div.config.autofill x-dropdown li + li:last-child{ display: none; }

div.run div.config.autofill x-dropdown span.del{ height: 10px; width: 10px; margin: 0; top: 5px; right: 5px; }

div.run div.config.autofill div#div-text1 { min-height: 0; }

div.run div.config.autofill div#div-text1 label,
div.run div.config.autofill div#div-text1 a{
	text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 100;
    color: #006d8f;
	display: inline-block;
    width: auto;
    text-align: center;
	top: unset;
	vertical-align:top;
}

div.run div.config.autofill div#div-text1 .field{
	min-height: 0;
	height:0;
	border-width: 0;
	opacity: 0;
	transition: height .4s, opacity .3s;
	transition-delay: .3s, 0s; 
	}

div.run div.config.autofill div#div-text1 label{ width: 100%; margin: 0; min-height:0; }	

div.run div.config.autofill div#div-text1 a{ font-size: 0; }

div.run div.config.autofill div#div-text1.save label { width: auto; margin: 0 18px 0 23%; }

div.run div.config.autofill div#div-text1.save a{ font-size: 0.7em; }
	
div.run div.config.autofill div#div-text1.save .field{
	height:30px;
	border-width: 1px;
	opacity: 1;
	transition: height .4s, opacity 1s;
	transition-delay: 0s, .4s;
	}

div.run div.config.sendconf label{ width:205px; }

div.run div.config.sendconf div#div-text1{ display: none; }

div.run div.config.export label{ width:180px; margin: 0; }

div.run div.config.autofill div.floatconf{ left: auto; right: -15%; width: 245px; }
div.run div.config.sendconf div.floatconf{ right: auto; left: -40%; }
div.run div.config.export div.floatconf{ right: auto; left: -10%; }

div.run div.config.sendconf div.floatconf,
div.run div.config.export div.floatconf{ padding: 10px 18px 20px; }

div.viewopt span{

    height: 36px;
    width: 36px;
    font-size: 0;
    margin: 33px 0 0 10px;
    vertical-align: top;

}

div.viewopt span.autofill{ background: url("img/autofill.png") no-repeat 0 0/100% 100%; }
div.viewopt span.sendconf{ background: url("img/submit.png") no-repeat 0 0/100% 100%; }
div.viewopt span.export{ background: url("img/export.png") no-repeat 0 0/100% 100%; }

div.viewopt span.conf{
background: url("img/config.png") no-repeat 0 0/100% 100%;
margin-left: 90px;
transition: margin .7s;
}

div.run div.viewopt div.config.return span.conf{ margin-left: 38px; }

div.run div.viewopt div.config.return span.vreturn{
height: 45px;
width: 50px;
margin-left: 30px;
}

div.viewopt span.vreturn{
height: 0;
margin-top: 28px;
overflow: hidden;
transition: margin .5s, width .5s, height .7s;
transition-delay: 0s, .5s, .5s;
}

div.viewopt span.vreturn i{
height: 47px;
width: 50px;
background: url("img/return-white.png") no-repeat 0 0/100% 100%;
display: inline-block;
}

div.run .slider{ display: table; margin: 0 auto; }

div.run .slider span.mark{ display: none; }

div.run .slide-previous{ left: 25%; transform: rotate(180deg); }
div.run .slide-next{ right: 25%; }
div.run .slide-button{
	
	top: calc(50% - 75px);
	position:fixed;
    font-size: 0;
    height: 75px;
    width: 44px;
    background: url("img/arrow.png") no-repeat 0 0/100%;

}

div.run div.minview .slider{ margin: 0; }
div.run div.minview .slide-button{ display: none; }


div.run.return div.viewreturn { top:0; bottom:0; height: 100%; transition-delay: 0s, 0s, 0s; }
div.run div.viewreturn {
    position: absolute;
    left: 0;
    bottom: 100%;
    background: #fff;
    height: 0;
    width: 100%;
	transition: top 0.6s, height 0.6s, bottom 0.6s;
	transition-delay: .6s, .6s, .6s;
	z-index: 1;
}

div.run div.viewreturn div.frame{

	margin: 0 auto;
    width: 80%;
    height: 100%;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.58);
	overflow: auto;

}

div.run.return div.viewreturn span.back{ transform: scale(1); transition-delay: .9s; }
div.run div.viewreturn span.back{
	padding: 8px 15px;
    position: absolute;
    background: #000;
    top: calc(100% - 20px);
    right: 3.3%;
    border-radius: 24px;
	transform: scale(0);
	transition: transform .6s;
	transition-delay: 0s;
}

div.run span.back img{
	height: 25px;
    transform: rotate(270deg);
}

.field-styles div.hide{ min-height: 0; height: 0; overflow: hidden; }


div.new div.form-name div.warning,
div.new div.viewform div.warning,
div.new div.form-name div.loader{ height:0; min-height:0; margin:0; display: block; }

div.new div.viewform div.warning{ position: fixed; z-index:2;  }

div.warning.show span.msg{ display:table; text-align: center; }

div.warning span.msg{
	
	margin: 0 auto;
    display: none;
    background: #ff8800;
    padding: 10px 30px;
    border: 1px solid #7a4100;
    border-radius: 4px;
    color: #4e1414;
	font-size: 1.1em;	
	
}

div.save.saving div.loader{ width: 100%; display: block; }
div.save.saving button{ display: none; }

div.save.saved div.loader{ display: inline-block; height: 15px; width: 150px; }
div.save.saved span.loader{ background: url("img/done.png") no-repeat 0 0/100%; }
div.save.saved span.loader img{ display: none; }

div.save.saved span.loader{ margin: 0; }
div.save.saved div.loader:after{margin: -23px 0 0 20px; }

div.view div.save.saved button{

	background: none;
    padding: 0;
    color: #fff;
    border: 0;
    text-transform: uppercase;
    font-size: 10px;
    display: block;
	margin: 0 0 0 200px;
	position: relative;
	bottom: 24px;
}

div.view div.save.saved div:not(.loader){ display: inline-block; }

div.view div.save.saved div:not(.loader):nth-child(1){ margin-left: calc(36% - 80px); }

div.view div.save.open div:not(.loader):nth-child(2){
	
	width: 0;
    height: 0;
    overflow: visible;
    display: table;
    float: right;
    position: relative;
    bottom: 36px;
    right: 68px;
	
}

div.save div.loader{ display: none; }
div.save div.loader span.loader{ height:28px; width: 28px; }
div.save div.loader:after{ content: attr(title); }

div.loader.show span.loader{ opacity:1; }

div.loader:after{
    color: #fff;
    display: block;
    text-align: center;
    text-indent: 10px;
    font-size: 16px;
}

div.loader span.loader{

    height: 36px;
    width: 36px;
    margin: 0 auto;
	overflow: hidden;
	display: block;
	opacity:0;
	transition: opacity 2s;

}

span.loader img{ width: 100%; }



div.warning-frame{ width: auto; }

.warning-frame .warning-msg{
	padding: 8px 0;
	width: 45%;
    border: 1px solid #965b10;
    border-radius: 4px;
    margin: 0 auto;
    text-align: center;
    display: block;
	position: relative;
    bottom: 18px;
	background: #d87f10;
	font-size: 1.16em;
	}
	
div.popup{
	
	position: fixed;
    width: 150px;
    background: #000;
    color: #fff;
    
}

div.popup li:hover{ background: #338ccc; }

div.popup li.hide{ display: none; }

div.popup li.check:after{
	
	content: "#";
    display: inline-block;
    height: 10px;
    width: 5px;
    border: 4px solid #fff;
    transform: rotate(45deg);
    border-left: 0;
    border-top: 0;
    font-size: 0;
    position: absolute;
    right: 14px;
    margin-top: 1px;

}

div.popup li{
	padding: 8px 30px;
	text-align: center;
	cursor: default;
}

div.popup li div{ height: 0; width: 0; }
div.popup li:hover ul{ display: block; }
div.popup li ul{
	display: none;
    position: relative;
    right: 200px;
    background: #000;
    width: 170px;
    bottom: 28px;
	}

div.float.opts{ height:0; width: 0; min-height: 0; min-width: 0; }

div.float.opts div.section div{ width: 250px; padding: 15px 0px 26px; }
div.float.opts div.section [type=text]{
	display: block;
    margin: 0 auto 8px;
    height: 26px;
    width: 90%;
	}

div.float.opts div.section [type=button]{ padding: 2px 4px; }
div.float.opts div.section [type=button]:nth-of-type(2){ margin: 0 6px 0 22.3%; }

div.float.opts div.section.exclude h2{ display: block; color: #fff; text-align: center; font-size: 1.3em; margin-bottom: 6px; }
div.float.opts div.section.exclude [type=text]{ display: none; }
div.float.opts div.section.exclude [type=button]{ padding: 2px 6px; }
div.float.opts div.section.exclude [type=button]:nth-of-type(2){ margin-left: 33%; }

div.float.opts div.section label{ display: none; }

div.float.opts.show div.section{ right: 250px; width: 250px; }
div.float.opts div.section{
	
	width: 0;
    background: #000;
    position: relative;
    right: 0;
    bottom: 81px;
	transition: right 1s, width 1s;
	overflow: hidden;
	
}

div.new div.form-name span.close:after{
	
	height: 28px;
	width: 28px;
	background-color: inherit;
	border: none;
	border-radius: 0;
	box-shadow: none;
	
}

div.run span.close{ z-index: 0; }
span.close:after{
	content: "#";
    display: inline-block;
    height: 15px;
    width: 15px;
    background: url("img/del-white.png") no-repeat 2px 2px/70%;
    border: 3px solid #fff;
    border-radius: 11px;
    position: relative;
    right: 36px;
    top: 10px;
    background-color: #000;
	box-shadow: 0px 1px 0px #000;
	}
	
span.close{
	
	float: right;
    height: 0;
    width: 0;
    font-size: 0;
	position: relative;
	z-index:1;
}


div.float-multi.show{ zwidth: auto; zopacity: 1; ztransition-delay: 1s; }

div.float-multi.show>ul:after{
	content: attr(title);
	display: block;
    font-size: 1.5em;
    font-weight: 900;
    position: relative;
    right: 106px;
	margin-top: 6px;
}

div.run form div.section.insert[data-multi=true] div[id*=div-submit],
div.run form div.section:not(.insert)[data-multi=true] div[id*=div]:not([id*=submit]){
	visibility: hidden;
	min-height: 0;
	height: 0;
	margin-bottom: 0;
}

div.run form div.section[data-multi=true] div[id*=div-submit] label{ display: none !important; }
div.run form div.section[data-multi=true] div[id*=div-submit] input{ margin: 0 auto !important; display: table !important; }

div.section.insert div.float-multi{ width: 75px; height: 0; }
div.section.insert zdiv.float-multi{ right:calc(50% - 40px); }

div.float-multi{
	zposition: fixed;
	position: relative;
	zright:calc(50% - 16px);
	width: 32px;
	height:280px;
	margin: 0 auto;
	}

div.float-multi>ul>li + li{ margin-left: 10px; }

div.float-multi>ul>li{
	display: none;
    height: 32px;
    width: 32px;
	vertical-align: top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
	font-size: 0;
}

div.float-multi li.allow{ display: inline-block; }

div.float-multi li.list{
	display: block;
	height: 0;
	width: 0;
	}

div.float-multi li.allow{ background-image: url("img/add2.png"); }

div.float-multi li.add{ background-image: url("img/done2.png"); }

div.float-multi li.list ul{ display: block; height: inherit; overflow-y: auto; }

div.float-multi li.list ul li{
	height: auto;
    margin: 0;
    padding: 6px 40px;
	background: #d1e4fa;
    font-size: 18px;
    text-align: center;
	width: 140px;
    margin: 7px auto;
}

div.float-multi li ul li + li:last-child{ display: none; }
 
div.float-multi ul li.list ul li span{
	height: 0;
	width: 0;
	float: right;
	}
	
div.float-multi ul li.list ul li span:after{
	display: inline-block;
    content: "deletar";
    height: 10px;
    width: 10px;
    background: url("img/del.png") no-repeat 0 0/100%;
    font-size: 0;
    position: relative;
    bottom: 10px;
	left: 22px;
}

div.float-multi li div{
	height: 172px;
	width: 240px;
	background: #f6fbfd;
	border: 2px solid #d9e8f2;
	position: relative;
    right: 116px;
	margin-top: 40px;
}

div.section.insert div.float-multi li.add{ display: inline-block; }

div.section.insert div.float-multi li.allow{ background: url("img/del.png") no-repeat 2px 2px/85%; } 

div.section.insert div.float-multi li.list,
div.section.insert div.float-multi.show>ul:after{ display: none; }


x-check input:checked + x-mrk, x-radio input:checked + x-mrk{ display: block; }

body.hidden .body-loader{ width: 40px; margin-top: calc(25% - 40px) !important; }

@media screen and (max-width:1200px){
	
	div.opt div.form-options{ margin-top: 80px; }

	div.start, div.forms, div.new, div.controls, div.view, div.run{ width: 100%; margin: 0; }
	
	div.start, div.forms, div.controls, div.view{ float: none; }
	
	div.start{ height: 36vh; margin: 20.2vh 0 28.8vh; }
	
	div.start h1{ font-size: 2em; }
	
	div.start button{ font-size: 1.1em; }
	
	div.new{ height: 100vh; border-radius: 0; }
	
	div.new div.form-name{text-align: center; }
	
	div.new div.form-name h2{ width: 380px; }
	
	div.controls{ height: 196px; transition: height 1s ease; }

	div.new.full div.controls{ width: 100%; height: 0; }

	div.new.full div.view { height: 100vh; transition: height 1s ease; }

	div.elm ul li{ width: 74px; }

	div.view{ height: calc(100vh - 196px); transition: height 1s ease; }
	
	div.view div.viewhide{ width: 108px; height: 30px; top: 0; right: 40px; left: auto; }
	
	div.view div.viewhide span{
		padding: 5px 8px;
		border-radius: 18px;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		}
		
	div.view div.viewhide span.active img{ transform: rotate(990deg); }
	
	div.view div.viewhide span img{ transform: rotate(90deg); }
	
	div.forms{ height:15vh; }

	div.forms ul{ display: table; margin: 0 auto; }

	div.forms li{ float: left; }

	div.forms li + li,
	div.forms div.float.opts + li{ margin-left: 18px; }

	div.float.opts{ width: 100%; position: absolute; left: 0; }

	div.float.opts div.section{ bottom: 122px; }

	div.float.opts div.section div{ margin: 0 auto; height: 81px; }

	div.float.opts div.section [type=text]{ margin-top: 18px; }

	div.float.opts.show div.section{ width: inherit; left: inherit; right: auto; }

	div.view div.save.saved div:not(.loader):nth-child(1){ margin-left: calc(27.5% - 80px); }

	div.run{ height: 100vh; }

	div.run div.viewform{ height: calc(100vh - 131px); }

	div.run .slide-button{ width: 30px; height: 52px; top: calc(50% - 52px); }

	div.run .slide-previous{ left: 0; }

	div.run .slide-next{ right: 0; }

	div.run div.minview{ width: calc(100% - 27px); }

	div.run div.minview div.min-slide{ width: 95.28%; }

	div.run div.config{ width: 18px; float: right; }

	div.run div.slideconf{ padding: 0; right:18px; }

	div.run div.config.slide div.slideconf{
		right:18px;
		width: calc(100vw - 27px);
		border: 0;
		}

	div.run div.config.return div.slideconf{ padding-left: 0; }

	div.run div.slideconf>div{ margin: 0 auto; }

	div.viewopt span.conf,
	div.run div.viewopt div.config.return span.conf{
		margin-left: 0;
	}

	div.viewopt span.conf{
		
		background-image: url("img/arrow-white.png");
		width: 18px;
		transform: rotate(180deg);
		position: relative;
		right: 6px;

	}

	div.run div.viewopt div.config.return span.vreturn i { background-image: url("img/return.png"); }

	div.run div.viewopt div.config.return span.vreturn{
		
		position: absolute;
		top: -85px;
		right: 15px;
		filter: none;
	}

	div.run div.viewreturn div.frame{ width: 100%; }

	div.run div.viewreturn span.back{ top: calc(100% - 50px); }

	div.edge.activate span.edge-span:after{
		width: 15px;
		height: 15px;
		top: calc(50% - 8px);
		}

	div.edge.activate span.edgeL{ right: calc(100% + 3px); }
	div.edge.activate span.edgeR{ left: calc(100% - 3px); }

	.field-styles label{ width: 125px; }
	.field-styles .field{ width: 190px; }
	
}

@media screen and (max-width:500px){
	
	div.view div.save.open div:not(.loader):nth-child(1){ display: none; }
	div.view div.save.open div:not(.loader):nth-child(2){
		margin: 0px auto;
		float: none;
		position: static;
	}
	
}