/*
**********************************************************************

FORMS

**********************************************************************
*/
.leftbanner:hover {
  left: 0px !important;
}

.cbforms .cbforms-page-back-icon, .cbforms .cbforms-page-next-icon {
  font-size: 18px;
}

.form-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.event-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.form-bulk-action-buttons,
.bulk-action-buttons,
.event-bulk-action-buttons,
.plan-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}


.add-new-form-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}

.add-new-event-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}

#formlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
}

#formlisttitlebar div {
  white-space: nowrap;
}

#entitylisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

.entityedit #entitylisttitlebar {
  background: var(--cbf-deep-orange);

}

#entitylisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.entitylistrow {
  padding-left: 20px;
  height: 2.8rem;
}

#contactcaseslist .entitylistrow {
  height: 2.8rem;
}

.entitylistrow div,
.entitylistrow div h5 {
  white-space: nowrap;
  text-align: left;
  /* display: block;  */
}

.entitylistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}

.entitycolumn,
.entitylistcolumn {
  display: flex;
}


#eventlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#eventlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.formlistrow {
  height: 2.8rem;
}

.eventlistrow {
  padding-left: 20px;
  height: 2.8rem;
}

.eventlistrow div,
.eventlistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.eventcolumn,
.eventlistcolumn {
  display: flex;
}

.formcolumn {
  display: flex;
}

.eventlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}

.formeditheader {
  justify-content: space-between;
}

.eventeditheader {
  justify-content: space-between;
}

.formeditformname,
.eventediteventname,
.entityditformname,
.contactfullnametitlebar {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 20vw 0 0; */
  gap: 20px;
}

.contactfullnametitlebar {
  gap: 0px;
}

.formeditformname .formstatus {
  margin: 0 0 0 auto;
}

.eventediteventname .eventstatus,
.entityeditentityname .entitystatus {
  margin: auto;
}

.formrefreshicon {
  font-size: 35px;
  font-weight: 400;
  color: var(--cbf-orange);
  cursor: pointer;
  /* z-index: -1; */
  position: relative;
  margin-right: 15px;
}

.formeditformname {
  margin: auto;
  text-align: center;
  /* min-width: 450px; */
}

.eventediteventname,
.entityeditentityname {
  margin: auto;
  text-align: center;
  column-gap: 50px;
  flex-wrap: wrap;
}

.fixformeditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixformeditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}

.fixeventeditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixeventeditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}

#formnametitle,
#eventnametitle {
  display: flex;
  padding-left: 40px;
}

.formselect {
  margin: 3px 10px auto;
  scale: 1.1;
}

.formselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}

.eventselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}

.entityselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}

.eventselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}

.entityselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}

.formnametext h3 {
  margin-bottom: 0;
}

.eventnametext h3 {
  margin-bottom: 0;
}

.formname:hover .formactions {
  visibility: visible;
}

/* .formname {
  flex: 1;
} */

.formnametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singleformaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singleformaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.formactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}

.eventname:hover .eventactions,
.entityname:hover .entityactions {
  visibility: visible;
}

.entityname, .eventname {
  flex: 1;
}

.eventnametext:hover,
.entitynametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}


.singleeventaction:hover,
.singleentityaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singleeventaction[action="delete"]:hover,
.singleentityaction[action="delete"]:hover,
.singleentityaction[action="deletecase"]:hover,
.singleentityaction[action="removetag"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.singleentityaction[action="unregister"]:hover,
.singleentityaction[action="refund"]:hover,
.singleentityaction[action="unregisterandrefund"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.eventactions,
.entityactions {
  visibility: hidden;
  color: var(--cbf-green);
  position: absolute;
  margin-top: -1px;
}


#contactcaseslist .entityactions {
  margin-top: 0px;
}

.formiframe {
  text-align: center;
}

.formexternallinks:hover {
  cursor: pointer;
}

.formexternallinks {
  font-size: 2rem;
}

.formupdatedate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.formstatus,
.formid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}


.eventdate p,
.entitydate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.eventstatus,
.eventid,
.entitystatus,
.entityid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.eventregisterednumber, .eventwaitlistnumber {
  font-size: 18px;
  font-weight: 500;
}

#previewtab #formhtmlpreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
  width: 100%;
  /* max-width: 1100px; */
  margin: auto;
}

.formviewfieldwrap {
  display: flex;
  flex-direction: column;
  min-height: 45px;
  flex: 1;
}

.formviewfieldwrap * {
  width: 100%;
  padding: 0 5px;
}

.formviewparagraph * {
  padding: 0;
}

.formviewparagraph {
  padding: 10px 20px;
}

a {
  outline: none;
}

.formviewparagraph a {
  color: var(--cbf-blue);
}

.formviewfieldwrap .bordered {
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  padding: 10px;
  border-color: #dddddd;
}

.formviewfieldwrap div {
  width: 100%;
}

.formviewlabel {
  white-space: nowrap;
  text-wrap: nowrap;
  min-height: 2rem;
  text-align: left;
  font-weight: 700;
  display: flex;
  align-items: end;
  margin-bottom: 0px;
  padding-left: 8px;
}

.formviewfield {
  display: flex;
  min-height: 45px;
  flex: 1;
}

.formviewfield:has(.stripe_payment_element) {
  flex-direction: column;
}

.formviewrow:has(.formviewfieldwrap) {
  margin: 25px auto 0;
}

.formviewrow:has(.formviewspacer) {
  margin: 0 auto 0;
}

.formviewsubmitbutton {
  min-height: 140px;
}

.formviewdescription {
  white-space: nowrap;
  text-wrap: nowrap;
  height: 1rem;
  text-align: left;
  font-weight: 400;
  font-size: 0.9rem;
  margin-top: 2px;
  padding-left: 10px;
  /* margin-bottom: 15px; */
}

.cbforms-textlocation-top.cbforms-multilinefield .formviewcheckbox input,
.cbforms-textlocation-bottom.cbforms-multilinefield .formviewcheckbox input,
.cbforms-textlocation-top.cbforms-multilinefield .formviewradiooption input,
.cbforms-textlocation-bottom.cbforms-multilinefield .formviewradiooption input {
  margin-left: 30px;
}

