:root body .icon-container,
.bmo-line-icon {
    max-width: 120px;
    max-height: 94px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

:root body .icon-container img,
:root body .icon-container svg,
:root body .icon-container i,
.bmo-line-icon img,
.bmo-line-icon svg,
.bmo-line-icon i,
[class^="ri-"],
[class*=" ri-"] {
    color: var(--bmo-cerulean);
    stroke: currentColor;
    stroke-width: 1.2px;
    max-width: 120px;
    max-height: 94px;
    object-fit: contain;
}

/* Self-hosted brand typeface (BMO's digital/secure-site font per brand guidelines) */
@font-face {
    font-family: "Heebo";
    src:
        url('../img/bmo/fonts/Heebo-Regular.woff2') format('woff2'),
        url('../img/bmo/fonts/Heebo-Regular.woff') format('woff');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

body{

    font-family: 'Heebo','Segoe UI','Source Sans Pro',sans-serif;

}
:root body .text-primary,
:root body a.text-primary,
:root body .breadcrumb-item.active,
:root body .page-title-box .page-title-right,
:root body .card-title {
    color: var(--bmo-blue) !important;
}

:root body .bg-primary,
:root body .badge-primary,
:root body .progress-bar,
:root body .page-item.active .page-link,
:root body .nav-pills .nav-link.active,
:root body .nav-tabs .nav-link.active,
:root body .list-group-item.active,
:root body .btn-primary,
:root body .btn-primary:hover,
:root body .btn-primary:focus,
:root body .btn-primary:active,
:root body .btn-primary.disabled,
:root body .btn-primary:disabled {
    background-color: var(--app-btn1-bg-clr) !important;
    border-color: var(--app-btn1-bg-clr) !important;
    color: var(--app-btn1-txt-clr) !important;
}

:root body .btn-outline-primary {
    color: var(--app-btn1-bg-clr) !important;
    border-color: var(--app-btn1-bg-clr) !important;
}

:root body .btn-outline-primary:hover,
:root body .btn-outline-primary:focus {
    background-color: var(--app-btn1-bg-clr) !important;
    border-color: var(--app-btn1-bg-clr) !important;
    color: var(--app-btn1-txt-clr) !important;
}

:root body .text-primary-emphasis,
:root body .text-primary {
    color: var(--bmo-blue) !important;
}

:root body .badge-light,
:root body .bg-light {
    color: var(--bmo-muted-gray) !important;
    background-color: var(--bmo-pearl-white) !important;
}




:root {
    --bmo-blue:#0075be;
    --bmo-cerulean:#73c3eb;
    --bmo-navy:#001928;
    --bmo-muted-gray:#646c76;
    --bmo-pearl-white:#f5f6f7;
    --bmo-border-clr:#d9dce1;

    --bs-primary:var(--bmo-blue);
    --bs-secondary:var(--bmo-cerulean);
    --bs-success:#0f9b2c;
    --bs-info:#0075be;
    --bs-warning:#ffc827;
    --bs-danger:#d12121;
    --bs-light:var(--bmo-pearl-white);
    --bs-dark:var(--bmo-navy);

    --app-theme-bg-clr:var(--bmo-pearl-white);
    --app-theme-clr:var(--bmo-blue);
    --app-light-clr:#ffffff;
    --app-dark-clr:var(--bmo-navy);
    --app-warning-clr:#ffc827;
    --app-error-clr:#d12121;
    --app-success-clr:#0f9b2c;
    --aap-info-clr:#0075be;
    --app-nav-header-clr:var(--bmo-blue);
    --app-txt-light-clr:var(--app-light-clr);

    --app-checkbox-bg-clr:var(--bmo-blue);
    --app-menu-active-color:var(--bmo-blue);
    --app-resize-icon-clr:var(--bmo-cerulean);
    --app-btn-primary:var(--bmo-blue);
    --fis-txt-dark-clr:var(--bmo-pearl-white);

    --app-forget-pin-txt-clr:var(--bmo-muted-gray);
    --app-link-singup-txt-clr:var(--bmo-muted-gray);

    --app-border-clr:var(--bmo-border-clr);
    --app-input-txt-color:var(--bmo-navy);
    --app-input-bg-color:#ffffff;
    --app-btn-radius:50px;
    --app-btn-width:0.2rem;

    --app-bg-patch-clr:rgba(0,117,190,0.05);
    --app-txt-patch-clr:var(--bmo-muted-gray);
    --app-theme-txt-clr:var(--app-txt-light-clr);

    --app-btn-disable-bg-clr:#c7ccd1;
    --app-btn-disable-txt-clr:#6f747a;
    --app-btn-disabled:#c7ccd1;
    --app-btn-disabled-hover:#e3e6ea;
    --fis-disable-clr:#d9dce1;

    --app-btn-bg-clr:var(--bmo-pearl-white);
    --app-btn-txt-clr:var(--bmo-blue);
    --app-btn-hover-txt-clr:var(--bmo-blue);
    --app-btn-hover-bg-clr:#e6f2fa;
    --app-btn-active-bg-clr:#c8e3f5;
    --app-btn-active-txt-clr:var(--bmo-blue);

    --app-btn1-bg-clr:var(--bmo-blue);
    --app-btn1-txt-clr:#ffffff;
    --app-btn1-bg-hvr-clr:#005a94;
    --app-btn1-hover-txt-clr:#ffffff;
    --app-btn1-hover-bg-clr:#005a94;
    --app-btn-border-clr:#005a94;
    --app-btn1-active-bg-clr:#00456f;
    --app-btn1-active-txt-clr:#ffffff;
    --app-btn1-border-clr:#005a94;
    --app-btn1-hover-border-clr:var(--bmo-cerulean);

    --app-btn2-bg-clr:var(--bmo-cerulean);
    --app-btn2-txt-clr:#001928;
    --app-btn2-hover-txt-clr:#001928;
    --app-btn2-hover-bg-clr:#5cb3e3;
    --app-btn2-active-bg-clr:#3fa1d9;
    --app-btn2-active-txt-clr:#001928;

    --app-btn3-bg-clr:var(--bmo-pearl-white);
    --app-btn3-txt-clr:var(--bmo-muted-gray);
    --app-btn3-hover-txt-clr:var(--bmo-muted-gray);
    --app-btn3-hover-bg-clr:#e6f2fa;
    --app-btn3-active-bg-clr:#c8e3f5;
    --app-btn3-active-txt-clr:var(--bmo-muted-gray);
    --app-btn3-border-clr:#e6f2fa;
    --app-btn3-hover-border-clr:#c8e3f5;

    --app-btn4-bg-clr:#ffffff;
    --app-btn4-txt-clr:var(--bmo-muted-gray);
    --app-btn4-hover-txt-clr:var(--bmo-blue);
    --app-btn4-hover-bg-clr:#f1f6fb;
    --app-btn4-active-bg-clr:#dcedf8;
    --app-btn4-active-txt-clr:var(--bmo-blue);

    --app-login-bg-clr:rgba(0,117,190,0.05);
    --app-login-txt-clr:var(--bmo-muted-gray);

    --app-menu-txt-clr:#6f747a;
    --app-menu-bg-clr:#e8f1fa;

    --app-header-bg-clr:var(--bmo-blue);
    --app-header-txt-clr:#ffffff;

    --app-sub-header-bg-clr:#e6f2fa;
    --app-sub-header-txt-clr:#4f5459;

    --app-filter-header-bg-clr:#e6f2fa;
    --app-filter-header-txt-clr:#4f5459;

    --app-filter-sub-header-bg-clr:#f5f6f7;
    --app-sub-header-patch-bg-clr:var(--bmo-cerulean);

    --app-tab-btn-bg-clr:#ffffff;
    --app-tab-btn-txt-clr:var(--bmo-cerulean);
    --app-tab-btn-checked-clr:var(--bmo-cerulean);

    --app-sp-discount-bg-clr:#ffc827;
    --app-sp-discount-txt-clr:#3f2f00;
    --app-overdue-txt-clr:#d12121;
    --app-overdue2-txt-clr:#ffc827;
    --app-deferment-txt-clr:#7d8286;
    --app-cashdiscount-txt-clr:#0f9b2c;
    --app-ticker-txt-clr:#ffffff;
    --app-partially-paid-txt-clr:#ffc827;
    --app-confirmedCD-txt-clr:var(--bmo-cerulean);

    --app-title-bg-clr:var(--bmo-blue);
    --app-title-txt-clr:#ffffff;

    --app-approved-bg-clr:#d0e6f5;
    --app-approved-txt-clr:#00344f;
    --app-paid-bg-clr:#bcdcf0;
    --app-paid-txt-clr:#00253a;
    --app-failed-bg-clr:#f6d7d4;
    --app-failed-txt-clr:#7a2e2c;
    --app-rejected-bg-clr:#d6e7ef;
    --app-rejected-txt-clr:#20404b;
    --app-awaiting-mis-bg-clr:#f0ead5;
    --app-awaiting-mis-txt-clr:#53472d;
    --app-mis-not-received-bg-clr:#d0ebf5;
    --app-mis-mis-not-received-txt-clr:#1c3844;
    --app-multipay-batch-bg-clr:#a9d4ee;
    --app-multipay-batch-txt-clr:#00344f;
}

a {
    color: var(--app-checkbox-bg-clr) !important;
}


.form-check-input:checked {
  background-color: var(--app-checkbox-bg-clr);
  border-color: var(--app-checkbox-bg-clr);
}

.form-check-input:focus {
  border-color: var(--app-checkbox-bg-clr);
  outline: 0;
  box-shadow: var(--app-checkbox-bg-clr);
}
.form-check-input[type=checkbox]{
  width: 20px;
  height: 20px;
  padding: 0px !important;
}



#lnkContactUs{
    color: #5ee3f5 !important;
  }

  .loginLogo{
    content: url('../img/bmo/app_logo.png') !important;
    max-width: 137px !important;
    max-height: 70px !important;
  }

  .loginLogo1{
    content: url('../img/bmo/app_logo.png') !important;
    max-width: 137px !important;
    max-height: 70px !important;
 }

  /* Login-page-only logo (blue-red lockup, distinct from the white-red dashboard header logo above) */
  /* Sized to match Seller Portal's login logo box exactly (200x62) */
  .authLoginLogo{
    content: url('../img/bmo/app_logo_blue.svg') !important;
    width: 200px !important;
    height: 62px !important;
  }

  .authLoginLogo1{
    content: url('../img/bmo/app_logo_blue.svg') !important;
    width: 200px !important;
    height: 62px !important;
  }

 /* Hide broken img and use parent span.logo-sm's background-image instead (see condensed-sidebar block) */
 .appSubLogo,
 img.appSubLogo {
    display: none !important;
 }

 .backImage{
    background-image: url('../img/bmo/bg-img.jpg') !important;
    background-position: center !important; /* Center the image */
    background-repeat: no-repeat !important; /* Do not repeat the image */
    background-size: 100% 100% !important; /* Stretch image to fill container both vertically and horizontally */
    justify-content: end !important;
 }

 .auth-fluid-right {
   background-image: url('../img/bmo/bg-img.jpg') !important;
   background-position: center !important;
   background-repeat: no-repeat !important;
   background-size: 100% 100% !important;
 }

 .auth-user-testimonial {
   background-color: rgba(0, 0, 0, 0.4) !important;
   padding: 1.5rem 2rem !important;
   border-radius: 0.75rem !important;
   -webkit-backdrop-filter: blur(2px) !important;
 }

 input{
    display: block;
    max-height: 34px;
      padding: 0.45rem 0.9rem;

      line-height: 1.5;
      color: #6c757d;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;

  }

 .navbar-custom {
    background-color: var(--app-nav-header-clr);
  }
  .logo-box{
    background-color: var(--app-nav-header-clr) !important;
    background: var(--app-nav-header-clr) !important;
    /* Center logo both vertically and horizontally */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  /* Ensure logo container is centered within logo-box and fills exact height */
  .logo-box .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    line-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Condensed sidebar state: show only the icon-only logo, hide the full "BMO" logo */
  /* (.appSubLogo <img> is hidden above; the icon is rendered as this span's own background-image instead) */
  body[data-sidebar-size="condensed"] .logo-sm,
  body[data-sidebar-size=condensed] .logo-sm,
  body[data-sidebar-size="condensed"] .logo-box .logo .logo-sm,
  body[data-sidebar-size=condensed] .logo-box .logo .logo-sm {
    display: inline-block !important;
    width: 45px !important;
    height: 45px !important;
    background-image: url('../img/bmo/app_favicon.png') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    margin: 0 auto;
  }

  body[data-sidebar-size="condensed"] .logo-lg,
  body[data-sidebar-size=condensed] .logo-lg,
  body[data-sidebar-size="condensed"] .logo-box .logo .logo-lg,
  body[data-sidebar-size=condensed] .logo-box .logo .logo-lg {
    display: none !important;
  }

  .navbar-custom .button-menu-mobile{
    width: 40px !important;
  }

  .navbar-custom .button-menu-mobile{
    color: var(--bmo-pearl-white);
  }

  #sidebar-menu .menuitem-active>a {
    color: var(--app-menu-active-color);
    font-weight: bold;

  }

  .navbar-custom .topnav-menu .nav-link{
    color: var(--bmo-pearl-white);
  }

  #sidebar-menu>ul>li>a:hover {
    color: var(--app-txt-light-clr) !important;
    font-weight: bold;
    text-decoration: none;
    background-color: var(--app-btn1-bg-clr);
    border-radius: 4px;
  }




  .page-item.active .page-link {
    z-index: 3;
    color: var(--app-txt-light-clr) !important;
    background-color: var(--app-btn1-bg-clr) !important;
    background: var(--app-btn1-bg-clr) !important;
    border: 2px solid var(--app-btn1-bg-clr) !important;

    text-decoration: none;
  }



 .app-btn{
   color: var(--bmo-pearl-white) !important;
   background-color: var(--app-btn1-hover-bg-clr) !important;
   background: var(--app-btn1-hover-bg-clr) !important;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: var(--app-btn-radius) !important;
    text-decoration: none;
    min-height: 30px;
}

  .app-btn:hover{
    color: var(--app-btn1-hover-bg-clr) !important;
    background-color: var(--bmo-pearl-white) !important;
    background: var(--bmo-pearl-white) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: var(--app-btn-radius);
  }

  .app-btn:active{
    color: var(--fis-txt-dark-clr) !important;
    background-color: var(--app-btn-disabled-hover) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled) !important;
  }

  .app-btn:disabled{
    color: var(--app-btn-disabled) !important;
    background-color: var(--fis-disable-clr) !important;
    border: 2px solid var(--fis-disable-clr) !important;
  }

  .app-btn:focus{
    color: var(--fis-txt-dark-clr);
    background-color: var(--app-btn-disabled-hover);
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled);
  }




 .app-btn2{
    color: var(--app-txt-light-clr) !important;
    background-color: var(--app-btn2-bg-clr) !important;
    background: var(--app-btn2-bg-clr) !important;
    border: 2px solid var(--app-btn2-bg-clr) !important;
    border-radius: 5px !important;
    text-decoration: none;
    min-height: 30px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px;
}

  .app-btn2:hover{
    color: var(--fis-txt-dark-clr) !important;
    background-color: var(--app-btn1-hover-bg-clr) !important;
    background: var(--app-btn1-hover-bg-clr) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: 5px;
  }

  .app-btn2:active{
    color: var(--fis-txt-dark-clr) !important;
    background-color: var(--app-btn-disabled-hover) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled) !important;
  }

  .app-btn2:disabled{
    color: var(--app-btn-disabled) !important;
    background-color: var(--fis-disable-clr) !important;
    border: 2px solid var(--fis-disable-clr) !important;
  }

  .app-btn2:focus{
    color: var(--fis-txt-dark-clr);
    background-color: var(--app-btn-disabled-hover);
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled);
  }



  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--fis-txt-dark-clr)  !important;
    background-color: var(--app-btn-disabled-hover) !important;
  }


  .nav-link.active{
    color: var(--fis-txt-dark-clr) !important;
    background-color: var(--app-btn-disabled-hover) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled) !important;
  }

