@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

body {
  width: 100vw;
  margin: 0;
  background-color: #eeeeee;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: overlay;
}

.page {
  display: flex;
  justify-content: center;
}

.page>div {
  width: 1118px;
}

h1,
h2,
h3,
p,
th,
td,
textarea,
input,
label,
span,
button,
div {
  font-family: "Inter", sans-serif;
  margin: 0;
  color: #303030;
}

textarea {
  resize: none;
}

.loading {
  cursor: wait;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: #c4c4c4;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #b4b4b4;
}

#logo_div_main {
  background-image: url(../images/psoda_forms_logo.svg);
  background-repeat: no-repeat;
  background-position: center center;
  /* background-size: 200px, 55px; */
  height: 50px;
  width: 180px;
}

/* Login page styles */

#logo_div_login {
  background-image: url(../images/psoda_forms_logo.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 70px;
  height: 70px;
  padding: 30px;
}

#login_page {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  /* align-items: center; */
}

#login_form_div {
  display: flex;
  flex-direction: column;
  align-self: center;
  /* align-items: center; */
  width: 450px;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #ffffff;
  border-radius: 18px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
}

#input_div {
  display: flex;
  flex-direction: column;
  align-self: center;
  width: 75%;
  margin-top: 2rem;
  /* margin-left: 2rem;
  margin-right: 2rem; */
}

#banner_div {
  display: flex;
  align-self: center;
}

#login_label_div {
  text-align: start;
  opacity: 0.65;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

.login_input {
  border: none;
  outline: none;
  padding: 15px;
  background-color: #f5f3f2;
  border-radius: 26px;
  margin-bottom: 15px;
}

#input_break {
  margin-bottom: 20rem;
}

.page_button {
  border-radius: 26px;
  border-style: none;
  padding: 15px;
  background-color: #3abf3a;
  color: white;
  font-weight: 400;
  cursor: pointer;
}

.page_button:hover {
  background-color: #36a736;
}

#forgot_password_div {
  display: flex;
  align-self: center;
  margin-top: 1rem;
  text-decoration: none;
}

#forgot_password_div a {
  text-decoration: none;
  color: #629aed;
  font-weight: 600;
  font-size: 14px;
}

#forgot_password_div a:hover {
  color: #5386d3;
}

.span_message {
  display: flex;
  flex-direction: column;
  align-self: center;
  text-align: center;
  width: 20rem;
  font-weight: bold;
  font-size: 10px;
  margin-bottom: 10px;
}

#span_agreement {
  margin-top: 4rem;
  opacity: 0.65;
}

#span_date {
  font-weight: 500;
  opacity: 0.6;
}

#togglePasswordPsodaForms, #togglePassword1, #togglePassword2 {
	cursor: pointer;
	height: 24px;
	width: 24px;
	display: block;
	margin-top: 128px;
	margin-left: 300px;
	position: absolute;
	background-size: 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* home page styles */

#home_page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#header_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 100px);
  padding: 30px;
}

#user_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  cursor: pointer;
}

#user_div:hover #user_details {
  box-shadow: 0px 0px 10px #0000001e;
}

#user_menu_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: white;
  border-radius: 20px;
  padding: 25px 8px;
  width: 220px;
  /* height: 200px; */
  position: absolute;
  top: 50px;
  transition: top 0.25s;
  right: 10px;
  z-index: 20;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: default;
}

.user_menu_img_div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3abf3a;
  color: white;
  font-size: 30px;
  border-radius: 50%;
  height: 68px;
  width: 68px;
  margin-bottom: 18px;
}

.user_menu_info {
  height: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user_menu_links {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  /* height: 25%; */
  padding-top: 10px;
}

.user_menu_name {
  font-size: 17px;
  font-weight: 500;
}

.user_menu_email {
  font-size: 12px;
  font-weight: 300;
  color: #6d6d6d;
}

.user_menu_link {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #303030;
  text-decoration: none;
  border-radius: 10px;
  padding: 5px 12px;
}

.user_menu_link:hover {
  background-color: #e9e9e9;
}

.user_img_div {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #3abf3a;
  color: white;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  font-size: 20px;
}

.user_img_icon_small {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.user_img_icon_large {
  border-radius: 50%;
  height: 68px;
  width: 68px;
}

#user_details {
  background-color: white;
  padding: 5px 40px 5px 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  margin-right: -5px;
  font-size: 12px;
}

#back_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-top: 43px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
}

#back_div:hover {
  background-color: #e4e4e4;
}

/* #preview_page #back_div:hover {
  background-color: #69bbf9;
} */

.back_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  margin-right: 50px;
}

.back_div:hover {
  background-color: #eaeaea;
}

#back_btn_div {
  background-image: url(../images/psoda_forms_icon_go_back.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 1rem;
  width: 1rem;
}

#preview_header_div #back_btn_div {
  background-image: url(../images/psoda_forms_icon_go_back_white.svg);
}



.title_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 800px;
  min-width: 120px;
  position: relative;
  /* z-index: 1; */
}

.title_div>h1,
.title_div>p {
  position: relative;
  z-index: 1;
}

#page_title {
  font-size: 44px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  padding: 4px 20px;
}

.title_editable:hover {
  background-color: #e4e4e4;
  border-radius: 100px;
}

#preview_page .page_title {
  margin: 0px;
  font-size: 35px;
}

#preview_page .title_editable:hover {
  background-color: unset;
}

#page_description {
  padding: 4px 20px;
  font-size: 14px;
  max-height: 100px;
  overflow: auto;
}

#preview_page #page_description {
  margin: 0px;
}

#preview_page .org_name {
  margin: 0px;
}

#preview_page #back_div {
  margin-top: 10px;
}

#page_description:hover {
  background-color: #e4e4e4;
  border-radius: 100px;
}

#preview_page #page_description:hover {
  background-color: unset;
}

#description_div {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.search_input {
  margin-bottom: 15px;
  border: none;
  padding: 10px;
  padding-left: 45px;
  border-radius: 30px;
  background-color: #e2e2e2;
  background-image: url(../images/psoda_forms_search_black.svg);
  background-repeat: no-repeat;
  background-position: 15px center;
  background-size: 20px;
  font-size: 16px;
  width: 500px;
}

#card_div {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: calc(100% - 60px);
  padding: 0px 30px 15px 30px;
}

.section_title_div {
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  padding: 15px 30px;
}

.section_title {
  font-weight: 500;
}

.forms_area {
  display: flex;
  flex-direction: row;
}

.collapse_btn {
  background-image: url(../images/psoda_forms_icon_down_arrow_black.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 14px;
  margin-left: 10px;
  cursor: pointer;
}

/* forms section */

.section_div {
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: 500px;
  align-items: flex-start;
  background-color: white;
  border-radius: 20px;
  margin: 1rem;
}

.new_forms_div {
  display: flex;
  flex-direction: column;
  padding: 0px 30px;
  overflow: auto;
  width: calc(100% - 60px);
}

#forms_available {
  width: 268px;
}

#my_forms {
  width: 818px;
}

#organisations_forms {
  width: 1118px;
  height: auto;
}

#organisations_forms .section_title_div {
  display: flex;
  flex-direction: row;
  width: calc(100% - 70px);
  padding: 15px 30px;
}

.new_form_card {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 170, 255, 0.098);
  padding: 30px 0px;
  margin: 0.5rem 0;
  border-radius: 20px;
  text-align: left;
  align-self: center;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}


.new_form_card:hover {
  background-color: rgba(0, 170, 255, 0.13);
}

.new_form_button_div {
  display: flex;
  flex-direction: row;
  height: fit-content;
  padding: 4px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #0000001f;
  background-color: white;
  color: #3abf3a;
  align-items: center;
  margin-top: 15px;
  cursor: pointer;
}

.new_form_button_div:hover {
  box-shadow: 0px 0px 10px #00000038;
}

.new_form_button_div:hover {
  background-color: #f9f9f9;
}

.form_icon_div {
  background-color: #a4ff9c53;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

.new_form_icon {
  /* background-image: url(../images/psoda_forms_form_icon_blue.svg); */
  background-repeat: no-repeat;
  background-position: center center;
  width: 35px;
  height: 35px;
}

.status_icon_private {
  background-image: url(../images/psoda_forms_icon_private.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

.status_icon_public {
  background-image: url(../images/psoda_forms_icon_preview_grey.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 16px;
  width: 16px;
}

.status_icon_text {
  font-size: 12px;
  color: #999999;
  padding-left: 5px;
}

.new_form_button_icon {
  background-image: url(../images/psoda_forms_icon_plus_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px;
  width: 32px;
  height: 32px;
}

.new_form_button_text {
  margin: 0;
  margin-left: 15px;
  margin-right: 15px;
  color: #3abf3a;
}

.new_form_info {
  display: flex;
  width: calc(100% - 30px);
  padding: 0px 15px;
}

.new_form_title_div {
  padding-left: 10px;
  width: calc(100% - 45px);
}

.new_form_status_div {
  display: flex;
  flex-direction: row;
  margin-top: 3px;
  align-items: center;
}
.template_status_div {
  display: flex;
  flex-direction: row;
  margin-top: 3px;
  justify-content: flex-end;
  margin-bottom: 2px;
  align-items: center;

}

.forms_div {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  width: calc(100% - 60px);
  padding: 10px 30px;
  overflow: auto;
}

.form_card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: rgba(128, 128, 128, 0.4) solid 1px;
  padding: 0.5rem;
  border-radius: 20px;
  text-align: left;
  align-self: center;
  padding: 5px 15px 20px 15px;
  cursor: pointer;
  height: 144px;
  overflow: hidden;
}

.form_card:hover {
  box-shadow: 0px 0px 10px #00000038;
}

.my_form_icon_div {
  background-image: url(../images/psoda_forms_form_icon_blue.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 35px;
  height: 35px;
  margin-top: 15px;
}

.form_card_title {
  margin-left: 6px;
  font-weight: 500;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.form_info {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}

.form_state_div {
  display: flex;
  flex-direction: row;
  border-radius: 20px;
  background-color: #4ec66a;
  width: fit-content;
  max-height: 1.5rem;
  padding: 5px 10px;
  cursor: pointer;
}

.form_state_div_arrow {
  background-image: url(../images/psoda_forms_icon_down_arrow_White.svg);
  background-repeat: no-repeat;
  padding: 8px;
  margin-left: 6px;
  /* background-size: 9px; */
  background-position: center center;
}

.state_hover:hover {
  box-shadow: 0px 0px 10px #00000027;
}

.form_card_state {
  margin: 0;
  /* color: #ed9a15; */
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
}

.form_date_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-weight: 300;
}

.workflow_menu_state {
  color: #4ec66a;
}

.date_icon {
  background-image: url(../images/psoda_forms_icon_date.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0.4rem;
  margin-left: 10px;
  margin-right: 5px;
}

/* templates section */

/* .temp_section_div {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
} */

.new_template_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 500;
}

#input_template_card {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* position: absolute;
  z-index: -1;
  transition: z-index 1s, top 0.8s;
  background-color: white; */
}

.create_template_label {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 3px;
}

#template_workflow_select {
  border-radius: 18px;
  background-color: #eeee;
  padding: 4px;
  width: 100%;
  font-size: 13px;
}

#form_workflow_select {
  width: 300px;
  margin-bottom: 15px;
}

#form_workflow_label {
  font-weight: 500;
  margin-left: 8px;
  margin-bottom: 5px;
}

.template_card {
  display: flex;
  flex-direction: column;
  background-color: white;
  border: rgba(128, 128, 128, 0.4) solid 1px;
  padding: 15px 15px 0px 15px;
  border-radius: 20px;
  text-align: center;
  align-self: center;
  /* width: 14rem; */
  height: 240px;
  /* min-width: 10rem; */
  /* min-height: 14rem; */
  cursor: pointer;
  overflow: hidden;
}

.template_card:hover {
  box-shadow: 0px 0px 10px #00000038;
}

.card_info_div {
  display: flex;
  /* justify-content: flex-start; */
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  /* height: 75%; */
  /* background-color: #ffffff; */
  /* border-top-left-radius: 20px;
  border-top-right-radius: 20px; */
}

.card_info_header_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* width: 100%; */
  height: fit-content;
  background-color: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin: 0px 0px 10px 0px;
  position: relative;
}