.cbforms-textlocation-top.cbforms-singlelinefield .formviewcheckbox input,
.cbforms-textlocation-bottom.cbforms-singlelinefield .formviewcheckbox input,
.cbforms-textlocation-top.cbforms-singlelinefield .formviewradiooption input,
.cbforms-textlocation-bottom.cbforms-singlelinefield .formviewradiooption input {
  margin-left: 30px;
}

.published,
.cbforms-enabled {
  color: var(--cbf-green);
  font-size: 1.2rem;
}

.draft,
.cbforms-disabled {
  color: var(--cbf-orange);
  font-size: 1.2rem;
}

.ql-tooltip {
  position: static !important;
}

/* sizing and aligning fields 

    flex: 0;
    flex-basis: 50%;
    margin: 0 0 0 auto;


    */

/*
**********************************************************************

Templates

**********************************************************************
*/

.template-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}

.add-new-template-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}

.save-form-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}

.save-event-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}

#templatelisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
}

#templatelisttitlebar div {
  white-space: nowrap;
}

.templatecolumn {
  display: flex;
}

#templatenametitle {
  flex: 1;
}

.templateselect {
  margin: 7px 10px auto;
  scale: 1.1;
}

.templateselect [type="checkbox"] {
  width: 18px;
  height: 18px;
}

.templatenametext h3 {
  margin-bottom: 0;
}

.templatename:hover .templateactions {
  visibility: visible;
}

/* .templatename {
  flex: 1;
} */

.templatenametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singletemplateaction:hover {

  color: var(--cbf-blue);
  cursor: pointer;
}

.singletemplateaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.templateactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}

.templateiframe p {
  margin-top: 10px;
  white-space: nowrap;
}

.templateupdatedate p {
  margin-top: 10px;
  white-space: nowrap;
}

.templatestatus {
  margin-top: 10px;
  white-space: nowrap;
}

li[data-list="bullet"]:not(.ql-editor li[data-list="bullet"]) {
  list-style: outside;
}

/*
**********************************************************************

Survey Templates

**********************************************************************
*/

.surveytemplate-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}

.add-new-surveytemplate-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}

.save-form-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}


#surveytemplatelisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
}

#surveytemplatelisttitlebar div {
  white-space: nowrap;
}

.surveytemplatecolumn {
  display: flex;
}

#surveytemplatenametitle {
  flex: 1;
}

.surveytemplateselect {
  margin: 7px 10px auto;
  scale: 1.1;
}

.surveytemplateselect [type="checkbox"] {
  width: 18px;
  height: 18px;
}

.surveytemplatenametext h3 {
  margin-bottom: 0;
}

.surveytemplatename:hover .surveytemplateactions {
  visibility: visible;
}

/* .surveytemplatename{
  flex:1;
} */
.surveytemplatenametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singlesurveytemplateaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singlesurveytemplateaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.surveytemplateactions {
  visibility: hidden;
  color: var(--cbf-green);
  margin-top: -1px;
}

.surveytemplateiframe p {
  margin-top: 10px;
  white-space: nowrap;
}

.surveytemplateupdatedate p {
  margin-top: 10px;
  white-space: nowrap;
}

.surveytemplatestatus {
  margin-top: 10px;
  white-space: nowrap;
}

/*
**********************************************************************

Forms Edit

**********************************************************************
*/

#backtotop {
  display: inline-block;
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-size: cover;
  background-position: center center;
  cursor: pointer;
  width: 60px;
  height: 60px;
  z-index: 50;
}

#backtotop .upicon {
  font-size: 34px;
}

#backtotop a {
  border-radius: 50%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  background-color: var(--cbf-ocean);
  color: var(--cbf-white);
  opacity: 0.7;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.formeditwrap {
  min-height: 750px;
}

.formedit .editpanel {
  flex: 0 0 80%;
  max-width: 80%;
  /* max-height:1200px; */
}

.formedit .editpanel .editedform {
  max-height: 2700px;
  overflow: auto;
}

.formedit .toolspanel {
  flex: 1;
  max-width: 460px;
  min-width: 19%;
  /* max-height: 1000px; */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 2px;
}

.formedit .toolspanel .toolbox {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  align-items: center;
  /* max-height: 100%; */
  overflow-y: auto;
  margin: 5px;
  padding-bottom: 10px;

  overflow-x: hidden;
}

.eventeditwrap {
  min-height: 750px;
}




#toolssettingstab .toolbox {
  display: block;
}

.fieldbox,
.templatebox {
  background-color: #f9f9f9;
  border-color: #cccccc;
  border-width: 2px;
  width: 5vw;
  height: 6vw;
  min-width: 70px;
  border-radius: 5px;
  border-style: solid;
  box-shadow: 1px 1px 2px #dddddd !important;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-evenly;
  line-height: 1;
  cursor: grab;
  aspect-ratio: 1 / 1;
  font-size: 0.9vw;
  padding: 10px;
  text-align: center;
  /* gap:10px; */
  max-height: 95px;
}

.fieldbox .icon,
.templatebox .icon {
  color: var(--cbf-green);
  font-size: 24px;
  margin-bottom: 10px;
}

#tabgrouptools {
  gap: 3px;
  flex-wrap: wrap;
  margin: 0 5px;
}

#tabgrouptools .underlined-button-div {
  flex: 1;
}

#tabgrouptools .underlined-button-div .cbfbtn {
  width: 100%;
}

.formfieldcontainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.fieldwrap [type="description"] {
  min-height: 20.73px;
}

.fieldwrap label {
  min-height: 24px;
}

.formfieldcontainer:has([type="verticalline"]) {
  justify-content: center;
}

.formfieldedits {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding-right: 35px;
  visibility: hidden;
}

.drag-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: grab;
}

.edit-icons,
.drag-icons {
  display: flex;
  margin-right: 25px;
}

.divwithtooltip {
  position: relative;
}

.divwithtooltip:has(.help:hover) .tooltiptext {
  display: block;
}

