:root {
    font-size: 16px;
    /* Brand colors */
    --color-main: #2880FA;
    --color-sub1: #3904E6;
    --color-sub2: #06244D;
    /* Buttons & Links */
    --color-main-hover: #0561E1;
    --color-sub1-hover: #1A22D0;
    --color-sub2-hover: #0a3a7b;
    --color-main-hover-light: rgba(40, 128, 250, 0.1);
    --color-sub1-hover-light: rgba(57, 64, 230, 0.1);
    --color-sub2-hover-light: rgba(6, 36, 77, 0.1);
    /* Support/Notification Colors */
    --success: #37B68F;
    --error: #FF3366;
    --warning: #FFA639;
    /* Support/Notification Colors Hover*/
    --success-hover: #2B8D6F;
    --error-hover: #FF0040;
    --warning-hover: #FF8F05;
    /* Support/Notification Colors Hover Light*/
    --success-hover-light: rgba(55, 182, 143, 0.1);
    --error-hover-light: rgba(255, 51, 102, 0.1);
    --warning-hover-light: rgba(255, 166, 57, 0.1);
    /* Font colors */
    --font-color-head: #06244d;
    --font-color-sub: #404040;
    --font-color-body: #6c757d;
    --font-color-link: #2880FA;
    --font-color-visited: #670099;
    --font-color-inv: #FFFFFF;
    /* UI Colors */
    --color-ui-01: #FFFFFF;
    --color-ui-02: #FAFBFC;
    --color-ui-03: #f2f4f8;
    --color-ui-04: #e4e6ec;
    --color-ui-05: #8c94a4;
    --color-ui-06: #2c3148;
    --color-ui-07: #1e86e3;
    --color-ui-08: rgba(255, 255, 255, 0.1);
    /* Gradiant Background */
    --color-gradiant1: linear-gradient(90deg, #1E4AA2 0%, #1B78CC 100%);
    --color-gradiant2: linear-gradient(90deg, #8C1EE3 0%, #C71EE3 100%);
    --color-gradiant3: linear-gradient(90deg, #E3351E 0%, #F07B26 100%);
    /* Font family */
    --font-family-01: 'Fairplay Display';
    /* usually on heading */
    --font-family-02: 'Open Sans', sans-serif;
    /* usually on sub-heading */
    --font-family-03: 'Open Sans', sans-serif;
    --font-family-04: 'Work Sans', sans-serif;
    --font-family-05: 'Poppins', sans-serif;
    /* usually on paragraph & buttons */
    /* Typography - font size & line height */
    /* previously name as --typography-xxxx-large ... */
    --font-xxxx-large: 3rem;
    /* 48px */
    --font-xxx-large: 2.5rem;
    /* 40px */
    --font-xx-large: 2rem;
    /* 32px */
    --font-x-large: 1.5rem;
    /* 24px */
    --font-large: 1.125rem;
    /* 18px */
    --font-medium: 1rem;
    /* 16px */
    --font-small: 0.875rem;
    /* 14px */
    --font-x-small: 0.75rem;
    /* 12px */
    --font-xx-small: 0.625rem;
    /* 10px */
    /* grid / container */
    --gutter: 12px;
    /* 24px divided by 2 */
    --gutter-medium: 20px;
    /* 40px divided by 2 */
    /* spacers */
    --container-max-width: 1232px;
    --container-max-width-half: 616px;
    --container-padding-xx-large: 24px;
    --container-padding-x-large: 24px;
    --container-padding-large: 24px;
    --container-padding-medium: 32px;
    --container-padding-small: 24px;
}

/* Body Pragraph */
body {
    background-color: var(--color-ui-01);
}

body,
p,
.body-paragraph {
    font-family: var(--font-family-03);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
    color: var(--font-color-body);
}

body,
header,
footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.body-large {
    font-family: var(--font-family-03);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
}

.body-small {
    font-family: var(--font-family-03);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-x-small);
    line-height: normal;
}

a,
.body-link {
    font-family: var(--font-family-03);
    color: var(--font-color-link);
    font-weight: 400;
    cursor: pointer;
    transition: ease color 0.2s;
    line-height: var(--font-x-large);
}

a:hover,
a.color-main:hover,
.body-link:hover {
    color: var(--color-main-hover);
}

a:visited,
.body-link:visited {
    /* color: var(--color-hover-visited); */
}

a.font-color-head:hover,
a.font-color-body:hover,
a .font-color-head:hover,
a .font-color-body:hover {
    color: var(--color-main);
}



/* Heading Styles */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
ol,
dl {
    margin-bottom: 0;
}

h1,
.heading-1,
h2,
.heading-2,
h3,
.heading-3,
h4,
.heading-4,
h5,
.heading-5,
h6,
.heading-6 {
    font-family: var(--font-family-01);
    font-weight: 700;
    color: var(--font-color-head);
    line-height: normal;
}

h1,
.heading-1 {
    font-size: var(--font-xxx-large);
}

h2,
.heading-2 {
    font-size: var(--font-xx-large);
}

h3,
.heading-3 {
    font-size: var(--font-x-large);
}

h4,
.heading-4 {
    font-size: var(--font-large);
}

h5,
.heading-5 {
    font-size: var(--font-medium);
}

h6,
.heading-6 {
    font-size: var(--font-small);
}


@media screen and (min-width: 640px) and (max-width: 1023px) {

    h1,
    .heading-1,
    h2,
    .heading-2 {
        font-size: 2rem;
    }
}

@media screen and (max-width: 420px) {

    h1,
    .heading-1 {
        font-size: 2rem;
    }
}

.subhead-1,
.subhead-2 {
    font-family: var(--font-family-01);
    font-size: var(--font-x-small);
    line-height: var(--font-small);
    color: var(--font-color-head);
    font-style: normal;
    font-weight: 700;
    font-size: var(--font-x-small);
}

.subhead-2 {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* inner grid container (1024px) */
.inner-wrap {
    max-width: 1024px;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .inner-wrap {
        max-width: initial;
    }
}

hr {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid var(--color-ui-04);
}


/**********
[Foundation Style Customization / Overwrite]
**********/
/* Gutter regular */
.grid-padding-x>.cell,
.gutter.grid-padding-x>.cell {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.grid-padding-y>.cell,
.gutter.grid-padding-y>.cell {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
}

.grid-container:not(.full) .grid-padding-x,
.grid-container:not(.full) .grid-padding-x.gutter {
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
}

/* Gutter medium */
.gutter-medium.grid-padding-x>.cell {
    padding-left: var(--gutter-medium);
    padding-right: var(--gutter-medium);
}

.gutter-medium.grid-padding-y>.cell {
    padding-top: var(--gutter-medium);
    padding-bottom: var(--gutter-medium);
}

.grid-container:not(.full) .grid-padding-x.gutter-medium {
    margin-right: calc(-1 * var(--gutter-medium));
    margin-left: calc(-1 * var(--gutter-medium));
}

.grid-container:not(.full) .grid-padding-y.gutter-medium {
    margin-top: calc(-1 * var(--gutter-medium));
    margin-bottom: calc(-1 * var(--gutter-medium));
}

@media print,
screen and (min-width: 640px) {
    .grid-padding-x .grid-padding-x {
        margin-right: calc(-1 * var(--gutter));
        margin-left: calc(-1 * var(--gutter));
    }
}

.main-wrap {
    min-height: 90vh;
}

.wrapper {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--container-padding-xx-large);
    padding-right: var(--container-padding-xx-large);
}

.wrapper .grid-container {
    max-width: var(--container-max-width);
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.wrapper .wrapper {
    padding-left: 0;
    padding-right: 0;
}

@media screen and (min-width: 1440px) {
    .wrapper {
        padding-left: var(--container-padding-xx-large);
        padding-right: var(--container-padding-xx-large);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    .wrapper {
        padding-left: var(--container-padding-x-large);
        padding-right: var(--container-padding-x-large);
    }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .wrapper {
        padding-left: var(--container-padding-large);
        padding-right: var(--container-padding-large);
    }
}


@media screen and (min-width: 640px) and (max-width: 1023px) {
    .wrapper {
        padding-left: var(--container-padding-medium);
        padding-right: var(--container-padding-medium);
    }

}

@media screen and (max-width: 639px) {
    .wrapper {
        padding-left: var(--container-padding-small);
        padding-right: var(--container-padding-small);
    }
}

.grid-container-half {
    max-width: var(--container-max-width-half);
}


/*********
SweetAlert Style
*********/
.swal2-popup {
    padding: 2rem !important;
}

.swal2-popup .swal2-actions {
    flex-direction: row-reverse !important;
}

.swal2-popup .swal2-actions button {
    font-family: var(--font-family-03) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-x-small) !important;
    line-height: var(--font-x-small) !important;
    text-transform: uppercase !important;
    border-radius: 4px;
    letter-spacing: 1px;
    padding: 10px 16px;
    margin: 0 12px;
}

.swal2-popup .swal2-actions button,
.swal2-popup .swal2-actions button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.swal2-popup .ins-loader-wrap--title {
    color: var(--font-color-head) !important;
    font-family: var(--font-family-01) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: var(--font-x-large) !important;
    line-height: normal !important;
}

.swal2-popup .ins-loader-wrap--message {
    color: var(--font-color-body) !important;
    font-family: var(--font-family-03);
    font-style: normal;
    font-weight: 400;
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
}

.swal2-styled.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid var(--color-main) !important;
    color: var(--color-main) !important;
}

.swal2-popup .warning.ins-loader-wrap--state svg * {
    fill: var(--warning) !important;
}

/* Default btn */
.swal2-popup .swal2-confirm {
    background-color: var(--color-main) !important;
    border: solid 1px var(--color-main) !important;
}

.swal2-actions:not(.swal2-loading) .swal2-cancel:hover {
    background-image: none !important;
    background-color: var(--ins-color-blue-10p) !important;
}

.swal2-popup .error.ins-loader-wrap--state svg * {
    fill: var(--error) !important;
}

/* Negative btn */
.swal2-popup .swal2-confirm.negative {
    background-color: var(--error) !important;
    border: solid 1px var(--error) !important;
}

.swal2-popup .success.ins-loader-wrap--state svg * {
    fill: var(--success) !important;
}

/* Positive btn */
.swal2-popup .swal2-confirm.green {
    background-color: var(--success) !important;
    border: solid 1px var(--success) !important;
}

/**********
[Insites Component Style Customization / Overwrite]
**********/
.button-large,
ins-button button.ins-button.size--large,
ins-button button.ins-button.size--large span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.button-default,
ins-button button.ins-button,
ins-button button.ins-button span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-x-small);
    line-height: var(--font-large);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.button-small,
ins-button button.ins-button.size--small:not(.is-loading) {
    padding-left: 8px;
    padding-right: 8px;
}

.button-small,
ins-button button.ins-button.size--small,
ins-button button.ins-button.size--small span {
    font-family: var(--font-family-03);
    font-weight: 700;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
    letter-spacing: 1px;
    text-transform: uppercase;
}

ins-button button.white.solid,
ins-button button[type=button].white.solid,
ins-button button[type=reset].white.solid,
ins-button button[type=submit].white.solid {
    background-color: var(--font-color-inv);
    color: var(--color-main);
}

ins-button button[type=reset].blue,
ins-button button[type=reset].primary,
ins-button button[type=submit].blue,
ins-button button[type=submit].primary,
ins-button button[type=button].blue,
ins-button button[type=button].primary,
ins-button button.blue,
ins-button button.primary {
    color: var(--color-main);
}

ins-button button[type=reset].negative,
ins-button button[type=reset].red,
ins-button button[type=submit].negative,
ins-button button[type=submit].red,
ins-button button[type=button].negative,
ins-button button[type=button].red,
ins-button button.negative,
ins-button button.red {
    color: var(--error);
}

.ins-carousel_slides {
    background-color: initial;
}

.ins-carousel {
    position: relative;
}

ins-button.btn-icon-right .btn__icon {
    position: absolute;
    right: 0;
}

ins-button.btn-icon-right .btn__label {
    padding-right: 18px;
}

ins-textarea textarea,
.ins-textarea-wrap textarea {
    min-height: 110px;
    resize: none;
}

.form-label,
ins-input [class*=ins-] label,
[class*=ins-] label,
label,
.ins-form-field-wrap .ins-form-label {
    font-family: var(--font-family-02);
    font-weight: 700;
    font-size: var(--font-small);
    line-height: var(--font-medium);
    color: var(--font-color-head);
    margin-bottom: 7px;
}

.ins-form-field-wrap .ins-form-field:focus+.icon-wrap {
    color: var(--color-main);
}

.ins-form-field-wrap .ins-form-field {
    font-family: var(--font-family-01);
    font-weight: 400;
    padding: 12px;
    line-height: 16px;
    height: auto;
}

.ins-form-field-wrap .ins-form-field{
    border-color: var(--color-ui-04);
}

.ins-form-field-wrap .ins-form-field:hover{
    border-color: var(--color-ui-05);
}

.ins-form-field-wrap .ins-form-field:focus {
    border-color: var(--color-main);
}

.ins-form-field-wrap .ins-form-label.active {
    color: var(--color-main);
}

.form-error,
.ins-form-field-wrap.is-invalid .ins-form-error,
.form-field-wrapper.error-recaptcha .ins-form-error,
.list-field-wrap.is-invalid .list-field_error {
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-x-small);
    line-height: normal;
    color: var(--error);
}

.form-field-wrapper.error-recaptcha .ins-form-error::after {
    content: "reCAPTCHA is required.";
}

.ins-form-field-wrap.is-invalid .ins-form-label {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field {
    color: var(--error);
    border-color: var(--error);
    background-color: var(--color-ui-01);
}

.list-field-wrap.is-invalid .list-field_error,
.list-field-wrap.is-invalid .list-checkbox_error,
.insites-form .list-field-wrap.is-invalid .list-checkbox_error, .insites-form .list-field-wrap.is-invalid .list-field_error{
    display: block !important;
    margin-top: 8px;
}


.ins-form-field-wrap.is-invalid .ins-form-field:-moz-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field::-moz-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field:-ms-input-placeholder {
    color: var(--error);
}

.ins-form-field-wrap.is-invalid .ins-form-field::-webkit-input-placeholder {
    color: var(--error);
}

.form-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder,
::placeholder {
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-small);
}

.form-placeholder-multiline,
textarea::-webkit-input-placeholder,
textarea:-ms-input-placeholder,
textarea::placeholder {
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}

.large-field .ins-form-field-wrap {
    margin-bottom: 0;
}

.large-field .ins-form-field-wrap .ins-form-field {
    padding: 12px;
    line-height: 16px;
    height: auto;
}

.large-field .ins-form-field-wrap .icon-wrap {
    right: 16px;
}



/* Button color=default/blue/primary */
/* Solid button */
ins-button button.blue.solid,
ins-button button.primary.solid,
ins-button button[type=button].blue.solid,
ins-button button[type=button].primary.solid,
ins-button button[type=reset].blue.solid,
ins-button button[type=reset].primary.solid,
ins-button button[type=submit].blue.solid,
ins-button button[type=submit].primary.solid {
    background-color: var(--color-main);
    color: var(--font-color-inv);
}

ins-button button[type=reset].blue.solid:not([disabled]):hover,
ins-button button[type=reset].primary.solid:not([disabled]):hover,
ins-button button[type=submit].blue.solid:not([disabled]):hover,
ins-button button[type=submit].primary.solid:not([disabled]):hover,
ins-button button[type=button].blue.solid:not([disabled]):hover,
ins-button button[type=button].primary.solid:not([disabled]):hover,
ins-button button.blue.solid:not([disabled]):hover,
ins-button button.primary.solid:not([disabled]):hover {
    background-color: var(--color-main-hover);
    color: var(--font-color-inv);
}

/* Trasparent button */
ins-button button[type=reset].blue:not([disabled]):hover,
ins-button button[type=reset].blue:not([disabled]):active,
ins-button button[type=reset].primary:not([disabled]):hover,
ins-button button[type=reset].primary:not([disabled]):active,
ins-button button[type=submit].blue:not([disabled]):hover,
ins-button button[type=submit].blue:not([disabled]):active,
ins-button button[type=submit].primary:not([disabled]):hover,
ins-button button[type=submit].primary:not([disabled]):active,
ins-button button[type=button].blue:not([disabled]):hover,
ins-button button[type=button].blue:not([disabled]):active,
ins-button button[type=button].primary:not([disabled]):hover,
ins-button button[type=button].primary:not([disabled]):active,
ins-button button.blue:not([disabled]):hover,
ins-button button.blue:not([disabled]):active,
ins-button button.primary:not([disabled]):hover,
ins-button button.primary:not([disabled]):active {
    background-color: var(--color-main-hover-light);
    color: var(--color-main-hover);
}

/* Outlined */
ins-button button[type=reset].blue.outlined,
ins-button button[type=reset].primary.outlined,
ins-button button[type=submit].blue.outlined,
ins-button button[type=submit].primary.outlined,
ins-button button[type=button].blue.outlined,
ins-button button[type=button].primary.outlined,
ins-button button.blue.outlined,
ins-button button.primary.outlined {
    background: none;
    border: 1px solid var(--color-main-hover);
    color: var(--color-main-hover);
}

/* Button color="sub1" */


/* Solid button */
ins-button button.sub1.solid,
ins-button button[type=button].sub1.solid,
ins-button button[type=reset].sub1.solid,
ins-button button[type=submit].sub1.solid {
    background-color: var(--color-sub1);
    color: var(--font-color-inv);
}

ins-button button[type=reset].sub1.solid:not([disabled]):hover,
ins-button button[type=submit].sub1.solid:not([disabled]):hover,
ins-button button[type=button].sub1.solid:not([disabled]):hover,
ins-button button.sub1.solid:not([disabled]):hover {
    background-color: var(--color-sub1-hover);
    color: var(--font-color-inv);
}

/* Transparent button */
ins-button button[type=reset].sub1,
ins-button button[type=submit].sub1,
ins-button button[type=button].sub1,
ins-button button.sub1 {
    color: var(--color-sub1);
    background-color: transparent;
}

ins-button button[type=reset].sub1:not([disabled]):hover,
ins-button button[type=reset].sub1:not([disabled]):active,
ins-button button[type=submit].sub1:not([disabled]):hover,
ins-button button[type=submit].sub1:not([disabled]):active,
ins-button button[type=button].sub1:not([disabled]):hover,
ins-button button[type=button].sub1:not([disabled]):active,
ins-button button.sub1:not([disabled]):hover,
ins-button button.sub1:not([disabled]):active {
    background-color: var(--color-sub1-hover-light, rgba(126, 22, 208, 0.1));
    color: var(--color-sub1-hover);
}

/* Outlined */
ins-button button[type=reset].sub1.outlined,
ins-button button[type=submit].sub1.outlined,
ins-button button[type=button].sub1.outlined,
ins-button button.sub1.outlined {
    background: none;
    border: 1px solid var(--color-sub1-hover);
    color: var(--color-sub1-hover);
}


/* Button color="sub2" */
/* Solid button */
ins-button button.sub2.solid,
ins-button button[type=button].sub2.solid,
ins-button button[type=reset].sub2.solid,
ins-button button[type=submit].sub2.solid {
    background-color: var(--color-sub2, #D32F19);
    color: var(--font-color-inv);
}

ins-button button[type=reset].sub2.solid:not([disabled]):hover,
ins-button button[type=submit].sub2.solid:not([disabled]):hover,
ins-button button[type=button].sub2.solid:not([disabled]):hover,
ins-button button.sub2.solid:not([disabled]):hover {
    background-color: var(--color-sub2-hover, #D32F19);
    color: var(--font-color-inv);
}

/* Transparent button */
ins-button button[type=reset].sub2,
ins-button button[type=submit].sub2,
ins-button button[type=button].sub2,
ins-button button.sub2 {
    color: var(--color-sub2);
    background-color: transparent;
}

ins-button button[type=reset].sub2:not([disabled]):hover,
ins-button button[type=reset].sub2:not([disabled]):active,
ins-button button[type=submit].sub2:not([disabled]):hover,
ins-button button[type=submit].sub2:not([disabled]):active,
ins-button button[type=button].sub2:not([disabled]):hover,
ins-button button[type=button].sub2:not([disabled]):active,
ins-button button.sub2:not([disabled]):hover,
ins-button button.sub2:not([disabled]):active {
    background-color: var(--color-sub2-hover-light, rgba(211, 47, 25, 0.1));
    color: var(--color-sub2-hover, #D32F19);
}

/* Outlined */
ins-button button[type=reset].sub2.outlined,
ins-button button[type=submit].sub2.outlined,
ins-button button[type=button].sub2.outlined,
ins-button button.sub2.outlined {
    background: none;
    border: 1px solid var(--color-sub2-hover);
    color: var(--color-sub2-hover);
}



ins-button button,
ins-button button span {
    font-family: var(--font-family-03);
}

ins-button+ins-button button,
a.ins-button+ins-button button,
ins-button+a.ins-button button {
    margin-left: calc(2 * var(--gutter));
}

@media screen and (max-width: 639px) {

    .btn-container ins-button button,
    ins-button+ins-button button,
    a.ins-button+ins-button button {
        width: 100%;
        margin-left: 0;
        margin-bottom: calc(2 * var(--gutter));
    }

    .btn-container a.ins-button+ins-button:last-child button {
        margin-bottom: 0;
    }
}

ins-button.full {
    display: block;
}

ins-button.full button {
    width: 100%;
}

ins-card.full {
    width: 100%;
}

.ins-accordion-item.open>.ins-accordion-item_header>.inner-head {
    background-color: var(--color-main);
    border-color: var(--color-main);
    color: var(--font-color-inv);
}

.ins-accordion-item_header>.inner-head:hover {
    border-color: var(--color-main);
}

.ins-carousel_ctrl-btns,
.ins-carousel_ctrl-btns .btn__icon {
    color: var(--color-main);
}

.ins-carousel_paginations .pagination.active {
    background-color: var(--color-main);
}

.ins-select-wrap.activated .ins-select-options-wrap {
    z-index: 99999;
}

.ins-select-wrap.activated .ins-select-value-wrap,
.ins-select-wrap.activated .ins-select-options-wrap{
    border-color: var(--color-main);
}

.ins-select-wrap.is-invalid .ins-select-value-wrap,
.ins-select-wrap.is-invalid.activated .ins-select-options-wrap{
    border-color: var(--error);
}

.grid-padding-x>.cell ins-checkbox .ins-radio-checkbox,
.grid-padding-x>.cell ins-radio .ins-radio-checkbox {
    padding: 0;
}

ins-toggle-switch .v-switch .ins-switch {
    height: initial;
    margin-bottom: calc(2 * var(--gutter));
}

.ins-form-field-wrap,
.ins-select-wrap,
ins-checkbox .ins-radio-checkbox label,
ins-radio .ins-radio-checkbox label,
ins-code-editor .CodeMirror,
ins-editor .ins-editor {
    margin-bottom: calc(2 * var(--gutter));
}

ins-checkbox.inline .ins-radio-checkbox label .ins-checkbox-radio-label,
ins-radio.inline .ins-radio-checkbox label .ins-checkbox-radio-label {
    display: inline;
    line-height: normal;
}

ins-checkbox .ins-radio-checkbox .ripple-check:checked::after, 
ins-radio .ins-radio-checkbox .ripple-check:checked::after{
    background: var(--color-main);
}

.ins-modal-wrap.show-modal ins-card {
    top: 21%;
    /* offset overlap on sticky header */
}


/* Step inactive - default state */
.ins-step_indicator {
    border-color: var(--color-ui-05);
    background-color: var(--color-ui-03);
}

.ins-step_progress-bar {
    background-color: var(--color-ui-05);
}

.ins-step_description {
    color: var(--color-ui-05);
}

/* Temp Fix overwrite CSS  -  https://pm.cbo.me/#/tasks/18212852*/
ins-select .ins-select-wrap .ins-select-value-input {
    /* padding-right: 30px; */
}

.shrink ins-select .ins-select-wrap .ins-select-value-input {
    /* padding-right: initial; */
}



/* Step active */
.ins-step.active .ins-step_indicator {
    border-color: var(--font-color-head);
    background: var(--color-ui-01);
}

.ins-step.active .ins-step_description {
    color: var(--font-color-head);
}

ins-steps.hydrated[clickable] ins-step:not([disabled]) .ins-step_details:hover .ins-step_indicator {
    border-color: var(--font-color-head);
}

/* Step completed */
.ins-step.completed .ins-step_indicator {
    border-color: var(--color-main);
    background: var(--color-main);
    color: var(--font-color-inv);
}

.ins-step.completed .ins-step_progress-bar {
    background-color: var(--color-main);
}

.ins-step.completed .ins-step_description {
    color: var(--color-main);
}

/* Step has error */
.ins-step.has-error .ins-step_indicator,
.ins-step.active.has-error .ins-step_indicator {
    border-color: var(--error);
    color: var(--font-color-inv);
}

.ins-step.has-error .ins-step_progress-bar,
.ins-step.active.has-error .ins-step_progress-bar,
.ins-step.active.has-error .ins-step_dot {
    background-color: var(--error);
}

.ins-step.has-error .ins-step_description,
.ins-step.active.has-error .ins-step_description {
    color: var(--error);
}

/* Override insites-form .column for Insites Telephone */
.insites-form.insites-form-code .insites-form-grid ins-input-tel .ins-input-tel-wrap .column-1,
.insites-form.insites-form-code .insites-form-grid ins-input-tel .column-2 {
    width: auto;
}

.insites-form .insites-form-grid ins-input-tel .column-1:not(.insites-form.insites-form-grid.col-container.column-1) {
    width: auto;
}

.insites-form.insites-form-code ins-input-tel .column-1:not(.insites-form.insites-form-code.insites-form-grid.col-container.column-1) {
    margin: 0px;
}

.insites-form.insites-form-code ins-input-tel .column-2:not(.insites-form.insites-form-code.insites-form-grid.col-container.column-2) {
    margin: 0px 8px 9px;
}

/**********[GENERAL / Utilitities]**********/
/*-- Font Colors ----*/
.color-main,
.color-main:visited {
    color: var(--color-main);
}

.color-sub1 {
    color: var(--color-sub1);
}

.color-sub2 {
    color: var(--color-sub2);
}

.font-color-head,
.font-color-head:visited {
    color: var(--font-color-head);
}

.font-color-sub {
    color: var(--font-color-sub);
}

.font-color-body {
    color: var(--font-color-body);
}

.font-color-link {
    color: var(--font-color-link);
}

.font-color-visited {
    color: var(--font-color-visited);
}

.font-color-inv {
    color: var(--font-color-inv);
}

.success {
    color: var(--success);
}

.error {
    color: var(--error);
}

.warning {
    color: var(--warning);
}

.success-hover {
    color: var(--success-hover);
}

.error-hover {
    color: var(--error-hover);
}

.warning-hover {
    color: var(--warning-hover);
}

.success-hover-light {
    color: var(--success-hover-light);
}

.error-hover-light {
    color: var(--error-hover-light);
}

.warning-hover-light {
    color: var(--warning-hover-light);
}

/*-- Font Size --*/
.font-xxxx-large {
    font-size: var(--font-xxxx-large);
}

.font-xxx-large {
    font-size: var(--font-xxx-large);
}

.font-xx-large {
    font-size: var(--font-xx-large);
}

.font-x-large {
    font-size: var(--font-x-large);
}

.font-large {
    font-size: var(--font-large);
}

.font-medium {
    font-size: var(--font-medium);
}

.font-small {
    font-size: var(--font-small);
}

.font-x-small {
    font-size: var(--font-x-small);
}

.font-xx-small {
    font-size: var(--font-xx-small);
}


/* Background colors */
.bg-color-ui-01 {
    background-color: var(--color-ui-01);
}

.bg-color-ui-02 {
    background-color: var(--color-ui-02);
}

.bg-color-ui-03 {
    background-color: var(--color-ui-03);
}

.bg-color-ui-04 {
    background-color: var(--color-ui-04);
}

.bg-color-ui-05 {
    background-color: var(--color-ui-05);
}

.bg-color-ui-06 {
    background-color: var(--color-ui-06);
    color: var(--font-color-inv);
}

.bg-color-ui-07 {
    background-color: var(--color-ui-07);
    color: var(--font-color-inv);
}

.bg-color-main {
    background-color: var(--color-main);
    color: var(--font-color-inv);
}

/*-- Border color --*/
.border-color-ui-01 {
    border-color: var(--color-ui-01);
}

.border-color-ui-02 {
    border-color: var(--color-ui-02);
}

.border-color-ui-03 {
    border-color: var(--color-ui-03);
}

.border-color-ui-04 {
    border-color: var(--color-ui-04);
}

.border-color-ui-05 {
    border-color: var(--color-ui-05);
}

.border-color-ui-06 {
    border-color: var(--color-ui-06);
}

.border-color-ui-07 {
    border-color: var(--color-ui-07);
}

.border-color-main {
    border-color: var(--color-main);
}

/*-- UI --*/
.ui-tags [class^='icon-'],
ins-tag span.tagged span[class^='icon-'],
ins-tag span.ins-tag span[class^='icon-'] {
    margin-right: 8px;
}

.ui-tags,
ins-tag span.ins-tag {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
    padding: 4px 16px;
    border-radius: 2px;
}

.ui-notifications {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-xx-small);
    line-height: normal;
}

.ui-sidebar {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}

.ui-timeline {
    font-family: var(--font-family-01);
    font-weight: 400;
    font-size: var(--font-xx-small);
    line-height: var(--font-medium);
}

.ui-tooltip {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-small);
    line-height: var(--font-x-large);
}


/*-- Spacers --*/
.spacer {
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 24px;
}

.spacer.xx-small {
    padding-bottom: 4px;
}

.spacer.x-small {
    padding-bottom: 8px;
}

.spacer.small {
    padding-bottom: 16px;
}

.spacer.large {
    padding-bottom: 32px;
}

.spacer.x-large {
    padding-bottom: 40px;
}

.spacer.xx-large {
    padding-bottom: 48px;
}

.spacer.xxx-large {
    padding-bottom: 56px;
}

.spacer.xxxx-large {
    padding-bottom: 80px;
}

.spacer.section {
    padding-bottom: 128px;
}

@media screen and (min-width: 1440px) {
    /* insert spacer adjusment for xx-large */
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    /* insert spacer adjusment for x-large */
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
    /* insert spacer adjusment for large */
}


@media screen and (min-width: 640px) and (max-width: 1023px) {
    /* insert spacer adjusment for medium */
}

@media screen and (max-width: 639px) {

    /* insert spacer adjusment for small */
    .spacer.section {
        padding-bottom: 80px;
    }

    .spacer.xxxx-large {
        padding-bottom: 40px;
    }
}

.placeholder-img {
    background: var(--color-ui-03);
    text-align: center;
    font-size: 48px;
    color: #CCCED3;
    height: 100%;
}

.vertical-align-middle {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

.btn-full ins-button,
.btn-full button {
    width: 100%;
}

.error-message {
    color: var(--error);
    font-family: var(--font-family-03);
    font-size: 12px;
    line-height: 16px;
    margin-top: 4px;
}

.preserve-line-break {
    white-space: pre-wrap;
}

/*-- FONTS --*/

.capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

.inline-list li {
    display: inline-block;
    padding: 0 15px;
}

.inline-list li:first-child {
    padding-left: 0;
}

.inline-list li:last-child {
    padding-right: 0;
}


/********** [Header] **********/
.background-color-gradiant1 {
    background: var(--color-gradiant1);
    color: var(--font-color-inv);
}

.bg-color-main p,
.background-color-gradiant1 p,
.bg-color-main h1,
.background-color-gradiant1 h1 {
    color: var(--font-color-inv);
}

.component-background {
    background: url('../images/components.jpg') no-repeat;
    background-size: cover;
    color: var(--font-color-inv);
}

.component-background .heading-2 {
    color: var(--font-color-inv);
}


.header-top-bar .logo,
.header .logo {
    /* max-width: 145px;
    max-height: 56px; */
    height: 56px;
}

.top-bar,
.header-top-bar {
    background-color: var(--color-ui-01);
    padding: 24px .9375rem;
    /* max-height: 92px; */
}

.header-top-bar a,
.top-bar-right a {
    padding-right: 30px;
    font-weight: 700;
    position: relative;
    font-size: var(--font-x-small);
}

.header-top-bar a:last-child,
.top-bar a:last-child {
    padding-right: 0;
}

.header-top-bar ins-drop-down.hydrated,
.top-bar-right ins-dropdown.hydrated {
    display: inline-block;
}

.header-top-bar .top-bar-right ins-dropdown .ins-dropdown_menu,
.top-bar .top-bar-right ins-dropdown .ins-dropdown_menu {
    right: 0px;
}

.header {
    transition-property: transform;
    transition-duration: 400ms;
    will-change: transform;
}

.header>div {
    border-bottom: 1px solid var(--color-ui-03);
}

.header .nav-bar ins-dropdown .ins-dropdown_menu {
    padding-top: 0px;
}

.header .nav-bar ins-dropdown.active .ins-dropdown_label,
#mobile-menu ins-accordion-link.active .ins-accordion-link_link {
    color: var(--color-main);
}

.header .nav-bar ins-dropdown.active .ins-dropdown_menu-card li.li-active a {
    background: none;
    color: var(--color-main);
}

.header-top-bar ins-dropdown {
    display: inline-block;
}

.header-top-bar ins-dropdown .ins-dropdown_menu {
    /* right: 0; */
    text-align: left;
}

.header-top-bar .cart-count,
.header .top-bar .cart-count {
    font-family: var(--font-family-01);
    font-size: var(--font-xx-small);
    color: var(--font-color-inv);
    background-color: var(--error);
    position: absolute;
    top: -7px;
    right: -7px;
    height: auto;
    line-height: normal;
    padding: 3px 6px;
    border-radius: 50%;
}

.page-header-wrap {
    position: relative;
}

.page-header-wrap .img-wrap img {
    width: 100%;
}

.page-heading {
    max-width: var(--container-max-width);
    margin: 0 auto;
}

/* IF page header has image  */
.page-header-wrap .img-wrap+.page-heading {
    position: absolute;
    left: 50%;
    margin-left: -24em;
    top: 0;
    height: 100%;
    color: var(--font-color-inv);
}


/* [Header Dropdown Overwrite] */
.header-top-bar .ins-dropdown_label .icon-angle-down,
.header .top-bar .ins-dropdown_label .icon-angle-down {
    position: relative;
    top: 0px;
    right: 0px;
    margin-left: 11px;
}

.header-top-bar [class^="icon-"],
.header-top-bar [class*=" icon-"],
.header .top-bar [class^="icon-"],
.header .top-bar [class*=" icon-"] {
    vertical-align: middle;
    font-size: var(--font-x-small);
    margin-right: 5px;
}

.header-top-bar .ins-dropdown_label,
.header .top-bar .ins-dropdown_label {
    color: var(--font-color-head);
    font-family: var(--font-family-01);
    font-weight: 700;
    /* font-size: var(--font-x-small); */
    line-height: var(--font-x-large);
    padding-left: 0px;
}

.header-top-bar .ins-dropdown_label::before,
.header .top-bar .ins-dropdown_label::before {
    content: "\e908";
    font-family: 'insites-20-fonticon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    margin-right: 6px;
    vertical-align: middle;
    font-size: var(--font-medium);
}

.header-top-bar .ins-dropdown_menu ul,
.header .top-bar .ins-dropdown_menu ul {
    list-style: none;
    background-color: var(--color-ui-01);
    margin-left: 0px;
}

.header-top-bar .ins-dropdown_menu a,
.header .top-bar .ins-dropdown_menu a {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-body);
    font-family: var(--font-family-01);
    font-size: var(--font-medium);
    font-weight: 600;
}

.header-top-bar .ins-dropdown_menu a:hover,
.header .top-bar .ins-dropdown_menu a:hover {
    background-color: var(--ins-color-blue-10p);
}

.header-top-bar .ins-dropdown_menu ins-button,
.header-top-bar .ins-dropdown_menu button,
.header .top-bar .ins-dropdown_menu ins-button,
.header .top-bar .ins-dropdown_menu button {
    display: block;
    padding: 0px;
    width: 100%;
    height: auto;
    text-align: left;
}

.header-top-bar .ins-dropdown_menu button:hover,
.header .top-bar .ins-dropdown_menu button:hover {
    background-color: var(--color-ui-01);
}

.header-top-bar .ins-dropdown_menu .btn__label,
.header .top-bar .ins-dropdown_menu .btn__label {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-body);
    font-family: var(--font-family-01);
    font-size: var(--font-medium);
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

/********** [Navigation] **********/
ul.menu {
    margin-left: 0;
    list-style-type: none;
}

.menu li,
.menu a,
.navigation-level-1 {
    font-family: var(--font-family-03);
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
    font-weight: 700;
    text-transform: capitalize;
    text-decoration: none;
    position: relative;
}

.navigation-cta {
    font-family: var(--font-family-01);
    font-weight: 700;
    font-size: var(--font-x-small);
    line-height: var(--font-x-large);
}

.menu li {
    list-style-type: none;
    display: inline-block;
}

.nav-bar .menu a {
    display: block;
    padding: 16px 24px;
    color: var(--font-color-body);
}

.nav-bar .menu a:hover,
.nav-bar .menu a:focus {
    color: var(--color-main);
}

.nav-bar .menu a.active {
    color: var(--color-main);
}

.menu.vertical li {
    display: block;
}

/* [Menu Dropdown Overwrite] */
.ins-dropdown_menu-card{
    overflow: hidden;
}

.menu .ins-dropdown_label {
    display: block;
    padding: 18px 25px;
    color: var(--font-color-body);
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    line-height: 20px;
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
}

.menu .ins-dropdown.lined .ins-dropdown_label {
    padding: 0px;
}

.menu .ins-dropdown_label i {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none;
    right: 5px;
    top: calc(48% - 7px);
}

.menu .ins-dropdown_menu-card ul,
.menu .ins-dropdown_menu-card ul li {
    display: block;
    margin-left: 0px;
}

.header .nav-bar ins-dropdown .ins-dropdown_menu a {
    color: var(--font-color-body);
}

.header .nav-bar ins-dropdown .ins-dropdown_menu a.active,
.header .nav-bar ins-dropdown.active .ins-dropdown_label a,
.header .nav-bar ins-dropdown .ins-dropdown_menu a:hover {
    color: var(--color-main);
}


/********** [Mobile Menu] **********/
.mobile-menu-toggle {
    position: relative;
}

#mobile-menu-btn {
    font-size: var(--font-large);
    color: var(--color-main);
    cursor: pointer;
}