.card_delete_icon {
  background-image: url(../images/psoda_forms_icon_delete.svg);
  background-repeat: no-repeat;
  background-position: 5px center;
  background-size: 16px;
  padding: 0px 0px 0px 30px;
}

#card_menu_div {
  background-image: url(../images/psoda_forms_icon_threedots.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 1rem;
  width: fit-content;
  height: fit-content;
  margin: 4px 8px 0px 0px;
}

#card_menu_div:hover {
  opacity: .75;
}

.action_menu {
  padding: 1rem;
  height: fit-content;
  position: absolute;
  right: 45px;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0px 0px 10px #0000001f;
  margin-top: 10px;
}

.forms_completed_div {
  display: flex;
  flex-direction: row;
  height: 40px;
  padding: 4px;
  border-radius: 24px;
  box-shadow: 0px 0px 10px #0000001f;
}

.completed_details {
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
}

#template_icon_div {
  width: 40px;
  height: 40px;
}

.completed_icon {
  background-image: url(../images/psoda_forms_icon_tick_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  width: 40px;
  height: 40px;
}

.completed_num {
  font-size: 20px;
  font-weight: 500;
}

.completed_text {
  font-size: 12px;
  font-weight: 300;
}

.last_updated_div {
  display: flex;
  flex-direction: row;
  height: 40px;
  padding: 4px;
  border-radius: 24px;
  box-shadow: 0px 0px 10px #0000001f;
}

.last_updated_div_details_page {
  display: flex;
  flex-direction: row;
  height: fit-content;
  width: fit-content;
  /* position: relative; */
  /* margin-left: 720px; */
  margin-top: 20px;
  padding: 4px;
  border-radius: 20px;
  /* box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18), 0 6px 12px 0 rgba(0, 0, 0, 0.16); */
}

.updated_details {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center;
  width: 140px;
}

.updated_user {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.updated_date {
  font-size: 10px;
  font-weight: 300;
}

#card_title_div {
  display: flex;
  flex-direction: column;
  background-color: #54b5ff;
  color: #ffffff;
  font-weight: 300;
  width: calc(100% + 10px);
  padding: 30px 10px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  margin-left: -15px;
}

#template_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  font-weight: 500;
}

.new_form_title {
  margin-top: -5px;
  font-weight: 500;
}

#add_img_div {
  background-image: url(../images/psoda_forms_icon_plus_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  /* padding: 1rem; */
  width: 75px;
  height: 75px;
  text-align: center;
  margin-bottom: 30px;
}

/* #add_form_text {
  padding: 6px;
} */

.hidden {
  visibility: hidden;
  transition: 0.3s ease;
  /* opacity: 0 !important; */
  /* transition: opacity 0.3s ease; */
}

/* .show {
  visibility: visible;
  transition: 0.3s ease;
} */

#default_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  /* padding: 0; */
}

#input_form_card {
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  font-weight: 400;
  text-align: left;
}

#title,
#description {
  border-radius: 15px;
  background-color: #eeeeee;
  border-style: none;
  padding: 8px 8px;
  margin-bottom: 5px;
}

#create_btn {
  margin-top: 12px;
  padding: 10px 10px 10px 30px;
  background-image: url(../images/psoda_forms_icon_plus_white.svg);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 50px center;
}

/* Builder page styles */

#builder {
  min-height: 100vh;
}

#form_page {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: wrap;
  /* width: 100%; */
}

#hero_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px 0px 15px 0px;
}

.back_text {
  margin-left: 10px;
  white-space: nowrap;

}

#form_page_status {
  font-size: 16px;
}

#preview_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 20px;
  margin-top: 43px;
}

.preview_icon {
  background-image: url(../images/psoda_forms_icon_preview.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0.8rem;
  margin-right: 10px;
}

.preview_text {
  color: white;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

#tab_menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  margin: 0px 50px;
}

.menu_tabs {
  background-color: #e2e2e2;
  padding: 15px 30px;
  /* margin-bottom: -1rem; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: pointer;
  font-size: 18px;
  font-size: 18px;
}

.menu_tabs:hover {
  background-color: #d8d8d8;
}

.active_tab {
  background-color: #3abf3a;
  color: #ffffff;
  padding: 15px 40px;
  /* margin-bottom: -1rem; */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: pointer;
  font-size: 18px;
}

.active_tab:hover {
  background-color: #3abf3a;
}

.card_section_div_col {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 20px;
  padding: 30px 46px;
  min-height: 10rem;
  margin: 0px 0px 40px 0px;
}

.card_section_div_row {
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 20px;
  padding: 30px 50px;
  height: fit-content;
  min-height: 10rem;
  margin: 0px 0px 40px 0px;
}

.public_outer_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.public_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 8px 0px;
}

.public_label {
  font-weight: 700;
  margin: 0px 6px;
}

.public_toggle_public {
  background-color: black;
  color: white;
  border-radius: 6px;
  padding: 4px 0px;
  margin: 0px 4px;
  font-weight: 300;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
}

.public_toggle_private {
  background-color: rgb(48, 47, 47);
  color: white;
  border-radius: 6px;
  padding: 4px 0px;
  margin: 0px 4px;
  font-weight: 300;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
}

.public_toggle_public:hover,
.public_toggle_private:hover {
  box-shadow: 0px 0px 10px #00000049;
}

.copy_icon {
  background-image: url(../images/psoda_forms_icon_copy.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 10px;
  margin-right: 8px;
}

.copied_icon {
  background-image: url(../images/psoda_forms_icon_tick_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 10px;
  margin-right: 8px;
}

#copy_btn {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 8px 26px;
}

#copied_btn {
  background-color: white;
  border: solid 1px #3abf3a;
  color: #3abf3a;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 7px 20px;
}

.public_span {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: grey;
  margin-top: 4px;
}

.form_theme_div {
  display: flex;
  flex-direction: row;
  font-weight: 500;
  justify-content: space-between;
  margin: 10px 0px;
}

/* .include_org_logo_div {
  display: flex;
  flex-direction: row;
  align-items: center;
} */

.form_logo_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.selected_form_logo_div {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  width: 100px;
  height: 60px;
}

.selected_image_small {
  max-width: 85px !important;
  max-height: 50px !important;
}


.form_logo_insert {
  color: #4ca8ee;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  margin: 0px 8px;
}

.form_logo_insert:hover {
  color: #303030;
}

.form_logo_selector_div {
  position: absolute;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  padding: 1.5rem;
  top: 48px;
  left: 8px;
  border-radius: 26px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 10;
  background-color: white;
  /* width: calc(100% - 60px); */
  /* width: max-content; */
  max-height: 260px;
  overflow: auto;
  overflow-x: hidden;
  justify-items: center;
  align-items: center;
}