.divwithtooltip:has(.showtip:hover) .tooltiptext {
  display: block;
}

.divwithtooltip .tooltiptext {
  display: none;

  min-width: 120px;
  background-color: #fcfcfc;
  color: #555555;
  text-align: left;
  padding: 5px 10px;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #dddddd;
  position: absolute;
  z-index: 1;
}

.divwithtooltip .tooltiptext:hover {
  display: block;
}

.divwithtooltip:hover .tooltiptext {
  display: block;
}

.divwithtooltip:has(.dropdownmenu-wrap:hover) .tooltiptext {
  display: none;
}

.fieldwithtooltip {
  position: relative;
}

.fieldwithtooltip:has(.help:hover) .tooltiptext {
  display: block;
}

.fieldwithtooltip:has(.showtip:hover) .tooltiptext {
  display: block;
}

.fieldwithtooltip .tooltiptext {
  display: none;
  width: min(600px, 90vw);
  min-width: 120px;
  background-color: #fcfcfc;
  color: #555555;
  text-align: left;
  padding: 5px 10px;
  border-radius: 6px;
  border-style: solid;
  border-width: 2px;
  border-color: #dddddd;
  position: absolute;
  z-index: 1;
  top: 20px;
}

.fieldwithtooltip .tooltiptext:hover {
  display: block;
}


#fieldsettingstabwrapper .tooltiptext {
  width: 100%
}

#fieldsettingstabwrapper .material-symbols-outlined,
#formsettingstabwrapper .material-symbols-outlined {
  font-size: 20px !important;
}

.formeditwrap h1,
.formeditwrap h2,
.formeditwrap h3,
.formeditwrap h4,
.formeditwrap h5,
.formeditwrap h6 {
  display: block;
}

.eventeditwrap h1,
.eventeditwrap h2,
.eventeditwrap h3,
.eventeditwrap h4,
.eventeditwrap h5,
.eventeditwrap h6 {
  display: block;
}

.help {
  display: none;
}

.fieldwithtooltip .help {
  display: inline-block;
  margin: 0 4px 0 0;
  color: #d2691e70;
  cursor: pointer;
}

.formfieldbox {
  display: flex;
  flex-direction: column;
  padding: 3px;
  width: 100%;
  height: 100%;
  border-style: none;
  border-color: var(--cbf-green);
  justify-content: center;
  z-index: -1;
}

.formfieldbox:has([type="radio"], [type="checkbox"]) {
  flex-direction: row-reverse;
  justify-content: start;
  align-items: center;
}

.fieldwrap[type="checkbox"] .formfieldbox,
.fieldwrap[type="radio"] .formfieldbox {
  max-height: 65px;
  flex: 1;
}

[type="radio"],
[type="checkbox"] {
  margin-right: 10px;
}

.formfieldbox label {
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.formfieldbox .formfield {
  min-height: 50px;
  width: 99%;
  /* z-index: -1; */
}

.formfieldbox .formfield.horizontalline {
  min-height: 1px;
  background-color: #333333;
  height: 5px;
  margin: auto;
}

.formfieldbox .formfield.verticalline {
  min-height: 5px;
  width: 5px;
  background-color: #333333;
  height: 80%;
  margin: auto;
}

.formfieldbox .formfield[type="checkbox"],
.formfieldbox .formfield[type="radio"] {
  min-height: 20px;
}

.formfieldbox textarea.formfield {
  height: 200px;
}

.formfieldbox .formfield[type="checkbox"] {
  height: 20px;
  width: 20px;
}

.formfieldbox .formfield[type="radio"] {
  height: 20px;
  width: 20px;
}

.formfieldbox .formfield[type="currency"] {
  width: calc(100% - 20px);
  margin-left: 5px;
}

.formfieldcontainer:hover>.formfieldbox {
  /* border-style: solid !important; */
  /* border-color: #eeeeee; */
}

.formfieldcontainer:hover {
  background-color: #95ffff10;
}

.formfieldcontainer:hover .formfieldedits {
  visibility: visible !important;
}

.field-edits-icon {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  cursor: pointer;
}

.droplocation {
  width: 200px;
  height: 5px;
  background-color: var(--cbf-drop-location-white);
  margin: 0 auto;
  position: relative;
  top: 30px;
}

.pagebreak {
  text-align: center;
  white-space: pre;
}

#submitbutton.formfieldcontainer {
  padding-top: 30px;
  margin-bottom: 40px;
}

.formsubmitbutton {
  /* text-align: center; */
  display: flex;
  padding-top: 40px;
}

.formsubmitbutton .btn {
  /* width: 30%; */
}

.tabcontainer[tabgroup="tools"] {
  padding: 10px 0;
}

.fieldsettingslabel {
  font-size: 14px;
  font-weight: 700;
  margin: 0px 5px 0 0;
}

.fieldsettingssectionlabel {
  color: var(--cbf-green);
  font-weight: 400;
}

.fieldsettingsinput {
  /* min-width: 40%; */
  max-width: 82%;
  height: 35px;
  font-size: 14px;
  border-width: 2px;
  border-color: #dddddd;
  border-style: solid;
  border-radius: 5px;
  margin: 5px;
  margin-bottom: 16px;
  padding: 5px;
}

.fieldsettingsinput[type="checkbox"] {
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin: 5px;
}

.fieldsettingsinput[type="radio"] {
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin: 5px;
}

.fieldsettingsinput.fullwidth {
  width: 82%;
}

.fieldsettingsinput.halfwidth {
  width: 45%;
}

.optionfield {
  display: flex;
  align-items: center;
}

.optionfield .help {
  margin-bottom: 10px;
}

.formeditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}

.eventeditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.formstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}

.eventstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}



.formeditinput {
  width: 300px;
  height: 45px;
  font-size: 16px;
  border-width: 2px;
  border-color: #dddddd;
  border-style: solid;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  color: var(--cbf-text);
}

#formeditformname {
  margin-left: 0;
}

.entityedit .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px;
  margin-bottom: 100px;
  border-radius: 5px;
  /* margin-left: 100px; */
  width: calc(90% - 100px);
}

