/* -- override landing page styles -- */
.banner {
    background-image: url(/images/mysgi-epayment-banner.jpg);
    background-position-x: left;
}

.body-wrapper { padding: 0; }

/* -- App styles  -- */
.app-header {
    margin-bottom: 40px;
}

.vectors-wrapper {
    z-index: -1;
    position: relative;
}

.progress-bar-wrapper {
    position:relative;
    width:100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    margin-bottom: 40px;
}

.step-indicator {
    text-align: right;
    width: 100%;
    margin-top: 12px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: #E9EAEA; /* --sgi-color-gray-100 */
    flex-shrink: 0;
}

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

   .app-header {
    margin-bottom: 16px;
   }

  .progress-bar-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .step-indicator {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 0;
  }
}

.pb-progress-33, .pb-progress-66, .pb-progress-100 {
    height: 8px;
    background-color: #38A169; /* --sgi-color-green-500 */ 
    flex-shrink: 0;
}

.pb-progress-100 {
	width: 100%;
}
.pb-progress-66 {
    width: 66%;
}
.pb-progress-33 {
    width: 33%;
}

.af-full-width { 
	max-width: 100%;
	padding: 80px 40px;
}

.lf-full-width {
    display: block;
    width: 90%;
    margin: auto;
    max-width: 1920px;
}

.alert-box {
    padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
	border: 1px solid #DA3A3A;
    background-color: white;
}

.info-box {
	padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
	border: 1px solid #3182CE;
    background-color: white;
}

.error-box {
	padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    background-color: #FFF5F5;
    border-left: 4px solid #DA3A3A;	
}

.warning-box {
	padding: 12px 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 8px;
    background-color: #FFFAF0;
    border-left: 4px solid #DD6B20;
	width: calc(100% - 80px);
	margin: 40px 40px 4px 40px; 
}

.info-title, .error-title, .alert-title {
    font-weight: 700;
    font-style: normal;
    line-height: 24px;
    font-size: 16px;
}

.info-title {
    color: #2B6CB0;    /* --sgi-color--Blue-600 */
}

.error-title, .alert-title {
    color: #C53030;    /* --sgi-color-Red-600 */
}

.alert-message, .info-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.alert-icon {
    width: 20px;
    height: auto;
    padding-top:3px;
}

.button-group-left {
    text-align: left;
}

.button-group-right {
    text-align: right;
}
.button-group-left button {
    margin-right: 1rem;
}

.button-group-right button {
    margin-left: 1rem;
}

button.primary-btn, a.primary-btn {
    background-color: #007480;
    color: #FFF;
}

button.secondary-btn, a.secondary-btn {
  background-color: transparent;
  color: #007480;
  border: 1px solid #007480;
  
}

button.primary-btn, a.primary-btn, button.secondary-btn, a.secondary-btn {
    display: inline-flex;
	flex-grow: 1;
    width: auto;
    height: 48px;
    padding: 10px 24px;
    margin-top: 0;
    text-align: center;
    align-items: center;
	justify-content: center;
	text-decoration: none;
    border-radius: 8px;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    cursor: pointer;
    gap: 8px;
}

@media only screen and (max-width: 767px) {
    button.primary-btn, a.primary-btn, button.secondary-btn, a.secondary-btn {
        display: flex;
        width: 100%;
        justify-content: center;
        font-size: 14px;
        line-height: 24px;
        height: 44px;
    }
}

 button.primary-btn:hover, a.primary-btn:hover {
    background-color: #005d66;
}

 button.primary-btn:active, a.primary-btn:active {
    background-color: #00464d;
}

button.secondary-btn:hover, a.secondary-btn:hover {
  color: #005D66;
  border-color: #005D66;
  background-color: #E6F1F2;
}

button.secondary-btn:active, a.secondary-btn:active { 
  color: #00464D;
  border-color: #00464D;
  background-color: #99C7CC;
}

.bg-gray {
	background: #F4F4F5;
}
	
.bg-teal {
	background: #F2F8F9;
}