.form_upload_div {
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 100px;
  padding: 0rem;
  border: 3px dashed black;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.form_upload_div:hover {
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  border: 3px dashed #62b462;
}

.filedrop_hover {
  border: 3px dashed #62b462;
  /* border: none; */
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
  /* animation: file_drop_rotation 8s linear infinite; */
}

/* @keyframes file_drop_rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
} */

.cross_icon {
  background-image: url(../images/psoda_forms_icon_x_black.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 22px;
  width: 22px;
  margin-bottom: 10px;
}

.form_logo_selector_title {
  font-size: 18px;
  font-weight: 400;
}

.form_upload_desc {
  font-size: 10px;
  font-weight: 400;
  color: #888888;
  margin-top: 4px;

}

.form_existing_logo_div {
  background-color: #e2e2e2;
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 100px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  cursor: pointer;
  position: relative;
}

.form_existing_logo_div:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#current_logo {
  border: 3px solid #62b462;
  box-sizing: border-box;
}

.logo_selected_tick {
  position: absolute;
  top: 68px;
  left: 68px;
}

.existing_logo {
  max-width: 80px;
  max-height: 80px;
}

.form_colour_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.form_colour_div_text, .form_logo_div_text {
  margin: 0px 8px;
}

.form_colour_div_icon_blue {
  background-image: url(../images/psoda_forms_icon_colour_scheme_blue.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

.form_colour_div_icon_red {
  background-image: url(../images/psoda_forms_icon_colour_scheme_red.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

.form_colour_div_icon_green {
  background-image: url(../images/psoda_forms_icon_colour_scheme_green.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}
.form_colour_div_icon_purple {
  background-image: url(../images/psoda_forms_icon_colour_scheme_purple.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}
.form_colour_div_icon_orange {
  background-image: url(../images/psoda_forms_icon_colour_scheme_orange.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}
.form_colour_div_icon_yellow {
  background-image: url(../images/psoda_forms_icon_colour_scheme_yellow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}
.form_colour_div_icon_grey {
  background-image: url(../images/psoda_forms_icon_colour_scheme_grey.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 40px;
  width: 40px;
  cursor: pointer;
}

.form_colour_selector_div {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  height: fit-content;
  width: 6rem;
  justify-content: space-around;
  position: absolute;
  top: 50px;
  left: 132px;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: left;
  z-index: 10;
  background-color: white;
}

.form_theme_colour_option_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin: 2px 0px;
  padding: 0px 2px;
}

.form_theme_colour_option_div:hover {
  border-radius: 12px;
  background-color: #e2e2e2;
}

.form_theme_colour_option_text {
  font-weight: 400;
  font-size: 14px;
  margin-left: 10px;
}
/* ///////////// form builder page /////////////// */

/* workflow menu styles */

.workflow_menu_open_div {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  height: fit-content;
  width: fit-content;
  justify-content: space-around;
  position: absolute;
  top: 30px;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: left;
  z-index: 10;
  background-color: white;
}

.form_page_state {
  font-size: 16px;
  margin: 4px;
}

.form_page_state_disabled {
  cursor: default;
  opacity: 0.5;
}

/* .form_page_state_green {
  color: #5da856;
}

.form_page_state_grey {
  color: #a8a8a8;
}

.form_page_state_orange {
  color: #ed9a15;
} */

/* .form_state_div.form_page_state_green {
  background-color: #a4ff9c53;
}

.form_state_div.form_page_state_green p {
  color: #5da856;
}

.form_state_div.form_page_state_grey {
  background-color: #eaeaea;
}

.form_state_div.form_page_state_grey p {
  color: #a8a8a8;
}

.form_state_div.form_page_state_orange {
  background-color: #ffe0c4;
}

.form_state_div.form_page_state_orange p {
  color: #ed9a15;
} */

#inst_section_div {
  display: flex;
}

#instruction_div {
  background-color: #e2e2e2;
  border-radius: 24px;
  width: fit-content;
  min-width: 40%;
}

#instruction_div>p {
  padding: 8px 12px;
  margin: 1px;
}

#instruction_label {
  margin: 5px 0px 5px 8px;
  font-weight: 500;
}

#update_btn {
  margin-top: 0;
}

#title_edit {
  border-radius: 50px;
  background-color: #e2e2e2;
  border-style: none;
  padding: 4px 20px;
  max-width: 500px;
  font-size: 44px;
  font-weight: 600;
  position: relative;
  z-index: 1;
  text-align: center;
}

#description_edit {
  border-radius: 20px;
  background-color: #e2e2e2;
  border-style: none;
  padding: 4px 20px;
  font-size: 14px;
  max-height: 100px;
  overflow: auto;
}

#instructions_edit {
  border-radius: 20px;
  background-color: #e2e2e2;
  border-style: none;
  padding: 4px 8px;
}

.instruction_div {
  border-radius: 20px;
  background-color: #e2e2e2;
  border-style: none;
  padding: 10px 15px;
  font-size: 16px;
  max-height: 300px;
  overflow: auto;
  width: 600px;
}

.instruction_placeholder_div {
  color: #888888;
}

.last_updated_div_details_page .updated_details {
  width: 200px;
}

/* Completed forms tab */

.form_table {
  width: 50%;
  /* border-collapse: collapse; */
  border-spacing: 4px;
}

.form_table th {
  padding-bottom: 6px;
  padding: 8px;
  font-weight: 500;
  border-bottom: 1px solid black;
  width: 50%;
}

.form_table td {
  padding: 8px;
  font-weight: 300;
}

.table_head_row {
  text-align: left;
  padding-top: 10px;
}

.form_table td a {
	text-decoration: none;
   color: #4ca8ee;
}

.form_table td a:hover {
	color: #303030;
}

/* #table_row_div {
  background-color: #eeeeee;
  border-radius: 20px;
  padding: 1rem 2rem;
} */

/* #table_hr {
  padding: 0 10rem;
} */

/* #table_row {
  background-color: #e2e2e2;
} */

/* Builder tab styles */

#add_section_button,
#add_option_button {
  padding: 10px 10px 10px 40px;
  background-image: url(../images/psoda_forms_icon_plus_white.svg);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 30px center;
  width: 150px;
  font-weight: 500;
  display: block;
  margin: 10px auto;
}

.builder_div {
  display: flex;
  flex-direction: column;
  height: fit-content;
  padding: 0px 30px 0px 0px;
  align-items: center;
  width: 100%;
}

.builder_section_div {
  display: flex;
  flex-direction: column;
  min-width: 516px;
}

.section_header_div {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px 0px 20px;
}

/* .section_remove_text {
  margin-top: 4px;
} */

.builder_title_div input {
  background-color: #e2e2e2;
  border-radius: 30px;
  border: none;
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 3px;
  margin-left: -10px;
  margin-right: 10px;
  width: auto;
}

.builder_title_div p {
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 3px;
  margin-left: -10px;
}

.field_outer_div {
  display: flex;
  flex-direction: row;
  margin: 16px 0px;
}

.drag_icon {
  display: flex;
  background-image: url(../images/psoda_forms_icon_drag.svg);
  background-repeat: no-repeat;
  background-position: center center;
  width: 20px;
  height: 20px;
  align-self: end;
  margin-bottom: 9px;
  margin-right: 10px;
  cursor: move;
}

.field_outer_div_string .drag_icon, .field_outer_div_text .drag_icon, .field_outer_div_signature .drag_icon, .field_outer_div_message .drag_icon {
  margin-bottom: 50px;
}

.field_div {
  width: 100%;
  position: relative;
}

.field_section_div {
  display: flex;
  flex-direction: column;
  width: 450px;
  border: rgba(128, 128, 128, 0.306) solid 1px;
  border-radius: 20px;
  padding: 2rem;
  min-height: 200px;
  margin-bottom: 10px;
}

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

.field_title_outer_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: 300;
}

.field_title_outer_div>p {
  margin: 12px 6px;
  cursor: pointer;
}

.field_title_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: 8px;
}

.field_remove_outer_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  margin-bottom: 5px;
}

.field_remove_outer_div>p {
  color: #ce2c2c;
  font-size: 12px;
  font-weight: 300;
}

.field_remove_outer_div:hover {
  background: #f7efef;
}

.field_remove_div {
  display: flex;
  background-image: url(../images/psoda_forms_icon_delete_red.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 7px;
  cursor: pointer;
  margin: 0px 5px;
}

.field_inner_div {
  background-color: #e2e2e2;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  width: calc(100% - 30px);
}

.field_inner_div>p {
  margin: 4px 8px;
}

.mandatory_div_checked {
  display: flex;
  justify-content: center;
  background-color: #cc2b2d;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid #cc2b2d;
  border-radius: 50%;
  font-size: 24px;
  margin-right: 8px;
  margin-top: -2px;
  cursor: pointer;
}

.mandatory_div_checked>p {
  color: white;
  margin: 0px;
  pointer-events: none;
}

.mandatory_div_unchecked {
  display: flex;
  justify-content: center;
  background-color: white;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  color: black;
  font-size: 24px;
  margin-right: 8px;
  margin-top: -2px;
  cursor: pointer;
}

.mandatory_div_unchecked>p {
  margin: 0px;
  pointer-events: none;
}

.field_description_div_unchecked {
  display: flex;
  justify-content: center;
  background-color: white;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  color: black;
  font-size: 16px;
  margin-right: 8px;
  position: relative;
  margin-top: -2px;
  cursor: pointer;
}

.field_description_div_unchecked>p {
  margin: 0px;
  pointer-events: none;
}

.field_description_div_checked {
  display: flex;
  justify-content: center;
  background-color: #3abf3a;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid #3abf3a;
  border-radius: 50%;
  font-size: 16px;
  margin-right: 8px;
  position: relative;
  margin-top: -2px;
  cursor: pointer;
}

.field_description_div_checked>p {
  color: white;
  margin: 0px;
  pointer-events: none;
}

.show_tooltip_div {
  background-color: white;
  padding: 11px;
  position: absolute;
  border-radius: 20px;
  top: -33px;
  left: 30px;
  width: fit-content;
  /* max-width: 600px; */
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  z-index: 10;
  font-size: 14px;
}
/* 
.tooltip_small_screen {

} */

.tooltip_description_div {
  width: 200px;
  height: 70px;
  background-color: #e2e2e2;
  border-radius: 14px;
  overflow: auto;
  padding: 4px 8px;
  cursor: text;
}

.tooltip_description_placeholder_div {
  color: #888888;
}

.tooltip_editor {
  width: 300px;
}

/* .title_text {
  margin-right: 20px;
} */

/* Field Picker */

.field_picker_div {
  height: fit-content;
  width: 350px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
  position: sticky;
  padding: 2rem;
  top: 30px;
}

.field_picker_div h1 {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}

.picker_field_div {
  display: flex;
  flex-direction: row;
  background-color: #e2e2e2;
  border-radius: 26px;
  padding: 0px 10px;
  margin: 10px 0px;
  cursor: move;
}

.picker_field_div:hover {
  box-shadow: 0px 0px 10px #0000006e;
}

#drag_indicator {
  width: 70px;
  height: 70px;
  position: absolute;
  background-color: #7f6adb;
  /* background-image: url(../images/psoda_forms_icon_plus_black.svg); */
  opacity: 0.65;
  border-radius: 50%;
}

.draggable {
  display: flex;
  flex-direction: row;
  background-color: #e2e2e2;
  border-radius: 26px;
  padding: 0px 6px;
  margin: 10px 0px;
  cursor: move;
}

