body {
    margin: auto;
    background-color: #EDF2F6
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    font-family: 'Segoe UI'
}

#container,
#renderContainer,
.mainHeader,
.progressContainer {
    display: inline-block
}

.flex-container>* {
    padding-top: 0;
    padding-bottom: 15px;
    -webkit-flex: 1 100%;
    flex: 1 100%
}

.mainHeader {
    height: 80px;
    width: 1200px;
    background-color: #fff;
    color: #5E5D5F;
    text-align: left
}

textarea {
    resize: none
}

.overlayPage {
    width: 100%;
    height: 100%;
    opacity: .7;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 999
}

.thankPage {
    width: 50%;
    height: auto;
    padding: 25px;
    background-color: #fff;
    opacity: 1;
    text-align: center;
    left: 25%;
    top: 200px;
    position: absolute;
    z-index: 9999
}

.formTitleWarning {
    color: #F91414;
    margin: 21px;
    float: left
}

.formContentWarning {
    color: #F91414;
    position: relative;
    text-align: left
}

.pageSection {
    width: 1300px;
    height: auto;
    margin: auto
}

.designTile {
    margin-left: 250px;
    color: #222;
    background-color: #FFF
}

.designSection {
    width: 100%;
    height: auto;
    background-color: #FFF;
    margin: auto
}

#container {
    width: 100%;
    height: auto
}

#renderContainer {
    width: 860px;
    max-width: 1200px;
    margin-left: 100px;
    height: auto
}

.progressContainer {
    width: 100%;
    height: 80px
}

.formTitle {
    width: 100%
}

.formTitle input {
    width: 232px;
    height: 25px;
    font-size: 14px;
    line-height: 30px;
    padding: 5px 14px;
    margin-top: 14px;
    margin-left: 5px;
    border: 1px solid #d4d4d4;
    border-radius: 25px;
    float: left
}

.progressTile {
    width: 500px;
    margin-left: 170px;
    height: 100px;
    position: relative;
    float: left
}

.menuPalette {
    height: 45px;
    background-color: #556984;
    color: #fff;
    margin: 0 5px 20px 0;
    display: flex
}

.uploadPalette {
    width: 266px;
    background-color: #79BB4F;
    text-align: center;
    line-height: 45px;
    color: #fff;
    display: inline-block;
    float: right;
}

.menuPalette .properties,
.menuPalette .tools {
    width: 123px;
    background-color: #79BB4F;
    text-align: center;
    margin: 0;
    line-height: 45px;
    color: #fff;
    display: inline-block
}

.properties #propertiesArrow,
.tools #controlArrow {
    position: absolute;
    margin-top: 37px;
    text-align: center
}

.menuPalette .properties {
    margin-left: 6px
}

.tools #controlArrow {
    margin-left: -40px
}

.properties #propertiesArrow {
    margin-left: -45px
}

.controlPalette,
.propertiesPalette {
    width: 257px;
    height: 100%;
    border: 0 solid #555;
    padding: 0 0 5px 5px;
    float: left;
    background-color: #556984;
    color: #fff
}

.controlLabel {
    padding: 5px;
    font-size: 20px;
    width: 220px
}

.controlBack,
.controlDelete,
.controlLogic {
    width: 60px;
    float: left;
    background-color: #eee;
    padding: 5px;
    margin: 5px;
    text-align: center
}

.control {
    width: 82px;
    height: 82px;
    margin: 0;
    text-align: center;
    font-size: 9pt;
    border: 1px solid #fff;
    color: #fff;
    float: left;
    line-height: 42px
}

.designerSection {
    width: 650px;
    float: left;
    min-height: 200px;
    margin-left: 10px;
    overflow-y: auto;
    /* max-height: 400px; */
    margin-bottom: 20px;
}

.navigationSection {
    width: 840px;
    margin-left: 402px
}

.designerSection::-webkit-scrollbar {
    width: 5px
}

.designerSection::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    outline: #708090 solid 1px
}

.separator {
    width: 256px;
    margin: 0 5px 5px;
    float: left;
    position: relative;
    background: #0071bc;
    border: 1px solid #0071bc
}

.separator:after,
.separator:before,
.separatorP:after,
.separatorP:before {
    bottom: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
}

.separator:after,
.separator:before {
    left: 25%
}

.separatorP:after,
.separatorP:before {
    left: 75%
}

.separator:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #0071bc;
    border-width: 10px;
    margin-left: -10px
}