/* -- FORM styles -- */
a:focus, button:focus {
	outline: 3px solid #99C7CC;
}

a:focus:not(:focus-visible), button:focus:not(:focus-visible) {
  outline: none;
}

.form-info-txt {
    color: #74767A;
    font-size: 14px;
}

.form-container, form {
	/* background: white; ** so we can see the personal vectors in the background */
    display: flex;
	flex-direction: column;
	gap: 24px;
}

.form-section {
   	border-radius: 8px;
	border: 1px solid #D3D4D6;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
	background-color: white;
}

/* --- use H5 instead
.form-header {
	font-family: "Open Sans", sans-serif;
	font-size: 18px;
    line-height: 28px;
	font-weight: bold;
	color: #3A3B3D;
}
-- */

.form-infotext {
	border-radius: 8px;
	border: 1px solid #D3D4D6;
	padding: 24px;
	background-color: #F4F4F5;
}

.form-infotext ul {
	font-size: 14px;
	padding: 0 0 0 30px;
}

@media only screen and (max-width: 767px) {
    .form-container, form { gap: 24px; }
}

.form-container label,
form label {
	font-weight: bold;
}

.form-container label.required::after,
form label.required::after {
	content: "*";
	color: #007480;
	padding: 0 3px;
	font-weight: normal;
}

.form-group {
  	display: grid;
  	grid-template-rows: auto; 
  	gap: 16px; 
}
.form-field {
    max-width: 656px;
}

.fg-1-col {
    grid-template-columns: repeat(1, 1fr); 
}

.fg-2-col {
    grid-template-columns: repeat(2, 1fr); 
}

.fg-3-col {
    grid-template-columns: repeat(3, 1fr); 
}

.fg-4-col {
    grid-template-columns: repeat(4, 1fr); 
}