ins-drawer#mobile-menu ul {
    margin-left: 0;
}

ins-drawer#mobile-menu .menu li {
    border-bottom: 1px solid #EBEBEB;
}

ins-drawer#mobile-menu .inner-content li,
ins-drawer#mobile-menu .inner-content .ins-accordion-link {
    padding-left: 1rem;
}

ins-drawer#mobile-menu .menu li:last-child {
    border-bottom: none;
}

ins-drawer#mobile-menu .menu li.small a,
ins-drawer#mobile-menu .ins-accordion-item>.ins-accordion-item_header>.inner-head .heading,
ins-drawer#mobile-menu .user-info ins-accordion-item ins-button button .btn__label {
    font-family: var(--font-family-03);
    font-size: var(--font-medium);
    line-height: var(--font-x-large);
    font-weight: 700;
    text-transform: initial;
    letter-spacing: normal;
}

ins-drawer#mobile-menu .menu li.small a.navigation-cta {
    font-family: var(--font-family-01);
    font-weight: 700;
    line-height: var(--font-x-large);
}

ins-drawer#mobile-menu .user-info ins-accordion-item ins-button:not(:hover) button .btn__label {
    color: var(--font-color-body);
}

ins-drawer#mobile-menu .menu li.small i {
    font-size: var(--font-medium);
    line-height: 19px;
    margin-right: 10px;
}

