@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
  --white: #fff;
  --lightest-20: #ebebeb;
  --light-40: #cdd3d6;
  --mid-gray: #a9a9a9;
  --dark-80: #22272b;
  --black: #000;
  --primary-blue: #002664;
  --secondary-blue: #2e5299;
  --primary-highlight: #009ed5;
  --primary-red: #d7153a;
  --info-Blue-BG: #eaedf4;
  --input-Blue-BG: #0085b333;
  --info-Blue: #2e5299;
  --error-Red: #b81237;
  --error-Red-BG: #f7e7eb;
  --warning-Orange: #dc5800;
  --warning-Orange-BG: #fbeee5;
  --success-Green: #00a908;
  --success-Green-BG: #e5f6e6;
  --text-Dark: #22272b;
  --text-Light: #fff;
  --text-Focus: #0085b3;
  --text-Red: #f00;
}

body,
button,
input,
optgroup,
select,
textarea {
  font-family: 'Public Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  color: var(--dark-80);
}

.ob-form-container,
.container {
  max-width: 1600px;
}

/* mandatory fields */
.ob-label__required::after {
  font-size: 1.5rem;
  line-height: 1rem;
  content: ' *';
  display: inline;
  color: var(--text-Red) !important;
}

@media (max-width: 1200px) {
  .modal-card-foot {
    gap: 0.5rem;
  }

  .modal-card-foot .button:not(:last-child) {
    margin-right: 0;
  }

  /* text sizes */
  .title.is-1 {
    font-size: 1.75rem;
    font-weight: 700 !important;
  }

  .title.is-2 {
    font-size: 1.375rem;
    font-weight: 700 !important;
  }

  .title.is-3 {
    font-size: 1.125rem;
    font-weight: 700 !important;
  }

  .title.is-4 {
    font-size: 1rem;
    font-weight: 700 !important;
  }

  .title.is-5 {
    font-size: 0.8rem;
    font-weight: 700 !important;
  }

  .title {
    font-weight: 600 !important;
    line-height: 125% !important;
    color: var(--dark-80);
  }
}

@media (max-width: 767px) {
  .modal-card-foot {
    gap: 0.5rem;
  }

  .modal-card-foot .button:not(:last-child) {
    margin-right: 0;
  }

  /* text sizes */
  .title.is-1 {
    font-size: 1.75rem;
    font-weight: 600 !important;
  }

  .title.is-2 {
    font-size: 1.45rem;
    font-weight: 600 !important;
  }

  .title.is-3 {
    font-size: 1.25rem;
    font-weight: 600 !important;
  }

  .title.is-4 {
    font-size: 0.8rem;
    font-weight: 600 !important;
  }

  .title.is-5 {
    font-size: 1rem;
    font-weight: 600 !important;
  }

  .title {
    font-weight: 600 !important;
    line-height: 125% !important;
    color: var(--dark-80);
  }
}

@media (max-width: 640px) {
  .modal-card-foot {
    display: grid;
    justify-content: normal;
    gap: 0.5rem;
  }

  .modal-card-foot .button:not(:last-child) {
    margin-right: 0;
  }

  /* text sizes */
  .title.is-1 {
    font-size: 1.4rem;
    font-weight: 700 !important;
  }

  .title.is-2 {
    font-size: 1.25rem;
    font-weight: 600 !important;
  }

  .title.is-3 {
    font-size: 1.15rem;
    font-weight: 600 !important;
  }

  .title.is-4 {
    font-size: 0.6rem;
    font-weight: 500 !important;
  }

  .title.is-5 {
    font-size: 0.8rem;
    font-weight: 600 !important;
  }

  .title {
    font-weight: 600 !important;
    line-height: 125% !important;
    color: var(--dark-80);
  }
}

.button {
  height: 50px;
  font-size: 1.2rem;
  background-color: var(--primary-blue);
}

.button.is-light,
.ob-button-save-draft,
.button.is-primary,
.ob-button_remove,
.button.is-primary[disabled] {
  background-color: var(--white);
  color: var(--primary-blue) !important;
  border: 2px solid var(--primary-blue) !important;
}

.button.is-light:hover,
.ob-button-save-draft:hover,
.button.is-primary:hover,
.ob-button_remove:hover {
  background-color: var(--primary-blue);
  color: var(--white) !important;
  border: 2px solid var(--primary-blue);
}