.entityedit .listwrapper {
  /* max-width: 1500; */
  margin: auto;
  /* margin-top: 20px;
  padding: 10px; */
  margin-bottom: 50px;
  min-height: 500px;
  /* margin-left: 100px;
  width: calc(90% - 50px); */
}

.listwrapper {
  /* max-width: 1500; */
  margin: auto;
  /* margin-top: 20px;
  padding: 10px; */
  margin-bottom: 50px;
  min-height: 600px;
  /* margin-left: 100px;
  width: calc(90% - 50px); */
}

.paginationbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 250px;
  justify-content: center;
  margin-bottom: 50px;
  font-size: 18px;
  color: var(--cbf-green);

}

.navigationrefreshicon, .paginationrefreshicon {
  font-size: 35px;
  font-weight: 400;
  color: var(--cbf-white);
  cursor: pointer;
  /* z-index: -1; */
  position: relative;
  margin-right: 15px;
}

.paginationprevious,
.paginationnext {
  transition: .3s;
}

.paginationprevious:hover,
.paginationnext:hover {
  color: var(--cbf-ocean);
  scale: 1.14;
  cursor: pointer;
}

.eventeditinput {
  width: 300px;
  height: 45px;
  font-size: 16px;
  border-width: 2px;
  border-color: #dddddd;
  border-style: solid;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  color: var(--cbf-text);
}




#formsettingstabwrapper {
  max-width: 1300px;
  margin: auto;
  width: 100%;
}

#conditionstabwrapper,
#calculatedfieldstabwrapper {
  max-width: min(1300px, 100%);
  margin: auto;
  width: 100%;
}

#stripecheckoutmanagementwrapper,
#squarecheckoutmanagementwrapper,
#stripepaymentmanagementwrapper,
#squarepaymentmanagementwrapper {
  max-width: min(1400px, 90%);
  margin: auto;
  width: 100%;
  padding-left: 100px;
}

.cancelcheckoutwrapper,
.cancelpaymentwrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: end;
  margin-top: 30px;
}

#invitationstabwrapper {
  max-width: 1100px;
  margin: auto;
  width: 100%;
}

#formsettingstabwrapper .cbs-box-body .fields {
  flex: 1;
}

#formsettingstabwrapper .formbannerfilename {
  margin: auto;
  padding: 0 50px;
  font-weight: 700;
  font-size: 18px;
}

#formsettingstabwrapper .formsettingscolorpicker {
  width: 100px;
  height: 100px;
  position: relative;
  left: -10px;
  top: -10px;
}

#formsettingstabwrapper .formsettingscolorpickerwrapper {
  border-radius: 50%;
  width: 60px;
  overflow: hidden;
  height: 60px;
  border-color: #dddddd;
  border-style: solid;
  border-width: 2px;
}

#formsettingstabwrapper .formsettingscolorpicker:hover {
  cursor: pointer;
}

.formsettingslabel {
  font-size: 14px;
  font-weight: 700;
  margin: 0px 5px 0 5px;
}


.formsettingsinput {
  min-width: 40%;
  height: 30px;
  font-size: 14px;
  border-width: 2px;
  border-color: #dddddd;
  border-style: solid;
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
}

.entityedit input[type="text"], .formsettingsinput {
  width: 250px;
  height: 35px;
  border-width: 2px;
  border-radius: 5px;
  border-style: solid;
  border-color: #dddddd;
  padding: 0 0 0 10px;
}

.formsettingsinput[type="file"] {
  padding: 10px;
  height: auto;
}

.cbs-box-body {
  .formsettingsinput {
    /* min-width: 60%; */
  }
}

.formsettingsinput[type="checkbox"] {
  min-width: 20px;
  width: 20px;
  height: 20px;
}

.formsettingsinput[type="radio"] {
  min-width: 20px;
  width: 20px;
  height: 20px;
}

.formsettingsinput.fullwidth {
  width: 90%;
}

.formsettingsinput.halfwidth {
  width: 50%;
}

.formsettingsinput.fourthwidth {
  width: 25%;
}

/*
.dropdownmenu-wrap{ 
  position: absolute;
  top: 30px;
  left: 10px;
  background-color: #f4f4f4;
  border-style: solid;
  border-radius: 3px;
  border-width: 1px;
}
 

.dropdownmenu{
  display:flex;
  flex-direction: column; 
}
.dropdownmenu div:hover{
  background-color:#dce5f7;
}

.dropdownmenu div{

  white-space: nowrap;
  padding:0px 10px;
}


*/

.formviewparagraph p {
  margin-top: 0;
  margin-bottom: 0;
}

.field-option-title {
  font-size: 1rem;
  color: var(--cbf-ocean);
}

.settings-row {
  margin: 10px auto;
}

.fieldsizeoption {
  flex: 1;
  text-align: center;
  cursor: pointer;
  width: 50px;

  &:hover {
    background-color: #f4f4f4;
  }
}

.formrow {
  display: flex;
  flex-direction: column;
}

.fieldwrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 1%;
}

.fieldgroup {
  display: flex;
  justify-content: space-between;
}

[type="description"] {
  padding-left: 10px;
  white-space: nowrap;
}

.fieldgroup:has([type="hiddenfield"], [type="pagebreak"]) {
  width: 35%;
}

.fieldgroup:has([type="pagebreak"]) {
  width: 80%;
  margin: auto;
}

.virtical-drop-wrap {
  display: flex;
}

.vertical-drop {
  width: 5px;
  height: 40%;
  margin: auto 10px 30px;
  background-color: var(--cbf-drop-location-white);
}

.fieldwrap:has(.verticalline) .formfieldbox * {
  /* max-width: 30px; */
  min-height: 30px;
}

.fieldwrap:has(.verticalline) {
  /* max-width: 30px; */
  min-height: 30px;
}

.fieldwrap:has(.verticalline) .formfieldbox {
  /* max-width: 30px; */
  min-height: 30px;
}

.checkboxwrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: -1;
}

.radiowrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: -1;
}

.fixedformtoolbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  background-color: #dce5f7;
}

#settingstab {
  justify-content: center;
  display: flex;
  flex-direction: column;
}

input[type="file"] {
  height: 80px;
  padding: 30px 5px 0 20px;
  font-size: 16px;
  letter-spacing: 2px;
}

.cbforms-singlelinefield {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.formscrollupdiv {
  background-color: var(--cbf-drop-location-white);
  height: 50px;
  width: 50px;
  position: fixed;
  left: min(100px, 6vw);
  top: 30vh;
  color: var(--cbf-orange);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: -1;
}

.formscrolldowndiv {
  background-color: var(--cbf-drop-location-white);
  height: 50px;
  width: 50px;
  position: fixed;
  left: min(100px, 6vw);
  top: 75vh;
  color: var(--cbf-orange);
  /* display: flex; */
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  z-index: -1;
}

.formeditscrollup {
  font-size: 30px;
  /* position: fixed;
  left: min(120px, 7vw);
  top: 28vh;
  color: var(--cbf-orange);
  z-index: -1; */
}

.formeditscrolldown {
  font-size: 30px;
  /* position: fixed;
  left: min(120px, 7vw);
  top: 86vh;
  color: var(--cbf-orange);
  z-index: -1; */
}

.cbforms-multilelinefield {
  display: flex;
  flex-direction: column;
}

.cbforms-textlocation-left [type="radio"],
.cbforms-textlocation-left [type="checkbox"] {
  margin-left: 0px;
}

.cbforms-textlocation-left label {
  padding-right: 10px;
}

.cbforms-textlocation-right label {
  padding-left: 10px;
}

.cbforms-textlocation-right [type="radio"],
.cbforms-textlocation-right [type="checkbox"] {
  margin-right: 0px;
}

.cbforms-textlocation-top .formviewradiooption,
.cbforms-textlocation-top .formviewcheckbox,
.cbforms-textlocation-top .formfieldbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cbforms-textlocation-right .formviewradiooption,
.cbforms-textlocation-right .formviewcheckbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: left;
}

.cbforms-textlocation-bottom .formviewradiooption,
.cbforms-textlocation-bottom .formviewcheckbox,
.cbforms-textlocation-bottom .formfieldbox {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

.cbforms-textlocation-left .formviewradiooption,
.cbforms-textlocation-left .formviewcheckbox {
  display: flex;
  flex-direction: row;
  justify-content: left;
}

.cbforms-textlocation-left .formfieldbox {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.cbforms-textlocation-right .formfieldbox {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.cbforms-textlocation-top input,
.cbforms-textlocation-bottom input {
  margin-left: 30px;
}

.expandtoolsbar {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.expandtoolsicon {
  font-weight: 100;
  color: var(--cbf-orange);
  cursor: pointer;
}

.toolspaneldragged {
  position: fixed;
  padding: 20px !important;
  background-color: #f4f4f4;
  width: 550px;
  max-width: 650px !important;
  max-height: 95vh !important;
}

.collapsetoolsicon {
  font-weight: 100;
  color: var(--cbf-orange);
  cursor: pointer;
}

.formedit.fixtoolspanel .toolspanel {
  position: fixed;
  width: 74vw;
  max-width: 100vw;
  top: 0 !important;
  left: 10vw !important;
  z-index: 10;
  background-color: #dfdfdf;
  padding: 10px 20px 0px 20px;
}

.formedit.fixtoolspanel.toolspanelabsolute .toolspanel {
  position: fixed;
  height: auto;
  max-height: 100vh;
  overflow-y: scroll;
}

.formedit.fixtoolspanel .editpanel {
  flex: 1;
  max-width: 100%;
}

.formedit.fixtoolspanel .fixformeditunderline {
  display: none;
}

.formedit.fixtoolspanel .editpanel {
  top: 90px;
  position: relative;
}

.formedit.fixtoolspanel .toolbox {
  justify-content: center;
}

.formedit.fixtoolspanel.toolspanelabsolute .editpanel {
  /* top: 300px; */
}

.formsettingsrow {
  display: flex;
  gap: 50px;
}

.newconditionwrapper,
.newcalculationwrapper {
  color: var(--cbf-orange);
  display: flex;
  gap: 15px;
  height: 100px;
  justify-content: right;
  align-items: center;
  max-width: 90%;
}

.newcheckoutwrapper, .newlineitemwrapper {
  color: var(--cbf-orange);
  display: flex;
  gap: 15px;
  height: 100px;
  justify-content: right;
  align-items: center;
  max-width: 75%;
}

.newrulewrapper {
  color: var(--cbf-green);
  display: flex;
  gap: 15px;
  height: 100px;
  justify-content: center;
  align-items: center;
  max-width: 90%;
}

.newconditionicon,
.newcalculationicon {
  font-size: 50px;
  cursor: pointer;
}

.managecheckouticon,
.managepaymenticon {
  font-size: 30px;
  cursor: pointer;
}

.newruleicon,
.deleteruleicon {
  font-size: 22px;
  cursor: pointer;
}

a.cbforms-link-btn,
button.cbforms-link-btn {
  background-color: #2b4257;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-style: none;
  cursor: pointer;
  font-weight: 700;
}

[type="stripe_link"] a.cbforms-link-btn,
[type="stripe_checkout"] a.cbforms-link-btn {
  background-color: #635bff;
  font-weight: 700;
}

[type="square_link"] a.cbforms-link-btn,
[type="square_checkout"] a.cbforms-link-btn {
  background-color: #006aff;
  font-weight: 700;
}

[type="paypal_link"] a.cbforms-link-btn {
  background-color: #ffd140;
  color: #333333;
  font-weight: 700;
}

.stripepaybuttonicon {
  width: 40px;
  margin-right: 0px;
}

.squarepaybuttonicon {
  width: 30px;
  margin-right: 10px;
}

.paypalpaybuttonicon {
  width: 30px;
  margin-right: 5px;
}

.formfieldbox:has(.cbforms-link-btn) {
  justify-content: center;
  align-items: center;
}

.fieldwrap:has(.cbforms-link-btn) [type="description"] {
  text-align: center;
}

.formviewfieldwrap:has(.cbforms-link-btn) .formviewdescription {
  text-align: center;
}

.formviewfieldwrap:has(.cbforms-link-btn) {
  justify-content: center;
  align-items: center;
}

.cbforms-btn-square {
  border-radius: 0;
}

.cbforms-btn-rounded {
  border-radius: 5px;
}

.cbforms .cbforms-btn-pill {
  border-radius: 40px;
}

.cbforms .formviewfieldwrap:has(.formviewcurrency) .formviewlabel {
  padding-left: 25px;
}

.cbforms .formviewfieldwrap:has(.formviewcurrency) .formviewdescription {
  padding-left: 25px;
}

.cbforms .fieldwrap[type="currency"] label {
  padding-left: 16px;
}

.cbforms .fieldwrap[type="currency"] [type="description"] {
  padding-left: 19px;
}



.fieldsettingsdiv:has(.stripecheckoutbtn) {
  display: flex;
  justify-content: center;
}

.stripecheckoutbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}

.fieldsettingsdiv:has(.squarecheckoutbtn) {
  display: flex;
  justify-content: center;
}

.squarecheckoutbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}



.fieldsettingsdiv:has(.stripepaymentsbtn) {
  display: flex;
  justify-content: center;
}

.stripepaymentsbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}

.fieldsettingsdiv:has(.stripecheckoutbtn) {
  display: flex;
  justify-content: center;
}

.stripecheckoutbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}

