*, *::after, *::before {
    box-sizing          : border-box;
    -moz-box-sizing     : border-box;
    -webkit-box-sizing  : border-box;
}

html, body {
    text-size-adjust: none;
}

html {
    height          : 100%;
    scroll-behavior : smooth;
}

body, p, ul {
    margin  : 0;
    padding : 0;
}

body {
    display         : flex;
    font-size       : 14px;
    overflow-x      : hidden;
    line-height     : 1.7;
    font-family     : 'Montserrat', "Open San";
    flex-direction  : column; 
}

a, ul, li {
    color           : black;
    list-style      : none;
    list-style-type : none;
    text-decoration : none;
}

input, select, textarea, button {
    cursor          : pointer;
    font-size       : 14px;
    border-width    : 0;
    font-family     : 'Montserrat', "Open San";
}
    input:disabled, textarea:disabled, select:disabled {
        background-color : #f7f7f7;
    }

textarea {
    resize : none;
    height : 5rem;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline : none;
}

form {
    width : inherit;
}

table {
    border-collapse : collapse;
}

thead {
    text-align : left;
}

nav {
    min-width        : var(--nav-width);
    max-width        : var(--nav-width);
    transition       : all 0.3s;
    background-color : var(--clr-purple);
}

header {
    padding          : .8rem 2rem;
    background-color : var(--clr-white);
}

main {
    flex    : 1;
    width   : 100%;
    padding : 0 2rem;
}

content {
    display     : block;
    min-height  : calc(100vh / 1.5);
}

/* --------------------------------
    Page Structure
-------------------------------- */
/*#region --- Page Structure */

.prev-select {
    user-select             : none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    -ms-user-select         : none; /* Internet Explorer/Edge */
    -moz-user-select        : none; /* Old versions of Firefox */
    -webkit-user-select     : none; /* Safari */
    -webkit-touch-callout   : none; /* iOS Safari */
}

#page_title {
    font-size : 28px;
}

.flex-cont {
    width       : 100%;
    display     : flex;
    flex-wrap   : wrap;
    align-items : stretch;
}

.main-div {
    width           : 100%;
    min-height      : 100vh;
    flex-direction  : column;
}

.title-sty {
    color            : var(--clr-white); 
    margin           : 0 -3rem;
    padding          : 3em;
    background-color : var(--clr-dgreen);
}

.a-ul {
    list-style  : disc;
    margin-left : 1rem;
}

.margin-sty {
    margin : 2rem 0;
}
    .margin-sty > p, .margin-sty > div > p {
        padding-bottom : 1.5rem;
    }

form label.lbl {
    display         : block;
    font-weight     : bold;
    padding-bottom  : 1.5rem;
}
    form label.lbl input {
        width       : 1.5rem;
        height      : 1.2rem;        
        position    : absolute;
    }

.content-wrapper {
    gap             : 2rem;
    width           : inherit;
    display         : flex;
    flex-wrap       : wrap;
}

.scroll-to-top {
    color               : #fff;
    bottom              : 20px;
    z-index             : 1;
    opacity             : .2;
    padding             : 1rem 1.5rem;
    position            : fixed;
    place-self          : end;
    margin-right        : 10px;
    border-radius       : 100px;
    background-color    : #000;
    transition          : background-color .2s ease-in, color .2s ease-in, opacity .2s ease-in;
}
    .scroll-to-top:hover {
        color               : var(--clr-purple);
        opacity             : 1;
        background-color    : var(--clr-yellow);
    }

.in-search-cont {
    width           : min(100%,700px);
    display         : flex;
    margin-bottom   : 2rem;
}

.in-search-input {
    width: min(100%,700px);
    padding: 12px 24px;
    background-color: blue;
    transition: transform 250ms ease-in-out;
    background-color: transparent;
    border-radius: 1rem;
    border: 1px solid var(--clr-lgrey);
    transition: all 250ms ease-in-out;
    backface-visibility: hidden;
    border-right : none;
    border-top-right-radius : 0;
    border-bottom-right-radius : 0;
}

