@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --chem-navy: #2d3347;
    --chem-green: #98c244;
    --chem-red: #e6554d;
    --chem-blue: #2eb2ff;
    --chem-white: #f8f8f8;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    color: var(--chem-white);
    display: flex;
    flex-direction: column;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    color: var(--chem-white);
}

.content {
    flex: 1 0 auto;
}

.navy-text {
    color: var(--chem-navy);
}

.off-white-text {
    color: var(--chem-white);
}

.green-text {
    color: var(--chem-green);
}

.red-text {
    color: var(--chem-red);
}

.blue-text {
    color: var(--chem-blue);
}

/* Header, Logo and Nav Styling */
.header {
    background-color: var(--chem-navy);
}

.header a {
    color: var(--chem-white);
}

.header a:hover,
.header a:focus {
    color: var(--chem-green);
}

ul {
    list-style-type: none;
}

li {
    list-style-type: none;
}

.logo {
    margin-left: 20px;
    height: 30px;
}

.inner-logo {
    width: 100%;
    height: 100%;
}

.dropdown-menu {
    position: absolute !important;
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28248, 248, 248, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
    color: var(--chem-white);
}

.collapsed {
    color: var(--chem-white);
}

.nav-link .dropdown-toggle .show {
    color: var(--chem-white);
}

.dropdown-menu {
    background-color: var(--chem-green);
    color: var(--chem-navy);
}

.dropdown-toggle,
.show {
    color: var(--chem-white) !important;
}

input[name='q']::placeholder {
    color: #aab7c4;
}

.icon:hover,
.icon:focus {
    color: var(--chem-green);
}

/* Hero Section Styling */

.hero-section {
    background-color: var(--chem-navy);
    height: 450px;
}

.hero-image {
    width: 400px;
}

@media only screen and (max-width: 995px) {
    .hero-image {
        width: 100%;
        min-width: 300px;
    }
}

@media only screen and (max-width: 768px) {
    .hero-image {
        width: 70%;
        min-width: 250px;
    }

    .hero-section {
        height: 600px;
    }
}

.cart-total {
    display: block;
    text-align: center;
    background-color: var(--chem-green);
    color: var(--chem-white);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 14px;
}

.cart-total-sm {
    top: -10px;
    position: relative;
}

.nav-link {
    padding-right: 0 !important;
}

/* Categories section */

.cat-card {
    width: 18rem;
    color: var(--chem-navy);
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(152, 194, 68, 0.5);
    border: 1px solid var(--chem-green);
}

.cat-card-img {
    width: 100%;
    border-radius: 0 0 10px 10px;
}

a:hover,
a:focus {
    color: var(--chem-navy);
}

/* About us section */

.about-us-img-container {
    background: url('/media/about-image.png') no-repeat center center;
    height: 350px;
}

.navy-bg {
    background-color: var(--chem-navy);
}

/* Logo carousel section found on tiktok by user: @tomisloading */

.wrapper {
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    padding: 20px 0;
}

.logo-car {
    height: 100%;
    width: max-content;
    min-width: max-content;
    max-width: 200px;
    max-height: 50px;
    margin: 0 32px;
}

.marquee-container {
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.marquee {
    animation: scroll 25s linear 0s infinite;
}

.marquee-inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
}

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Grow on hover animation */
.grow {
    transition: all .2s ease-in-out;
}

.grow:hover {
    transform: scale(1.1);
    color: #272343;
}

/* Button Styling */

.main-btn {
    background-color: var(--chem-green);
    padding: 10px;
    border-radius: 10px;
    border: 2px solid var(--chem-white);
    color: var(--chem-white);
    transition-duration: 0.4s;
}

.main-btn:hover,
.main-btn:focus {
    background-color: var(--chem-white);
    border: 2px solid var(--chem-green);
    color: var(--chem-green);
}

/* All products Page */

.cover {
    background-color: var(--chem-navy);
    padding: 0 20px 20px 20px;
    height: 100%;
}

hr {
    color: var(--chem-navy);
}

.product-container {
    background-color: var(--chem-white);
}

.product-image {
    height: 100px;
}

.product-name {
    color: var(--chem-green);
    font-weight: bold;
}

.product-name:hover {
    color: var(--chem-green);
    font-weight: bold;
}

.product-price {
    color: var(--chem-navy);
    font-weight: 500;
}