ins-drawer#mobile-menu .menu li a {
    padding: 20px 0.9375rem;
    color: var(--font-color-body);
}

ins-drawer#mobile-menu .menu li a.active,
ins-drawer#mobile-menu .menu li a:hover,
ins-drawer#mobile-menu .menu li a:focus,
.bottom-bar .menu li a.active,
.bottom-bar .menu li a:hover,
.bottom-bar .menu li a:focus,
.bottom-bar .menu .ins-dropdown_label:hover * {
    color: var(--color-main);
    text-decoration: none;
}

ins-drawer#mobile-menu ins-accordion .inner-head .heading {
    font-size: var(--font-medium);
    color: var(--font-color-body);
}

ins-drawer#mobile-menu ins-accordion .ins-accordion-item_header>.inner-head {
    border: 0px;
}

ins-drawer#mobile-menu .ins-accordion.menu ins-accordion-item:first-of-type .ins-accordion-item_header {
    border-top: solid 0px var(--color-ui-04);
}

ins-drawer#mobile-menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head .heading {
    color: var(--font-color-inv);
}

ins-drawer#mobile-menu .user-info ins-accordion-item ins-button {
    display: block;
    padding: 11px 0px;
    width: 100%;
    height: auto;
    text-align: left;
}

@media screen and (max-width: 1024px) {

    ins-drawer#mobile-menu .ins-drawer-wrap .ins-content,
    ins-drawer#mobile-menu .ins-backdrop-wrap {
        top: 106px;
        padding-bottom: 120px;
        /* Fix for sidebar scroll overflow */
    }

    .top-bar .top-bar-left,
    .top-bar .top-bar-right {
        flex: 0 0 auto;
    }

    .top-bar div:last-child {
        margin-bottom: 0;
    }

}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .top-bar .top-bar-left {
        max-width: 65%;
        margin-right: 5%;
    }

    .top-bar .top-bar-right {
        max-width: 30%;
    }

    .top-bar-right a {
        display: block;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1024px) {
    .page-heading {
        max-width: initial;
    }

    .page-header-wrap .img-wrap+.page-heading {
        max-width: 100%;
        padding: 0 25px;
        left: 0;
        margin-left: 0;
    }
}