.in-search-btn {
    width: 3rem;
    padding : 12px 12px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% center;
    background-color: transparent;
    border: 1px solid var(--clr-lgrey);
    border-left: 0;
    transition: all 250ms ease-in-out;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.in-search-input:hover, .in-search-input:focus,
.in-search-input:hover + .in-search-btn, .in-search-input:focus + .in-search-btn {
    padding                 : 12px 0;
    outline                 : 0;
    border                  : 1px solid transparent;
    border-left             : 0 transparent;
    border-right            : 0 transparent;
    border-bottom           : 1px solid var(--clr-purple);
    border-radius           : 0;
    background-position     : 5% center;
}

.pad-0x5    { padding : .5rem; }
.pad-1x     { padding : 1rem; }
.pad-1x5    { padding : 1.5rem; }

.width-100x { width : 100% !important; }
.width-70x  { width : 70%; }
.width-60x  { width : 60%; }
.width-50x  { width : 50%; }
.width-40x  { width : 40%; }
.width-30x  { width : 30%; }
.width-10x  { width : 10%; }

.pos-r { position : relative; }

.ta-c { text-align : center; }
.ta-r { text-align : right; }

.display-n { display : none; }

.contact-us-cont > span {
    display : block;
}

.contact-us-cont > b {
    display         : block;
    font-size       : 18px;
    margin-bottom   : .5rem;
}

.border {
    outline : 1px solid var(--clr-lgrey);
}

.ol-decimal > li { 
    list-style  : decimal;
    margin-left : 1rem;
}

.ol-decimal.useful-links > li {
    width : fit-content;
}

.ol-alpha > li { 
    list-style  : lower-alpha; 
    margin-left : 1rem;
}

.header-underline {
    width           : fit-content;
    border-bottom   : 3px solid var(--clr-dgreen);
}

.alert-message {
    width               : 50%;
    border              : 1px solid var(--clr-red);
    display             : inline-block;
    padding             : .5rem;
    background-color    : #f2dede;
}
    .alert-message span,
    .alert-message strong {
        display : block;    
    }

.header-login-btn, .search-btn, .btn {
    height              : fit-content;
    padding             : .7rem 1rem;
    transition          : all .35s ease-in;
    font-weight         : 600;
    border-radius       : .3rem;
    background-color    : var(--clr-yellow);
}
    .header-login-btn i {
        display : none;
    }

    .btn:hover, .btn:focus, .btn:active {
        color               : white;
        background-color    : var(--clr-blue);
    }

.webmessage-notification {
    color            : white;
    padding          : 1rem 1.5rem;
    background-color : #A6051A;
}
    .webmessage-notification.high-alert {
        gap     : 1rem;
        display : flex;
    }
        .webmessage-notification.high-alert > i {
            line-height : 1.5;
        }

@media screen and (max-width: 506px) {
    main { padding : 0 1.5rem; }

    .content-wrapper { justify-content : center; }

    .ol-decimal, .ol-alpha { padding-left : 1rem; }

    .title-sty {
        margin  : 0 -1.5rem;
        padding : 1.5rem;
    }

    .margin-sty > p {
        overflow    : hidden;
        word-break  : break-word;
    }

    .alert-message {
        width           : 100%;
        margin-bottom   : 1rem;
    }

    .responv-m { width : 100% !important; }

    .header-login-btn i {
        display : initial;
    }

    .header-login-btn span {
        display : none;
    }
}

@media screen and (max-width : 768px) {
    .responv { width: 100% !important; }
}

/*#endregion*/

/*#region ------ Breadcrumb */

/*.breadcrumb {
    max-height: 2.5em;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}
    .breadcrumb a {
        display: block;
        padding: 0.7em 1.4em;
    }

    .breadcrumb:target {
        max-height: 20em;
    }

        .breadcrumb:target .breadcrumb-link {
            opacity: 1;
            position: static;
            visibility: visible;
        }

        .breadcrumb:target .breadcrumb--active:after {
            content: none;
        }

        .breadcrumb:target .breadcrumb-close:after {
            visibility: visible;
        }

.breadcrumb-link {
    color: #6ddab8;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    z-index: 0;
}

.breadcrumb--active {
    color: #1EC692;
    font-weight: 700;
    position: relative;
}

    .breadcrumb--active:after {
        content: '\25BE';
        position: absolute;
        right: 22px;
        z-index: 1;
    }

.breadcrumb-close {
    position: absolute;
    right: 0;
    bottom: 0;
    visibility: hidden;
    z-index: 10;
}

    .breadcrumb-close:after {
        content: '\25B4';
        color: #1EC692;
    }

@media (min-width: 700px) {
    .breadcrumb a {
        display: inline;
        padding: 0.5em;
    }

    .breadcrumb-link {
        display: inline;
        opacity: 1;
        visibility: visible;
        position: static;
    }

        .breadcrumb-link:after {
            content: '';
            margin-left: 0.5em;
            margin-right: -0.75em;
        }

    .breadcrumb--active {
        pointer-events: none;
    }

        .breadcrumb--active:after {
            content: none;
        }

    .breadcrumb-close {
        display: none !important;
    }
}*/

/*#endregion*/

/*#region ------ Hidden Content Box */

.faq {
    position        : relative;
    flex-direction  : column;
}

aside ul li {
    border-bottom : 1px solid lightgrey;
}

.ca-lst {
    color           : var(--clr-white);
    display         : flex;
    padding         : 1rem 24px;
    position        : relative;
    font-weight     : bold;
    background-color: var(--clr-dgreen);
}

.categories {
    margin-bottom : 2rem;
}

.categories a {
    padding                 : 0 1.75rem 0 1rem;
    display                 : block;
    position                : relative;
    overflow                : hidden;
    line-height             : 50px;
    white-space             : nowrap;
    text-overflow           : ellipsis;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
}
    .categories a::before, .categories a::after { /* + icon on the right - mobile only */
        inset               : 50% 1rem auto auto;
        width               : 10px;
        height              : 1px;
        display             : inline-block;
        position            : absolute;
        background-color    : #7f868e;
    }

    .categories a::after {
        transform : rotate(90deg);
    }

    .categories a.ws {
        white-space     : normal;
        line-height     : inherit;
        padding-top     : .5rem !important;
        padding-bottom  : .5rem !important;
    }

.selected {
    color: var(--clr-blue) !important;
}

.selected::after, .selected::before,
.plus-icon::after, .plus-icon::before {
    content : '';
}

.ca-layout {
    inset                       : 0 0 auto auto;
    width                       : 100%;
    height                      : 100%;
    z-index                     : 1;
    padding                     : 0;
    position                    : fixed;
    overflow                    : auto;
    transform                   : translateZ(0) translateX(100%);
    transition                  : transform .3s;
    background-color            : var(--clr-white); /* Bg-color - mobile only */
    backface-visibility         : hidden;
    -webkit-overflow-scrolling  : touch;
}
    .ca-layout.slide-in {
        transform : translateZ(0) translateX(0%);
    }

.ca-grp { /* hide group not selected */   
    display : none;
}
    .ca-grp.selected {
        display : block;
    }

    .ca-grp .ca-title {
        margin      : 1em 0;
        background  : transparent;
        box-shadow  : none;
    }
        .ca-grp .ca-title:hover {
            box-shadow : none;
        }

.hidden-content-cont {
    width       : 100%;
    border      : none;
    padding     : 0;
    position    : relative;
    transition  : .35s color ease-in-out;
    text-align  : left;
    background  : none;
    font-family : inherit;
}
    .hidden-content-cont[aria-expanded='true'] .content-header,
    .hidden-content-cont[aria-expanded='true'] .expand-icon {
        color           : var(--clr-dgreen);
        font-weight     : 600;
        border-bottom   : 1px solid var(--clr-dgreen);
    }

    .hidden-content-cont[aria-expanded='true'] + .hidden-content{
        opacity     : 1;
        padding     : 24px 30px;
        max-height  : fit-content;
        transition  : all 200ms linear;
        will-change : opacity, max-height;
    }

    .hidden-content-cont[aria-expanded='true'] .expand-icon::after {
        width : 0; /* Change + to - */
    }

    .hidden-content-cont[aria-expanded='true'] .expand-icon::before {
        background-color : var(--clr-green);
    }

.content-header {
    left        : 24px;
    width       : calc(100% - 48px); /* Deduct both left & right */
    color       : black;
    display     : block;
    padding     : 24px 72px 24px 0;
    position    : relative;
    font-size   : 14px;
    transition  : color .35s ease-in-out;
}

.expand-icon {
    inset           : 22px 0 auto calc(100% - 40px);
    width           : 22px;
    height          : 22px;
    border          : 1px solid;
    position        : absolute;
    border-radius   : 22px;
}

    .expand-icon::before, .expand-icon::after {
        content     : '';
        display     : block;
        position    : absolute;
        background  : black;
    }
        .expand-icon::before {
            inset   : 9px 5px auto auto;
            width   : 10px;
            height  : 2px;
        }

        .expand-icon::after {
            inset   : 5px 9px auto auto;
            width   : 2px;
            height  : 10px;
        }

.hidden-content{
    opacity      : 0;
    max-height   : 0;
    overflow     : hidden;
    transition   : opacity 200ms linear, max-height 200ms linear;
    will-change  : opacity, max-height;
    padding-left : 30px;
}

/*#region --------- CLOSE BUTTON - MOBILE ONLY */

.cd-close-panel { 
    inset       : 1rem -100% auto auto;
    width       : 2.5rem;
    height      : 2.5rem;
    display     : block;
    z-index     : 2;
    position    : fixed;
    overflow    : hidden;
    transform   : translateZ(0);
    transition  : right 0.4s;
    text-indent : 100%;
    white-space : nowrap;
}
    .cd-close-panel::before, .cd-close-panel::after {
        content             : '';
        position            : absolute;
        
        inset               : 1rem auto auto .5rem;
        width               : 1.5rem;
        height              : 3px;       
        display             : inline-block;
        background-color    : var(--clr-green);
    }

    .cd-close-panel::before {
        transform : rotate(45deg);
    }

    .cd-close-panel::after {
        transform : rotate(-45deg);
    }

    .cd-close-panel.move-left {
        right : 2%;
    }

/*#endregion */

@media screen and (max-width: 480px) {
    .ca-layout {
        padding : 0 5% 1em;
    }

    .categories.static a {
        padding : 0 24px;
    }

    .categories a {
        padding : 0;
    }

    .ca-grp .ca-title {
        margin-top : 4rem;
    }

    .ca-layout.static {
        padding             : 0;
        position            : static;
        transform           : none;
        background-color    : initial;
    }

    .content-header {
        left: 0;
        width: 100%;
    }

    .hidden-content-cont[aria-expanded='true'] + .hidden-content{
        padding: 24px 10px;
    }

    .faq-content{
        display : none;
    }

    .no-js .faq-content{
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .cd-close-panel {
        display : none;
    }

    .content-visible .content-header {
        color: #00A8E9;
    }
        .content-visible .content-header::before {
            transform: rotate(-45deg);
        }

        .content-visible .content-header::after {
            transform: rotate(45deg);
        }

    .categories a {
        padding     : 0 24px;
        transition  : background 0.2s, padding 0.2s;
    }
        .categories a::before, .categories a::after {
            display : none;
        }
    
    .ca-layout {
        height          : auto;
        position        : static;
        overflow        : visible;
        transform       : translateZ(0) translateX(0);
        background      : transparent;
        padding-left    : 1rem;
    }

    .ca-grp { /* All groups visible */        
        display : block;
    }
        .ca-grp > li {
            box-shadow      : 0 1px 2px rgba(0, 0, 0, 0.08);
            transition      : box-shadow 0.2s;
            background      : #ffffff;
            margin-bottom   : 6px;
        }
            .ca-grp > li:hover {
                box-shadow: 0 1px 10px rgba(108, 125, 142, 0.3);
            }

        .ca-grp .ca-title {
            margin : 2em 0 1em;
        }
}

@media screen and (min-width: 1024px) {
    .categories {
        width   : 240px;
        z-index : 2;
        position: absolute;
    }
        .categories a::before { /* Rect on the left visible for the selected item */                       
            inset                       : 0 auto 0 0;
            width                       : 20px;
            height                      : 100%;
            opacity                     : 0;
            display                     : block;
            transition                  : opacity 0.2s;
            background-color            : var(--clr-blue);
            border-top-right-radius     : 10px;
            border-bottom-right-radius  : 10px;
        }

        .categories .selected::before {
            opacity : 1;
        }

        .categories.is-fixed { /* Top & Left value assigned in jQuery */           
            position : fixed;
        }

    .ca-layout {        
        width        : 100%;
        padding-left : 285px;
    }
}

@media (hover) {
    .categories a:hover {
        color : var(--clr-blue);
    }

    .hidden-content-cont:hover .expand-icon::before,
    .hidden-content-cont:hover .expand-icon::after,
    .hidden-content-cont[aria-expanded='true'] .expand-icon::before {
        background : var(--clr-green);
    }

    .ca-li-focus {
        box-shadow : 0 1px 10px rgba(108, 125, 142, 0.3) !important; /* Shadow after container is clicked */
    }

    .hidden-content-cont:hover p,
    .hidden-content-cont:hover .expand-icon {
        color   : var(--clr-dgreen) !important;
        cursor  : pointer;
    }
}

/*#endregion */

/*#region ------ Input Style */

.select-sty, .input-sty {
    width               : 80%;
    border              : 1px solid #ccc;
    display             : block;
    padding             : .5rem 1rem;
    font-size           : 14px;
    border-radius       : 4px;
    margin-bottom       : 1.5rem;
    background-color    : #fff;
}
    .select-sty:focus, .input-sty:focus {
        outline : 2px solid var(--clr-yellow);
    }

.input-date-sty {
    width   : 20%;
    display : inline-block;
}

.input-date-to {
    display : inline-block;
}

.input-validation {
    display     : block;
    position    : absolute;
    font-size   : 0.8rem;
}
    .input-validation, .required, .highlight {
        color       : var(--clr-red);
        font-weight : bold;
    }

.flex-cont .input-content-hlf > div {
    width : 50%;
}

.input-agmt {
    display : inline;
}
    .input-agmt > * {
        display : inherit;
    }

.input-validation-error {
    border: 1px solid var(--clr-red);
}

@media screen and (max-width: 480px) {
    .flex-cont .input-content-hlf > div {
        width : 100%;
    }

    .select-sty, .input-sty, .search-btn, .btn {
        width : 100%;
    }

    .input-date-to {
        margin-bottom : 1rem;
    }
}

/*#endregion */

/*#region ------ Slider */

.slider {
    display : flex;
}
    .slider > * {
        flex    : 0 0 auto;
        width   : 25%;
    }

/*#endregion */

/*#region ------ Pagination */

.pagination-cont {
    margin : 1.5rem 0;
}

.pagination-container {
    margin-top : 1rem;
}

.pagination {
    display : inline-block;
}
    .pagination > li {
        display : inline;
    }

    .pagination > li > a {
        border  : 1px solid lightgrey;
        padding : .5rem 1rem;
    }

    .pagination > li.active > a {
        color            : var(--clr-white);
        background-color : var(--clr-purple);
    }

@media screen and (max-width: 480px) {
    .pagination-cont {
        text-align : center;
    }
}

/*#endregion */

/*#region ------ Standard Container */

.std-cont {
    border                      : 1px solid var(--clr-lgrey);
    padding                     : 0 1rem .5rem 1rem;
    /*padding                     : 1rem;*/    
    border-bottom-right-radius  : 1.5rem;
}

.std-no {
    height      : min(4rem,6rem);
    position    : relative;
    font-size   : 1rem;
    font-weight : bold;
}
    .std-no p {
        margin      : revert;
        overflow    : hidden;
        min-height  : 28px;
    }

    .std-no::after {
        inset           : auto auto -5px -1rem;
        width           : 100%;
        content         : '';
        position        : absolute;
        border-bottom   : 3px solid var(--clr-green);
    }

.std-title {
    height  : 10rem;
    padding : 1rem 0;
}

.std-md-atc-cont {
    margin: 1rem 0;
}

.std-md {
    padding                     : .7rem;
    margin-left                 : -5px;
    background-color            : var(--clr-green);
    border-top-right-radius     : .5rem;
    border-bottom-right-radius  : .5rem;
}
    .std-md:hover {
        color            : var(--clr-white);
        transition       : ease-out 0.3s all;
        background-color : var(--clr-dgreen);
    }

.std-atc {
    padding                     : .7rem;
    background-color            : var(--clr-yellow);
    border-top-left-radius      : .5rem;
    border-bottom-left-radius   : .5rem;
}
    .std-atc.outofstock {
        cursor              : not-allowed;
        opacity             : .5;
        background-color    : var(--clr-lgrey);
    }

@media screen and (max-width : 559px) {
    .std-cont {
        width : 100%;
    }
}

@media screen and (min-width : 560px) and (max-width : 1440px) {
    .content-wrapper > .std-cont {
        width: calc( (100% - 2rem) / 2);
    }
}

@media screen and (min-width : 1441px) {
    .std-cont {
        width       : 25%;
        max-width   : 400px;
    }
}

/*#endregion */

/*#region ------ Accordions */

.filter-accordion {
    margin-bottom : 1rem;
}
    .filter-accordion > input[type="checkbox"] {
        left        : -100vw;
        position    : absolute;
    }

    .filter-accordion .content {
        height      : 0;
        padding     : 0 1rem;
        overflow-y  : hidden;
        transition  : height .3s ease, padding .5s ease;
    }

    .filter-accordion > input[type="checkbox"]:checked ~ .content {
        height   : max-content;
        overflow : visible;
    }

    .filter-accordion > input[type="checkbox"]:checked ~ .content {
        padding : 1rem;
    }

    .filter-accordion .handle {
        margin      : 0;
        font-size   : 14px;
        line-height : 1.2em;
    }

    .filter-accordion .handle {
        padding         : 1rem;
        border-bottom   : 1px solid var(--clr-purple);
    }

.content.covid19 {
    padding : 0 !important;
}

.handle label {
    cursor          : pointer;
    display         : block;
    position        : relative;
    text-transform  : uppercase;
}

.filter-accordion .handle label.static:before {
    content : none;
}

.filter-accordion .handle label:before {
    content             : '';
    inset               : 9px 5px auto auto;
    width               : 10px;
    height              : 2px;
    position            : absolute;
    background-color    : var(--clr-purple);
}

.filter-accordion .handle label:after {
    content             : '';
    inset               : 5px 9px auto auto;
    width               : 2px;
    height              : 10px;
    position            : absolute;
    background-color    : var(--clr-purple);
}

.filter-accordion > input[type="checkbox"]:checked + .handle label:after {
    width : 0;
}

.filter-radio-cont {
    cursor          : pointer;
    display         : block;
    position        : relative;
    padding-left    : 35px;
    margin-bottom   : 12px;
}
    .filter-radio-cont input { /* Hide the browser's default radio button */
        opacity  : 0;
        position : absolute;
    }

    .filter-radio-cont a {
        top         : 0;
        width       : 100%;
        height      : 24px;
        z-index     : 1;
        position    : absolute;
        margin-left : -35px;
    }

.checkmark { /* Create a custom radio button */
    inset               : 0 auto auto 0;
    width               : 25px;
    height              : 25px;
    position            : absolute;
    border-radius       : 50%;
    background-color    : #eee;
}

.filter-radio-cont:hover input ~ .checkmark { /* On mouse-over, add a grey background color */
    background-color: #ccc;
}

.filter-radio-cont input:checked ~ .checkmark { /* When the radio button is checked, add a blue background */
    background-color: var(--clr-blue);
}

.checkmark:after { /* Create the indicator (the dot/circle - hidden when not checked) */
    content  : "";
    display  : none;
    position : absolute;
}

.filter-radio-cont input:checked ~ .checkmark:after { /* Show the indicator (dot/circle) when checked */
    display: block;
}

.filter-radio-cont .checkmark:after { /* Style the indicator (dot/circle) */
    inset           : 9px auto auto 9px;
    width           : 8px;
    height          : 8px;
    background      : white;
    border-radius   : 50%;
}

/*#endregion*/


/* --------------------------------
    Table Structure
-------------------------------- */
/*#region --- Table Structure */

.table {
    width   : 100%;
    display : table;
}

.row {
    display     : table-row;
    background  : #f6f6f6;
}
    .row:nth-of-type(odd) {
        background : var(--clr-white);
    }

    .row.header {
        color            : var(--clr-white);
        font-weight      : bold;
        background-color : var(--clr-green);
    }

.cell {
    padding : 1rem 2rem;
    display : table-cell;
}

@media screen and (max-width: 580px) {
    .table, .row, .cell {
        display: block;
    }

    .row {
        padding : 1rem 0 1rem;
    }
        .row.header {
            padding : 0;
        }
            .row.header .cell {
                display : none;
            }

        .row .cell {
            margin-bottom : 10px;
        }
            .row .cell:before {
                content         : attr(data-title);
                display         : block;
                min-width       : 98px;
                font-size       : 12px;
                font-weight     : bold;
                margin-bottom   : .5em;
            }
    
    .cell {
        padding : .5rem 1rem;
    }
}

/*#endregion */

/* --------------------------------
    Navigation
-------------------------------- */
/*#region --- Navigation */

#sideNav.active {
    margin-left : -270px;
}

#sideNav.not {
    transition: none;
}