.product-box {
    background-color: var(--chem-white);
    border: 2px solid var(--chem-green);
    border-radius: 5px;
    padding: 10px;
}

/* Product Sorting */

.search-term-output {
    color: var(--chem-white);
    margin-bottom: 0;
}

.sort-box {
    padding: 0 10px;
    margin-bottom: 5px;
}

.custom-select {
    color: var(--chem-navy) !important;
    border: 2px solid var(--chem-green);
    font-weight: 500;
}

.sort-box-border {
    border-width: 2px;
    color: var(--chem-green);
}

/* Product detail page  */

.product-detail-box {
    background-color: var(--chem-white);
    border-radius: 10px;
    padding: 20px;
    color: var(--chem-navy);
    width: auto;
}

@media only screen and (max-width: 992px) {
    .product-detail-box {
        width: 100%;
        height: auto;
    }
}

.product-detail-image {
    height: 220px;
}

.delete-btn {
    border: none !important;
    background-color: var(--chem-white);
}

@media only screen and (max-width: 766px) {
    .product-detail-image {
        width: 60%;
        height: auto;
    }
}

@media only screen and (max-width: 575px) {
    .product-detail-image {
        width: 100%;
        height: auto;
    }
}

/* Buttons */

.quantity-btn {
    background: var(--chem-green) !important;
    color: var(--chem-white) !important;
    border: 1px solid var(--chem-white) !important;
}

.add-to-btn {
    background: var(--chem-green) !important;
    color: var(--chem-white) !important;
    border: 1px solid var(--chem-white) !important;
}

.add-to-btn:hover,
.add-to-btn:focus {
    background: var(--chem-white) !important;
    color: var(--chem-green) !important;
    border: 1px solid var(--chem-green) !important;
}

.keep-shopping-btn {
    background: var(--chem-white) !important;
    color: var(--chem-green) !important;
    border: 1px solid var(--chem-green) !important;
}

.keep-shopping-btn:hover,
.keep-shopping-btn:focus {
    background: var(--chem-green) !important;
    color: var(--chem-white) !important;
    border: 1px solid var(--chem-white) !important;
}

.cancel-btn {
    background: var(--chem-red) !important;
    color: var(--chem-white) !important;
    border: 1px solid var(--chem-white) !important;
}

.cancel-btn:hover,
.cancel-btn:focus {
    background: var(--chem-white) !important;
    color: var(--chem-red) !important;
    border: 1px solid var(--chem-red) !important;
}

/* Bag page  */

.back-link {
    color: var(--chem-white);
}

.back-link:hover {
    color: var(--chem-green);
}

.bag-container {
    background-color: var(--chem-white);
    color: var(--chem-navy);
    border-radius: 5px;
}

.bag-header {
    color: var(--chem-green);
    font-weight: bolder;
}

.update-link,
.remove-item {
    cursor: pointer;
}

/* Message Toasts */

.message-container {
    position: fixed;
    top: 72px;
    right: 15px;
    z-index: 99999999999;
}

.custom-toast {
    overflow: visible;
}

.toast-capper-success {
    height: 3px;
    background-color: var(--chem-green);
}

.toast-capper-error {
    height: 3px;
    background-color: var(--chem-red);
}

.toast-capper-warning {
    height: 3px;
    background-color: #ffcf1d;
}

.toast-capper-info {
    height: 3px;
    background-color: var(--chem-blue);
}

.toast-body {
    color: var(--chem-navy);
}

.shipping-reminder {
    background-color: #ffcf1d;
}

.bag-notification-wrapper {
    height: 150px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Checkout Screen */

.rounded-top-left-1 {
    border-top-left-radius: 10px;
}

.rounded-top-right-1 {
    border-top-right-radius: 10px;
}

.rounded-bottom-left-1 {
    border-bottom-left-radius: 10px;
}

.rounded-bottom-right-1 {
    border-bottom-right-radius: 10px;
}

.blue-text:hover {
    color: var(--chem-green);
}

/* Stripe Stylings */

.StripeElement,
.stripe-style-input {
    margin: 10px 0;
    height: 40px;
    padding: 10px 12px;
    color: var(--chem-navy) !important;
    border: 1px solid var(--chem-green) !important;
    background-color: var(--chem-white);
    box-shadow: 0 1px 3px 0 var(--chem-white);
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus,
.stripe-style-input:focus,
.stripe-style-input:active {
    box-shadow: 0 1px 3px 0 var(--chem-green);
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

.stripe-style-input::placeholder {
    color: #aab7c4;
}

.fieldset-label {
    position: relative;
    right: .5rem;
}

select,
select option {
    color: var(--chem-navy);
}

select:invalid,
select option[value=""] {
    color: #aab7c4 !important;
}

#payment-form .form-control,
#card-element {
    color: var(--chem-navy);
    border: 1px solid var(--chem-green);
    border-radius: 5px;
}

/* Loader */

#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(46, 178, 255, 0.75);
    z-index: 9999;
}

.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    color: var(--chem-white);
    animation: spin 1.5s linear infinite;
}

