/**
 * Custom style for the UGS website
 * This stylesheet is called after the other stylesheets
 * so should have precedence, other specificity notwithstanding
 */

/* Remove default browser styling */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    /*display: none;*/
    -webkit-appearance: none;
}

/* Undo sometimes terrible V13 styling decisions */

.form-control, .form-control:focus {
    background-color: #fff;
    border: 1px solid #ced4da;
}

.frappe-control:not([data-fieldtype='MultiSelectPills']):not([data-fieldtype='Table MultiSelect']).has-error input {
    border: 1px solid var(--red-400);
}

.main-column .page-content-wrapper {
    margin: 1rem 0;
}

.sidebar-item a.active {
    color: unset;
    font-weight: 600;
    background-color: #cfe5fc;
}

/* General styling */

.web-footer {
    background: #404042;
}

li a, a.badge-pill {
    color: #36414c;
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
    color: #161b1f;
}

.page-content-wrapper {
    width: 100%;
}

.btn-light {
    background-color: #eff2f5;
    border-color: #eff2f5;
}

.ugs-btn, .btn.ugs-btn {
    background-color: #ebecf1;
}

.ugs-btn:hover {
    background-color: #cccccc;
}

.input-group-append > .ugs-btn {
    border: 1px solid #ced4da;
}

.thin-short-hr {
    margin: 0 auto 0.5rem 0;
    max-width: 50rem;
    border-top-color: #d1d8dd;
}

.nobr {
    white-space: nowrap;
}

/**
 * Generic styling for search boxes
 */

.ugs-search-form {
    position: relative;
    max-width: 25rem;
}

.ugs-search-input {
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}

.ugs-search-icon {
    position: absolute;
    right: 0;
    top: 48%;
    transform: perspective(1px) translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    cursor: pointer;
}

.ugs-card-border {
    border: 1px solid rgba(0, 0, 0, .125);
}

/**
 * Custom styling for the top nav bar
 */

