/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
:root {
  --Primary-Default: #01365B;
  --Primary-Hover: #257779;
  --Primary-Active: #002640;
  --Primary-Light: #BEE0F8;

  --Secondary-Green: #0F7E2B;
  --Secondary-Hover: #4C985F;
  --Secondary-Active: #024E15;
  --Secondary-Light: #D6E9D9;
  --Secondary-Gray: #708090;
  --Secondary-Gray-Hover: #95A1AD;
  --Secondary-Gray-Active: #51606E;

  --Text-Contents-Primary: #434C58;
  --Text-Contents-Secondary: #707A87;
  --Text-Contents-Textlink: #4B98CD;
  --Text-Contents-Palceholder: #C2C2C2;
  --Text-Contents-Disable: #B5C4D1;

  --Sematic-Red: #DF4759;
  --Sematic-Red-Hover: #EB7280;
  --Sematic-Red-Hover2: #9F1E2E;
  --Sematic-Red-Light: #F9DADE;

  --Sematic-Yellow: #E6AA35;
  --Sematic-Yellow-Hover: #F7C76B;
  --Sematic-Yellow-Hover2: #CF9422;
  --Sematic-Yellow-Light: #FAEED6;

  --Sematic-Green: #0F7E2B;
  --Sematic-Green-Hover: #4C985F;
  --Sematic-Green-Hover2: #024E15;
  --Sematic-Green-Light: #D6E9D9;

  --Theme-Artboard: #EEF3F6;
  --Theme-Disable-Form: #E7ECF0;
  --Theme-Border: #DEDEDE;
  --Theme-Backdrop: #434C58;
  --Theme-White: #FFFFFF;
  --Theme-Black: #000000;
  --Theme-Border-Radius: 4px;
  /* Selection */
  /* Table */

  --Status-On-Process: #F3AF00;
  --Status-On-Process-Light: #FFF3D1;
  --Status-Awaiting: #3AAFD1;
  --Status-Awaiting-Light: #DBF1F7;
  --Status-Complete: #19D77C;
  --Status-Conplete-Light: #D3F6E3;
  --Status-Reject: #FA5C7C;
  --Status-Reject-Light: #FFE2E7;
  --Status-No-Response: #6C757C;
  --Status-No-Response-Light: #E5E6E8;
  --Status-Cancelled: #313A46;
  --Status-Cancelled-Light: #DADBDE;
  --Status-Other: #283444;
  --Status-Other-Light: #CDD6E6;

  --body-regular-size: 14px;
  --caption-regular-size: 12px;
  --font-size-xl: 20px;
  --headline-3-bold-size: 18px;
  --headline-2-bold-size: 24px;
  --theme-artboard: #eef3f6;
  --theme-white: #fff;
  --text-primary: #434c58;
  --primary-default: #01365b;
  --text-secondary: #707a87;
  --theme-border: #dedede;
  --secondary-green: #0f7e2b;
  --alert-danger-default: #df4759;
  --text-textlink: #4b98cd;
  --text-disable: #b5c4d1;
  --primary-active: #002640;
  --button-top-background: #0085FC;
  --gap-base: 16px;
  --gap-xl: 20px;
  --gap-0: 0px;
  --gap-5xs: 8px;
  --gap-xs: 12px;
  --padding-3xs: 10px;
  --padding-5xl: 24px;
  --padding-29xl: 48px;
  --padding-xl: 20px;
  --padding-9xs: 4px;
  --padding-xs: 12px;
  --padding-5xs: 8px;
  --padding-base: 16px;
  --padding-7xs: 6px;
  --br-9xs: 4px;

  --modal-and-dropdown-shadow: 0px 0px 6px rgba(24, 24, 25, 0.16);

  --font-main: Arial;
  --body-regular: Arial;
    --font-roboto: Roboto;
}
  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }

    .question-valid-container.text-info.col-12 {
        font-size: medium;
        padding-left: 25px;
        color: #f00d0d !important;
    }

/* upload button */
.survey-form-container .upload-button .upload {
    border-radius: var(--br-9xs);
    background-color: var(--theme-white);
    border: 1px solid var(--theme-border);
    align-items: center;
    padding: var(--padding-5xs) 8px var(--padding-5xs) 11px;
    color: var(--secondary-green);
    line-height: 20px;
    font-weight: 700;
}

.survey-form-container .ri-upload-fill:before {
    content: none;
}

/* end upload button */
.space-col {
  margin-left: 2em;
}
#outerframeContainer {
  background: var(--Theme-Artboard);
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    position: relative;
    background-color: var(--theme-artboard);
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    letter-spacing: normal;
}
#limesurvey {
    display: flex;
    justify-content: flex-start;
    flex: 1;
    /* gap: 56px 0; */
    /*max-width: calc(100% - 272px);*/
    max-width: 100%;
    font-size: var(--headline-2-bold-size);
    font-family: var(--body-regular);
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: var(--primary-default);
    width: 100%;
}
div#main-col {
    display: flex;
    justify-content: space-around;
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    margin: 0 0 0 0;
    flex-direction: column-reverse;
}
.icon-required-question {
    color: var(--alert-danger-default);
    position: relative;
    line-height: 20px;
}