/********** [Footer] ***********/
footer .heading {
    font-family: var(--font-family-02);
    font-weight: 600;
    display: block;
}

footer .social {
    justify-content: space-between;
}

footer .social [class*="icon-"] {
    font-size: 1.375rem;
}

footer .social.menu a {
    padding: 0;
}

footer .social.menu li:first-child a {
    padding-left: 0;
}

footer .social.menu li:last-child a {
    padding-right: 0;
}

footer .menu a {
    padding: 0;
}

@media screen and (max-width: 1023px) {
    footer .social {
        justify-content: initial;
    }

    footer .social.menu a {
        padding-right: 24px;
    }
}

footer a,
footer .body-link {
    color: var(--font-color-head);
}

footer a.active,
footer .body-link.active,
footer a:hover,
footer .body-link:hover,
footer a:focus,
footer .body-link:focus {
    color: var(--color-main);
}

footer .bottom-footer,
footer .bottom-footer p,
footer .bottom-footer a {
    color: var(--font-color-inv);
    font-size: 12px;
    line-height: 15px;
}

footer .bottom-footer a:hover,
footer .bottom-footer a:focus {
    text-decoration: underline;
}

.scroll-to-top-btn {
    position: fixed;
    right: 10px;
    bottom: 5vh;
    width: 50px;
    height: 50px;
    transition: all 0.4s 'ease';
    text-align: center;
    display: none;
}