.field_add_icon {
  background-image: url(../images/psoda_forms_icon_plus_darkgrey.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 9px;
}

.field_picker_type {
  margin-left: 10px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.field_dragging {
  opacity: 0.5;
  /* border: dotted; */
  margin-top: 30px;
  margin-bottom: 30px;
  /* border-radius: 12px; */
}

.dragging {
  opacity: 0.5;
  /* border: dotted; */
  position: relative;
}

.option_dragging {
  opacity: 0.5;
  border: 1px solid #ce2c2c;
  margin-top: 20px;
}

/* .lock_screen {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
} */

/* currency styles */

.currency_sign {
  display: inline-block;
  margin: 0px 5px;
}

/* Styles for dropdown field */

#drop_down_drag {
  align-self: center;
  margin-bottom: 0px;
  margin-top: 30px;
}

.options_table {
  width: 100%;
  table-layout: fixed;
}

.table_head_delete {
  visibility: hidden;
  width: 20px;
}

.options_heading_div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.option_headings {
  margin: 4px 0px;
}

.options_head th {
  font-weight: 300;
  font-size: 12px;
}

.drag_header {
  visibility: hidden;
  width: 20px;
}

.options_head_value,
.options_head_label {
  width: 100px;
}

.options_head_default {
  width: 40px;
}

.option_div {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#option_drag {
	padding: 1px;
	margin: 4px 0px;
	height: 18px;
}

/* #option_remove {
  margin-bottom: 4px;
} */

/* .value_div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
} */

.value_div>p {
  background-color: white;
  border-radius: 26px;
  padding: 8px;
  min-width: 90px;
}

/* .label_div {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
} */

.label_div>p {
  background-color: white;
  border-radius: 26px;
  padding: 8px;
  min-width: 90px;
}

.default_div {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.default_short_string_input, .default_short_text_input {
  background-color: #e2e2e2;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  width: calc(100% - 30px);
  font-size: 14px;
}

.default_string_input, .default_text_input {
  background-color: #e2e2e2;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  width: calc(100% - 30px);
  height: 100px;
  overflow-y: auto;
  font-size: 14px;
}

.default_shorter_input {
  width: 50%;
}

.signature_field_builder {
  background-color: #e2e2e2;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  width: calc(100% - 30px);
}

.signature_outer_builder {
  width: calc(100% - 20px);
  background-color: #e2e2e2;
  border-radius: 12px;
  padding: 10px;
  height: 100px;
}

.signature_inner_builder {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  background-color: #f8f9fb;
}

.options_data {
  padding: 0px 8px;
}

.options_data_input {
	background-color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 20px;
	width: 100px;
	margin: 2px 0px;
}

.radio_btn {
  /* margin-left: 20px; */
  margin-bottom: -20px;
}

.default_radio_td {
  text-align: center;
  /* display: flex; */
}
/* #option_remove {
  margin-left: 100px;
  margin-top: -13px;
} */



/* Checkbox styles */

.checkbox_container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.checkbox_container>p {
  color: #e2e2e2;
  margin-left: 6px;
  font-size: smaller;
}

.field_checkbox_div {
  background-color: #e2e2e2;
  border-radius: 18px;
  width: 36px;
  height: 36px;
}

.checkbox_unchecked {
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 1rem;
}

.checkbox_checked {
  background-image: url(../images/psoda_forms_icon_tick_white.svg);
  background-color: #3abf3a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  border-radius: 18px;
  height: 36px;
  width: 36px;
}

.multi_select_checkbox_container {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.multi_select_checkbox_div {
	background-color: #e2e2e2;
	border: black;
	border-radius: 18px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.multi_select_checkbox_unchecked {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 18px;
	/* border: #303030 solid 1px; */
	border: #888888 1px solid;

	/* padding: 1rem; */
	height: 18px;
	width: 18px;
}

.multi_select_checkbox_checked {
	background-image: url(../images/psoda_forms_icon_tick_white.svg);
	background-color: #3abf3a;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px;
	border-radius: 18px;
	height: 20px;
	width: 20px;
}

.multi_select_label {
	margin: 4px 8px;
}



.default_input_checkbox:checked+.default_checkbox_input {
	background-image: url(../images/psoda_forms_icon_tick_white.svg);
	background-color: #3abf3a;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px;
	border-radius: 18px;
	height: 20px;
	width: 20px;
	border: unset;

}

.default_checkbox_div {
	display: flex;
	justify-content: center;
}

.default_unchecked {
	background-image: none;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 18px;
	/* border: #303030 1px solid; */
	border: #888888 1px solid;
	height: 18px;
	width: 18px;
	cursor: pointer;
}

.default_checked {
	background-image: url(../images/psoda_forms_icon_tick_white.svg);
	background-color: #3abf3a;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px;
	border-radius: 18px;
	height: 20px;
	width: 20px;
	cursor: pointer;
}

.multi_select_checkbox_checked:hover, .default_checked:hover, .field_description_div_checked:hover {
	background-color: #36a736;
}
.multi_select_checkbox_unchecked:hover, .default_unchecked:hover {
	background-color: #d8d8d8;
}

/* Preview page styles */

/* body {
  background: radial-gradient(100px circle at 400px 20px, #54b5ff 50%, transparent 51%);
  background-color: #eeeeee;
} */

/* #preview_page {
  background: radial-gradient(1060px circle at 50% 0px, #54b5ff 50%, transparent 50.1%);
  /* background-color: #eeeeee; 
} */

.default_theme_bg {
  width: 100vw !important;
  height: 500px;
  background-color: #54b5ff; /* #eef7ff */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#red_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #ff5454; /* #FFEEEF */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#green_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #68ff54; /* #f0feee */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#purple_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #ac54ff; /* #f7edff */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#orange_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #ffc954;  /* #fff9ee */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#yellow_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #fcff54; /* #fffeee */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#grey_theme_bg {
  width: 100vw;
  height: 500px;
  background-color: #3f3f3f; /* #ecebec */
  z-index: -1;
  position: absolute;
  border-bottom-left-radius: 500px;
  border-bottom-right-radius: 500px;
}

#preview_header_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 0px 6px;
}

.logo_container {
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 26px;
  padding: 4px 10px;
  margin-top: 10px;
  cursor: pointer;
}

.logo_container>p {
  margin: 0;
  font-size: smaller;
  font-weight: 300;
  margin-top: 2px;
}

#logo_div_preview {
  background-image: url(../images/psoda_forms_logo.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100px, 20px;

  padding: 10px;
  width: 6rem;
}

.hero_div_preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}

.hero_div_preview>p {
  width: 75%;
  text-align: center;
  color: white;
  margin-bottom: 10px;
}

.hero_div_preview>h1,
.hero_div_preview>h3 {
  color: white;
}

.body_div_preview {
  display: flex;
  justify-content: center;
}

.org_name {
  font-weight: 600;
  font-size: 16px;
  margin: 26px;
  color: white;
}

.page_title {
  margin: 10px 0px;
}

.organisation_div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form_page_logo_div {
  display: flex;
  /* background-color: white; */
  /* border-radius: 50%; */
  max-height: 100px;
  /* width: 100px; */
  align-items: center;
  justify-content: center;
}

.form_page_logo {
  max-height: 100px
}

.section_content {
  display: flex;
  flex-direction: column;
  min-height: 16rem;
  justify-content: space-between;
  align-self: center;
  width: 90%;
}

.form_section_view {
  display: flex;
  flex-direction: column;
  width: 50%;
  align-self: center;
}

.form_section_div {
  display: flex;
  flex-direction: column;
  align-self: center;
  background-color: white;
  border-radius: 20px;
  padding: 2rem 3rem;
  min-height: 20rem;
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 14px 0px;
}

.progress_div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 20px;
}

/* .progress_div_large {
  overflow: auto;
  justify-content: unset;
} */

.progress_item_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100px;
}

.progress_item_div>p {
  font-size: smaller;
  margin-top: 10px;
}

.progress_item_active {
  display: flex;
  /* background-color: #54b5ff; */
  border-radius: 50%;
  height: 30px;
  width: 30px;
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

.progress_item_active+.progress_label {
  font-weight: 500;
}

.progress_item_inactive {
  display: flex;
  background-color: #dedede;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

.progress_label_inactive {
  color: #bebebe;
}

.progress_item_complete {
  /* needs tick */
  display: flex;
  /* background-color: #54b5ff; */
  background-image: url(../images/psoda_forms_icon_tick_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  color: white;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  align-items: center;
  justify-content: center;
}

.progress_item_complete+.progress_label {
  color: #888888;
}

.progress_bar {
  margin: 0;
  margin-top: 14px;
  background-color: #dedede;
  width: 40px;
  height: 2px;
  border-style: none;
  border-radius: 2px;
}

.progress_label_active {
  width: 100%;
}

.progress_label_inactive {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 6px);
  margin-left: 3px;
  margin-right: 3px;
}

.instructions_div_preview>p {
  margin: 10px 0px;
}

.instructions_head {
  font-weight: 500;
}

.instructions_text {
  font-weight: 300;
}

.no_fields_message_div {
	text-align: center;
	margin: 20px 0px;
}

.nav_div {
  display: flex;
  flex-direction: row;
  align-self: center;
  align-items: center;
  margin-top: 20px;
}

/* #form_back_div {
  font-size: x-small;
} */

#form_back_div>div {
  width: 0.75rem;
  padding: 0.75rem;
}

#back_text {
  margin-left: 6px;
  margin-right: 6px;
  font-size: 14px;
  color: #303030;
}

#preview_header_div #back_text {
  color: white;
}

#form #preview_header_div #back_div {
  display: none;
}

#form #preview_header_div {
  justify-content: flex-end;
}

#begin_btn {
  /* background-color: #54b5ff; */
  align-self: center;
  margin: 0;
  padding: 15px 60px;
  font-size: 16px;
  font-weight: 500;
}



#submit_btn {
  background-color: #54b5ff;
  align-self: center;
  min-width: 8rem;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 60px;
}

#save_btn {
  background-color: #54b5ff;
  align-self: center;
  min-width: 8rem;
  margin: 0;
  padding: 15px 60px;
  font-size: 16px;
  font-weight: 500;
  margin-left: 50px;
}

#begin_btn:hover,
#submit_btn:hover,
#save_btn:hover {
  background-color: #4ca8ee;
}

#discard_btn {
  background-color: #00000000;
  align-self: center;
  /* min-width: 8rem; */
  margin: 0;
  color: #303030;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
}

#discard_btn:hover {
  background-color: #eaeaea;
}

.exit_area_div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: -20px;
  margin-right: -26px;
}

.exit_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: smaller;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 20px;
  margin-bottom: 10px;
}

.exit_div:hover {
  background-color: #eaeaea;
}

.exit_icon {
  background-image: url(../images/psoda_forms_icon_x_black.svg);
  background-repeat: no-repeat;
  background-position: center center;
  padding: 0.5rem;
  width: 1rem;
}

.exit_modal {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-self: center;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  background-color: white;
  border-radius: 20px;
  padding: 2rem 3rem;
  min-height: 7rem;
  min-width: 26rem;
  margin-left: -17rem;
  margin-top: -8rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hide_nodes {
  display: none;
}

.blur_bg {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.655);
  /* backdrop-filter: blur(15px); */
}

.message_field {
  padding: 14px;
  margin-bottom: 4px;
  font-weight: 300;
  color: #303030;
  border-radius: 20px;
  font-size: 14px;
}

.message_field a {
  color: #4ca8ee;
  text-decoration: none;
}

.message_field a:hover{
  color: #303030;
}

.form_field_div {
  /* display: flex;
  flex-direction: column; */
  /* margin-top: 1rem; */
  margin-bottom: 20px;
  position: relative;
}

.form_label_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  min-height: 20px;
}

.field_input {
  background-color: #e2e2e2;
  border-radius: 20px;
  padding: 10px 15px;
  border: none;
  font-size: 16px;
  width: calc(100% - 30px);
  font-family: "Inter", sans-serif;
  color: #303030;
}

.field_input_dropdown {
  width: 100%;
}

.field_input_date,
.field_input_currency,
.field_input_float,
.field_input_decimal_number,
.field_input_integer,
.field_input_whole_number {
  width: 50%;
}

.field_input_string {
  height: 100px;
  overflow-y: auto;
  background-color: #e2e2e2;
    border-radius: 20px;
    padding: 10px 15px;
    border: none;
    font-size: 16px;
    width: calc(100% - 30px);
    font-family: "Inter", sans-serif;
    color: #303030;
}

#char_count {
  display: flex;
  flex-direction: row-reverse;
  color: #9e9e9e;
  font-size: 14px;
  font-weight: 300;
  margin-right: 10px;
}

/* checkbox styles */