/* Question content */
.question-valid-container .text-danger {
    font-size: 12px;
}
.question-title-container.col-12 {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0 4px;
    padding-bottom: 12px;
    padding-left: 24px;
}
.answer-container.col-12 {
    padding-left: 24px;
}
.ls-answers.answers-list.radio-list.row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.radio-item label, .checkbox-item label {
    cursor: pointer;
    color: var(--text-primary, #434C58);
    font-family: var(--font-main);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}
ul.list-unstyled.col-md-12.col-12 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.group-outer-container {
    width: 100%;
}

/* End Question content */

/* Question index */
.group-container .index-wrapper .list-group.index-button-full {
  display: none;
}
.list-group-item {
  display: none;
  border: none;
}
.list-group-item{
  color: var(--Text-Contents-Disable);
  /* Body/Bold */
  font-family: var(--font-main);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
}
button.list-group-item.index-item.index-item-before.index-item-seen{
  color: var(--Primary-Default);
}
button.list-group-item.index-item.index-item-seen.index-item-current.disabled {
  color: var(--Primary-Default);
}
.list-group.index-button-full {
  width: 100%;
  border-radius: var(--Theme-Border-Radius);
  background-color: var(--Theme-White);
  border: 1px solid var(--Theme-Border);
  box-sizing: border-box;
  position: relative;
  cursor: not-allowed;

}
.list-group-item.index-item.index-item-seen.index-item-unanswered.index-item-current {
  border-left: 2px solid var(--Primary-Default);
  color: var(--Primary-Default);
}

.bottom {

}
.tooltiptext {
  visibility: hidden;
  width: 203px;
  margin: 0 !important;
  position: absolute;
  /*top: 84px;*/
  /*left: 9px;*/
  z-index: 1;
  text-align: center;
  font-size: var(--caption-regular-size);
  color: var(--theme-white);
}
.list-group-item-warning .list-group-item:hover .tooltiptext {
  visibility: visible;
}
.tooltips-text-frame {
  height: 8px;
  width: 10px;
  position: relative;
  margin-bottom: -12px;
}
.text12 {
  align-self: stretch;
  border-radius: var(--br-9xs);
  background-color: var(--primary-default);
  flex-direction: row;
  padding: var(--padding-5xs);
  white-space: nowrap;
}
.tooltips {
  flex: 1;
  position: relative;
  line-height: 18px;
}
svg.check-mark-circle {
  display: none;
}

/*.index-item-current>svg.check-mark-circle {*/
/*  display: block;*/
/*  position: absolute;*/
/*  margin-left: 80%;*/
/*}*/

button.list-group-item.index-item.index-item-before.index-item-seen>svg.check-mark-circle {
  display: block;
  position: static;
  /*margin-left: 80%;*/
    overflow: visible;
}

button.list-group-item.index-item.index-item-before.index-item-seen.index-item-unanswered.index-item-error.list-group-item-warning.list-group-item-danger>svg.check-mark-circle {
  display: none;
}

button.list-group-item.index-item {
  pointer-events: none;
  flex: 1;
  font-size: var(--body-regular-size);
  font-weight: 200;
  padding: var(--padding-5xs) var(--padding-xs) var(--padding-5xs) var(--padding-base);
}
/*button.list-group-item.index-item.index-item-seen.index-item-unanswered.list-group-item-warning {*/
/*  pointer-events: none;*/
/*}*/
button.list-group-item.index-item.index-item-before{
  pointer-events: visible;
}
button.list-group-item.index-item.index-item-current{
  pointer-events: visible;
  font-size: var(--body-regular-size);
  font-weight: bolder;
}
.list-group-item-warning {
  background: white;
}

/* container */
.space-col {
  margin-left: 0.5em;
}

.submit-edit-button a{
    color: var(--theme-white);
}
.print-icon {
    margin-right: 8px;
}
.save-draft-button a, .print-assessment a {
    color: var(--Secondary-Green);
}
.save-draft-button a {
    font-size: var(--body-regular-size);
    font-weight:bold;
}
.save-draft-button, .print-assessment {
    background-color: rgba(255, 243, 205, 0.01);
    border: none;
}

/* ssa edit submit footer */
.draft-and-submit {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    font-size: var(--font-size-xl);
    font-family: var(--font-roboto);
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    color: var(--primary-default);
    padding: 10px 30px 10px 30px;
    box-sizing: border-box;
    position: relative;
    background-color: var(--theme-white);
    border: 1px solid var(--theme-border);
    border-bottom: none;
}
.save-draft-button {
    font-family: var(--font-main);
}
.submit-edit-button{
    padding: var(--padding-3xs) var(--padding-base);
    background-color: var(--secondary-green);
    border-radius: var(--br-9xs);
    border: 0;
    width:180px;
    margin-left:32px;
}

.submit-edit-button b {
    font-size: var(--body-regular-size);
    line-height: 20px;
    display: inline-block;
    font-family: var(--font-main);
    color: var(--theme-white);
    text-align: center;
}
/* end ssa edit submit footer */

.online-assessment-frame-children {
    display: flex;
    justify-content: flex-end;
}

.online-assessment-frame-children button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.online-assessment-frame-children button a {
    text-decoration: none;
}

.online-assessment-frame-children .btn {
    margin-right: 12px;
    padding: 10px 20px; /* Adjust padding as needed */
    font-size: initial;
    height: 30px;
    font-weight: 600;
    border: none;
}

.status-line {
    padding: 0px 18px;
    line-height: 25px;
}

.border-left-status {
    border-left: solid 1px #DEDEDE;
    margin-right: 12px;
}

.status-submitted, .status-rejected, .status-awaiting {
    border-radius: 4px;
    height: 30px;
    width: 80px;
    font-size: small;
    line-height: 30px;
    text-align: center;
    margin: 3px 0 0 3px;
    font-weight: 700;
    padding: 5px 10px;
}

.status-submitted {
    background-color: var(--Status-Conplete-Light);
    color: var(--Status-Complete);
}
.status-rejected {
    background-color: var(--Status-Reject-Light);
    color: var(--Status-Reject);
}
.status-awaiting {
    background-color: var(--Status-On-Process-Light);
    color: var(--Status-On-Process);
}
.box-reject-reason{
    border-radius: 4px;
    min-height: 40px;
    width: 99%;
    font-size: small;
    /*line-height: 40px;*/
    /*text-align: center;*/
    background-color: rgba(219, 40, 67, 0.22);
    border: solid 1px #DB2843;
    margin-left: 14px;
    padding: 10px 10px 5px 10px;
}

.edit-ssa-button {
    margin-right: 30px;
    color: var(--Secondary-Green);
    padding-top: 10px;
    font-size: initial;
    font-weight: 600;
    display: none;
    cursor: pointer;
}
.edit-ssa-button a {
    color: var(--Secondary-Green);
}
.group-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--theme-border);
}