#sidebarCollapse {
    float   : right;
    color   : #ffff;
    padding : 1rem 1.2rem;
}

.nav-ss-logo {
    margin          : 1.5rem;
    display         : flex;
    justify-content : center;
}

nav ul li a {    
    color       : #ffff;
    padding     : 1em;
    display     : block;
}
    nav ul li a:hover {
        color               : black;
        cursor              : pointer;
        background-color    : var(--clr-green);
    }

a[data-toggle="collapse"] {
    position : relative;
}

.nav-icon {
    right       : 2rem;
    font-size   : 1.38em;
    position    : absolute;
}

.nav-subopt-cont {
    height      : min-content;
    opacity     : 1;
    transition  : height 0.5s, opacity 1s;    
}

.nav-subopt {
    font-size    : .85em;
    padding-left : 2.5em;
}

.collapse:not(show) {
    height      : 0;
    opacity     : 0;
    transition  : height 0s, opacity 0s;
}
    .collapse:not(show) > li > a {
        display : none;
    }

@media screen and (max-width: 768px) {
    #sideNav {
        overflow : scroll;
    }
}

@media screen and (min-width: 1025px) {
    nav {
        height      : 100%;
        z-index     : 3;
        position    : fixed;
    }

    .main-div {
        width       : calc(100% - var(--nav-width));
        margin-left : auto;
    }
}