.modal-card-foot .button.is-light {
  background-color: var(--primary-blue) !important;
  color: var(--text-Light) !important;
  border: 2px solid var(--primary-blue) !important;
}

.modal-card-foot .button.is-light:hover {
  background-color: var(--secondary-blue) !important;
  color: var(--text-Light) !important;
  border: 2px solid var(--secondary-blue) !important;
}

.modal-card-foot .button.is-success {
  background-color: var(--white);
  color: var(--primary-blue) !important;
  border: 2px solid var(--primary-blue) !important;
}

.modal-card-foot .button.is-success:hover { 
  background-color: var(--primary-blue);
  color: var(--white) !important;
  border: 2px solid var(--primary-blue);
}

.button.is-success,
.button.is-success[disabled] {
  background-color: var(--primary-blue);
  color: var(--text-Light) !important;
  border: 2px solid var(--primary-blue);
}

.button.is-success:hover {
  background-color: var(--secondary-blue);
  color: var(--text-Light) !important;
  border: 2px solid var(--secondary-blue);
}

svg[data-testid='RadioButtonCheckedIcon'] {
  color: var(--primary-blue);
  height: 3rem;
  width: 3rem;
  align-self: center;
  left: -7.9px;
}

svg[data-testid='RadioButtonUncheckedIcon'] {
  /*fill: var(--dark-80)*/
  border: 2px solid var(--dark-80) !important;
  border-radius: 30px !important;
  height: 2rem;
  width: 2rem;
  color: transparent;
}

.ob-label {
  font-size: 1rem !important;
  font-weight: 700;
  color: hsl(207, 12%, 15%);
}

.input:hover,
.textarea:hover,
.select select:hover {
  background-color: var(--input-Blue-BG);

  /* border: 2px solid var(--text-Focus); */
  transition: background-color 0.3s ease-in;
  border-color: #22272b;
  color: var(--dark-80);
}

.input:focus,
.textarea:focus,
.select select:focus,
.is-focused.input,
.is-focused.textarea,
.select select.is-focused,
.input:active,
.textarea:active,
.select select:active,
.is-active.input,
.is-active.textarea,
.select select.is-active {
  background-color: var(--input-Blue-BG);
  outline: 3px solid var(--text-Focus);
  outline-offset: 3px;
  border-color: #22272b;
  color: var(--dark-80);
}

.input,
.select select {
  border-color: #22272b;
  color: var(--dark-80);
}

/* turn bkg of dropdown to white */
.select select:active,
.select select:focus,
.select > option[value=''] {
  background-color: var(--white);
}

.ob-files__add-new-button > i::before {
  font-size: 50px;
  content: 'attach_file';
}

.ob-files__add-new-button {
  width: 100% !important;
  height: 162px !important;
  color: var(--primary-blue) !important;
  background-color: var(--info-Blue-BG) !important;
  border-color: var(--primary-blue) !important;
  border-style: solid !important;
  border-width: 2px !important;
}

.ob-files__add-new-button:focus {
  outline: 3px solid var(--text-Focus);
  outline-offset: 6px;
}

.button.ob-files__menu-button {
  min-width: 40px;
  max-height: 40px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: none;
}

.ob-files__content-image {
  padding: 0.5rem;
}

.ob-files__menu {
  top: 0;
  right: 0;
}

.ob-files__file-name {
  color: var(--white);
  background: var(--primary-blue);
}

.ob-files__box {
  background-color: var(--info-Blue-BG);
}

/* ABN search box */
.ob-abn__record-control {
  height: 40px !important;
  min-width: 300px;
  background-color: var(--white);
  font-size: 0.6rem !important;
}

.button.is-static {
  border-color: #22272b;
}

.ob-abn__record-button {
  height: auto !important;
}

/* Error */
[data-ob-name*='__error'] {
  display: flex;
  padding: 1rem 0.5rem;
  background-color: var(--error-Red-BG);
  border-left: 6px solid var(--error-Red);
}

[data-ob-name*='__error']::before {
  margin-right: 0.5rem;
  font-family: 'Material Icons';
  font-size: 1.8rem;
  line-height: 2rem;
  color: var(--error-Red);
  content: 'cancel';
}