.group-container.space-col {
  flex: 1;
  border-radius: var(--br-9xs);
  /*border: 1px solid var(--theme-border);*/
  box-sizing: border-box;
  overflow: hidden;
  max-width: calc(100% - 246px);
  font-size: var(--headline-3-bold-size);
  color: var(--primary-default);
  margin: 0 0 0 0;
  background: var(--Theme-White);
}

.group-title.text-center.h3.space-col {
  align-self: stretch;
  border-radius: var(--br-9xs) var(--br-9xs) 0 0;
  background-color: var(--theme-white);
  border-bottom: 1px solid var(--theme-border);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xs) var(--padding-5xl);
  max-width: 100%;
  margin: 0 0 0 0;
  font-size: large;
  font-weight: 700;
}
.ls-label-question, .question-number{
  position: relative;
  font-size: var(--body-regular-size);
  line-height: 20px;
  font-family: var(--font-main);
  color: var(--text-primary);
  text-align: left;
  font-weight: bold;
}
.question-container {
  margin-bottom: 0em;
  border: none;
  background-color: var(--Theme-White);
}
.form-control {
  border: 1px solid var(--theme-border);
  outline: 0;
  background-color: var(--theme-white);
  height: 40px;
  border-radius: var(--br-9xs);
  box-sizing: border-box;
  align-items: center;
  padding: var(--padding-3xs) var(--padding-xs);
  min-width: 250px;
}
.form-control.numeric {
    text-align: left;
}
.ls-answers {
  padding-top: 0;
  padding-bottom: 5px;
}

/* top container question */
.small-section-group {
    color: var(--Primary-Default, #01365B);
    font-family: var(--font-main);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
.online-assessment-frame {
  flex-direction: row;
  gap: 0 8px;
  max-width: 100%;
}
.online-supplier-self {
  margin: 0;
  position: relative;
  line-height: 36px;
  font-weight: 700;
  text-align: left;
  font-size: var(--headline-2-bold-size);
  color: var(--primary-default);
  font-family: var(--font-main);
}
.side-rectangle-text-active {
  flex-direction: column;
  padding: var(--padding-7xs) 0 0;
}
.online-assessment-frame, .side-rectangle-text-active {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.online-assessment-frame {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  cursor: pointer;
  width: 100%;
}
.side-rectangle-text-active {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    cursor: pointer;
    padding-left: 10px;
}
.info-circle-icon {
  width: 24px;
  height: 24px;
  position: relative;
}
.ssa-title {
    display: flex;
}

/*popup*/
.modal-supplier-self-assessment {
    width: 100%;
    position: absolute;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /*padding: 112px var(--padding-xl) 148px;*/
    box-sizing: border-box;
    letter-spacing: normal;
    text-align: left;
    font-size: var(--headline-3-bold-size);
    color: var(--primary-default);
    font-family: var(--font-main);
    background: #3e3d3d85;
}
.modal-supplier-self-assessment .header-child {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.modal-supplier-self-assessment .title1 {
    flex: 1;
    position: relative;
    line-height: 24px;
    display: inline-block;
    max-width: calc(100% - 48px);
    padding: 12px 0 12px 24px;
}
.modal-supplier-self-assessment .close-icon {
    height: 24px;
    width: 24px;
    position: relative;
    padding: 12px 24px 12px 24px;
}
.modal-supplier-self-assessment .header-frame,
.modal-supplier-self-assessment .title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}
.modal-supplier-self-assessment .title {
    flex: 1;
    gap: 0 24px;
    z-index: 1;
}
.modal-supplier-self-assessment .header-frame {
    align-self: stretch;
    /*padding: 0 var(--padding-5xl);*/
    box-sizing: border-box;
}
.modal-supplier-self-assessment .company-logo-area {
    align-self: stretch;
    height: 1px;
    position: relative;
    background-color: var(--theme-border);
    z-index: 1;
}
.modal-supplier-self-assessment .company-frames-child,
.modal-supplier-self-assessment .header {
    position: relative;
    max-width: 100%;
}
.modal-supplier-self-assessment .header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    /*padding: 12px 0 0;*/
    box-sizing: border-box;
    /*gap: 11px 0;*/
}
.modal-supplier-self-assessment .company-frames-child {
    width: 540px;
    height: 412px;
    display: none;
}
.modal-supplier-self-assessment .span {
    text-decoration: underline;
}
.modal-supplier-self-assessment .p {
    margin: 0;
}
.modal-supplier-self-assessment .supplier-code-of {
    margin: 0;
    white-space: pre-wrap;
}
.modal-supplier-self-assessment .supplier-code-of-container {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    z-index: 2;
}
.modal-supplier-self-assessment .p1,
.modal-supplier-self-assessment .p2 {
    margin: 0;
}
.modal-supplier-self-assessment .div {
    align-self: stretch;
    height: 40px;
    position: relative;
    line-height: 20px;
    display: inline-block;
    z-index: 2;
}
.modal-supplier-self-assessment .b {
    font-family: var(--font-main);
}
.modal-supplier-self-assessment .span1 {
    text-decoration: underline;
}
.modal-supplier-self-assessment .b1,
.modal-supplier-self-assessment .b2,
.modal-supplier-self-assessment .e-procurement1,
.modal-supplier-self-assessment .span2 {
    font-family: var(--font-main);
}
.modal-supplier-self-assessment .e-procurement {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    z-index: 2;
    padding-top: 12px;
}
.modal-supplier-self-assessment .p3 {
    white-space: pre-wrap;
}
.modal-supplier-self-assessment .p3,
.modal-supplier-self-assessment .p4 {
    margin: 0;
}
.modal-supplier-self-assessment .div1 {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    z-index: 2;
}
.modal-supplier-self-assessment .user-guide-for {
    white-space: pre-wrap;
}
.modal-supplier-self-assessment .span3 {
    color: #4b98cd;
}
.modal-supplier-self-assessment .user-guide-for-container {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    z-index: 2;
}
.modal-supplier-self-assessment .company-frames,
.modal-supplier-self-assessment .popup-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 100%;
}
.modal-supplier-self-assessment .company-frames {
    align-self: stretch;
    background-color: #fff;
    padding: var(--padding-5xl);
    box-sizing: border-box;
    gap: 16px 0;
    font-size: var(--body-regular-size);
    color: var(--text-primary);
}
.modal-supplier-self-assessment .popup-main {
    border-radius: 0 0 var(--br-9xs) var(--br-9xs);
    box-shadow: 0 0 6px rgba(24, 24, 25, 0.16);;
    z-index: 1;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    outline: 0;
    /*pointer-events: auto;*/
    position: fixed;
    margin-top: 70px;
}

#modal-help-get-lat-long .popup-main,
#modal-supplier-self-assessment .popup-main {
    width: 540px;
}

