* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
}

html {
    height: 100%;
}

body {
    height: 100%;
    /* background: #dbeeff; */
    background: var(--light-bg-color);
}

.form-builder {
    /* background-color: #dbeeff; */
    background-color: var(--light-bg-color);
    overflow: auto;
}

.demo-header {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #008eff; */
    background: var(--bg-color);
    /* border-bottom: 5px solid #4db0ff; */
    border-bottom: 5px solid var(--bg-color);
    height: 60px;
}

.demo-header .formBuilderText {
    color: white;
    position: relative;
    font-weight: bold;
}

.demo-header .formBuilderText::before {
    content: "";
    background: white;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0px;
}

.demo-header .formBuilderText::after {
    content: "";
    background: white;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -2px;
    left: 0;
}

.form-wrap.form-builder .stage-wrap {
    flex-wrap: wrap;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
}

.formbuilder-header > h1,
.formbuilder-header > h2,
.formbuilder-header > h3,
.formbuilder-header > h4,
.formbuilder-header > h5,
.formbuilder-header > h6 {
    /* font-weight: bold !important; */
    margin: 0;
    font-weight: lighter !important;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.hoverDropStyleInverse {
    width: 25% !important;
    text-align: center;
}

.form-wrap.form-builder {
    display: flex;
    flex-direction: row-reverse !important;
    flex-wrap: wrap;
    width: calc(100% - 285px);
    background-repeat: no-repeat;
    background-size: cover;
}

.form-builder .form-element {
    width: 45%;
    margin: 2.5%;
    box-sizing: border-box;
    padding: 10px;
}

#fb-editor .cb-wrap ul {
    margin: 0;
    padding: 0;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: white;
    max-height: 300px;
    overflow: auto;
    padding: 7px 0px 7px 7px;
    border-bottom: 1px solid #d8dae5;
}

.form-wrap.form-builder .frmb-control li {
    width: 48%;
    border-radius: 4px;
}

.form-wrap.form-builder .frmb-control li span {
    font-size: 12px;
    font-weight: 600;
}