.scroll-to-top-btn .ins-button {
    width: 40px;
    height: 40px;
}

.scroll-to-top-btn ins-button button.ins-button {
    background-color: #FAFBFC;
    color: #595959;
}

.scroll-to-top-btn.visible {
    display: block;
    z-index: 1;
}

.scroll-to-top-btn.visible:hover ins-button button.ins-button {
    background-color: #F2F4F8;
    color: #2B2B2B;
}

.scroll-to-top-btn ins-button .btn__icon {
    vertical-align: middle;
    height: 20px;
    font-size: 20px;
}

@media screen and (max-width: 1024px) {
    footer .text-right {
        text-align: left;
        margin-top: 15px;
    }
}


/********** [Breadcrumbs] **********/
.breadcrumbs {
    margin-bottom: 0px;
    padding: 16px 0;
}

.breadbrumbs__wrapper {
    border-bottom: 1px solid var(--color-ui-03);
}

.breadcrumbs span,
.breadcrumbs span a {
    color: var(--font-color-body);
    font-family: var(--font-family-03);
    font-weight: 400;
    font-size: var(--font-small);
    line-height: var(--font-small);
}

.breadcrumbs span a:hover {
    color: var(--color-main-hover);
}

.breadcrumbs span {
    margin-right: 16px;
}