.modal-supplier-self-assessment .step-guide-map {
    position: relative;
    line-height: 20px;
    z-index: 1;
}
.modal-supplier-self-assessment .step-guide-map li {
    padding-left: 10px;
}
.modal-supplier-self-assessment .google-maps-child {
    width: 100%;
}
@media screen and (max-width: 412px) {
    .company-frames {
        padding-top: var(--padding-xl);
        padding-bottom: var(--padding-xl);
        box-sizing: border-box;
    }
}

/*annoucement*/
/* start annoucement */
#modal-ssa-annoucement-approve {
    background-color: #9a9a9a;
    position: fixed;
}
.modal-supplier-self-assessment .footer {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.modal-supplier-self-assessment .footer {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    padding: var(--padding-xs) var(--padding-xl);
    position: relative;
}
.modal-supplier-self-assessment .footer-child {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.modal-supplier-self-assessment .button-confirm,
.modal-supplier-self-assessment .button {
    flex-direction: row;
    justify-content: flex-start;
}
#modal-ssa-annoucement-approve .button {
    width: 0;
    gap: var(--gap-base);
    z-index: 1;
}
#modal-ssa-annoucement-approve .button,
#modal-ssa-annoucement-approve .footer {
    display: flex;
    align-items: flex-start;
    /*width: 100%;*/
}
.modal-supplier-self-assessment .button-cancel {
    font-size: 14px;
    color: var(--Secondary-Green, #0F7E2B);
}
.modal-supplier-self-assessment .button-cancel {
    cursor: pointer;
    border: 1px solid var(--theme-border);
    padding: var(--padding-3xs) 16px;
    background-color: var(--theme-white);
    flex: 0.5476;
    border-radius: var(--br-9xs);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
#modal-ssa-annoucement-approve .button span b {
    min-width: 70px;
    height: 20px;
    display: block;
    text-align: center;
}
#modal-ssa-annoucement-approve .button-leave {
    font-size: 14px;
    color: var(--Theme-White, #FFF);
    border: 0;
    padding: var(--padding-3xs) 16px;
    background-color: var(--secondary-green);
    flex: 1;
    border-radius: var(--br-9xs);
    white-space: nowrap;
    width: 120px;
    height: 40px;
    cursor: pointer;
}
#modal-ssa-annoucement-approve .popup-main{
    width: 540px;
}

/*end annoucement*/

/*confirm*/
#modal-confirm-submit-ssa .confirmation {
    flex: 1;
    border-radius: 4px;
    background-color: var(--theme-white);
    box-shadow: var(--modal-and-dropdown-shadow);
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px 0 0;
    box-sizing: border-box;
    gap: 24px;
    min-width: 351px;
    max-width: 100%;
    text-align: center;
}
#modal-confirm-submit-ssa .confirm-ssa-content-wrapper {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-5xl);
    box-sizing: border-box;
    max-width: 100%;
}
#modal-confirm-submit-ssa .content {
    flex: 1;
    flex-direction: column;
    gap: 36px;
}
#modal-confirm-submit-ssa .title-confirm {
    align-self: stretch;
    position: relative;
    line-height: 24px;
}
#modal-confirm-submit-ssa .content, .confirm-ssa-content-wrapper {
    max-width: 100%;
}
#modal-confirm-submit-ssa .content,#modal-confirm-submit-ssa  .confirm-ssa-content-wrapper,#modal-confirm-submit-ssa  .contents {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
#modal-confirm-submit-ssa .saved-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl);
}
#modal-confirm-submit-ssa .saved-icon {
    height: 80px;
    width: 120px;
    position: relative;
}
#modal-confirm-submit-ssa .contents {
    align-self: stretch;
    flex-direction: column;
    gap: var(--gap-base);
}
#modal-confirm-submit-ssa .footer {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    padding: var(--padding-xs) var(--padding-xl);
    position: relative;
}
#modal-confirm-submit-ssa .button,#modal-confirm-submit-ssa  .confirmation,#modal-confirm-submit-ssa  .footer {
    display: flex;
    align-items: flex-start;
}
#modal-confirm-submit-ssa .footer-child {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
#modal-confirm-submit-ssa .button,#modal-confirm-submit-ssa  .confirmation,#modal-confirm-submit-ssa  .footer {
    display: flex;
    align-items: flex-start;
}