.form-wrap.form-builder .stage-wrap.empty {
    border: none !important;
    min-height: 175px !important;
    max-height: 175px;
    background-color: white;
    margin: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-wrap.form-builder .stage-wrap {
    margin: auto !important;
    border: none !important;
    background-color: white !important;
    margin-top: 20px !important;
    min-height: 175px !important;
    display: flex !important;
    max-width: 700px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-wrap.form-builder .stage-wrap.empty::after {
    border: 2px dashed;
    border-radius: 1em;
    cursor: default;
    font-size: 24px;
    margin: 10px !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding: 50px 30px;
    opacity: 0.6;
}

li.form-field:not(.header-field):not(.Image-field) {
    width: 25%;
}

#fb-editor .form-wrap.form-builder .frmb li.form-field:hover {
    /* box-shadow: 0px 0px 6px -1px #008eff !important; */
    box-shadow: 0px 0px 6px -1px var(--bg-color) !important;
}

.form-wrap.form-builder .frmb .field-actions {
    position: absolute;
    bottom: -34px !important;
    left: -1px !important;
    top: auto !important;
    right: auto !important;
    opacity: 0;
    z-index: 1;
    min-width: 194px;
    /* border: 1px solid #008eff; */
    border: 1px solid var(--bg-color);
    transition: opacity 0.8s ease;
    width: 279px !important;
    max-width: 279px !important;
}

.form-wrap.form-builder .frmb .field-actions a {
    width: 46px;
    padding: 8px !important;
    /* border-right: 1px solid #008eff !important; */
    border-right: 1px solid var(--bg-color) !important;
    overflow: hidden;
}

.form-wrap.form-builder .frmb .field-actions a:last-child {
    border-right: none !important;
}

.form-wrap.form-builder .frmb .field-actions a.del-button:before {
    content: "\f2ed" !important;
    font-family: "Font Awesome 6 Free" !important;
}

.formbuilder-icon-grid:before {
    position: relative;
    bottom: -4px;
}

.form-wrap.form-builder .frmb .field-actions a::before {
    margin: 0;
    /* color: #008eff; */
    color: var(--color);
}

.form-wrap.form-builder .frmb .field-actions .delete-confirm::before {
    color: #d14343 !important;
}

.form-wrap.form-builder .frmb .field-actions .btn,
.form-wrap.form-builder .frmb .sortable-options input[type="text"] {
    font-size: 13px !important;
    border: none;
}

.form-wrap.form-builder .frmb .field-actions .btn:hover {
    background-color: #f4f6fa !important;
}

.form-wrap.form-builder .frmb .form-elements {
    background: white !important;
    box-shadow: 0px 2px 18px 2px #d5d5d5;
    border: 1px solid #e9e9e9 !important;
    margin: auto !important;
    padding: 20px !important;
    height: auto;  
    max-height: 80%; 
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
   
    /* position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-86%, -50%); */
}

.form-wrap.form-builder .frmb .form-elements .false-label:first-child,
.form-wrap.form-builder .frmb .form-elements label:first-child {
    width: auto !important;
    margin-bottom: 4px !important;
    font-size: 14px;
    color: #101840;
    text-align: left !important;
}

.form-wrap.form-builder .frmb .form-elements .input-wrap {
    width: auto !important;
    margin-left: 0px !important;
    float: inherit !important;
}

.form-wrap.form-builder .frmb .form-elements .input-wrap label {
    font-size: 14px;
}

.input-wrap .fld-label {
    text-align: left;
}
 


.form-wrap.form-builder .frmb .frm-holder {
    position: fixed;
    left: 0px;
    right: 0px;
    width: 100%;
    margin: auto;
    z-index: 999;
    top: 0px;
    height: 100% !important;
    background: rgb(0 0 0 / 55%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.frm-holder .form-elements {
    width: 768px;
    /* min-height: calc(100vh - 100px);*/
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-shadow: none !important;
    position: fixed;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    top: 100px;
    left: 240px;
    z-index: 1000;
   
}

.frm-holder .form-elements .form-group.access-wrap {
    display: none !important;
}

.form-wrap.form-builder .frmb .form-elements .form-control {
    background: #fff !important;
    border: 1px solid #d8dae5 !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    color: #101840 !important;
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 14px !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
    /* height: 36px !important; */
    width: 100% !important;
}

.form-wrap.form-builder .frmb .sortable-options {
    background: #fff !important;
    border: 1px solid #d8dae5 !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    color: #101840 !important;
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 1em !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
    margin-left: 0 !important;
}

.form-group.required-wrap.ui-sortable-handle label {
    margin-left: 5px;
}
.hidden-field .form-group.name-wrap{
display: block !important;
}

.checkbox-group-field .form-group.inline-wrap,.checkbox-group-field .form-group.other-wrap {
  display: none !important;
} 
.form-group.inline-wrap,.form-group.other-wrap{
  display: block !important;
}
.date-field .form-group.min-wrap,.date-field .form-group.max-wrap,.date-field .form-group.step-wrap, .date-field .form-group.placeholder-wrap{
  display: none !important;
}
.header-field .form-group.subtype-wrap{
    display: block !important;
}
.image-field .form-group.description-wrap, .image-field .form-group.placeholder-wrap{
    display: none !important;
}
.image-field .form-group.required-wrap{
    display: none !important;
}

.select-field .form-group.multiple-wrap{
    display: none !important;
}
 
.file-field .form-group.multiple-wrap{
    display: none !important;
}

.form-group.className-wrap,
.form-group.name-wrap,
.form-group.value-wrap, .form-group.subtype-wrap 
 {
    display: none !important;
}
.formbuilder-icon-hidden, .formbuilder-icon-autocomplete, .formbuilder-icon-button{
    display: none !important;
}

.form-group.inline-wrap .input-wrap,
.form-group.other-wrap .input-wrap {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    gap: 6px !important;
}
.form-group.inline-wrap .input-wrap label,
.form-group.other-wrap .input-wrap label {
    margin-top: 8px !important;
}
.select-school-container{
    max-width: 700px;
    margin: 14px 0px;
}
.school-mail-container{
    margin: 14px 0px;
}
.form-label-resize{
    font-weight: 500 !important;
    /* font-size: 16px !important; */
}

.form-group.requireValidOption-wrap .input-wrap {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    gap: 6px !important;
}
.form-group.requireValidOption-wrap .input-wrap label {
    margin-top: 8px !important;
}

.form-wrap.form-builder .frmb li.form-field .close-field {
    /* display: none; */
    height: 33px;
    border: 1px solid #979797 !important;
    width: 67px;
    right: -13px !important;
    left: auto !important;
    bottom: auto !important;
    border-radius: 12px !important;
}

.form-wrap.form-builder.formbuilder-embedded-bootstrap .btn.btn-xs {
    padding: 5px 20px !important;
    font-size: 12px !important;
    line-height: 1.5;
    border-radius: 12px !important;
    color: white;
}

.form-wrap.form-builder.formbuilder-embedded-bootstrap
    .btn-group
    > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    color: #ffffff !important;
    /* background: #1976d2; */
    background: var(--bg-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-wrap.form-builder .frmb .form-elements .btn-group {
    display: flex;
    gap: 10px;
    min-width: 525px;
    max-width: 525px;
    margin-left: 0 !important;
}

.btn-default {
    /* background: #008eff !important; */
    background: var(--bg-color) !important;
    color: #fff !important;
    /* border: 1px solid #008eff !important; */
    border: 1px solid var(--bg-color);
    font-size: 14px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.formbuilder-button button {
    border-radius: 12px !important;
    color: white;
    width: 67px !important;
}

.formbuilder-button button:focus,
.formbuilder-button button:hover {
    color: white;
}

.form-wrap.form-builder .frmb .option-actions {
    text-align: left !important;
    margin-left: 0 !important;
}

.option-actions a.add.add-opt {
    color: #ffffff !important;
    /* background: #1976d2 !important; */
    background: var(--bg-color) !important;
    border-radius: 12px;
    text-align: center;
    padding: 9px 20px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.form-builder-dialog {
    width: 500px !important;
    position: absolute !important;
    left: 263px !important;
    overflow: hidden !important;
}

.form-group.access-wrap.ui-sortable-handle,
.form-group.required-wrap.ui-sortable-handle {
    display: flex !important;
    align-items: center;
}

.style-wrap label {
    min-width: 50px !important;
    max-width: 50px !important;
}

.form-wrap.form-builder
    .frmb
    .form-elements
    .input-wrap
    > input[type="checkbox"],
.form-wrap.form-builder .frmb .sortable-options-wrap {
    margin-left: 10px;
    /* margin-top: 9px; */
    color: var(--color);
    
}
.form-wrap.form-builder .formbuilder-radio-group input[type=radio]{
    color: var(--color) !important;
margin: 0px 4px !important;
}
.form-wrap.form-builder .frmb .sortable-options .option-selected {
    color: var(--color);
}
.form-check-input:checked {
    background-color: var(--bg-color) !important;
    border-color: var(--bg-color) !important;
}

.form-wrap.form-builder .frmb li.form-field:not(.header-field) {
    margin-top: 0px;
    background: transparent;
}

.form-group.access-wrap {
    display: flex !important;
    align-items: baseline;
}

/* Accordion */
/* .accordion-button span,
.accordionLabels,
.headerFooterLink span {
  font-size: 14px !important;
  text-decoration: none;
  color: #212529;
} */

.accordion-button {
    padding: 12px 3px 12px 8px !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.accordionLabels:hover {
    /* background-color: #e5f3ff !important; */
    background-color: var(--light-bg-color);
    /* color: #008eff !important; */
    color: var(--color) !important;
}

.accordion-button::after {
    transform: rotate(-90deg);
    position: absolute;
}

.tabWrap .accordion-item {
    border: none !important;
}

.tabWrap .accordion-item #collapseSix {
    height: calc(100vh - 250px);
    overflow: auto;
}

.tabWrap .accordion-body.toolsArea {
    border-bottom: 1px solid #d8dae5;
}

.tabWrap .styleArea {
    padding: 0px 7px 12px 7px;
}

.accordion-body.toolsArea ul {
    margin: 0;
    padding: 0;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background-color: white;
}

/* 
.accordion-body, .accordion-collapse {
    filter: none !important;  
    transform: none !important;  
}
.accordion-body {
    transform: translateZ(0);
} */

.accordion-body.toolsArea ul li {
    display: flex;
    position: relative;
    align-items: center;
    gap: 2px;
    width: 48%;
    border-radius: 5px !important;
    cursor: move;
    list-style: none;
    padding: 10px 10px 10px 30px;
    text-align: left;
    background: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border: 1px solid #d8dae5;
    font-size: 13px;
    height: 40px;
}

.accordion-body.toolsArea ul li span {
    font-size: 12px;
    font-weight: 500;
    color: #101840 !important;
}

.accordion-button:not(.collapsed) {
    /* background-color: #e5f3ff; */
    background-color: var(--light-bg-color);
    /* color: #008eff !important; */
    color: var(--color) !important;
}

.accordion-button:not(.collapsed) span {
    /* color: #008eff !important; */
    color: var(--color) !important;
}

.accordion-button span,
.headerFooterLink span {
    color: #151e23b2 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-decoration: none;
}

.accordionInnerLabel {
    font-size: 13px;
    /* background: url("/public/img/heading.svg"); */
}

.headerFooterLink {
    background: white;
    padding: 7px 9px 9px 16px;
    display: flex;
    justify-content: space-between;
}

.frmb.stage-wrap.ui-sortable li.form-field.activeLI {
    background: white;
    /* border-color: #008eff;
    box-shadow: 0px 0px 6px -1px #008eff; */
    border-color:var(--bg-color);
    box-shadow: 0px 0px 6px -1px var(--color);
}

.buildStyletab {
    width: 100%;
    background: white;
    gap: 22px;
    padding: 0px 24px 2px 12px;
    border: none;
}

.buildStyletab button {
    border: none !important;
    font-size: 14px;
}

.buildStyletab .nav-link:hover,
.nav-link.active {
    /* color: #008eff !important;
    border-bottom: 3px solid #008eff !important; */
    color: var(--color) !important;
    border-bottom: 3px solid var(--bg-color) !important;
}

.buildStyletab .nav-link {
    color: #696f8c;
    font-weight: 500;
    height: 37px !important;
}

.spacingBoxOuterWrap,
.spacingBoxOuterWrapMargin {
    height: 108px;
    display: flex;
    align-items: center;
    display: none;
}

.spacingBoxOuterWrap input,
.spacingBoxOuterWrapMargin input {
    width: 55px;
    position: absolute;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    padding: 0px 5px;
    text-align: center;
    height: 26px;
    font-size: 13px;
    bottom: 41px;
}

.spacingBoxOuterWrap input::placeholder,
.spacingBoxOuterWrapMargin input::placeholder {
    font-size: 13px;
}

.spacingBoxOuterWrap input:focus,
.spacingBoxOuterWrapMargin input:focus {
    outline: none;
}

.spacingBoxOuterWrap input.rightSpacing,
.spacingBoxOuterWrapMargin input.marginrightSpacing {
    right: 0;
}

.spacingBoxOuterWrap input.bottomSpacing,
.spacingBoxOuterWrapMargin input.marginbottomSpacing {
    left: 40%;
    bottom: 0;
}

.spacingBoxOuterWrap input.topSpacing,
.spacingBoxOuterWrapMargin input.margintopSpacing {
    top: 0;
    left: 40%;
}

.spacingBoxOuterWrap .boxInCenter,
.spacingBoxOuterWrapMargin .boxInCenterMargin {
    width: calc(100% - 130px);
    border: 2px dashed #d7d7d7;
    left: 65px;
    text-align: center;
    padding: 6px 0px;
    bottom: 34px;
}

.spacingBoxOuterWrap .boxInCenter span,
.spacingBoxOuterWrapMargin .boxInCenterMargin span {
    font-size: 13px;
    color: #747474;
}

input.giveHeightToImgInTools:focus {
    outline: none !important;
    box-shadow: none !important;
}

.borderStyleWrap input,
.giveStyleToimgToolWrap input.giveHeightToImgInTools {
    height: 30px;
    width: calc(100% - -120.67px);
    border-radius: 0.25rem;
    border: 1px solid #d8dae5;
    padding: 0px 4px 0px 5px;
    font-size: 14px;
}

.giveStyleToimgToolWrap .heightInPx {
    right: 0px;
    background: #f0ecec;
    padding: 2px 10px;
    font-weight: bold;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border: 1px solid #d8dae5;
    color: darkgrey;
    z-index: 1;
}

input:focus {
    outline: none !important;
    border: 1px solid #d8dae5 !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.borderStyleWrap {
    display: flex;
}

.borderTypeSelect {
    width: calc(100% - 60.33px);
    height: 30px;
    font-size: 14px;
    padding-top: 4px;
}

#uploadImg,
#uploadImgForHeader,
/* #uploadImgFormSetting, */
#uploadImgInModal,
#chooseFontFamilyInModal,
.chooseFontSizeInModal {
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #d8dae5;
    font-size: 14px !important;
}

#uploadImg:focus,
#uploadImgForHeader:focus {
    outline: none !important;
}

#uploadImg::file-selector-button,
#uploadImgForHeader::file-selector-button,
/* #uploadImgFormSetting::file-selector-button, */
#uploadImgInModal::file-selector-button {
    margin-right: 20px;
    border: none;
    /* background: #1976d2;
    border: 1px solid #1976d2; */
    background: var(--bg-color);
    border: 1px solid var(--bg-color);
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    padding: 3px 12px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
}

#file-upload-for-img-tool {
    width: 100%;
    border: 1px solid #dfdfdf;
    border-radius: 8px;
    height: 34px;
    padding: 5px 9px;
    font-size: 14px;
}

#file-upload-for-img-tool::file-selector-button {
    display: none;
}

input#favcolor::-webkit-color-swatch,
input#favcolorForHeader::-webkit-color-swatch,
input#borderColor::-webkit-color-swatch,
input#favTextColor::-webkit-color-swatch {
    border-radius: 5px;
    padding: 0;
    border: 1px solid #d8dae5;
}

input#favcolor:focus,
input#favcolor2ForHeader:focus,
input#borderColor:focus {
    border: none !important;
}