@media (min-width: 1441px) {
    #sideNav {
        margin-left : 0;
    }
}

/*#endregion */

/* --------------------------------
    Header + Search
-------------------------------- */
/*#region --- Header + Search */

/*#region ------ Header */

#header_left_menu {
    width : 60%;
}
    #header_left_menu > form > div {
        display         : flex;
        flex-direction  : column;
    }
        #header_left_menu > form > div > span {
            display         : table-cell;
            vertical-align  : middle;
        }

#header_right_menu {
    width       : 40%;
    text-align  : end;
} 
    #header_right_menu > a > p {
        display     : inherit;
        font-weight : bold;
    }

#sidebarToggle, #sidebarCollapse {
    display : none;
}

.faq-cont {
    padding         : 0.3rem 0.5rem;
    font-size       : .8rem;
    border-style    : solid;
    border-width    : thin;
    border-radius   : 2rem;
}

.faq-style {
    margin      : 0 1rem;
    text-align  : center;
}

.cart-style {
    margin          : .5rem;
    vertical-align  : middle;
}

.cart-qty {
    inset               : auto 1em 1.5em auto;
    display             : inline-block;
    padding             : 0 .7em;
    position            : relative;
    border-radius       : 1.5em;
    background-color    : #99E1D9;
}

/*#endregion */

/*#region ------ Search */

.header-search-input {
    width           : 100%;
    height          : 2.5rem;
    border          : 1px solid var(--clr-lgrey);
    padding         : 0.5rem 1rem;
    font-size       : inherit;
    border-radius   : 1rem;
}

.search-input-btn {
    inset                       : auto 0 0 auto;
    width                       : 3.5rem;
    height                      : 100%;
    position                    : absolute;
    background-color            : var(--clr-green);
    border-top-right-radius     : 1rem;
    border-bottom-right-radius  : 1rem;
}

.adv-search {
    float       : right;
    width       : fit-content;
    font-size   : 15px;
}

.index-search-cont {
    width       : 96%;
    color       : #fff;
    padding     : 0 0 0 3rem;
    max-width   : 750px;
    margin-top  : 8rem;
}
    .index-search-cont h1 {
        margin          : 0;
        font-size       : 2rem;
        text-shadow     : 0px 4px 3px rgb(0 0 0 / 40%), 0px 8px 13px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%);
        text-transform  : uppercase;
    }

.search-bar {
    position    : relative;
    margin-top  : .5rem;
}

.index-search-input {
    width           : 100%;
    border          : none;
    outline         : none;
    padding         : 24px 20px;
    font-weight     : 700;    
    border-radius   : 1rem;
}

#header_right_menu a[href="/Customers/Settings"] {
    margin-right    : 1.5rem;
    vertical-align  : middle;
}

/*#endregion */

@media screen and (max-width: 506px) {
    header {
        padding : 1rem;
    }

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

@media screen and (max-width: 1024px) {
    #sideNav {
        height   : 100%;
        z-index  : 3;
        position : fixed;
    }

    #sidebarToggle, #sidebarCollapse {
        display     : inline;
        font-size   : 1.5rem;
    }

    #sidebarToggle {
        float : left;
    }

    header {
        flex-direction : column-reverse;
    }

    #header_left_menu, #header_right_menu {
        width : 100%;
    }

    #header_left_menu {
        margin-top : 1rem;
    }
        #header_left_menu > form > div {
            justify-content : center;
        }

    .adv-search {
        background  : linear-gradient(0deg, rgba(251,251,251,0) 0%, rgba(251,251,251,1) 32%, rgba(255,255,255,1) 63%, rgba(255,255,255,0) 100%);
        font-weight : 600;
    }
}

/*#endregion */

/* --------------------------------
    Home Page
-------------------------------- */
/*#region --- Home Page */

.img-banner {
    height              : 450px;
    margin              : 0 -3rem;
    display             : flex;
    justify-content     : flex-start;
    background-size     : cover;
    background-image    : url(/Content/images/Home/singapore-flyer.jpg);
    background-repeat   : no-repeat;
    background-position : 50%;
}

.img-banner-wsd {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 450px;
    margin: 0 -3rem;
    display: flex;
    justify-content: flex-start;
    background-image: url(/Content/images/Home/wsd.jpg);
    background-repeat: no-repeat;
    background-position: top center; /* Adjusted to ensure top alignment */
    background-size: contain;
    margin-top: 2rem; /* Adjust the value as needed for desired space */
}