#modal-confirm-submit-ssa .button {
    width: 256px;
    gap: var(--gap-base);
    z-index: 1;
}
#modal-confirm-submit-ssa .button-confirm,#modal-confirm-submit-ssa  .button {
    flex-direction: row;
    justify-content: flex-start;
}
#modal-confirm-submit-ssa .button-cancel {
    cursor: pointer;
    border: 1px solid var(--theme-border);
    padding: 10px 16px;
    background-color: var(--theme-white);
    flex: 0.5476;
    border-radius: var(--br-9xs);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
#modal-confirm-submit-ssa .button-cancel b {
    width: 80px;
    line-height: 25px;
}
#modal-confirm-submit-ssa .button-confirm {
    border: 0;
    padding: var(--padding-3xs) 18px;
    background-color: var(--secondary-green);
    flex: 1;
    border-radius: var(--br-9xs);
    white-space: nowrap;
    color: #fff;
}
#modal-confirm-submit-ssa .button-confirm,#modal-confirm-submit-ssa  .button {
    flex-direction: row;
    justify-content: flex-start;
}

.mini-warning-popup .confirmation {
    flex: 1;
    border-radius: 4px;
    background-color: var(--theme-white);
    box-shadow: var(--modal-and-dropdown-shadow);
    flex-direction: column;
    justify-content: flex-start;
    padding: 36px 0 0;
    box-sizing: border-box;
    gap: 24px;
    min-width: 351px;
    max-width: 100%;
    text-align: center;
}
.mini-warning-popup .confirm-ssa-content-wrapper {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-5xl);
    box-sizing: border-box;
    max-width: 100%;
}
.mini-warning-popup .content {
    flex: 1;
    flex-direction: column;
    gap: 36px;
}
.mini-warning-popup .title-confirm {
    align-self: stretch;
    position: relative;
    line-height: 24px;
}
.mini-warning-popup .content, .confirm-ssa-content-wrapper {
    max-width: 100%;
}
.mini-warning-popup .content,
.mini-warning-popup .confirm-ssa-content-wrapper,
.mini-warning-popup .contents {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.mini-warning-popup .saved-wrapper {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl);
}
.mini-warning-popup .saved-icon {
    height: 80px;
    width: 120px;
    position: relative;
}
.mini-warning-popup .contents {
    align-self: stretch;
    flex-direction: column;
    gap: var(--gap-base);
}
.mini-warning-popup .footer {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    padding: var(--padding-xs) var(--padding-xl);
    position: relative;
}
.mini-warning-popup .button,
.mini-warning-popup .confirmation,
.mini-warning-popup .footer {
    display: flex;
    align-items: flex-start;
}
.mini-warning-popup .footer-child {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
}
.mini-warning-popup .button,
.mini-warning-popup .confirmation,
.mini-warning-popup .footer {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.mini-warning-popup .button {
    width: 120px;
    gap: var(--gap-base);
    z-index: 1;
}
.mini-warning-popup .button-confirm,.mini-warning-popup  .button {
    flex-direction: row;
    justify-content: flex-start;
}
.mini-warning-popup .button-cancel {
    cursor: pointer;
    border: 1px solid var(--theme-border);
    padding: var(--padding-3xs) 16px;
    background-color: var(--theme-white);
    flex: 0.5476;
    border-radius: var(--br-9xs);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.mini-warning-popup .button-cancel {
    font-size: 14px;
    color: var(--Secondary-Green, #0F7E2B);
}

.mini-warning-popup .button-leave {
    font-size: 14px;
    color: var(--Theme-White, #FFF);
    border: 0;
    padding: var(--padding-3xs) 16px;
    background-color: var(--secondary-green);
    flex: 1;
    border-radius: var(--br-9xs);
    white-space: nowrap;
    width: 120px;
    height: 40px;
    cursor: pointer;
    display: flex;
}
.mini-warning-popup .button span b {
    width: 88px;
    height: 20px;
    display: block;
}
.mini-warning-popup .confirm-ssa-container {
    align-self: stretch;
}
.mini-warning-popup .popup-main {
    /*width: 27%;*/
}
/*#ls-button-submit b, #ls-button-before-submit b {*/
/*    width: 80px;*/
/*    position: relative;*/
/*    font-size: var(--body-regular-size);*/
/*    line-height: 20px;*/
/*    display: inline-block;*/
/*    font-family: var(--font-main);*/
/*    color: var(--theme-white);*/
/*    text-align: center;*/
/*}*/
/* end popup */

/* nav button */
#button-save-draft {
    cursor: pointer;
    border: 1px solid var(--theme-border);
    padding: var(--padding-3xs) var(--padding-base);
    background-color: var(--theme-white);
    flex: 1;
    border-radius: var(--br-9xs);
    color: var(--Secondary-Green);
    width: 120px;
    margin-right: 16px;
}

#ls-button-previous {
    cursor: pointer;
    border: 1px solid var(--theme-border);
    padding: var(--padding-3xs) var(--padding-base);
    background-color: var(--theme-white);
    flex: 1;
    border-radius: var(--br-9xs);
    color: var(--Secondary-Green);
    width: 120px;
    margin-right: 16px;
}

#ls-button-before-submit, #ls-button-submit, .submit-button-ok {
    cursor: pointer;
    border: 0;
    padding: var(--padding-3xs) var(--padding-base);
    background-color: var(--secondary-green);
    flex: 1;
    border-radius: var(--br-9xs);
    width: 120px;
}
#ls-button-previous b {
    width: 34px;
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    display: inline-block;
    font-family: var(--font-main);
    color: var(--secondary-green);
    text-align: center;
}
#ls-button-submit b, #ls-button-before-submit b, .submit-button-ok b{
    width: 80px;
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    display: inline-block;
    font-family: var(--font-main);
    color: var(--theme-white);
    text-align: center;
}
/* end nav button */