.separator:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #0071bc;
    border-width: 11px;
    margin-left: -11px
}

.set1,
.set2 {
    float: left;
    width: 100%;
    text-align: left
}

.submitButton {
    margin-left: 25%
}

.hide {
    display: none!important
}

#drag-1,
#drag-2 {
    width: 25%;
    height: 100%;
    min-height: 6.5em;
    margin: 10%;
    background-color: #29e;
    color: #fff;
    border-radius: .75em;
    padding: 4%;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

#drag-me::before {
    content: "#" attr(id);
    font-weight: 700
}

.dropzone {
    border: 1px solid #ececec;
    height: calc(100% + 10px);
    min-height: 30px;
    padding: 5px;
    border-radius: 0;
    transition: background-color .1s
}

.drag-drop,
.droppingzone {
    transition: background-color .3s
}

.set1 .dropzone {
    border-bottom: none;
    padding-bottom: 0
}

.set2 .dropzone {
    border-top: none;
    padding-top: 0
}

.dropzone .drag-drop {
    height: 100%;
    width: 100%
}

.set1 .dropzone .drag-drop textarea {
    width: 400px;
    height: 19px;
    font-size: 15px;
    max-width: 400px
}

.set2 .dropzone .drag-drop textarea {
    width: 378px;
    height: 19px;
    font-size: 15px;
    max-width: 378px
}

.set1 .dropzone .drag-drop .label,
.set2 .dropzone .drag-drop .label {
    line-height: 25px;
    font-size: 15px;
    font-weight: 600
}

.set1 .dropzone .drag-drop input[type=file] {
    width: 404px;
    height: 25px;
    font-size: 15px;
    max-width: 404px
}

.set2 .dropzone .drag-drop input[type=file] {
    height: 25px
}

.set1 .dropzone .drag-drop input {
    width: 400px;
    height: 19px;
    font-size: 15px;
    max-width: 400px
}

.set2 .dropzone .drag-drop input {
    max-width: 595px;
    height: 19px;
    font-size: 15px
}

.set1 .dropzone .drag-drop .checkBoxOptions input {
    width: 100%;
    height: 20px;
    max-width: 40px
}

.set2 .dropzone .drag-drop .checkBoxOptions input {
    width: 20px;
    height: 20px;
    margin-right: 15px
}

.set2 .checkBoxOptions .boxContents {
    padding: 5px;
    width: 552px
}

.checkBoxOptions div {
    vertical-align: middle;
    display: inline-block
}

.set2 .dropzone .drag-drop select {
    max-width: 595px;
    line-height: 25px;
    height: 25px;
    font-size: 15px
}

.set1 .dropzone .drag-drop select {
    width: 406px;
    max-width: 406px;
    line-height: 25px;
    height: 25px;
    font-size: 15px
}

.rowHover {
    background-color: #ececec
}

.droppingzone {
    min-height: 42px;
    width: 200px;
    border-radius: 4px;
    margin: 2px auto 5px;
    padding: 2px
}

.drop-active {
    border-color: #aaa
}

.drop-target {
    background-color: #29e;
    border-color: #fff;
    border-style: solid
}

.button,
button {
    border: none;
    color: #fff
}

.excelUploaderInput{
    margin-inline-start: 15px;
    text-overflow: ellipsis;
    max-width: 200px;
}

.excelUploaderbtn{
    border: none;
    color: #fff;
    width: 220px;
}

.drag-drop {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0)
}

.deleteImage {
    float: right;
    z-index: 999;
    height: 20px;
    position: relative;
    right: 0
}

.drag-drop.can-drop {
    color: #000;
    background-color: #4e4
}

label {
    margin-bottom: 0;
    line-height: 20px
}

.ElePropertiesHeaders {
    margin-top: 20px;
    font-size: 12px;
    font-weight: 700
}

.EleProperties {
    margin-bottom: 25px
}

.EleProperties td {
    padding-bottom: 8px;
    font-size: 14px;
    text-align: left
}

.EleProperties input {
    width: 163px;
    padding: 2px;
    font-size: 14px;
    height: 20px
}

.EleProperties textarea {
    width: 164px;
    padding: 2px;
    font-size: 14px;
    height: 60px
}

.EleProperties select {
    width: 170px;
    padding: 2px;
    font-size: 14px;
    height: 28px
}

.applyButton,
.publishButton {
    margin-top: 20px;
    margin-left: 60px
}

