<app-modal-wrapper #modal [config]="{disableClose: true, size: 'large', panelClass: ['overflow-visible', 'material-modal']}">
  <ng-template sbModalContent>
    <div class="sb-mat__modal sb-mat__modal--fullscreen">

          <div [appTelemetryImpression]="telemetryImpression" class="signup-background">
            <div class="fullpage-background-image">
              <div class="container-wrapper mx-auto">
                <div class="d-flex flex-jc-center mb-16">
                  <img class="image centered" alt={{tenantInfo.tenantName}} height="56" src="{{tenantInfo.logo}}">
                </div>
                <div class="title mt-8">{{ resourceService?.frmelmnts?.lbl?.sltstate || 'Select your State'}}</div>
                <div *ngIf="enableSSO.toLowerCase() === 'false'"
                  class="line-height-1-3 font-weight-bold text-center mb-50 mt-60">
                  <p>Login with State System is temporarily unavailable.</p>
                  <p> Please try again later.</p>
                </div>
                <div *ngIf="enableSSO.toLowerCase() === 'true'">
                  <div class="width-300 mx-auto mt-60">
                    <div *ngIf="!isIOSDevice" class="w-100 mb-16">
                      <mat-form-field appearance="fill" class="sb-mat__dropdown mb-16 w-100">
                        <mat-label>{{resourceService.frmelmnts?.lbl?.Select}}</mat-label>
                        <mat-select role="listbox" aria-label="Select State" class="selection"
                          [(ngModel)]="selectedOrg" (selectionChange)="handleOrgChange($event.value)">
                          <mat-option class="mat-dropdown__options" role="option" *ngFor="let state of orgList" [value]="state.loginUrl"
                            attr.aria-label="{{state.name}}">{{state.name}}</mat-option>
                        </mat-select>
                      </mat-form-field>
                    </div>
                    <!-- Dropdown only for iOS device -->
                    <label *ngIf="isIOSDevice" class="w-100">
                      <select name="stateOrg" id="stateOrg"
                        class="sb-form-control mb-50 d-flex mt-60 ui dropdown stateOrg"
                        (change)="handleOrgChange($event)">
                        <option value="" disabled selected>{{ resourceService?.frmelmnts?.lbl?.sltstate || 'Select your
                          State'}}</option>
                        <option *ngFor="let state of orgList" [value]="state.loginUrl">{{state.name}}</option>
                      </select>
                    </label>
                    <!-- Dropdown only for iOS device -->
                    <button appTelemetryInteract [telemetryInteractEdata]="submitOrgInteractEdata"
                      [ngClass]="{'sb-btn-disabled':disableSubmitBtn, 'sb-btn-primary':!disableSubmitBtn}"
                      class="sb-btn sb-btn-normal sb-btn-primary w-100" tabindex="0"
                      (click)="handleOrgSelection($event)">{{ resourceService?.frmelmnts?.btn?.submit ||
                      'Submit'}}</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        
      
    </div>
  </ng-template>
</app-modal-wrapper>

./select-org.component.scss

@use "@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use 'pages/sign_in_up' as *;

.ui.raised.shadow.container.segment {
    margin: calculateRem(20px) auto !important;
    padding: 0;
    padding: calculateRem(10px);
    width: calc(100% - 4%) !important;
    min-height: 90vh;
}

@media only screen and (min-width: 1024px) {
    .ui.raised.shadow.container.segment {
        margin: calculateRem(35px) auto !important;
        width: calculateRem(944px) !important;
        padding: calculateRem(20px);
        box-shadow: 0 calculateRem(2px) calculateRem(16px) 0 rgba(var(--rc-rgba-black), 0.2);
    }
}
@media only screen and (max-width: 767px) {
    .ui.form .fields {
        flex-wrap: nowrap;
    }
}
.ui.form.borderd input[type=text],
.ui.form.borderd input[type=text]:focus,
.ui.form.borderd input[type=email],
.ui.form.borderd input[type=number],
.ui.form.borderd input[type=tel],
.ui.form.borderd input[type=password],
.ui.form.borderd input[type=url],
.ui.form.borderd input:not([type]),
.ui.form.borderd input:not([type]):focus {
    border: calculateRem(1px) solid var(--gray-300);
    padding: 0.8em 0 0.8em 1em;
    border-radius: calculateRem(4px);
}
.fullpage {
    ::ng-deep {
        .ui.fullscreen.modal>.close {
            opacity: 0;
            pointer-events: none;
        }        
    }
}
i.close.icon {
    font-size: 1.5rem;
    position: absolute;
    right: calculateRem(6px);
    top: calculateRem(12px);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ui.form .field>label {
    font-size: 1rem !important;
    font-weight: normal;
}
.width-300 {
    width: calculateRem(300px) !important;
}


.ui[class*="left icon"].input>input {
    padding-left: 3.37142857em !important;
}

.ui.left.icon.input .icon {
    left: calculateRem(11px);
    top: calculateRem(14px);
    font-size: 1rem;
    font-family: inherit;
}
.opacity-1 {
    opacity: 1 !important;
}