/* header */
.navbar-brand {
    margin-right: 0;
}
.pt-2 {
    padding-top: 0 !important;
}
/* end header*/

/* left side menu */
.left-panel {
    margin: 0;
    /*height: 1872px;*/
    width: 272px;
    flex-direction: column;
    padding: var(--padding-5xs) 0 1564px;
    box-sizing: border-box;
    background-color: var(--primary-default);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.left-panel .menu,.left-panel  .left-panel-text,.left-panel  .left-panel-text-active {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}
.left-panel .weighted-graph {
    height: 40px;
    width: 2px;
    position: relative;
    background-color: var(--theme-white);
}
.left-panel .left-panel-text-active {
    background-color: var(--primary-active);
    padding: var(--padding-5xs) var(--padding-5xl) var(--padding-5xs) 22px;
    gap: 0 12px;
}
.left-panel .left-panel-text {
    background-color: var(--primary-default);
    padding: var(--padding-5xs) var(--padding-5xl) var(--padding-5xs) 22px;
    gap: 0 12px;
}
.left-panel .left-menu-icon {
    height: 24px;
    width: 24px;
    position: relative;
    min-height: 24px;
}
.left-panel .parent-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0 0;
    width: 100%;
}
.left-panel .parent-menu-text {
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    font-family: var(--body-regular);
    color: var(--theme-white);
    text-align: left;
}
.left-panel .menu-drop-down {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-7xs) 0 0;
}
.left-panel .angle-icon {
    width: 12px;
    height: 12px;
    position: relative;
}
.left-panel .menu1 {
    justify-content: flex-start;
}
.left-panel .menu1,.left-panel  .text1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}
.left-panel .menu2 {
    flex: 1;
    justify-content: flex-start;
}
.left-panel .menu2,.left-panel  .text2 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.left-panel .menu-child {
    height: 40px;
    width: 2px;
    position: relative;
    background-color: var(--theme-white);
}
.left-panel .menu-item {
    align-self: stretch;
    width: 2px;
    position: relative;
    background-color: var(--theme-white);
}
.left-panel .text2 {
    background-color: var(--primary-active);
    justify-content: flex-end;
    padding: var(--padding-3xs) var(--padding-29xl) var(--padding-3xs) 58px;
}
.left-panel .company2 {
    width: 164px;
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    font-family: var(--body-regular);
    color: var(--theme-white);
    text-align: left;
    display: inline-block;
}
.left-panel .text1 {
    background-color: var(--primary-default);
    justify-content: flex-end;
    padding: var(--padding-3xs) var(--padding-29xl) var(--padding-3xs) 48px;
}
.left-panel .company1 {
    width: 164px;
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    font-family: var(--body-regular);
    color: var(--theme-white);
    text-align: left;
    display: inline-block;
}
/* end left side menu */

