/** THIS IS MAIN CSS **/
html, .homepage { height: 100%; }
body { font-family: "Poppins", sans-serif; }

.spacer { height: 1rem; }
hr {
    border-top-color: #DDDDDD;
    opacity: 1;
}

h3 {
    font-size: 1.2rem;
    font-weight: bold;
}

.modal-title { font-weight: bold; }

.colorpick-eyedropper-input-trigger { display:none; }

.form-control,
.btn, .card { border-radius: 0; }

.form-label { width: 100%; }

.formGroup { margin-bottom: 1rem; }
textarea.form-control { resize: none; }

#themeColorInput { height: 38px; }
#companyAddressInput { height: 7.6rem; }

a, .btn, button { transition: all 0.5s; }

.btn-site { color: #FFFFFF; }
.btn-site:focus,
.btn-site:hover {
    background: #000000;
    color: #FFFFFF;
}

.hidden { display: none; }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

nav.flex {
    margin-top: 10px;
    justify-content: flex-end;
    width: 100%;
}

nav.flex a { text-decoration: none; }
nav.flex a:focus,
nav.flex a:hover { color: #000000; }
nav.flex a:first-child { color: #000000; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

/* HOMEPAGE */
.homepage {
    align-items: center;
    display: flex;
    background: #F2F2F2;
}

#homepageText {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
    padding: 4rem;
}
#homepageText h1 {
    font-weight: bold;
    margin: 0 0 1rem 0;
}
#homepageText ul {  }
#homepageText li {
    font-size: 1.2rem;
    margin-bottom: .2rem;
}

#homepageLogin {
    background: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
#homepageLogin form { margin: auto; }
#homepageLogin #loginLogo {
    margin-bottom: 2rem;
    max-width: 80%;
}
#homepageLogin h4 {
    font-weight: bold;
    margin: 0 0 1rem 0;
}

#homepageLogin .input-group { margin-bottom: 1rem; }
#homepageLogin .input-group-text {
    background: transparent;
    border-radius: 0;
}
#homepageLogin .input-group-text img { width: 34px; }

#homepageLogin .forgotLoginRow {
    align-items: center;
    display: flex;
    margin-bottom: 2rem;
}
#homepageLogin a { text-decoration: none; }
#homepageLogin .btn { font-weight: bold; }


/************************************
************** PRODUCTS *************
************************************/

.site {
    background: #F2F2F2;
    padding: 5rem 0 2.5rem 0;
}

header {
    background: #FFFFFF;
    padding: .5rem 0;
}
.headerContent {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}


.siteLogoLink,
.siteAdminLogoLink {
    align-items: center;
    display: flex;
}
.headerContent .nav {
    justify-content: center;
    width: auto;
}
.headerContent .dropdown a { text-decoration: none; }
.headerContent .dropdown-menu { border-radius: 0; padding: 0; }
.headerContent .dropdown-menu .dropdown-divider { margin: 0; }


.mainHeaderSection {
    align-items: center;
    display: flex;
    margin-bottom: .5rem;
}
.mainHeaderLinks {
    align-items: center;
    display: flex;
    width: auto;
}
.mainHeaderLinks .navbar { padding: 0; }
.mainHeaderFilterSearch {
    align-items: center;
    display: flex;
}

#button-search {
    background: #FFFFFF;
    border: 1px solid #DEE2E6;
    border-left: 0;
}

.nav-pills { width: 100%; }

.nav-pills .nav-item { margin-right: 1rem; }
.nav-pills .nav-link {
    background: #FFFFFF;
    border-radius: 0;
}