#scene {
    width               : 100%;
    height              : 370px;
    display             : flex;
    position            : relative;
    overflow            : hidden;
    box-shadow          : 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    align-items         : center;
    justify-content     : left;
    background-color    : #fff;
}
    #scene #left-zone {
        width           : var(--ssnav-width);
        height          : 75%;
        display         : flex;
        flex-grow       : 0;
        background      : #fff;
        /*align-items     : center;*/
        justify-content : left;
    }
        #scene #left-zone .list {
            display         : flex;
            flex-grow       : 1;
            list-style      : none;
            align-content   : stretch;
            flex-direction  : column;
        }
            #scene #left-zone .list li.item input[type="radio"] {
                display : none;
            }
                #scene #left-zone .list li.item input[type="radio"] ~ label {
                    height          : 50px;
                    display         : block;
                    padding-left    : 1.5em;
                    line-height     : 50px;
                }
                    #scene #left-zone .list li.item input[type="radio"] ~ label:first-letter {
                        text-transform : uppercase;
                    }

                    #scene #left-zone .list li.item input[type="radio"] ~ label:hover {
                        opacity : 0.75;
                        cursor  : pointer;
                    }

                #scene #left-zone .list li.item input[type="radio"] ~ .content {
                    inset           : -350px auto auto var(--ssnav-width);                    
                    width           : calc(100% - var(--ssnav-width));
                    height          : 350px;
                    display         : flex;
                    position        : absolute;
                    align-items     : center;                    
                    flex-direction  : row;
                    justify-content : space-evenly;
                }

                #scene #left-zone .list li.item input[type="radio"]:checked ~ label {
                    opacity     : 1;
                    animation   : all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
                }

                #scene #left-zone .list li.item input[type="radio"]:checked ~ label {
                    background-color : var(--clr-yellow);
                }

                #scene #left-zone .list li.item input[type="radio"]:checked ~ .content {
                    animation-name              : slidein;
                    animation-duration          : 0.75s;
                    animation-fill-mode         : forwards;
                    animation-timing-function   : cubic-bezier(0.455, 0.03, 0.515, 0.955);
                }

    #scene #middle-border {
        height              : 75%;
        z-index             : 0;
        flex-grow           : 1;
        max-width           : 2px;
        background-color    : #eee;
    }

.content-cont {
    width           : 100%;
    height          : inherit;
    display         : flex;
    flex-direction  : column;
}

.content-more {
    height          : 40px;
    display         : flex;
    padding         : 1rem;
    align-items     : center;
    justify-content : flex-end;
}

.content-stds {
    gap             : 2.5rem;
    display         : flex;
    justify-content : center;
}

.index-section-title {
    font-size       : 1.5rem;
    text-transform  : uppercase;
}

@keyframes slidein {
    0%      { top: -400px; opacity: 0; }
    100%    { top: 0px; opacity: 1; }
}

.international-stds-a {
    border      : 1px solid var(--clr-lgrey);
    height      : 50%;
    display     : block;
    padding     : 2rem 1.5rem;
    transition  : color .35s ease-in-out, background-color .35s ease-in-out;
    font-weight : 600;
}
    .international-stds-a:hover {
        color               : var(--clr-blue);
        background-color    : #f1f1f1;
    }

.iso-img-a, .iec-img-a {
    height              : 50%;    
    display             : block;
    min-width           : 120px;
    aspect-ratio        : 1/1;
    image-rendering     : initial;
    background-size     : cover;
    background-repeat   : no-repeat;
}
    .iso-img-a { background-image : url('/Content/images/Misc/ISO-logo.png'); }
    .iec-img-a { background-image : url('/Content/images/Misc/IEC-logo.png'); }

.img-quotation {
    height              : 240px;
    overflow            : hidden;
    position            : relative;
    background-size     : cover;
    background-image    : linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/Content/images/Home/jewel-view.png);
    background-repeat   : no-repeat;
    background-position : 50%;
}
    .img-quotation div {
        height : 100%;
        margin : 4%;
    }

    .img-quotation p {
        top         : 50%;
        color       : var(--clr-white);
        position    : absolute;
        transform   : translate(0, -50%);
        font-size   : clamp(1rem,1.2rem,1.3rem);
        font-weight : 600;
        text-shadow : 0 0 3px var(--clr-blue);
    }
        .img-quotation p > a {
            color : var(--clr-yellow);
        }

.index-std-resources-cont {
    position    : relative;
    overflow    : hidden;
}
    .index-std-resources-cont .content-overlay {
        inset               : 0 0 0 0;
        width               : 100%;
        height              : 100%;
        opacity             : 0;
        position            : absolute;
        background          : rgba(0,0,0,0.7);
        -webkit-transition  : all 0.4s ease-in-out 0s;
        -moz-transition     : all 0.4s ease-in-out 0s;
        transition          : all 0.4s ease-in-out 0s;
    }

.index-std-resource-a, .events-img, .articles-img {
    width               : 100%;
    height              : 230px;
    background-size : cover;
/*    background-size     : contain;*/
    background-repeat   : no-repeat;
}
    .index-std-resource-a.covid19           { background-image : url(/Content/images/Home/covid-19.jpg); }
    .index-std-resource-a.industrystandards { background-image : url(/Content/images/Home/standards-industry.jpg); }
    .index-std-resource-a.sustainability    { background-image : url(/Content/images/Home/standards-for-supporting-sustainable-business.jpg); }
    .index-std-resource-a.articles          { background-image : url(/Content/images/Home/standards-article.jpg); }

.content-details {
    inset       : 50% auto auto 50%;
    width       : 100%;
    opacity     : 0;
    padding     : 0 1em;
    position    : absolute;
    text-align  : center;
    
    transform           : translate(-50%, -50%);
    -moz-transform      : translate(-50%, -50%);
    -webkit-transform   : translate(-50%, -50%);

    transition          : all 0.3s ease-in-out 0s;
    -moz-transition     : all 0.3s ease-in-out 0s;
    -webkit-transition  : all 0.3s ease-in-out 0s;
}

.fadeIn-top {
    top : 20%;
}

.content-details h2 {
    color           : #fff;
    font-weight     : 500;
    margin-bottom   : 0.5em;
    letter-spacing  : 0.15em;
    text-transform  : uppercase;
}

.scene-m {
    display: none;
}

.e-alert-cont {
    width       : 100%;
    display     : flex;
    flex-wrap   : nowrap;
}

.e-alert-content {
    width               : 60%;
    padding             : 2rem;
    font-weight         : 600;
    background-color    : var(--clr-dgreen);
}

    .e-alert-content h2 {
        margin : 0 0 1rem;
    }

.img-e-alert {
    width               : 40%;
    max-width           : 848px;
    background-size     : cover;
    background-image    : url(/Content/images/Home/e-alert.jpg);
    background-repeat   : no-repeat;
}

@media (hover) {
    .index-std-resources-cont:hover .content-overlay {
        opacity : 1;
    }

    .index-std-resources-cont:hover .content-details {
        top     : 50%;
        left    : 50%;
        opacity : 1;
    }
}

@media screen and (max-width : 768px) {
    .index-std-resource-a {
        background-size : cover;
    }

    .content-overlay {
        opacity : 1 !important;
    }

    .content-details {
        top     : 50%;
        left    : 50%;
        opacity : 1;
    }

    .slides {
        flex-wrap                   : nowrap;
        overflow-x                  : auto;
        justify-content             : inherit;
        scroll-behavior             : smooth;
        scroll-snap-type            : x mandatory;
        -webkit-overflow-scrolling  : touch;
    }
        .slides::-webkit-scrollbar {
            width   : 1rem;
            height  : 1rem;
        }

        .slides::-webkit-scrollbar-thumb {
            background      : var(--clr-blue);
            border-radius   : 1rem;
        }

        .slides::-webkit-scrollbar-track {
            background : transparent;
        }

        .slides > div {
            display             : flex;
            transform           : scale(1);
            transition          : transform 0.5s;
            align-items         : center;
            flex-shrink         : 0;
            /*justify-content     : center;*/
            justify-content     : start;
            transform-origin    : center center;
            scroll-snap-align   : start;
        }

    .m-events {
        width       : 50% !important;
        align-items : flex-start !important;
    }

    .e-alert-content {
        width: 100%;
    }

    .img-e-alert {
        display: none;
    }
}

