:root {
    --Primary-color: #004b98;
    --Primary-color-light: 0, 75, 152, 0.2;
    --Secondary-color: #415464;
    --Secondary-color-light: rgb(65, 84, 100, 0.1);

    --Text-color: #000000;
    --Button-color: #004b98;
    --Button-hover-color: #00458b;

    --Black-color: #000000;
    --White-color: #ffffff;

    --Tertiary1-color: #d39100;
    --Tertiary2-color: #c20430;
    --Tertiary3-color: #648c1c;
    --Tertiary4-color: #96785e;

    --Danger-color: #cf4646;
    --Danger-hover-color: #b93e3e;
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/
/* Base */
/* Typography */
@font-face {
    font-family: "Arial-bold";
    src: url("/-1549945468/Handler/CSSOverride/GetImage/1/Arial-normal-700.TTF");
    font-weight: 700;
}

@font-face {
    font-family: "Arial-black";
    src: url("/979760864/Handler/CSSOverride/GetImage/1/Arial-normal-900.TTF");
    font-weight: 900;
}

h1,
.content h1 {
    font-family: "Arial-black", open-sans, sans-serif;
    font-weight: 900;
}

h2,
h3,
h4,
.content h2,
.content h3,
.content h4 {
    font-family: "Arial-bold", open-sans, sans-serif;
    font-weight: 700 !important;
}

h1.title {
    color: var(--Primary-color) !important;
}

.ict-page-title {
    font-family: open-sans, sans-serif !important;
    font-weight: 700 !important;
    color: var(--Primary-color);
}

.ict-title.title,
.ict-subtitle.subtitle {
    font-weight: 700 !important;
}

/* Buttons */
.catfish-button,
.button {
    font-family: "Arial-bold", open-sans, sans-serif;
    font-family: 700;
}

.catfish-button,
.button,
a {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.catfish-button.is-primary:focus:not(:active),
.catfish-button.is-primary.is-focused:not(:active),
.button.is-primary:focus:not(:active),
.button.is-primary.is-focused:not(:active) {
    box-shadow: unset !important;
}

html:not(.page-dynamicproduct-editor)
    .catfish-button:not(
        .is-danger,
        .is-outlined,
        #deleteall,
        #continueshoppingDummy
    ) {
    background-color: var(--Button-color) !important;

    &:hover,
    &:focus,
    &:active {
        background-color: var(--Button-hover-color) !important;
        box-shadow: unset !important;
    }
}

#deleteall {
    background-color: var(--Danger-color);

    &:hover {
        background-color: var(--Danger-hover-color);
    }
}

#continueshoppingDummy,
.is-outlined {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    border-color: var(--Button-color);
    color: var(--Button-color);

    &:hover {
        border: 2px solid var(--Button-hover-color);
        background-color: var(--Button-hover-color) !important;
        color: #fff;
    }
}

.button.has-style-custom-1 {
    background-color: var(--White-color);
    color: var(--Primary-color);

    &:hover {
        background-color: var(--Secondary-color);
        color: var(--White-color);
    }
}

/* Inputs */
textarea {
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    -ms-border-radius: 12px !important;
    -o-border-radius: 12px !important;
}

/* File */
a.link:not(.has-background-white) {
    color: var(--White-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

    &:hover {
        color: var(--White-color);
        text-decoration: underline;
        text-decoration-color: inherit;
        -moz-text-decoration-color: inherit;
    }
}

/* Base - End */

/*------------------------------------*\
  #Utility Classes
\*------------------------------------*/
html {
    scroll-behavior: smooth;
    scroll-padding: 3rem;
}

h2.is-1.has-style-custom-1 {
    font-family: "Arial-black", open-sans, sans-serif;
}

.title.is-1 {
    font-size: 3.488em;
}

.hero h1.title {
    font-family: "Arial-bold", open-sans, sans-serif;
}

.is-primary.category-hero-section h1.title {
    color: var(--White-color) !important;
}

.has-background-custom-1 {
    background-color: var(--Tertiary1-color);
}
.has-background-custom-2 {
    background-color: var(--Tertiary2-color);
}
.has-background-custom-3 {
    background-color: var(--Tertiary3-color);
}
.has-background-custom-4 {
    background-color: var(--Tertiary4-color);
}

/* Utility Classes -End*/

/*------------------------------------*\
  #Custom Components
\*------------------------------------*/
/* Breadcrumb */
/* Breadcrumb */
.breadcrumb {
    & li {
        font-weight: 600;
    }

    & li:first-child {
        font-weight: 700;
    }

    & a {
        color: var(--Primary-color);
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;

        &:hover {
            color: var(--Secondary-color);
        }
    }
}

/* Product Card */
.listWrapper {
    justify-content: center;
}

.listItem {
    /* Category cards */
    & .small-product-item,
    & .item-box {
        border-top: unset !important;
        border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        -moz-border-radius: 0px !important;
        -ms-border-radius: 0px !important;
        -o-border-radius: 0px !important;
    }

    & .product-title,
    & .category-title {
        transform: unset !important;
        -webkit-transform: unset !important;
        -moz-transform: unset !important;
        -ms-transform: unset !important;
        -o-transform: unset !important;

        & a {
            font-weight: 700;
            color: var(--Primary-color);
        }
    }

    & .category-title {
        background-color: #fafafa;
    }

    & .product-item--content {
        text-align: center;
    }

    & .alternate--prices .flex-container {
        justify-content: center;
        color: var(--Secondary-color);
    }

    /* Product Card */

    & .product-item--info {
        padding-top: 1rem;
    }
}

/* Custom Components -End*/

/*------------------------------------*\
  #Layout
\*------------------------------------*/
/* Header */
/* Navigation */
#main-nav,
#main-navbar.navbar-menu {
    & .is-header-logo {
        height: 2.5rem;
    }

    & a.navbar-item,
    & a.navbar-link {
        color: var(--Secondary-color);
        font-family: "Arial-bold", open-sans, sans-serif;
        font-weight: 700;

        &:hover,
        &:focus {
            color: var(--Button-hover-color);
        }
    }

    & .navbar-link:not(.is-arrowless)::after {
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -o-transition: 0.3s;
        border-color: var(--Secondary-color);
    }

    & .navbar-link:hover:not(.is-arrowless)::after,
    & .navbar-link:focus:not(.is-arrowless)::after {
        border-color: var(--Button-hover-color);
    }

    & .navbar-item:hover .navbar-link:not(.is-arrowless)::after {
        border-color: var(--Button-hover-color);
    }

    /* Dropdown */
    & .navbar-dropdown {
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;

        & a {
            &:hover {
                background-color: var(--Secondary-color-light);
            }
        }
    }

    /* Hover Color of main link when hovering on dropdown */
    .navbar-item:hover .navbar-link {
        color: var(--Button-hover-color);
    }

    & .navbar-end {
        & .button.is-small,
        & .button.is-white {
            background-color: var(--Primary-color);
            color: var(--White-color);
            padding-left: 1.25rem;
            padding-right: 1.25rem;
            transition: 0.3s;
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s;
            -ms-transition: 0.3s;
            -o-transition: 0.3s;

            & i {
                font-size: 1.1rem;
                font-weight: 400;
            }

            & i.fa-shopping-cart::before {
                content: "\f570";
            }

            &:hover,
            &:active,
            &:focus {
                background: var(--Button-hover-color);

                & i {
                    color: var(--White-color);
                }
            }

            &:focus {
                box-shadow: none;
            }
        }

        & .button.is-white {
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        & .button.is-small {
            padding: 1rem;
        }
    }

    @media screen and (max-width: 1500px) and (min-width: 1441px) {
        a.navbar-item {
            padding: 0.5rem 1rem;
        }
    }

    @media screen and (max-width: 1440px) and (min-width: 1301px) {
        .navbar-item,
        .navbar-link {
            font-size: 0.895rem;
        }

        .navbar-link:not(.is-arrowless) {
            padding-right: 1.5rem;
        }

        .navbar-link:not(.is-arrowless)::after {
            right: 0.5rem;
        }
    }

    @media screen and (max-width: 1300px) and (min-width: 1201px) {
        a.navbar-item,
        .navbar-link {
            font-size: 0.895rem;
            padding: 0.5rem 1rem;
        }

        .navbar-end .navbar-item {
            padding: 0.5rem;
        }

        .navbar-link:not(.is-arrowless) {
            padding-right: 1.5rem;
        }

        .navbar-link:not(.is-arrowless)::after {
            right: 0.5rem;
        }

        .basket-link {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }

    @media screen and (max-width: 1200px) and (min-width: 1151px) {
        a.navbar-item,
        .navbar-link {
            font-size: 0.825rem;
            padding: 0.5rem 1rem;
        }

        .navbar-link:not(.is-arrowless)::after {
            right: 0rem;
        }
    }

    @media screen and (max-width: 1150px) and (min-width: 1088px) {
        .navbar-item,
        .navbar-link {
            font-size: 0.825rem;
        }

        a.navbar-item {
            padding: 0.5rem 0.75rem;
        }

        .navbar-link:not(.is-arrowless)::after {
            right: 0;
        }

        .navbar-link:not(.is-arrowless) {
            padding-right: 1rem;
        }

        .navbar-item .navbar-link {
            padding: 0.5rem 0.75rem;
        }
    }
}

@media screen and (max-width: 1087px) {
    .navbar-burger span {
        background-color: var(--Primary-color);
    }

    .navbar-group .navbar-item i {
        color: var(--Primary-color);
    }

    .navbar-group i.fa-shopping-cart::before {
        content: "\f570";
    }
}

@media screen and (max-width: 400px) {
    .navbar-group .navbar-item {
        padding: 0.5rem 1rem;
    }

    #main-nav,
    #main-navbar.navbar-menu {
        & .is-header-logo {
            height: 2rem;
        }
    }
}

& .nav-search-container {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Footer */
.ict-dedicated-footer {
    @media screen and (max-width: 475px) {
        text-align: center;

        & .dedicated-footer-logo {
            display: flex;
            justify-content: center;
        }

        & .ict-social-links {
            justify-content: center;
        }
    }

    & .ict-dedicated-footer-column-1 {
        & img {
            object-fit: contain;
            height: 2.5rem;
        }
    }

    & .ict-dedicated-footer-column-1 .is-flex > a {
        margin-bottom: 1rem;
    }

    & h3 {
        font-size: 1.4444444444444rem;
        font-weight: 700 !important;
        margin-bottom: 0.5rem !important;
    }

    & a {
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: 0.3s;
        text-underline-offset: 0.25rem;

        &:hover {
            text-decoration: underline !important;
        }
    }

    & .footer-copyright {
        & h4 {
            font-size: 80%;
        }
    }
}

/* Homepage */
/* Featured Title */
.homeFeaturedCategoriesTitleRow__title {
    & .title {
        color: var(--Secondary-color);
    }
}

/* Sections */
@media screen and (max-width: 1087px) {
    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

@media screen and (max-width: 767px) {
    section.section.is-large,
    .homeFeaturedProductsWrapper,
    .ict-dedicated-footer {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    section.additional-description-section,
    section.related-products-section,
    .block.block-account-navigation,
    .account-page {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Product Card */
@media screen and (max-width: 1279px) and (min-width: 1088px) {
    & .listItem {
        width: 33.333333% !important;
    }
}

@media screen and (max-width: 475px) {
    & .listItem {
        width: 100% !important;
    }
}

/* Layout - End */

/*------------------------------------*\
  #Admin pages
\*------------------------------------*/
/* Product Landing */
.details-wrapper {
    & h1.title {
        font-family: open-sans, sans-serif;
        font-size: 3.074em;
        font-weight: 600;
        color: var(--Primary-color);
    }

    & .product-variant-line > .block.is-medium:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    & .type_Info.name_Headers {
        & .attributeTitle {
            font-size: 2.074em;
            color: var(--Primary-color);
        }

        & .attribute-item {
            display: none;
        }
    }

    & .name_TurnTimeImage .attributeTitle,
    & .name_TurnTimeImage .infoAttribute {
        display: none;
    }

    & .name_TurnTimeImage .block.is-content-width {
        width: 20%;

        & h5 {
            font-size: 0.75rem;
        }
    }

    & .name_TurnTimeImage .block.is-content-width:nth-child(even) {
        & h5 {
            text-wrap: nowrap;
        }
    }

    & .name_TurnTimeImage .block-column {
        gap: 3rem;
    }

    & .name_TurnTimeImage .attributeHeader {
        margin-bottom: 0;
    }

    & .name_TurnTimeImage .info-column p {
        font-size: 0.875rem;
    }

    .turnaround-time-image {
        padding-bottom: 0 !important;

        & .columns {
            padding: 1rem;
        }
    }
}

@media screen and (min-width: 768px) {
    .attribute:not(
            .name_Headers,
            .name_Qty,
            .name_Size,
            .name_Finished_Size,
            .type_MultilineTextbox,
            .name_Edge_Finishing,
            .name_SizeType,
            .name_Grommets,
            .name_TurnTimeImage
        ) {
        width: 50% !important;
    }
}

@media screen and (max-width: 500px) {
    .name_TurnTimeImage .block-column {
        flex-direction: column;
    }

    .name_TurnTimeImage .block.is-content-width {
        width: 100% !important;
        margin-bottom: 0;
    }
}

/* Login page */
.page-customer-login .catfish-container {
    z-index: 30;
}

.page-customer-login #AfterMainContainer {
    position: relative;
    z-index: 20;
}

.login-page-image .columns {
    display: none !important;
}

.fade-in-section {
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (max-width: 1600px) {
    .login-page-image.has-background-contain {
        background-size: cover;
    }
}

/* Orders Page */
.orders_v2_title {
    color: var(--Primary-color) !important;
    font-size: 2.074em;
    font-weight: 500;
    font-family: "Arial-black", open-sans, sans-serif;
}

/* Admin pages - End */

/*------------------------------------*\
  #Topic pages
\*------------------------------------*/
/* Customer Support */
.support-box-section .box {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    height: 100%;
}

.support-box-section .box .ict-social-links a {
    color: var(--White-color);
    display: flex;
    align-items: center;
    text-decoration: underline;
    text-decoration-color: transparent;
    -moz-text-decoration-color: transparent;
}

.support-box-section .box .ict-social-links li:hover a {
    text-decoration-color: var(--White-color);
    -moz-text-decoration-color: var(--White-color);
}

/* Resources */
a.box {
    background-color: transparent;

    & .image.is-64x64 {
        height: auto;
        width: auto;
        margin-bottom: 0.75rem;
    }

    & > .block {
        font-weight: 700;
    }

    &:hover,
    &:focus {
        box-shadow: unset;
    }
}

.accordion-item .button {
    border-radius: 0;
    background-color: var(--White-color);
    color: var(--Primary-color);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;

    & i {
        color: var(--Primary-color) !important;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
    }

    &:hover {
        background-color: var(--Primary-color);
        color: var(--White-color);

        & i {
            color: var(--White-color) !important;
        }
    }
}

.accordion-item.is-active .button {
    &:hover {
        background-color: var(--White-color);
        color: var(--Primary-color);

        & i {
            color: var(--Primary-color) !important;
        }
    }
}

.ict-accordion .accordion-item.is-active .accordion-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Topic pages - End */

.markup-option .field {
    flex-wrap: wrap;
}

.markup-price .markup-price-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.markup-adjustment .field.has-addons .input.markup-adjustment {
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
}

.markup-adjustment .field .input.markup-adjustment {
    border-radius: 24px;
}

/* Make cart attribute titles bold for better distinction */
.cart--productinfo .rawAttributeInfo__item .title {
    font-weight: bold;
}

/* Condense cart attributes to make viewing the whole basket easier */
.shoppingcart__wrapper
    .cartform
    .cartTableWrapper
    .cart
    tr.cart-item-row
    td.cart--productinfo
    .rawAttributeInfo {
    width: 200%;
}

.rawAttributeInfo__item {
    display: flex;
    white-space: nowrap;
    align-items: baseline;
    margin-bottom: 0;
    margin-bottom: -0.75rem;
}

.rawAttributeInfo__item span.separator {
    margin-left: 0.05rem;
    margin-right: 0.25rem;
}

@media screen and (max-width: 767px) {
    .shoppingcart__wrapper
        .cartform
        .cartTableWrapper
        .cart
        tr.cart-item-row
        td.cart--productinfo
        .rawAttributeInfo {
        max-width: 100%;
    }
}

/* Support for shopping cart show/hide details (attributes) logic */
.shoppingcart__wrapper
    .cartform
    .cartTableWrapper
    .cart
    tr.cart-item-row
    td.cart--productinfo
    .rawAttributeInfo {
    max-height: 0rem;
    opacity: 0;
    transition: 0.2s;
    margin: 0;
}

.shoppingcart__wrapper
    .cartform
    .cartTableWrapper
    .cart
    tr.cart-item-row
    td.cart--productinfo
    .rawAttributeInfo.attributes-shown {
    max-height: 100rem;
    opacity: 1;
}

.shoppingcart__wrapper
    .cartform
    .cartTableWrapper
    .cart
    tr.cart-item-row
    .summaryShortDescription {
    margin: 0 !important;
}

html.page-topic-topicdetails body {
    --removed-body-scroll-bar-size: 0 !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}