.propertiesLabel {
    font-size: 12pt
}

button {
    background-color: #29ABE2;
    width: 90px;
    height: 35px
}

.button {
    background-color: #0071bc;
    cursor: pointer;
    width: 88.88px;
    height: 38px
}

.userSection {
    width: 265px;
    display: inline-block;
    margin-left: 10px;
    max-height: 440px;
    text-align: center;
    border-left: 1px solid #d3d3d3;
    font-size: 10pt
}

.userSectionSelectUsers {
    max-height: 400px;
    
    text-align: left;
    overflow: auto
}

.checkboxFive {
    width: 100%;
    margin: 5px;
    position: relative;
    text-align: left
}

.userSectionSelectUsers ul {
    list-style-type: none;
    padding: 0
}

.userSectionSelectUsers ul li {
    float: left;
    margin-top: 5px;
    width: 99%
}

.userSectionSelectUsers li div {
    display: inline-block;
    margin-left: 5px;
    line-height: 22px;
    vertical-align: top;
    white-space: nowrap;
    word-break: normal;
    text-overflow: ellipsis;
    max-width: 210px;
    overflow-x: hidden
}

.userSectionSelectUsers input[type=checkbox]:checked+label:after {
    opacity: 1
}

.userSectionSelectUsers input[type=checkbox] {
    height: 14px;
    width: 14px;
    margin: 5px
}

.userSectionSelectUserTitle {
    text-align: center;
    background-color: #CCC;
    font-weight: 500;
    height: 30px;
    line-height: 30px;
    padding: 10px;
    font-size: 15px
}

.userSectionSelectUsers::-webkit-scrollbar {
    width: 5px
}

.userSectionSelectUsers::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    outline: #708090 solid 1px
}

.notactive {
    pointer-events: none;
    cursor: default
}

.uploadButton {
    box-sizing: border-box;
    background-color: buttonface;
    padding: 2px 6px 3px;
    border: 2px outset buttonface
}

.headerLogo {
    width: 79px;
    position: absolute;
    padding-right: 15px
}

.headertitle {
    display: inline-block;
    padding-left: 90px;
    font-size: 25pt;
    line-height: 74px
}

.welcomeMessgae {
    font-size: 11pt;
    float: right;
    padding-left: 38px;
    padding-top: 25px;
    padding-right: 10px;
    display: block;
    font-weight: 700
}

.logout {
    font-size: 10pt;
    text-align: right;
    padding: 0 80px 0 15px;
    display: block
}

.logout:hover {
    cursor: pointer;
    text-decoration: underline;
    opacity: .5
}

.btnSection {
    float: right;
    line-height: 80px;
    padding-right: 50px
}

.btnHeaders {
    height: 35px;
    width: 150px;
    background-color: #29ABE2;
    border: none;
    color: #fff;
    cursor: pointer
}

.formsList {
    border-bottom: 1px solid #f2f2f2;
    padding-top: 5px;
    padding-bottom: 5px;
    height: 40px
}

.formTitleRow {
    width: 1200px;
    height: 64px;
    background-color: #fff;
    color: #4e4e4e;
    display: inline-block
}

.sectionHeader {
    text-align: left;
    vertical-align: middle;
    line-height: 40px;
    color: #fff;
    background-color: #556984;
    height: 45px;
    width: 100%
}

.sectionContent {
    width: 100%;
    min-height: 60px;
    height: 100%;
    padding-top: 0;
    background-color: #fff;
    overflow: hidden
}

.btnPublish,
.btnSave {
    width: 100px;
    background-color: #29ABE2;
    border: none;
    float: right;
    cursor: pointer;
    color: #fff;
    padding: 2px;
    font-size: 14px;
    line-height: 30px;
    text-align: center
}

.btnSave {
    margin: 0 10px 0 20px
}

.btnPublish {
    margin: 15px 30px
}

.addRowSet,
.submitButton {
    width: 150px;
    border-color: none;
    cursor: pointer;
    color: #fff;
    background-color: #79BB4F;
    padding: 2px;
    float: left;
    font-size: 14px;
    line-height: 30px;
    text-align: center
}

.buttons {
    margin-top: 5px;
    margin-bottom: 10px;
    height: 35px;
    margin-left: 10px;
    float: left;
    width: 650px
}

.toolIcon {
    height: 25px;
    margin-top: 15px
}

.disableControl {
    pointer-events: none;
    opacity: .5
}