.headerTab{

  color: var(--bmo-pearl-white) !important;
  background-color: var(--app-btn1-hover-bg-clr) !important;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: 5px !important;
    text-decoration: none;
  }

  .headerTab:hover {
    color: var(--app-btn1-hover-bg-clr) !important;
    background-color: var(--bmo-pearl-white) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn1-hover-bg-clr);
    border-radius: 5px;
  }

  .headerTab:active{
    color: var(--fis-txt-dark-clr);
    background-color: var(--app-btn-disabled-hover);
    text-decoration: none;
    border: 2px solid var(--app-btn-disabled);
  }








.login-box-6{
    max-width: 480px !important;
    height: 100% !important;
    border-radius: 0px !important;
    margin: 0px !important;
}

.loginContainer2{
    height: 100% !important;
}

.container{
    height: 100% !important;
    min-width:0px !important;
    background: white;
}

.login-6[_ngcontent-nqy-c1]{
    justify-content: right !important;
    align-items: start !important;
}

.bgPatchColor{
    background: white !important;
    border-radius: 0px !important;
    height: 100% !important;
    margin: 0px !important;
    padding: 0px !important;
  }

  .loginInputTxt{
    background: rgb(232, 240, 254);
    background-color: rgb(232, 240, 254);
    --background: rgb(232, 240, 254);
    --background-color: rgb(232, 240, 254);
    color: black;
    border: 1px solid #ced4da;
    width: 100%;
    padding: 0.45rem 0.9rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: 0.2rem;
  }
  .loginTxt{
      color: black !important;
  }

  #lnkForgotPin{
    color: black !important;
  }

  #lnkSignUp{
    color: black !important;
    text-decoration: none;
  }

  #lnkSignUp:hover{
    color: black !important;
    text-decoration: underline;
  }

  #lnkContactUs{
    color: black !important;
    text-decoration: none;
  }

  #lnkContactUs:hover{
    color: black !important;
    text-decoration: underline;
  }


  #lnkForgotPin{
    color: black !important;
    text-decoration: none;
  }

  #lnkForgotPin:hover{
    color: black !important;
    text-decoration: underline;
  }




  .defaultBtnApp{
    background: var(--app-btn1-bg-clr);
    --background: var(--app-btn1-bg-clr);
    color: var(--app-btn1-txt-clr);
    --color-hover:var(--app-btn1-txt-clr);
    --background-hover: var(--app-btn1-bg-hvr-clr);
    height: 42px;
    border-radius: 5px;
    border-style: solid;
    cursor: pointer;
    border-color: var(--app-border-clr);
    text-decoration: none;


  }

  .defaultBtnApp>.button-native{
    background: var(--app-btn1-bg-clr);
    color: var(--app-btn1-txt-clr);
    --color-hover:var(--app-btn1-txt-clr);
}


  .defaultBtn:hover {



    border: 1px solid var(--app-btn1-hover-border-clr) !important;

    background-color: var(--app-btn1-hover-bg-clr);
    background: var(--app-btn1-hover-bg-clr);
    --background-hover: var(--app-btn1-hover-bg-clr);
    --background: var(--app-btn1-hover-bg-clr);
    color: var(--app-btn1-hover-txt-clr);

    --color-focused: var(--app-btn1-hover-txt-clr);


  }

  .signupBtns{
    color: var(--app-forget-pin-txt-clr);

  }

  .appToolbarContainer{
    --background: #F8F8F8 !important;
    background: #F8F8F8 !important;
    color:black;
  }

  .appHeaderContainer {
    --background: #F8F8F8 !important;
    background: #F8F8F8 !important;
    color:black;

  }

  .filterHeader{
    --background: #F8F8F8 !important;
    background-color: #F8F8F8;
    color:black;

  }

  .filterHeader>ion-toolbar{
    --background: #F8F8F8 !important;
  }

 .appTabBtn {
    --color-checked: darkgray !important;
    --color: black !important;
    --background-checked: transparent !important;
  }

  .payButton {

    --background: var(--app-btn3-bg-clr);
    color: var(--bmo-pearl-white) !important;
    background-color: var(--app-btn1-hover-bg-clr) !important;
    --color-hover: var(--app-btn3-hover-txt-clr);
  }

  .payButton:hover {


    color: var(--app-btn1-hover-bg-clr) !important;
   background-color: var(--bmo-pearl-white) !important;

    --background-hover: var(--app-btn3-hover-bg-clr);
    --color-hover: var(--app-btn3-hover-txt-clr);
  }


  .alert-button{
    color: var(--bmo-pearl-white) !important;
    background-color: var(--app-btn1-hover-bg-clr) !important;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: 5px;

  }

  .alert-button:hover{
    color: var(--app-btn1-hover-bg-clr) !important;
    background-color: var(--bmo-pearl-white) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: 5px;

  }

  .btn-outline-secondary{
    color: var(--bmo-pearl-white) !important;
    background-color: var(--app-btn1-hover-bg-clr) !important;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    width: 100%;
    border-radius: 0px !important;
    text-decoration: none;
  }

  .btn-outline-secondary:hover{
    color: var(--app-btn1-hover-bg-clr) !important;
    background-color: var(--bmo-pearl-white) !important;
    text-decoration: none;
    border: 2px solid var(--app-btn1-hover-bg-clr) !important;
    border-radius: 5px;
  }


  .btn-primary{
    color: var(--app-txt-light-clr) !important;
      background-color: var(--app-btn3-bg-clr) !important;
      border: 2px solid #e7e6e6 !important;
      width: 100%;
      border-radius: 0px !important;
      text-decoration: none;
  }

  .btn-primary:hover{
    color: var(--fis-txt-dark-clr);
    background-color: var(--app-btn1-hover-bg-clr);
    text-decoration: none;
    border: 2px solid #e7e6e6;
    border-radius: 5px;
  }


  .invsign,
  .invsignFullTXT{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    min-width: 1.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    background-color: var(--app-multipay-batch-bg-clr);
    color: var(--app-multipay-batch-txt-clr);
    text-transform: uppercase;
    margin-left: 0.5rem;
  }

  .txn-status-chip{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: var(--app-approved-bg-clr);
    color: var(--app-approved-txt-clr);
    text-transform: uppercase;
  }



  .mainHeadContainer{
    min-width: 200px;
  }