input#favcolor,
input#favcolor2ForHeader,
input#borderColor {
    /* -webkit-appearance: none; */
    padding: 0;
    border-radius: 5px !important;
    border: none;
    background: transparent;
}

span.new-span,
span.new-span,
span.new-span {
    display: block;
}

.formbuilder-icon-grid:before {
    display: none !important;
}

select.width-dropdown {
    border: none;
    background: white;
    /* color: #4db0ff; */
    color: var(--color);
    
   margin-top: -10px;
   outline: none !important;
   /* margin-right: 2px !important; */
    /* font-weight: bold; */
    width: 100%;
    white-space: nowrap;
   padding: 4px;
   box-sizing: border-box;
   font-family: 8px !important;
    /* text-align: center !important;sss */
    -webkit-appearance: none !important; /* Removes default styling for Webkit browsers */
    -moz-appearance: none !important; /* Removes default styling for Firefox */
    appearance: none !important; /* Removes default styling for newer browsers */
}
select.width-dropdown option {
  white-space: nowrap; /* Prevents wrapping of text in options */
  outline: none !important;
  -webkit-appearance: none !important; /* Removes default styling for Webkit browsers */
  -moz-appearance: none !important; /* Removes default styling for Firefox */
  appearance: none !important; 
}

select.width-dropdown:focus {
    outline: none !important;
    cursor: pointer;
    border: none !important;
    -webkit-appearance: none !important; /* Removes default styling for Webkit browsers */
    -moz-appearance: none !important; /* Removes default styling for Firefox */
    appearance: none !important; 
}
 