.navbar {
    background: linear-gradient(to bottom, #ffffff, #f5f5f5);
    border-style: solid;
    border-radius: 0;
    border-width: 0 0 0.0625rem 0;
    border-color: #a9a9a9;
    padding: 0.5rem 1rem;
}

.navbar-brand img {
    margin: 0.25rem 0;
    max-height: 2.5rem;
    height: auto;
}

.navbar-contact {
    margin: 0 1rem 0 0;
    font-size: 0.875rem;
}

.navbar-contact p {
    margin-bottom: 0;
    white-space: nowrap;
    line-height: 1.4;
}

.navbar-collapse {
    flex-grow: 0;
}

@media (max-width: 767.98px) {
    .ugs-nav-extra {
        width: 100%;
    }
}

/**
 * -- Search bar styling
 */

.ugs-nav-search {
    position: relative;
    flex-grow: 1;
    max-width: 25rem;
}

.ugs-nav-search > input {
    padding-right: 1.875rem;
}

/**
 * Styles for the sidebar
 */

/* Fixed width sidebar above 616px */
.ugs-sidebar {
    flex: 0 0 200px;
    /* border-right: 1px solid #d1d8dd; */
    padding: 0;
}

.ugs-main-row {
    flex-wrap: nowrap;
}

/* Full width on small screens */
@media (max-width: 615px) {
    .ugs-sidebar {
        flex: none;
        width: 100%;
        font-size: 16px;
        border-right: none;
        border-top: 1px solid #d1d8dd;
    }

    .ugs-main-row {
        flex-wrap: wrap;
    }
}

.ugs-sidebar-block-grid {
    /* Flexbox system for wrapping rows on 400px-615px screens */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #003300;
}

.ugs-sidebar-block {
    /* Normally the blocks fill the sidebar */
    width: 100%;
}

@media (max-width: 615px) and (min-width: 400px) {
    /* For the 400px to 615px width, double up the sidebar */
    .ugs-sidebar-block {
        width: 50%;
    }

    .ugs-sidebar-block.sbar-root {
        /* Except the first entry ('All Products' or equivalent) */
        width: 100%;
    }
}

/**
 * -- Styling of the category links
 */

.ugs-sidebar-row {
    display: table;
    width: 100%;
    border-bottom: 0.0625rem solid #404042;
    border-right: 0.0625rem solid #404042;
    line-height: 1.2rem;
    font-weight: 500;
}

.ugs-sidebar-collapse {
    border-bottom: 0.125rem solid black;
}

.ugs-sidebar-row > a {
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    text-decoration: none;
}

.ugs-sidebar-item {
    text-align: left;
    width: 100%;
    height: 3em;
    padding: 0.0625rem 0.25rem;
}

.ugs-sidebar-chevron {
    text-align: center;
    min-width: 3em;
    border-left: 0.0625rem solid #404042;
}

.ugs-sidebar-item.active {
    font-weight: bolder;
}

/**
 * -- Colouring and styling for the sidebar rows
 * Includes an 'active'/hover lighter version
 * The chevron boxes are also set to the higher level when they are
 * expanded
 */

.sbar-row-0 {
    background-color: #b1c75a;
    font-size: 1;
}

.sbar-row-0:hover,
.sbar-row-0.active {
    background-color: #c3d480;
}

.sbar-row-1,
.sbar-row-0[aria-expanded=true] {
    background-color: #6c6c6c;
    font-size: 0.875rem;
}

.sbar-row-1:hover,
.sbar-row-1.active,
.sbar-row-0[aria-expanded=true]:hover {
    background-color: #868686;
}

.sbar-row-2,
.sbar-row-1[aria-expanded=true] {
    background-color: #b1c75a;
    font-size: 0.875rem;
}

.sbar-row-2:hover,
.sbar-row-2.active,
.sbar-row-1[aria-expanded=true]:hover {
    background-color: #c3d480;
}

.sbar-row-3,
.sbar-row-2[aria-expanded=true] {
    background-color: #cc0033;
    font-size: 0.875rem;
}

.sbar-row-3:hover,
.sbar-row-3.active,
.sbar-row-2[aria-expanded=true]:hover {
    background-color: #ff3366;
}

.sbar-row-4,
.sbar-row-3[aria-expanded=true] {
    background-color: #003333;
    font-size: 0.875rem;
}

.sbar-row-4:hover,
.sbar-row-4.active,
.sbar-row-3[aria-expanded=true]:hover {
    background-color: #336666;
}

.sbar-dd {
    font-size: 1rem;
    transition: transform 0.3s ease-in-out;
}

a[aria-expanded=true] .sbar-dd {
    transform: scale(1, -1);
}

/**
 * -- Styling of the filter box
 */

.ugs-filter-box {
    /* Holds the filter options on category pages */
    border: 0.0625rem solid #d1d8dd;
    padding: 0 0.25rem 0.25rem 0.25rem;
}

.ugs-filter-box button.disabled {
    /* Strikethrough text in disabled buttons */
    text-decoration: line-through;
}

.ugs-filter-box p,
.ugs-filter-box button,
.ugs-filter-box input {
    font-size: 0.875rem;
}

.ugs-filter > .active,
.ugs-filter.active,
.ugs-filter > .active:focus,
.ugs-filter.active:focus {
    /* Bold font, yellow inset shadow when any option is selected */
    box-shadow: 0 0 0.315rem 0.125rem yellow inset !important;
    font-weight: bold !important;
}

.ugs-filter button {
    /* Style the button for the drop-down */
    width: 100%;
    text-align: left;
}

.ugs-filter button .caret {
    /* Move caret to right hand side */
    position: absolute;
    top: calc(50% - 0.0625rem);
    right: 0.75rem;
}

.ugs-filter > ul {
    /* Dark background for filter box */
    background-color: #cbcbff;
    padding: 0.25rem 0;
}

.ugs-filter > ul > li {
    /* Smooth transition of background colour */
    background-color: #ffffff;
    transition: background-color 0.4s ease;
}

.ugs-filter > ul > li > label {
    /* Style each checkbox entry (box and text, full-width) */
    width: 100%;
    padding: 0.1875rem 0.25rem 0.1875rem 0;
    font-size: 0.75rem;
    font-weight: normal;
    color: #333;
    white-space: nowrap;
    margin: 0;
}

.ugs-filter > ul > li > label > input {
    /* Position the checkboxes */
    margin: 0 0.3125rem;
    top: 0.125rem;
    position: relative;
}

.ugs-filter > ul > li.active {
    /* Style ticked checkbox entries (li) */
    background-color: #cbcbff;
}

.ugs-filter > ul > li.active > label {
    /* Style ticked checkbox entries (label) */
    font-weight: bold;
}

.ugs-filter > ul > li:hover,
.ugs-filter > ul > li:focus {
    background-color: #dddddd;
}

.ugs-filter > ul > li.active:hover,
.ugs-filter > ul > li.active:focus {
    background-color: #e1e1e1;
}

.ugs-price-filter > input {
    display: inline-block;
    width: 3.75rem;
    padding-left: 0.375rem;
    margin-left: 0.125rem;
    margin-right: 0.25rem;
}

.ugs-filter-box > .btn-secondary {
    /* go back to Bootstrap */
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.ugs-filter-box > .btn-secondary:not([disabled]):hover {
    /* go back to Bootstrap */
    background-color: #5a6268;
    border-color: #545b62;
}

/**
 * Styles for the footer
 */

.web-footer {
    padding: 0;
}

.web-footer hr {
    margin-bottom: 0.625rem;
    margin-top: 0.625rem;
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* Dark footer styling - text to shades of white (and smaller font-size) */
.web-footer p,
.web-footer li,
.web-footer a {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.web-footer h3,
.web-footer h4,
.web-footer h5,
.web-footer h6 {
    color: rgba(255, 255, 255, 0.6);
}

/* For email obfuscation in the footer */
.cryptedmail::after {
    content:
        attr(data-name) "@"
        attr(data-domain) "."
        attr(data-tld);
}

/**
 * -- Icon footer - small rounded icons and captions
 */

.icon-footer-container {
    padding-top: 1.5rem;
    padding-bottom: 0.875rem;
}

@media (max-width: 768px) {
    .icon-footer-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

.icons-footer {
    margin-bottom: 0;
}

.icons-footer > img {
    display: block;
    width: 5.5rem;
    margin-bottom: 0.2rem;
}

.icons-footer > h6 {
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.8);
}

.icons-footer > p {
    margin-top: 0;
    margin-bottom: 0;
}

.copyright-footer {
    margin-top: 0.625rem;
    min-height: 2em;
}

.contact-icons i {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
}

.contact-icons > a {
    text-decoration: none;
}

.footer-margin-tb {
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.subscribe-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
}

.footer-subscribe-button {
    margin-left: -0.125rem;
}

/**
 * Styling for the item group generator pages
 */

.ugs-search-term {
    /* Styling for search term in header */
    font-weight: bold;
}

.ugs-category-search {
    flex-grow: 0.4;
    position: relative;
    max-width: 25rem;
}

.ugs-category-search > input {
    width: 100%;
    outline: none;
    border: none;
    border-bottom: 0.0625rem solid #d1d8dd;
}

.ugs-dropdown {
    /* Dropdown menu for products per page */
    display: inline-block;
    padding-left: 0.375rem;
}

.ugs-dropdown > button {
    /* Reduce font size and padding on dropdown button */
    font-size: 0.875rem;
    padding: 0.25rem 0.625rem;
}

.ugs-page-links-container {
    /* Contains links for different pages of item pagination */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ugs-page-links-container .badge-pill {
    /* Override changes to BS */
    background-color: #eeeeee;
    padding: 0.15rem 0.35rem;
}

.ugs-page-links > a:hover,
.ugs-page-links > a:active,
.ugs-page-links > a:focus {
    /* Override changes to BS */
    color: #36414c;
    background-color: #cccccc;
}

.ugs-page-links {
    /* Links to different pages of item pagination */
    flex: 0 1 auto;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: center;
    line-height: 1.8rem;
}

.ugs-page-links-prev-next {
    /* Prev/next buttons for item pagination */
    flex: 0 0 auto;
}

.ugs-items {
    /* Container for flex items */
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.625rem;
    margin-right: -0.625rem;
    justify-content: center;
}

.ugs-item {
    /* Link for each item as a flex item */
    /* 'max-height' and 'width' set in template */
    flex: 1 0 auto;
    margin: 0.625rem;
    border: 0.0625rem solid #d1d8dd;
    position: relative;
    overflow: hidden;
    justify-content: center;
    color: unset;
}

.ugs-item::after {
    /* Fade-out gradient for overflowing box */
    /* 'top' set in template */
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    pointer-events: none;
    background-image:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1) 90%
        );
    width: 100%;
    height: 4rem;
}

.ugs-item:link {
    text-decoration: none;
}

.ugs-item:visited {
    text-decoration: none;
}

.ugs-item.ugs-spares-repairs {
    border-color: rgba(220, 53, 69, 0.45);;
}

.ugs-item > p.ugs-spares-repairs {
    position: absolute;
    top: 0;
    padding: 0.125rem 0.25rem 0.25rem 0.25rem;
    background-color: rgba(255, 255, 255, 0.7);
    color: rgba(220, 53, 69, 1);
    margin: 0;
    font-weight: 600;
}

.ugs-spares-repairs.ugs-left {
    transform-origin: top left;
    left: 0;
    transform: rotate(-90deg) translateX(-100%);
}

.ugs-spares-repairs.ugs-right {
    transform-origin: top right;
    right: 0;
    transform: rotate(90deg) translateX(100%);
}

.ugs-item > img {
    /* 'max-width' and 'max-height' set in template */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ugs-item > p {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
}

.ugs-item-name {
    font-weight: bold;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.ugs-item-code {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 80%;
}

.ugs-item-description {
    text-align: justify;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-height: 2em;
    font-size: 0.875rem;
}

/**
 * Styling for the item pages
 */

.product-container {
    box-shadow: initial;
}

.ugs-item-header {
    text-transform: uppercase;
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
    font-size: 1.125rem;
}

/**
 * -- Item specification table styling
 */

.item-website-specification .table {
    width: initial;
    max-width: 50rem;
}

.item-website-specification td {
    border-top: 1px solid #d1d8dd !important;
    font-size: 0.875rem;
}

.ugs-ws-table td {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ugs-ws-table td:first-child {
    width: 30%;
}

.ugs-condition-table td:first-child,
.ugs-condition-table th:first-child {
    /* Hide the first row */
    display: none;
}

.ugs-condition-table td:first-child {
    /* Centre-align the first row */
    text-align: center;
}

.ugs-condition-table td.td-highlight {
    background-color: #f4d03f;
    font-weight: bold;
}

/**
 * -- Slideshow styling
 */

.ugs.carousel-inner {
    cursor: zoom-in;
}

@media (min-width: 616px) {
    .slide-image {
        /* Override default of 'relative' since we add a 3:4 padding block */
        position: absolute;
        max-height: 100%;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        /* crop image to fit */
        object-fit: contain;
    }

    .carousel-item > div::after {
        /* set 4:3 aspect ratio */
        content: '';
        display: block;
        padding-bottom: 75%;
        height: 0;
        background: black;
    }
}

.ugs.carousel-control-prev,
.ugs.carousel-control-next {
    /* Trim the carousel bar width */
    width: 10%;
}

.ugs.carousel-control-prev {
    /* Gradient bars */
    opacity: 1;
    background-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.0001) 100%
        );
}

.ugs.carousel-control-next {
    /* Gradient bars */
    opacity: 1;
    background-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.0001) 0%,
            rgba(0, 0, 0, 0.25) 100%
        );
}

@media (min-width: 992px) {
    .ugs.carousel-control-prev,
    .ugs.carousel-control-next {
        /* Left-right arrow controls initially invisible on larger screens */
        opacity: 0;
        transition: 0.3s;
        font-size: 2rem;
        text-shadow: 0.0625rem 0.125rem 0.25rem rgba(0, 0, 0, 0.8);
    }
}

.ugs.carousel:hover .carousel-control-prev,
.ugs.carousel:hover .carousel-control-next {
    /* Display gradient bars and arrows ONLY on hover */
    opacity: 1;
}

.ugs.carousel-caption {
    /* Stop the caption interfering with the mouseover zoom */
    pointer-events: none;
}

@media (min-width: 992px) {
    .ugs.carousel-indicators {
        /* Only display indicators on small screens */
        display: none;
    }
}

.ugs-carousel-thumbnails {
    /* A flex container for the thumbnails */
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    cursor: pointer;
    justify-content: center;
    /* correct for thumbnail borders */
    margin: 0.0625rem 0 0 0.0625rem;
}

@media (max-width: 615px) {
    .ugs-carousel-thumbnails {
        /* Only display thumbnails on larger screens */
        display: none;
    }
}

.ugs-carousel-thumbnails > li {
    /* We give the thumbnails a forced white background, then use opacity to set
    * a brightening effect on hover */
    background-color: white;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    width: calc(25% + 0.046875rem);  /* 0.75 px */
    position: relative;
    border: 0.0625rem solid black;
    /* collapse the borders */
    padding-left: 0.0625rem;
    padding-top: 0.0625rem;
    margin-left: -0.0625rem;
    margin-top: -0.0625rem;
}

.ugs-carousel-thumbnails > li.active {
    border: 0.125rem solid black;
}

.ugs-carousel-thumbnails > li > img:hover {
    opacity: 0.3;
}

.ugs-carousel-thumbnails > li::after {
    /* set 4:3 aspect ratio */
    content: '';
    display: block;
    padding-bottom: 75%;
    height: 0;
}

.ugs-carousel-thumbnails img {
    /* reposition image inside aspect ratio box */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* crop image to fit */
    object-fit: cover;
}

.ugs-carousel-thumbnails > li.active img {
    /* Active thumbnail */
    cursor: initial;
    opacity: 0.3;
}

/* Media queries to change number of thumbnails per line */
@media (min-width: 800px) {
    .ugs-carousel-thumbnails > li {
        width: calc(20% + 0.8px);
    }
}

@media (min-width: 900px) {
    .ugs-carousel-thumbnails > li {
        width: calc(16.6666% + 0.83333px);
    }
}

@media (min-width: 992px) {
    .ugs-carousel-thumbnails > li {
        width: calc(25% + 0.75px);
    }
}

@media (min-width: 1350px) {
    .ugs-carousel-thumbnails > li {
        width: calc(20% + 0.8px);
    }
}

@media (min-width: 1600px) {
    .ugs-carousel-thumbnails > li {
        width: calc(16.6666% + 0.8333px);
    }
}

@media (min-width: 1900px) {
    .ugs-carousel-thumbnails > li {
        width: calc(14.2857% + 0.8571px);
    }
}

@media (min-width: 2200px) {
    .ugs-carousel-thumbnails > li {
        width: calc(12.5% + 0.875px);
    }
}

@media (min-width: 2600px) {
    .ugs-carousel-thumbnails > li {
        width: calc(11.1111% + 0.8888px);
    }
}