/* Warning */
[data-ob-name*='__warning'] {
  display: flex;
  padding: 1rem 0.5rem;
  background-color: var(--warning-Orange-BG) !important;
  border-left: 6px solid var(--warning-Orange);
}

[data-ob-name*='__warning']::before {
  margin-right: 0.5rem;
  font-family: 'Material Icons';
  font-size: 1.8rem;
  line-height: 2rem;
  color: var(--warning-Orange);
  content: 'error';
}

/* Success */
[data-ob-name*='__success'] {
  display: flex;
  padding: 1rem 0.5rem;
  background-color: var(--success-Green-BG) !important;
  border-left: 6px solid var(--success-Green);
}

[data-ob-name*='__success']::before {
  margin-right: 0.5rem;
  font-family: 'Material Icons';
  font-size: 1.8rem;
  line-height: 2rem;
  color: var(--success-Green);
  content: 'done';
}

/* Info */
[data-ob-name*='__info'] {
  display: flex;
  padding: 1rem 0.5rem;
  border-left: 6px solid var(--info-Blue) !important;
  background-color: #eaedf4;
}

[data-ob-name*='__info']::before {
  margin-right: 0.5rem;
  font-family: 'Material Icons';
  font-size: 1.8rem;
  line-height: 2rem;
  color: var(--info-Blue) !important;
  content: 'info';
}

.has-text-danger {
  color: var(--error-Red) !important;
}

.has-text-danger.ob-error__text {
  line-height: 1;
  color: var(--error-Red);
  background-color: var(--error-Red-BG);
  padding: 0.5rem;
  align-items: center;
  display: flex;
  width: max-content;
  font-weight: 600;
}

.has-text-danger.ob-error__text::after {
  font-size: 1rem;
  line-height: 1;
}

.has-text-danger.ob-error__text::before {
  font-family: 'Material Icons';
  font-size: 1.5rem;
  content: 'cancel';
  line-height: 1;
  margin-right: 0.5rem;
  font-weight: 400;
}

/* feedback */

/*  Like & Dislike */
/* .ob-buttons-radio .ob-button-radio-container .ob-button {
  color: var(--white) !important;
  background-color: var(--mid-gray);
  border-color: var(--black);
} */

[data-ob-name='feedback'] .ob-button-radio-container button::before {
  margin-right: 0.5rem;
  font-family: 'Material Icons';
  font-size: 24px;
}

[data-ob-name='feedback'] {
  color: var(--white) !important;
}

[data-ob-name='feedback'] .ob-button {
  min-width: 120px;
}

@media (max-width: 768px) {
  .ob-button-radio-container,
   .ob-button-radio-container button,
  .buttons button,
  .ob-repeatable-set button{
    width: 100%;
  }
  
  .buttons .button:not(:last-child):not(.is-fullwidth){
    margin-right: 0;
  }
}

[data-ob-name='feedback']
  .ob-button-radio-container:first-of-type
  button:hover {
  border: 2px solid var(--success-Green) !important;
}

[data-ob-name='feedback']
  .ob-button-radio-container:first-of-type
  .is-primary {
  border: 2px solid var(--success-Green) !important;
  color: var(--text-Light) !important;
}

[data-ob-name='feedback'] .ob-button-radio-container:last-of-type button:hover {
  border: 2px solid var(--text-Red) !important;
}

[data-ob-name='feedback'] .ob-button-radio-container:last-of-type .is-primary {
  border: 2px solid var(--text-Red) !important;
  color: var(--text-Light) !important;
}

[data-ob-name='feedback']
  .ob-button-radio-container:first-of-type
  button::before {
  content: 'thumb_up';
  color: var(--success-Green) !important;
}

[data-ob-name='feedback']
  .ob-button-radio-container:last-of-type
  button::before {
  content: 'thumb_down';
  color: var(--error-Red) !important;
}

/* Signature */
.input.ob-signature__control.cypress-signature-control.signature-pad {
  height: 200px;
}

.cypress-signature-image.ob-signature__img {
  padding: 1rem;
  border-bottom: 2px dashed;
}

.ob-signature .ob-figure .figure-content {
  height: 200px;
}

.ob-signature .ob-button__done,
.ob-button__clear {
  height: 50px;
  font-size: 1.2rem;
  background-color: var(--primary-blue);
}