.form-wrap.form-builder .frmb .field-actions .btn:hover {
    background-color: white !important;
}

.width-button {
    padding-left: 0 !important;
     /* padding: 10px; */
}

.form-elements a.close-field {
    color: white !important;
    border: none !important;
    font-size: 0px !important;
    right: 10px !important;
}

.form-elements a.close-field:before {
    content: "Cancel";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #6c6c6c;
    border-radius: 100%;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* media query */
/* Base styling for the UL container */
.form-wrap.form-builder .stage-wrap {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next row */
  
  list-style: none; /* Optional: remove bullets if needed */
 
}
 
/* Media query for screen widths between 720px and 640px */
@media (max-width: 540px) {
  .form-wrap.form-builder .stage-wrap li {
      flex: 1 1 100%; /* One item per row */
      max-width: 100%; /* Ensure full width */
  }
}

.alert-worning{
    /* background: #fd4444; */
    color: white;
}

.form-type-line{
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.form-type-line label{
    margin-top: 4px;
    font-weight: normal !important;
}


.form-wrap.form-builder .cb-wrap,
.form-wrap.form-builder.formbuilder-embedded-bootstrap .form-control,
.target-div .form-wrap.form-builder,
.target-div ul.ui-sortable {
    width: 100% !important;
}
.form-wrap.form-builder.formbuilder-embedded-bootstrap .form-control {
    padding: 6px 23px 6px 7px !important;
}
.form-wrap.form-builder
    .stage-wrap
    > li:not(.hoverDropStyleInverse):not(.blankElementAddedTest) {
    min-width: 40%;

}

.form-wrap.form-builder .moveHighlight {
    background: white;
}
 

.form-wrap.form-builder .stage-wrap > .hoverDropStyleInverse {
    width: 20% !important;
    background: var(--bg-color) !important;
}

.blankElementAddedTest {
    border: 1px solid transparent !important;
    display: flex;
    /* background-color: red; */
    min-width: 100% !important;
    margin: 0 !important;
    height: 4px;
    padding: 0 !important;
}

/* .target-div .form-wrap.form-builder .stage-wrap{
  max-width: 717px !important;
} */

.form-wrap.form-builder .stage-wrap {
    flex-wrap: wrap;
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
}

#toolsArea {
    padding: 0 !important;
}

.tabWrap {
    width: 25%;
    max-width: 324px;
    background: white;
    height: 100%;
    position: relative;
}

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

::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(176, 176, 176);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: rgb(181, 177, 177);
    border-radius: 10px;
    cursor: pointer;
}

