:root {
    /* value of backgroud image or color */
    --background: url("./assets/img/login-bg.jpg");
    --logo: url("./assets/img/logo.png");
    --font: geomanist, sans-serif;
    /* colors */
    --control-background-color: #fff;
    --control-background-color-10: #e5e5e5;
    --control-background-color-15: #d8d8d8;
    --valid: #55c45f;
    --error: #ff0202;
    --primary: #209ac7;
    --primary--10: #20a8c7;
    --primary-10: #1c8ab3;
    --primary-20: #3eb4e0;
    --primary-dark: #148cb8;
    --accent: #eb0255;
    --accent-10: #d3014c;
    --input-border: #d6d6d6;
    --input-border--10: #dadada;
    --input-label: #919191;
    --input-label-15: #7b7b7b;
    --input-label-20: #747474;
    --input-label-40: #565656;
    --input-label-margin: 5px 0 2px 0px;
    --input-height: 41px;
    --disabled: rgba(0, 0, 0, 0.12);
    --disabled-background-fill: #919191;
    --disabled-text-color: rgba(0, 0, 0, 0.6);
    --button-basic: #777;
    --button-basic-10: #6b6b6b;
    --button-basic--10: #848484;
    --warn: #f44336;
    --warn-10: #f22819;
    --warn--10: #f5554a;
    --table-rows-background: #efefef;
    --table-rows-background-10: #d7d7d7;
    --modal-container-color: #fff;
    --modal-container-width: 1100px !important;
    --modal-container-large-width: 1100px !important;
    --modal-shadow: unset;
    --not-checked: #666;
    --font: geomanist, sans-serif;
    --background-color: #f1f1f1;
    --spinner-color: #209ac7;
    --button-border-radius: 4px;
    --customer-actions-right-button-padding: 0px 0px 0px 4px;
    --customer-actions-left-button-padding: 0px 4px 0px 0px;
    --customer-modal-left-side: 300px;
    --background-image-display: block;
    --header-background-color: transparent;
    --header-position: absolute;
    --header-color: #fff;
    --stepper-display: none;
    --slider-color: #209ac7;
    --slider-color-10: #209ac7;
  }
  .slider-product-template {
    display: none;
  }
  @font-face {
    font-family: "geomanist";
    src: url("./assets/fonts/geomanist-regular-webfont.eot");
    src: url("./assets/fonts/geomanist-regular-webfont.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/geomanist-regular-webfont.woff") format("woff"),
      url("./assets/fonts/geomanist-regular-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "geomanist";
    src: url("./assets/fonts/geomanist-light-webfont.eot");
    src: url("./assets/fonts/geomanist-light-webfont.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/geomanist-light-webfont.woff") format("woff"),
      url("./assets/fonts/geomanist-light-webfont.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: "geomanist";
    src: url("./assets/fonts/geomanist-medium-webfont.eot");
    src: url("./assets/fonts/geomanist-medium-webfont.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/geomanist-medium-webfont.woff") format("woff"),
      url("./assets/fonts/geomanist-medium-webfont.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: "geomanist";
    src: url("./assets/fonts/geomanist-bold-webfont.eot");
    src: url("./assets/fonts/geomanist-bold-webfont.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/geomanist-bold-webfont.woff") format("woff"),
      url("./assets/fonts/geomanist-bold-webfont.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: "geomanist";
    src: url("./assets/fonts/geomanist-book-webfont.eot");
    src: url("./assets/fonts/geomanist-book-webfont.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/geomanist-book-webfont.woff") format("woff"),
      url("./assets/fonts/geomanist-book-webfont.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
  }
  

/* Global body background */
/* body {
  background-color: rgba(245, 245, 245, 1);
  margin: 0;
  padding: 0;
} */

.app-content-container {
  padding: 12px;
  width: 90%;
  margin: 30px auto 0;
  position: relative;
  top: 5px;
  left: 32px;
  max-width: var(--modal-container-width);
}

.app-content-body {
  margin-left: 6px; 
  margin-right: 9px;
}

@media (max-width: 800px) {
  .app-content-container {
    padding: 16px;
    margin: 0 auto;
    width: 90%;
    left: 0;
    top: 0;
    max-width: 100%;
  }

  .app-content-body {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 1023px) {
  .app-content-container {
    left: 0;
    top: 0;
  }
}

.app-title {
  font-weight: 500;
  margin-bottom: 40px;
  color: var(--text-primary, #333);
}

.app-subtitle {
  margin-top: 43px;
  margin-bottom: 23px;
}

.section-title {
  display: block;
  font-size: 1.17em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  unicode-bidi: isolate;
  text-align: center;
}

.section-subtitle {
  font-weight: 500;
  color: var(--text-primary, #333);
}

.app-form-container {
  margin-top: 32px;
}

.app-form-row {
  margin-bottom: 20px;
}

.app-subtitle-container {
  margin-bottom: 24px;
}

.app-ownership-section {
  margin-top: 24px;
}

.app-section-question {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--text-primary, #333);
}

.app-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: 8px;
}

.gf-subtitle {
  margin-bottom: 0 !important;
}

.gf-subtitle, [ng-reflect-text] {
  text-align: left !important;
}

asee-subtitle .subtitle-container {
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid var(--primary, #2196f3);
  background-color: var(--background-light, #f5f5f5);
}

asee-subtitle .subtitle-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary, #333);
  margin: 0;
  text-align: left !important;
}

asee-checkbox .checkbox {
  display: flex;
  align-items: center;
  height: auto;
  margin-bottom: 4px;
}

asee-checkbox .checkbox .mdc-form-field {
  width: 100%;
}

asee-checkbox .checkbox label {
  margin-left: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.app-form-container .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-invalid .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline .mat-mdc-form-field-outline-thick {
  color: var(--error-color, #f44336);
}

.app-form-container .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-form-field-invalid).ng-touched.ng-valid .mat-mdc-text-field-wrapper .mat-mdc-form-field-outline .mat-mdc-form-field-outline-thick {
  color: var(--success-color, #4caf50);
}

.app-form-container .mat-mdc-form-field-required-marker {
  color: var(--error-color, #f44336);
}

.mat-mdc-form-field {
  display: block;
}

.mat-mdc-form-field-subscript-wrapper {
  margin-top: 8px;
}

.mat-mdc-form-field-hint-wrapper .mat-mdc-form-field-hint {
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
}

.mat-mdc-form-field-error-wrapper .mat-mdc-form-field-error {
  font-size: 0.875rem;
  color: var(--error-color, #f44336);
}