.checkbox_outer_div, .form_field_dropdown_option_div {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form_field_checkbox_div, .form_field_dropdown_option_div {
  position: relative;
  margin-right: 10px;
}

.form_field_dropdown_option_div.select_all {
	border-top-style: solid;
	border-top-color: #e2e2e2;
	padding-top: 10px;
}

.form_field_dropdown_option_div.select_all input{
	margin-top: 10px;
}


.form_field_dropdown_option_div .dropdown_label {
	margin-left: 15px;
}

.multi_select_div {
	padding:10px;
	border-radius: 5px;
	margin-left: -10px;
}

.multi_select_div .error_span{
	height:10px;
}

.form_field_dropdown_option_div {
	margin-top:10px;
}

.field_input_checkbox {
  width: 36px;
  height: 36px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.checkbox_input {
  width: 36px;
  height: 36px;
  background-color: #e2e2e2;
  border-radius: 18px;
}

.field_input_checkbox:hover~.checkbox_input{
	background-color: #d8d8d8;
}

.field_input_checkbox:checked+.checkbox_input {
  background-image: url(../images/psoda_forms_icon_tick_white.svg);
  background-color: #3abf3a;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
}

.field_input_checkbox:checked:hover~.checkbox_input {
	background-color: #36a736;

}


#field_required {
  color: #ce2c2c;
  margin: 0;
  margin-left: 4px;
  font-weight: bold;
  margin-left: 4px;
}

.field_description_div {
  display: flex;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.3);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
  position: relative;
  margin-top: -2px;
  font-size: 14px;
}

.tooltip_btn_text {
  pointer-events: none;
}

.field_description_div_active {
  border: none;
  /* background-color: #54b5ff; */
  color: white;
}

.field_description_div_active p {
  color: white;
}

.field_label {
  padding: 5px 0px 5px 10px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 3px;
  margin-left: -10px;
}

.tooltip_div {
  position: absolute;
  border-radius: 8px;
  border: none;
  background-color: #54b5ff;
  color: white;
  left: 20px;
  top: -10px;
  font-size: smaller;
  font-weight: 400;
  padding: 10px 8px;
  z-index: 10;
  width: max-content;
  cursor: default;
}

.count_field {
  /* margin-top: 5px; */
  margin-bottom: 10px;
}

.show_count {
  visibility: visible;
  height: 17px;
}

.hide_count {
  visibility: hidden;
  height: 17px;
}

/* public form styles */

.public_col{
  align-items: center;
}

.public_form #preview_header_div {
  justify-content: flex-end;
}

.public_form .field_input {
  width: 100%;
}

.public_form .field_input_date,
.public_form .field_input_currency,
.public_form .field_input_float,
.public_form .field_input_decimal_number,
.public_form .field_input_integer,
.public_form .field_input_whole_number {
  width: 50%;
}

.public_form .field_input_string {
  width: calc(100% - 30px);
}

.result_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  margin-top: 30px;
}

.result_message {
  font-weight: 600;
  margin-top: 70px;
}
.progress_message {
  font-weight: 600;
  margin-top: 10px;
}

.form_success_icon {
  height: 160px;
  width: 160px;
}

.form_error_icon {
  background-image: url(../images/psoda_forms_error_icon.svg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 170px;
  width: 170px;
}

.error_span {
  display: block;
  width: 100%;
  color: red;
  font-size: 14px;
  font-style: italic;
}

#char_count + .error_span {
  margin-top: -16px; 
}

/**************** Theme styles *****************/

.gradient_button {
	background-size: 200% 200%;
	background-position: left;
	transition: .2s ease;
}

.gradient_button:hover {
	background-position: right;
}

.blue_theme{
  background-image: linear-gradient(to right, #5594ff, #55beff);
}

.blue_button_gradient {
	background-image: linear-gradient(90deg, #5594ff, #55beff,#55beff,#5594ff);
 }

.blue_theme_light {
  background-color: #eef7ff ;
}

.blue_form_card_theme {
  background-color: rgba(0, 170, 255, 0.098);
}

.blue_form_card_theme:hover {
  background-color: rgba(0, 170, 255, 0.13);
}

.blue_form_icon {
  background-image: url(../images/psoda_forms_form_icon_blue.svg);
}

.green_theme {
  background-image: linear-gradient(to right, #8ad182, #a6e09d);
}

.green_button_gradient {
  background-image: linear-gradient(90deg, #8ad182, #a6e09d,#a6e09d,#8ad182);
}


.green_theme_light {
  background-color: #f0feee ;
}

.green_form_card_theme {
  background-color: rgba(9, 255, 0, 0.123);
}

.green_form_card_theme:hover {
  background-color: rgba(9, 255, 0, 0.171);
}

.green_form_icon {
  background-image: url(../images/psoda_forms_form_icon_green.svg);
}

/* form success svg */
.green #linear-gradient stop:nth-child(1) {
	stop-color: #8ad182;
}
.green #linear-gradient stop:nth-child(2) {
	stop-color: #a6e09d;
}

.green .form_success_icon .cls-1 {
	fill: #8ad182;
}

.grey_theme {
  background-image: linear-gradient(to right, #333333, #666666);
}

.grey_button_gradient {
	background-image: linear-gradient(90deg, #333333, #666666,#666666,#333333);
}

.grey_theme_light {
  background-color: #ecebec ;
}

.grey_form_card_theme {
  background-color: #8888883d;
}
.grey_form_card_theme:hover {
  background-color: #88888848;
}

.grey_form_icon {
  background-image: url(../images/psoda_forms_form_icon_grey.svg);
}
/* form success svg */
.grey #linear-gradient stop:nth-child(1) {
	stop-color: #333333;
}
.grey #linear-gradient stop:nth-child(2) {
	stop-color: #666666;
}

.grey .form_success_icon .cls-1 {
	fill: #333333;
}

.purple_theme {
  background-image: linear-gradient(to right, #6e60ff, #6e94ff);
}

.purple_button_gradient {
	background-image: linear-gradient(90deg, #6e60ff, #6e94ff,#6e94ff,#6e60ff);
}

.purple_theme_light {
  background-color: #f7edff ;
}

.purple_form_card_theme {
  background-color: rgb(107 0 255 / 10%);
}

.purple_form_card_theme:hover {
  background-color: rgba(106, 0, 255, 0.123);
}

.purple_form_icon {
  background-image: url(../images/psoda_forms_form_icon_purple.svg);
}
/* form success svg */
.purple #linear-gradient stop:nth-child(1) {
	stop-color: #6e60ff;
}
.purple #linear-gradient stop:nth-child(2) {
	stop-color: #6e94ff;
}

.purple .form_success_icon .cls-1 {
	fill: #6e60ff;
}

.orange_theme {
  background-image: linear-gradient(to right, #eda564, #ef8833);
}

.orange_button_gradient {
	background-image: linear-gradient(90deg, #eda564, #ef8833,#ef8833,#eda564);
}

.orange_theme_light {
  background-color: #fff9ee ;
}

.orange_form_card_theme {
  background-color: rgb(255 115 0 / 15%);
}

.orange_form_card_theme:hover {
  background-color: rgba(255, 115, 0, 0.192);
}

.orange_form_icon {
  background-image: url(../images/psoda_forms_form_icon_orange.svg);
}

/* form success svg */
.orange #linear-gradient stop:nth-child(1) {
	stop-color: #ef8833;
}
.orange #linear-gradient stop:nth-child(2) {
	stop-color: #eda564;
}

.orange .form_success_icon .cls-1 {
	fill: #ef8833;
}

.yellow_theme {
  background-image: linear-gradient(to right, #e5dd76, #f4e345);
}

.yellow_theme_light {
  background-color: #fffeee ;
}

.yellow_form_card_theme {
  background-color: rgb(255 244 0 / 17%);
}

.yellow_form_card_theme:hover {
  background-color: rgba(255, 242, 0, 0.219);
}

.yellow_form_icon {
  background-image: url(../images/psoda_forms_form_icon_yellow.svg);
}

/* form success svg */
.yellow #linear-gradient stop:nth-child(1) {
	stop-color: #f4e345;
}
.yellow #linear-gradient stop:nth-child(2) {
	stop-color: #e5dd76;
}

.yellow .form_success_icon .cls-1 {
	fill: #f4e345;
}

.red_theme {
  background-image: linear-gradient(to right, #ff7f83, #ff5559);
}

.red_button_gradient {
	background-image: linear-gradient(90deg, #ff7f83, #ff5559,#ff5559,#ff7f83);
}

.red_theme_light {
  background-color: #FFEEEF ;
}

.red_form_card_theme {
  background-color: rgb(255 0 0 / 10%);
}

.red_form_card_theme:hover {
  background-color: rgba(255, 0, 0, 0.123);
}

.red_form_icon {
  background-image: url(../images/psoda_forms_form_icon_red.svg);
}

/* form success svg */
.red #linear-gradient stop:nth-child(1) {
	stop-color: #ff5559;
}
.red #linear-gradient stop:nth-child(2) {
	stop-color: #ff7f83;
}

.red .form_success_icon .cls-1 {
	fill: #ff5559;
}

/* back div hover themes for forms preview page */
#preview_page .blue_theme_hover:hover{
  background-color: #659cfa;
}

#preview_page .red_theme_hover:hover{
  background-color: #fd696e;
}

#preview_page .orange_theme_hover:hover{
  background-color: #ec974d;
}

#preview_page .yellow_theme_hover:hover{
  background-color: #f0e556;
}

#preview_page .green_theme_hover:hover{
  background-color: #77cf6d;
}

#preview_page .purple_theme_hover:hover{
  background-color: #7f74fc;
}

#preview_page .grey_theme_hover:hover{
  background-color: #474747;
}


/* colours for section indicators remove later */

.red_background{
  background-color: #ff5559;
}

.blue_background {
  background-color: #55beff;
}

.yellow_background {
  background-color: #f4e345;
}

.orange_background {
  background-color: #ef8833;
}

.purple_background {
  background-color: #6E7AFF;
}

.green_background {
  background-color: #a6e09d;
}

.grey_background {
  background-color: #666666;
}

/* Skeleton animations */

.skeleton_animation {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
  background-size: 200%;
  background-position: 200%;
  background-repeat: no-repeat;
  animation: skeleton_animation 1.25s infinite ease;
  background-color: #E7E7E7;
}

.skeleton_for_white_bg {
  background-color: #c9c9c9;
}

.skeleton_form_logo {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  /* margin-top: 8px;
  margin-right: 8px; */
}

.skeleton_small_button{
  height: 20px;
  width: 20px;
  border-radius: 50%;
}

.skeleton_form_title {
  height: 17px;
  width: 65%;
  display: inline-block;
  border-radius: 12px;
  /* margin-left: 10px; */
  /* margin-top: 8px; */
  margin: 4px 0px;
}

.skeleton_form_date {
  height: 15px;
  width: 50%;
  display: inline-block;
  border-radius: 12px;
  /* margin-left: 10px; */
  margin-top: 8px;
}

.skeleton_text_small {
  height: 14px;
  width: 50%;
  display: inline-block;
  border-radius: 12px;
  /* margin-left: 10px; */
  /* margin-top: 8px; */
  margin: 4px 0px;
}