.breadcrumbs span:not(:first-child) {
    margin-left: 16px;
}

.breadcrumbs i {
    font-size: var(--font-x-small);
    color: var(--color-ui-05);
}

.breadcrumbs span.active,
.breadcrumbs span.active a {
    font-weight: 600;
    color: var(--font-color-head);
    font-family: var(--font-family-01);
    line-height: var(--font-medium);
}


/********** [Home Page] **********/
.homepage-banner-wrap {
    position: relative;
    width: 100%;
}

.homepage-wrap .ins-carousel.layout-1 .ins-carousel_body,
.homepage-wrap .ins-carousel.layout-2 .ins-carousel_body {
    padding: 0;
    position: relative;
}

.homepage-wrap hr.service-list-hr {
    display: none;
}

/* Homepage Banner */
#homepage-banner .slide-container {
    background-size: cover;
    position: relative;
    background-color: #eee;
    width: 100%;
    min-height: 600px;
}

#homepage-banner .slide-container .wrapper .grid-x {
    width: 100%;
    /* max-width: 1024px; */
}

#homepage-banner .img-wrap {
    position: relative;
}

#homepage-banner .img-wrap img {
    width: 100%;
    min-height: 600px;
    object-fit: cover;
}

#homepage-banner .slide-content {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

#homepage-banner .heading-1,
#homepage-banner p {
    color: var(--font-color-inv);
}