@media only screen and (max-width: 1135px) {
    .fg-3-col {
        grid-template-columns: repeat(2, 1fr); 
    }

    .fg-4-col {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media only screen and (max-width: 767px) {
    .fg-2-col {
        grid-template-columns: repeat(1, 1fr); 
    }

    .fg-3-col {
        grid-template-columns: repeat(1, 1fr); 
    }

    .fg-4-col {
        grid-template-columns: repeat(1, 1fr); 
    }
}

.form-col {
    flex: none;
}

@media only screen and (max-width: 767px) {
    .form-col {
        display: flex;
        flex-direction: column;
    }
}

.form-group > .form-field:nth-child(5),
.form-group > .form-field:nth-child(6) {
  grid-column: 1 / -1; 
}

.form-group > .form-field:nth-child(6) {
	display: flex;
	flex-direction: column;
}

.radio-group {
    width:fit-content;
    position: relative;
    overflow-wrap: break-word;
    border-width: 0;
    border-style: solid;
    box-sizing: border-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-direction: row;
    gap: 0;
}

.radio-group .radio-btn:first-of-type label {
    border-top-left-radius: 8px; /* --sgi-radii-lg */
    border-bottom-left-radius: 8px;
}

.radio-group .radio-btn:last-of-type label {
    border-top-right-radius: 8px; /* --sgi-radii-lg */
    border-bottom-right-radius: 8px;
}

.radio-group .radio-btn:not(div:last-of-type) label {
    margin-inline-end: -1px;   
}

.radio-group label {
    border-radius: 0;
}

.toggleDiv {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;  /* --sgi-transition-property-common */
    transition-duration: 200ms;              /* --sgi-transition-duration-normal */
}

.radio-btn-label {
    font-size: 16px; /* --sgi-font-size-md */
    line-height: 24px;
    min-height: 2.5rem;  /* --sgi-sizes-10 */
    min-width: 2.5rem;
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    width: fit-content;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;  /* --sgi-transition-property-common */
    transition-duration: 200ms;              /* --sgi-transition-duration-normal */
    border: 1px solid #99C7CC;               /* --sgi-colors-teal-200 */
    font-family: 'Open Sans', sans-serif;    /* --sgi-fonts-body */
    font-weight: 700;                        /* --sgi-font-weight-bold */
    padding-inline-start: 1rem;              /* --sgi-space-4 */
    padding-inline-end: 1rem;
    color: #007480;                          /* --sgi-colors-teal-500 */
    background-color: white;
}

.radio-btn-label:hover {
    color: #005D66;               /* --sgi-colors-teal-600 */
    background-color: #E6F1F2;    /* --sgi-colors-teal-50 */
    border-color: #66ACB3;        /* --sgi-colors-teal-300 */
}

.radio-btn-label:active, 
.radio-btn-label[aria-checked="true"],
.radio-btn-label[data-checked] {
    color: #00464D;                /* --sgi-colors-teal-700 */
    background-color: #99C7CC;     /* --sgi-colors-teal-200 */
    border-color: #339099;         /* --sgi-colors-teal-400 */
}
    
.radio-btn-label:focus-visible,
.radio-btn-label:focus-within {
    z-index: 1;
    box-shadow: 0 0 0 3px #99C7CC;    /* --sgi-shadows-outline */
}


@media only screen and (max-width: 767px) {
    .radio-btn {
        max-height: 32px;
    }
    
    label.radio-btn-label {
        max-height: 2rem;  /* --sgi-sizes-8 */
        min-height: 32px;
        min-width: 2rem;
        font-size: 14px; /* --sgi-font-size-sm */
        padding-top: 0;
    }
}

label.radio-btn-label span.radio-btn-hidden {
    display: inline-flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
}

label.radio-btn-label span.radio-btn-text {
    user-select: none;
    margin-inline-start: 0.5rem;
    margin: 0px;
}

input[type="radio"] {
    border: 0px;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0px;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

input[type="email"],
input[type="tel"],
input[type="text"], textarea {
  width: 100%;
  border: 1px solid #D3D4D6;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 8px;
  height: 40px;
  padding: 8px 16px 8px 16px;
  box-sizing: border-box;
  outline: transparent 2px;
  outline-offset: 2px;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  color: #3A3B3D;
}

input[type="email"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus, textarea:focus {
	border-width: 2px;
	border-color: #007480;
	box-shadow: 0 0 0 3px #99C7CC;
}

input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #d3d4d6; /* --sgi-colors-gray-200 */
    background-color: white;
}

input:read-only {
    user-select: all;
    box-shadow: none !important;
    border-color: transparent;
    background-color: #f4f4f5; /* --sgi-colors-gray-50 */
}

textarea {
	resize: vertical;
	min-height: 80px;
}

.amount-row {
    padding: 16px;
    border-radius: 8px;
    background: #F2F8F9;        /* --sgi-colors-teal-25 */
}

.balance-owing {
    /* font-family: "Merriweather"; */
    font-size: 36px;
    line-height: 48px;
}

.note-box {
    background-color: #F4F4F5;     /* --sgi-colors-gray-50 */
    border-radius: 8px;
    padding: 24px;
}

.note-title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.app-title {
    margin-bottom: 8px;
}


@media only screen and (max-width: 660px) {
    .lf-full-width { width: 100%; display: flex;}
    .adaptive-frame { width: 93%; padding: 40px 16px}
    .login-form div { min-width: 0; }
}

@media only screen and (max-width: 470px) {
    .lf-full-width { width: 100%; }
    .adaptive-frame { width: 93%; }
}

@media only screen and (max-width: 767px) {
    .login-form div { min-width: 0; }

    input[type="email"],
    input[type="tel"],
    input[type="text"], textarea {
        font-size: 14px;
    }
    
}

@media only screen and (max-width: 1135px) {
    .login-form div { min-width: 0; }
	img[alt="blinkers"] { display: none; }
}

@keyframes skeleton-animation {
    0% {
      border-color: #A7A9AD;
      background:  #A7A9AD;
    }
    100% {
      border-color: #E9EAEA;
      background: #E9EAEA;
    }
}