.fieldsettingsdiv:has(.squarepaymentsbtn) {
  display: flex;
  justify-content: center;
}

.squarepaymentsbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}

.fieldsettingsdiv:has(.squarecheckoutbtn) {
  display: flex;
  justify-content: center;
}

.squarecheckoutbtn {
  padding: 5px 10px;
  margin: 10px auto;
  border-style: none;
}


/*
*******************************************************************************************

Survey Fields

*******************************************************************************************
*/
.surveystar:hover {
  color: gold;
}

.surveyfieldbox:has([type="radio"], [type="checkbox"]) {
  flex-direction: column;
  align-items: start;
}

.surveyfieldbox label {
  margin: 10px;
}

.surveyfieldbox .formfield {
  margin-left: 30px;
}

[type="survey10numbers"],
[type="survey5numbers"],
[type="surveyyesno"],
[type="survey3levelrank"],
[type="survey5levelrank"] {
  display: flex;
}

.surveyrankradiowrap {
  display: flex;
  flex-direction: column;
}

.fivenumbersrank [type="radio"] {
  margin: 0;
}

.surveyfaces {
  margin: auto 10px 20px;
  font-size: 40px;
}

.surveystars {
  margin-right: 30px;
  font-size: 35px;
}

.surveyrankradiowrap {
  margin-right: 45px;
}

.surveyrankradiowrap input {
  height: 23px;
  min-width: 23px;
  margin: 10px 0;
}

.surveyrankradiowrap label {
  min-width: 30px;
  justify-content: center;
}

.surveyleftlabel {
  display: flex;
  margin: 0 20px 0 0;
  align-items: end;
}

.surveyrightlabel {
  display: flex;
  margin: 0 0 0 0;
  align-items: end;
}

.surveyiconsfield {
  display: flex;
}

.surveyrankriconwrap {
  margin-right: 50px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}

.surveyrankradiowrap {
  margin-right: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*
*******************************************************************************************

Survey Fields End

*******************************************************************************************
*/

.cbformssurvey form {
  container-type: inline-size;
  container-name: cbforms;

}

@container cbforms (width < 600px) {
  .formviewfieldwrap {
    min-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .formviewfieldwrap {
    min-width: 100% !important;
  }
}

.mobilescreenviewsize .formviewfieldwrap {
  min-width: 100% !important;
}

li::marker {
  text-align: center !important;
}

#attention-arrow {
  position: relative;
  top: 2px;
  font-size: 1.2em;
  opacity: 0;
}

.mailchimpsettingsdiv {
  max-height: 0;
  overflow: hidden;
  transition: 0.7s;
}

div:has(#sendtomailchimp:checked) .mailchimpsettingsdiv {
  max-height: 1500px;
}


.contactssettingsdiv {
  max-height: 0;
  overflow: hidden !important;
  transition: 0.7s;
}

.registrationevent {
  display: none
}

.registrationplan {
  display: none
}

div:has(#savecontactonsubmit:checked) .contactssettingsdiv {
  max-height: 1500px;
}

div:has(#eventregistrationform:checked) .contactssettingsdiv {
  max-height: 1500px;
}

div:has(#eventregistrationform:checked) .registrationevent {
  display: block;
}

div:has(#planregistrationform:checked) .contactssettingsdiv {
  max-height: 1500px;
}

div:has(#planregistrationform:checked) .registrationplan {
  display: block;
}




/********

TAGS

**********/

.tag-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.tag-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-tag-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#taglisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#taglisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.taglistrow {
  padding-left: 60px;
  height: 2.8rem;
}

.taglistrow div,
.taglistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.tagcolumn,
.taglistcolumn {
  display: flex;
}



.taglistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}


.tageditheader {
  justify-content: space-between;
}


.tagedittagname {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 20vw 0 0; */
  gap: 20px;
}



.tagedittagname .tagstatus {
  margin: auto;
}



.tagedittagname {
  margin: auto;
  text-align: center;
  gap: 120px
}


.fixtageditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixtageditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}


#tagnametitle {
  display: flex;
  padding-left: 40px;
}



.tagselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}



.tagselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}



.tagnametext h3 {
  margin-bottom: 0;
}



.tagname:hover .tagactions {
  visibility: visible;
}

/* .tagname {
  flex: 1;
} */

.tagnametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singletagaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singletagaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.tagactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}



.tagdate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.tagstatus,
.tagid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.save-tag-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}


.tageditwrap {
  min-height: 750px;
}