@media screen and (max-width: 1024px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 3rem;
        line-height: 52px;
    }

    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 430px;
    }
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 2.25rem;
        line-height: 42px;
    }

    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 310px;
    }
}

@media screen and (max-width: 639px) {
    .homepage-wrap .ins-carousel_slides .heading {
        font-size: 2rem;
        line-height: 39px;
    }

    #homepage-banner .slide-container,
    #homepage-banner .img-wrap img {
        min-height: 382px;
    }
}

.homepage-banner-wrap .ins-carousel .ins-carousel_paginations {
    position: absolute;
    bottom: 3.5%;
}

@media screen and (max-width: 639px) {
    .homepage-banner-wrap .ins-carousel .ins-carousel_paginations {
        /* left align w/ slider content */
        text-align: left;
        padding-left: 12%;
    }
}


/********** [About Us] **********/
.about-us .about-section-title {
    letter-spacing: 2.5px;
    text-transform: capitalize;
    font-size: var(--font-small);
    font-weight: 400;
}

/********** [Dynamic Content Styling] **********/

.dynamic-content,
.dynamic-content p {
    color: var(--font-color-body);
}

.dynamic-content h1,
.dynamic-content h2,
.dynamic-content h3,
.dynamic-content h4,
.dynamic-content h5 {
    color: var(--font-color-head);
}

.dynamic-content p,
.dynamic-content h1,
.dynamic-content h2,
.dynamic-content h3,
.dynamic-content h4,
.dynamic-content h5 {
    margin-bottom: calc(2 * var(--gutter));
}

.dynamic-content table,
.dynamic-content table tbody,
.dynamic-content table thead,
.dynamic-content table td,
.dynamic-content table th {
    border: none;
    outline: none;
}

.dynamic-content table td,
.dynamic-content table th {
    vertical-align: top;
}

.dynamic-content table td:first-child,
.dynamic-content table th:first-child {
    padding-left: 0;
}

.dynamic-content table td:last-child,
.dynamic-content table th:last-child {
    padding-right: 0;
}

/* Dynamid content table = 2 column */
.dynamic-content table td+td {
    width: 50%;
}

/* device lower smaller than tablet */
@media screen and (max-width: 1023px) {
    .dynamic-content table td {
        width: 100%;
        display: block;
    }

    .dynamic-content table td+td {
        width: 100%;
        padding-top: calc(2 * var(--gutter));
    }
}


/********** [Our Team] **********/
.our-team img,
.our-team .placeholder-img {
    border-radius: 5px;
    object-fit: cover;
}

.our-team .team-list .description {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
}

.our-team .details a {
    font-size: var(--font-medium);
}

.our-team .details p [class*="icon-"] {
    padding-right: 12px;
}

.our-team .social.menu [class*="icon-"] {
    font-size: var(--font-large);
    color: var(--font-color-head);
}

.our-team .social.menu a {
    padding: 20px 0px;
}


/********** [Blog / News] **********/
.go-back-nav {
    font-family: var(--font-family-02);
    font-weight: 600;
    font-size: var(--font-small);
    line-height: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.blog .ins-select-wrap.small .ins-select-options-wrap {
    min-width: initial;
}

.blog-list .spacer.small {
    padding-left: 0px;
    padding-right: 0px;
}

.blog-list .body-link {
    font-family: var(--font-family-03);
    font-weight: 600;
    font-size: var(--font-small);
    line-height: 17px;
}

.blog-list .body-link i {
    margin-left: 12px;
    font-weight: 600;
}

.blog img {
    border-radius: 5px;
}




/********** [Services - INS DB] **********/
.service-heading {
    position: relative;
}

.service-heading .placeholder-img {
    background: #909090;
}

.service-heading h1,
.service-heading p {
    color: var(--font-color-inv);
}

.service-list a,
.service-list .body-link {
    color: var(--font-color-head);
}

.service-list .ins-card-wrap {
    padding: 48px 56px;
    height: 100%;
    box-shadow: 0px 12px 12px rgba(140, 148, 164, 0.14), 0px 2px 5px rgba(140, 148, 164, 0.2);
}

@media screen and (max-width: 1024px) {
    .service-list .ins-card-wrap {
        padding: 32px;
    }
}

.service-list .content {
    color: var(--font-color-body);
    display: flex;
    flex-direction: column;
    height: 100%
}

.service-list .content .body-link {
    margin-top: auto;
    font-family: var(--font-family-02);
    font-weight: 600;
}

.service-list .content .body-link i {
    margin-left: 12px;
    font-weight: 600;
}

.service-list a {
    display: block;
    height: 100%;
}

.service-list a:hover .content .name,
.service-list a:focus .content .name,
.service-list a:hover .content .body-link,
.service-list a:focus .content .body-link {
    color: var(--color-main);
}

.service-list a:hover .ins-card-wrap,
.service-list a:focus .ins-card-wrap {
    border-color: var(--color-main);
}


/* Service Details */
.service-details .image-wrap img {
    border-radius: 5px;
}

.service-details .content .dynamic-content:last-child .spacer.x-large {
    display: none;
}

.service-details .image-wrap,
.service-details .product-heading {
    position: relative;
}

.service-details .content-wrap {
    text-align: center;
    /* padding: 0 40px; */
}

.service-details .content-wrap.overlay {
    padding: 0 0;
    position: absolute;
    z-index: 1;
    height: 100%;
}


@media screen and (max-width: 639px) {
    .service-details .content-wrap.overlay {
        position: absolute;
        color: var(--font-color-body);
        text-align: left;
        margin-bottom: 30px;
        padding: 0 20px;
    }

    .service-details .content-wrap.overlay .font-heading {
        color: var(--color-main);
        ;
    }
}



/**
Contact Us
*/
.contact-us #contact-google-map {
    width: 100%;
    height: 300px;
}

.google-map {
    margin-bottom: 1rem;
}

.contact-us .contact-details {
    font-size: var(--font-small);
    line-height: 17px;
}

.contact-us .contact-details li {
    position: relative;
    padding-left: 30px;

}

.contact-us .contact-details i {
    /*padding-right: 15px;*/
    position: absolute;
    left: 0px;
    top: 3px;
}

.contact-us .opening-hours,
.contact-us .opening-hours p {
    font-size: var(--font-small);
    line-height: 24px;
    font-family: var(--font-family-02);
}

.contact-us .opening-hours .bold,
.contact-us .opening-hours .bold p {
    font-weight: 700;
}


.ins-input-tel-wrap .iti .iti__flag-container .iti__selected-flag {
    padding: 10px 8px;
    line-height: 20px;
}


/**
Contact Us
*/
@media screen and (max-width: 639px) {
    #subscribe-form .subscribe-component {
        width: 100%;
        text-align: left;
    }
}

/**********
 [Terms & Conditions / Privacy Policy]
**********/
.legal {
    font-size: var(--font-small);
    line-height: 26px;
}

/* Main list styling */
.legal ol {
    counter-reset: item;
    margin-left: 0px;
}

.legal li {
    position: relative;
}

.legal li:last-child {
    margin-bottom: 0;
}

.legal ol>li {
    counter-increment: item;
    padding-left: 50px;
    list-style: none;
}

.legal ol>li:before {
    content: counters(item, ".") ". ";
    position: absolute;
    left: 0px;
    top: -2px;
    min-width: 57px;
    /* inherit heading-3 */
    font-size: var(--font-xx-large, 2rem);
    line-height: 39px;
    font-weight: 600;
}