.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { color: #FFFFFF; }
.nav-item.last {
    margin-left: auto;
    margin-right: 0; 
}

.accountDetailsHolder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.accountDetailsBlock {
    border: 1px solid #DDDDDD;
    flex-basis: 49%;
    flex-grow: 1;
    padding: 1rem;
    width: 100%;
}

.accountDetailsBlock p { margin: 0 0 .75rem 0; }
.accountDetailsBlock p:last-child { margin: 0; }

.accountDetailsBlock p span {
    display: inline-block;
    width: 50%;
}
.accountDetailsBlock p span.agedBalance { text-align: right; }

#accountTables { padding: 0; }
#accountTables .table { margin-bottom: 0; }
#accountTables .table tr:last-child { border-bottom: transparent; }
#accountTables .table .btn img { transition: all 0.5s; }
#accountTables .table .btn:hover img { transform: scale(1.15); }

.rowItem {
    align-items: center;
    display: flex;
    margin-top: 0.5rem;
    width: 100%;
}
.rowItem.headings {
    font-weight: bold;
    margin-top: 0;
}
.rowItem p { margin: 0; }

.rowImageDetails {
    align-items: center;
    display: flex;
}
.rowPriceQtyAction {
    align-items: center;
    display: flex;
}

.rowDetails {
    display: flex;
    flex-wrap: wrap;
    line-height: 125%;
}
.rowItem p.availability {
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.availability.green { color: green; }
.availability.red { color: red; }

.rowPrice { text-align: center; }
.rowPrice span { font-size: 0.9rem; }
.rowQty {
    margin-right: auto;
    text-align: center;
}
.rowQty .form-control { text-align: center; }

.rowAction .btn { width: 100%; }


/************************************
************** CATEGORY *************
************************************/

#categoryCardsHolder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}
.category {
    border: 1px solid #DDDDDD;
    flex-direction: row;
    width: 100%;
}

.categoryImage {
    border-right: 1px solid #DDDDDD;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex: 0 0 auto;
    width: 33.33333333%;
}
.categoryDetails {
    flex: 0 0 auto;
    width: 66.66666667%;
}
.categoryDetails .card-body {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}
.categoryDetails .card-title {
    margin: 0;
    width: 100%;
}
.categoryDetails .formFlex {
    align-items: flex-end;
    display: inline-flex;
    width: 100%;
}
.categoryDetails .card-text {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.categoryDetails .card-text:focus,
.categoryDetails .card-text:hover { color: #000000; }


/************************************
*************** CART ****************
************************************/

.basketTotalValues { text-align: right; }

#resetPassword h3,
#categoryProducts h3,
#shoppingBasket h3,
#selectDeliveryAddressCol h3,
#myBasketContentsCol h4,
#orderConfirmation h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

#myBasketContentsCol h4 {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.deliveryAddressHolder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}
.deliveryAddressHolder .card {
    border: 1px solid #DDDDDD;
    flex-grow: 1;
    width: 100%;
}

#myBasketContentsCol .list-group { margin-bottom: 1rem; }
#myBasketContentsCol .list-group-item {
    display: flex;
    justify-content: space-between;
    line-height: 1.25;
}
#myBasketContentsCol .list-group-item p { margin: 0; }
#myBasketContentsCol .list-group-item .listPriceQty { text-align: right; }

#myBasketContentsCol  #customerReferenceField {
    margin-bottom: 1rem;
    padding: 1rem;
}

/************************************
************ ACCOUNT ****************
************************************/

.file-upload {
    background-color: #ffffff;
    width: 100%;
    margin: 0 auto;
}
.file-upload-content {
    display: none;
    text-align: center;
}

.file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap {
    border: 4px dashed #DDDDDD;
    position: relative;
}

.image-dropping,
.image-upload-wrap:hover {
    opacity: 0.4;
    border: 4px dashed #ffffff;
}

.image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
}

.drag-text {
    text-align: center;
}

.drag-text p {
    color: #DDDDDD;
    padding: 20px 0;
}

.file-upload-image {
    max-height: 120px;
    max-width: 100%;
    margin: auto;
    padding: 10px;
}

.remove-image {
    width: 100%;
    margin: 0;
    color: #fff;
    border: none;
    padding: 5px;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
}

.remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all .2s ease;
}