.tageditwrap h1,
.tageditwrap h2,
.tageditwrap h3,
.tageditwrap h4,
.tageditwrap h5,
.tageditwrap h6 {
  display: block;
}



.tageditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.tagstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}



#tagcontactlisttitlebar {
  background: var(--cbf-deep-orange);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#tagcontactlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

/***

 END OF TAGS

 ****/

/**

SUBMISSIONS

***/



.submission-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.submission-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-submission-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#submissionlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#submissionlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.submissionlistrow {
  padding-left: 0px;
  height: 2.8rem;
}

.submissionlistrow div,
.submissionlistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.submissioncolumn,
.submissionlistcolumn {
  display: flex;
}


.submissionlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}

#submissionnametitle {
  display: flex;
  padding-left: 40px;
}

.submissionselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}

.submissionnametext h3 {
  margin-bottom: 0;
}

.submissionname:hover .submissionactions,
.entityname:hover .entityactions {
  visibility: visible;
}

.entityname, .submissionname {
  flex: 1;
}

.submissionnametext:hover,
.entitynametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}


.singlesubmissionaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singlesubmissionaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}


.submissionactions {
  visibility: hidden;
  color: var(--cbf-green);
  position: absolute;
  margin-top: -1px;
}



.submission-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.submission-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-submission-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#submissionlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#submissionlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}



.submissioncolumn,
.submissionlistcolumn {
  display: flex;
}



.submissionlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}


.submissioneditheader {
  justify-content: space-between;
}


.submissioneditsubmissionname {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 20vw 0 0; */
  gap: 20px;
}



.submissioneditsubmissionname .submissionstatus {
  margin: auto;
}



.submissioneditsubmissionname {
  margin: auto;
  text-align: center;
  gap: 120px
}


.fixsubmissioneditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixsubmissioneditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}


#submissionnametitle {
  display: flex;
  padding-left: 40px;
}



.submissionselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}



.submissionselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}



.submissionnametext h3 {
  margin-bottom: 0;
}



.submissionname:hover .submissionactions {
  visibility: visible;
}

/* .submissionname {
  flex: 1;
} */

.submissionnametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singlesubmissionaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singlesubmissionaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.submissionactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}



.submissiondate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.submissionstatus,
.submissionid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.save-submission-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}


.submissioneditwrap {
  min-height: 750px;
}




.submissioneditwrap h1,
.submissioneditwrap h2,
.submissioneditwrap h3,
.submissioneditwrap h4,
.submissioneditwrap h5,
.submissioneditwrap h6 {
  display: block;
}



.submissioneditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.submissionstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}



#submissioncontactlisttitlebar {
  background: var(--cbf-deep-orange);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#submissioncontactlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}



/***

 END OF SUBMISSIONS

 ****/


/********

PAYMENTS

**********/

.payment-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.payment-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-payment-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#paymentlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#paymentlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.paymentlistrow {
  padding-left: 30px;
  height: 2.8rem;
}

.paymentlistrow div,
.paymentlistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.paymentcolumn,
.paymentlistcolumn {
  display: flex;
}



.paymentlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}


.paymenteditheader {
  justify-content: space-between;
}


.paymenteditpaymentname {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 20vw 0 0; */
  gap: 20px;
}



.paymenteditpaymentname .paymentstatus {
  margin: auto;
}



.paymenteditpaymentname {
  margin: auto;
  text-align: center;
  gap: 120px
}


.fixpaymenteditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixpaymenteditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}


#paymentnametitle {
  display: flex;
  padding-left: 10px;
}



.paymentselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}



.paymentselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}



.paymentnametext h3 {
  margin-bottom: 0;
}



.paymentname:hover .paymentactions {
  visibility: visible;
}

/* .paymentname {
  flex: 1;
} */

.paymentnametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singlepaymentaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singlepaymentaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.paymentactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}



.paymentdate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.paymentstatus,
.paymentid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.save-payment-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}

.paymenteditwrap {
  min-height: 750px;
}

.paymenteditwrap h1,
.paymenteditwrap h2,
.paymenteditwrap h3,
.paymenteditwrap h4,
.paymenteditwrap h5,
.paymenteditwrap h6 {
  display: block;
}

.paymenteditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.paymentstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}
 
#paymentcontactlisttitlebar {
  background: var(--cbf-deep-orange);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#paymentcontactlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

#contactpaymentlist .entitylistrow:has(.subscription){
  color:var(--cbf-green);
}


#contactpaymentlist {
.pending {
  color: var(--cbf-orange);

}
 .deleted {
  color: var(--cbf-deep-red);

}
}

/* Hide .deleted rows when #checkbox1 is checked */
.contactedit:has(#hidedeleted:checked)  .entitylistrow:has(.deleted) {
    display: none;
}


/* Hide .deleted rows when #checkbox1 is checked */
.contactedit:has(#hidepending:checked)  .entitylistrow:has(.pending) {
    display: none;
}
/* Hide .refunded rows when #checkbox1 is checked */
.contactedit:has(#hiderefunded:checked)  .entitylistrow:has(.refunded) {
    display: none;
}

/***

 END OF PAYMENTS

 ****/


/********

PLANS

**********/

.plan-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.plan-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-plan-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#planlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#planlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.planlistrow {
  padding-left: 20px;
  height: 2.8rem;
}

.planlistrow div,
.planlistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.plancolumn,
.planlistcolumn {
  display: flex;
}



.planlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}


.planeditheader {
  justify-content: space-between;
}


.planeditplanname {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  /* padding: 0 20vw 0 0; */
  gap: 20px;
}



.planeditplanname .planstatus {
  margin: auto;
}



.planeditplanname {
  margin: auto;
  text-align: center;
  column-gap: 50px;
  flex-wrap: wrap;
}


.fixplaneditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixplaneditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}


#plannametitle {
  display: flex;
  padding-left: 40px;
}



.planselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}



.planselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}



.plannametext h3 {
  margin-bottom: 0;
}



.planname:hover .planactions {
  visibility: visible;
}

/* .planname {
  flex: 1;
} */

.plannametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singleplanaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singleplanaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.planactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}



