/* -------------------------------------------------
  Large Screen. 
---------------------------------------------------*/

@media (min-width: 1367px) and (max-width: 1920px) {
    .detail-container {
        width: 100%;
    }

    .view-application-status-container {
        width: 1200px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .captcha-container {
        width: 1200px;
    }

    .captcha-container-b {
        width: 785px;
    }

    .paragraph-container {
        width: 780px;
    }

    .panel-container {
        width: 785px;
    }

    .Online-PMES {
        width: 785px;
    }

    /* Leo B. 09/14/2026 - was margin: 0 300px 0 0 and margin-right: 300px, in
       this band and the next one only. A centred block minus 300px on the right
       shifts its text centre 150px to the LEFT, so "Print Document" and its
       subtitle sat well off the PDF icon and Download button beneath them,
       which are genuinely centred. Nothing needed the offset; the four narrower
       bands have said margin:auto all along, which is why the defect only ever
       showed above 1170px. margin:auto rather than deleting the rules, so the
       h2 keeps the zero top and bottom margin it has always had here. */
    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

    hr.new {
        width: 1050px;
    }

    .p-container {
        width: 785px;
    }

    .p-container-other {
        width: 600px;
    }

    .video-container {
        width: 1000px;
    }

    .panel-container2 {
        width: 785px;
    }

    .upload-container {
        width: 785px;
    }

    .address-container {
        flex-direction: row;
    }
}

/* -------------------------------------------------
  Laptop Screen 
---------------------------------------------------*/

@media (min-width: 1170px) and (max-width: 1366.99px) {
    .detail-container {
        width: 1200px
    }

    .captcha-container-b {
        width: 785px;
    }

    .paragraph-container {
        width: 780px;
    }

    .panel-container {
        width: 785px;
    }

    .Online-PMES {
        width: 785px;
    }

    /* Leo B. 09/14/2026 - was margin: 0 300px 0 0 and margin-right: 300px, in
       this band and the next one only. A centred block minus 300px on the right
       shifts its text centre 150px to the LEFT, so "Print Document" and its
       subtitle sat well off the PDF icon and Download button beneath them,
       which are genuinely centred. Nothing needed the offset; the four narrower
       bands have said margin:auto all along, which is why the defect only ever
       showed above 1170px. margin:auto rather than deleting the rules, so the
       h2 keeps the zero top and bottom margin it has always had here. */
    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

    hr.new {
        width: 1050px;
    }

    .p-container {
        width:785px;
    }

    .p-container-other {
        width:600px;
    }

    .video-container {
        width: 1000px;
    }

    .panel-container2 {
        width: 785px;
    }

    .upload-container {
        width:785px;
    }

    .address-container {
        flex-direction: row;
    }
}

/* -------------------------------------------------
  Old Desktop
---------------------------------------------------*/

@media (min-width: 992px) and (max-width: 1169.99px) {
    .detail-container {
        width: 970px
    }

    .captcha-container-b {
        width: 785px;
    }

    .paragraph-container {
        width: 780px;
    }

    .panel-container {
        width: 785px;
    }

    .Online-PMES {
        width: 785px;
    }

    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

    hr.new {
        width: auto;
    }

    .p-container {
        width: auto;
    }

    .p-container-other {
        width: auto;
    }

    .video-container {
        width: 100%;
    }

    .panel-container2 {
        width: 785px;
    }

    .upload-container {
        width:785px;
    }

    .address-container {
        flex-direction: row;
    }
}

/* -------------------------------------------------
  Tablet Screen 
---------------------------------------------------*/

@media (min-width: 768px) and (max-width: 991.99px) {
    .detail-container {
        width: 750px
    }

    .captcha-container-b {
        width: 785px;
    }

    .paragraph-container {
        width: 780px;
    }

    .panel-container {
        width: 785px;
    }

    .Online-PMES {
        width: 785px;
    }

    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

    hr.new {
        width: auto;
    }

    .p-container {
        width: auto;
    }

    .p-container-other {
        width: auto;
    }

    .video-container {
        width: 100%;
    }

    .panel-container2 {
        width: 100%;
    }

    .upload-container {
        width:100%;
    }

    .address-container {
        flex-direction: row;
    }
}

/* -------------------------------------------------
  Small Mobile
---------------------------------------------------*/

@media (max-width: 767.99px) {
    .detail-container {
        /* 300px was narrower than the handsets this band covers, so the panel sat in a
           column with dead space either side. Fluid to the pane, capped where the
           480-767 band caps it. JJE/Claude 08/23/2026. */
        max-width: 450px;
        width: 100%;
    }

    .captcha-container-b {
        /* Was a flat width:450px -- inside the phone band, so it overflowed a 375px
           handset by 75px while being the rule meant to prevent exactly that.
           max-width keeps the intended cap; width:100% lets it shrink below it.
           JJE/Claude 08/23/2026. */
        max-width: 450px;
        width: 100%;
    }



    .paragraph-container {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .panel-container {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .Online-PMES {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

    hr.new {
        width: auto;
    }

    .p-container {
        width: auto;
    }

    .p-container-other {
        width: auto;
    }

    .video-container {
        width: 100%;
    }

    .panel-container2 {
        width: 100%;
    }

    .upload-container {
        width:100%;
    }

    .address-container {
        flex-direction: column;
    }
}

/* -------------------------------------------------
  Large Mobile :480px. 
---------------------------------------------------*/

@media only screen and (min-width: 480px) and (max-width: 767.99px) {
    .detail-container {
        /* See the phone band above. */
        max-width: 450px;
        width: 100%;
    }

    .captcha-container-b {
        /* Was a flat width:450px -- inside the phone band, so it overflowed a 375px
           handset by 75px while being the rule meant to prevent exactly that.
           max-width keeps the intended cap; width:100% lets it shrink below it.
           JJE/Claude 08/23/2026. */
        max-width: 450px;
        width: 100%;
    }



    .paragraph-container {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .panel-container {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .Online-PMES {
        /* See .captcha-container-b above -- same 450px-inside-the-phone-band defect. */
        max-width: 450px;
        width: 100%;
    }

    .h2-other {
        margin: auto;
    }

    .p-other2 {
        margin: auto;
    }

     hr.new {
        width: auto;
    }

    .p-container {
        width: auto;
    }

    .p-container-other {
        width: auto;
    }

    .video-container {
        width: 100%;
    }

    .panel-container2 {
        width: 100%;
    }

    .upload-container {
        width:100%;
    }

    .address-container {
        flex-direction: column;
    }
}

.detail-container {
    position: relative;
    /*width: 1170px;*/
    /*border: 2px solid black;*/
    /*top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    margin: auto;
}

.row-container {
    position: relative;
    /*width: 780px;*/
    /*height: 232px;*/
    /*border: 2px solid black;*/
    /*left: 0;
    right: 0;*/
    margin: auto;
    padding: 10px 20px 0px 20px;
    text-align: center;
}

.captcha-container {
    text-align: center;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.g-captcha {
    display: inline-block;
}

.button-container {
    text-align: center;
}

.button-online-PMES {
    background: #222 none repeat scroll 0 0;
    border: 1px solid #222;
    border-radius: 50px;
    color: #f1f1f1;
    display: inline-block;
    font-size: 13px;
    height: 50px;
    letter-spacing: 2px;
    line-height: 48px;
    padding: 0 45px;
    text-transform: uppercase;
    margin-left: 15px;
    margin-bottom: 20px;
}

.p-other {
    font-size: 15px;
    font-weight: normal;
    line-height: 24px;
    color: #7e7e7e;
    text-align: justify;
    margin-bottom: 5px;
}

.paragraph-container {
    position: relative;
    margin: auto;
    padding: 10px 20px 0px 20px;
    text-align: center;
}

.h2 {
    font-size: 45px;
    font-weight: 700;
    letter-spacing: 1px;
    position: relative;
    text-transform: capitalize;
    margin-top: 0px;
    margin-bottom: 35px;
}

.h2-span {
    color: #F17B02;
    color: var(--coop-accent);
}

.h2::before {
    background: #f17b02 none repeat scroll 0 0;
    background: var(--coop-accent) none repeat scroll 0 0;
    content: "";
    height: 2px;
    width: 70px;
    left: 0;
    right: 0;
    bottom: -22px;
    margin: 0 auto;
    position: absolute;
}

.h2::after {
    background: #f17b02 none repeat scroll 0 0;
    background: var(--coop-accent) none repeat scroll 0 0;
    content: "";
    height: 2px;
    width: 120px;
    left: 0;
    right: 0;
    bottom: -15px;
    margin: 0 auto;
    position: absolute;
}

p {
    font-size: 15px;
    font-weight: normal;
    line-height: 24px;
    color: #7e7e7e;
}

.ol-new {
    margin: auto;
}

.panel-container {
    /*position: relative;*/
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: #bce8f1;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    /*height: 232px;*/
    /*left: 0;
    right: 0;*/
    margin: auto;
    padding: 15px 15px 15px 30px;
}

.panel-container2 {
    border: 4px solid transparent;
    border-radius: 4px;
    border-color: silver;
    background-color: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    margin: auto;
    padding: 15px 15px 15px 30px;
}

.radio-box {
    position: relative;
    margin: auto;
    padding: 20px 20px 0 20px;
}

.Face-PMES {
    text-align: center;
    /*border: 2px solid black;*/
    display: none;
    padding-bottom: 30px;
}

.Online-PMES {
    /*border: 2px solid black;*/
    padding-bottom: 20px;
    text-align: center;
}

hr.new {
    margin: auto;
    border: 2px solid dodgerblue;
}

.h5 {
    font-size: 14px;
    color: dodgerblue;
    margin: 20px 0 20px 0;
}

.OTP-container {
    display: table;
    text-align: center;
    margin: 10px auto;
}

.p-other3 {
    margin-top: 20px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
}

.p-container {
    margin: auto;
}

.p-container-other {
    margin: auto;
}

.video-container {
    display: block; 
    margin: auto;
    height: 480px;
    border-radius: 10px;
}

.upload-container {
    position: relative;
    margin: auto;
    padding: 10px 20px 0px 20px;
    text-align: center;
}
/* -------------------------------------------------
  The numbered steps -- Views\Membership\TempPMES.cshtml

  Leo B. 09/14/2026. Three things were wrong here and they compounded.

  THE NUMERAL SAT AT THE PAGE EDGE. The text <p> had no width, so it grew to
  fill the flex row; .row-container centres its text, so the sentence sat in
  the middle of a full-width box and the numeral was pushed hard against the
  left margin, a screen away from what it numbers. The original author had
  solved this with .p-container-numbering { width: 785px } -- written into all
  SIX breakpoint bands and commented out in every one of them. A max-width on
  the wrapper does the work of all six and stays responsive, which a fixed
  width does not, so the six dead blocks are gone rather than revived.

  THE NUMERAL AND ITS SENTENCE ARE CENTRED ON EACH OTHER, at the cooperative's
  request: however the sentence wraps, the numeral sits level with the middle
  of it. align-items:center is the whole of it. Baseline alignment was tried
  first and rejected the same day -- it reads well on a one-line step and puts
  the numeral 38px above the centre of a three-line one, and three lines is
  what step 1 actually wraps to on a desktop.

  The residual is 2.5px high on a 50px numeral -- the digit's empty ascent
  space -- and it is deliberately NOT nudged out with position:relative. That
  correction scales with font-size, so the 3px that squares the 50px numeral
  overshoots the 34px one in the phone band below: one invisible error traded
  for another, plus a magic number that no longer says why it is 3. The figures
  here are measured off rendered pixels, numeral ink centre against paragraph
  ink centre, not computed from the box model.

  line-height:1 on the numeral is NOT what makes this work, which is worth
  saying because it looks as though it should be. Measured both ways:
  align-items:center gives the same 2.5px at line-height:normal, because it
  centres the MARGIN BOX and half-leading is symmetric above and below. It is
  kept for a different reason -- see below.

  AND IT FOLLOWED NOTHING. The colour was a literal dodgerblue. It is now the
  same --coop-chrome as the step bar above, so the numeral and the bar move
  together when a cooperative's colour changes.

  NO column-gap ANYWHERE HERE. IE11 has no flex gap and this tree still
  declares X-UA-Compatible: IE=edge, so the gutter stays padding-right on the
  numeral and the flex children carry explicit bases.
---------------------------------------------------*/
.p-numbering {
    margin: 0;
    font-size: 50px;
    font-weight: bold;
    color: #3F6A24;
    color: var(--coop-chrome, #3F6A24);
    padding-right: 15px;
    font-style: italic;
    /* Not for alignment -- see the note above. It stops a ~60px line box being
       drawn around a 50px glyph, which makes the row taller for nothing. The
       min-width gives 1, 2 and 3 a common right edge, so the steps line up with
       each other as well as with their sentences. */
    line-height: 1;
    flex: 0 0 auto;
    min-width: 40px;
    text-align: right;
}

.p-container-numbering {
    margin: 0;
    font-size: 20px;
    font-style: italic;
    line-height: 1.4;
    /* Explicit basis -- IE11 mis-sizes a bare `flex: 1`. */
    flex: 1 1 auto;
}

.container-numbering {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* The measure the rest of this flow already uses: .p-container,
       .Online-PMES and .upload-container are all 785px in the two widest
       bands. As a MAX-width it centres the pair on a desktop and simply
       shrinks below that, so no per-band rule is needed. */
    max-width: 785px;
    margin: 0 auto;
    text-align: left;
}

/* A 50px numeral against 20px copy is heavy on a handset, where the pair has
   about 300px to share once .row-container takes its padding. The wrapper needs
   no band of its own -- its max-width already shrinks.

   IT HAS TO SIT HERE, AFTER THE BASE RULE, AND THAT IS A TRAP THIS FILE SETS.
   The six breakpoint bands are at the TOP of this stylesheet and the base rules
   are below them, so a band rule only ever wins when it sets a property the base
   rule does not. Almost everything up there does -- the bands set `width`, the
   base rules set colour and padding -- which is why the arrangement has held.
   font-size is the exception: put this in the phone band at the top and the base
   `font-size: 50px` four hundred lines further down overrides it at equal
   specificity, the media query silently does nothing, and the handset keeps the
   desktop numeral. It was written there first and measured at 50px.
   Leo B. 09/14/2026 */
@media (max-width: 767.99px) {
    .p-numbering {
        font-size: 34px;
        min-width: 28px;
    }
}

.address-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 2px solid;*/
}

/* Was `column-gap: 30px; row-gap: 30px` on the rule above. Flexbox gap did not reach
   Safari until 14.1 desktop / 14.5 on iOS, and this portal's floor is iOS 12, so below
   that both declarations were dropped and the address fields sat flush against each
   other.

   TWO RULES, BECAUSE THIS CONTAINER CHANGES DIRECTION. The bands above set
   `flex-direction: row` from 768px up and `column` below it, which is exactly why the
   original declared BOTH gaps -- one shorthand covered whichever axis was live. A
   margin has to pick an axis, so the phone band restates it vertically.

   BOTH RULES SIT HERE, AFTER the base rule, and that placement is load-bearing: the
   direction bands are 500-odd lines ABOVE this point in the file, and a media query
   adds no specificity. A phone-band override written up there would tie with this base
   rule and lose on source order, silently.

   767.99 rather than the 767.98 used elsewhere in this portal: it has to flip on the
   same edge as the `flex-direction: column` band it is pairing with, and that band is
   767.99. TempStyleSheet.css is on the list to be normalised as a whole; until then,
   matching the rule beside it beats matching the convention.
   Leo B. 09/17/2026 */
.address-container > * + * {
    margin-left: 30px;
}

@media (max-width: 767.99px) {
    .address-container > * + * {
        margin-left: 0;
        margin-top: 30px;
    }
}

.address-div {
    width: 300px;
    height: 170px;
    /*border: 2px solid;*/
}

/* The flow's interior pane.

   .row-container is the shell the short pages use, but it sets text-align:center, and
   the four interactive pages -- Index, PreSeminar, UploadStage, PaymentStage -- keep
   their own Bootstrap grid inside, where centring would fight every .text-left in it.
   This is .row-container's padding without its alignment, so a Bootstrap .row's -15px
   margins have something to sit in rather than poking out of the pane.

   Claude 08/25/2026. */
.flow-container {
    position: relative;
    margin: auto;
    padding: 10px 20px 0px 20px;
}