.scrollableContent {
    align-items: center;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

/************************************
************ RESPONSIVE ****************
************************************/

@media (max-width: 479.98px) {

    #siteLogo { max-width: 86px; }

    #cart-info { display: none; }
    .headerContent .nav a { padding: 0 .5rem 0 0 !important; }

    header .link-body-emphasis svg,
    header .link-body-emphasis img {
        height: 24px;
        width: 24px;
    }

}

@media (min-width: 480px) {

    #siteLogo { max-width: 86px; }

    header .link-body-emphasis svg,
    header .link-body-emphasis img {
        height: 32px;
        width: 32px;
    }

}

@media (max-width: 599.98px) {

    .rowPriceQtyAction { flex-wrap: wrap; }
    .rowPrice,
    .rowQty,
    .rowAction {
        margin: 0.5rem 0;
        width: 100% !important;
    }

    .category { flex-basis: 100% !important; }

}

@media (max-width: 767.98px) {

    .deliveryAddressHolder .card { flex-basis: 100%; }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    .deliveryAddressHolder .card { flex-basis: 48%; }

}

@media (max-width: 991.98px) {

    .hideOnMobile { display: none; }
    .siteAdminLogoLink { margin-right: auto; }

    .siteLogoLink { margin-right: auto; }
    .headerContent .nav a { padding: 0 1rem 0 0; }

    #adminNav { display: none; }

    .rowItem { flex-wrap: wrap; }
    .rowItem.headings { display: none; }
    
    .rowImageDetails { width: 100%; }
    .rowImage { min-width: 100px; }

    .rowPriceQtyAction { width: 100%; }
    .rowPrice { width: 30%; }
    .rowQty { width: 36%; }
    .rowAction { width: 30%; }

    .mainHeaderLinks .navbar { display: none; }
    .mainHeaderFilterSearch, .mainHeaderFilterSearch form { width: 100%; }

    .mainHeaderSection .nav-pills {
        gap: 1rem;
        justify-content: space-between;
        width: 100%;
    }
    .mainHeaderSection .nav-pills .nav-item {
        flex-basis: 48%;
        flex-grow: 1;
        margin-right: 0;
        width: 100%;
    }

    /* HOMEPAGE */

    #homepageTextBlock { display: none }
    #homepageLogin { width: 100%; }
    #homepageLogin form { max-width: 80%; }

    /* PRODUCTS */

    .category {
        height: 100px;
        flex-basis: 48%;
    }
    .categoryDetails .card-title { font-size: 1.1rem; }

    #myBasketContentsCol { margin-top: 1rem; }

}

@media (min-width: 992px) {

    #siteLogo { max-width: 86px; }

    .siteLogoLink { margin-right: 1rem; }
    .headerContent .nav a { padding: 0 1rem; }

    /* HOMEPAGE */

    #homepageLogin form { max-width: 70%; }
    .headerContent { justify-content: flex-start; }
    .headerContent .nav.col-12 { margin-right: auto; }

    /* PRODUCTS */
    .mainHeaderLinks { justify-content: flex-start; margin-right: auto; }
    .mainHeaderFilterSearch a { margin-right: 1rem; }

    .deliveryAddressHolder .card { flex-basis: 48%; }

}

@media (min-width: 992px) and (max-width: 1199.98px) {

    .container { max-width: 100%; }

    #adminNav { display: none; }
    .siteAdminLogoLink { margin-right: auto; }

    .rowItem { flex-wrap: wrap; }
    .rowItem.headings { display: none; }
    
    .rowImageDetails { width: 100%; }
    .rowImage { min-width: 100px; }

    .rowPriceQtyAction { width: 100%; }
    .rowPrice { width: 30%; }
    .rowQty { width: 36%; }
    .rowAction { width: 30%; }

    .category {
        height: 140px;
        flex-basis: 49%;
    }

    #myBasketContentsCol { margin-top: 1rem; }

}

@media (min-width: 1200px) {

    .hideOnDesktop { display: none; }
    .siteAdminLogoLink { margin-right: 1rem; }

    .rowImageDetails { width: 55%; }
    .rowImage { min-width: 100px; }

    .rowPriceQtyAction { width: 45%; }
    .rowPrice { width: 30%; }
    .rowQty { width: 36%; }
    .rowAction { width: 30%; }

    .category {
         height: 120px;
         flex-basis: 32%;
    }

}

@media (min-width: 1400px) {

    .rowImageDetails { width: 60%; }
    .rowImage { min-width: 100px; }

    .rowPriceQtyAction { width: 40%; }
    .rowPrice { width: 30%; }
    .rowQty { width: 36%; }
    .rowAction { width: 30%; }

    .category { height: 140px; }

}