/* Sub list styling */
.legal li>ol,
.legal li>ul {
    margin-left: 1rem;
    margin-top: 1rem;
}

.legal>ol>li>ol>li {
    padding-left: 40px;
}

.legal>ol>li>ol>li>ol>li {
    padding-left: 50px;
}

.legal>ol>li>ol>li>ol {
    margin-bottom: 1rem;
}

.legal ol ol>li:before {
    font-size: var(--font-small);
    line-height: 26px;
    font-weight: 400;
    text-align: left;
    min-width: initial;
}

/**
SYSTEM PAGES

Thank you page
*/
.thank-you .thank-you-img i {
    font-size: 4rem;
    color: var(--success);
}

ins-card.bg-grey .ins-card-wrap {
    background-color: var(--color-ui-02);
    color: #595959;
}

/**
PLUGINS Custom

Notyf 
*/
.notyf {
    z-index: 999999;
}

.notyf__toast--disappear {
    animation-delay: unset;
}

.notyf__toast {
    background: var(--color-ui-06);
    padding: 0;
}

.notyf__wrapper {
    padding: 0;
}

.notyf__icon {
    vertical-align: middle;
    margin: 0;
    width: auto;
    background: none;
    animation-delay: unset;
    height: 100%;
    position: absolute;
}

.notyf__message {
    font-family: var(--font-family-01);
    font-size: var(--font-small);
    line-height: var(--font-medium);
    vertical-align: middle;
    width: 260px;
    min-height: 48px;
    font-weight: 700;
    text-align: left;
    margin-left: 48px;
    padding: 16px;
    animation-delay: unset;
}

.notyf__toast [class*="notyf__icon--"] {
    font-family: 'insites-20-fonticon' !important;
    font-style: normal;
    font-size: 14px;
    border-radius: 0;
    height: 100%;
    width: 48px;
    vertical-align: middle;
    text-align: center;
    color: var(--font-color-inv) !important;
}

.notyf__toast [class*="notyf__icon--"]:before {
    transform: none;
    background: none;
    display: block;
    position: relative;
    top: 25%;
    left: unset;
    width: auto;
}

.notyf__toast .notyf__icon--error {
    background-color: var(--error);
}

.notyf__toast .notyf__icon--success {
    background-color: var(--success);
}

.notyf__toast .notyf__icon--warning {
    background-color: var(--warning);
}

.notyf__toast .notyf__icon--error:before {
    content: "\e92a";
}

.notyf__toast .notyf__icon--success:before {
    content: "\e926";
}

.notyf__toast .notyf__icon--warning:before {
    content: "\e91d";
}

.notyf__toast [class*="notyf__icon--"]:after {
    content: '';
    display: none;
}



/** SYSTEM PAGES **/
.system-page {
    min-height: 100vh;
    /* background-color: var(--color-ui-02); */
}

.system-page .header {
    border-bottom: 1px solid var(--color-ui-03);
    background-color: var(--color-ui-01);
}

.system-page .system-content {
    margin: auto;
    /* background-color: var(--color-ui-02); */
}

.system-page .footer>.grid-container {
    border-top: 1px solid var(--color-ui-04);
}

.system-page .title {
    font-family: var(--font-family-01);
    font-style: normal;
    font-weight: bold;
    color: var(--color-ui-04);
    font-size: 9.375rem;
    line-height: 180px;
}

.system-page .sub-title {
    font-family: var(--font-family-01);
    font-style: normal;
    font-weight: bold;
    font-size: 2.5rem;
    color: var(--font-color-head);
    line-height: 48px;
}

.system-page .context {
    max-width: 332px;
    margin: auto;
}

.system-page .context p {
    font-family: var(--font-family-02);
    font-style: normal;
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 24px;
}





/********************************************
 *********[Home Page - Version 2] ***********
 *******************************************/


/****** [Overwrite] ******/
.homepage-v2-banner-wrap {
    position: relative;
    width: 100%;
}

.homepage-v2-banner-wrap .main-container {
    position: relative;
}

.homepage-v2-banner-wrap .vertical-align-middle {
    align-items: flex-start;
}

@media print,
screen and (min-width: 1024px) {
    .homepage-v2-banner-wrap .wrapper {
        padding-left: 0;
        padding-right: 0;
    }

    .homepage-v2-banner-wrap .main-text {
        z-index: 99;
        position: absolute;
        width: 50%;
        height: 100%;
    }

    .homepage-v2-banner-wrap .main-text .text-content {
        position: absolute;
        width: 54%;
        right: 10%;
        height: 100%;
        max-width: 440px;
        align-items: initial;
    }
}

.homepage-v2-banner-wrap .main-text .text-content p {
    font-family: var(--font-family-02);
    font-size: var(--font-medium);
}



.homepage-v2-banner-wrap .main-image {
    position: relative;
}

.homepage-v2-banner-wrap .main-image img {
    width: 100%;
}

#homepage-carousel .slide-container {
    padding: 12px;
}

.homepage-wrap .homepage-v2-carousel .ins-carousel.layout-1 .ins-carousel_body,
.homepage-wrap .homepage-v2-carousel .ins-carousel.layout-2 .ins-carousel_body {
    position: relative;
    padding: 0 84px;
}

.homepage-clients p {
    font-size: var(--font-medium);
}

.recent-blogs .recent-blog-list .image {
    border-radius: 5px;
}

.homepage-clients .clients-container {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.homepage-clients .clients-container .client-item {
    width: 19%;
}

.homepage-clients .clients-container .client-item:hover {
    box-shadow: 0 12px 12px rgba(140, 148, 164, .05), 0 2px 5px rgba(140, 148, 164, .12);
}

.homepage-clients .clients-container .client-item a {
    display: block;
    border-radius: 5px;
}

.homepage-clients .clients-container .client-item .img-wrap {
    padding: 32px 32px;
}

.homepage-clients .clients-container .client-item .img-wrap img {
    max-width: 100%;
}


@media screen and (max-width: 1024px) {

    .homepage-v2-wrap.main-container,
    .homepage-v2-banner-wrap .main-container {
        margin: 0px 0px;
    }
}

@media screen and (max-width: 639px) {

    .subscribe-wrapper.grid-container,
    .footer>.grid-container,
    .homepage-v2-wrap>.grid-container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .homepage-v2-banner-wrap .main-text {
        position: relative;
        width: 100%;
        height: auto;
    }

    .homepage-v2-banner-wrap .main-text .text-content {
        position: relative;
        transform: translate(0, 0);
        width: 100%;
        right: auto;
        top: auto;
    }

    .homepage-clients .clients-container .client-item {
        width: 32%;
    }

    .homepage-clients .clients-container .client-item .img-wrap {
        padding: 25px 25px;
    }
}

/* Job search update */

#jobSearchButton {
    position: relative;
}

#jobSearchButton div {
    text-align: left;
}
#jobSearchButton button {
    width: 200px; 
}


#jobSearchToolT {
    position: absolute;
    z-index: 2;
    right: 16px;
    top: 3px;
    bottom: 0;
}

#jobSearchToolT  .ins-tooltip-wrap .tooltip {
    transform: translate3d(-191px, -92px, 0px) !important;
}

#jobSearchToolT   .ins-tooltip-wrap .tooltip-label {
    background-color: #ffff;
}

#jobSearchToolT   .ins-tooltip-wrap .tooltip-label:hover {
    background-color: var(--ins-color-blue);    
}

@media screen and (max-width:639px) {
    #jobSearchButton button {
    width: 100%; 
}
}

#jobsearchAccord {
    position: relative;
  }
  #jobSearchToolTMenu {
    position: absolute;
      right: 16px;
      top: 10px;
      bottom: 0;
  }