@media screen and (min-width : 768px) {
    .more-content {
        margin-left: 1.5rem;
    }

    .sect-title-cont {
        display     : flex;
        align-items : center;
    }
}

@media screen and (max-width : 338px) {
    #international_logo {
        display : none;
    }
}

@media screen and (max-width : 506px) {
    .more-content {
        margin-bottom : 1.5rem;
    }

    .img-banner { 
        margin : 0 -1.5rem;
    }
    .img-banner-wsd {
        margin: 0 -1.5rem;
    }

    .iso-img-a, .iec-img-a {
        min-width : 140px;
    }

    .index-search-cont {
        padding : 0 1.5rem;
    }

    .m-events {
        width : 100% !important;
    }
}

@media screen and (max-width : 1167px) {
    section[aria-labelledby="international_standards"], section[aria-labelledby="request_for_quote"] {
        width: 100%;
    }
}

@media screen and (max-width : 1440px) {
    #scene {
        display : none;
    }

    .scene-m {
        display  : block;
        position : relative;
    }

    /* Style the tab */
    .tab {
        border           : 1px solid #ccc;
        overflow         : hidden;
        background-color : #f1f1f1;
    }
        /* Style the buttons inside the tab */
        .tab button {
            float               : left;
            color               : black; /* To change iOS default color (blue) */
            border              : none;
            cursor              : pointer;
            outline             : none;
            padding             : 14px 16px;
            transition          : 0.3s;
            background-color    : inherit;
        }
            .tab button:hover {
                background-color: #ddd;
            }

            .tab button.active {
                background-color: var(--clr-yellow);
            }

    .tabcontent {
        border      : 1px solid #ccc;
        display     : none;
        padding     : .5rem 1rem;
        overflow    : hidden;
        border-top  : none;
    }

    @-webkit-keyframes cd-fade-in {
        0%      { opacity: 0 }
        100%    { opacity: 1 }
    }

    @keyframes cd-fade-in {
        0%      { opacity: 0 }
        100%    { opacity: 1 }
    }
}

@media only screen and (min-width : 1824px) /* Large screens ----------- */ {
    .index-std-resource-a, .events-img, .articles-img {
        background-size : cover;
    }

    .index-std-resource-a {
        height : 300px;
    }

    .events-img, .articles-img {
        background-position: 0%;
    }
}

/*#endregion */

/* --------------------------------
    Industry Sector
-------------------------------- */

/*#region --- Industry Sector */

.industry-sect-btn {
    display             : flex;
    align-items         : center;
    justify-content     : center;

    width               : 200px;
    padding             : 1rem 0;
    text-align          : center;
    box-shadow          : rgb(0 0 0 / 24%) 0px 3px 8px;
    border-radius       : 1rem;
    background-color    : #f7f7f7;
}

.industry-sect-stdsin-sty {
    display     : flex;
    align-items : center;
}

.industry-sub-sect-btn:hover > span {
    color: var(--clr-blue);
}

.industry-sub-sect-btn > span {
    display     : block;
    margin-top  : 1rem;
    font-weight : bold;
}

@media screen and (max-width: 480px) {
    .industry-sect-btn, 
    .industry-sub-sect-btn > div {
        width : 100%;
    }

    .industry-sub-sect-btn {
        width : calc( (100% - 2rem) / 2);
    }
        .industry-sub-sect-btn > span {
            margin-top : 0rem;
        }
    
        .industry-sub-sect-btn > div > img {
            width : inherit;
        }
}

@media screen and (min-width: 481px) {
    .industry-sub-sect-btn {
        width : 250px;
    }
        .industry-sub-sect-btn > div {
            height : 140px;
        }
}

/*#endregion */

/* --------------------------------
    COVID-19
-------------------------------- */
/*#region --- COVID-19 */

.covid-table {
    width           : 100%;
    border          : 1px solid var(--clr-lgrey);
    font-size       : 14px;
}

.covid-td tr, .covid-td th, .covid-td td {
    border : 1px solid var(--clr-lgrey);
}

.t-numbering {
    width               : 5%;
    background-color    : var(--clr-green);
}

.t-header {
    font-weight      : bold;
    background-color : var(--clr-green);
}

td.no {
    text-align : center;
}

.covid-std-header {
    color       : #fff;
    margin      : .5rem;
    display     : block;
    font-weight : bold;
}

/*#endregion */

/* --------------------------------
    NEWSLETTER
-------------------------------- */

/*#region --- NEWSLETTER */

.newsletter > p > span,
.newsletter > p > span > span {
    font-size   : 1rem !important;
    font-family : inherit !important;
}

/*#endregion */

/* ---------------------------------------------
    INTERNATIONAL STANDARDS PURCHASE AGREEMENT
------------------------------------------------ */

/*#region --- INTERNATIONAL STANDARDS PURCHASE AGREEMENT */

.ispa-content {
    display : flex;
}

@media screen and (min-width : 768px) {
    .ispa-content img {
        height  : fit-content;
        content : url(/Content/images/Misc/IntlStds.png);
    }

    .ispa-content div {
        padding : 0 2rem;
    }
}

/*#endregion */

/* -------------------------
    ONLINE QUOTATION 
---------------------------- */

/*#region --- ONLINE QUOTATION / INVOICE */

.jquery_accordion_item {
    margin-bottom : 2rem;
}

.jquery_accordion_title {
    color               : #fff;
    cursor              : pointer;
    padding             : 1rem;
    position            : relative;
    background-color    : var(--clr-dgreen);
}
    .jquery_accordion_title label {
        color       : black;
        cursor      : pointer;
        font-weight : 600;
    }

.jquery_accordion_item.active .jquery_accordion_title:after {
    margin-top              : -9px;
    border-color            : transparent;
    border-bottom-color     : #fff;
}

.jquery_accordion_content {
    border          : 1px solid var(--clr-lgrey);
    display         : none;
    padding         : 1rem;
    margin-bottom   : 2rem;
}

.quotation-cont {
    gap             : 1rem;
    padding         : 1rem;
    margin-bottom   : 1.5rem;
    border-bottom   : 1px solid var(--clr-purple);
}

#SSItemType_Message, #Qty_Message, #IsoIecItemType_Message, #OverseaRefNo_Message, #OverseaItemType_Message {
    color       : var(--clr-red);
    display     : block;
    visibility  : hidden;
}

.quotation-qty {
    width   : 110px;
    border  : 1px solid var(--clr-lgrey);
    padding : .7rem 1rem;
}

.quotation-label {
    display         : block;
    margin-bottom   : .5rem
}

.form-control {
    width           : min(500px,100%);
    border          : 1px solid #ccc;
    padding         : .7rem 1rem;
    display         : block;
    border-radius   : 4px;
}

.quote-title {
    color               : #fff;
    padding             : 1rem;
    background-color    : var(--clr-dgreen);
}

.quotation-preview-main-border {
    border : 1px solid var(--clr-lgrey);
}

.quotation-preview-border {
    border  : 1px solid var(--clr-purple);
    padding : 1rem;
}

.quotation-item-table {
    margin : .5rem 0;
}

.quotation-tr > th,
.quotation-tr > td {
    padding         : .5rem 0;
    border-bottom   : 1px solid var(--clr-lgrey);
}

.quotation-sub-tr > th,
.quotation-sub-tr > td {
    border      : 1px solid var(--clr-purple);
    padding     : .5rem;
    text-align  : center;
}