.chooseOptionToApply button,
.chooseAlignment button,
.chooseStyle button {
    background: white;
    font-size: 12px;
    border-radius: 5px;
}

#chooseOptionToApply ul.dropdown-menu.show {
    border-radius: 5px;
    padding: 0;
    min-width: 130px;
    max-width: 130px;
}

#chooseAlignment ul.dropdown-menu.show {
    border-radius: 5px;
    padding: 0;
    min-width: 141px;
    max-width: 141px;
}

.chooseOptionToApply ul.dropdown-menu.show a,
#chooseAlignment ul.dropdown-menu.show a,
#chooseStyle ul.dropdown-menu.show a {
    font-size: 12px;
}

#chooseBackground ul.dropdown-menu.show,
#chooseStyle ul.dropdown-menu.show {
    border-radius: 5px;
    padding: 0;
    min-width: 150px;
    max-width: 150px;
}

.colorsBox,
#uploadImg,
#uploadImgForHeader,
.colorsBoxForHeader,
.textColorHeaderWrap {
    display: none;
}

.colorsBox2 {
    display: none;
}

.chooseColorsWrap,
.chooseColorsWrapForHeader,
.textColorsBox,
.chooseBgColorInModal,
.chooseTextColorInModal {
    gap: 15px;
    height: 24px;
}

.chooseColorsWrap span,
/* .chooseColorsWrap input, */
.chooseColorsWrapForHeader span,
.chooseColorsWrapForHeader input,
.textColorHeaderWrap span,
.textColorHeaderWrap input {
    height: 24px !important;
    width: 26px !important;
    border-radius: 5px;
    cursor: pointer;
}

.chooseColorsWrap span:first-child,
.chooseColorsWrapForHeader span:first-child,
.textColorHeaderWrap span:first-child,
.chooseBgColorInModal span:first-child,
.chooseTextColorInModal span:first-child {
    background-color: rgb(255 207 207);
}

.chooseColorsWrap span:nth-child(2),
.chooseColorsWrapForHeader span:nth-child(2),
.textColorHeaderWrap span:nth-child(2),
.chooseBgColorInModal span:nth-child(2),
.chooseTextColorInModal span:nth-child(2) {
    background-color: orangered;
}

.chooseColorsWrap span:nth-child(3),
.chooseColorsWrapForHeader span:nth-child(3),
.textColorHeaderWrap span:nth-child(3),
.chooseBgColorInModal span:nth-child(3),
.chooseTextColorInModal span:nth-child(3) {
    background-color: green;
}

.chooseColorsWrap span:nth-child(4),
.chooseColorsWrapForHeader span:nth-child(4),
.textColorHeaderWrap span:nth-child(4),
.chooseBgColorInModal span:nth-child(4),
.chooseTextColorInModal span:nth-child(4) {
    background-color: #ffeb86;
}

.chooseColorsWrap span:nth-child(5),
.chooseColorsWrapForHeader span:nth-child(5),
.textColorHeaderWrap span:nth-child(5),
.chooseBgColorInModal span:nth-child(5),
.chooseTextColorInModal span:nth-child(5) {
    background-color: salmon;
}