.skeleton_template {
  justify-content: space-between;

}

.skeleton_template_workflow {
  height: 20px;
  width: 60px;
  display: inline-block;
  border-radius: 12px;
  /* margin-left: 10px; */
  /* margin-top: 8px; */
  margin: 4px 0px;
}

.skeleton_new_form_card {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: rgba(128, 128, 128, 0.4) solid 1px;
  padding: 30px 0px;
  margin: 0.5rem 0;
  border-radius: 20px;
  text-align: left;
  align-self: center;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

.skeleton_page_title{
  display: inline-block;
  width: 300px;
  height: 50px;
  border-radius: 30px;
}
.skeleton_field{
  display: inline-block;
  width: 300px;
  height: 40px;
  border-radius: 20px;
}
.skeleton_table_data {
  /* display: inline-block; */
  width: 50px;
  height: 20px;
  border-radius: 20px;
}

.updated_details_skeleton {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 10px;
  margin-right: 10px;
  justify-content: center;
  width: 140px;
}

.last_updated_div_skeleton {
  display: flex;
  flex-direction: row;
  height: 40px;
  padding: 4px;
  border-radius: 24px;
  box-shadow: 0px 0px 10px #0000001f;
}

.skeleton_card_title_div {
  display: flex;
  flex-direction: column;
  background-color: #54b5ff;
  color: #ffffff;
  font-weight: 300;
  width: calc(100% + 10px);
  padding: 20px 10px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  margin-left: -15px;
}

@keyframes skeleton_animation {
  40% {
      background-position:
          200%;
  }
  100% {
      background-position:
          -100%;
  }
}

/* Signature SVG */

.input_signature {
  display: none;
}

.svg_signature {
  width: calc(100% - 20px);
  height:calc(100% - 50px);
  padding: 10px 10px 5px 10px;
}

.svg_signature_background {
  x: 0;
  y: 0;
  width: 100%;
  height: 100%;
  fill: #f8f9fb;
  /* stroke: #c2c8d2;
  stroke-width: 1; */
  rx:10;
  ry:10;
  /* transform:scale(2.0);
  -webkit-transform:scale(2.0); */
}

.signature_parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 160px;
  background-color: #e2e2e2;
  border-radius: 10px;
}

.signature_clear_button {
  margin-bottom: 4px;
  border-radius: 4px;
  padding: 4px 8px;
  border: 1px solid #b9b7b7;
  background: #f7f4f4;
  cursor: pointer;
}

.signature_clear_button:hover {
  color: #454f63;
}

/* wysiwyg styling */

.wysiwyg {
  /* width: 100%; */
  background-color: #e2e2e2;
  border-radius: 20px;
  padding: 10px 15px;
  font-size: 14px;
}

.wysiwyg_editor {
  min-height: 90px;
  height: 90px;
  overflow: auto;
}

/* .wysiwyg_buttons {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  visibility: hidden;
  border-left: 1px solid #e6e6e6;
    margin-top: 5px;
    padding: 3px;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    height: 21px;
    margin-left: 10px;
    background: #ffffff;
    border-radius: 5px;
} */

.wysiwyg_buttons {
  position: absolute;
  border-left: 1px solid #e6e6e6;
  margin-top: 5px;
  padding: 3px;
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  height: 21px;
  margin-left: 10px;
  background: #ffffff;
  border-radius: 5px;
  visibility: hidden;
}

.wysiwyg_buttons img {
 padding: 5px;
 margin-right: 0 !important;
}

.wysiwyg_picker_color {
  width: 18px;
  height: 18px;
  margin: 3px;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.wysiwyg_button_div:hover {
  background-color: #e6e6e6;
}

.wysiwyg_button_div {
  display: inline-block;
  height: 22px;
  border-radius: 5px;
}

.wysiwyg_button_div_color img {
  width: 9px;
  height: 9px;
  margin-bottom: 3px;
}

.wysiwyg_selected_format {
  background: #cccccc;
}

.wysiwyg_font_color_underline, .wysiwyg_highlight_color_underline {
  margin: auto;
  margin-top: -4px;
  width: 12px;
  text-align: center;
  height: 2px;
}

.wysiwyg_font_color_underline {
  background-color: #6b50ef;
}

.wysiwyg_highlight_color_underline {
  background-color: #f7ac63;
}

/*wysiwyg picker*/
.wysiwyg_picker_container::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.wysiwyg_picker_container {
  position: absolute;
  /* height: 200px; */
  width: 200px;
  padding: 10px;
  background: #fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
  z-index: 10000;
  max-height: 200px;
  overflow: auto;
}

.wysiwyg_picker_color {
  width: 18px;
  height: 18px;
  margin: 3px;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.wysiwyg_picker_color_white {
  border: 1px solid #cccccc;
  width: 16px;
  height: 16px;
}

.wysiwyg_picker_color:hover {
  opacity: .8;
}

.wysiwyg_default_color_container {
  width: 100%;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-align: center;
  cursor: pointer;
}

.wysiwyg_default_color_container:hover {
  opacity: .8;
}

.wysiwyg_picker_container .link_label_input, .wysiwyg_picker_container .link_url_input {
  background-color: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
  font-family: "Inter", sans-serif;
  width: 140px;
}

.wysiwyg_default_color_label {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px;
}

.wysiwyg_link_insert {
  color: #ffffff;
  background-color: #3abf3a;
  width: 75px;
  text-align: center;
  padding: 3px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: calc(50% - 37.5px);
  margin-top: 5px;
}

.emoji_filter_input {
  width: calc(100% - 10px);
  background-color: #f7f7f7;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 5px;
  font-family: "Inter", sans-serif;
}

.wysiwyg_picker_emoji {
  width: 30px;
  height: 30px;
  margin: 3px;
  display: inline-block;
  border-radius: 3px;
  cursor: pointer;
  vertical-align: middle;
  background-size: 30px;
}

.link_label_label, .link_url_label {
  font-size: 14px;
  text-align: center;
}

.weblink {
  cursor: pointer;
}

.tooltip_div  a {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;

}

.tooltip_div  a:hover {
  color: #c0c0c0;
  text-decoration: underline;
}

.attachment_input {
  width: 100%;
  height: 85%;
  opacity: 0;
  position: absolute;
  top: 30px;
  left: 0;
  cursor: pointer;
  padding: 0;
}

.file_upload_outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed #888888;
  border-radius: 20px;
  padding: 10px 0px 10px 0px;
  text-align: center;
}

.file_upload_img {
  height: 50px;
  width: auto;
}

.file_upload_text {
  font-size: 1.2em;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 6px;
  padding-right: 6px;
  white-space: nowrap;
  max-width: -webkit-fill-available;
}

.file_upload_text_or{
  font-size: 0.8em;
}

.file_upload_button_div {
  display: flex;
  flex-direction: row;
}

.file_upload_button {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  color: #ffffff;
  margin: 4px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.file_upload_button:hover{
  opacity: 0.80;
}

.popup_camera_canvas_popup_upload {
  display: none;
  height: 50px;
  width: auto;
  margin: auto;
}

.file_take_photo_button{
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 5px;
  padding: 4px;
  text-align: center;
  z-index: 100;
  cursor: pointer;
}

.file_take_photo_button:hover{
  background-color: #e0e0e0;

}

.file_upload_details{
  font-size: 14px;
  color: #888888;
}

.file_upload_ondragover {
  border: 2px dashed #303030;
  background-color:#e6e9ef;
}

.close_button {
  background-image: url(/images/popup_x_night.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  display: inline-block;
  width: 21px;
  height: 21px;
  /* padding-bottom: 3px; */
  margin-top: 2px;
  margin-bottom: 2px;
  /* padding-top: 5px; */
  float: right;
  cursor: pointer;
  margin-left: 5px;
  margin-right: 5px;
}

#camerabox{
  position: fixed;
  background: white;
  box-shadow: 3px 3px 10px rgb(0 0 0 / 30%);
  z-index: 1001;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  text-align: center;
  border-radius: 10px;
}

#camerabox_canvas, #camerabox_video {
  width: auto;
  height: 75%;
  padding-top: 5%;
}

#camerabox_buttons {
  text-align: center;
  padding-top: 10px;
}

#camerabox_takephoto, #camerabox_uploadphoto {
  border: none;
  margin-right: 10px;
  padding-top: 7.5px;
  padding-bottom: 7.5px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: center;
  color: white !important;
  cursor: pointer;
  border-radius: 3px;
  font-family: 'OpenSans', 'Open Sans', Arial;
}

.attachment_div_builder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 24px);
  border-radius: 12px;
  padding: 10px;
  height: 50px;
  border: 2px dashed #888888;
}

.field_outer_div_attachment .drag_icon {
  margin-bottom: 25px;
}


/**** Progress indicator ****/
.progress_indicator {
   text-align:center;
}

.progress_indicator svg {
   margin-left:auto;
   margin-right:auto;
   height: 250px;
   width: 250px;
   transform: rotate(-90deg);
}

.progress_indicator .SVG_text {
    font-family: 'OpenSans', 'Open Sans';
    /* transition: opacity 1s ease; */
    /* fill: var(--theme_main); */
    fill: #303030;
    /* stroke-width: .25px; */
    /* stroke: var(--theme_main); */
    font-style: normal;
}

.progress_indicator #green_animate {
	stroke-width: 5;
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 175.84;
	stroke-dashoffset: 175.84;
	transition: stroke-dashoffset 1s ease;
}

.progress_indicator .blue_animate {
	stroke: #5594ff;
}
.progress_indicator .green_animate {
	stroke: #8ad182;
}
.progress_indicator .purple_animate {
	stroke: #6e60ff;
}
.progress_indicator .orange_animate {
	stroke: #eda564;
}
.progress_indicator .yellow_animate {
	stroke: #fcff54;
}
.progress_indicator .red_animate {
	stroke: #ff7f83;
}
.progress_indicator .grey_animate {
	stroke: #333333;
}

.progress_indicator .grey_circle {
    stroke: #eaeaea;
    stroke-width: 3;
    fill: none;
    position: absolute;
}

/* Responsive styling */

@media only screen and (max-width:1280px) {
  #preview_page {
    width: 90%;
  }

}

@media only screen and (max-width:1180px) {

  .forms_area {
    width: 95%;
  }

  #organisations_forms {
    width: 95%;
  }

  #forms_available {
    width: 370px;
  }

  #my_forms {
    width: 760px;
  }

  .forms_div {
    grid-template-columns: 1fr 1fr;
  }

  #card_div {
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
  }

  .template_card {
    width: 220px;
  }

  #default_card {
    width: 250px;
  }
  
  #form_page {
    align-items: center;
    width: 90%;
  }
  #home_page {
    width: 90%;
  }

  #home_page > #hero_div {
    justify-content: center;
  }

  #header_div {
    width: 100%;
  }


  #hero_div {
    width: inherit;
  }

  .card_section_div_row {
    width: 90%;
    padding-left: 30px;
    padding-right: 30px;
  }
  .card_section_div_col {
    width: 90%;
  }

  .public_col {
    width: 50%;
  }

  #tab_view_div {
    width: 100%;
  }

  #tab_menu_div {
    width: 100%;
  }

  #tab_menu {
    justify-content: flex-start;
  }

  /* #tab_menu {
    margin: 0px 316px 0px 0px;
  } */

  #builder .instruction_div {
    width: 100%;
  }

  /* .svg_signature {
    width: 400px;
  }

  .svg_signature_background {
    width: 400px;
  } */




}