.standard-col-w {
    width : 50%;
}

.quote-cost-cont {
    padding             : 1rem;
    background-color    : var(--clr-green);
}
    .quote-cost-cont > .calc {
        font-size : 18px;
    }

    .quote-cost-cont > div > div {
        margin : .5rem 0;
    }

.quote-service-active {
    overflow : unset !important;
}

.quotation-std-cont {
    width : 92%;
}
    .quotation-std-cont.m {
        display : flex;
    }

#delivery-method-company-area {
    display : none;
}

#delivery-method-company-area.show {
    display : block !important;
}

.delivery-method-cont {
    padding             : .5rem 1rem;
    margin-bottom       : 1rem;
    background-color    : #f1f1f1;
}

.quotation-confirmation-cost {
    width   : fit-content;
    border  : 1px solid var(--clr-lgrey);
    padding : .5rem;
}
    .quotation-confirmation-cost table tr td:first-child {
        margin      : 0.5rem 0;
        display     : block;
        min-width   : 150px;
    }

    .quotation-confirmation-cost table tr:last-child td {
        display         : table-cell;
        padding         : 1rem 0;
        font-weight     : bold;
        border-top      : 1px solid var(--clr-lgrey);
        border-bottom   : 1px solid var(--clr-lgrey);
    }

.a4-print-bg {
    background-color : #f1f1f1;
}

.a4-frame {
    width   : 960px !important;
    margin  : 0 auto;
}

.a4-cont {
    margin              : 20px;
    border              : 1px solid transparent;
    border-radius       : 4px;
    background-color    : #ffffff;
}

.invoice-main {
    margin      : 2rem;
    display     : flex;
    flex-wrap   : wrap;
    align-items : stretch;
}

.print-quote-table-sty {
    font-size       : 14px;
    margin-bottom   : 1.5rem
}
    .print-quote-table-sty tr {
        line-height : 1.7;
    }

.quote-std-detail tr td {
    border  : 1px solid var(--clr-lgrey);
    padding : .5rem;
}

.sub-u-border th, .sub-u-border td {
    border      : 1px solid var(--clr-purple);
    text-align  : center;
}

@media screen and (max-width : 506px) {
    #inv_gst_no         { order : 1; }
    #inv_customer_info  { order : 2; }
    #inv_delivery_info  { order : 3; }
    #inv_trans_date     { order : 4; }
    #inv_bill_details   { order : 5; }
    #inv_information    { order : 6; }

    .invoice-main {
        margin : 0;
    }

    .quotation-item-table {
        font-size : 12px;
    }

    .quotation-sub-tr > th {
        padding : unset;
    }

    .quotation-proc-cont {
        display         : flex;
        justify-content : space-between;
    }
        .quotation-proc-cont > .btn {
            width   : 45%;
            height  : auto;
        }

    .standard-col-w.std {
        width       : 100%;
        text-align  : left !important;
    }

    .table.quotation-item-table thead {
        clip        : rect(0 0 0 0);
        width       : 1px;
        height      : 1px;
        border      : none;
        margin      : -1px;
        padding     : 0;
        overflow    : hidden;
        position    : absolute;
    }

    .table.quotation-item-table tbody {
        width   : inherit;
        display : table;
    }

    .table.quotation-item-table tr {
        display         : block;
        border-bottom   : 2px solid var(--clr-purple);
        margin-bottom   : .625em;
    }

    .table.quotation-item-table td {
        display         : block;
        text-align      : right;
        border-bottom   : 1px solid #ddd;
    }

    .prod-detail-table td::before,
    .quotation-tr > td::before {
        float           : left;
        width           : 50%;
        content         : attr(data-label);
        text-align      : left;
        font-weight     : bold;    
    }

    .quote-cost-cont > .calc > span:nth-child(2) {
        display     : block;
        font-weight : bold;
    }

    div.alert-message + button.btn + div.order-review {
        inset : 140% 0 auto auto;
    }

    .quotation-std-cont.m {
        flex-direction : column;
    }

    .overseas-std-input-cont {
        margin-top : 1rem;
    }
}

@media screen and (max-width : 768px) {
    .quotation-std-cont {
        width : 100%;
    }

    .flex-cont.quotation-cont {
        flex-wrap       : nowrap;
        flex-direction  : column;
    }
}

@media screen and (min-width : 768px) {
    #DivDropDownForSingaporeStandardsItemType, #DivDropDownForISOIECStandardsItemType {
        width : 265px;
    }

    #DropDownForOverseaStandards {
        width: max-content;
    }

    .overseas-std-input-cont {
        width           : calc(100% - 157.4px);
        margin-left     : 1rem;
    }
    
}

@media screen and (min-width : 1024px) {
    #SgStdPartialView_DeleteButton, #ISOIECPartialView_DeleteButton, #OverseaPartialView_DeleteButton {
        inset       : 2rem 0 0 0;
        height      : fit-content;
        position    : relative;
    }
}

/*#endregion */

/*#region --- ONLINE QUOTATION STATUS */

.table-style, .item-tb, .tb-row {
    width : 100%;
}

.table-style {
    flex : 0 0 auto;
}

.item-tb {
    display : table;
}

.tb-header {
    color            : var(--clr-white);
    background-color : var(--clr-purple);
}

.tb-row {
    display : table-row;
}

.tb-col {
    display         : table-cell;
    padding         : 1rem;
    text-align      : center;
    border-right    : 1px solid var(--clr-lgrey);
    border-bottom   : 1px solid var(--clr-lgrey);
    vertical-align  : middle;
}

.order-coa {
    margin      : 12px 0;
    text-align  : center;
}

@media screen and (max-width: 768px) {
    .status-items {
        border : 1px solid var(--clr-lgrey);
    }

    .nvis-on-mob {
        display : none !important;
    }

    .tb-col {
        width       : 100%;
        float       : left;
        text-align  : left;
    }
        .tb-col.order-no[data-title]:before {
            color               : #fff;
            margin              : 0;
            padding             : 2px 5px;
            background-color    : inherit;
        }

        .tb-col[data-title]:before {
            content     : attr(data-title);
            width       : 100%;
            display     : block;
            padding     : 2px 0;
            font-size   : .9em;
            margin-top  : 0;
            font-weight : bold;
        }

    .order-lst > .tb-col.order-no {
        padding             : .5rem .3rem;
        background-color    : var(--clr-purple);
    }

    .order-lst > .tb-col:last-child {
        margin-bottom : 2rem;
    }

    .order-coa {
        text-align : left;
    }
}

@media (min-width: 768px) {
    .order-lst .tb-col:first-child {
        border-left : 1px solid var(--clr-lgrey);
    }
}

/*#endregion */

/* ----------------------------
    UPCOMING EVENTS & ARTICLE
------------------------------- */

/*#region --- UPCOMING EVENTS & ARTICLE */

.event-cont, .article-cont {
    width       : 30%;
    border      : 1px solid var(--clr-lgrey);
    overflow    : hidden;
    position    : relative;
}
    .event-title, .article-cont:hover > .article-title {
        color : var(--clr-blue);
    }    
    
    .article-cont > div > p {
        margin-bottom: 1rem;
    }

    .article-cont:hover {
        cursor: pointer;
    }

.event-dt {
    margin      : 1rem 0;
    display     : block;
    font-size   : 12px;
}

.article-title > p:first-child, .event-title > p:first-child {
    font-weight     : bold;
    margin-bottom   : .5rem;
    text-transform  : uppercase;
}

@media screen and (max-width: 768px) {
    .article-cont, .event-cont {
        width : 47%;
    }
}

/*#endregion */

/* -------------------------
    PRODUCT PAGE
---------------------------- */
/*#region --- PRODUCT PAGE */
#std_selection_opt {
    padding-left: 1.5rem;
}