/* nav header*/
.navbar .tooltips-text {
    width: 1px;
    opacity: 0.1;
    background: var(--Primary-Default, #01365B);
    height: 28px;
    margin-right: 10px;
}
.navbar .ancestor-node, .on-white, .sibling-nodes {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 2.5px 0 0;
    text-align: left;
    font-size: var(--font-size-xl);
    color: var(--primary-default);
    font-family: Arial;
    margin-right: 10px;
}
.navbar .supplier-connect {
    margin: 0;
    position: relative;
    font-size: inherit;
    font-weight: 400;
    font-family: inherit;
    white-space: nowrap;
}
.navbar .company {
    /*flex: 0.894;*/
    border-radius: 30px;
    background-color: var(--theme-artboard);
    padding: 5px var(--padding-base);
    font-size: var(--body-regular-size);
    color: var(--text-secondary);
    font-family: var(--font-main);
}
.navbar .company, .main, .siblings-and-children {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.navbar .company, .main, .siblings-and-children {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.navbar .siblings-and-children {
    flex: 1;
    gap: 0 8px;
}
.navbar .pantavanij-co-ltd {
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
    white-space: nowrap;
}
.navbar .ancestors-and-descendants {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0 0;
}
.navbar .ancestors-and-descendants1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2px 0 0;
}
.navbar .headquarter {
    position: relative;
    line-height: 20px;
    white-space: nowrap;
}
.navbar .notification-icon {
    height: 24px;
    width: 24px;
    position: relative;
    margin: 5px 24px 0 24px;
}
.navbar .user1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0 12px;
    text-align: right;
}
.navbar .uploaded-icon {
    height: 32px;
    width: 32px;
    object-fit: cover;
    position: relative;
}
.navbar .user-name-show{
    position: relative;
    line-height: 20px;
    white-space: nowrap;
}
.navbar .apps-icon {
    height: 24px;
    width: 24px;
    position: relative;
    margin: 5px 0 2px 24px;
}
/* end nav header*/

/* start code of conduct*/
.modal-code-of-conduct {
    width: 100%;
    position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    letter-spacing: normal;
    text-align: left;
    color: var(--primary-default);
    font-family: var(--font-main);
    background: #838383;
    font-size: 14px;
}
.modal-code-of-conduct .form-control {
    min-width: 50px;
    -webkit-appearance: auto;
    background-color: #f4f5f800;
    border: none;
    padding: 5px 0 5px 0;
}
.modal-code-of-conduct .popup-main {
    padding: 80px var(--padding-xl) 56px;
}
.modal-code-of-conduct .side-child {
    height: 40px;
    width: 2px;
    position: relative;
    background-color: var(--primary-default);
}
.modal-code-of-conduct .active {
    position: relative;
    line-height: 20px;
    display: inline-block;
    min-width: 113px;
}
.modal-code-of-conduct .side,
.modal-code-of-conduct .text-code-conduct {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.modal-code-of-conduct .text-code-conduct {
    flex: 1;
    padding: var(--padding-3xs) var(--padding-base);
}
.modal-code-of-conduct .side {
    align-self: stretch;
    z-index: 6;
}
.modal-code-of-conduct .frame-inner {
    width: 1px;
    height: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-border);
    z-index: 4;
}
.modal-code-of-conduct .en,
.modal-code-of-conduct .globe-icon1 {
    position: relative;
    z-index: 1;
}
.modal-code-of-conduct .globe-icon1 {
    height: 24px;
    width: 24px;
    min-height: 30px;
}
.modal-code-of-conduct .en {
    display: inline-block;
    min-width: 20px;
}
.modal-code-of-conduct .triangle-instance {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 0 5px 0;
    background: #f4f5f8;
    border: none;
}
.modal-code-of-conduct .triangle-icon {
    height: 12px;
    width: 12px;
    position: relative;
}
.modal-code-of-conduct .triangle-wrapper {
    height: 24px;
    border-radius: var(--br-9xs);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px;
    box-sizing: border-box;
    z-index: 1;
}
.modal-code-of-conduct .globe-icon {
    align-self: stretch;
    flex-direction: row;
    gap: 10px;
}
.modal-code-of-conduct .globe-icon,
.modal-code-of-conduct .globe-icon-wrapper,
.modal-code-of-conduct .rectangle-group,
.modal-code-of-conduct .vector-parent {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.modal-code-of-conduct .globe-icon-wrapper {
    flex: 1;
    flex-direction: row;
    padding: 0 5px;
}
.modal-code-of-conduct .rectangle-group,
.modal-code-of-conduct .vector-parent {
    background-color: #f4f5f8;
    flex-direction: column;
}
.modal-code-of-conduct .rectangle-group {
    align-self: stretch;
    flex: 1;
    padding: 0 0 var(--padding-base);
    gap: var(--gap-base);
    z-index: 3;
    color: var(--text-primary);
}
.modal-code-of-conduct .vector-parent {
    height: 586px;
    width: 174px;
    padding: var(--padding-5xl) 0 0;
    box-sizing: border-box;
    position: relative;
    gap: 465px;
    z-index: 2;
}
.modal-code-of-conduct .code-of-conduct,
.modal-code-of-conduct .last-updated {
    position: relative;
    z-index: 6;
}
.modal-code-of-conduct .last-updated {
    font-size: 12px;
    color: #7e8ea4;
}
.modal-code-of-conduct .code-of-conduct-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 var(--padding-5xs);
    gap: var(--gap-5xs);
    font-size: 18px;
    color: var(--text-primary);
}
.modal-code-of-conduct .policy-container {
    align-self: stretch;
    position: relative;
    z-index: 6;
    max-height: 540px;
    overflow-y: scroll;
    margin-right: 5px;
}
.modal-code-of-conduct .frame-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
}
.modal-code-of-conduct .basic-button-a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
    min-width: 324px;
    max-width: 100%;
}
.modal-code-of-conduct .footer-instance {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}
.modal-code-of-conduct .footer-instance {
    align-self: stretch;
    flex-wrap: wrap;
    gap: var(--gap-5xs);
    max-width: 100%;
}
.modal-code-of-conduct .footer-instance-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 0 3px;
    box-sizing: border-box;
    max-width: calc(100% - 197px);
    color: #5f5f5f;
}
.modal-code-of-conduct .first-side {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 23px;
    max-width: 100%;
}
.modal-code-of-conduct .basic-button-b {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 0 var(--br-9xs) var(--br-9xs);
    background-color: var(--theme-white);
    border: 1px solid var(--theme-border);
    box-sizing: border-box;
}
.modal-code-of-conduct .footer-child {
    height: 1px;
    width: 720px;
    position: relative;
    background-color: var(--theme-border);
    display: none;
    max-width: 100%;
    z-index: 1;
}
.modal-code-of-conduct .button {
    position: relative;
    line-height: 20px;
    display: inline-block;
    min-width: 50px;
}
.modal-code-of-conduct .basic {
    border-radius: var(--br-9xs);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-5xs);
    z-index: 1;
    color: var(--secondary-green);
}
.modal-code-of-conduct .button2 {
    flex: 1;
    position: relative;
    line-height: 20px;
}
.modal-code-of-conduct .basic1 {
    border-radius: var(--br-9xs);
    background-color: var(--theme-white);
    border: 1px solid var(--theme-border);
    box-sizing: border-box;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-3xs) 15px;
    min-width: 120px;
}
.modal-code-of-conduct .button3 {
    flex: 1;
    position: relative;
    line-height: 20px;
    display: inline-block;
    min-width: 127px;
}
.modal-code-of-conduct .active-submit {
    background-color: var(--secondary-green) !important;
    color: var(--Theme-White) !important;
}
.modal-code-of-conduct .basic2 {
    flex: 1;
    border-radius: var(--br-9xs);
    background-color: #e7ecf0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-3xs) var(--padding-base);
    box-sizing: border-box;
    min-width: 120px;
    white-space: nowrap;
    color: var(--text-disable);
    cursor: not-allowed;
    pointer-events: none;
}
.modal-code-of-conduct .basic2,
.modal-code-of-conduct .button1,
.modal-code-of-conduct .footer {
    flex-direction: row;
}
.modal-code-of-conduct .button1 {
    width: 159px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
    z-index: 1;
    text-align: center;
}
.modal-code-of-conduct .footer {
    align-self: stretch;
    border-radius: 0 0 var(--br-9xs) var(--br-9xs);
    justify-content: space-between;
    padding: 12px var(--padding-5xl);
    box-sizing: border-box;
    position: relative;
    max-width: 100%;
    gap: var(--gap-xl);
    z-index: 6;
    color: var(--secondary-green);
}
.modal-code-of-conduct ,
.modal-code-of-conduct .footer,
.modal-code-of-conduct .rectangle-parent {
    display: flex;
    align-items: flex-start;
}
.modal-code-of-conduct .rectangle-parent {
    width: 720px;
    border-radius: var(--br-9xs);
    background-color: var(--theme-white);
    box-shadow: var(--modal-and-dropdown-shadow);
    flex-direction: column;
    justify-content: flex-start;
    max-width: 100%;
    z-index: 1;
}