.chooseColorsWrap span:nth-child(6),
.chooseColorsWrapForHeader span:nth-child(6),
.textColorHeaderWrap span:nth-child(6),
.chooseBgColorInModal span:nth-child(6),
.chooseTextColorInModal span:nth-child(6) {
    background-color: magenta;
}

.chooseColorsWrap span:nth-child(7),
.chooseColorsWrapForHeader span:nth-child(7),
.textColorHeaderWrap span:nth-child(7),
.chooseBgColorInModal span:nth-child(7),
.chooseTextColorInModal span:nth-child(7) {
    background-color: #d0adf3;
}

.activeColors {
    box-shadow: 0px 0px 4px 1px black;
}

.form-builder-dialog.data-dialog {
    overflow: auto !important;
}

.form-field.header-field {
    border-radius: 6px !important;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    margin: 1px !important;
}

.form-field.Image-field {
    width: 100%;
}

.frmb.stage-wrap.ui-sortable > li.form-field label.field-label {
    display: inline;
    vertical-align: middle;
    color: #212121;
    font-family: "Muli", sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.form-wrap.form-builder .frmb .required-asterisk {
    position: absolute;
    color: #f00;
    margin-left: 2px;
}

li.form-field .required-asterisk {
    display: inline-block;
}

.form-actions.btn-group {
    /* display: none; */
    position: absolute;
    bottom: 5px;
    left: 6px;
   
}
.form-actions.btn-group button{
    /* color: red !important; */
    border-radius: 6px !important;
}

#fb-editor {
    display: flex;
    height: calc(100vh - 118px);
    justify-content: space-between;
    
}

ul.frmb-control.ui-sortable > li.ui-sortable-handle:hover {
    /* border: 1px solid #008eff !important; */
    border: 1px solid var(--bg-color) !important;
 
}

.target-div {
    height: 100%;
}

.previewFormOuterDiv {
    height: 100% !important;
    background-repeat: no-repeat;
    background-size: cover;
}

.target-div > .form-wrap.form-builder {
    height: 100% !important;
    /* background-color: initial !important; */
    background-image: none !important;
}

.target-div .form-wrap.form-builder ul.ui-sortable {
    overflow: visible !important;
}

/* .target-div .form-wrap.form-builder ul.ui-sortable li:hover {
    background-color: transparent !important;
} */

.target-div .form-wrap.form-builder ul.ui-sortable li.activeLI {
    box-shadow: none !important;
}

.target-div .form-wrap.form-builder ul.ui-sortable li.blankElementAddedTest {
    border: none !important;
}

/* .form-wrap.form-builder ul.ui-sortable{
  padding: 0px 15px 10px 15px !important;
} */
/* li.blankElementAddedTest {
  background: red !important;
  margin-top: 10px !important;
} */
.spacingDisabledState {
    background: #f0ecec;
    padding: 3px;
    border-radius: 5px;
    color: #bdbdbd;
    border: 1px solid #d5d5d5;
}

select.borderTypeSelect.borderPixels:disabled,
select.borderTypeSelect.borderType:disabled {
    background: white;
    color: #b7b7b7;
}

/* .form-wrap.form-builder .frmb li.form-field{
  margin-top: 15px !important;
}

.form-wrap.form-builder ul.ui-sortable li.form-field:not(:first-child) {
  margin-top: 10px;
} */

.form-wrap.form-builder .frmb li.form-field .save-field.btn-default {
    display: flex;
    align-items: center;
    font-size: 13px;
    text-decoration: none;
    padding: 7px 20px !important;
    position: absolute;
    right: 98px;
    height: 33px;
    cursor: pointer;
}

/* Create Form Modal */

/* #createNewForm .createFormBtnInModal {
  background: #008EFF;
  color: #FFF;
  border: 1px solid #008EFF;
  border-radius: 12px;
} */

/* #createNewForm .cancelBtnInModal {
  border-color: #1018404D;
  color: #101840;
  opacity: .6;
  border-radius: 12px !important;
} */
#createNewForm .modal-body label {
    font-size: 14px;
}

#createNewForm .modal-body p {
    margin-bottom: 10px;
    font-size: 14px;
}

#createNewForm .modal-body input,
#createNewForm .modal-body select {
    font-size: 14px;
}

.formSiteNameTable thead tr th.actionCol {
    width: 200px;
}

.viewFormBtn {
    font-size: 16px;
    padding: 12px;
}

#fb-editor > .loaderIconWrap > svg.loader-icon {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#fb-editor > .loaderIconWrap {
    display: none;
    position: absolute;
    height: 100%;
    width: 100%;
    background: black;
    z-index: 2;
    opacity: 0.2;
}

.no-form-submit {
    border: none !important;
    min-height: 175px !important;
    max-height: 175px;
    background-color: white;
    margin-bottom: 30px;
    margin-top: 0 !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.no-form-submit > span.noItemsInThisForm {
    font-size: 18px;
    color: #b5b5b5;
}

.access-wrap .fld-access,
.multiple-wrap .fld-multiple {
    margin-top: 0 !important;
}

.formbuilder-icon-select,
.select-field {
    position: relative;
}

.formbuilder-select {
    position: relative;
}

.formbuilder-select:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #212529;
    right: 11px;
    bottom: 15px;
    display: inline-block !important;
    z-index: 9;
}