@media only screen and (max-width:1080px) {
  .template_card {
    width: 90%;
  }

  #default_card {
    width: 100%;
  }

  #preview_page .form_section_div {
    padding: 30px 30px;
  }

  /* Homepage queries */

  .form_icon_div {
    width: 20px;
    height: 20px;
  }

  .new_form_button_icon {
    background-size: 10px;
    width: 20px;
    height: 20px;
  }

  .new_form_button_text {
    font-size: 12px;
    font-weight: 500;
    margin-left: 6px;
    margin-right: 6px;
  }

  #home_page .section_title_div {
    padding: 15px;
  }

  #home_page .section_div {
    margin: 0.5rem;
  }

  #home_page .form_info {
    flex-direction: column;
  }

  #home_page .form_date_div {
    margin-top: 6px;
  }

  #home_page .last_updated_div {
  width: 90%;
  }

  #input_template_card {
    width: 90%;
    max-width: 240px;
  }

  /* builder page detail tab */

  #builder #title_edit {
    width: 90%;
  }

  #builder #preview_btn, #builder #back_div {
    margin: 0;
  }

  #builder .public_col {
    padding-left: 20px;
    padding-right: 20px;
  }
  #builder .card_section_div_col {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* builder page builder tab */

  #builder .field_picker_div {
    padding: 20px;
  }

  #builder .field_picker_div h1 {
    font-size: 20px;
    margin: 0;
  }

  #builder .picker_field_div p {
    font-size: 14px;
  }

  #builder .field_add_icon {
    padding: 8px;
  }

  #builder .builder_section_div {
    min-width: 450px;
  }

  #builder .field_section_div {
    padding: 10px;
    width: 430px;
  }

}

@media only screen and (max-width:920px) {
  #builder .form_theme_div {
    flex-direction: column;
  }

  #builder .form_logo_div {
    margin: 4px;
  }
  #builder .form_colour_div {
    margin: 4px;
  }

  /* builder tab  */

  #builder .field_picker_div {
    padding: 10px;
  }

  /* .svg_signature {
    width: 300px;
  }

  .svg_signature_background {
    width: 300px;
  } */
}

@media only screen and (max-width:768px) {
  
  .hero_div_preview {
    text-align: center;
  }


  /* #preview_header_div {
    justify-content: center;
  } */

  #form #preview_header_div {
    justify-content: unset;
    justify-content: center;
  }

  .public_form #preview_header_div {
    justify-content: center;
  }

  .public_form .logo_container, #form .logo_container {
    margin-bottom: 10px;
  }

  .section_content, .form_section_view {
    width: 100%;
  }

  #preview_page .form_section_div {
    padding: 20px 20px;
  }

  /* .field_label, .field_input {
    font-size: 18px;
  } */

  /* .progress_item_active, .progress_item_inactive, .progress_item_complete {
    font-size: 20px;
    width: 40px;
    height: 40px;
  } */

  .progress_item_div > p {
    font-size: 16px;
  }

  #preview_page .progress_label, #preview_page .progress_label_inactive, #preview_page .progress_label_active {
    font-size: 12px;
  }

  #preview_page .exit_div {
    margin-right: 10px;
  }

  #preview_page .progress_item_div {
    padding: 0px 8px;
  }

  #preview_page .progress_div_large {
    overflow: auto;
    justify-content: unset;
  }

  #preview_page .progress_div::-webkit-scrollbar {
    display: none;
  }

  .back_div:hover {
    background-color: unset;
  }

  /* Home page queries  */
  #home_page .forms_area {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #forms_available {
    width: 100%;
  }

  #home_page .section_div {
    width: 100%;
  }

  .forms_area .section_div {
    max-height: 420px;
  }

  .new_forms_div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .search_input {
    width: 90%;
  }

  #home_page #page_title {
    font-size: 38px;
    padding: 4px 10px;
  }

  #home_page .new_form_card {
    min-height: 100px;
    margin: 0;
  }

  #card_div {
    grid-template-columns: 1fr 1fr;
  }

  .template_card:hover{
    box-shadow: none;
  }

  .form_card:hover {
    box-shadow: none;
  }

  /* builder page queries  */

  #builder #form_page {
    width: 95%;
  }

  #builder #hero_div {
    width: 100%;
  }

  #builder #back_div, #builder #preview_btn {
    margin: 0;
  }

  #builder .back_text {
    display: none;
  }

  #builder #preview_btn .preview_text {
    display: none;
  }

  #builder .preview_icon {
    margin: 0;
  }

  #builder #page_title {
    /* padding: 0; */
    font-size: 38px;
  }

  #builder #title_edit {
    font-size: 38px;
  }

  #builder #page_description, #builder #description_edit {
    font-size: 12px;
    font-weight: 500;
  }

  #builder #tab_menu {
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  #builder .menu_tabs {
    padding: 10px 20px;
    font-size: 14px;
  }
  /* builder page details tab  */

  #builder .card_section_div_col{
    margin: 0;
    padding: 20px;
  }

  #builder .card_section_div_row {
    flex-direction: column;
    padding: 10px;
    align-items: center;
  }

  #builder .form_theme_div {
    flex-direction: row;
  }

  #builder .public_col {
    width: 160px;
    padding: 0px;
    padding-left: 12px;
  }

  #builder .public_label {
    font-size: 14px;
  }

  #builder .public_div > div {
    font-size: 14px;
  }

  #builder #copy_btn {
    font-size: 12px;
  }

  #builder .copy_icon {
    padding: 9px;
  }

  #builder #form_workflow_label, #builder #instruction_label, #builder .form_logo_div_text, #builder .form_colour_div_text {
    font-size: 12px;
    font-weight: 600;
  }

  #builder #form_workflow_select, #builder .instruction_div {
    font-size: 12px;
    font-weight: 500;
    width: 100%;
  }

  #builder .form_logo_div_text, #builder .form_colour_div_text {
    margin-left: 0;
  }

  #builder .form_logo_div {
    margin: 0;
  }

  #builder .form_logo_insert {
    margin-right: 0;
    font-size: 12px;
  }

  #builder .form_logo_selector_div {
    padding: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  #builder .form_upload_div {
    height: 75px;
    width: 75px;
    box-sizing: border-box;
  }

  #builder .form_existing_logo_div {
    height: 75px;
    width: 75px;
  }

  #builder .existing_logo {
    max-width: 50px;
    max-height: 50px;
  }

  #builder .form_existing_logo_div .checkbox_checked {
    background-size: 12px;
    border-radius: 50%;
    height: 24px;
    width: 24px;
  }

  #builder .logo_selected_tick {
    top: 54px;
    left: 54px;
  }

  #builder .form_logo_selector_title {
    font-size: 14px;
    font-weight: 700;
  }

  #builder .form_upload_desc {
    font-size: 6px;
    font-weight: 500;
  }

  #builder .cross_icon {
    height: 18px;
    width: 18px;
    margin-top: 6px;
  }

  #builder .form_colour_selector_div {
    top: 50px;
    left: 20px;
    padding: 10px;
  }

  /* builder tab  */

  #builder .builder_div {
    padding: 0;
  }

  #builder .builder_section_div {
    width: 90%;
    min-width: 0;
  }

  #builder .field_section_div {
    width: unset;
  }

  #builder .section_name_div > p {
    font-size: 14px;
  }

  #builder .title_text {
    font-size: 12px;
  }

  #builder #field_edit {
    font-size: 12px;
    /* width: 100%; */
    max-width: calc(100% - 6px)
  }

  #builder #default_edit {
    font-size: 12px;
  }

  #builder .field_inner_div > p, #builder .multi_select_label {
    font-size: 12px;
  }

  #builder .options_head th {
    font-weight: 600;
  }

  #builder .field_picker_div {
    display: flex;
    flex-direction: column;
    width: 96%;
    top: unset;
    bottom: 30px;
    position: sticky;
  }

  #builder .field_picker_inner_div {
    display: flex;
    flex-direction: row;
    overflow: auto;

  }

  #builder .field_picker_inner_div::-webkit-scrollbar {
    display: none;
  }

  #builder .picker_field_div {
    flex-direction: column;
    border-radius: 8px;
    margin: 10px 5px;
    padding: 0px 2px;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    min-height: 72px;
  }

  #builder .field_picker_type {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
  }

  #builder .field_add_icon {
    padding: 12px;
    background-size: 22px;
    margin-bottom: 4px;
  }

  #builder .field_picker_div h1 {
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
  }

  /* completed tab */
  #builder #form_table th {
    font-size: 14px;
  }

  #builder #form_table td {
    font-size: 12px;
    font-weight: 500;
  }

  #builder .tooltip_editor {
    max-width: 110px;
    font-size: 12px;
    /* padding: 6px; */
  } 

  #builder .show_tooltip_div {
    padding: 6px;

  }

  /* #builder .drag_icon, #builder .drag_header {
    display: none;
  } */

  .file_take_photo_button, .file_upload_text, .file_upload_text_or {
    display: none;
  }

  /* .attachment_input {
    height: unset;
    top: 138px;
  } */


}
@media only screen and (max-width:580px) {

  /* homepage */

  /* #home_page #default_card {
    padding: 0;
  } */

  /* builder tab */
  #builder .builder_section_div {
    width: 100%;
    min-width: 0;
  }

  #builder .options_head_label, #builder .options_head_value {
    width: 80%;
  }

  #builder .options_data_input {
    width: 80%;
    font-size: 12px;
  }

  #builder #option_drag {
    padding: 0;
    margin: 5px 0px 0px 0px;
    width: 16px;
    height: 16px;
  }
}