.frame-child1 {
    align-self: stretch;
    position: relative;
}
.frame-child1 {
    height: 1px;
    background-color: var(--theme-border);
}

@media screen and (max-width: 700px) {
    .modal-code-of-conduct .rectangle-parent {
        width: auto;
    }
    .modal-code-of-conduct .vector-parent {
        display: none;
    }
    .modal-code-of-conduct .footer-instance-wrapper {
        max-width: 100%;
        padding: 5px 0 0 5px;
    }
}
@media screen and (max-width: 450px) {
    .modal-code-of-conduct .footer {
        flex-wrap: wrap;
    }
}
/* end code of conduct*/

/* start completed ssa page */
.completed-text {
    justify-content: center;
    gap: 56px;
    text-align: center;
    font-size: 16px;
    color: var(--primary-default);
    font-family: var(--body-regular);
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    max-width: 100%;
    padding-top: 60px;
    padding-bottom: 200px
}

.completed-wrapper {
    width: 100%;
    min-height: 600px;
}
.saved-icon {
    width: 120px;
    height: 80px;
    position: relative;
}
.completed-ssa-content,
.content-completed-ssa .title {
    align-self: stretch;
    position: relative;
    line-height: 24px;
}
.completed-ssa-content {
    font-size: var(--body-regular-size);
    line-height: 20px;
    color: var(--text-primary);
}
.content-completed-ssas,
.content-completed-ssas1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
}
.content-completed-ssas {
    align-items: center;
    gap: 36px;
}
.completed-button .button {
    width: 171px;
    position: relative;
    font-size: var(--body-regular-size);
    line-height: 20px;
    display: inline-block;
    font-family: var(--body-regular);
    color: var(--theme-white);
    text-align: center;
}
.completed-button,
.content-completed-ssa {
    display: flex;
    align-items: center;
}
.completed-button {
    cursor: pointer;
    border: 0;
    padding: var(--padding-3xs) var(--padding-base);
    background-color: var(--secondary-green);
    border-radius: var(--br-9xs);
    flex-direction: row;
    justify-content: center;
    white-space: nowrap;
}
.completed-button:hover {
    background-color: #36a352;
}
.content-completed-ssa {
    /*width: 600px;*/
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    max-width: 100%;
}

@media screen and (max-width: 725px) {
    .content-completed-ssas {
        gap: 18px 36px;
    }
}
/* end completed ssa page */

#survey-nav {
    z-index: 1;
}
#guide-get-long-latitute, #guide-get-long-latitute2 {
    color: var(--text-textlink, #4B98CD);
    font-weight: 400;
    cursor: pointer;
}


.ls-questionhelp, .ls-questionhelp p font {
    font-size: var(--body-regular-size);
    line-height: 20px;
    font-family: var(--font-main);
    color: var(--text-primary);
    text-align: left;
    font-weight: bold;
    margin-bottom: 12px;
}
.ls-questionhelp:before {
    content: "";
}

.ls-answers .answer-item.text-item {
    display: none;
}

.ls-question-message.ls-em-tip.em_default.ls-em-success {
    display: none;
}

.answers-list.radio-list {
    padding-left: 30px;
    width: 100%;
}

#dynamicReloadContainer {
    background: #529ac51c;
}

.index-wrapper {
    width: 20%;
    padding-right: 25px;
}

#navigator-container {
    display: none;
}

#navigator-container-rep {
    padding-right: 2em;
    padding-bottom: 1em;
}

@media screen and (max-width: 1200px) {
    .contents,
    .left-panel {
        padding-top: var(--padding-xl);
        box-sizing: border-box;
    }
    .left-panel {
        padding-bottom: 1017px;
    }
    .contents {
        padding-bottom: var(--padding-xl);
    }
}

@media screen and (max-width: 1050px) {
    .left-panel,
    .siblings-and-children {
        display: none;
    }
    .left-panel {
        padding-bottom: 661px;
        box-sizing: border-box;
    }
    .survey-form-container {
        max-width: 100%;
    }
    div#main-col {
        padding-left: var(--padding-xl);
        padding-right: var(--padding-xl);
        box-sizing: border-box;
    }
}

@media screen and (max-width: 750px) {
  .col-md-3.index-wrapper {
    display: none;
  }
    .print-assessment {
        right: 20px;
        top: 100px;
    }
    /*.left-panel {*/
    /*    display: none !important;*/
    /*}*/
  .space-col {
    margin-left: 0;
  }
    .group-container.space-col {
        max-width: 100%;
    }
    #limesurvey {
        max-width: 100%;
    }

    .left-panel {
        padding-bottom: 430px;
        box-sizing: border-box;
    }
    .index-wrapper {
        display: none;
    }
    .answer-container {
        flex-wrap: wrap;
    }

    .copyright,
    .info {
        flex-wrap: wrap;
    }
    .survey-form-container {
        gap: 28px 0;
    }
    #ls-button-previous, #ls-button-before-submit, #ls-button-submit, .submit-button-ok {
        width: 90px;
        padding: 10px 0 10px 0;
    }
    .answer-container.col-12 {
        padding-left: 12px;
    }
    #modal-help-get-lat-long.popup-main {
        width:100%;
    }
    #modal-ssa-annoucement-approve .button {
        width: 100px !important;
    }
}