.headerStylingWrap {
    display: none;
}

.fontSelectWrap #fontSizeSelect,
.fontSelectWrap #fontFamilySelect {
    display: none;
    width: 100%;
    padding: 0px 0px 0px 5px;
    border-radius: 5px;
    border: 1px solid #d8dae5;
}

.tab-pane.fade .formSettingWrap,
.formShareWrap {
    background-color: white;
}

.tab-pane.fade .formSettingWrap input:focus,
.tab-pane.fade .formSettingWrap textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tab-pane.fade .formSettingWrap textarea,
.tab-pane.fade .formSettingWrap input {
    border-radius: 5px !important;
}

.tab-pane.fade .formSettingWrap label.form-label,
.tab-pane.fade .formSettingWrap label.form-check-label {
    font-size: 14px;
    font-weight: bold;
    /* margin: 0 !important; */
}

.tab-pane.fade .formSettingWrap div.form-text {
    font-size: 13px;
}

.tab-pane.fade .formSettingWrap .imagePreview {
    display: none;
    height: 220px;
    max-width: 389px;
    border-radius: 5px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.tab-pane.fade .formSettingWrap span.formNameAndDes,
.formShare-lightText {
    font-size: 14px;
}

.buildStyletab > .select2-container--default .select2-selection--single {
    border: none;
}

.buildStyletab
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    font-weight: bold !important;
    color: #696f8c !important;
    font-size: 14px !important;
}

.select2-dropdown.select2-dropdown--below.select2-dropdown {
    width: 200px !important;
}

.chooseColorsWrap span:hover,
.chooseColorsWrap input:hover,
.chooseColorsWrapForHeader span:hover,
.chooseColorsWrapForHeader input:hover,
.textColorHeaderWrap .textColorsBox span:hover,
.textColorHeaderWrap input:hover,
.chooseBgColorInModal span:hover,
.textColorHeaderWrap input:hover,
.chooseTextColorInModal span:hover,
.textColorHeaderWrap input:hover,
.chooseTextColorInModal .color-picker-wrapper:hover,
.chooseBgColorInModal .color-picker-wrapper:hover {
    scale: 1.2;
}

.formbuilder-date.form-group {
    position: relative !important;
    cursor: pointer;
}

.formbuilder-date input {
    cursor: pointer;
}

.formbuilder-date.form-group:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f073";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #726e6e;
    pointer-events: none;
}

.formbuilder-Image textarea {
    width: 100%;
    display: none !important;
}

.Image-field.form-field {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* .target-div .form-builder{
  overflow: hidden !important;
} */
li.form-field .prev-holder {
    height: auto !important;
}

li.form-field > .field-label,
.giveStyleToimgToolWrap {
    display: none;
}

.modal-body input#formName:focus {
    box-shadow: none !important;
}

.input-wrap label {
    color: black;
}

.btn-secondary {
    font-size: 14px;
}

.formbuilder-icon-radio-group > span,
.formbuilder-icon-select > span,
.formbuilder-icon-checkbox-group > span {
    display: flex;
    flex-wrap: wrap;
    width: 100px;
    white-space: normal;
    line-height: 13px;
    margin-left: 2px;
}

li.header-field span.tooltip-element,
li.button-field span.tooltip-element,
li.paragraph-field span.tooltip-element {
    display: none !important;
}

button:focus {
    box-shadow: none !important;
}

#toolsArea ul li.formbuilder-icon-checkbox-group:before {
    content: "";
    background: url(/img/checkboxnormal.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 20px;
    position: absolute;
    left: 2px;
    top: 7px;
}

#toolsArea ul li.formbuilder-icon-radio-group:before {
    content: "";
    background: url(/img/radio.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 20px;
    position: absolute;
    left: 2px;
    top: 7px;
}

#toolsArea ul li.formbuilder-icon-select:before {
    content: "";
    background: url(/img/dropdownnormal.svg);
    background-repeat: no-repeat;
    width: 24px;
    height: 20px;
    position: absolute;
    left: 2px;
    top: 7px;
}

#advanceSettingControls .accordion-item {
    border: none;
}

#advanceSettingControls .accordion-item h2#advanceSetting button {
    padding-left: 0 !important;
    background-color: white;
}

#advanceSettingControls .accordion-item h2#advanceSetting button span {
    /* color: #008EFF !important; */
    color: var(--color) !important;
    padding-left: 22px;
}

.color-picker-wrapper {
    position: relative;
    width: 26px;
    height: 23px;
    background-image: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
    border-radius: 5px;
    cursor: pointer;
}

.color-picker-wrapper input[type="color"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
}

.chooseBgColorInModal span,
.chooseTextColorInModal span {
    height: 24px !important;
    width: 26px !important;
    border-radius: 5px;
    cursor: pointer;
}

.formbuilder-header h1 {
    font-size: 40px;
}

#collapseAdvanceSetting .accordion-body .accordionInnerLabel,
.chooseFontSizeInModal,
#chooseFontFamilyInModal,
#uploadImgInModal {
    color: black;
}

#collapseAdvanceSetting .accordion-body span.accordionInnerLabel {
    text-align: left !important;
}

