/*Contain borders etc within the element*************************************/
html
{
    font-size: calc(1em);
    margin:0;
    padding:0;
}

*
{
    box-sizing: border-box;
}

body {
    font-family: 'SourceSansSemiBold', Arial, sans-serif;
    margin:0;
    padding:0;
    background-color:#f4f4f4;
    /*background-color:black;*/
    /*color:white;*/
}

a
{
    text-decoration: none;
}

input[type=submit]
{
    font-size:1em;
    font-family: 'SourceSansSemiBold', Arial, sans-serif;
}

form
{
    margin:0;
}


/*Load Site Font*************************************************************/
@font-face
{
    font-family: 'SourceSansPro';
    src: url('fonts/sourcesanspro-regular-webfont.eot');
    src: url('fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
    url('fonts/sourcesanspro-regular-webfont.woff') format('woff'),
    url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
    url('fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'SourceSansSemiBold';
    src: url('fonts/sourcesanspro-semibold-webfont.eot');
    src: url('fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
    url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'),
    url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'),
    url('fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*General Styling Items******************************************************/
/*Buttons********************************************************************/
.greenButton, .greenButton + label
{
    background-color: rgb(179,221,117);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border: none;
}

.yellowButton, .yellowButton + label
{
    background-color: rgb(255,238,127);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border: none;
}

.redButton, .redButton + label
{
    background-color: rgb(209,98,102);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    color:white;
    font-weight: bold;
    border: none;
}

.greyButton, .greyButton + label
{
    background-color: rgb(223,227,236);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border: none;
    color:black;
}

.greyButton:focus, .greyButton:focus + label,
.greyButton:hover, .greyButton + label:hover {
    background-color: rgb(211,211,211);
}

.greenButton:focus, .greenButton:focus + label,
.greenButton:hover, .greenButton + label:hover {
    background-color: rgb(147,206,58);
}

.yellowButton:focus, .yellowButton:focus + label,
.yellowButton:hover, .yellowButton + label:hover
{
    background-color: rgb(255,222,0);
}

.redButton:focus, .redButton:focus + label,
.redButton:hover, .redButton + label:hover
{
    background-color: rgb(189,32,37);
    color:white;
}

.greenButton:focus, .yellowButton:focus, .greyButton:focus, .greyButton:focus + label, .redButton:focus, .otherButton:focus, .greenButton:focus + label, .yellowButton:focus + label, .redButton:focus + label, .otherButton:focus + label
{
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.greenButton, .yellowButton, .redButton, .otherButton, .greyButton, .greenButton + label, .yellowButton + label, .redButton + label, .greyButton + label, .otherButton + label
{
    cursor: pointer;
}

select
{
    cursor: context-menu;
}

.newArrows::-webkit-inner-spin-button,
.newArrows::-webkit-outer-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

.newArrows
{
    -moz-appearance: textfield;
}

.backgroundImageData
{
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
}

/*Fields************************************************************************/
.textBox, .numberBox
{
    border: none;
    border-bottom: 2px black solid;
    background-color: rgb(223,227,236);
    color:black;
    padding:5px;
}

.textBox:hover, .textBox:focus, .numberBox:hover, .numberBox:focus
{
    background-color: rgb(211,211,211);
}

.textBox:disabled
{
    background-color: lightgrey;
    opacity: 0.3;
}

.numberBox
{
    text-align:right;
}

.textArea
{
    border: 1px black solid;
    background-color: rgb(223,227,236);
    color:black;
}

.textArea:hover, .textArea:focus
{
    background-color: rgb(211,211,211);
}

.span2columns
{
    grid-column:span 2;
}

.span3
{
    grid-column:span 3;
}

.span4
{
    grid-column:span 4;
}

.twoRows
{
    grid-row: span 2;
}

.boldItem
{
    font-size:1.5em;
}

.rightAlign
{
    text-align:right;
}

/*Containers***************************************************************************************************/

.padding10
{
    padding:10px;
}

.padding5
{
    padding:5px;
}

/*Mobile Specific***********************************************************************************************/
@media screen and (max-width: 639px)
{
    #headerContainer
    {
        grid-template-rows: auto;
        padding:0 10px 10px 10px;
        grid-template-columns: 100%;
        grid-template-areas:
                "title"
                "welcome"
                "search"
    }

    #primaryNavList
    {
        display:none;
    }

    #title
    {
        display:grid;
        justify-content: center;
    }

    #title img
    {
        margin:0 auto;
        width:300px;
    }

    #welcome
    {
        grid-template-columns: auto 30px;
    }

    #mainSearchBox
    {
        grid-template-columns: auto 100px;
        margin:0;
    }

    #mainSearchText
    {
        width:calc(100vw - 126px);
    }

    #displayTopNotifications
    {
        width:100vw;
        margin-left:-10px;
        margin-top:30px;
    }

    #headerLogin
    {
        grid-template-columns: max-content 100px auto;
        margin:5px 0 8px 0;
    }

    .loginTextField
    {
        grid-column: 2 / span 2;
    }

    .listAnItemFormErrors
    {
        grid-column:span 3;
    }

    #requiredNotifier
    {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:"tick1 tick2 tick3"
        "label1 label2 label3";
    }

    .specificationItem, .shippingItem
    {
        grid-template-columns: minmax(100px, auto) 130px 40px 40px;
    }

    #listAnItemUploadPhotos
    {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
                "title maxPhotosTitle maxUploadTitle"
                "title maxPhotosValue maxUploadValue"
                "browse browse upload";
    }

    /*camera from here*/

    #addAProductCamera
    {
        display:none;
        position:fixed;
        background-color:black;
        height:100vh;
        width:100vw;
        z-index:1500;
    }

    #JSCameraView
    {
        position:fixed;
        bottom:100px;
        height:calc(100vh - 100px);
    }

    #hideCameraOutput
    {
        height:0.1px;
        width:0.1px;
        overflow: hidden;
    }

    #JSCameraView, #camera--sensor, #camera--output{
        max-width:100%;
        max-height:100%;
    }

    #JSCameraStart{
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
        grid-row: span 2;
        display:grid;
        align-content: center;
        justify-content: center;
    }

    #JSCameraControls
    {
        position:fixed;
        display:grid;
        bottom:0;
        height:100px;
        width:100%;
        grid-template-columns:1fr 1fr 1fr;
    }

    #productMovement
    {
        grid-template-columns:1fr 100px 20px 100px 1fr;
    }

    #userLocation
    {
        font-size:1em;
        padding:5px;
    }

    .categoryDisplay
    {
        font-size:1.1em;
    }

    #listAnItemStepOne
    {
        display: grid;
        grid-gap:5px;
        padding:10px 30px 10px 30px;
    }

    #JSPhotoItems
    {
        display:grid;
        grid-template-columns:1fr 1fr 1fr 1fr;
        column-gap:10px;
    }

    #JSCameraPreview
    {
        background-color:pink;
    }

    #JSCameraTrigger
    {
        background-color:orange;
    }

    #JSCameraClose
    {
        background-color:green;
    }

    #mobileTaskBar
    {
        display:inline-flex;
        position:fixed;
        height:30px;
        bottom:0;
        width:100%;
        grid-template-columns:repeat(auto-fill,1fr);
    }

    .mobileTaskBar
    {
        width:20%;
        height:30px;
        display:grid;
        justify-content: center;
        align-content: center;
        background-color:white;
    }

    #nameBox, .basicsBox
    {
        grid-template-columns: auto 20px 20px;
    }

    .mobField3
    {
        grid-column: span 3;
    }

    #productSecondaryImagesContainer
    {
        height:100px;
    }

    /*Product Actions****************************************/
    #productActionsForms, #productActionsFormsBasic
    {
        display:none;
    }

    #productActionsOfferTitleFloat
    {
        grid-row-gap:5px;
        grid-template-columns: 80px minmax(40px,80px) 25px minmax(40px,80px);
        padding:5px;
    }

    #productActionsBuyNowSectionFloat, #productActionsOfferSectionFloat
    {
        display:grid;
        grid-template-columns: auto 70px;
        margin: 0 5px 0 5px;
        grid-gap:5px;
        background-color:white;
        margin-top:5px;
    }

    #productActionsFormsFloat
    {
        width:100vw;
    }

    #productSellerBox
    {
        grid-gap:5px;
        padding:5px;
    }

    #productSummaryGlanceBasic
    {
        grid-template-columns: 1fr 1fr;
    }

    #footer
    {
        margin-bottom: 10px;
    }

    #productOfferBoxBasic, #productDiscussionBoxBasic
    {
        min-height:100px;
        max-height:400px;
        height:100%;
    }

    #productSummaryContainer
    {
        grid-template-areas:
                "right"
                "left";
    }

    #productSummaryLeft
    {
        grid-area: left;
    }

    #productImagesRight
    {
        grid-area: right;
    }

    #productSecondaryImagesContainer .productSecondaryImages
    {
        min-width:100px;
    }

    #productSecondaryImagesContainer
    {
        display:inline-flex;
    }

    #imageBox
    {
        height: 95vh;
        width: 95vw;
    }
}
/*Tablet CSS********************************************************/
@media screen and (min-width: 640px) and (max-width: 1199px)
{

}

/*Desktop CSS********************************************************/
@media screen and (min-width: 1200px)
{
    #headerLogin
    {
        grid-template-columns: repeat(7,max-content);
        margin:5px 10px 3px 0;
    }

    #headerContainer
    {
        grid-template-columns: 300px auto max-content;
        grid-template-rows: auto;
        grid-template-areas:
                "title search search"
                "title nav welcome";
        min-width:1200px;
        max-width: 1500px;
    }

    #primaryNavList
    {
        grid-area: nav;
        font-size:1.3em;
        padding: 0;
        margin: 0;
        display:inline-flex;
        grid-template-columns: repeat(auto-fill,min-content);
        color:white;
    }

    #welcome
    {
        justify-self:right;
        grid-template-columns: auto 30px;
        margin-right:10px;
    }

    #mainSearchBox
    {
        margin:10px 10px 0 0;
        grid-template-columns: auto 150px;
    }

    #displayTopNotifications
    {
        width:700px;
        margin-left:-290px;
        margin-top:30px;
        padding:10px;
    }

    #mobileTaskBar, #secondaryNavList
    {
        display:none;
    }

    #listAnItemStepThree
    {
        grid-template-columns: 2fr 1fr 1fr;
    }

    #listAnItemBasicsBox
    {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #nameBox
    {
        grid-column: span 3;
        grid-template-columns: 110px 20px 20px auto;
    }

    .basicsField
    {
        grid-column: span 4;
    }

    .basicsBox .listAnItemFormErrors
    {
        grid-column: span 4;
    }

    #requiredNotifier
    {
        grid-template-columns: auto 150px 150px 150px auto;
        grid-template-areas:". tick1 tick2 tick3 ."
        ". label1 label2 label3 .";
    }

    #photoBox
    {
        grid-column:span 3;
    }

    #listAnItemStepTwo
    {
        grid-template-columns: 1.5fr 1fr;
        padding:10px
    }

    #listAnItemSaveNewBox
    {
        grid-column-start: 3;
    }

    .specificationItem, .shippingItem
    {
        grid-template-columns: auto 130px 60px 60px;
    }

    #userLocation
    {
        width:100%;
        max-width:1500px;
        margin-left:20px;
    }

    #listAnItemUploadPhotos
    {
        justify-self:center;
        grid-template-columns:minmax(max-content,150px) minmax(max-content,150px) minmax(max-content,150px) minmax(max-content,150px) minmax(max-content,100px);
        grid-template-areas:
                "title maxPhotosTitle maxUploadTitle browse upload"
                "title maxPhotosValue maxUploadValue browse upload";
    }

    #productMovement
    {
        grid-template-columns:1fr 150px 20px 150px 1fr;
    }

    .selectDropDown
    {
        max-width:300px;
    }

    .deskField4
    {
        grid-column: span 4;
    }

    .gridField
    {
        max-width:700px;
    }

    #userLocation
    {
        font-weight:bold;
        font-size:1.5em;
    }

    .categorySelect select
    {
        grid-column: span 2;
        height:200px;
    }

    #listAnItemStepOne, #basicCategoryContainer
    {
        display: grid;
        column-gap:30px;
        padding:10px 30px 10px 30px;
        grid-template-columns:1fr 1fr 1fr;
    }

    .categoryDisplay
    {
        padding:5px;
        font-size:1.5em;
    }

    #JSPhotoItems
    {
        grid-template-columns:1fr 1fr 1fr;
    }

    #addAProductCamera, #hideCameraOutput,  #JSCameraView, #JSCameraStart
    {
        display:none;
    }

    #selectCategorySubmit
    {
        grid-column:3;
        justify-self:right;
    }

    .basicsBox
    {
        grid-template-columns: 110px 20px 20px auto;
    }

    #productActionsForms, #productActionsFormsBasic
    {
        display:grid;
        grid-template-columns:1fr 2fr;
        margin-left:10px;
        margin-right:10px;
    }

    #productActionsFormsFloat
    {
        width: 575px;
        border-radius:10px 10px 0 0;
        left:calc(50% - 287.5px);
    }

    #productSummaryGlanceBasic
    {
        height:75px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    #productActionsContainer
    {
        padding-right:7px;
        grid-template-columns:1fr 1fr 100px;
    }

    #productActionsOfferTitleFloat
    {
        grid-template-columns: 100px 200px 25px 80px;
        font-size:1.2em;
        padding:10px;
        grid-row-gap:10px;
    }

    #productActionOfferValuesPriceFloat, #productActionOfferValuesQuantityFloat
    {
        font-size:1.3em;
    }

    #productActionsBuyNowSectionFloat, #productActionsOfferSectionFloat
    {
        display:grid;
        grid-template-columns: auto 100px;
        grid-gap:10px;
        background-color:white;
        margin-top:5px;
    }

    #hidePriceWindow
    {
        border-radius: 10px 10px 0 0;
    }

    #productSellerBox
    {
        grid-template-columns:auto 350px max-content 100px;
        grid-gap:10px;
        padding:10px;
    }

    #productDetailsBasic
    {
        grid-template-columns: 1fr 1fr;
    }

    #productDiscussionBoxBasic
    {
        margin-right:10px;
    }

    #productOfferBoxBasic
    {
        margin-left:10px;
    }

    #productOfferBoxBasic, #productDiscussionBoxBasic, #productOfferBox, #productDiscussionBox
    {
        height:450px;
    }

    #productAdminBox
    {
        grid-template-columns:auto max-content;
    }

    #productAdminRight
    {
        justify-content: right;
    }

    #productSummaryContainer
    {
        grid-template-columns:1fr 2fr;
    }

    #productImagesRight
    {
        grid-template-columns:auto max-content;
    }

    #productDescriptionTop
    {
        min-height:700px;
        font-size:1.2em;
        grid-template-columns:0.8fr 1.2fr;
        grid-template-rows: auto min-content;
    }

    #productDescription
    {
        grid-column: span 2;
    }

    #productMain
    {
        grid-template-columns:2fr 1fr;
    }

    #productImages, #productImagesBasic
    {
        grid-template-columns:auto 25%;
        padding-right:10px;
    }

    #productImagesBasic
    {
        margin-left:10px;
    }

    #productSecondaryImagesContainer
    {
        display:grid;
        grid-template-columns:repeat(2, minmax(100px, 1fr));
    }

    #makeOfferConfirmation
    {
        grid-template-columns:1fr 1fr 1fr;
    }

    #confirmationButtons
    {
        grid-column: span 3;
        justify-content: center;
    }

    #imageBox
    {
        height: 80vh;
        width: 80vw;
    }

    #productActionsPriceFloat
    {
        border-radius: 10px 10px 0 0;
        box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    }

    #innerContainer
    {
        margin:10px auto 0;
        box-shadow:0 0 5px 0;
    }

    .bigWidth
    {
        max-width:2200px;
        width:98%;
    }

}
/*Header***************************************************/

#header
{
    width: 100%;
    background-color: rgba(43,67,130, 0.8);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
            "headerContainer";
}

#headerContainer
{
    grid-area: headerContainer;
    display: grid;
    justify-self:center;
    width: 100%;
}

#title
{
    grid-area: title;
}

#mainSearchBox
{
    grid-area: search;
    display:grid;
    border: 3px solid white;
    box-shadow: 0 5px 10px 0 rgba(255,255,255,0.2);
    background-color:white;
    border-radius:10px;
}

#mainSearchText
{
    font-size:1.7em;
    padding:10px;
    border-radius:10px 0 0 10px;
}

#mainSearchSubmit
{
    font-size:1.7em;
    border-radius:0 10px 10px 0;
}

#primaryNavList a
{
    margin-left:10px;
    color:white;
}

#primaryNavList a:hover
{
    color:rgba(147,206,58, 1);
}

.navListItem
{
    margin-top:5px;
}

#welcome
{
    grid-area: welcome;
    font-size:1.3em;
    color:white;
    display:grid;
    grid-gap:10px;
}

#welcomeGreeting
{
    margin-top:5px;
}

#headerLogin
{
    grid-area: welcome;
    font-size:1.3em;
    color:white;
    display:grid;
    grid-gap:10px;
}

.loginWhiteBackground
{
    background-color:white;
    margin:4px 0 3px 0;

}

.loginHeader
{
    margin-top:5px;
}

.loginField
{
    height:30px;
    font-size:1em;
    width:100px;
}

.loginTextField
{
    height:30px;
    font-size:1em;
}

#headerLoginForgot
{
    display:grid;
    justify-content: center;
    align-content: center;

}

#headerLoginRegister
{
    display:grid;
    justify-content: center;
    align-content: center;
}

/*Notification Box***************************************/
#notificationButtonCanvasNumber
{
    border-radius:5px 5px 0 0;
    margin-top:2px;
}

#displayTopNotifications
{
    position:absolute;
    background-color:white;
    display: none;
    grid-gap:10px;
    z-index:50;
}

#closeNotifications
{
    display:grid;
    align-content: center;
    justify-content: center;
    margin-top:10px;
    margin-left:10px;
    margin-right:10px;
}

#notificationBoxTitle
{
    align-self:center;
    justify-self:center;
    height:min-content;
    width:min-content;
    color:rgba(43,67,130, 1);
    font-size:1.5em;
}

#notificationBoxItems
{
    display: grid;
    grid-gap:10px;
}

.notificationBoxItemUnread
{
    background-color:rgba(43,67,130, 0.1);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.notificationBoxItemUnread, .notificationBoxItem
{
    display:grid;
    grid-template-rows: auto;
    grid-template-columns: auto 200px;
    padding:5px;
}

.notificationBoxItemUnread:hover, .notificationBoxItemUnread:focus
{
    background-color:rgba(43,67,130, 0.3);
}

.notificationBoxItemUnread .topNotificationItem
{
    font-style:italic;
}

.notificationBoxItem:hover, .notificationBoxItem:focus
{
    background-color:rgba(43,67,130, 0.1);
}

.topNotificationItem
{
    font-size:0.8em;
}

.bottomNotificationItem
{
    font-size:0.8em;
    display: grid;
}

.notificationUser
{
    justify-self:right;
}

.notificationTime
{
    justify-self:right;
}

#notificationBoxControls
{
    display:grid;
    grid-template-columns: 170px 170px;
    justify-content: center;
    grid-gap:10px;
}


#notificationBoxControls input, #notificationBoxControls a
{
    text-align:center;
    font-size:0.8em;
}

/*Main Container*******************************************/

#container
{
    width:100%;
}

#innerContainer
{
    min-height:70vh;
    background-color:white;
    /*background-color:black;*/
    /*color:white;*/
    display: grid;
    grid-template-columns:100%;
    grid-gap:10px;
    align-content: start;
}

.smallWidth
{
    max-width:1000px;
    width:98%;
}

/*Home*****************************************************/
#homeLatestItems
{
    display: grid;
    grid-template-rows: auto;
    grid-template-areas:
            "titleLatest"
            "latestProducts";

}

#homeSavedItems
{
    display: grid;
    grid-template-rows: auto;
    grid-template-areas:
            "titleSaved"
            "watchlistProducts";
}


/*Home Header*****************************************************/
#homeLatestHeader
{
    grid-area: titleLatest;
    width:100%;
    align-self:center;
    text-align:center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
    background-color:rgba(43,67,130, 0.8);

}

#homeSavedHeader
{
    grid-area: titleSaved;
    width:100%;
    align-self:center;
    text-align:center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
    background-color:rgba(43,67,130, 0.8);
}

/*Categories*********************************************************/

#categoryViewFormHeader
{
    grid-area:header;
    background-color:rgba(43,67,130, 0.8);
    font-size:1.5em;
    color:white;
    text-align:center;
}

#categoryContainer
{
    display:grid;
    grid-template-areas: "header" "categories" "products";
    grid-template-rows: min-content min-content auto;
}

#mainCategoryCategories
{
    grid-area:categories;
    display: grid;
    grid-template-columns: repeat(auto-fill,250px);
    grid-gap:10px;
    padding:10px;
}

#mainCategoryCategories > .topCategories
{
    box-shadow:inset 0 0 2px 0;
    padding:10px;
    height:150px;
}

.topCategory > a
{
    font-size:1.5em;
}

.subCategories
{
    display:grid;
    padding-left:10px;
}

#productResults
{
    grid-area:products;
    display: grid;
    grid-template-columns: 250px auto;
    grid-template-areas: "filters listings";
    grid-gap:10px;
    padding:10px;
}

#productFilters
{
    grid-area: filters;
    display: grid;
    min-height:100px;
}

#productListings
{
    grid-area: listings;
    display: grid;
    grid-template-rows: min-content auto min-content;
    grid-template-areas:
            "topButtons"
            "products"
            "bottomButtons";
    grid-gap:10px;
}

#pagesTop
{
    grid-area:topButtons;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
    display: grid;
    grid-template-columns: minmax(max-content,1fr) minmax(max-content,1fr) minmax(max-content,1fr) auto;
    grid-gap:10px;
}

#pagesSortItems, #pagesLimitItems
{
    justify-self:center;
}

#pagesLimitItems
{
    display:grid;
    grid-gap:5px;
    grid-template-columns: repeat(7, max-content);
    align-content:center;
}

.selectedPage
{
    color:rgba(189,32,37,1);
}

.unselectedPage
{
    text-decoration:underline;
}

.unselectedPage:hover
{
    color:rgba(189,32,37,1);
}

#pagesPageNumbers
{
    align-content:center;
    display:grid;
    grid-gap:5px;
    grid-template-columns: repeat(12, max-content);
}

#pagesFilterDefault
{
    align-self:center;
}

#pagesFilterDefault > .greenButton
{
    height:25px;
    width:100px;
}

#pagesFilterDefault select
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    height:25px;
    font-size: 1em;
    border: none;
    width:210px;
}

#pagesLimitDefault > .greenButton
{
    height:25px;
    width:100px;
}

#categoryProducts
{
    grid-area: products;
    display: grid;
    width:100%;
    min-height:280px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-gap:10px;
}

#categoryProducts > .productGridContainer
{
    width:100%;
    height:249px;
    background-color:lightgrey;
    border-radius:10px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    background-size: cover;
    background-position:center top;
}

#pagesBottom
{
    grid-area: bottomButtons;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas:
            ". pageNumbers";
}

#pagesPageNumbersBottom
{
    grid-area: pageNumbers;
    display:grid;
    grid-gap:5px;
    grid-template-columns: repeat(12, max-content);
}

/*List an Item Section Zero Content*****************************************************/
#homeLatestProducts
{
    grid-area: latestProducts;
    display: inline-flex;
    height:280px;
    overflow-x:auto;
    grid-template-columns: repeat(auto-fill,203px);
    margin:10px;
}

#homeLatestProducts > .productGridContainer
{
    height:249px;
    background-color:lightgrey;
    border-radius:10px;
    margin-right:10px;
    background-size: cover;
    background-position:center top;
    border: 3px white solid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#homeSavedProducts
{
    grid-area: watchlistProducts;
    display: inline-flex;
    height:280px;
    overflow-x:auto;
    grid-template-columns: repeat(auto-fill,203px);
    margin:10px;
}

#homeSavedProducts > .productGridContainer
{
    height:249px;
    background-color:lightgrey;
    border-radius:10px;
    border: 3px white solid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    margin-right:10px;
    background-size: cover;
    background-position:center top;
}

.productGridText, .productGridTextUp
{
    width:100%;
    background-color:rgba(43,67,130, 0.95);
    overflow:hidden;
    border-radius:0 0 10px 10px;
    color:white;
    display: grid;
    grid-template-rows: 25px;
    grid-template-areas:
            "name name"
            "description description"
            "quantity price";
    grid-template-columns: 100px 100px;
    padding:5px;
}
.productGridText
{
    margin-top:193px;
    height:50px;
}

.productGridTextUp
{
    margin-top:93px;
    height:150px;
}

.productGridName
{
    grid-area: name;
    grid-row: span 2;
    height:50px;
}
.productGridDescription
{
    font-style: italic;
    grid-area: description;
    grid-row: span 3;
    height:75px;
}

.productGridQuantity
{
    grid-area: quantity;
    grid-row: 6;
}

.productGridPrice
{
    grid-area: price;
    grid-row: 6;
}

/*List an Item*****************************************************/
#listAnItemContainer
{
    max-width:1500px;
    width:100%;
    min-height:200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:
        "stepZeroHeader"
        "stepZeroContent"
        "stepThreeHeader"
        "stepThreeContent"
        "stepOneHeader"
        "stepOneContent"
        "stepTwoHeader"
        "stepTwoContent"
        "stepFourContent";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    background-color:white;
    box-shadow: 0 0 5px 0;
}

#listingType
{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:10px;
    padding:10px;
}

/*List an Item Section Zero Header*****************************************************/

#listAnItemZeroHeader
{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 300px auto 300px;
    background-color:rgba(43,67,130, 0.8);
    padding:5px;
}

#stepZeroArrowCanvas
{
}

#listAnItemHeaderZero
{
    justify-self: center;
    align-self: center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
}

/*List an Item Section Zero Content*****************************************************/
#unfinishedProducts
{
    display: inline-flex;
    width:calc(100% - 20px);
    height:280px;
    overflow-x:auto;
    overflow-y:hidden;
    grid-template-columns: repeat(auto-fill,203px);
    margin-left:10px;
}

.unfinishedProductItem
{
    height:249px;
    border-radius:10px;
    border: 3px white solid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    margin-right:10px;
}

.unfinishedProductData
{
    opacity: 0.5;
    border-radius:10px;
    background-color: rgba(43,67,130, 0.15);
    position:relative;
    top:-40px;
    z-index:5;
}

.unfinishedProductImage
{
    background-size: cover;
    background-position:center top;
    height:199px;
}

.unfinishedProductData:hover, .unfinishedProductData:focus, .deleteUnfinishedButton:hover, .deleteUnfinishedButton:focus
{
    opacity:1;
}

.unfinishedProductText
{
    width:203px;
    height:52px;
    background-color:rgba(43,67,130, 0.95);
    position:relative;
    top:191px;
    overflow:hidden;
    border-radius:0 0 10px 10px;
    color:white;
    padding:5px;
}

.unfinishedProductSelected
{
    opacity:1;
}

/*List an Item Section One Header*****************************************************/

#listAnItemOneHeader
{
    display: grid;
    width:100%;
    grid-template-rows: auto;
    grid-template-columns: 20px auto 20px;
    background-color:rgba(43,67,130, 0.8);
    padding:5px;
}

#stepOneArrowCanvas
{
    align-self: center;
}

#listAnItemHeaderOne
{
    justify-self: center;
    align-self: center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
}

#stepOneTick
{
    justify-self: center;
    align-self: center;
}

/*List an Item Section One Content*****************************************************/

#listAnItemStepOne
{
    display: grid;
}

.categorySelect
{
    display: grid;
    grid-template-columns: auto 50px;
}

select
{
    width:100%;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    font-size:1em;
    border: none;
}

.categoryDisplay
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    justify-content: center;
    align-content: center;
}

.categorySelect a
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    color:white;
    display:grid;
    justify-content: center;
    align-content: center;
}

#selectCategorySubmit
{
    width:150px;
    height:42px;
    margin-top:10px;
    justify-self: right;
}

#selectCategorySubmit:disabled
{
    background-color:rgba(223,227,236, 0.2);
    cursor:default;
}

/*List an Item Section Two Header*****************************************************/

#listAnItemTwoHeader
{
    display: grid;
    grid-template-columns: 60px auto 20px 20px 20px;
    background-color:rgba(43,67,130, 0.8);
    padding:5px;
}

#stepTwoArrowCanvas
{
    align-self: center;
}

#listAnItemHeaderTwo
{
    justify-self: center;
    align-self: center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
}

#stepTwoTickGreen
{
    justify-self: center;
    align-self: center;
}

#stepTwoTickYellow
{
    justify-self: center;
    align-self: center;
}

#stepTwoTickRed
{
    justify-self: center;
    align-self: center;
}

/*List an Item Section Two Content*****************************************************/

#offerRadio, #shippingOptionCheckBox, #shippingExtrasCheckBox, #activateCheckBox
{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(100px, max-content));
    grid-gap:10px;

}

/*List an Item Import Item*************************************************************/
#listAnItemStepTwo
{
    display: grid;
    grid-gap:10px;
    grid-column-gap: 10px;
    width:100%;
}

/*List an Item Details Section*********************************************************/

#listAnItemLeft
{
    display: grid;
    grid-template-columns: auto;
    grid-gap:10px;
    align-content: start;
    overflow:hidden;
}

#detailsSection
{
    display: grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-template-columns: auto;
    grid-gap:5px;
}

#basicProductListingContainer
{
    display: grid;
}

#basicCategoryContainer
{
    display:grid;
    max-width: 1200px;
    justify-self:center;
}

#basicDetailsSection
{
    display: grid;
    grid-template-columns: auto;
    grid-gap:5px;
    max-width:1000px;
    padding:30px;
    justify-self:center;
}

#basicShippingCostBox
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    margin-bottom: 10px;
    padding:5px;
}

.detailsSectionHeader, #basicsBoxHeader
{
    display:grid;
    align-content:center;
    font-size:1.5em;
    font-weight: bold;
    justify-content: center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#requiredNotifier
{
    display:grid;
    align-content: start;
}

#requiredCanvasTick, #requiredCanvasYellow, #requiredCanvasCross, #completeLabel, #recommendedLabel, #requiredLabel
{
    display:grid;
    justify-self:center;
}

#requiredCanvasTick
{
    grid-area:tick1;
}

#requiredCanvasYellow
{
    grid-area:tick2;
}

#requiredCanvasCross
{
    grid-area:tick3;
}

#completeLabel
{
    grid-area:label1;
}

#recommendedLabel
{
    grid-area:label2;
}

#requiredLabel
{
    grid-area:label3;
}

#listAnItemFields
{
    display: grid;
    grid-template-rows: auto;
}

#listAnItemFields .listAnItemField, #shippingOptionsBox .listAnItemField, #listAnItemSubmitSection .listAnItemField
{
    display: grid;
    grid-template-columns: 160px 20px 20px minmax(80px,auto);
    padding:5px;
    column-gap:10px;
    row-gap:3px;
}

#shippingLocationsBox .listAnItemField, #listAnItemSpecificationSection .listAnItemField
{
    display: grid;
    grid-template-columns: auto;
    padding:5px;
    column-gap:10px;
    row-gap:3px;
}

.listAnItemFieldTick
{
    margin-top:2px;
}

.gridField
{
    grid-column:span 4;
}

.selectDropDown
{
    background-color:rgb(223,227,236);
}

.selectDropDown:hover, .selectDropDown:focus
{
    background-color:rgb(211,211,211);
}

.toolTipBox:hover .tooltip
{
    display:block;
}

.toolTipBox:hover
{
    cursor: help;
}

.tooltip {
    display: none;
    color: black;
    margin-left: -405px; /* moves the tooltip to the left */
    margin-top: -19px; /* moves it down */
    width:400px;
    position: absolute;
    z-index: 1000;
    background-color:rgba(251,204,72, 1);
    padding:5px;
    box-shadow:0 5px 10px 0 rgba(0,0,0,0.2);
}

.tooltipRight .tooltip
{
    margin-left: 25px; /* moves the tooltip to the right */
}

.listAnItemFormErrors, .rightSideError, .formPaymentErrors
{
    color:rgba(189,32,37,1);
    font-style: italic;
    font-size:0.9em;
    margin-left:5px;
    margin-right:5px;
}

.quantityButtons
{
    display:grid;
    grid-template-columns: auto 30px 30px;
    grid-gap:5px;
}

.numberButtons
{
    display:grid;
    justify-content: center;
    align-content: center;
}

.emptyField
{
    font-style: italic;
    color:grey;
}

.descriptionArea
{
    height:200px;
}

#shippingSection
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:10px;
}

#shippingOptionsBox, #shippingLocationsBox, #paymentOptionBox
{
    display: grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-template-columns: auto;
    grid-gap:10px;
    align-content:start;
}

#shippingCosts, #specifications
{
    display: grid;
    grid-gap:10px;
}

.shippingItem, .specificationItem
{
    display:grid;
    grid-gap:5px;
}

#addShippingRow, #addSpecificationRow
{
    display:grid;
    justify-content: center;
    align-content: center;
}

.shippingRegion, .specificationCategory
{
    display:grid;
}

.specificationItem .quantityButtons, .shippingItem .quantityButtons
{
    grid-template-columns: 60px 30px 30px;
}

#paymentOptionBox
{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:5px;
    height:min-content;
    padding-bottom:5px;
}

#paymentPickUp, #paymentShipping
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-gap:5px;
    align-content: start;
}

#paymentShipping
{
    margin-right:5px;
}

#paymentPickUp
{
    margin-left:5px;
}

.notAvailable
{
    display:grid;
    justify-content: center;
    align-content: center;
    height:200px;
}

.paymentBoxHeader
{
    grid-column:span 2;
}

.paymentButtons
{
    display:grid;
    padding:5px;
    grid-gap:10px;
    align-content:center;
}

#listAnItemRight
{
    display: grid;
    align-content:start;
    grid-gap:10px;
}

#listAnItemSpecificationSection, #listAnItemSubmitSection
{
    display: grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-gap:5px;
}

#listAnItemSubmitSection
{
    padding-bottom: 5px;
}

#finaliseButtons
{
    display:grid;
    grid-gap:10px;
    grid-template-columns: 2fr 1fr 1fr;
    margin-left:5px;
    margin-right:5px;
    height:50px;
}


/*List an Item Section Three Header*****************************************************/

#listAnItemThreeHeader
{
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 20px auto 20px;
    background-color:rgba(43,67,130, 0.8);
    padding:5px;
}

#stepThreeArrowCanvas
{
    align-self: center;
}

#listAnItemHeaderThree
{
    justify-self: center;
    align-self: center;
    font-size:1.5em;
    font-weight: bold;
    color:white;
}

#stepThreeTick
{
    justify-self: center;
    align-self: center;
}

/*List an Item Section Two Content*****************************************************/

#listAnItemStepThree
{
    display: grid;
    column-gap:10px;
    padding:10px;
}

#listAnItemBasicsBox
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-gap:10px;
    padding:5px;
    display:grid;
}

#nameBox
{
    display:grid;
    row-gap:3px;
    column-gap: 5px;
}

.basicsBox
{
    display:grid;
    row-gap:3px;
    column-gap: 5px;
}

#importProductLabel
{
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#importProductBox
{
    display:grid;
    grid-template-columns: 20px minmax(120px,auto) minmax(min-content,100px);
    grid-gap:5px;
    padding:5px;
    grid-template-areas:
            "disclaimer disclaimer disclaimer"
            "field field button"
            "tick error error";
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);;
}

#importProductDisclaimer
{
    grid-area:disclaimer;
    font-size:80%;
}

#importProductField
{
    grid-area:field;
    font-size: 1.3em;
}

#importProductSubmit
{
    grid-area:button;
}

#importProductTick
{
    grid-area:tick;
}

#importProductTick
{
    grid-area:tick;
}

#importProductError
{
    grid-area:error;
}

#photoBox, #basicPhotoBox
{
    display: grid;
    grid-template-columns: auto;
    column-gap:10px;
    margin-top:10px;
    margin-bottom:10px;
}

#photos
{
    display: inline-flex;
    grid-gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    max-width:100vw;
    padding:5px;
    height:184px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#photos > .productPhotoBox
{
    height:160px;
    display:grid;
    padding:5px;
}

.photo
{
    height:120px;
    width:150px;
    transition: all 0.5s ease-in;
    border: solid 3px white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.photoControls
{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:10px;
    grid-template-areas:
            "number button";
}

.photoNumber
{
    grid-area:number;
    justify-self:right;
    width:30px;
    text-align:center;
}


.removePhotoButton
{
    grid-area:button;
    -webkit-appearance: none;
    background-color: #fafafa;
    margin:0;
    border: none;
    display:grid;
    justify-content: center;
    align-content: center;
    content: 'Remove';
}

.removePhotoButton:after
{
    color: grey;
    content: 'Remove';
}

.removePhotoButton:checked
{
    border: 1px solid #adb8c0;
    background-color:rgba(189,32,37,0.7);
}

.removePhotoButton:checked:after
{
    content: 'Remove';
    color: white;
}

#productMovement
{
    display:grid;
    justify-self:center;
    grid-template-areas:
            ". left toolTip right ."
            "errorMessage errorMessage errorMessage errorMessage errorMessage";
    column-gap: 5px;
}

#listAProductPhotoTools
{
    grid-area:productTitle;
}

#movePhotoLeft
{
    grid-area:left;
    display:grid;
    align-content: center;
    justify-content: center;
}

#movePhotoRight
{
    grid-area:right;
    display:grid;
    align-content: center;
    justify-content: center;
}

#productMovement .toolTipBox
{
    grid-area:toolTip;
}

#photoChangeSaveButton
{
    grid-area: saveChanges;
}

#listAnItemUploadPhotos
{
    display:grid;
    column-gap:5px;
    margin-top:20px;
}

#uploadPhotoTitle
{
    grid-area:title;
    font-weight: bold;
    display:grid;
    justify-content: center;
    align-content:center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#maxUploadPhoto
{
    grid-area:maxPhotosTitle;
    font-weight: bold;
    display:grid;
    justify-content: center;
    align-content:center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#maxUploadPhotoValue
{
    grid-area:maxPhotosValue;
    display:grid;
    justify-content: center;
    align-content:center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#maxUploadSize
{
    grid-area:maxUploadTitle;
    font-weight: bold;
    display:grid;
    justify-content: center;
    align-content:center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#maxUploadSizeValue
{
    grid-area:maxUploadValue;
    display:grid;
    justify-content: center;
    align-content:center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#uploadProductPhoto
{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#uploadProductPhotoLabel
{
    grid-area:browse;
    display:grid;
    align-content: center;
    justify-content: center;
}

#uploadProductPhotoSubmit
{
    grid-area:upload;
}

#listAnItemSaveNewBox
{
    display:grid;
    grid-template-columns: auto minmax(max-content,150px) minmax(max-content,150px);
    column-gap:10px;
}

#addAProductBasicsSave
{
    grid-column-start:2;
}


/*Product Page********************************/

/*Large Image Overlay***************************/
#bigImage
{
    position:fixed;
    display:grid;
    background-color: rgba(0,0,0,0.8);
    grid-gap: 10px;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;
    z-index: 1001;
    align-content: center;
    justify-content: center;
    padding:10px;
}

#imageBox
{
    display: grid;
    grid-template-rows: auto max-content;
}

#largeImageItem
{
    transition: all 0.2s ease-in;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    background-color:grey;
    border: 3px white solid;
}

#secondaryLargeImages
{
    display: inline-flex;
    overflow-x: auto;
    padding:5px;
    justify-content:center;
}

.productSecondaryBigImages
{
    transition: all 0.2s ease-in;
    border: solid 3px white;
    margin-right:5px;
    flex: 0 0 100px;
    height:100px;
    width:100px;
}

#bigImageExit
{
    position:absolute;
    left:calc(90vw - 20px);
    top:calc(10vh - 20px);
    z-index:1000;
}

/*Product Admin************************************/

#productAdminBox
{
    padding:10px 10px 0 10px;
    display:grid;
    grid-gap:10px;
}

#productAdminLeft
{
    display:grid;
    grid-gap:10px;
}

.adminItem
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-template-columns: 1.5fr 1fr;

}

.adminItemTitle
{
    background-color: rgba(43,67,130, 0.8);
    color: white;
    display: grid;
    justify-content: center;
    align-content: center;
}

.adminItemValue
{
    display: grid;
    justify-content: center;
    align-content: center;
}

#productAdminStats
{
    display:grid;
    grid-template-columns: repeat(auto-fill,280px);
    grid-gap:10px;
}

#productAdminTitleClear
{
    display:grid;
    grid-template-columns: max-content auto 100px;
    grid-gap:10px;
}

#productAdminStatsButtons
{
    display:grid;
}

#productAdminRight
{
    display:grid;
}

#quickChangeQuantities
{
    display:grid;
    grid-template-columns: 100px auto 70px;
    grid-gap:5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
}

#myProductAdminQuantityUpdate
{
    grid-row: span 2;
}

#productAdminTitle
{
    font-size: 1.5em;
    font-weight:bold;
    align-self: end;
}
#productAdminSub
{
    font-style: italic;
    align-self: end;
}

#productActionBlock, #productAdminExtraBlock
{
    display:grid;
    justify-content: center;
    grid-gap:10px;
    padding-top:5px;
}

#productActionBlock
{
    grid-template-columns: repeat(auto-fit,100px);
}

#productAdminExtraBlock
{
    grid-template-columns: repeat(auto-fit,100px);
}


/*Seller Header***************************************/

#productSellerBox
{
    background-color:rgba(43,67,130, 0.8);
    color:white;
    box-shadow: inset 0 0 2px 0;
    display:grid;
}

#productSellerDetails
{
    display:grid;
    grid-template-columns:min-content 150px;
    grid-gap:10px;
}

#productSellerDetailsUser
{
    font-size:1.5em;
}

#productSellerBox a
{
    color:white;
}

/*Title***************************************************/

#productTitleBox
{
    height:60px;
    display:grid;
    grid-gap:10px;
    margin:0 10px 0 10px;
}

#productTitle
{
    font-size:2em;
    align-self:center;
    font-weight:bold;
    box-shadow:0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
}

#saveWatchlistButton, #savedProductItem, #watchlistSubmit
{
    height:100%;
    width:100%;
}

#watchlistSubmit
{
    display:grid;
    justify-content: center;
    align-content: center;
    color:black;
}

#savedProductItem
{
    display:grid;
    justify-content: center;
    align-content: center;
    background-color:rgb(254,246,178);
    color:black;
}

/*Product Summary***************************************/

#productSummaryContainer
{
    display:grid;
}

#productSummaryLeft
{
    padding: 0 10px 0 10px;
    display:grid;
    grid-gap:10px;
    grid-template-rows:min-content 30px auto 75px;
}

#productSummary
{
    height:580px;
    padding: 0 10px 0 10px;
    display:grid;
    grid-gap:10px;
    grid-template-rows:min-content 30px auto 75px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#productSummaryShortDescription
{
    font-style: italic;
    padding:10px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#productSummaryCondition
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
    height:30px;
    text-align:right;
}

#productSummarySpecifications
{
    display:grid;
    grid-gap:5px;
    grid-template-rows: auto;
    align-content: start;
    overflow-y:auto;
}

.productSummarySpecification
{
    font-weight:bold;
    display:grid;
    grid-gap:5px;
    grid-template-columns:1fr 1fr;
    padding-left: 5px;
    padding-right: 5px;
}

.productSummaryLeft
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    align-content: center;
    justify-content: center;
    background-color:rgba(43,67,130, 0.8);
    color:white;
}

.productSummaryLeft span, .productSummaryRight span
{
    align-self:center;
    font-size:1.2em;
}

.productSummaryRight
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    align-content: center;
    justify-content: center;
}

#productSummaryGlance
{
    display:grid;
    height:75px;
    grid-gap:5px;
    grid-template-columns: 1fr 1fr 1fr;
}

#productSummaryGlanceBasic
{
    display:grid;
    grid-gap:5px;
    margin: 0 10px 0 10px;
}

.glanceItem
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-size:1em;
    display:grid;
}

.glanceHeader
{
    background-color:rgba(43,67,130, 0.8);
    color:white;
    display:grid;
    justify-content: center;
    align-content: center;
}

.glanceValue
{
    display:grid;
    justify-content: center;
    align-content: center;
}

#productBadgeStatus
{
    background-color:lightgreen;
    color:black;
    display:grid;
    font-weight:bold;
    align-content: center;
    justify-content: center;
}

#productBadgeTrade
{
    background-color:orange;
    color:black;
    display:grid;
    font-weight:bold;
    align-content: center;
    justify-content: center;
}

#productBadgeBasic
{
    background-color:lightgray;
    color:black;
    display:grid;
    font-weight:bold;
    align-content: center;
    justify-content: center;
}

#productBadges
{
    display: grid;
    grid-template-columns: 80px 80px 80px 80px;
    justify-self: center;
    grid-gap:10px;
}

#productBadgeActive
{
    background-color:pink;
    color:black;
    display:grid;
    font-weight:bold;
    align-content: center;
    justify-content: center;
}

#productSellerExpiry
{
    background-color:white;
    color:black;
    display:grid;
    font-weight:bold;
    align-content: center;
    justify-content: center;
    justify-self:right;
    width:max-content;
    padding: 0 10px 0 10px;
}

/*Product Images*********************************/

#productImagesRight
{
    display:grid;
    grid-gap: 5px;
    padding-right:10px;
}

#productImages, #productImagesBasic
{
    display:grid;
    grid-gap: 10px;
}

#productImageContainer
{
    padding-top: 75%;
}

#productImageContainer
{
    transition: all 0.5s ease-in;
    border: solid 3px white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#productSecondaryImagesContainer
{
    overflow:auto;
    align-content: start;
    grid-gap:5px;
}

#productSecondaryImagesContainer > .productSecondaryImages
{
    transition: all 0.5s ease-in;
    border: solid 3px white;
    min-height:100px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

/*Buy Now and Price***************************************/

#productActionsContainer
{
    display:grid;
    align-content: center;
}

#productActionsPrice, #productActionsOffersOnly
{
    font-size:2em;
    display:grid;
    justify-content: center;
    align-content: center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    background-color:rgb(43,67,130);
    color:white;
}

#productActionsOffersOnly
{
    grid-column: span 3;
}

#productActionsBuyTitle
{
    font-size:1.2em;
    margin-left:10px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    justify-content: center;
    align-content: center;
    padding:5px;
    grid-gap:5px;
    grid-template-columns: repeat(auto-fit,minmax(70px,1fr));
}

#productActionsBuyTitle span
{
    display:grid;
    justify-content: center;
    align-content: center;
}
#productActionsQuantity
{
    text-align:right;
    font-size:1.3em;
    border:none;
    border-bottom: 1px black solid;
    background-color: rgba(244,245,249,1);
}

/*Make Offer************************************************/

#productActionsOfferSection
{
    display:grid;
    grid-template-columns:250px auto 100px 100px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding-left:10px;
    grid-gap: 10px;
}

#productActionsOfferTitle
{
    font-size:1.2em;
    display:grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: max-content max-content max-content max-content;
    grid-gap:5px;
}

#productActionsOfferTitle span
{
    display:grid;
    justify-content: center;
    align-content: center;
}

#productActionOfferValuesQuantity
{
    width:50px;
    text-align:right;
    border:none;
    font-size:1.3em;
    border-bottom: 1px black solid;
    background-color: rgba(244,245,249,1);
}

#productActionOfferValuesPrice
{
    width:90px;
    text-align:right;
    font-size:1.3em;
    border:none;
    border-bottom: 1px black solid;
    background-color: rgba(244,245,249,1);
}

#productActionsOfferConditions
{
    display:grid;
    grid-template-columns:100px auto;
    padding:5px;
    align-content: center;
}

#productActionsOfferConditionsTitle
{
    font-size:1.2em;
    display:grid;
    justify-content: center;
    align-content: center;
}

#productActionsOfferField
{
    height:40px;
    background-color: rgba(244,245,249,1);
}

/*Product Actions****************************************/
#productActionsFormsFloat
{
    display:grid;
    position:fixed;
    bottom:0;
    align-content: start;
    z-index: 999;
}
/*Buy Now and Price***************************************/

#hidePriceWindow
{
    background-color:rgb(43,67,130);
    color:white;
    display:grid;
    align-content: center;
    justify-content: center;
    width:70px;
    padding:5px;
    margin-left:80%;
}

#hidePriceWindow:hover
{
    background-color:blue;
}

#productActionsPriceFloat
{
    font-size:2em;
    text-align:center;
    background-color:rgb(43,67,130);
    color:white;
    padding-top:5px;
}

#productActionsBuyTitleFloat
{
    font-size:1.2em;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
    display:grid;
    grid-template-columns: 100px auto;
    grid-gap:5px;
    align-content: center;
}

#productActionsBuyTitleFloat span
{
    display:grid;
    align-content: center;
}

#productActionsQuantityFloat
{
    text-align:right;
    font-size:1.3em;
}

/*Make Offer************************************************/

#productActionsOfferTitleFloat
{
    display:grid;
    grid-column-gap:5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-row: span 2;
}

#productActionsOfferFieldFloat
{
    grid-column: span 3;
}

#productActionOfferValuesPriceFloat, #productActionOfferValuesQuantityFloat
{
    text-align:right;
}

/*Product Details********************************/

#productMain
{
    display:grid;
    grid-gap: 10px;
    padding:0 10px 10px 10px;
}

/*Product Description*****************************/

#productDescriptionTop
{
    display:grid;
    grid-gap: 10px;
}

#productDescription
{
    min-height:300px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-size:1.2em;
    padding:10px;
}

#productDescriptionBasic
{
    min-height:300px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-size:1.2em;
    padding:10px;
    margin-right:10px;
    margin-left:10px;
}

/*Payment and Shipping******************************************/

#productPayment
{
    display:grid;
    grid-template-rows:40px auto;
    align-content: start;
    grid-gap: 10px;
}

#productShipping
{
    /*box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);*/
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows:40px auto;
    align-content: start;
    grid-gap: 10px;
}

#productPaymentTitle, #productShippingTitle
{
    grid-column: span 2;
    font-weight:bold;
    text-align:center;
    font-size: 1.5em;
    height:40px;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#pickupOptions, #pickupOptionsBasic
{
    display:grid;
    grid-gap:5px;
    align-content: start;
}

#pickupOptionsBasic
{
    margin-left:10px;
}

#pickupAvailable
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    height:50px;
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
    font-weight:bold;
}

#itemLocation
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    padding:5px;
    justify-content:center;
    align-content: center;
}

#shippingOptions, #shippingOptionsBasic
{
    display:grid;
    grid-gap: 10px;
}

#shippingOptionsBasic
{
    margin-right:10px;
}

#shippingAvailable
{
    height:50px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:15px 5px 0 5px;
    text-align:center;
    align-content: center;
    font-weight:bold;
}

.productShippingOption
{
    display:grid;
    grid-gap:5px;
    grid-template-columns:1fr 1fr;
    grid-template-rows: min-content;
}

.productShippingLeft
{
    text-align:left;
    padding:5px;
    width:100%;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
}

.productShippingRight
{
    text-align:right;
    padding:5px;
    width:100%;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
}

#pickUpPaymentOptions
{
    display:grid;
    grid-gap:5px;
    padding-left: 5px;
    padding-right: 5px;
    align-content: start;
}

#productPaymentPickUpTitle
{
    background-color: rgba(43,67,130, 0.8);
    color: white;
}

.productPaymentPickUpItem
{
    text-align: center;
    padding: 5px;
    width: 100%;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#shippingPaymentOptions
{
    display:grid;
    grid-gap:5px;
    padding-left: 5px;
    padding-right: 5px;
    align-content: start;
}

#productPaymentShippingTitle
{
    background-color: rgba(43,67,130, 0.8);
    color: white;
}

.productPaymentShippingItem
{
    text-align: center;
    padding: 5px;
    width: 100%;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

/*Offers and Discussion******************************************/

#productDetailRight
{
    display:grid;
    grid-gap: 10px;
}

#productDetailsBasic
{
    display:grid;
    grid-gap: 10px;
}


#productOfferBox, #productDiscussionBox, #productDiscussionBoxBasic, #productOfferBoxBasic
{
    display:grid;
    grid-template-rows: min-content auto min-content;
    grid-gap:5px;
}

#productDiscussionBoxBasic
{
    margin-bottom: 10px;
}

#productOfferBox span, #productOfferBoxBasic span
{
    font-weight:bold;
    text-align:center;
    font-size:1.5em;
    background-color:rgba(43,67,130, 0.8);
    color:white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#productOfferContents
{
    overflow-y: auto;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-gap:5px;
    grid-template-rows: min-content;
    align-content: start;
}

.productOfferItem
{
    border-top:1px solid black;
    display:grid;
    padding:5px;
    grid-gap:5px;
    grid-template-rows: min-content;
    grid-template-columns: auto min-content;
    grid-template-areas:
            "offer offer"
            "submitter buttons"
}
.productOfferMain
{
    grid-area:offer;
    display:grid;
    padding:5px;
    grid-gap:5px;
    grid-template-rows: min-content;
    grid-template-columns: 2fr 2fr;
    grid-template-areas:
            "offer expiry"
            "conditions conditions";
}

.productOfferAmount
{
    grid-area:offer;
}

.productOfferExpiry
{
    grid-area:expiry;
}

.productOfferConditions
{
    grid-area:conditions;
}
.productOfferUser
{
    grid-area:submitter;
    font-size:0.8em;
}
#productOfferResponse
{
    grid-area:buttons;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:2px;
}

.acceptOfferButton,
.rejectOfferButton,
.counterOfferButton,
.deleteOfferButton
{
    font-size:1em;
    height:100%;
    width:90px;
}

.productOfferRed
{
    background-color:rgba(189,32,37,0.3);
}
.productOfferYellow
{
    background-color:rgba(255,222,0,0.3);
}
.productOfferGreen
{
    background-color:rgba(0,213,40,0.3);
}

#productOfferOptions
{
    height:25px;
    width:310px;
    justify-self:center;
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-gap:5px;
}

#productDiscussionContents
{
    overflow-y: auto;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-template-rows: min-content;
    align-content: start;
}

#discussionTitle
{
    font-weight:bold;
    text-align:center;
    font-size:1.5em;
    background-color:rgba(43,67,130, 0.8);
    color:white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.productDiscussionItem
{
    display:grid;
    grid-template-rows: min-content;
    padding:5px;
}

.productDiscussionComment
{
    border:solid 1px black;
    padding:5px;
}

.productDiscussionUserComment
{
    text-align:center;
    font-size:0.8em;
}

.productDiscussionQuestion
{
    background-color:rgba(189,32,37,0.3);
    padding:5px;
    min-width:60%;
    justify-self:left;
}

.productDiscussionUserQuestion
{
    text-align:left;
    margin-left:5px;
    font-size:0.8em;
}

.productDiscussionResponse
{
    text-align:right;
    background-color:rgba(43,67,130, 0.3);
    padding:5px;
    min-width:60%;
    justify-self:right;
}

.productDiscussionUserResponse
{
    text-align:right;
    margin-right:5px;
    font-size:0.8em;
}

.productDiscussionResponse textarea
{
    width:100%;
    height:50px;
}

.productDiscussionResponse input[type=submit]
{
    height:25px;
}

#productDiscussionAdd
{
    height:30px;
    display:grid;
    grid-template-columns:9fr 1fr;
    grid-gap:5px;
}

#productDiscussionAdd input[type=text]
{
    padding-left:5px;
}

#discussionSubmit
{
    display: grid;
    justify-content: center;
    align-content: center;
}

/*My Product Listing Page******************************************/
#myProductListingHeader
{
    height: 30px;
    background-color: rgba(43,67,130, 0.8);
    display:grid;
}

#myProductListingHeader span
{
    justify-self: center;
    align-self: center;
    font-size: 1.5em;
    font-weight: bold;
    color: white;
}

#myProductsControls
{
    height: 30px;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
}

#myProductForm
{
    width:min-content;
    justify-self:center;
}

.myProductItem
{
    display:grid;
    grid-template-columns:40px 70px 120px 120px 130px 120px 120px 130px 100px 100px;
    grid-template-areas:
            "canvasExpander listingStatus listingName listingName listingName listingName listingName listingName quickButtonOne quickButtonTwo"
            "canvasExpander listingStatus productCode price totalQuantity totalOffers totalSales salesValue quickButtonOne quickButtonTwo"
            ". . responses responses responses responses responses responses responses responses";
    grid-template-rows:min-content;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    column-gap:10px;
    margin-right:10px;
    margin-left:10px;
    margin-bottom:10px;
    text-align:center;
    padding-right:10px;
}

.myProductListingExpander
{
    grid-area:canvasExpander;
}

.myProductsListingStatusActive, .myProductsListingStatusInactive, .myProductsListingStatusCancelled, .myProductsListingStatusSold
{
    grid-area:listingStatus;
    display:grid;
    align-content: center;
}

.myProductsListingStatusActive
{
    background-color: rgba(0,213,40,0.3);
}

.myProductsListingStatusInactive
{
    background-color: rgba(255,222,0,0.3);
}

.myProductsListingStatusCancelled
{
    background-color: rgba(189,32,37,0.3);
}

.myProductsListingStatusSold
{
    background-color: rgba(0,213,40,0.3);
}

.myProductListHeaderProductName
{
    grid-area:listingName;
    text-align:left;
    height:min-content;
}

.myProductListHeaderProductName:hover, .myProductSalesRef:hover, .myProductSalesSnapshot:hover, .myProductSalesBuyer:hover,
.myProductListHeaderProductName:focus, .myProductSalesRef:focus, .myProductSalesSnapshot:focus, .myProductSalesBuyer:focus
{
    color: rgba(43,67,130, 0.5);
}

.myProductListProductCode
{
    grid-area:productCode;
    align-self:center;
}

.myProductListPrice
{
    grid-area:price;
    align-self:center;
}

.myProductListTotalQuantity
{
    grid-area:totalQuantity;
    display:grid;
    align-self:center;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-areas:
            "title title title"
            "values increase decrease";
}

#myProductListQuantityHeader
{
    grid-area:title;
}

.myProductListActualQuantity
{
    grid-area:values;
    align-self:center;
}

.myProductsIncrease
{
    grid-area:increase;
}

.myProductsDecrease
{
    grid-area:decrease;
}

.myProductListHeaderTotalOffers
{
    grid-area:totalOffers;
    align-self:center;
}

.myProductListHeaderTotalSales
{
    grid-area:totalSales;
    align-self:center;
}

.myProductListHeaderSalesValue
{
    grid-area:salesValue;
    align-self:center;
}

.quickButtonOne
{
    grid-area:quickButtonOne;
}

.quickButtonTwo
{
    grid-area:quickButtonTwo;
}

.myProductResponses
{
    grid-area:responses;
    font-size:0.9em;
}

.myProductListingSalesHeader
{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-gap:5px;
}

.myProductSales
{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    grid-gap:5px;
}

.myProductsOfferPending
{
    background-color: rgba(255,222,0,0.3);
}

.myProductsOfferPending:hover, .myProductsOfferPending:focus
{
    background-color: rgba(255,222,0,0.7);
}

.myProductsOfferSold
{
    background-color: rgba(0,213,40,0.3);
}

.myProductsOfferSold:hover, .myProductsOfferSold:focus
{
    background-color: rgba(0,213,40,0.7);
}

.myProductsOfferCancelled, .myProductsOfferRejected
{
    background-color: rgba(189,32,37,0.3);
}

.myProductsOfferCancelled:hover, .myProductsOfferRejected:hover, .myProductsOfferCancelled:focus, .myProductsOfferRejected:focus
{
    background-color: rgba(189,32,37,0.7);
    color:white;
}

/*Offer Confirmation Page**********************************************************/
#makeOfferConfirmation
{
    display:grid;
    align-content:start;
    grid-gap:10px;
}

#confirmationTitle
{
    display:grid;
    align-content: center;
    background-color: rgba(43,67,130, 0.8);
    color:white;
    font-size:1.5em;
    font-weight:bold;
    padding:5px;
}

/*--Confirmation Item*********************************/
#confirmationItem
{
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-gap:10px;
    grid-template-rows: min-content;
    align-content: start;
}

#confirmationItemTitle
{
    display:grid;
    align-content: center;
    justify-content:center;
    background-color: rgba(43,67,130, 0.8);
    color:white;
    font-size:1.2em;
    padding:5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    grid-column: span 2;
}

.productItemTwice
{
    grid-column: span 2;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
}

.standardFormFieldSplit
{
    grid-template-columns: max-content 40px auto 40px;
}

.productItemField
{
    display:grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.threeHigh
{
    grid-row: span 3;
}

.confirmInvoiceItem
{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.confirmationFieldValue
{
    text-align:center;
}

.confirmationFieldPhoto
{
    border:3px solid white;
    background-size: contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:lightgray;
}

.confirmationFieldDescription
{
    padding:10px;
}

#confirmationFieldName
{
    font-size:1.2em;
    text-align: center;
}

.confirmationFieldName, .confirmationFieldsBigPriceFieldName
{
    display: grid;
    align-content: center;
    font-style: italic;
    font-size: 0.8em;
}

.confirmationFieldName
{
    padding: 5px;
}

#newProductConfirmationImages
{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
    grid-gap:10px;
    padding: 5px;
}

#confirmationPhotos
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#confirmationPhotosBig
{
    width:100%;
    padding-top: 75%;
    background-size: cover;
    background-position:center top;
}

.newProductConfirmationImage
{
    padding-top: 75%;
    background-size: cover;
    background-position:center top;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    border:3px solid white;
}
/*--Confirmation Offer Details************************/

#confirmationFields, #counterOfferFields
{
    display: grid;
    grid-gap:10px;
    align-content: start;
}

#confirmationFieldsTitle, #counterOfferFieldsTitle, .confirmationPaymentTitle
{
    display:grid;
    align-content: center;
    justify-content:center;
    background-color: rgba(43,67,130, 0.8);
    color:white;
    font-size:1.2em;
    padding:5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#counterOfferFieldsTitle
{
    grid-column: span 2;
}

#counterOfferFields
{
    grid-template-columns:1fr 1fr;
}

.confirmationFieldsCounterContainer
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding: 5px;
    display:grid;
}

.confirmationFieldsCounter
{
    font-size: 1.5em;
}

.confirmationFieldsCounterFieldName
{
    align-self:end;
}


.confirmationFieldsBigPriceFieldName, .confirmationFieldsCounterFieldName
{
    font-size: 0.9em;
}

#confirmationProductDetails .makeOfferConfirmationField
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
}

#confirmationFields .makeOfferConfirmationField, #makeOfferDoubleBanger .makeOfferConfirmationField, #counterOfferFields .makeOfferConfirmationField
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
    display:grid;
    grid-template-columns:max-content 40px auto 40px;
    grid-template-areas:
            "input input input tick"
            "title tooltip . ."
            "error error error error";
}

.productItemInput
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:10px;
    display:grid;
    grid-template-columns:max-content 40px auto 40px;
}

.confirmationInputFieldItem
{
    grid-column: span 3;
}

.confirmationFormErrors
{
    grid-column: span 4;
}

#confirmationTotalEachButtons
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}

#makeOfferExpiryField, #makeOfferDoubleBanger {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    display: grid;
    grid-template-columns: max-content 40px auto 40px;
}

#expiryTypeSelect
{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
}

#expiryTypeSelectCounter
{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:10px;
}

.expiryRadio, .expiryRadio + label
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    background-color:rgba(43,67,130, 0.15);
    display:grid;
    cursor: pointer;
}

.expiryRadioItem
{
    display:grid;
    justify-content:center;
    align-content:center;
    padding:5px;
}

.newProductPhotoRadio, .newProductPhotoRadio + label
{
    display:grid;
    cursor: pointer;
}

.newProductPhotoRadioItem
{
    display: grid;
    justify-content: center;
    align-content: center;
    padding: 5px;
}


.makeOfferConfirmationNameField, .makeOfferConfirmationTextArea, #expiryTypeSelect
{
    width:100%;
    padding:5px;
    font-size:1em;
}

#finalOfferValueField, #finalOfferQuantityField, #finalBuyNowQuantityField
{
    text-align:right;
}

.makeOfferConfirmationFormErrors, .makeOfferConfirmationFormErrors1, #finalOfferShippingError, .redText
{
    font-size:0.8em;
    font-style: italic;
    color: rgba(189,32,37,1);
}

#confirmationShipping
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-gap:10px;
    padding:10px;
}

#confirmationShippingOptions
{
    display:grid;
    grid-gap:10px;
}

#JSOfferTotal
{
    padding:10px;
}

#shippingSelection
{
    display: grid;
    align-content: center;
    justify-content: center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    font-size: 1em;
    padding: 5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.confirmationPickUpOption, .confirmationShippingOption
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
}

.confirmationShippingRight
{
    text-align:right;
}

.confirmationShippingOption, .confirmationShippingOption + label, .pickupShippingOption, .pickupShippingOption + label
{
    display:grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    background-color: rgba(43,67,130, 0.15);
    padding:5px;
}

#shippingFixed
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
}

.confirmationShippingOption, .confirmationShippingOption + label
{
    grid-template-columns: 2fr 1fr;
}
.hideRadios:focus, .hideRadios:focus + label, .hideRadios:hover, .hideRadios:hover + label, .hideRadios:checked, .hideRadios:checked + label
{
    background-color: rgba(147,206,58, 0.7);
    color:black;
}

.hideRadios:focus, .hideRadios:focus + label
{
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.hideChecks:checked, .hideChecks:checked + label, .hideRelative:checked, .hideRelative:checked + label
{
    background-color: rgba(147,206,58, 0.7);
    color:black;
}

.hideChecks:focus, .hideChecks:focus + label, .hideRelative:focus, .hideRelative:focus + label
{
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}



/*--Confirmation Group Details************************/

#confirmationOfferGroup
{
    align-content: start;
}

#confirmationGroupTitle
{
    display:grid;
    align-content: center;
    justify-content:center;
    background-color: rgba(43,67,130, 0.8);
    color:white;
    font-size:1.2em;
    padding:5px;
}

#confirmationButtons
{
    display:inline-flex;
    justify-self: center;
}

.confirmButton
{
    display:grid;
    justify-content: center;
    align-content: center;
    height:30px;
    width:100px;
    margin-left:5px;
    margin-right:5px;
}

#counterOfferButtons
{
    grid-column-start: 2;
}

#offerConfirm
{
    grid-area:confirmationButton;
}

#cancelButton
{
    grid-area:cancelButton;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border: none;
    background-color:rgba(43,67,130, 0.15);
    display:grid;
    justify-content: center;
    align-content: center;
}

#cancelButton:hover, #cancelButton:focus
{
    background-color:lightgray;
}

.hideRadios, .hideChecks, .hideRelative
{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.hideRadios, .hideChecks
{
    position: absolute;
}

.hideRelative
{
    position: relative;
}

#offerGroups
{
    padding:5px;
    overflow-y:auto;
    display:grid;
    grid-gap:10px;
    max-height:500px;
}

.groupHeader
{
    display:grid;
    align-content: center;
    justify-content:center;
    background-color: rgba(43,67,130, 0.15);
    font-size:1.2em;
    padding:5px;
}

.groupItem, .groupItem + label
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    cursor: pointer;
    padding-bottom:10px;

}

#itemGroup
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display: grid;
    padding-bottom: 10px;
}
.hideRadios:focus .groupHeader, .hideRadios:focus + label .groupHeader,
.hideRadios:hover .groupHeader, .hideRadios:hover + label .groupHeader,
.hideRadios:checked .groupHeader, .hideRadios:checked + label .groupHeader
{
    background-color: rgba(147,206,58, 0.7);
    color:black;
}

.groupProduct
{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-areas:
            "image name name"
            "image ref price"
            "image offer offer"
            "image conditions conditions";
    grid-column-gap: 10px;
    padding:10px;
    margin:10px 10px 0 10px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.offerGroupImage
{
    grid-area:image;
    border:3px solid white;
    background-size: contain;
    background-position:center;
    background-repeat:no-repeat;
    background-color:lightgray;
}

.offerGroupName
{
    grid-area:name;
    font-weight:bold;
}

.offerGroupRef
{
    grid-area:ref;
}

.offerGroupPrice
{
    grid-area:price;
}

.offerGroupOffer
{
    grid-area:offer;
}

.offerGroupConditions
{
    grid-area:conditions;
}

/****************************Footer************************************/
#footer
{
    background-color: rgba(43,67,130, 0.8);
    width:100%;
    margin-top:20px;
}

#footerNavItem
{
    display:grid;
    padding:10px;
}

/*TESTING AREA******************************************************/

#JSDropImages
{
    border: 2px dashed #ccc;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    grid-gap:5px;
    grid-column: span 5;
}

#JSPhotoItems
{
    display:grid;
    column-gap:10px;
}

#JSDropImages.highlight
{
    border-color: purple;
}
p
{
    margin-top: 0;
}
.my-form
{
    margin-bottom: 10px;
}
.button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.button:hover {
    background: #ddd;
}

.JSUploadPhotoTitle
{
    font-weight: bold;
    display:grid;
    justify-content: center;
    align-content:center;
    text-align: center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.JSUploadPhotoValue
{
    display:grid;
    justify-content: center;
    align-content:center;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

#JSUploadProductPhotoLabel
{
    display:grid;
    grid-row: span 2;
    align-content: center;
    justify-content: center;
}

.dragSpace
{
    width:30px;
    background-color:pink;
}

#listingType a
{
    display:grid;
    justify-content: center;
    align-content: center;
    padding: 5px;
}
/******************Product Display starts here*/
#blockProducts
{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(203px, 1fr));
    grid-gap:10px;
}

.blockButton
{
    border: 3px rgba(43,67,130, 0.9) solid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    height:249px;
    padding-top:197px;
    overflow: hidden;
    transition: all 0.2s ease-in;
}

.blockButton:hover, .inlineButton:hover
{
    padding-top:77px;
}

.blockItemText, .inlineItemText
{
    height: 172px;
    background-color: rgba(43,67,130, 0.9);
    color: white;
    padding: 5px;
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows:minmax(34px,max-content);
    grid-gap:5px;
    font-size:0.8em;
    align-content:start;
}

.blockItemPrice, .inlineItemPrice
{
    justify-self:right;
    align-self: center;
    font-size:1.2em;
    font-weight: bold;
}

.blockItemDescription, .inlineItemDescription
{
    grid-row: span 2;
}
.blockItemQuantity, .inlineItemQuantity
{
    justify-self:right;
}

#inlineProducts
{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.inlineButton
{
    flex: 0 0 auto;
    border: 3px rgba(43,67,130, 0.9) solid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    border-radius: 10px;
    height:249px;
    width:203px;
    padding-top:197px;
    overflow: hidden;
    transition: all 0.2s ease-in;
    column-gap:10px;
    margin-right:10px;
}

.inlineItemWatchlist
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display:grid;
    justify-content: center;
    align-content: center;
}

.newListingType
{
    display: grid;
    justify-content: center;
    align-content: center;
    padding: 5px;
    background-color:rgba(147,206,58, 0.7);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.specificationSearchItems
{
    grid-column: span 4;
    display:none;
    grid-template-columns: 1fr 1fr;
    grid-gap:5px;
    transition: all 0.5s ease-in;
}

.specificationRecommendations
{
    background-color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.specificationSearch
{
    background-color: white;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
}

.specSuggestionTitle
{
    font-weight: bold;
    display: grid;
    justify-content: center;
    align-content: center;
    background-color: rgba(43,67,130, 0.8);
    color: white;
}

.specSuggestionItems
{
    display:grid;
    row-gap: 5px;
    padding: 5px;
}

.productTypeButton
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    display: grid;
    justify-content: center;
    align-content: center;
}

#errorLog
{
    display:grid;
    grid-template-columns: min-content min-content min-content min-content auto;
    grid-gap:20px;
    max-height:200px;
    overflow-y: auto;
}

#registrationForm
{
    display:grid;
    grid-gap:10px;
}

#registrationFields
{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:20px;
    padding:10px;
}

.firstColumn
{
    grid-column:1;
}

.firstTwoColumns
{
    grid-column-start: 1;
    grid-column-end:3;
}

.registrationInput
{
    display:grid;
    grid-template-columns:120px 20px 20px 140px auto;
}

.registrationTwoPart
{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-column-start: 1;
    grid-column-end:3;
    grid-gap:10px;
}

.span5
{
    grid-column: span 5;
}

.max600
{
    max-width:630px;
}

.recommendationValue
{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    row-gap:20px;
    text-align:center;
}

#errorSectionMessages
{
    padding:10px;
    display:grid;
}

.confirmationFieldsBigPrice
{
    display: grid;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
    grid-template-columns: 1fr 1fr;
    grid-gap:5px;
}

.confirmationFieldsBigPriceContainer
{
    display:grid;
    grid-gap:5px;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    padding:5px;
}

.extraComponentLeft
{
    text-align:right;
}

.unfinishedSelect, .unfinishedSelect + label
{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    background-color:lightgrey;
    border:3px white solid;
    border-radius:5px;
    z-index: 10;
    display:grid;
    cursor: pointer;
}

.unfinishedSelectLabel
{
    display:grid;
    justify-content:center;
    align-content:center;
    padding:5px;
    position:relative;
    top:-245px;
    left:10px;
    width:80px;
}

.unfinishedSelectLabel:hover
{
    background-color: rgb(179,221,117);
}

#selectedItems
{
    display:grid;
    color:white;
    justify-content: center;
    align-content: center;
}

.deleteUnfinishedButton
{
    border:3px white solid;
    background-color:red;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2);
    z-index:10;
    width:80px;
    display: grid;
    padding:5px;
    justify-content: center;
    align-content: center;
    opacity: 0.5;
    position:relative;
    left:115px;
    top:-3px;
    border-radius:5px;
}