/* Taken from W3 Schools */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Allauth form change */

.allauth-form-inner-content label:not([for='id_remember']) {
    display: none;
}

.allauth-form-inner-content input::placeholder {
    color: #aab7c4;
}

.allauth-form-inner-content input {
    border-color: var(--chem-green);
    border-radius: 5px;
    margin-top: 15px;
}

.allauth-form-inner-content .form-check-label {
    margin-top: 15px;
}

/* Profile page */

#profile-update-form .form-control {
    color: var(--chem-navy);
}

.order-history-link:hover,
.order-history-link:focus {
    color: var(--chem-green);
}

#id_default_country,
#id_default_country option:not(:first-child) {
    color: var(--chem-navy);
}

#id_default_country option:first-child {
    color: #aab7c4;
}

/* Order history on profile page */

.order-history {
    max-height: 400px;
    overflow-y: auto;
}

/* Product Management Page */

.add-product-form {
    border: 2px solid var(--chem-green);
    margin: 3px 0;
}

#add-product-form .form-group {
    margin-bottom: 5px;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type="file"] {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .custom-control-label::before {
    border-radius: 5px;
    border-color: var(--chem-green);
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
    background-color: var(--chem-green);
    border-color: var(--chem-green);
    border-radius: 5px;
}

/* 404 Page */

.img-404 {
    width: 300px
}

/* Ckeditor */

.cke_chrome {
    border-radius: 5px !important;
    border: 2px solid #98c244 !important;
}

/* Footer styling */

.footer-headings {
    text-decoration: underline;
    text-decoration-color: var(--chem-green);
}

.footer-size {
    font-size: 90%;
}

footer {
    margin-top: auto;
    background-color: var(--chem-navy);
    border-top: 2px solid var(--chem-green);
}

.footer {
    flex-shrink: 0;
}

.footer-logo {
    height: 30px;
}

.footer a:hover {
    color: var(--chem-green);
}

.footer-break {
    border-top: 2px solid var(--chem-green);
}

.footer-link {
    font-size: 150%;
    padding-top: 20px;
    letter-spacing: 20px;
}

/* Contact Page */

.contact-map {
    width: 100%;
    height: 87%;
    outline: 2px solid var(--chem-green);
    border-radius: 5px;
}

/* Newsletter page */

.newsletter-sign-up {
    text-decoration-color: var(--chem-green);
}

/* User Review Section */

.rating>input {
    display: none;
}

.rating {
    display: inline-block;
    border: 0;
}

.rating>label {
    float: right;
}

.rating>label:before {
    display: inline-block;
    font-size: 1.1rem;
    font-family: FontAwesome;
    content: "\f005";
    margin: 0;
    padding: 0.3rem .2rem;
    cursor: pointer;
}

.rating .half:before {
    content: "\f089";
    position: absolute;
    padding-right: 0;
}

input:checked~label,
label:hover~label {
    color: var(--chem-green);
}

.rating-star i {
    color: var(--chem-green) !important;
}

ul.thumb {
    margin: 0 auto;
    padding: 0;
    float: left;
}

ul.thumb li {
    list-style: none;
    margin: 10px;
}

ul.thumb li img {
    width: 80px;
    height: 80px;
    border: 1px solid var(--chem-white);
}

.review-login:hover {
    color: var(--chem-green);
}

.review-card {
    background-color: var(--chem-white);
    padding: 20px;
    border-radius: 5px;
    /* border: 2px solid var(--chem-green); */
    margin-bottom: 20px;
    box-shadow: -8px 7px 5px 0px rgba(152, 194, 68, 0.91);
    -webkit-box-shadow: -8px 7px 5px 0px rgba(152, 194, 68, 0.91);
    -moz-box-shadow: -8px 7px 5px 0px rgba(152, 194, 68, 0.91);
}