.prod-detail-table th {
    padding     : .5rem .5rem 0 0;
    text-align  : left;
}

.no-of-std-cont {
    margin          : auto 0;
    height          : max-content;
    border          : 1px solid var(--clr-lgrey);
    display         : inline-block;
    overflow        : auto;
    border-radius   : 0.5rem;
}
    .no-of-std-cont> input[type=number] {
        width       : 2rem;
        display     : inline;
        font-size   : 0.85em;
        text-align  : center;
    }

button.btn-number {
    height              : 25px;
    background-color    : var(--clr-yellow);
}

button.btn-number:disabled {
    background-color : var(--clr-lgrey);
}

.hardcopy-cont, .ecopy-cont {
    display         : flex;
    margin-bottom   : 1rem;
    justify-content : space-around;
}
    .hardcopy-cont > div.width-70x,
    .ecopy-cont > div.width-70x {
        display         : flex;
        align-items     : center;
        justify-content : space-between;
    }

    .hardcopy-cont > div.width-40x ,
    .ecopy-cont > div.width-40x {
        text-align : center;
    }
        .hardcopy-cont > div.width-40x > strong,
        .ecopy-cont > div.width-40x > strong {
            font-size : 18px;
        }

        .hardcopy-cont > div.width-40x > i,
        .ecopy-cont > div.width-40x > i {
            display : block;
        }

#buy_this_std_cont form, #recommend_cont a, #pns_cont a {
    display : none;
}

#buy_this_std_cont.show-cont form, #recommend_cont.show-cont a, #pns_cont.show-cont a {
    display : block;
}

.std-copy-type-cont {
    width           : 80px;
    margin          : auto 0;
    display         : flex;
    align-content   : center;    
    flex-direction  : column;
}

.std-copy-type {
    width : fit-content;
}

.sspdt-add-to-cart p {
    margin-bottom: 1rem;
}

.std-listing a:nth-last-child(n+2) {
    display         : block;
    border-bottom   : 1px solid var(--clr-lgrey);
    margin-bottom   : 1rem;
    padding-bottom  : 1rem;
}
    .std-listing a:hover {
        color: var(--clr-blue);
    }   
        .std-listing a p:first-child {
            font-weight : 600;
        }

@media screen and (max-width : 480px) {
    .no-of-std-cont {
        vertical-align : middle;
    }
}

@media screen and (max-width : 768px) {
    #std_selection_opt {
        padding-left : 0;
    }
}

/*#endregion */

/* -------------------------
    SHOPPING CART
---------------------------- */
/*#region --- SHOPPING CART */

.tableHead {
    width       : 100%;
    display     : table;
    font-size   : 0.75em;
}
    .tableHead li {
        display     : table-cell;
        padding     : 1em 0;
        text-align  : center;
    }
        .tableHead li.prodHeader {
            text-align : left;
        }

.cart .items {
    width           : 100%;
    display         : block;
    padding         : 0 0 1rem;
    border-bottom   : 1px solid #fafafa;
    vertical-align  : middle;
}
    .cart .items .infoWrap {
        justify-content     : space-between;
        background-color    : var(--clr-white);
    }

    .cart .items .cartSection h3 {
        margin      : 0;
        font-size   : 1.25rem;
        font-weight : bold;
    }

    .cart .items .cartSection p {
        display     : inline-block;
        font-size   : .85em;
    }
        .cart .items .cartSection p .quantity {
            color       : #333;
            font-weight : bold;
        }

    .cart .items .cartSection.qtyWrap, .cart .items .cartSection.prodTotal {
        text-align : center;
    }
        .cart .items .cartSection.qtyWrap p, .cart .items .cartSection.prodTotal p {
            font-size   : 1.25em;
            font-weight : bold;
        }

.cart .cart-std-type-dl {
    width : 125px;
}

.cartSection.dis-price {
    width       : 10%;
    text-align  : center;
}

a.remove {
    text-decoration: none;
    font-weight: bold;
    background: #e0e0e0;
    padding: .85em 1em;
    display: inline-block;
    border-radius: 100%;
    line-height: 0.85;
    -webkit-transition: all 0.25s linear;
    -moz-transition: all 0.25s linear;
    -ms-transition: all 0.25s linear;
    -o-transition: all 0.25s linear;
    transition: all 0.25s linear;
}
    a.remove:hover {
        color               : #fff;
        background-color    : var(--clr-blue);
    }

/* TOTAL AND CHECKOUT  */
.subtotal .totalRow {
    padding     : 0.5em;
    text-align  : right;
}
    .subtotal .totalRow.final {
        font-size   : 1.25em;
        font-weight : bold;
    }

    .subtotal .totalRow span {
        display     : inline-block;
        padding     : 0 0 0 1em;
        text-align  : right;
    }

    .subtotal .totalRow .label {
        color           : #777;
        font-size       : 0.85em;
        text-transform  : uppercase;
    }

    .subtotal .totalRow .value {
        width           : 35%;
        letter-spacing  : -0.025em;
    }

@media only screen and (max-width: 480px) {
    .cart .items .infoWrap {
        margin-bottom : 1rem;
    }

    .cart .items .cartSection.qtyWrap {
        width       : 10%;        
        float       : right;
        padding     : 0.5em 0;
        text-align  : center;
    }
        .cart .items .cartSection.qtyWrap:before {
            content     : "QTY";
            display     : block;
            padding     : 0.25em;
            font-size   : 0.75em;
        }

    .cart .cart-std-type-dl {
        margin-top : .5rem;
    }

    .cartSection.dis-price {
        width : 50%;
    }

    a.remove {
        margin-right : 1rem;
    }
}

@media screen and (max-width: 768px) {
    .infoWrap .cartSection {
        margin-bottom : 1rem;
    }
}

@media screen and (min-width : 768px) {
    .cartSection .no-of-std-cont {
        top         : .5rem;
        position    : relative;
    }

    .cart .cart-std-type-dl {
        display     : inline-block;
        margin-left : 2rem;
    }
}

/*#endregion */

/* -------------------------
    ACCOUNT
---------------------------- */
/*#region --- ACCOUNT */

.acc-img-cont {
    text-align      : center;
    margin-bottom   : 1rem;
}

.shadow {
    box-shadow : 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.tab-content {
    flex : 1;
}

.form-group {
    margin-bottom : 1.5rem;
}

.nav-pills a.nav-link {
    padding         : 15px 20px;
    transition      : .35s background-color ease-in-out;
    border-top      : 1px solid #ddd;
    border-bottom   : 1px solid #ddd;
}
    .nav-pills > .nav-link:hover {
        background-color: var(--clr-green);
    }

    .nav-pills a.nav-link i {
        width : 20px;
    }

/* Side Navigation */
.profile-tab-nav {
    min-width : 250px;
}

.border-right {
    border-right: 1px solid #dee2e6 !important;
}

.flex-column {
    flex-direction : column;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color               : #fff;
    background-color    : var(--clr-dgreen);
}

@media screen and (max-width: 506px) {
    #val-msg {
        height : 2rem;
    }

    .acc-panel {
        flex-direction : column;
    }

    .shadow {
        box-shadow : none !important;
    }
}

@media screen and (max-width: 767px) {
    .tab-content {
        margin-top : 2rem;
    }
}

@media (min-width: 768px) {
    .p-md-5 {
        padding: 2rem;
    }
}

/*#endregion */


/* -------------------------
    SWIPER CSS
---------------------------- */
/*#region --- SWIPER CSS */

.swiper-button-next:after, .swiper-button-prev:after {
    font-weight : 600;
}

.swiper-pagination {
    position : static !important;
}

@media screen and (min-width : 769px) and (max-width : 1440px) {
    .mobile-swiper.swiper-wrapper {
        gap : 1.5rem;
    }
        .mobile-swiper.swiper-wrapper > .swiper-slide {
            width : 30% !important;
        }
}

/*#endregion*/