@charset "UTF-8";

/*
Theme Name: Versa Bootstrap
Text Domain: Versa Bootstrap
Description: Versa Bootstrap
Tags: responsive
Version: 1.0
Author: Versa Networks
*/

:root {
  --text-xs: 0.75rem;  /*12px based on root font size of 16*/
  --text-sm: 0.813rem; /*13px */
  --text-md: 1.125rem; /*18px */
  --text-lg: 1.4375rem; /*23px */
  --text-default: 1rem;  
  --versa-blue: #0095DA;
  --light-blue: #E0F2FB;
  --light-blue2: #009ADE;
  --light-blue3: #0071BC;
  --light-blue4: #C7E0EB;
  --light-blue5: #CCEAF8;
  --versa-spring-green: #78c900;
  --versa-emerald-green: #5da602;
  --dark-blue: #002060;
  --dark-blue: #002060;
  --dark-grey: #515254;
  --light-grey: #AAAAAA;
  --light-grey2: #EEF4F7;
  --light-grey3: #CDCDCD;
  --gradient-blue: linear-gradient(90deg, var(--versa-blue), var(--dark-blue));
  --gradient-blue2: linear-gradient(to right, var(--versa-blue) 0%, var(--light-blue3) 100%);
  --gradient-blue3: linear-gradient(180deg, var(--versa-blue) 0%, var(--light-blue3) 100%);
  --gradient-green: linear-gradient(90deg, var(--versa-spring-green), var(--versa-emerald-green));
  --gradient-green2: linear-gradient(90deg, #4c8604, #4c8604);
  --gradient-grey: linear-gradient(#fff 0%, #fff 10%, #f7f7f7 100%) left top;
  --gradient-grey2: linear-gradient(180deg, #FFF 60.68%, #F7F7F7 100%);
  --bs-border-color: var(--light-grey); 

/*NEW - START */
 /*Text*/
  --text-default: 1rem;  
  --text-xxs: 0.65rem; /*10.4 px - new header CTA size)*/
  --text-xs: 0.75rem;  /*12px based on root font size of 16*/
  --text-sm: 0.813rem; /*13px */
  --text-md: 1.125rem; /*18px */ /*spaced title */
  --text-md-lg: 1.5rem;
  --text-lg: 2.25rem; /*36px */
  --text-xl: 3.125rem; /*50px*/
  --text-xxl: 3.75rem; /*60px*/
  --text-xxxl: 4.375rem; /*80px*/
  --text-xxxxl: 7.5rem; /*120px*/
  
  /* native bootstrap display-1 */
  /*--text-xxxl: 5rem;*/ /*80px*/
  --letter-spacing-1: 1pt;
  --letter-spacing-2: 1.6pt;
  --letter-spacing-3: 2pt;
  --letter-spacing-4: 2.5pt;
    /*Greys and black*/
  --versa-grey: #515254; /*Default text*/
  --versa-grey-85: #747576;
  --versa-grey-40: #B9BABB;
  --versa-grey-15: #DCDCDD;
  --versa-grey-15-transparent: 220, 220, 221, 0.8;
  --versa-slate-grey: #23282C;
  --versa-slate-grey-rgb: 35, 40, 44;
  --versa-rich-black: #020304;

    /*Blues primary*/
  --versa-sapphire-blue: #0071BC;
  --versa-sapphire-blue-rgb: 0, 113, 188;
  --versa-sapphire-blue-85: #2C8DCE;
  --versa-sapphire-blue-40: #66AAD7;
  --versa-sapphire-blue-15: #AFD4EE;
  --versa-azure-blue: #0095DA;
  --versa-azure-blue-85: #5BCBFF;
  --versa-azure-blue-40: #B6E8FF;
  --versa-azure-blue-15: #D6F2FF;
  /*Greens primary*/
  --versa-emerald-green-rgb: 147, 213, 0;
  --versa-emerald-green: #62BB46;
  --versa-emerald-green-85: #81C96B;
  --versa-emerald-green-40: #A1D690;
  --versa-emerald-green-15: #D0EBC8;
  --versa-spring-green:#93D500;  /*BTN*/
  --versa-spring-green-85:#A9DD33; 
  --versa-spring-green-40:#BEE666; 
  --versa-spring-green-15:#DFF2B3; 

  /*Secondary colours*/
  --versa-frost: #F3F8F2;
  --versa-frost-rgba: 220, 220, 221, 0.8;
  --versa-teal: #0D868E;
  --versa-fuchsia: #EC058E; 
   /*Blues secondary */
  --versa-royal-blue: #002060;
  --versa-royal-blue-85: #0041C2;
  --versa-royal-blue-40: #98BAFF;
  --versa-royal-blue-15: #E5EEFF;
  --versa-midninght-indigo: #091634;
  --versa-midninght-indigo-rgb: 9, 22, 52;
  --versa-dark-blue: #0B1B41;
  /*Orange*/
  --versa-tangerine: #FF9914;
  --versa-tangerine-85: #FEB14C;  /*15% lighter light-gold */
  --versa-tangerine-40: #FFD7A4;  /*60% lighter tan*/
  --versa-tangerine-15: #FFF1DE;  /*85% lighter cornsilk*/
 /*Greys*/
  --versa-light-grey: #ACB6C4;
  --versa-light-grey-85: #BFC7D2;
  --versa-light-grey-40: #DEE2E8;
  --versa-light-grey-15: #F3F5F7; /*New Gartner bg*/
  --versa-light-grey-15-rgb: 243, 245, 247; /*New Gartner bg*/
  --versa-accessible-light-grey: #737373;

   /*Gradients and BGs*/
  --versa-gradient-blue: linear-gradient(to right, var(--versa-sapphire-blue) 0%, var(--versa-azure-blue) 100%);
  --versa-gradient-green: linear-gradient(to right, var(--versa-emerald-green) 0%, var(--versa-spring-green) 100%);
  --bg-versa-ripple-grey: url('versa-ripple-light-grey-blurred.png');
  --bg-versa-ripple-main: url('versa-ripple-main.png');

  /*Utility*/
  --border-versa-grey-thin: 1px solid var(--versa-grey);
  --border-versa-grey-15-thin: 1px solid var(--versa-grey-15);
  --border-radius-sm: 8px;
  --border-radius-md: 10px;
  --border-radius-lg: 15px; /*CHECK and sync with actual*/
  --border-radius-xl: 20px;
  --border-radius-xxl: 30px;

  --bg-white-transparent-50: 255, 255, 255, 0.5;
  --transparent-rgba: 255, 255, 255, 0;
    --clip-path-medium: 'M 119.11 25.39 c 4.97 -3.78 7.88 -9.67 7.88 -15.91 V 0 S 0 0 0 0 v 104 h 9.1 c 4.38 0 8.63 -1.44 12.11 -4.09 L 119.11 25.39 Z';
    --clip-path-medium-height: 104px;
    --clip-path-medium-width: 127px;
    --clip-path-large: 'M0,0v160h22.53c2.28-.21,7.4-1.49,15.5-7.8,15.08-11.74,159.34-123.6,159.34-123.6,0,0,6.8-3.97,6.8-12.66V0H0Z';
    --clip-path-large-height: 160px;
    --clip-path-large-width: 204px;

}


@font-face {
  font-family: "Gilroy";
  src: url('/wordpress/wp-content/themes/bootstrap-theme/assets/fonts/GilroyLight/font.woff2') format('woff2'), url('fonts/GilroyLight/font.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Gilroy";
  src: url('/wordpress/wp-content/themes/bootstrap-theme/assets/fonts//GilroyRegular/font.woff2') format('woff2'), url('fonts/GilroyRegular/font.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('/wordpress/wp-content/themes/bootstrap-theme/assets/fonts//GilroyMedium/font.woff2') format('woff2'), url('fonts/GilroyMedium/font.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('/wordpress/wp-content/themes/bootstrap-theme/assets/fonts//GilroySemiBold/font.woff2') format('woff2'), url('fonts/GilroySemiBold/font.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Gilroy";
  src: url('/wordpress/wp-content/themes/bootstrap-theme/assets/fonts//GilroyBold/font.woff2') format('woff2'), url('fonts/GilroyBold/font.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}


/*NEW - END */





/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  font-family: "Lato", Corbel, Calibri, Tahoma, sans-serif;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: #444;
 
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Override for WP block separators used to split editor windows */
.wp-block-separator {
  display: none;
}


/* Reset */

/* Override pointer-events for links */
a {
  pointer-events: auto !important;
}


a:link,
a:visited,
a:active {
  text-decoration: none;
}


p a:link,
p a:visited,
li a:link,
li a:visited,
dd a:link,
dd a:visited {
  color: #009ade;
}

.card-link {
  text-decoration: none !important;
}

.card-certificates {
    max-height: 110px;
}

.card-title-size {
    font-size: 24px
}
.img-broken-state { 
    width: 70%
}

h5 a:hover,
h5 a:active,
p a:hover,
p a:active,
li a:hover,
li a:active,
dd a:hover,
dd a:active {
  text-decoration: none;
}

ul li:before {
  /*background-image: none;*/
}


ul[role='list'],
ol[role='list'] {
  list-style: none;
}

p:empty {
  height: 0;
  margin: 0;
  padding: 0;
}



/*NEW*/

/*Utility*/
.text-md {
    font-size: var(--text-md);
}

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

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

/*CTAs and links*/
.v-link {
    text-decoration: underline 0.12em var(--versa-azure-blue) !important;
    text-underline-offset: 0.25em;
    font-size: 1rem;
}

.v-link:hover {
    color: var(--versa-azure-blue) !important;
}

.v-btn {
    display: flex;
    font-family: 'Gilroy', sans-serif;
    height: 54px; /*must set height*/
    overflow: hidden;
}

.v-btn span  {
    background-color: var(--versa-spring-green);
}

.v-btn .v-text {
    display: flex;
   border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
    color: var(--versa-rich-black);
    font-size: var(--text-default);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-2);
    line-height: 1;
    padding: 0 5px 0 21px;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 1;
}

.v-btn .v-text span {
    align-self: center;
}

.v-btn .v-angle-left {
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    width: 40px; 
    height: 100% !important;
    transform: skewX(-12deg);
    margin-left: -25px;
    margin-bottom: -1px;
    transform-origin: center; 
    z-index: 0;
}

.v-btn .v-angle-right {
    border-top-left-radius: var(--border-radius-sm);
    border-bottom-left-radius: var(--border-radius-sm);
    width: 25px; 
    height: auto;
    margin-left: 10px; 
    margin-bottom: -1px;
    border-bottom-left-radius: 10px; 
    transform: skewX(-12deg);
}

.v-btn .v-arrow {
    margin-left: -15px;
    z-index: 1; display: flex; 
    flex-direction: column; 
    padding: 0 15px 0 5px;
    justify-content: center;
    border-radius: 8px;
    border-radius: 8px;
}

.v-btn .v-arrow span {
    height: 12px;
    width: 12px;
    background-image: url("./assets/images/new-homepage/chevron-angled-right-grey.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.v-btn:hover {
    filter: brightness(105%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
    text-decoration: none; 
    /*filter: invert(52%) sepia(41%) saturate(5998%) hue-rotate(169deg) brightness(95%) contrast(101%);*/        
}


.v-btn--fuschia span  {
    background-color: var(--versa-fuchsia);
}

.v-btn--blue span  {
    background-color: var(--versa-sapphire-blue);
}

.v-btn--blue .v-text,
.v-btn--fuschia .v-text {
    color: #fff;
}

.v-btn--blue .v-arrow span,
.v-btn--fuschia .v-arrow span {
    background-image: url(./assets/images/new-homepage/chevron-angled-right-white.svg);
}

.v-btn-small {
    height: 44px;
} 

.v-btn-small .v-text {
    font-size: var(--text-sm);
}

/*NEW - end*/

/* Buttons - Variants */
.v-btn-variant {
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjYuMTcgNjcuMiI+CiAgICA8cGF0aCBkPSJNNTI2LjE3LDM3LjI4VjBIMHY2Ny4yaDQ5Ni4zNGMxLjY2LDAsNS41OC0uMSw4LjcxLTIuODlsLjA1LS4wNGMyLjk4LTIuOTYsMTcuMDUtMTYuODUsMTcuMDUtMTYuODUsMy4xMS0zLjA0LDMuOTktNSw0LjAyLTloMHYtLjE3aDB2LS45NWgwczAtLjAyLDAtLjAyWiIgZmlsbD0iIzk0YzgzZiIgLz4KPC9zdmc+');
    background-position: right bottom;
    background-size: cover;
    width: fit-content;
    display: flex;
    position: relative;
    font-weight: 500;
    font-family: 'Gilroy';
    letter-spacing: var(--letter-spacing-2);
    color: var(--versa-rich-black);
}

.v-btn-variant:hover {
    color: var(--versa-rich-black);
    text-decoration: none;
}

.v-btn-variant.v-btn-variant--small .v-btn-variant-wrapper {
    padding: 8px 20px;
    font-size: var(--text-sm);
}

.v-btn-variant.v-btn-variant--blue,
.v-btn-variant.v-btn-variant--blue:hover {
    color: #fff;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjYuMTcgNjcuMiI+Cgk8cGF0aCBkPSJNNTI2LjE3LDM3LjI4VjBIMHY2Ny4yaDQ5Ni4zNGMxLjY2LDAsNS41OC0uMSw4LjcxLTIuODlsLjA1LS4wNGMyLjk4LTIuOTYsMTcuMDUtMTYuODUsMTcuMDUtMTYuODUsMy4xMS0zLjA0LDMuOTktNSw0LjAyLTloMHYtLjE3aDB2LS45NWgwczAtLjAyLDAtLjAyWiIgZmlsbD0iIzAwNzFCQyIvPgo8L3N2Zz4K');
}

.v-btn-variant:not(.v-btn--outline):hover {
    filter: brightness(110%);
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.v-btn-variant .v-btn-variant-wrapper {
    border-right: none;
    padding: 12px 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.v-btn-variant.v-btn--outline .v-btn-variant-wrapper {
    padding: 10px 19px; /**to account for the outline */
}

.v-btn-variant .v-btn-edge {
    width: 27px;
    height: 25px;
    background: none;
}

.v-btn-variant .chevron-angled-right,
.v-btn-variant .chevron-angled-right-white {
    position: absolute;
    right: 20px;
    top: calc(50% - 7px);
    display: inline-block;
    height: 12px;
    width: 12px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOSA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxwYXRoIGQ9Ik0wLjc1NjkyNyA3LjUyNzgzTDcuNDU1MDIgMS4xMzQyIiBzdHJva2U9IiMxQTFBMUEiIHN0cm9rZS13aWR0aD0iMC45NTkwNDUiLz4NCgk8cGF0aCBkPSJNNy42MjIzOCA3Ljg0NzY2TDcuNjIyMzggMS42MjE4QzcuNjIyMzggMS4xNzYwMyA3LjI2MTAxIDAuODE0NjYyIDYuODE1MjQgMC44MTQ2NjJMMC41ODkzODEgMC44MTQ2NjIiIHN0cm9rZT0iIzFBMUExQSIgc3Ryb2tlLXdpZHRoPSIwLjk1OTA0NSIvPg0KPC9zdmc+DQo=');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    transition: all .2s ease-in-out; 
}

.v-btn-variant:hover .chevron-angled-right,
.v-btn-variant:hover .chevron-angled-right-white {
    transform: scale(1.4); 
}

.v-btn-variant--small:hover .chevron-angled-right,
.v-btn-variant--small:hover .chevron-angled-right-white {
    transform: scale(1.2); 
}

.v-btn-variant.v-btn--outline {
    background: none;
}

.v-btn-variant.v-btn--outline .v-btn-edge {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNzEuNDkgNjkuMzEiPg0KICAgIDxwYXRoIGQ9Ik03MS40OSw4LjgzczAtLjA1LDAtLjA3aDBWMGgtNXY4Ljk5Yy0uMDIsNi43LS45Nyw5LjU4LTYuOSwxNS4zOCwwLDAtMjkuMjcsMjguOTItMzUuNjIsMzUuMjEtNS4xNSw0LjU1LTExLjcxLDQuNzMtMTQuODUsNC43M2gwcy05LjExLDAtOS4xMSwwdjVoOS4xMWMzLjQ3LDAsMTEuNjctLjIxLDE4LjIyLTYuMDRsLjEtLjA5YzYuMjQtNi4xOCwzNS42NS0zNS4yNSwzNS42NS0zNS4yNSw2LjUtNi4zNSw4LjM1LTEwLjQ2LDguNC0xOC44Mmgwdi0uMjhaIiBmaWxsPSIjMDIwMzA0Ii8+DQo8L3N2Zz4=');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}

.v-btn-variant.v-btn--outline .v-btn--outline-right {
    border-top-right-radius: var(--border-radius-sm);
    border-left: none;
    border-bottom: none;
}

.v-btn-variant.v-btn--outline:hover .v-border-rich-black {
    border-color: var(--versa-spring-green);
    color: var(--versa-spring-green);
}

.v-btn-variant.v-btn--outline:hover .chevron-angled-right {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOSA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTxwYXRoIGQ9Ik0wLjc1NjkyNyA3LjUyNzgzTDcuNDU1MDIgMS4xMzQyIiBzdHJva2U9IiM5M0Q1MDAiIHN0cm9rZS13aWR0aD0iMC45NTkwNDUiLz4NCgk8cGF0aCBkPSJNNy42MjIzOCA3Ljg0NzY2TDcuNjIyMzggMS42MjE4QzcuNjIyMzggMS4xNzYwMyA3LjI2MTAxIDAuODE0NjYyIDYuODE1MjQgMC44MTQ2NjJMMC41ODkzODEgMC44MTQ2NjIiIHN0cm9rZT0iIzkzRDUwMCIgc3Ryb2tlLXdpZHRoPSIwLjk1OTA0NSIvPg0KPC9zdmc+DQo=');
    transition-property: all;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.v-btn-variant.v-btn--outline:hover .v-btn-edge {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MS40OSA2OS4zMSI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogIzk1YzkzZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj4KICAgIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTcxLjQ5LDguODNzMC0uMDUsMC0uMDdoMFYwaC01djguOTljLS4wMiw2LjctLjk3LDkuNTgtNi45LDE1LjM4LDAsMC0yOS4yNywyOC45Mi0zNS42MiwzNS4yMS01LjE1LDQuNTUtMTEuNzEsNC43My0xNC44NSw0LjczaDBzLTkuMTEsMC05LjExLDB2NWg5LjExYzMuNDcsMCwxMS42Ny0uMjEsMTguMjItNi4wNGwuMS0uMDljNi4yNC02LjE4LDM1LjY1LTM1LjI1LDM1LjY1LTM1LjI1LDYuNS02LjM1LDguMzUtMTAuNDYsOC40LTE4LjgyaDB2LS4yOFoiLz4KICA8L2c+Cjwvc3ZnPg==');
}

/* Buttons - Variants - END*/


/*New nav commented out*/

/*
.nav-link {
  transition: none !important;
}

.navbar-toggler {
  transition: none !important;
}

*/

.versatility.nav-item.selected {
    background: #fff;
}

.nav-indent {
    margin-left: 20px;
}

.collapsing {
  height: 0 !important;
  overflow: hidden !important;
  transition: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/*Utility classes*/
.nowrap {
    white-space: nowrap;
}

.flex-even {
  flex: 1;
}

.flex {
  display: flex;
}

.thumbnail.flex {
  display: flex;
}

.no-margin-top {
  margin-top: 0 !important;
}

.letter-spacing-1 {
  letter-spacing: 1px;
}

.letter-spacing-2 {
  letter-spacing: 2px;
}

/* Text */

.text-black {
  color: #000 !important;
}

.text-blue {
  color: #0095DA;
}

.text-light-blue {
  color: #2ee1ff;
}

.text-green {
  color: #83b202;
}

.text-light-green {
  color: #89B903;
}

.text-light-grey {
  color: #c5c6d0;
}

.text-mid-grey {
  color: #999;
}

.text-grey {
  color: #666 !important;
}

.text-white {
  color: #ffffff;
}

.text-rich-black {
    color: var(--versa-rich-black);
}

/* Background */
.background-blue,
th.background-blue {
  background-color: #0095DA;
}

.background-green {
  background-color: #89B903;
}

.background-grey {
  background: linear-gradient(#fff 0%, #fff 10%, #f7f7f7 100%) left top;
}

.background-medium-gray {
  background-color: #888;
}

.background-light-gray {
  background-color: #fbfbfb;
}

.background-gradient-grey {
  background: linear-gradient(#fff 0%, #f7f7f7 70%) left top;
}

.background-gradient-green {
  background: linear-gradient(to right, #93d500, #5da602);
}

.background-gradient-blue {
  background: linear-gradient(to right, #009ade, #0071bb);
}

.background-dark-grey {
  background-color: #ddd;
}

.background-table-grey {
  background-color: #f5f5f5;
}

.background-video-grey {
  background-color: #e5e5e5;
}



/* Border */
.b-solid-grey {
  border-bottom: 1px solid #f7f7f7;
}

.b-solid-dark-grey {
  border-bottom: 1px solid #ccc;
}

.b-dashed-light-grey {
  border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.b-top-dashed-black {
  border-top: 1px dashed black;
}


/*Buttons */
.btn.btn-primary {
  border: none;
}

.btn-outline-secondary {
  border-color: #89B903;
  color: #89B903;
}

.btn-outline-secondary:hover {
  background: #89B903;
  color: white;
}

.btn-blue {
  border: 2px solid #00aeef;
  background: url("https://versa-networks.com/images/widgets/button-gloss-left.png") 2px top, linear-gradient(#00aeef, #4a78bb) left top;
  background-size: 268px 16px, 100% 100%;
  background-repeat: no-repeat;
  color: #fff !important;
  outline: 2px solid #1c75bc;
}

.btn-blue:hover {
    border: 2px solid #00aeef;
  background-color: #1c75bc;
  box-shadow: 0px 0px 15px rgba(3, 219, 255, 1);
  transition: all 0.2s;
}

.btn-green {
  border: 2px solid #a3dd03;
  background: url("https://versa-networks.com/images/widgets/button-gloss-left.png") 2px top, linear-gradient(#78c900, #5da602) left top;
  background-size: 268px 16px, 100% 100%;
  background-repeat: no-repeat;
  color: #fff !important;
  outline: 2px solid #a3dd03;
}

.btn-green:hover {
  border: 2px solid #708e04;
  background-color: #708e04;
  box-shadow: 0px 0px 15px rgba(187, 252, 6, 1);
  text-decoration: none;
  transition: all 0.2s;
}

.btn-demo {
  border: 1px solid #708e04;
  color: #708e04;
  font-size: 90%;
}

.btn-demo:hover {
  border: 1px solid #708e04;
  color: #fff;
  background-color: #708e04;
}

/* Carousel */

.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  margin-right: 0.625rem;
  margin-left: 0.625rem;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  border: 0;
  border-radius: 50%;
  position: relative;
}

.carousel-indicators .active {
  background-color: #fff;
  border-color: #000;
  transform: scale(1.5);
  -webkit-mask-image: radial-gradient(circle at 50%, transparent 33%, #fff calc(33% + 1px));
  mask-image: radial-gradient(circle at 50%, transparent 33%, #fff calc(33% + 1px));
}

.carousel-control-prev,
.carousel-control-next {
  display: none;
}

/* Footer */

footer p {
  font-size: 0.8em;
  line-height: 1.5;
}

footer .border-bottom {
  border-bottom-style: dashed !important;
}


/* Banners */

/*
footer .social-icons {
  font-size: 1.5rem;
}

footer .social-icons a span {
  transition: 0.4s all;
}

footer .social-icons a:hover span {
  transform: scale(1.4);
}
*/
/* Banners */
.versatility-2022,
.roi-calculator,
.sase-for-dummies,
.gartner-quick-question,
.adobe,
.academy {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.versatility-2022 {
  background-image: url("https://versa-networks.com/images/marquees/marquee-rocket-2.jpg");
}

.ztna-2023 {
  background-image: url("https://versa-networks.com/wordpress/wp-content/themes/versa/assets/images/marquees/marquee-ztna-2023-darker-updated.jpg");
  background-position: 50% 50%;
  background-size: cover;
}

.investors {
  background-image: url("https://versa-networks.com/wordpress/wp-content/themes/versa/assets/images/marquees/marquee-investors-updated.png");
  background-position: 50% 50%;
  background-size: cover;
}

.versatility-2023-dark-updated {
  background-image: url("https://versa-networks.com/wordpress/wp-content/themes/versa/assets/images/marquees/marquee-versatility-2023-dark-updated.png");
  background-position: 50% 50%;
  background-size: cover;
}

.speed-3 {
  background-image: url("https://versa-networks.com/wordpress/wp-content/themes/versa/assets/images/marquees/marquee-speed-3.jpg");
  background-position: 50% 50%;
  background-size: cover;
}
    
.roi-calculator {
  background-image: url("https://versa-networks.com/images/marquees/marquee-roi-calculator.jpg");
}
    
.sase-for-dummies {
  background-image: url("https://versa-networks.com/images/marquees/marquee-sase-for-dummies-2.jpg");
}

.gartner-quick-question {
  background-image: url("https://versa-networks.com/images/marquees/marquee-gartner-quick-question.jpg");
}

.adobe {
  background-image: url("https://versa-networks.com/images/marquees/marquee-adobe.jpg");
}

.academy {
  background-image: url("https://versa-networks.com/images/marquees/marquee-academy.jpg");
}

.blue-banner {
  background-color: linear-gradient(to right, #009bdf, #0071bb);
  color: #fff;
}

.blue-banner a {
  color: #fff;
}

.b-dashed {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

/* Animated images copied from Versa style */
#illus-mq-animated {
  margin: 10px auto 0px auto;
  position: relative;
  height: 225px;
  width: 100%;
  background: #fff;
}

#illus-mq-animated>* {
  margin: 0px auto 0px auto;
  height: 225px;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  animation: 6s autoplay infinite;
}


.illus#step-1 {
  background-image: url('https://versa-networks.com/resources/reports/gartner-magic-quadrants-2022/gartner-magic-quadrant-for-network-firewalls-2021.png');
}

.illus#step-2 {
  background-image: url('https://versa-networks.com/resources/reports/gartner-magic-quadrants-2022/gartner-magic-quadrant-for-sse-2022.png');
}

.illus#step-3 {
  background-image: url('https://versa-networks.com/resources/reports/gartner-magic-quadrants-2022/gartner-magic-quadrant-for-wan-edge-infrastructure-2021.png');
}

@keyframes autoplay {
  0% {
    visibility: visible
  }

  33.33% {
    visibility: hidden
  }
}

#illus-mq-animated>*:nth-child(1) {
  animation-delay: 0s
}

#illus-mq-animated>*:nth-child(2) {
  animation-delay: 2s
}

#illus-mq-animated>*:nth-child(3) {
  animation-delay: 4s
}


/*Learn more section cards */

.card .thumbnail {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.6));
}

.card:hover {
  border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #fff;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
    transition-property: all;
    transition-duration: .1s;
    transition-timing-function: ease;
}

.card .metadata {
  background-image: linear-gradient(to right, #009bdf, #0071bb);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
}


/* Navigation */



/* Commented out for the new nav*/

/*

.dropdown-menu p a,
.dropdown-menu .card-text {
  color: #fff;
}

.nav-text-light-grey {
  color: #ccc !important;
}


.nav-secondary {
  flex-direction: row;
}

.nav-secondary .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
*/

/* Commented out for the new nav*/

/*NEW*/
/*
.navbar-main .nav-link {
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-1);
}
*/

/*Needs to stay for industries*/
.nav-link a {
	margin: 5px 7px 5px 7px;
	padding: 2px 2px 2px 2px;
	font-family: 'Gilroy', sans-serif;
	font-size: 17px;
	line-height: 18px;
	text-transform: lowercase;
	font-variant: small-caps;
	font-variant-numeric: oldstyle-nums;
	letter-spacing: 1px;
	color: #444;
	display: inline-block;
	position: relative;
	cursor: pointer;
	}

.nav-link a:hover {
	color: #009ade;
	}

.nav-link a.selected {
	font-family: "Lato", sans-serif;
	font-weight: 700;
	color: #000;
	}


/*UPDATED*/
/*
#languageDropdown,
#languageDropdown a {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: var(--letter-spacing-1);
}

#searchform {
    margin-top: 5px;
}
*/

/* Commented out for the new nav*/

/*
.bi.bi-globe {
  fill: #00aeef;
  height: 15px;
  margin-right: 5px;
}

.nav-item.rounded-top {
  border-top-left-radius: 0.5em !important;
  border-top-right-radius: 0.5em !important;
}

.nav-item.selected {
  background: grey;
  font-weight: 400;
  box-shadow: 0px -5px 15px rgb(0 0 0 / 3%);;
}

@media (min-width: 991px) {
  .nav-item.selected {
    background: #fff;
  }
}

.dropdown-menu {
  background: rgba(84, 88, 91, 0.98);
  color: #fff;
  border: none;
  border-radius: 0px;
  left: 0px !important;
  right: 0px !important;

}

.dropdown-menu[data-bs-popper] {
  margin-top: 0;
  top: auto;
}

.dropdown-menu .card,
.dropdown-menu .card:hover {
  background: rgba(84, 88, 91, 0.98);
  color: #fff;
}

.dropdown-menu p {
  font-size: 16px;
}


.dropdown-toggle::after {
 
}

.dropdown-h6 {
    text-transform: none;
    font-variant: none;
    font-size: 18px;
    color: white;
} 

.dropdown.open {
  color: white;
  background-color: rgba(84, 88, 91, 0.98);
}

*/


.nav-item.selected {
    background: #fff;
  }
  
  
/* ROI Calculator */
div.toggle a span.label {
  margin: 0px 0px 0px 0px;
  padding: 5px 8px 5px 10px;
  border: 1px solid #666;
  font-weight: normal;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  background-image: url("https://versa-networks.com/images/widgets/nav-promotional-gloss.png");
  background-position: 0px -12px;
  background-size: 100% 100%;
  background-repeat: no-repeat;

}

div.toggle a.selected span.label {
  border: 1px solid #333;
  background: #555;
  box-shadow: inset 0px 1px 8px rgb(0 0 0 / 60%);
}


/* Checkmark list - Updated for new nav */

ol.checkmark-list,
ul.checkmark-list {
    list-style-type: none;
    padding-left: 0;
}

/*
.checkmark-list li::marker {
  content: "\f05d" '  ';
  font-family: "FontAwesome";
}
*/

ol.checkmark-list>li,
ul.checkmark-list>li {
   background-size: 1.2rem;
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+DQoJPHBhdGggZD0iTTI1NiA0OGEyMDggMjA4IDAgMSAxIDAgNDE2IDIwOCAyMDggMCAxIDEgMC00MTZ6bTAgNDY0QTI1NiAyNTYgMCAxIDAgMjU2IDBhMjU2IDI1NiAwIDEgMCAwIDUxMnpNMzY5IDIwOWM5LjQtOS40IDkuNC0yNC42IDAtMzMuOXMtMjQuNi05LjQtMzMuOSAwbC0xMTEgMTExLTQ3LTQ3Yy05LjQtOS40LTI0LjYtOS40LTMzLjkgMHMtOS40IDI0LjYgMCAzMy45bDY0IDY0YzkuNCA5LjQgMjQuNiA5LjQgMzMuOSAwTDM2OSAyMDl6IiBmaWxsPSIjMDA3MUJDIi8+DQo8L3N2Zz4=');
   background-position: left 0.15rem;
   background-repeat: no-repeat;
   padding-left: 1.7rem;
}

/* Arrow list */
.arrow-blue li::marker {
  content: "\f05d" '  ';
  font-family: "FontAwesome";
  color: #009ade;
}

.fa-arrow-right {
    display: inline-block;
    /*height: 16px;*/
    width: 11px;
    background-image: url("./assets/images/product/new-product/chevron-white-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    background-position: center 2px;
    background-size: 80%;
}

.fa-arrow-right:before {
    content: none !important;
}

/* Grid 3 col 2 rows */

.grid-3-col {
  grid-template-areas:
      "topleft topcenter topright"
      "bottomleft bottomcenter bottomright";
}

.grid-3-col .content-1 {
  grid-area: topleft;
}

.grid-3-col .cta-1 {
  grid-area: bottomleft;
}

.grid-3-col .content-2 {
  grid-area: topcenter;
}

.grid-3-col .cta-2 {
  grid-area: bottomcenter;
}

.grid-3-col .content-3 {
  grid-area: topright;
}

.grid-3-col .cta-3 {
  grid-area: bottomright;
}

.shadow-top {
    padding: 60px 0px 0px 0px;
    background-image: url("https://versa-networks.com/images/bg-shadow-top.png");
    background-size: 1200px 60px;
    background-repeat: no-repeat;
    background-position: top center;
}

.shadow-top-reverse {
	background-image: url('https://versa-networks.com/wordpress/wp-content/themes/versa/assets/images/bg-shadow-bottom.png');
	background-size: 1200px 60px;
	background-repeat: no-repeat;
	background-position: top center;
	}

.logo-center {
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.logo-center .logo {
  max-height: 80px;
  margin: 0 auto;
}

.logo.max-height-70 {
  max-height: 70px;
}

.logo.max-height-60 {
  max-height: 60px;
}

.logo.max-height-50 {
  max-height: 50px;
}


img[alt="Versa Logo"]{
    width: 160px;
}


label span.error,
.charcoal label span.error {
	margin: 0px 0px 0px 0px;
	font-size: 13px;
	line-height: 14px;
	color: #ff6666;  
	display: inline-block;
	visibility: hidden;
	}



/* video components */
.wrapper-w-50 {
  width: 50%;
}
.wrapper-w-60 {
  width: 60%;
}
.wrapper-w-80 {
  width: 80%;
}

.img-wrap-container {
  position: relative;
}

.img-wrapper-light {
  background-image: url("https://versa-networks.com/images/widgets/play-white.png");
  position: absolute;
  background-size: 30%;
  top: 0;
  left: 0;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 100%;
  opacity: .8;
}

.img-wrapper-dark {
  background-image: url("https://versa-networks.com/images/widgets/play-black.png");
  position: absolute;
  background-size: 30%;
  top: 0;
  left: 0;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 100%;
  opacity: .8;
}
.img-wrapper-light:hover,
.img-wrapper-dark:hover {
  opacity: 1;
  cursor: pointer;
}

/*
@media (min-width: 576px) {  }
@media (min-width: 768px) {  }
@media (min-width: 992px) {  }

@media (min-width: 1400px) {  }

*/

/*Override for bootstrap classes*/

/*For WP editior issue empty a tags, stretch link will have   */
.stretched-link {
  height: 0;
}

/* Hero Banners Mobile*/

/*
@media (max-width: 991px) {
  .adobe {
      background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("https://versa-networks.com/images/marquees/marquee-adobe.jpg");
    }

    .academy {
      background-image: linear-gradient(to right, #009bdf, #0071bb);
    }

    .wrapper-lg-w-100 {
      width: 100%;
    }

    #languageDropdown{
      display:none;
    }

    .navbar-toggler{
      top: -3.5rem;
      right: 40px;
    }

    .side-bar-home{
      color:white;
      font-size: 25px;
    }

    .home-btn{
      padding-top:25px;
      
    }

    .visibility{
      display:none;
    }
}
*/

/* secondary and tertiary navigation */

/*
.nav-panel {
  margin-left: 25px;
  text-align: center;
}


.nav-link.selected {
  border-bottom: 2px solid 	#00bfff; 
}

.nav-panel li a {
  color: black;
  text-decoration: none;
}
.nav-panel li a {
  color: black;
  text-decoration: none;
}

*/


/*Versatility drop down*/
.versatility.dropdown.open {
  color: #444;
  background-color: transparent;
}

.versatility.dropdown ul {
    background: #f7f7f7;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.versatility.dropdown ul li a {
   color: #444;
}

/* Floating Promotional Nav */
div#nav-promotional-floating {
	margin: -120px 0px 0px 0px;
	position: fixed;
	top: 50%;
	right: 0px;
	z-index: 1000;
	}

div#nav-promotional-floating a {
	margin: 0px 0px 2px 10px;
	padding: 10px 0px 5px;
  width: 60px;
	font-family: "Lato", sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #fff;
	}

div#nav-promotional-floating a#trial {
	border-radius: 5px 0px 0px 0px;
	background:  #0280c6;
	}

  div#nav-promotional-floating a#demo {
	border-radius: 5px 0px 0px 0px;
	background: #5da602;
	}

div#nav-promotional-floating a#roi-calculator {
	background: #009bdf;
	}

div#nav-promotional-floating a#contact-us {
	border-radius: 0px 0px 0px 5px;
	background:  linear-gradient(#78c900, #5da602) left top;
	}

div#nav-promotional-floating a:hover {
	margin: 0px 0px 2px 0px;
	padding: 10px 10px 5px 0px;
	transition-property: padding, margin;
	transition-duration: .3s;
	transition-timing-function: ease;
	}

  /* 25x25 Promo Icons */
img.icon.promo {
	margin: 0px auto 5px auto;
	height: 25px;
	width: 25px;
	background-size: 25px 25px;
	opacity: 1.0;
	}

a:hover img.icon.promo {
	opacity: 1.0;
	}
	
	
@media all and (max-width: 650px) {
img.icon.promo {
	margin: 0px 4px 0px 4px;
	height: 25px;
	width: 25px;
	background-size: 25px 25px;
	}
}

.promo-display {
  display: none;
}

@media (min-width: 992px) {
  .promo-display {
    display: block;
  }
}

  /* Headings */

h1,
h2 {
	margin: 0px 0px 0px 0px;
	padding: 5px 0px 10px 0px;
	font-family: "Lato";
  font-weight: 300;
	font-size: 42px;
	line-height: 44px;
	color: #000;
	}

h1.large,
h2.large {
	font-size: 48px;
	line-height: 50px;
	}

h1.larger,
h2.larger {
	font-size: 54px;
	line-height: 56px;
	}

h1.extralarge,
h2.extralarge {
	font-size: 60px;
	line-height: 62px;
	}

h1.small,
h2.small {
	font-size: 36px;
	line-height: 38px;
	}

h1.smaller,
h2.smaller {
	font-size: 30px;
	line-height: 32px;
	}

h1.extrasmall,
h2.extrasmall {
	font-size: 26px;
	line-height: 28px;
	}

h3 {
	margin: 15px 0px 10px 0px;
	font-family: "Lato";
    font-weight: 300;
	font-size: 36px;
	line-height: 38px;
	/* color: #000; */
	}

h3.small {
	font-size: 30px;
	line-height: 32px;
	}

h3.smaller {
	font-size: 26px;
	line-height: 28px;
	}
	
h3.mid {
	font-size: 24px;
	line-height: 26px;
}

h3.extrasmall {
	font-size: 22px;
	line-height: 24px;
	}

h4 {
	margin: 5px 0px 10px 0px;
	font-family: "Lato";
    font-weight: normal;
	font-size: 30px;
	line-height: 32px;
	color: #000;
	}

h4.small {
	font-family: "Lato";
	font-size: 26px;
	line-height: 28px;
	}

h4.smaller {
	font-size: 24px;
	line-height: 26px;
	}

h5 {
	margin: 10px 0px 10px 0px;
    font-weight: normal;
	font-size: 24px;
	line-height: 26px;
	color: #000;
	}

h5.mid {
	font-size: 22px;
	line-height: 24px;
	}

h5.small {
	font-size: 20px;
	line-height: 22px;
	}

h5.smaller {
	font-size: 18px;
	line-height: 20px;
	}

h5.large {
	font-size: 28px;
	line-height: 30px;
	}

h5.larger {
	font-size: 32px;
	line-height: 34px;
	}

h6 {
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	font-size: 20px;
	line-height: 20px;
	text-transform: lowercase;
	font-variant: small-caps;
	font-variant-numeric: oldstyle-nums;
	letter-spacing: 1px;
	/* color: #000; */
	}

h6.super-small ,
h6 .super-small {
	font-size: 12px;
	line-height: 12px;
	}

h6.extra-small {
	font-size: 14px;
	line-height: 14px;
	}

h6.smaller {
	font-size: 16px;
	line-height: 16px;
	}

h6.small {
	font-size: 18px;
	line-height: 18px;
	}

h6.large {
	font-size: 22px;
	line-height: 22px;
	}

h6.larger {
	font-size: 24px;
	line-height: 24px;
	}

h6.extra-large {
	font-size: 26px;
	line-height: 26px;
	}

h6.wide {
	letter-spacing: 3px;
	}

h2.border,
h3.border,
h4.border,
h5.border,
h6.border {
	margin-bottom: 20px;
	padding: 0px 0px 3px 0px;
	border-bottom: 1px dashed #ccc !important;
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
	}

/* Body Text */

p {
	margin: 5px 0px 24px 0px;
	font-size: 18px;
	line-height: 24px;
	color: #444;
	}

.lede {
	margin: 10px 0px 28px 0px;
	font-size: 22px;
	line-height: 28px;
	}

p.small,
ul.small,
ol.small {
	margin: 5px 0px 20px 0px;
	font-size: 17px;
	line-height: 22px;
	}
	
.blurb {
	margin: 5px 0px 20px 0px;
	font-size: 16px;
	line-height: 20px;
	}

.slug {
	margin: 5px 0px 18px 0px;
	font-size: 15px;
	line-height: 18px;
	}

.legend {
	margin: 5px 0px 17px 0px;
	font-size: 14px;
	line-height: 18px;
	}

.caption {
	margin: 5px 0px 16px 0px;
	font-size: 13px;
	line-height: 16px;
	}

.note {
	margin: 5px 0px 14px 0px;
	font-size: 12px;
	line-height: 14px;
	}

.fine {
	margin: 5px 0px 12px 0px;
	font-size: 10px;
	line-height: 12px;
	}

.metadata {
	font-family: "Lato", sans-serif;
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #666;
	}

.metadata-compact {
	font-family: "Lato", sans-serif;
	font-size: 80%;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #666;
	}



/* Body Text: Mobile */
	
@media all and (max-width: 650px) {
h1,
h1.small,
h1.smaller,
h1.large,
h1.larger,
h1.extralarge,
h2,
h2.small,
h2.smaller,
h2.large,
h2.larger,
h1.extralarge {
	font-size: 50px;
	line-height: 52px;
	}
	
h4,
h4.small,
h4.smaller {
	font-size: 36px;
	line-height: 38px;
	}
	
h5,
h5.mid,
h5.small,
h5.smaller,
h5.large,
h5.larger {
	font-size: 30px;
	line-height: 32px;
	}
	
h6,
h6.small,
h6.smaller,
h6.extra-small {
	font-size: 22px;
	line-height: 22px;
	}
	
h6.super-small,
h6 .super-small {
	font-size: 18px;
	line-height: 18px;
	}

h6.large,
h6.larger {
	font-size: 24px;
	line-height: 24px;
	}
	
p,
p.small,
.lede,
.blurb,
.slug,
.legend {
	font-size: 22px;
	line-height: 28px;
	}


.caption,
.note {
	font-size: 18px;
	line-height: 20px;
	}

	}

/* Text Colors & Weights */

/*
a.hover:hover,
a.hover:active {
	color: #009ade !important;
	}

a.underhover:hover,
a.underhover:active {
	text-decoration: underline;
	}

a.nohover:hover,
a.nohover:active {
	color: inherit;
	text-decoration: none;
	}
*/


strong,
p strong,
h4 strong,
h5 strong,
h6 strong {
	font-family: "Lato";
    font-weight: 700;
	}

span.light,
p.light,
h1.light,
h2.light,
h3.light,
h4.light,
h5.light,
h6.light {
	font-family: "Lato";
    font-weight: 300;
	}

.book,
p.book,
h4.book,
h5.book,
h6.book {
	font-family: "Lato", sans-serif;
    font-weight: normal;
	}

.medium,
p.medium,
h4.medium,
h5.medium,
h6.medium {
	font-family: "Lato";
    font-weight: 700;
	}

.semibold,
p.semibold,
h1.semibold,
h2.semibold,
h3.semibold,
h4.semibold,
h5.semibold,
h6.semibold {
    font-weight: normal;
	}

.bold,
p.bold,
h1.bold,
h2.bold,
h3.bold,
h4.bold,
h5.bold,
h6.bold {
	font-family: "Lato";
    font-weight: 700;
	}

.shadow,
p.shadow,
h1.shadow,
h2.shadow,
h3.shadow,
h4.shadow,
h5.shadow,
h6.shadow {
	text-shadow: 0px 0px 15px rgba(0,0,0,0.4);
	}



.uppercase {
	text-transform: uppercase;
	}

.lowercase {
	text-transform: lowercase;
	}

.nocase {
	text-transform: none;
	}

.wider {
	letter-spacing: 2px;
	}

.nospace {
	letter-spacing: initial;
	}

.hidden {
	display: none;
	}


@media all and (min-width: 651px) {
p.narrow,
h1.narrow,
h2.narrow,
h3.narrow,
h4.narrow,
h5.narrow,
h6.narrow {
	margin-right: 10%;
	margin-left: 10%;
	width: 80%;
	}

p.narrow-left {
	margin-left: 10%;
	}
	
p.narrow-right {
	margin-right: 10%;
	}	
	}

  dt {
    margin: 0px 0px 0px 0px;
    padding: 5px 0px 5px 0px;
    font-family: "Lato";
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
    color: #666;
    float: left;
    clear: left;
  }

  .versa-gradient {
    background-image: linear-gradient(to bottom, #0072BC, #084A7B);
  }

  .bg-versa-gray {
    background-color: #EEEEEE;
  }

  .text-versa-blue {
    color: #0C94F2;
  }

  
/* /* 22.Search Results Styling */

.search-results .page-title{
  background-color:transparent;
  color:#000000;
  font-size:36px;
  padding: 20px 20px 20px 20px;
  text-align: center;
}
.search-results .search-query{
  color:#1a3794;
  font-size:56px;
  text-align: center;
  margin-bottom:50px;
}
#search-result {
  font-weight: 400 !important;
}

.search-result{
  padding-bottom:30px;
  margin-bottom:30px;
  border-bottom:1px solid #ccc;
}
.search-result h2{
  text-align: left;
  font-size:20px;
  color: #1e81b0;
}

.search-result h2:hover{
  color: #8AC7DB;
}

.search-result p{
  font-size:16px;
  margin: 5px 100px 5px 100px;
}

.search-results-container {
margin-left: 15%;
margin-right: 15%;
}

.nav-search-container {
margin: 0;
box-shadow: none;

}

.page-title{
  background-color:transparent;
  color:#000000;
  font-size:36px;
  padding: 100px 20px 20px 20px;
  text-align: center;
}

.search-query {
  color:#1a3794;
  font-size:56px;
  text-align: center;
  margin-bottom:50px;
}

.p-no-results {
  font-size:16px;
  margin: 5px 100px 5px 100px;
  text-align: center;
}


.nav-search-mobile-container {
  margin: 0px 5px 30px 50px;
  box-shadow: none;
  position: relative;
  float: left;
}

.nav-search-container-util {
  margin: -10px 5px 0px 0px;
  box-shadow: none;
  position: relative;
  float: right;
  width: 15%;
}


ul.check li:before {
  margin: -5px 0 0 -25px;
  content: "\2022";
  background: none;
  font-size: 20px;
  color: #444;
}


/*
.search-container {
  display: flex;
  width: 300px;
  margin: -10px 0 0 0;
}

.search-container input[type="text"] {
    padding: 4px 8px;
    margin-left: 8px;
    font-size: 14px;
}
*/

/*

#searchsubmit {
  border: 2px solid #a3dd03;
  background: url("https://versa-networks.com/images/widgets/button-gloss-left.png") 2px top, linear-gradient(#78c900, #5da602) left top;
  background-size: 268px 16px, 100% 100%;
  background-repeat: no-repeat;
  color: #fff !important;
  outline: 2px solid #a3dd03;
  font-weight: 400;
  margin-left: 15px; 
  padding: 4px 18px; 
  margin-top: 1px; 
  margin-right:0;
  line-height: 1.2;
}


#searchsubmit:hover {
  cursor: pointer;
  border: 2px solid #708e04;
  background-color: #708e04;
  box-shadow: 0px 0px 15px rgba(187, 252, 6, 1);
  text-decoration: none;
  transition: all 0.2s;
}

#searchsubmit-1 {
  border: 2px solid #a3dd03;
  background: url("https://versa-networks.com/images/widgets/button-gloss-left.png") 2px top, linear-gradient(#78c900, #5da602) left top;
  background-size: 268px 16px, 100% 100%;
  background-repeat: no-repeat;
  color: #fff !important;
  outline: 2px solid #a3dd03;
}

#searchsubmit-1:hover {
  cursor: pointer;
  border: 2px solid #708e04;
  background-color: #708e04;
  box-shadow: 0px 0px 15px rgba(187, 252, 6, 1);
  text-decoration: none;
  transition: all 0.2s;
}

*/

.form-container {
text-align: right; /* Horizontally center the form elements */
}

.form-container form {
display: inline-block; /* Display the form as inline-block to make it flow horizontally */
}

.result-snippet-text {
  color: #000 ;
}


/*  */
.stat {
  font-size: 42px;
  margin-bottom: 16px;
  font-weight: bold;
}

.border-col {
  border-right: 1px solid #D3D3D3;
  border-left: 1px solid #D3D3D3;
  padding-right: 30px;
  padding-left: 30px;
}

.light-blue {
  color: #b0f0ff;
}


.green, a.green:link, a.green:visited {
  color: #83b202;
}

/* mobile nav */
/*REmoved for the new nav*/

/*
@media (min-width: 991px) {
  .mobile-menu-display {
    display: none !important;
  }
}


.navbar-nav .btn.mbl-nav-btn {
  width: 100%;
  background-color: transparent;
  margin-top: 15px;
}


.mobile-nav li a {
  color: #fff;
  text-wrap: wrap;
}

.mobile-nav li a:hover {
  color: var(--versa-grey);
}

.search-input-mbl {
  width: 210px;
  border-radius: 5px;
}

*/

.slideshow {
  position: relative;
  overflow: hidden;
  animation: scroll 10s linear infinite; /* Example: 5 seconds per cycle */

}

.slideshow .logos {
  background: url('assets/images/logos/logos-customers-scrolling.png');
  background-size: 4096px 50px;
  background-repeat: repeat-x;
  position: absolute;
  left: 0;
  top: 45px;
  height: 50px;
  width: 12288px;
  animation: slideshow 100s linear infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes slideshow {
  0% {
    left: 0;
  }
  100% {
      left: -350%;
  }
}

.panel.gray {
  background-color: #e5e5e5;
  color: initial;
}

.submission-label {
  display: flex;
  line-height: 1.5rem;
}

.form-inp-algn {
    width: 95%;
}
.form-left-algn {
    padding-left: 0px !important;
}

/*page specific styles*/
.card-title-font { font-size: 24px}

.resilience-image { border-radius: 7px; max-height: 300px; padding-left: 100px }

.security-image { border-radius: 7px; max-height: 250px; }

.integration-image { width: 80%; height: 50%}

.simplify-image { height: 260px; border-radius: 7px }

.capabilities-header { font-size: 22px }

.card-header-font { font-size: 23px}

.panel-section-border { border-top: 1px solid #D3D3D3; border-bottom: 1px solid #D3D3D3; padding-bottom: 10px}

.panel-section-border-additional { border-top: 1px solid #D3D3D3; border-bottom: 1px solid #D3D3D3; padding-bottom: 25px}

.vsaf-paragraph {padding-bottom: 24px;}

.heading-zero-trust {padding: 55px 0 55px 0;}

.div-security {margin-top: 10px; margin-bottom: 20px;}

.p-security {font-size: 42px; margin-bottom: 16px; font-weight: bold;}

.bold-div {font-weight: bold;}

.card-zero-trust {padding: 20px 10px 20px 10px; justify-content: space-between;}

.p-card-zero-trust {margin-left: 0; margin-right: 0; width: 100%;}

.img-improve-security {justify-content: center; align-items: center;}

.img-single-security {width: 90%;}

.div-modernize-lan {align-items: center; height: 245px;}

.img-modernize-lan {height: 90px; margin-left: 50px;}

.ul-modernize-lan {font-size: 15px; text-align: left; margin: 0 0 0 15px; font-style: italic; font-weight: 400;}

.ai-heading { padding-right: 200px;}

.ai-image { width: 90%; margin-top: -50px; }

.ai-security-header { margin-top: 0;}

.UEBA-image { width: 90%; border: 3px solid lightgray; border-radius: 20px; max-height: 400px;}

.ai-ml-image {width: 90%; border: 3px solid lightgray; border-radius: 20px; max-height: 300px;}

.p-justify {text-align: justify;}

.ai-security-div {margin-top: 10px;}

.scale-div {font-size: 50px; padding: 20px;}

.p-network {margin-bottom: 30px;}

.vani-stats-img {width: 90%; border: 3px solid lightgray; border-radius: 20px;}

.ai-thumbnails {max-height: 270px;}

.navbar-style {pointer-events: auto;}

.iframe-form {width: 100%; height: 100%; background: #ffffff;}

.webinar-container {margin-top: 80px; margin-bottom: 80px;}

@media (max-width: 992px) {
  .marquee-color-change {
    color: black !important;
  }
}

/*footer*/

.footer-h6 {
    font-size: 14px;
}

/*error 404*/
.err-label {
    font-size: 18px;
    color: #89B903;
    border-bottom: 1px dashed #ccc;
    display: block;
    margin-bottom: 15px;
}

.err-primary {
    font-size: 20px;
    font-weight: 600;
    color: black !important;
    margin-bottom: 15px;
    line-height: 22px;
    display: block;
}

.err-secondary {
    font-size: 18px;
    color: grey !important;
    margin-left: 20px;
    display: block;
    margin-bottom: 10px;
}


/*new product demo*/
.clear-space {
    padding-bottom: 25px;
}

.rounded-right-corner {
    border-radius: 0px 50px 0px 0px !important;
}

.col-divider {
      border-right: 2px solid white;
      padding-right: 15px; /* Adjust as needed for spacing */
}

/*Threat Intelligence page*/
.threat-intelligence .card-body {
    flex: 1 1 auto;
    padding: 26px 26px 38px 26px;
}

.threat-intelligence .card-dark-gray {
    box-shadow: 0px -6px 0px 0px #595959 inset, 0px 6px 8px 0px rgba(0, 0, 0, 0.1254901961);
}

.threat-intelligence .read-now {
    font-size: 18px;
    font-weight: normal;
    line-height: 23.4px;
    letter-spacing: 0.02em;
    color: rgb(51, 51, 51);
}

.threat-intelligence .card-title-small-black {
    color: #000000;
    text-align: left;
    font-size: 18px;
    letter-spacing: 0em;
    font-weight: 700;
    line-height: normal;
}

.threat-intelligence .resource-card-description {
    color: #515254;
    text-align: left;
    font-size: 16px;
    letter-spacing: 0em;
    font-weight: normal;
    line-height: 26px;
    margin-top: 1em;
    margin-bottom: 2em;
    min-height: 5em;
}

.threat-intelligence .read-now::after {
  content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="iso-8859-1"%3F><svg fill="%23000000" height="12px" width="12px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_222_" d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606C255,161.018,253.42,157.202,250.606,154.389z"/></svg>');
  padding-left: 4px;
}

@media only screen and (max-width: 1130px) {
  .nav-breakpoint-responsive {
    font-size: 0.95rem;
  }
}


/*New CSS START*/

/*Utility and misc*/
.chevron-white {
    display: inline-block;
    height: 16px;
    width: 11px;
    background-image: url("./assets/images/product/new-product/chevron-white-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.chevron--small {
    height: 9px;
    width: 7px;
}

.form-check[type="checkbox"] {
  width: 1.2rem;
}

.bg-white {
    background: #fff;
}

.bg-blue {
    background-color: var(--light-blue3);
}

.bg-light-blue {
  background-color: var(--light-blue);
}

.bg-grey {
    background: var(--gradient-grey);
}

#header-logo {
    max-width: 160px;
    width: 100%;
}

/*UPDATED*/
/*
#languageDropdown, 
#languageDropdown a {
  font-family: 'Inter';
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 1px;
}
*/
#languageDropdown ul li a {
    color: var(--light-grey2);
}

/*TODO Override */
#searchform {
  margin: 0;
  padding: 0;
}

/*UPDATED*/
/* TODO max-width: 100%; override in styles-forms*/
#searchform input[type="text"] {
    padding: 3px 5px 3px 30px;
    font-size: 13px;
    background-image: url(./assets/images/new-homepage/magnifying-glass.svg);
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: 10px center;
    border: 1px solid #AAAAAA;
    max-width: 100% !important;
    width: 165px;
}

/*TODO: Search form*/
#searchform input[type="text"]:focus{
  background-color: #fff;
   /* background-image: none;*/
   /* background-position: 50% 50%;*/
    border-color: #76abd9;
    box-shadow: 0 0 7px 0 #76abd9;
    outline: 0;
}

/*Main nav*/
/*TODO: Stacked promo nav - see production*/
div#nav-promotional-floating {
    position: fixed;
}

.navbar {
	font-weight:400;
}

/*Removed for the new nav*/

/*
.navbar-nav .nav-link {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-1);
    text-transform: uppercase;
}

.navbar-nav .img-fluid {
    max-width: 180px;
    margin-left: -15px;
    margin-top: -5px;
}

.navbar-nav .nav li a {
    color: var(--light-grey2);
    font-weight: 400;
}

.navbar-nav ol.chevron-list>li, 
.navbar-nav ul.chevron-list>li {
    background-image: url("./assets/images/product/new-product/chevron-right.svg");
}

.navbar-nav .nav li a:focus, 
.navbar-nav .nav li a:hover {
    color: var(--light-grey);
}

.navbar-nav .btn {
   font-size: var(--text-md);
   line-height: 20px;
   letter-spacing: 0.4px;
   padding: 13px 22px;
   font-weight: 500;
   width: max-content;
}

.navbar-nav .btn.btn-primary {
   background-color: var(--versa-blue);
   background-image: linear-gradient(to right, #0095DA 0%, #0071BC 100%);
   color: #fff;
   text-decoration: none;
}

.navbar-nav .btn.btn-primary:hover {
    background-color: var(--light-blue3);
    background-image: linear-gradient(to right, #0071BC 0%, #002060 100%);
}

*/

/*TODO:remove commented out btn-demo above*/
.navbar-nav .btn.btn-demo,
.navbar-nav .btn.btn-security {
    padding: 5px 10px;
    font-size: var(--text-sm);
    color: #fff;
    text-decoration: none;
    margin-top: 5px;
}

.navbar-nav .btn.btn-security {
    background-image: var(--gradient-green);
}

.navbar-nav .btn.btn-security:hover {
    background-image: var(--gradient-green2);
}


/*UPDATED*/
/*Padding left and right to adjust for the bumper*/
.nav-item.rounded-top {
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  padding-left: 2px;
  padding-right: 2px;
}


/*Drop down menu*/
/*Removed for the new nav*/
/*
.dropdown.open {
  background-color: var(--dark-grey);
  color: var(--light-grey2);
}

.dropdown-menu {
    background: var(--dark-grey);
    color: var(--light-grey2);
    border: none;
    border-radius: 0px;
    left: 0;
    right: 0;
}

.dropdown-menu[data-bs-popper] {
  margin-top: 0;
  top: auto;
}

.dropdown-menu h4 {
  line-height: 1.2;
  font-size: 1.5rem;
}

.dropdown-menu h4 a, 
.dropdown-menu h5 a,
.dropdown-menu h6 a,
.dropdown-menu p a,
.dropdown-menu .card-text {
  color: var(--light-grey2);
}

.dropdown-menu h4 a {
  font-size: var(--text-md);
  color: var(--light-grey2);
}

.dropdown-menu p {
  color: var(--light-grey2);
}

.dropdown-menu h4:hover a {
  text-decoration: underline;
}

.dropdown-menu .card,
.dropdown-menu .card:hover {
  background: var(--dark-grey);
  border: 1px solid var(--light-grey);
}

*/
/* Footer */

ol.chevron-list>li, 
ul.chevron-list>li {
    background-size: 8px 10px;
    background-image: url("./assets/images/product/new-product/chevron-blue-right.svg");
    background-position: 0 5px;
    background-repeat: no-repeat;
    padding-left: 15px;
    margin-bottom: 0.25rem;
}

/*NEW*/
footer ol.chevron-list>li, 
footer ul.chevron-list>li {
    background-image: none;
    padding-left: 0;
    margin-bottom: 0.7rem;
}

footer {
    margin-top: 3rem;
    border-top-right-radius: 5rem;
}

footer h5 a {
    font-family: 'Gilroy', sans-serif;
    font-size: 1rem;
    color: var(--dark-grey);
    font-weight: 500;
}

/*TODO Fix - Override footer p, font size, weight (set on body) set above*/
footer p {
    font-size: 1rem;
    font-weight: 400;
}

/*NEW*/
.border-radius-8 {
    border-radius: var(--border-radius-sm);
}

.border-r-light-grey {
    border-right: var(--border-versa-grey-15-thin);
}

.border-t-light-grey {
    border-top: var(--border-versa-grey-15-thin);
}

/* Footer - mobile */

/*TODO Fix - Override H2 line height set above*/
footer .accordion-header {
    line-height: normal;
}

footer .accordion-item {
    border: none;
    margin-bottom: 0;
}

footer .accordion-item:first-of-type, 
footer .accordion-item:first-of-type .accordion-button {
    border-radius: 0;
}

footer .accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--light-blue4);
}

footer .accordion-button {
    color: var(--dark-grey);
}

footer .accordion-button::after {
    background-image:  url("./assets/images/product/new-product/chevron-down.svg");
    background-size: 15px 15px;
    background-position: center;
}

footer .accordion-button:not(.collapsed)::after {
    background-image: url("./assets/images/product/new-product/chevron-down.svg");
}

footer button.accordion-button::before {
    content: none;
}

footer button.accordion-button:not(.collapsed)::before {
    content: none;
}

footer .accordion-button:not(.collapsed) {
    background-color: var(--light-blue5);
    color: var(--dark-grey);
    border-color: var(--versa-blue);
}

footer .accordion-button:focus {
    box-shadow: none;
    outline: 2px solid var(--light-blue3);
}

footer .accordion-button::before,
footer .accordion-button:not(.collapsed)::before {
    content: none;
}

/*NEW*/

footer > * {
  font-family: 'Inter', sans-serif;
}

/*UPDATED*/
footer a.nav-link {
    font-family: 'Gilroy', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--versa-grey);
    padding: 0;
    margin-bottom: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.5pt;
}

footer a.nav-link:focus, 
footer h5 a:focus, 
footer a.nav-link:hover,
footer h5 a:hover {
    color: var(--versa-grey);
    text-decoration: underline 0.12em var(--versa-azure-blue);
    text-underline-offset: 0.25rem;
}

/*UPDATED*/
footer .social-icons a:hover img {
  filter: brightness(115%);
  transition-property: all;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
}


/*TODO: Refactor */
footer .justify-content-center .nav-item a {
    color: var(--dark-grey);
    font-weight: 700;
    font-size: 0.8rem;
}

/*UPDATED*/
footer h5 {
    font-family: 'Gilroy', sans-serif;
    font-size: 1.25rem;
    color: var(--dark-grey);
}

footer .footer-logo {
    width: 120px;
    max-width: 120px;
    min-width: 120px;
    height: 36px;
    max-height: 36px;
    min-height: 36px;
    margin-bottom: 10px;
    margin-left: -16px;
}

footer .form-check {
  width: 1.2rem;
} 
/*TODO remove 95% Important from legacy style forms*/
footer .mailing-list input[type="text"],
footer .mailing-list input[type="email"]{
    max-width: 80% !important; 
    border-radius: 0;
}

footer .mailing-list button {
    background: var(--dark-blue); 
    border: 0px; 
    width: 40px;
}

footer .border-right-grey {
    border-right: 1px solid var(--light-grey3);
}

footer .border-top-grey {
    border-top: 1px solid var(--light-grey3);
}

@media (max-width: 991px) { 

    /*Top nav - Hamburger menu on mobile*/
    #languageDropdown {
        display: none;
    }

    .navbar-toggler{
      top: -3.5rem;
      right: 40px;
    }

    .form-bg {
        background: none;
        background-color: var(--versa-blue);
    }

    footer .footer-logo {
        margin-left: 0;
    }
 }
 
 
 .clear-space-50 {
    padding-bottom: 50px;
}

.quote-container {
    margin: auto;
}
.quote {
    width: 90%;
    font-style: italic;
    font-weight: 400;
    margin: auto;
    font-size: 20px;
}

 /*New CSS END*/
 
 
 /* #region AI Search Page Specific */

:root {
  --chat-bg-color: #F4FBFF;
  --fadeCutoff: 80%;
}

.icon-container {
padding-right: 0;
padding-left: 0;
text-align: center;
}

.ai-icon {
width: 100%;
margin: auto;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1), -2px 2px 3px rgba(0, 0, 0, 0.1);
border-radius: 50%;
max-height: 64px;
max-width: 64px;
padding: 0.8rem;
aspect-ratio: 1 / 1;
background-color: white;
}

.ai-icon.icon-inline {
margin-right: 0.5rem;
}

.chat-bubble {
display: inline-block;
background-color: var(--chat-bg-color, #F4FBFF);
padding: 10px;
border-radius: 10px;
position: relative;
}

.chat-response {
max-height: 50vh;
overflow-y: scroll;

/* scroll shadows found here: https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ */
background:
 /* Shadow Cover TOP */
 linear-gradient(180deg,
   var(--chat-bg-color, #F4FBFF) 30%,
   rgba(255, 255, 255, 0)) center top,

 /* Shadow Cover BOTTOM */
 linear-gradient(rgba(255, 255, 255, 0),
   var(--chat-bg-color, #F4FBFF) 70%) center bottom,

 /* Shadow TOP */
 linear-gradient(180deg,
   /* farthest-side at 50% 0, */
   rgba(0, 0, 0, 0.08),
   rgba(0, 0, 0, 0)) center top,

 /* Shadow BOTTOM */
 linear-gradient(0deg,
   /* farthest-side at 50% 100%, */
   rgba(0, 0, 0, 0.08),
   rgba(0, 0, 0, 0)) center bottom;

background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 8px, 100% 8px;
background-attachment: local, local, scroll, scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.chat-response::-webkit-scrollbar {
display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.chat-response {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}

.content {
padding: 10px;
}

.bubble-name {
font-size: 13px;
font-weight: 400;
line-height: 16px;
letter-spacing: 0em;
color: #0976C2;
margin-bottom: 0.5rem;
}

.beta-tag {
background-color: #D2EBFA;
border-radius: 4px;
padding: 2px 4px 2px 4px;
font-size: 13px;
font-weight: 700;
line-height: 16px;
letter-spacing: 0em;
color: #437592;
}

.chat-text {
color: #013C5E;
font-size: 16px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0em;
}

ol.chat-text {
padding-left: 40px;
}

.chat-disclaimer {
font-size: 13px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
color: #437592;
/* padding-top: 4rem; */
}

.chat-see-more {
color: #013C5E;
font-size: 13px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0em;
border-radius: 20px;
background-color: #D2EBFA;
padding: 8px 16px;
margin-left: 4px;
margin-right: 4px;
}

.chat-see-more:first-of-type {
margin-left: 0;
}

.chat-see-more:hover,
.expand-details:hover,
.search-card:hover,
.more-results:hover {
cursor: pointer;
}

.expand-details {
white-space: nowrap;
width: fit-content;
font-size: 13px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
background-color: #E3F5FF;
border-radius: 4px;
border: 0px;
padding: 0.25rem 1rem;
color: #013C5E;
}

.fade-right {
-webkit-mask-image: linear-gradient(90deg, #000 var(--fadeCutoff, 80%), transparent 90%);
padding-right: calc(100% - var(--fadeCutoff));
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
width: 0;
min-width: 100%;
}

/* disable scrollbar */
.fade-right {
-ms-overflow-style: none;
scrollbar-width: none;
}

.fade-right::-webkit-scrollbar {
display: none;
}

.search-header {
color: #444444;
font-size: 24px;
font-weight: 400;
line-height: 29px;
letter-spacing: 0em;
}

.search-card {
background-color: #F8F9FA;
border-radius: 16px;
padding: 16px 24px 16px 24px;
}

.search-result-link {
font-size: 12px;
font-weight: 500;
line-height: 14px;
letter-spacing: 0em;
color: #6D7073;
}

.search-result-title {
font-size: 16px;
font-weight: 700;
line-height: 19px;
letter-spacing: 0em;
color: #444444;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

.search-card:hover .search-result-title {
text-decoration: underline;
}

.search-result-text {
font-size: 13px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
color: #6D7073;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}

.icon-inline {
height: 3em;
width: fit-content;
}

.more-container {
position: relative;
}

.more-container::after {
position: absolute;
content: '';
width: 100%;
border: 0;
border-top: 1px solid #6D707329;
top: 50%;
z-index: -1;
}

.more-results {
font-size: 13px;
font-weight: 600;
line-height: 26px;
letter-spacing: 0em;
text-align: center;
white-space: nowrap;
width: fit-content;
margin: auto;
padding: 0.1rem 4rem;
border-radius: 20px;
color: #013C5E;
background-color: #EEF7FF;
}

.search-hidden {
display: none;
}

.hover-blue:hover {
background-color: #D3E2F0;
}

.fade-in {
animation: fade-in 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes fade-in {
from {
 transform: translateY(30px);
 opacity: 0;
}

to {
 transform: translateY(0);
 opacity: 1;
}
}

/*featured reports*/
.featured-reports {
    background-color: #E0F2FB;
    border-radius: 15px;
}

        /*New header*/
   
        .navbar-nav .nav-link {
            font-family: 'Gilroy', sans-serif;
            color: var(--versa-grey);
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: var(--letter-spacing-1);
        }
            
        /*utility*/
        .ps-35 {
            padding-left: 35px;
        }
        
        .mw-1300 {
            max-width: 1300px !important;
            width: 100% !important;
        }

        /*BS override*/
        .navbar-expand-lg .navbar-nav .dropdown-menu {
            box-shadow: 0px 0px 20px 0px #00000040;
            padding: 15px;
        }
        
        .navbar-expand-lg .navbar-nav .nav-link {
            padding-left: 2px;
        }
        
        /*mobile search */
        .v-nav #s-1 {
            border: 1px solid var(--versa-light-grey-85);
            border-radius: 8px;
            padding: 15px;
            height: 50px;
            color: var(--versa-grey-85);
            width: 100%;
        }
        
        .v-nav input:focus, 
        .v-nav textarea:focus {
            box-shadow: none;
        }

        #s-1:focus-visible {
            outline-color: var(--versa-azure-blue);
            outline-offset: 4px;
        }
        
        #s-1 + .mglass {
           display:none;
           position: absolute;
           right: 12px;
           top: 8px;
           font-size: 25px;
           opacity: 0.8;
        }

        #s-1:placeholder-shown + .mglass {
           display:block;
        }

        .dropdown-menu .dropdown-item {
            color: var(--versa-grey-85);
            letter-spacing: 1px;
            line-height: 1.5;
            font-size: var(--text-sm);
        }

        .dropdown-item:focus,
        .dropdown-item:hover,
        #language-dropdown:hover span {
            color: var(--versa-grey-85);
            background-color: transparent;
            text-decoration: underline 0.12em var(--versa-azure-blue);
            text-underline-offset: 0.25em;
        }

        /*Stylesheet Override*/
        .dropdown-menu {
            background: #fff;
            border: none;
            border-radius: 8px;
            left: 0;
            right: 0;
        }

        .dropdown-menu h4 a,
        .dropdown-menu h5 a,
        .dropdown-menu h6 a,
        .dropdown-menu p a,
        .dropdown-menu .card-text {
            color: inherit;
        }


        .v-nav .navbar-nav:first-child .nav-link {
            font-size: 12px;
            letter-spacing: 2px;
            padding-right: 1.1rem;
        }

        .v-nav.navbar .has-megamenu {
            position: static !important;
        }
        
        .v-nav.navbar .has-megamenu.selected span {
            text-decoration: underline 0.12em var(--versa-light-grey);
            text-underline-offset: 0.25em;
        }

        .v-nav.navbar .megamenu {
            left: 0;
            right: 0;
            width: max-content;
            max-width: 100%;
            margin: 0 auto;
            padding: 40px;
            box-shadow: 0px 0px 20px 0px #00000040;
            top: 90px; /*from 125px for secondary menu overalp*/
            border-radius: 20px;
        }

        /*Space between columns*/
        .v-nav.navbar .megamenu .row {
            gap: 22px;
            margin: 0;
            padding: 0;
        }

        .megamenu .col {
            padding: 0;
            margin: 0;
        }

        .v-nav {
            font-family: 'Gilroy', sans-serif;
        }

        .v-nav .list-unstyled li {
            padding-bottom: 15px;
            letter-spacing: 1px;
            line-height: 1.3;
            font-size: var(--text-sm);

        }

        .v-nav .list-unstyled li a {

            /*Fail accessibilty*/
            /*color: #A5A4A4;*/
            color: var(--versa-grey-85);
            font-size: 14px;
        }

        .v-nav .carousel-item .list-unstyled li {
            padding-bottom: 25px;
            padding-right: 25px;
            font-size: 14px;
        }

        .v-nav .title {
            border-bottom: 1px solid #D9D9D9;
            padding-bottom: 16px;
            margin-bottom: 24px;
            white-space: nowrap;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 1.4px;
            text-transform: none; /*legacy css for h6 override*/
            font-variant: none; /*legacy css for h6 override*/
        }

        .v-nav .subtitle,
        .v-nav .carousel-item .subtitle {
            font-family: 'Gilroy', sans-serif;
            font-weight: 500;
            font-size: 14px;
            color: var(--versa-rich-black);
            letter-spacing: 1.4px;
        }

        .v-nav .carousel-item .subtitle {
            color: var(--versa-grey-85);
            font-size: 16px;
            display: flex;
            align-items: center;
        }



        .v-nav .dropdown-toggle[aria-expanded="true"]:after {
            visibility: visible;
        }


        /*for animation*/
        .v-nav .dropdown-toggle:after {
            display: inline-block;
            border: none;
            margin-left: 0;
            vertical-align: .03em;
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQoJPHBhdGggZD0iTTAuMTI5ODA1IDAuNzc5MDc5TDEuMTg5ODEgLTMuNzYzNTVlLTA3TDQuNTk5OCAyLjUwNjI4QzQuNjk5OCAyLjU3OTc4IDQuODI5OCAyLjYxNjUzIDQuOTU5OCAyLjYxNjUzQzUuMDg5OCAyLjYxNjUzIDUuMjI5OCAyLjU3OTc4IDUuMzE5OCAyLjUwNjI4TDguNzM5OCAtNC42MzM0MWUtMDhMOS43OTk4IDAuNzc5MDc5TDYuMzg5OCAzLjI4NTM2QzYuMDA5OCAzLjU2NDY2IDUuNTA5OCAzLjcxOSA0Ljk2OTggMy43MTlDNC40Mjk4IDMuNzE5IDMuOTI5OCAzLjU2NDY2IDMuNTQ5OCAzLjI4NTM2TDAuMTM5ODA1IDAuNzc5MDc5TDAuMTI5ODA1IDAuNzc5MDc5WiIgZmlsbD0iI0I3QjZCNiIvPg0KPC9zdmc+DQo=');
            visibility: hidden;
        }

        #language-dropdown:after {
            visibility: visible;
        }


        .v-nav .nav-link {
            color: var(--versa-grey);
            text-transform: uppercase;
            font-size: var(--text-sm);
            letter-spacing: var(--letter-spacing-1);
        }

        /* Animation just for top menu*/
        .v-nav .navbar-nav .nav-link span {
            text-decoration: underline 0.12em rgba(0, 149, 218, 0);
            text-underline-offset: 0.25em;
            transition: text-decoration-color 300ms;
            font-weight: 500;
        }

        .v-nav .navbar-nav .nav-link:hover span,
        .v-nav .megamenu a:hover,
        .v-nav .offcanvas a:hover {
            text-decoration: underline 0.12em var(--versa-azure-blue);
            text-underline-offset: 0.25em;
        }

        .v-nav h6 a:hover {
            color: var(--versa-azure-blue);
        }

        .v-nav a:focus,
        .v-nav .navbar-nav a:focus span,
        .v-nav h6 a:focus {
            /* outline: 1px dashed var(--versa-azure-blue);*/
        }

        /* good example


        .v-nav #demo-nav-link {
            font-size: var(--text-sm);
        }

        /*NEW- SEP NEW NAV*/
        .magnifying-glass {
            background-position: center;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuOTkxNzEgMTQuMTI1QzExLjM3OTEgMTQuMTI1IDE0LjEyNSAxMS4zNzkxIDE0LjEyNSA3Ljk5MTcxQzE0LjEyNSA0LjYwNDM4IDExLjM3OTEgMS44NTg0IDcuOTkxNzEgMS44NTg0QzQuNjA0MzggMS44NTg0IDEuODU4NCA0LjYwNDM4IDEuODU4NCA3Ljk5MTcxQzEuODU4NCAxMS4zNzkxIDQuNjA0MzggMTQuMTI1IDcuOTkxNzEgMTQuMTI1WiIgc3Ryb2tlPSIjOUU5RTlFIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+CjxwYXRoIGQ9Ik0xMi4zMjUyIDEyLjMyNTJMMTcuNjgzMiAxNy42ODMyIiBzdHJva2U9IiM5RTlFOUUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4KPC9zdmc+Cg==);
            background-repeat: no-repeat;
        }

        /*SEARCH*/

        .v-nav .button {
            display: inline-block;
            margin: 4px 2px;
            background-color: none;
            font-size: 14px;
            padding-left: 32px;
            padding-right: 32px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #444;
            text-decoration: none;
            cursor: pointer;
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .v-nav .button:hover,
        .v-nav .button:focus {
            transition-duration: 0.4s;
            -moz-transition-duration: 0.4s;
            -webkit-transition-duration: 0.4s;
            -o-transition-duration: 0.4s;
            background-color: #444;
            color: #fff;
        }

        .v-nav .search-container {
            position: relative;
            display: inline-block;
            height: 30px;
            width: 30px;
            vertical-align: bottom;
        }

        .v-nav .search-container ::-webkit-input-placeholder {
            font-family: 'Gilroy', sans-serif;
            color: var(--versa-grey);
            font-size: 14px;
        }
        
        .v-nav .mglass {
            display: inline-block;
            pointer-events: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
        }

        .v-nav .searchbutton {
            position: absolute;
            font-size: 22px;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .v-nav .search:focus+.searchbutton {
            transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
            background-color: var(--versa-azure-blue);
            color: #fff;
        }

        .v-nav .search {
            font-family: 'Gilroy', sans-serif; 
            position: absolute;
            left: 29px;
            background-color: white;
            outline: none;
            border: none;
            padding: 0;
            width: 0;
            height: 100%;
            z-index: 10;
            transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
        }

        .v-nav .search:focus {
            /* Bar width+1px */
            padding: 0 16px 0 0;
            border: 1px solid var(--versa-azure-blue);
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            font-size: 14px;
            box-shadow: none;
            width: 220px;
            letter-spacing: 1px;
        }

        .v-nav .search:focus+.searchbutton {
            background-color: var(--versa-azure-blue);
        }

        .v-nav .expandright {
            left: auto;
            right: 30px;
            /* Button width-1px */
        }

        .v-nav .expandright:focus {
            padding: 0 5px 2px 16px;
        }

        .offcanvas {
            border: none;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            box-shadow: 0px 0px 20px 0px #00000040;
            padding: 30px 0 30px 30px;
            max-height: 800px;
            height: auto;
            /*top: 110px !important;*/
        }
        
        .offcanvas ul li a {
            font-size: 16px;
        }
        
        .offcanvas .carousel {
            background: transparent;
        }

        /*BS OVERRIDE*/
        .offcanvas-body {
            overflow-x: hidden;
            padding-right: 0;
            padding-left: 10px;
            padding-top: 10px;
        }

        .offcanvas .btn-secondary {
            width: 100%;
            border: none;
            border-bottom: 1.5px solid #D9D9D9;
            margin-bottom: 15px;
            background-color: transparent;
            border-radius: 0;
            color: var(--versa-grey-85);
            text-align: left;
            font-size: 16px;
            /* from 14  */
            letter-spacing: .1cqw;
            padding-top: 0;
            padding-right: 40px;
            padding-bottom: 16px;
            padding-left: 0;
            font-weight: 500;
            box-shadow: none;
        }

        .offcanvas-header {
            position: absolute;
            right: 0;
            background-color: #fff;
            border-radius: 20px;
            z-index: 2;
            top: 25px;
            font-size: 14px;
            padding: 15px;
        }

        .offcanvas .btn-secondary:active,
        .offcanvas .btn-secondary:focus,
        .offcanvas .btn-secondary:focus-visible,
        .offcanvas .btn-secondary.show {
            background: transparent;
            color: var(--versa-azure-blue);
            border-bottom: 1.5px solid var(--versa-azure-blue);
            outline: none;
            box-shadow: none;
        }

        .offcanvas .btn-secondary:active::after,
        .offcanvas .btn-secondary:focus::after,
        .offcanvas .btn-secondary:focus-visible::after,
        .offcanvas .btn-secondary.show::after {
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjMDA5NURBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiMwMDk1REEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
        }


        .offcanvas .dropdown-toggle:after {
            content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiM4MDgxODEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
            visibility: visible;
            float: right;
        }

        .offcanvas .navbar-nav .dropdown-menu {
            box-shadow: none !important;
            padding: 0;
            margin-bottom: 30px;
        }

        .offcanvas .carousel-indicators [data-bs-target] {
            width: 100%;
            height: auto;
            background: plum;
            text-indent: 0px;
        }

        .offcanvas .carousel-indicators {

            position: static;
            display: block;
        }

        .offcanvas .list-unstyled li a {
            font-size: 16px;
        }

        .arrow-right-grey {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik02LjU1NDg5IDEuNDQ1NDNMMTIuOTI1OSA3LjgxNjQ3TDYuNTU0ODkgMTQuMTg3NSIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQo8cGF0aCBkPSJNMTIuOTI1OSA3LjgxNjU0SDAuNDk0OTgxIiBzdHJva2U9IiM4MDgxODEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz4NCjwvc3ZnPg0K');
        }

        .arrow-left-grey-icon {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8cGF0aCBkPSJNNy40NDUzMyAxNC4xODc2TDEuMDc0MyA3LjgxNjU5TDcuNDQ1MzMgMS40NDU1NiIgc3Ryb2tlPSIjODA4MTgxIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+DQoJPHBhdGggZD0iTTEuMDc0MyA3LjgxNjUxSDEzLjUwNTIiIHN0cm9rZT0iIzgwODE4MSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPg0KPC9zdmc+DQo=');
            width: 20px;
            height: 15px;
            display: inline-block;
            background-repeat: no-repeat;
            margin-right: 15px;
        }
        
        @media (min-width: 1200px) { 
            .v-nav.navbar .megamenu .row {
                gap: 40px;
            }
        }