.plandate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.planstatus,
.planid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.save-plan-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}


.planeditwrap {
  min-height: 750px;
}




.planeditwrap h1,
.planeditwrap h2,
.planeditwrap h3,
.planeditwrap h4,
.planeditwrap h5,
.planeditwrap h6 {
  display: block;
}



.planeditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.planstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}

.planedit .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 100px;
  border-radius: 5px;
  /* margin-left: 100px; */
  width: calc(90% - 100px);
}

.planedit .formsettingsdiv {

  margin-bottom: 40px;
}

.planedit .planenrollednumber {
  font-size: 18px;
  font-weight: 500;
}

/***

 END OF PLANS

 ****/


/********

contactS

**********/

.contact-template-buttons {
  padding: 10px 0 3px;
  display: flex;
}

.contact-bulk-action-buttons {
  padding: 10px 10px 3px;
  display: flex;
}



.add-new-contact-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
}



#contactlisttitlebar {
  background: var(--cbf-ocean);
  color: #ffffff;
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  justify-content: flex-start;
  padding-left: 20px;
}

#contactlisttitlebar div h5 {
  white-space: wrap;
  text-align: left;
  display: block;
}

.contactlistrow {
  padding-left: 20px;
  height: 2.8rem;
}

.contactlistrow div,
.contactlistrow div h5 {
  white-space: nowrap;
  text-align: left;
}

.contactcolumn,
.contactlistcolumn {
  display: flex;
}



.contactlistcolumn {
  padding-right: 20px;
  overflow-x: hidden;
}


.contacteditheader {
  justify-content: space-between;
}




.fixcontacteditbuttons {
  background-color: #ffffff;
  position: fixed;
  display: flex;
  width: calc(100% - 240px);
  top: 0;
  z-index: 10;
}

.fixcontacteditunderline {
  position: fixed;
  top: 50px;
  z-index: 11;
  width: calc(100% - 240px);
}


#contactfullnametitle {
  display: flex;
  padding-left: 40px;
}



.contactselect {
  margin: 1px 0px auto 6px;
  scale: 1.1;
}



.contactselect [type="checkbox"] {
  width: 15px;
  height: 15px;
}



.contactfullnametext h3 {
  margin-bottom: 0;
}



.contactfullname:hover .contactactions {
  visibility: visible;
}

/* .contactfullname {
  flex: 1;
} */

.contactfullnametext:hover {
  color: var(--cbf-ocean);
  cursor: pointer;
}

.singlecontactaction:hover {
  color: var(--cbf-blue);
  cursor: pointer;
}

.singlecontactaction[action="delete"]:hover {
  color: var(--cbf-red);
  cursor: pointer;
}

.contactactions {
  visibility: hidden;
  position: absolute;
  color: var(--cbf-green);
  margin-top: -1px;
}



.contactdate p {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: left;
}

.contactstatus,
.contactid {
  /* margin-top: 10px; */
  white-space: nowrap;
  text-align: center;
}

.save-contact-wrapper {
  padding: 10px 10px 3px;
  display: flex;
  justify-content: end;
  max-width: 350px;
}


.contacteditwrap {
  min-height: 750px;
}




.contacteditwrap h1,
.contacteditwrap h2,
.contacteditwrap h3,
.contacteditwrap h4,
.contacteditwrap h5,
.contacteditwrap h6 {
  display: block;
}



.contacteditlabel {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 0 5px;
}


.contactstatuslabel {
  color: var(--cbf-orange);
  font-size: 1.3rem;
}

.contactedit .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 40px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 100px;
  border-radius: 5px;
  /* margin-left: 100px; */
  width: calc(90% - 100px);
}

.contactedit .formsettingsdiv {

  margin-bottom: 15px;
}

.contactedit .contactenrollednumber {
  font-size: 18px;
  font-weight: 500;
}

/***

 END OF contactS

 ****/

/*******

 LINK CIRCLES

 ******/
.linkedcirclesdropdown {
  height: 300px;
  width: 90%;
  font-size: 20px;
  font-weight: 600;
  color: var(--cbf-text);
}

.linkedcirclesbanner {
  background-color: var(--cbf-deep-orange);
  color: var(--cbf-white);
  font-family: var(--header-font);
  font-weight: 500;
  text-align: left;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 10px 20px;
  font-size: 20px;

}

.contactedit .linkedcircles.fields {
  max-width: 1100px;
  margin-top: 0;
}

.linkedcirclesbuttonbar {
  display: flex;
  padding: 5px 20px;
  justify-content: end;
}

/*******


 END OF LINK CIRCLES


 ******/

/****


 CONTACT NOTES

 ****/

.contactedit .contactnotes .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: calc(90% - 100px);
}

.systemnoteicon {
  display: none;
}

.notetext {
  color: var(--cbf-ocean);
}

.systemnote, .notetext.systemnote {
  color: var(--cbf-green);
  display: flex;
}


.systemnote .systemnoteicon {
  display: block;
  color: var(--cbf-light-orange);
  margin-right: 3px;
}

/**
END OF CONTACT NOTES
**/


/**
ENGAGEMENTS
*/
.contactedit #viewcommunicationmodal .fields {
  max-width: 100%;
  margin: auto;
  margin-top: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 5px;
  border-radius: 5px;
  width: 100%;
}


/**
    END OF ENGAGEMENTS
*/

.listwrapper p {
  margin-bottom: 0;
}

.listwrapper h5 {
  margin-bottom: 0;
  font-size: 16px;
  display: block;
  text-align: left;
}

.actionlistdropdown {
  height: 300px;
  width: 90%;
  font-size: 20px;
  font-weight: 600;
  color: var(--cbf-text);
}

.contactedit .contactattachments .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: calc(90% - 100px);
}

.contacttimeline [type="checkbox"] {
  width: 20px;
  height: 20px;
}


.contactedit .contacttimeline .fields {
  max-width: 1300px;
  margin: auto;
  margin-top: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #ebebeb;
  padding: 15px 30px;
  margin-bottom: 15px;
  border-radius: 5px;
  width: calc(90% - 100px);
}