.formbuilder-shortAnswer input[type="shortAnswer"],
.formbuilder-time input[type="time"],
.formbuilder-phoneNumber input[type="phoneNumber"] {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
}

li.formbuilder-icon-shortAnswer {
    background-image: url(/img/short-answer.svg);
}

#advanceSetting .accordion-button.collapsed span {
    color: black !important;
    font-weight: 500 !important;
}

/* .activeColorsInModal,
.activeColorsInModal2{
  box-shadow: 0px 0px 4px 1px black;
} */
li.form-field:hover .field-actions {
    display: block !important;
}

.field-actions {
    display: none;
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
}

.custom-file-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    /* color: #008eff; */
    color: var(--color);
    font-weight: bold;
    /* background-color: #e5f3ff; */
    background-color: var(--light-bg-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
}

.custom-file-upload i.icon-image {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(/img/colorImage.svg) no-repeat center;
    background-size: contain;
}

.custom-file-upload input {
    display: none;
}

.file-name {
    margin-left: 10px;
    font-size: 14px;
    color: #666;
}

.selectSchoolAndTypeWrap {
    display: none;
}

#copyModel .modal-header button.btn-close {
    font-size: 10px;
}

#copyModel .modal-body form#copyForm label.form-label,
#copyModel .modal-body form#copyForm input#form-name,
#copyModel .modal-body form#copyForm select#selectSchoolCOPY {
    font-size: 14px;
}

.demoHeaderFieldForPreview {
    position: relative;
    overflow: auto;
    padding: 6px;
    font-size: 40px;
    font-weight: lighter !important;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    clear: both;
    margin-left: 0;
    margin-bottom: 3px;
    background-color: #fff;
    transition: background-color 250ms ease-in-out, margin-top 400ms;
    border-radius: 10px !important;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 72px;
    background: white;
    /* border-color: #008eff;
    box-shadow: 0px 0px 6px -1px #008eff; */
    border-color: var(--bg-color);
    box-shadow: var(--bg-color);
    display: flex;
    align-items: center;
}
li.form-field .prev-holder div.checkbox-group .formbuilder-checkbox {
    display: flex;
    align-items: baseline;
}
/* THANKYOU FOR SUBMITTING PAGE CSS */

.thankyouPageWrap {
    height: 100%;
}

.thankyouPageWrap .wrapper-1 {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center;
}

.thankyouPageWrap h1 {
    font-family: "Kaushan Script", cursive;
    font-size: 4em;
    letter-spacing: 3px;
    color: var(--color);
    margin: 0;
    margin-bottom: 20px;
}

.thankyouPageWrap .wrapper-1 p {
    margin: 0;
    font-size: 1.3em;
    color: #aaa;
    font-family: "Source Sans Pro", sans-serif;
    letter-spacing: 1px;
}
a.link-copy,
a.link-view,
a.link-edit {
    /* background-color: #e5f3ff; */
    background-color: var(--light-bg-color);
    background-position-x: 5px;
    border-radius: 5px;
    /* color: #008eff; */
    color: var(--bg-color) !important;
    font-weight: 500;
    padding: 3px 7px 3px 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    cursor: pointer;
}
.image-preview{
   
     
 
    position: relative;
     display: flex;
     flex-direction: row;
     justify-content: end;
}
.image-preview img{
   
   max-width: 70px;
    max-height: 70px !important;
 
  
}

.questionMarkInShareForm {
    border: #565656 1px solid;
    border-radius: 100%;
    padding: 1px 6px;
    color: #565656;
    text-decoration: none;
}
div#pills-formShare {
    height: calc(100vh - 118px);
}
.formShareWrap {
    height: 100%;
}
select.selectFieldInDateField {
    background: #fff !important;
    border: 1px solid #d8dae5 !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    color: #101840 !important;
    display: inline-block !important;
    font-family: inherit !important;
    font-size: 14px !important;
    padding: 6px 10px !important;
    vertical-align: middle !important;
    /* height: 36px !important; */
    margin-bottom: 20px;
    width: 100% !important;
}
input#form-link-url {
    font-size: 14px !important;
}


/* //for modal save edit button  */
.button-container{
    margin-bottom: 20px;
    position: sticky;
    bottom:20px;
}
.share-modal{
    background: var(--bg-color);
    color: white;
}
.share-modal button{
    color: white !important;
}

.draftSubmitBtn button{
    background-color: black !important;
    color: white !important;
    box-shadow: rgba(241, 247, 253, 0.2) 0px 8px 24px;
}

.select-date{
    position: relative;
    display: inline-block;
    cursor: pointer;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
/* Input Field */
.select-date input {
    outline: none !important;
    width: 100%; /* Adjust as needed */
    border: none !important;
    padding: 0px;
    padding-right: 20px; /* Space for the icon */
}
.select-date input:focus{
    border: none !important; /* Hide border on focus */
    
}
.select-date .mailDateRangePicker{
    outline: none !important;
    border: none !important;
}
.select-date .mailDateRangePicker:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Calendar Icon Styling */
.calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #555;
    /* pointer-events: none;     */
    cursor: pointer;
}
.downloadFileIcon{
    color:var(--bg-color);
    padding-top: 4px;
}
.button-input:focus{
    border: none !important;
    appearance: none;
}