.sub-label {
    margin-top: 1em;
    margin-bottom: 1em;
}


.builder2020 h1 {
    font-weight: 600;
}
.builder2020 h1,
.builder2020 h2,
.builder2020 h3,
.builder2020 h4,
.builder2020 h5,
.builder2020 h6{
    color: #2d2d2d;
}


.builder2020 .content {
    background: transparent;
    color: #767676;
    font-size: 16px;
    line-height: 1.4em;
    padding-top: 0;
}

.builder-section {
    margin-top: 40px;
    padding: 40px;
    background: white;
}

.builder2020 label {
    font-weight: bold;
    font-size: 19px;
    color: #3c3c3c;
}

.builder-section__label {
    display: block;
    padding-top: 20px;
}

.builder2020 input[type="text"],
.builder2020 textarea {
    width: 100%;
}
.builder2020 input[type="text"] {
    padding: 5px;
}


.builder2020 .content .builder-step {
    padding: 0;
}


/* ## Builder Step ## */
.builder-step {
    display: flex;
    flex-direction: column;
    list-style: none;
    counter-reset: mycounter;
    font-size: 18px;
}

@media screen and (min-width: 768px){
    .builder-step {
        flex-direction: row;        
    }
}

.builder-step-item {
    counter-increment: mycounter;
    margin-right: 10px;
    position: relative;
    border: 2px solid #b8b8b8;
    margin-bottom: 20px;
}
.builder-step-item.active {
    border: 2px solid #2674a9;
}

.content .builder-step__link {
    color: #767676;
}

.content .builder-step-item.active .builder-step__link {
    color: #2674a9;
}