@media only screen and (max-width:480px) {

  /* form page queries  */


  #preview_page {
    width: 96%;
  }

  #preview_page .exit_text {
    display:none;
  }

  #preview_page .org_name {
    font-size: 14px;
    margin-bottom: 6px;
  }

  #preview_page .page_title {
    font-size: 30px;
    margin-bottom: 8px;
    padding: 0px 8px;
  }

  #preview_page #page_description {
    font-size: 12px;
  }

  #preview_page .logo_container {
    padding: 2px 6px;
  }

  #logo_div_preview {
    background-size: 80px, 20px;
    width: 86px;
    height: 18px;
    padding: 0px;
  }

  #preview_page .logo_container > p {
    font-size: 10px;
    font-weight: 400;
    
  }

  #preview_page #preview_header_div #back_text {
    display: none;
  }

  #preview_page #form_back_div {
    margin-right: 0px;
  }

  #form_back_div #back_text {
    font-size: 12px;
  }

  #preview_page .exit_div {
    padding: 10px 8px;
    margin-top: 4px;
    margin-right: 6px;
  }

  #preview_page .form_section_div {
    padding: 20px 20px;
    width: 90%;
  }

  #preview_page .field_label, .field_input {
    font-size: 16px;
  }

  #preview_page .field_label {
    margin-left: 0px;
    padding: 5px 0px 0px 10px;
  }

  #preview_page .page_button {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  
  .progress_item_div .progress_label {
    font-size: 14px;
  }

  #preview_page .progress_label_active {
    /* font-size: 14px; */
    font-weight: 500;
  }
  #preview_page .progress_label_inactive {
    /* font-size: 14px; */
    font-weight: 500;
  }

  #preview_page .exit_modal {
    top: 30%;
    left: 0;
    min-width: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 2rem 1rem;
  }

  #save_btn {
    margin-left: 0px
  }

  .form_page_logo {
    max-height: 65px;
  }

  #preview_page .tooltip_div {
    overflow: auto;
  }

  /* login page querries  */

  #login_page {
    width: 90%;
  }

  #login_form_div {
    width: 100%;
  } 

  #logo_div_login {
    background-size: auto 54px;
    padding: 18px;
  }

  #form_banner {
    font-size: 14px;
  }

  .login_label {
    font-size: 12px;
  }

  #span_agreement {
    width: 80%;
  }

  /* Homepage queries */

  #home_page {
    width: 95%;
  }

  #home_page #header_div {
    width: 95%;
    padding: 15px;
  }

  #home_page #user_details {
    display: none;
  }

  #home_page #page_title {
    font-size: 30px;
  }

  #home_page .search_input {
    width: 86%;
    font-size: 14px;
  }

  #home_page .section_title {
    font-size: 16px;
    font-weight: 600;
  }

  #organisations_forms .section_title_div {
    width: 100%;
  }

  #home_page #forms_div {
    width: 95%;
    padding: 0px 10px 10px 10px;
  }

  .form_icon_div {
    width: 20px;
    height: 20px;
  }

  .new_form_button_icon {
    background-size: 10px;
    width: 20px;
    height: 20px;
  }

  #home_page .new_form_card {
    justify-content: center;
    height: 110px;
    padding: 10px 5px;
    width: unset;
  }

  #home_page .new_form_icon {
    margin: 5px 0px;
    width: 28px;
    height: 28px;
  }

  #home_page .new_form_title {
    font-size: 12px;
    font-weight: 600;
    margin-top: 0;
  }

  #home_page .new_form_info {
    width: 90%;
  }

  #home_page #forms_available {
    max-height: 350px;
  }

  #home_page #new_forms_div {
    width: 95%;
    padding: 0px 10px 10px 10px;
  }

  #home_page .template_card {
    max-height: 150px;
    padding-top: 4px;
  }

  #default_card {
    width: 90%;
    padding: 0px 15px;
  }

  #home_page .card_info_header_div {
    margin: 0;
  }

  #home_page .form_card {
    height: 110px;
    padding: 5px;
  }

  #home_page .form_date_div {
    margin: 0;
  }

  #home_page .date_icon {
    margin-left: 5px;
    margin-right: 2px;
    padding: 5px;
  }

  #home_page .form_date {
    font-size: 8px;
    font-weight: 600;
  }

  #home_page .my_form_icon_div {
    margin: 5px 0px;
    width: 28px;
    height: 28px;
  }

  #home_page .form_info {
    flex-direction: row;
  }

  #home_page .form_card_title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 6px;
  }

  #home_page .form_state_div {
    padding: 2px 4px;
  }

  #home_page .form_card_state {
    font-size: 10px;
    letter-spacing: normal;
  }

  #home_page #card_menu_div {
    background-size: 18px;
    padding: 12px;
    margin: 0;
  }

  #home_page .card_info_div {
    margin: 0px;
  }

  #home_page #card_title_div {
    padding: 20px 10px;
  }

  #home_page .last_updated_div {
    height: auto;
  }
  #home_page .last_updated_divv> div {
    height: fit-content;
  }

  #home_page .last_updated_div .user_img_icon_small {
    width: 30px;
    height: 30px;
  }

  #home_page .last_updated_div .updated_user {
    font-size: 10px;
    white-space: unset;
    word-break: unset;
  }
  #home_page .last_updated_div .updated_date {
    font-size: 8px;
  }

  #home_page .forms_completed_div {
    height: 30px;
  }

  #home_page #template_icon_div {
    width: 30px;
    height: 30px;
  }

  #home_page .completed_icon {
    background-size: 15px;
    width: 32px;
    height: 32px;
  }

  #home_page .completed_details .completed_num {
    font-size: 15px;
  }
  #home_page .completed_details .completed_text {
    font-size: 10px;
    font-weight: 500;
  }

  #home_page #add_img_div {
    width: 50px;
    height: 50px;
  }

  #home_page #add_form_text {
    font-size: 12px;
    font-weight: 500;
  }

  #home_page .template_card #template_title {
    font-size: 12px;
    font-weight: 500;
  }

  #home_page .status_icon_private {
    width: 12px;
    height: 12px;
  }
  #home_page .status_icon_public {
    width: 12px;
    height: 12px;
  }

  #home_page .status_icon_text {
    font-size: 8px;
    font-weight: 500;
  }

  #home_page .action_menu {
    right: 26px;
    padding: 10px;
  }

  #home_page .card_delete_icon {
    background-size: 10px;
    font-size: 10px;
    font-weight: 600;
    padding-left: 20px;
  }

  /* #home_page #input_template_card {
    width: 100%;
  } */

  #home_page .create_template_label {
    font-size: 8px;
    font-weight: 600;
  }

  #home_page .form_input {
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 10px;
  }

  #home_page .field_input {
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 10px;

  }

  #home_page #create_btn {
    margin-top: 6px;
    background-size: 12px;
    background-position: 22px center;
    font-size: 10px;
    padding: 5px 5px 5px 15px;
  }

  #home_page .card_info_div .user_img_div {
    /* width: 30px; */
    height: 30px;
    font-size: 12px;
  }

  #home_page .card_info_div .updated_details {
    margin-left: 5px;
  }

  /* carousel styles below  */

  #home_page .section_div {
    padding: 0px 10px 10px 10px;
    width: calc(100% - 20px);
  }

  #home_page #card_div {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    width: 100%;
    gap: 15px;
  }

  #home_page #forms_available{
    height: unset;
  }

  #home_page #new_forms_div {
    display: flex;
    flex-direction: row;
    padding: 0;
    width: 100%;
  }

  #home_page .new_form_card {
    justify-content: center;
    height: 120px;
    padding: 5px 5px;
    width: unset;
    min-height: 100px;
    min-width: 180px;
  }

  #home_page #my_forms{
    height: unset;
  }

  #home_page #forms_div {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 0;
    width: 100%;
  }

  #home_page .form_card {
    height: 120px;
    padding: 5px 10px;
    min-width: 170px;
  }

  #home_page .template_card {
    min-width: 150px;
    min-height: 150px;
  }

  #home_page .section_title_div {
    padding: 10px;
  }

  #home_page #forms_div::-webkit-scrollbar{
    display: none;
  }
  #home_page #new_forms_div::-webkit-scrollbar{
    display: none;
  }
  #home_page #card_div::-webkit-scrollbar{
    display: none;
  }

  /* builder page  */

  #builder .form_page {
    width: 100%;
  }

  #builder #header_div {
    padding: 15px;
    width: 95%;
  }

  #builder #user_details {
    display: none;
  }

  #builder #hero_div {
    width: 95%;
  }

  #builder #back_div {
    padding: 0;
  }

  #builder #back_btn_div {
    width: 5px;
  }

  #builder #preview_btn {
    padding: 5px 6px;
  }

  #builder .menu_tabs {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
  }

  /* builder page details tab  */

  #builder .form_logo_div {
    flex-direction: column;
  }

  #builder .card_section_div_col {
    width: 90%;
    padding: 10px 0px;
    /* width: unset; */
  }

  #builder .template_details_section {
    width: 100%;
  }

  #builder .public_col {
    padding: 0;
    /* width: 160px; */
  }

  #builder .form_theme_div {
    flex-direction: row;
    justify-content: space-around;
  }

  #builder .form_logo_div_text, #builder .form_logo_insert {
    margin: 2px;
  }

  #builder .form_logo_selector_div {
    padding: 12px;
    grid-template-columns: 1fr 1fr 1fr;
    top: 100px;
    gap: 0.5rem;
  }

  #builder .form_colour_selector_div {
    top: 60px;
    left: 20px;
  }

  #builder .form_theme_colour_option_div > div {
    width: 26px;
    height: 26px;
  }

  #builder .form_theme_colour_option_text {
    font-size: 12px;
    font-weight: 600;
  }

  /* builder tab */

  #builder .field_remove_text {
    font-size: 10px;
  }

  #builder .drag_icon {
    margin-right: 0;
    margin-left: -10px;
  }


  /* completed tab */

  #builder #form_table {
    min-width: 310px;
    max-width: 475px;
  }
  
  #builder .forms_completed_table_div {
    padding: 10px;
  }

  #builder #field_edit {
    max-width: 130px;
  }

  #builder #section_edit {
    font-size: 14px;
    max-width: 200px;
  }

  #builder #form_table td {
    padding: 0px;
  }

  #builder .card_section_div_col {
    /* width: 90%; */
    padding: 10px;
  }

  /* Skeleton loader elements */

  #home .skeleton_form_logo {
    width: 30px;
    height: 30px;
  }
  #home .skeleton_form_title {
    height: 10px;
  }
  #home .skeleton_text_small {
    height: 10px;
  }
  #home .skeleton_template_workflow {
    height: 15px;
  }

  #home .updated_details_skeleton {
    width: 75px;
  }
  #home .last_updated_div_skeleton {
    align-items: center;
    margin-top: 10px;
  }

  #home .skeleton_card_title_div {
    margin-top: 0;
    padding: 4px 10px;
  }

  /* #home .skeleton_new_form_card {
    min-width: 170px;
    height: 70px;
    padding-left: 10px;
    padding-right: 10px;
  } */
  #home .skeleton_new_form_card {
    justify-content: center;
    height: 120px;
    padding: 4px;
    width: unset;
    min-height: 100px;
    min-width: 180px;
    margin: 0;
  }


}

@media screen and (max-width: 350px) {
  /* #home_page .date_icon {
    margin-left: 0px
  }

  #home_page .form_date {
    font-size: ;
  } */

  #home_page .form_info {
    flex-direction: column;
  }

  #home_page .form_date_div {
    margin-top: 2px;
  }
}