.dd {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dd-list {     
	display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dd-list:not(:first-child) {
	margin-left:25px;
}

.dd-item, .dd-empty, .dd-placeholder {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
}
/* button open close */
.dd-item > button {
    z-index: 10;
    display: block;
    position: relative;
    cursor: pointer;
    float: left;
    width: 15px;
    height: 20px;
    margin: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: bold;
}
.dd-item > button[data-action="collapse"] > span {
	margin-top: 4px;
}
.dd-item > button[data-action="expand"] > span {
	margin-top: 4px;
	margin-left: 2px;
}

/* button open close */
.dd-handle:before {
    content: '≡';
    display: block;
    position: relative;
	display: inline-block !important;
    left: 0;
    top: 3px;
    width: 100%;
    text-align: center;
    text-indent: 0;
    color: #999;
    font-size: 20px;
    font-weight: normal;
}
.dd-handle {
    z-index: 10;
    display: block;
    position: relative;
    cursor: move;
    float: left;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: bold;	
    height: 33px;
    width: 25px;
	border-right: 1px solid #ccc;
	margin-right: 5px;
}
.dd-remove {
    position: absolute;
    right: 0px;
    top: 5px;
    display: block;
    height: 24px;
    width: 25px;
}
.dd-content {
	display: block;
    margin: 5px 0;
    padding: 5px 10px 5px 2px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background: linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    z-index: 5;
}

.dd-content .form-control {
	margin-top: -4px;
	margin-bottom: -4px;
	height: 30px;
	background: #fcfcfc;
}
.dd-content .form-control:focus {
	background: #fff;
}

.dd-placeholder, .dd-empty {
    margin: 5px 0;
    padding: 0;
    min-height: 30px;
    background: #f2fbff;
    border: 1px dashed #b6bcbf;
    box-sizing: border-box;
}
.dd-dragel {
    position: absolute;
    z-index: 9999;
	pointer-events: none;
}

/* stylize inputs width depending on buttons present */
.dd-item .dd-content .form-control {
	display: inline-block;
	width: calc(50% - 44px);
	margin-left: 27px;
}	

.dd-item button + .dd-content .form-control {
	display: inline-block;
	width: calc(50% - 39px);
	margin-left: 0px;
}

.dd-item button + .dd-handle + .dd-content .form-control {
	/*width: calc(100% - 70px);*/
	width: calc(54% - 70px);
	display: inline-block;
	margin-left: 0px;
}

.dd-item .dd-handle + .dd-content .form-control {
	width: calc(100% - 44px);
	margin-left: 0px;
}	

/* lv2 */
.dd-item .dd-item .dd-handle + .dd-content .form-control {
	/*width: calc(100% - 45px);*/
	width: calc(52.2% - 45px);
	display: inline-block;
	margin-left: 0px;
}
.dd-item .dd-item button + .dd-handle + .dd-content .form-control {
	width: calc(100% - 70px);
	margin-left: 0px;
}
/* stylize inputs width depending on buttons present */

.dd-item button + .dd-handle {
	border-left: 1px solid #ccc;
}

.dd-item.focused > .dd-content {
    background: -webkit-linear-gradient(top, #E3F3FF 0%, #C9E8FF 100%);
    background: -moz-linear-gradient(top, #E3F3FF 0%, #C9E8FF 100%);
    background: linear-gradient(top, #E3F3FF 0%, #C9E8FF 100%);	
}