@media screen and (min-width: 768px){
    .builder-step-item {
        border-top: 2px solid #b8b8b8;
        border-bottom: 2px solid #b8b8b8;
        border-left: none;
        border-right: none;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .builder-step-item.active {
        border-left: none;
        border-right: none;
        border-top: 2px solid #2674a9;
        border-bottom: 2px solid #2674a9;
    }
    .builder-step-item:first-child {
        border-left: 2px solid #b8b8b8;
    }
    .builder-step-item.active:first-child {
        border-left: 2px solid #2674a9;
    }
    .builder-step-item:first-child:before,
    .builder-step-item:first-child:after {
        content: none;
    }
    .builder-step-item:before,
    .builder-step-item:after, 
    .builder-step-item__container:before, 
    .builder-step-item__container:after {
        content: '';
        position: absolute;
        background: white;
        border: none;
        border-width: 2px;
        border-style: solid;
        border-color: #b8b8b8;
        height: 50%;
        width: 20px;
        z-index: -1;
    }

    .builder-step-item.active:before,
    .builder-step-item.active:after, 
    .builder-step-item.active .builder-step-item__container:before, 
    .builder-step-item.active .builder-step-item__container:after {
        border-color: #2674a9;
    }

    .builder-step-item:before {
        border-right: 0;
        border-bottom: 0;
        transform: skew(15deg);
        top: -2px;
        left: -6px;
    }
    .builder-step-item:after {
        border-right: 0;
        border-top: 0;
        transform: skew(-15deg);
        bottom: -2px;
        left: -6px;
    }
    .builder-step-item__container:before,
    .builder-step-item__container:after {
        z-index: 2;
        border-left: 0;
        border-top: 0;
        left: auto;
        border-bottom: none;
    }
    .builder-step-item__container:before{
        transform: skew(15deg);
        top: 0;
        right: -4px;
    }
    .builder-step-item__container:after{
        transform: skew(-15deg);
        bottom: 0;
        right: -4px;
    }
}

.builder-step__link {
    display:block;
    background: white;
    padding: 18px;
}

.builder-step__link::before {
    content: counter(mycounter) ". ";
}

.builder2020 legend {
    font-size: 19px;
    font-weight: bold;
    color: #3c3c3c;
    padding-top: 20px;
}
.builder2020 fieldset {
    padding: 0;
    border: 0;
    margin: 0;
}


/*## checkbox / radio ##*/
.builder2020 form .builder-section li {
    position: relative;
    padding-top: 20px;
}
.builder2020 form .builder-section ul {
    margin-bottom: 20px;
}

.builder2020 form .builder-section li:before {
    content: none;
}

.builder2020 input[type="checkbox"] {
    
}
.builder2020 input[type="checkbox"] + label,
.builder2020 input[type="radio"] + label {
    display: inline-block;
    font-weight: normal;
    padding-top: 0;
    padding-left: 35px;
    font-size: 16px;
    color: #767676;
    position: relative;
}
.builder2020 input[type="checkbox"] + label:before,
.builder2020 input[type="checkbox"] + label:after,
.builder2020 input[type="radio"] + label:before,
.builder2020 input[type="radio"] + label:after {
    content: '';
    position: absolute;
    left: 0;
}
.builder2020 input[type="checkbox"] + label:before,
.builder2020 input[type="radio"] + label:before {
    width: 20px;
    height: 20px;
    border: 1px solid rgb(142,142,142);
    background: rgb(212,212,212);
}
.builder2020 input[type="radio"] + label:before {
    width: 18px;
    height: 18px;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.builder2020 input[type="radio"] + label:before {
    border-radius: 20px;
}

.builder2020 input[type="checkbox"]:focus + label:before,
.builder2020 input[type="radio"]:focus + label:before {
    border: 1px solid #272727;
}

.builder2020 input[type="checkbox"]:checked + label:before,
.builder2020 input[type="radio"]:checked + label:before {
    background: white;
}

.builder2020 input[type="radio"]:checked + label:after {
    width: 10px;
    height: 10px;
    background: rgb(30,106,161);
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    border-radius: 10px;
}

.builder2020 input[type="checkbox"]:checked + label:after {
    width: 7px;
    height: 14px;
    border-right: 3px solid rgb(30,106,161);
    border-bottom: 3px solid rgb(30,106,161);
    transform: rotate(40deg);
    left: 6px;
}

.builder2020 input[type="checkbox"],
.builder2020 input[type="radio"] {
    opacity: 0;
    position: absolute;
}


/* ## addmorebtn ## */
.addmorebtn {
    display: block;
    text-align: right;
    padding: 20px 60px 20px 0;
    position: relative;
}
a.addmorebtn {
    text-decoration: underline;
    color: #767676 !important;
}

.addmorebtn:after {
    content: '+';
    position: absolute;
    font-size: 25px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #3c3c3c;
}

.addmorebtn:before {
    content: '';
    position: absolute;
    width: 35px;
    height: 35px;
    background: rgb(239,239,239);
    border: 2px solid rgb(190,190,190);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

a.greylink {
    text-decoration: underline;
    color: #767676;
}

/* # admin only # */
.builder2020 .admin-only {
    padding: 20px;
    border: 1px solid #2674a9;
}
.builder2020 .admin-only legend {
    padding-top: 0;
}

.builder2020 .sq-commit-button,
.builder2020 .btn,
.builder2020 .content .btn {
    background: rgb(239,239,239);
    font-size: 16px;
    padding: 8px 20px;
    border: 2px solid rgb(198,198,198);
    color: #767676;
}

.commit-wrapper {
    display: flex;
    flex-direction: row-reverse;
}


/* ## input[list] (datalist) and Select ## */

.builder-select {
    border: 1px solid rgb(142,142,142);
    background: rgb(239,239,239);
    height: 3rem;
    padding: 0 20px;
}

.builder-select input[list],
.builder-select select {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
}

.builder-select select {
    
}

.builder-select input[list] {
        
}


/* ## datetime ## */
.builder-datetime{
    display: flex;
    justify-content: space-between;    
}
.builder-datetime label {
    font-size: 16px;
    font-weight: normal;
    color: rgb(79,79,79)
}

.builder-datetime > div {

}
.builder-datetime > div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}


.builder-date {
    background: white;
    border: 1px solid rgb(142,142,142);
    height: 2rem;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGFyaWEtaGlkZGVuPSJ0cnVlIiBkYXRhLXByZWZpeD0iZmFyIiBkYXRhLWljb249ImNhbGVuZGFyLWFsdCIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNhbGVuZGFyLWFsdCBmYS13LTE0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjMWU2YWExIiBkPSJNMTQ4IDI4OGgtNDBjLTYuNiAwLTEyLTUuNC0xMi0xMnYtNDBjMC02LjYgNS40LTEyIDEyLTEyaDQwYzYuNiAwIDEyIDUuNCAxMiAxMnY0MGMwIDYuNi01LjQgMTItMTIgMTJ6bTEwOC0xMnYtNDBjMC02LjYtNS40LTEyLTEyLTEyaC00MGMtNi42IDAtMTIgNS40LTEyIDEydjQwYzAgNi42IDUuNCAxMiAxMiAxMmg0MGM2LjYgMCAxMi01LjQgMTItMTJ6bTk2IDB2LTQwYzAtNi42LTUuNC0xMi0xMi0xMmgtNDBjLTYuNiAwLTEyIDUuNC0xMiAxMnY0MGMwIDYuNiA1LjQgMTIgMTIgMTJoNDBjNi42IDAgMTItNS40IDEyLTEyem0tOTYgOTZ2LTQwYzAtNi42LTUuNC0xMi0xMi0xMmgtNDBjLTYuNiAwLTEyIDUuNC0xMiAxMnY0MGMwIDYuNiA1LjQgMTIgMTIgMTJoNDBjNi42IDAgMTItNS40IDEyLTEyem0tOTYgMHYtNDBjMC02LjYtNS40LTEyLTEyLTEyaC00MGMtNi42IDAtMTIgNS40LTEyIDEydjQwYzAgNi42IDUuNCAxMiAxMiAxMmg0MGM2LjYgMCAxMi01LjQgMTItMTJ6bTE5MiAwdi00MGMwLTYuNi01LjQtMTItMTItMTJoLTQwYy02LjYgMC0xMiA1LjQtMTIgMTJ2NDBjMCA2LjYgNS40IDEyIDEyIDEyaDQwYzYuNiAwIDEyLTUuNCAxMi0xMnptOTYtMjYwdjM1MmMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTEyYzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDQ4VjEyYzAtNi42IDUuNC0xMiAxMi0xMmg0MGM2LjYgMCAxMiA1LjQgMTIgMTJ2NTJoMTI4VjEyYzAtNi42IDUuNC0xMiAxMi0xMmg0MGM2LjYgMCAxMiA1LjQgMTIgMTJ2NTJoNDhjMjYuNSAwIDQ4IDIxLjUgNDggNDh6bS00OCAzNDZWMTYwSDQ4djI5OGMwIDMuMyAyLjcgNiA2IDZoMzQwYzMuMyAwIDYtMi43IDYtNnoiLz48L3N2Zz4=');
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: 5px center;
}

.builder-date input {
    border: none;
    background: transparent;
    height: 100%;
    color: #767676;
}

.builder-date input {
    padding-left: 50px;
    color: #767676;
}

.builder-time {
    
}
.builder-time input {
    border: 1px solid rgb(142,142,142);
    color: #767676;
}

.builder-hide-firstchild li:first-child {
    display: none;
}


/*//checkbox-btn*/
.checkbox-btn {
    border: none;
    background: transparent;
    position: relative;
    padding-left: 40px;
    color: #767676;
}
.checkbox-btn:before,
.checkbox-btn:after{
    content: '';
    position: absolute;
    left: 0;
}
.checkbox-btn:before {
    width: 20px;
    height: 20px;
    border: 1px solid rgb(142,142,142);
    background: rgb(212,212,212);
}
.checkbox-btn:focus:before {
    border: 1px solid #272727;
}

.checkbox-btn:after {

}

.checkbox-btn.active:before {
    background: white;
}
.checkbox-btn.active:after {
    width: 7px;
    height: 14px;
    border-right: 3px solid rgb(30,106,161);
    border-bottom: 3px solid rgb(30,106,161);
    transform: rotate(40deg);
    left: 6px;
}


.checkbox-btn.active {
    display: none;
}


/*validation styles */

.parsley-error {
    
}
.parsley-required {
    color: #d40003;
}

input[type="text"].parsley-error,
input[type="date"].parsley-error,
textarea.parsley-error,
input[list].parsley-error{
    border: 2px solid #d40003;
}

.parsley-error input[type="radio"] + label:before{
    border: 1px solid #d40003;
}

.parsley-errors-list {
    color: #d40003;
}


.builder2020 select {
    width: 100%;
}


.sq-commit-button.submitted {
    pointer-events: none;
}

.builder2020 form .builder-section li.timezone2020 {
    padding-top:5px;
}
ul.timezones2020 {
    padding-top:20px;
}

.builder2020 abbr[title] {
    border-bottom: none;
    text-decoration: none;
}
.builder2020 .sq-form-required-field {
    color: #3c3c3c;
}

.checkbox-description {
    font-style: italic;
    font-size: 14px;
    padding: 10px 0 10px 35px;
}