/* Nokia Lumia 520 */
@media screen and (max-width: 321px) and (min-width: 319px) {

    .apexcharts-yaxis-texts-g{
      transform: translate(5px, 5px);
    }


    .mainHeadContainer{
      min-width: 160px;
  }

    .btn-min-size{
      min-width: 60px;
      font-size: 0.6rem;
    }

    .statementContainer{
      font-size: 0.6rem !important;
    }

    .app-btn{
      font-size: 0.6rem;
    }
  }


  /* Media Query for Mobile Devices */
  @media only screen and (max-width: 480px) {
    .mainHeadContainer{
      min-width: 160px;
  }
  .btn-min-size{
    min-width: 60px;
    font-size: 0.6rem;
  }

  .statementContainer{
    font-size: 0.6rem !important;
  }

  .app-btn{
    font-size: 0.6rem;
  }

  }



  @media (max-width: 576px) {



    .txt-enter-credential{
      font-size: 0.7rem;
    }

    body{
      font-size: 0.7rem !important;
      padding-bottom:0px;
    }

    #iframe{
      width: 100%;
    }

    .filter-container{
      max-height: 400px;
      overflow: auto;
    }

    .modal{
      position: relative !important;
      top: -85% !important;
    }

    .modal-dialog{
      margin-left: 5% !important;
    }

    .lightBgClr{
      background-color: rgb(245 243 243);
    }

    .mobile-btn-group{
      display: flex;
      justify-content: center;
    }
    .page-title-box{
      padding: 0px;
      margin: 0 -27px 1px !important;
    }
    .headerTab{
      color: var(--app-txt-light-clr);
      background-color: var(--app-btn1-hover-bg-clr);
      border: 2px solid var(--app-btn1-hover-bg-clr);
      width: 100%;
      border-radius: 0px !important;
      text-decoration: none;
    }






    .cpgImg{
      width: 50%;
    }

    .left-side-menu{
      z-index: 10000!important;
      padding-top: 0px !important;
    }

    .buyerHeading{
      display: flex !important;
      height: 70px;
      color: white;
      justify-content: center;
      align-items: center;
      background-color: var(--app-btn-primary);
    }
  }


  @media (max-width: 768px) {
    body{
      font-size: 0.7rem !important;
      padding-bottom:0px;
    }

    .form-control{
      font-size: 0.7rem !important;
    }

    #iframe{
      width: 100%;
    }

    .filter-container{
      max-height: 400px;
      overflow: auto;
    }

    .modal{
      position: relative !important;
      top: -85% !important;
    }



    .lightBgClr{
      background-color: rgb(245 243 243);
    }
    .mobile-btn-group{
      display: flex;
      justify-content: center;
    }
    .page-title-box{
      padding: 0px;
      margin: 0 -27px 1px !important;
    }
    .left-side-menu{
      z-index: 10000!important;
      padding-top: 0px !important;
    }

    .buyerHeading{
      display: flex !important;
      height: 70px;
      color: white;
      justify-content: center;
      align-items: center;
      background-color: var(--app-btn-primary);
    }
    .headerTab{
      color: var(--app-txt-light-clr);
      background-color: var(--app-btn1-hover-bg-clr);
      border-right: 1px solid var(--app-btn1-hover-bg-clr);
      width: 100%;
      border-radius: 0px !important;
      text-decoration: none;
    }




    .cpgImg{
      width: 50%;
    }


   }

   @media (max-width: 991.98px) {

    .dropdown-toggle{
      border: 1px solid #ced4da !important;
      height: 32px;
      font-size: 0.7rem;
      padding-left: 10px;

    }
    body{
       font-size: 0.70rem !important;
      padding-bottom:0px;
    }


    #iframe{
      width: 100%;
    }

    .filter-container{
      max-height: 400px;
      overflow: auto;
    }

    .modal{
      position: relative !important;
      top: -95% !important;
    }



    .left-side-menu{
      padding-top: 0px !important;
    }

     .buyerHeading{
      display: flex !important;
      height: 70px;
      color: white;
      justify-content: center;
      align-items: center;
      background-color: var(--app-btn-primary);
    }
    .lightBgClr{
      background-color: rgb(245 243 243);
    }
    .mobile-btn-group{
      display: flex;
      justify-content: center;
    }
    .page-title-box{
      padding: 0px;
      margin: 0 -27px 1px !important;
    }
    .headerTab{
      color: var(--app-txt-light-clr);
      background-color: var(--app-btn1-hover-bg-clr);
      border-right: 1px solid var(--app-btn1-hover-bg-clr);
      width: 100%;
      border-radius: 0px !important;
      text-decoration: none;
    }






    .cpgImg{
      width: 50%;
    }
   }

   @media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 811px;
    }
}