/* common classes */

.ml-0 {
  margin-left: 0;
}

.p-0 {
  padding: 0;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.d-flex {
  display: flex;
}

.page-inner-padding{
  padding: 0 50px;
}

.page-inner-padding-right-align{
  padding: 0 0 0 50px;
}

.page-inner-padding-left-align{
  padding: 0 50px 0 0;
}

/* Default (mobile-first) */
.container,
.custom-vs-container {
  width: 320px;
  min-width: 288px
}

@media only screen and (max-width: 1199.98px){
  .page-inner-padding, .page-inner-padding-right-align, .page-inner-padding-left-align{
    padding: 0;
  }

  .qc-piv-header .piv-bottom .title a{
    color: #FFF;
    font-family: "Roboto",sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
  }  

  .btn-type-self-proceed{
    min-width: 80px;
   }
}

@media (min-width: 700px) and (max-width:847.98px){
   .common-feedback-banner-sec{
      padding: 32px 0;
    }
}

@media only screen and (max-width: 699.98px) {
  .container, .custom-vs-container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }  

  .vs-main-title {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 16px;
    padding-left: 0;
    margin-top: 24px;
  }

  .section-breadcamps {
    padding-top: 16px;
  }

  /*breadcrumb style*/
  .breadcrumb .breadcrumb-item {
    display: none;
  }

  .breadcrumb .breadcrumb-item:first-child {
    display: inline-block;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #095797 !important;
  }

  .breadcrumb>li a {
    color: #095797 !important;
  }

  .breadcrumb .breadcrumb-item:first-child::before {
    content: url(/vectormbl.svg/);
    padding: 4px 4px 2px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
  }

  .mob-none,
  .emptyCol {
    display: none;
  }

  .mob-w-100 {
    width: 100% !important;
  }

  .w-100 {
    width: 100%;
  }

  /* Baby blue banner */
  .common-feedback-banner-sec {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex-direction: column;
    margin-top: 64px !important;
    gap: 20px;
  }

  .comm-ban-btn-sec {
    width: 100%;
    flex-direction: row !important;
    padding-left: 0;
    padding-right: 0;
  }

  .comm-ban-btn-sec .comm-ban-btn {
    width: 100%;
    max-width: 100%;
    height: 40px;
  }

  .comm-ban-lft-txt {
    padding-left: 0;
    padding-right: 0;
  }

  .common-feedback-banner-sec .container {
    width: 100%;
    max-width: 352px;
    padding: 0;
  }

  .common-feedback-banner-sec .comm-ban-lft-txt {
    margin-bottom: 20px;
    padding-left: 0;
    width: 100%;
  }

  /* Popup Css */
  .popHead {
    line-height: 32px;
  }

  .w3-modal {
    padding-left: 16px;
    padding-right: 16px;
    z-index: 9999;
    /*to fix black top banner overlapping issue in lower env*/
  }

  .w3-modal-content {
    max-width: 352px;
    min-width: 288px;
    width: 100%;
    margin: 0 auto;
    border: 0;
    align-items: normal;
  }

  .w3-modal-content .btn-modal-primary,
  .w3-modal-content .btn-modal-secondary {
    max-width: 352px;
    min-width: 224px;
    width: 100%;
  } 

  /*breadcrumb style*/
  /*blue alert at the top appears when switches to english*/
  .language-info-banner-cont svg {
    min-width: 24px;
  }

  /*  FAQ Common properties/classes      */

  .section-breadcamps,
  .section-breadcamps+.pl-0 {
    padding-left: 15px !important;
  }

  .vs-sub-head-h2 {
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  /*heading h2 text*/

  .vs-h2-title {
    font-size: 21px !important;
    line-height: 32px !important;
  }

  .vs-cust-Ques-category div {
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding: 0 !important;
    width: 100%;
  }

  .vs-custum-gap {
    margin-bottom: 24px;
  }

  .vs-custum-faq-question {
    width: 100% !important;
  }

  .faq-item {
    width: 100% !important;
  }

  .faq-item div {
    max-width: 100% !important;
  }

  .faq-item a {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .faq-wrapper {
    gap: 16px;
  }

  .sbh2-faqh.vs-h2-title {
    width: 100%;
    margin-top: 40px;
    height: auto;
    margin-bottom: 16px;
  }

  .vs-cust-faq-bottom {
    display: none;
  }

  .vs-main-title {
    margin-top: 24px;
  }

  /*for the self destination*/

  .comm-sec-timeline-item {
    margin-bottom: 10px;
  }

  .comm-sec-timeline-item::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 20px;
    width: 2.5px;
    height: 100%;
    background: #095797;
    z-index: 0;
  }

  .omm-head-and-quit-sec {
    min-width: 100%;
  }

  .vs-custom-selftel {
    margin-right: 0px !important;
    margin-top: 16px;
    margin-left: 0px;
    width: 100%;
  }

  .comm-sec-for-QandTid {
    margin-top: 0px;
    display: flex;
    width: 100%;
    align-items: start;
    padding-left: 70px;
    flex-direction: column-reverse;
    min-width: 288px;
    margin-left: 0px;
    padding-left: 0px;
  }

  .marginlr-selftel col-md-12 {
    padding: 0px;
  }

  .tileheader {
    width: 100% !important;
    min-width: initial;
    font-size: 19px;
    padding: 16px;
    gap: 16px;
    line-height: normal;
  }

  .col-md-12.tile {
    gap: 0px;
    margin-left: 0px;
    padding: 16px;
    width: 100%;
  }

  .comm-self-quit-sec {
    display: none !important;
  }

  .comm-head-and-quit-sec {
    min-width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px !important;
    height: auto;
    gap: 0px;
  }

  .vs-main-txt {
    width: 100%;
  }

  .ans-id-vir-sub-p {
    height: 100%;
    margin-bottom: 18px !important;
  }

  .comm-sec-reference-no-txt {
    max-width: 100% !important;
  }

  .comm-taskid-sec {
    display: block;
    padding-right: 0px;
  }

  .response-ans-dropdown {
    width: 100%;
    padding: 0px;
  }

  .comm-sec-expand-text-icon {
    padding: 0px;
  }

  .comm-sec-timeline-container {
    width: 100%;
    min-width: 100%;
    padding: 10px 0px;
  }

  .response-que-ans {
    margin-left: 0px;
    padding-left: 0px;
    min-width: 100%;
    max-width: 100%;
  }

  .sec-que-ans-timeline {
    width: 100%;
    padding: 0px;
  }

  .tileheader-txt {
    padding: 0px 0px !important;
    margin-top: 26px;
    width: 100% !important;
  }

  .end-buttons-aisv {
    display: none;
  }

  .btn-mob-info {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
  }

  .btn-mob-info button,
  button.mob-btn-no {
    padding: 8px 16px !important;
    height: auto !important;
    min-height: 40px;
    max-height: 64px;
  }

  .btn-type-self-proceed {
    margin-left: 0px !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 112px;
  }

  .mob-btn-no {
    border-radius: 4px;
    background-color: white;
    color: var(--qc-color-blue-regular);
    border-color: var(--qc-color-blue-regular);
    display: flex !important;
    min-width: 280px;
    max-width: 352px;
    min-height: 40px;
    max-height: 40px;
    color: var(--Bouton-Secondaire-Libell, #095797);
    text-align: center;
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    padding: 16px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    width: 100%;
    margin-top: 16px;
  }

  .desk-btn-yes {
    display: none !important;
  }

  .sub-heading-inperson {
    margin-top: 6px !important;
    padding-bottom: 12px;
    font-size: 19px;
  }

  .vs-cus-clock {
    margin-bottom: 30px !important;
  }

  .ai-sens-self-dynamic-txt {
    margin-bottom: 40px !important;
  }

  .vs-cus-selftel-mob {
    width: 100%;
    margin: 0px;
  }

  .vs-cus-subdiv-mob {
    padding-left: 0px;
    padding-right: 0px;
  }

  .vs-custom-btn-last-section {
    padding: 0px;
    width: 100%;
  }

  .comm-sec-timeline-item{
    gap: 16px;
  }

  .comm-sec-timeline-container-txt {
    padding: 0px;
  }

  .tile-txt {
    color: var(--Colors-Text-text-primay, #223654);
    font-family: "Open Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }

  .vs-comm-QandTid {
    max-width: 100%;
    padding-left: 0px !important;
  }

  .vs-comm-respose-que-ans {
    padding-left: 0px !important;
  }

  .tile{
    padding: 16px;
  }

  .btn-sec{
    flex-direction: column-reverse;
    gap: 16px;
  }
}

@media only screen and (max-width: 385px) {
  .container, .custom-vs-container {
    /* padding-left: 16px !important;
    padding-right: 16px !important; */
    max-width: 100%;
  }

  .common-feedback-banner-sec {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media only screen and (max-width: 384px) {
  .comm-taskid-sec {
    padding-right: 0px;
    display: block;
  }

  .btn-mob-info button,
  button.mob-btn-no {
    padding: 8px 16px !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 40px;
    max-height: 64px;
  }

  .container, .custom-vs-container, .qc-container {
    padding-left: 16px;
    padding-right: 16px; 
    width: 100%;
  }
}

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

  .container,
  .custom-vs-container,
  .qc-piv-header,
  .footer,
  .common-feedback-banner-sec {
    min-width: 320px !important;
  }

  .common-feedback-banner-sec .container {
    min-width: auto !important;
  }

  .container, .custom-vs-container, .qc-container {
    padding-left: 16px;
    padding-right: 16px; 
  }
}


/* 384px – 699px */
@media (min-width: 385px) {

  .container,
  .custom-vs-container {
    width: 352px;
  }

  .qc-container {
    width: 352px;
  }
}

/* 700px – 847px */
@media (min-width: 700px) {

  /* .container,
  .custom-vs-container {
    width: 580px;
    padding: 0;
    margin: 0 auto;
  }

  .qc-container {
    width: 580px;
    padding: 0;
    margin: 0 auto;
  } */

      /* container-fluid */

    .container, .custom-vs-container, .qc-container{
      width: 100%;
      margin: 0 auto;
      padding:0 60px;
    }
}

/* 848px – 1199px */
@media (min-width: 848px) {

  .container,
  .custom-vs-container {
    width: 728px;
    padding: 0;
    margin: 0 auto;
  }

  .qc-container {
    width: 728px;
    padding: 0;
    margin: 0 auto;
  }
}

/* ≥1200px */
@media (min-width: 1200px) {

  .container,
  .custom-vs-container {
    width: 1080px;
    padding: 0;
    margin: 0 auto;
  }

  .qc-container {
    width: 1120px;
    max-width: 1120px;
    padding: 0;
    margin: 0 auto;
  }
}