.ob-signature .ob-button__done:hover,
.ob-button__clear:hover {
  background-color: var(--secondary-blue);
  color: var(--text-Light) !important;
}

.ob-form__element.ob-signature .ob-button__done,
.button.ob-button__clear {
  font-size: 0;
  height: 50px;
}

.ob-form__element.ob-signature .ob-button__done::after {
  content: 'Save Signature';
  font-size: 1.2rem;
  padding: 0 1.5rem;
}

.ob-form__element.ob-signature .ob-button__clear::after {
  content: 'Redo Signature';
  font-size: 1.2rem;
  padding: 0 1.5rem;
}

/* copy to clipboard button - hidden */
button.button.is-input-addon.cypress-copy-to-clipboard-button {
  visibility: hidden;
}
/* 
button[disabled] {
  display: none;
} */

/* Modal card messages */
.modal-card {
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 25%);
}

.modal-background,
.modal-background-faded {
  background-color: var(--primary-blue);
}

.input,
.textarea,
.select select,
.file-cta,
.file-name,
.button {
  font-size: 1.125rem;
  height: auto;
}

.select:not(.is-multiple) {
  height: auto;
}

.ob-input-icon.icon.is-small.is-right {
  height: 100%;
}

/*.ob-repeatable-set.even > .ob-repeatable-set__container {
  background-color: unset;
} */

/*.ob-repeatable-set .ob-repeatable-set__container {
  padding: 0;
} */

/* .ob-repeatable-set .ob-repeatable-set__container > .ob-button_remove {
  top: -1.5rem;
  right: 0;
} */

[data-ob-name='complaintType'] textarea,
[data-ob-name='serviceAmenityName'] input {
  margin-top: 1.5rem;
}

.ob-repeatable-set.even > .ob-repeatable-set__container {
  background-color: #eaedf4;
  border-left: 6px solid #2880ba;
}

.MuiSvgIcon-root {
  font-size: 1.8rem !important;
}

.ob-checkbox__input {
  border: 2px solid var(--dark-80) !important;
  border-radius: 4px !important;
  margin-left: 0 !important;
}

.ob-checkbox__input-label > .ob-checkbox__input.ob-checkbox__input-checked,
.ob-checkbox__input-label > .ob-checkbox__input.ob-radio__input-checked,
.ob-checkbox__input-label > .ob-radio__input.ob-checkbox__input-checked,
.ob-checkbox__input-label > .ob-radio__input.ob-radio__input-checked,
.ob-radio__input-label > .ob-checkbox__input.ob-checkbox__input-checked,
.ob-radio__input-label > .ob-checkbox__input.ob-radio__input-checked,
.ob-radio__input-label > .ob-radio__input.ob-checkbox__input-checked,
.ob-radio__input-label > .ob-radio__input.ob-radio__input-checked {
  color: var(--primary-blue) !important;
}

.control .MuiCheckbox-root,
.ob-radio__input {
  color: transparent !important;
}

[data-ob-name="emailAddress"] {
  display: none;
}

[data-ob-name="comments"] {
  height: auto;
}

/* put sublabels in selected fields */
.label.ob-label__container {
  /*display: grid; */
}

/* Multi-select customisations */
[data-ob-name="residentialPremisesTypes"] .label.ob-label__container::after,
[data-ob-name="residencyRightTypes"] .label.ob-label__container::after,
[data-ob-name="insuranceType"] .label.ob-label__container::after,
[data-ob-name="contractTypes__label"] .label.ob-label__container::after,
[data-ob-name="residentsConsentedTo"] .label.ob-label__container::after
{
  content: "(tick all applicable options)";
  font-size: 0.8rem;
  padding-left: 5px;
}

.update-annually::before {
    content: '\eb7b';
    font-family: 'Material Icons';
  	color: #DC5800;
}

.ob-element.update-annually::before {
    position: absolute;
    margin-top: -2px;
}

.update-annually .ob-label {
    margin-left: 1.2rem;
}

.hide-checkbox-label > div > .ob-form__element.ob-checkbox .ob-label__container {
  display:none
}

.hide-options > div > .ob-form__element.ob-checkbox > div:nth-of-type(2) {
  display: none
}

.zero-bottom-margin.ob-element {
	margin-bottom: 0
}

.annual-return-validation-message {
 	color: #DC5800; 
}