:root {
  /*here I am defining my own colours and other variables so I can change them all in one go*/
  --gridspacing: 12px;        /*   var(--gridspacing)  */
  --tableradius: 6.5px;          /*   var(--tableradius)  */
}

/* this first section is primarily about formatting the shipping page */

.infobox
{
    width: 100%;
    display: flex;
    flex-flow: row wrap-reverse;
/*  justify-content: flex-start;*/
    align-items: flex-end;
    row-gap: 0;
    column-gap: 40px;
    margin-bottom: 0;
}

.infobox > div
{
    flex-grow: 1;
}

.paypalship
{
    flex-basis: 55%;
}

.paypalshipbg
{
	max-width: 24.9375rem;
    background: white;
    border-radius: 15px;
    padding: 8px 26px 2px 26px;
    margin: 16px 0 24px 0;
}

.shipstats
{
    flex-basis: 40%;
    margin-top: 16px;
    min-width: 300px;
}




/*this section describes the shipping info table*/
.shiptable
{
    width: 100%;
    max-width: 440px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--tableradius);
    /*overflow: hidden;*/
    border: 2px solid var(--midtone);
}

.headershade
{
  background-color: var(--midtone);
  border-radius: 20px;
}

.shade
{
  background-color: white;
}

.padtop
{
    padding-top: 8px;
    padding-left: 5px;
}

.padbottom
{
    padding-bottom: 8px;
    padding-left: 5px;
}

.shipheader
{
  text-align: left;
  color: white;
  background: none;
    width:50%;
}

.tablesmalltext
{
    color: var(--lighttone);
}

.detailtable
{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--tableradius);
    /*overflow: hidden;*/
    border: 2px solid var(--midtone);
}

.detailheader
{
  text-align: left;
  color: white;
  background: none;
}

.shipfulltable
{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--tableradius);
    border: 2px solid var(--midtone);
}

.shipfullheader
{
  text-align: left;
  color: white;
  background: none;
    width:33.33%;
}

/*this section describes the proceed to next page area*/
.proceedbox
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0;
    column-gap: 20px;
}

.proceedarrowbox
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 0;
    column-gap: 3px;
}

/*this section covers basic shop display (a paypal "button" on a page)*/
.paypalbg
{
    margin: 12px -23px 12px -23px;
    padding: 0.1px 12px 0.1px 12px;

    border-radius: 15px;
    background-color: white;
}

/*this section describes the way to show and hide tabs in the shop*/
#tabbuttonbox
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    column-gap: 12px;
    padding-top: 5px;
}

.tabbutton
{
    flex-basis: 30%;
    flex-grow: 1;
    flex-shrink: 1;

    background: linear-gradient(0deg,rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 100%);
    opacity: 0.6;

    border-radius: 16px 16px 0 0;
    padding: 10px 0 6px 0;

    text-align: center;
    font-weight: bold;
    color: var(--midtone);

    /*animation transition info*/
    transition-property: opacity;
    transition-duration: 0.15s;
    cursor: pointer;
}


.tabbutton:hover{
  /*animation transition target state*/
    opacity: 1;
}

.tabselected
{
    opacity: 1;
    background: white;
    background-color: white;
    cursor: default;
    align-self: stretch;
    margin-top: -5px;
}

#tabsbox
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /*justify-content: center;*/

    /*margin-left: -16px;
    margin-right: -16px;*/
    margin-left: -26px;
    margin-right: -26px;
    /*padding: 0.1px 12px 0.1px 12px;*/

    border-radius: 15px;
    /*border: 2px solid white;*/
    background-color: white;
}

.tab
{
    width: 100%;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: -16px
}

.requestinfo
{
    flex-basis: 55%
}

.shipinfo
{
    flex-basis: 40%;
    min-width: 300px;
}

/* this section covers the overarching shop page */

.shoptitle
{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
}

.shopname
{
    flex-basis: auto;
    flex-grow: 1;
    margin-bottom: 0;
}

.shopprice
{
    margin-top: 6px;
}

.shoplisting
{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.shopimage
{
    border-radius: var(--imageradius);
    width: 40%;
    flex-basis: 40%;
    flex-grow: 1;
}

.shopdescription
{
    flex-basis: 60%;
    width: 60%;
    flex-grow: 1;
}

.shopdescription > p
{
    padding-left: 20px;
}

/* this section is for how things look on the withdrawal form */

.withdrawform
{
    width: 60%;
}



                /* mobile formatting section */
                @media screen and (max-width: 681px){ /*with just making the screen wider and narrower, there will be a horizontal scroll bar appear if it's not about 20px wider cutoff than my header width*/

                .infobox
                {
                    width: 100%;
                    display: flex;
                    flex-flow: column-reverse nowrap;
                    align-items: stretch;
                }

                .shipstats
                {
                    min-width: 0;
                }

                .shipinfo
                {
                    min-width: 0;
                }

                .shiptable
                {
                    font-size: 14px;
                }

                .proceedbox
                 {

                 }

                .tablesmalltext
                {
                    font-size: 10px;
                }

                .paypalbg
                {
                    margin: 22px 0 22px 0;
                    padding: 0.1px 16px 0.1px 16px;
                }
                #tabsbox
                {
                    margin-left: -8px;
                    margin-right: -8px;
                }

                .tabbutton
                {
                  font-size: 3.3vw;
                }

                .shopimage
                {
                    width: 100%;
                    flex-basis: 100%;
                    flex-grow: 1;
                }

                .shopdescription
                {
                    width: 100%;
                    flex-basis: 100%;
                    flex-grow: 1;
                }

                .shopdescription > p
                {
                    padding-left: 0;
                }


                }/* this is the end of the narrow screen version of the pattern cards*/