body {font-family: "Roboto", Helvetica, Arial, sans-serif;color: #fff;margin: 0;padding: 0;overflow-x: hidden;}

/*-----------------------------------------------------------*/
/* Navigation - custom UberMenu
/*-----------------------------------------------------------*/

#header.rebrand {background-color: #212121 !important;transition: transform 0.2s ease-out; position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); border-bottom: 2px solid #212121;}

@media all and (min-width: 851px){
  #header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target{background: #005bf8 !important;color: #fff !important;border-radius: 25px !important;padding: 10px 30px !important; position: relative; border: none; cursor: pointer; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 10%) !important;background-position: center !important; background-repeat: no-repeat !important; background-size: 0% !important;transition: background-size 0.2s ease !important; z-index: 1;}
	#header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target:hover,	#header.rebrand #navHeader.rebrand .ubermenu .menu-pricing a.ubermenu-target:active{ text-decoration: none;background-size: 1000% !important; transition: background-size 0.2s ease !important;}
}
@media all and (min-width: 1011px){
	#header .ubermenu .ubermenu-target{padding: 12px 20px;}
	#header .menu-pricing a.ubermenu-target{padding: 10px 20px !important;}
}
@media all and (min-width: 851px) and (max-width: 1010px){
	#header .ubermenu .ubermenu-target{padding: 10px 15px;}
	#header .ubermenu .menu-pricing a.ubermenu-target{padding: 9px 15px !important;}
	.zn-wrapper {padding-top: 114px;}
}

#header.rebrand {background-color:#212121 !important;}		
#navHeader.rebrand {background-color:#212121 !important; display:table; width:100%;}
#header.rebrand #navHeader.rebrand .ubermenu-main{background-color: transparent;background: transparent;}
#header.rebrand #navHeader.rebrand .ubermenu .ubermenu-target {padding: 12px 20px;background: transparent;background-color: transparent;}
#header.rebrand #navHeader.rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {color: #fff;}
#header.rebrand #navHeader.rebrand .ubermenu.ubermenu-main .ubermenu-item-level-0:hover > .ubermenu-target, .ubermenu-main .ubermenu-item-level-0.ubermenu-active > .ubermenu-target{color: #005bf8;}
#header.rebrand #navHeader.rebrand .topNav a {color: #FFF;}
#header.rebrand #navHeader.rebrand .topNav a:hover {color: #005bf8; text-decoration: none;}
#header.rebrand #navHeader.rebrand .topNav a:active,
#header.rebrand #navHeader.rebrand .topNav a:focus{color: #00aeef;text-decoration: none;}
#header.rebrand #navHeader.rebrand .ubermenu-submenu{background-color: #F4F4F4;}
#header.rebrand #navHeader.rebrand .ubermenu-submenu .ubermenu-target-text {color: #666666;}
#header.rebrand #navHeader.rebrand .ubermenu-skin-grey-white .ubermenu-tabs-group, .ubermenu-skin-grey-white .ubermenu-tab > .ubermenu-target, .ubermenu-skin-grey-white .ubermenu-tab-content-panel{border-color: #212121;}
#header.rebrand #navHeader.rebrand .mmListHead {display: block;font-size: 15px;font-weight: bold;color: #005bf8;white-space: nowrap;padding: 18px 0 12px 5px;width: 95% !important;}

body#rebrand .zonarLogo {display:table-cell; width:210px; vertical-align:middle; text-align:right}
body#rebrand .navContainer {display:table-cell; vertical-align:middle; padding:0 60px 0 10px}
body#rebrand .zonarLogo img {width:150px; display:inline}
body#rebrand .topNav {display:block; margin:5px 0px; text-align:right;  padding:10px 110px 0 0; height:32px; font-family: Arial, Geneva, sans-serif; font-size:14px; text-align:right; position:relative;transition: display 1s ease-out;}
body#rebrand .mainNav {display:block; text-align:right; padding-bottom:10px; padding-top:5px}
body#rebrand .topNav a {color:#777777; font-weight:normal; text-decoration:none; display:inline-block; margin-right:20px; transition:none}
body#rebrand .topNav a:hover {color:#0081c6; text-decoration:none; transition:none}
body#rebrand .topNav a:active {color:#0081c6; text-decoration:none}
body#rebrand .topNav a:focus {color:#0081c6; text-decoration:none}

/* Site Search  */
#header.rebrand #navHeader.rebrand .search-wrapper { position: relative; display: inline-block;}

/* SVG Icon Overlay */
#header.rebrand #navHeader.rebrand .search-wrapper .search-icon { position: absolute;top: 50%;right: 12px;transform: translateY(-50%);pointer-events: none;transition: stroke 0.3s ease;}

/* Input Styling */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"] {width: 94px;padding: 6px 28px 6px 10px;font-size: 14px;color: #212121;background-color: transparent;background-image: none !important;border: 2px solid #666;border-radius: 4px;box-sizing: border-box;cursor: pointer;transition: width 0.3s ease-in-out, background-color 0.4s ease, border-color 0.2s ease;}
/* Focus Expand */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:focus {width: 475px;background-color: #fff;border: 2px solid #666;padding-right: 40px;cursor: auto;}

/* Hover + Focus icon color */
#header.rebrand #navHeader.rebrand .search-wrapper:hover .search-icon svg, #header.rebrand #navHeader.rebrand .search-wrapper:focus-within .search-icon svg {stroke: #007bff;}

/* Hover/Active input styling */
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:hover,
#header.rebrand #navHeader.rebrand .search-wrapper input[type="text"]:active { border-color: #666;}


/* Mobile Menu */
body#rebrand .ubermenu-responsive-toggle.ubermenu-responsive-toggle-main,
body#rebrand .ubermenu.ubermenu-mobile-modal .ubermenu-mobile-close-button {font-size: 35px; color: #FFF; float: right; width: auto; padding: 10px; border-radius: 9px; margin-right: 12px; background: none;}
body#rebrand .ubermenu-main.ubermenu-mobile-modal.ubermenu-mobile-view {background: #212121;}
body#rebrand .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{background: #666666;color: #fff;}
body#rebrand .ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{background:#F4F4F4;color: #212121;}
body#rebrand .mmListHead {color: #005bf8;}

/** UberMenu Custom Tweaks - Mobile **/
@media screen and (max-width: 850px) {
  body#rebrand .ubermenu .ubermenu-mobile-header, body#rebrand .ubermenu .ubermenu-mobile-footer {display: block;text-align: center;color: inherit;padding: 10px 15px 10px 15px;border-bottom: 1px solid #212121;}
  body#rebrand .ubermenu .ubermenu-mobile-footer{border-bottom: 0px;}
  
  body#rebrand .mMenuHeader img {visibility: hidden; width: 0; height: 0;}

  body#rebrand .mMenuHeader::before {content: "";display: inline-block;width: 110px;height: 34px;background-image: url('/wp-content/uploads/2025/07/zonar-header-logo-rev.webp');background-size: contain;background-repeat: no-repeat;}
  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header > div {width: 100%;display: flex;justify-content: flex-start;align-items: center;border-bottom: 0px;padding-left: 0px;}
  body#rebrand .ubermenu .ubermenu-submenu .ubermenu-column {padding:0 0 0 0}
  body#rebrand .ubermenu-responsive-toggle {padding: 15px 5px;}
  body#rebrand .ubermenu-mobile-footer {display: none !important;}
  body#rebrand .ubermenu-sub-indicator-close {display: none !important;}


  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header img {padding: 15px 10px 16px 15px; width: 135px;}
  body#rebrand .ubermenu.ubermenu-main .ubermenu-mobile-header .button-mobile {color: #FFF;margin-left: auto;margin-right: 0;font-size: 35px;  font-weight: normal;}
  body#rebrand .ubermenu-main .ubermenu-nav .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target {border-bottom: 1px solid #212121; background: #666666; color: #fff;}
}


body#rebrand .headBorder {margin:0 0 20px 0; height:2px; background-color:#ccc}
body#rebrand .ubermenu.ubermenu-disable-submenu-scroll .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {max-height: none; /*margin-top: 12px;*/}
body#rebrand .ubermenu-skin-grey-white.ubermenu-horizontal .ubermenu-item-level-0 > .ubermenu-submenu-drop {border-top: none; /*margin-top: 12px;*/}
body#rebrand .mega-subheader a {transition:none; color: #163f6b;}
body#rebrand .mega-subheader a:hover {transition:none; color: #163f6b;}
body#rebrand .mainNav a {transition:none}
body#rebrand .mainNav a:hover {transition:none}
body#rebrand .subContact {font-size:16px; padding:15px 0 15px 0; line-height:21px}
body#rebrand .allnew {display:inline-block; margin:0 0 0 5px; color:#ff0000; font-style:italic; font-weight:bold}

/*-----Simple Nav Modifications------*/
body#rebrand .simpleNav {display:block; text-align:right; padding-bottom:20px; padding-top:20px}
body#rebrand .simpleNav .phoneNumber {display:inline-block; display:inline-block;font-size:17px; color:#333; font-weight:bold; padding: 0 10px 0 0}
body#rebrand .simpleNav .quoteBtn {display:inline-block; padding-right:20px}
body#rebrand .simpleNav .quoteBtn a {background-color:#0081c6; border-radius:4px; color:#fff; font-size:13px; padding:10px 15px 10px 15px;}
body#rebrand .simpleNav .quoteBtn a:hover {background-color:#009fdf; text-decoration:none;}

@media screen and (max-width:1280px) {
	body#rebrand .navContainer {padding:0 20px 0 10px;}
	body#rebrand .zonarLogo {width:170px;}
}
@media screen and (max-width:970px) {
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 13px !important;}
}
@media screen and (max-width:900px) {
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 12px !important;}
}
@media screen and (max-width:850px) {
	body#rebrand .topNav {display:none}
	body#rebrand .navContainer {padding:0 0 0 10px;}
	body#rebrand .mainNav {padding-bottom:0; padding:5px 0 5px 0}
	body#rebrand .zonarLogo {width:125px;  padding:3px 0 3px 0}
	body#rebrand .zonarLogo img {width:110px;}
	body#rebrand .headBorder {margin:0 0 20px 0;}
	body#rebrand .mainNav {text-align:right;}
	body#rebrand .ubermenu.ubermenu-disable-submenu-scroll .ubermenu-active>.ubermenu-submenu.ubermenu-submenu-type-mega {max-height: none; margin-top: 0;}
	
	/*--Main menu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {font-size: 18px !important;}
	/*--submenu font size--*/
	body#rebrand .ubermenu-main .ubermenu-item-normal > .ubermenu-target {font-size: 17px !important;}
	
	body#rebrand .mmListHead {font-size:17px;padding:18px 0 12px 5px; width:100% !important;}
	body#rebrand .mmFeaturedItem {width:100% !important; border-right:0 solid #ccc !important; }
}
@media screen and (max-width:800px) {
	body#rebrand .mmRowPadding {border:0px solid #6cc24a !important; padding:0 15px 0 15px !important;}
	body#rebrand .fnc-container a {height:auto }
}

@media screen and (max-width:550px) {
	/*-----Simple Nav Modifications------*/
	body#rebrand .simpleNav .phoneNumber {display:none;}
}

/* Testimonial Slider */
body#rebrand .quote-slider .slick-slide { opacity: 0; pointer-events: none; transition: opacity 0.2s ease;}
body#rebrand .quote-slider .slick-slide.slick-active {opacity: 1; pointer-events: auto;}

/* Solution Nav Hover State */

body#rebrand .colorNavBar div:nth-of-type(1) a {background-color: #00aeff;}
body#rebrand .colorNavBar div:nth-of-type(1) a:hover {background-color: #0097cc;}
body#rebrand .colorNavBar div:nth-of-type(2) a {background-color: #ffd500;}
body#rebrand .colorNavBar div:nth-of-type(2) a:hover {background-color: #cca500;}
body#rebrand .colorNavBar div:nth-of-type(3) a {background-color: #a000a8;}
body#rebrand .colorNavBar div:nth-of-type(3) a:hover {background-color: #6a0072;}
body#rebrand .colorNavBar div:nth-of-type(4) a {background-color: #005bf8;}
body#rebrand .colorNavBar div:nth-of-type(4) a:hover {background-color: #0050c4;}
body#rebrand .colorNavBar div:nth-of-type(5) a {background-color: #66ae00;}
body#rebrand .colorNavBar div:nth-of-type(5) a:hover {background-color: #4b7a00;}
body#rebrand .colorNavBar div:nth-of-type(1) a:hover + span,.colorNavBar div:nth-of-type(2) a:hover + span,.colorNavBar div:nth-of-type(3) a:hover + span,.colorNavBar div:nth-of-type(4) a:hover + span,.colorNavBar div:nth-of-type(5) a:hover + span {color: #fff;}

/* Resources Hover State */

body#rebrand a.whiteBtnSm[href="/resources/articles/"]:hover {background-color: #00aeef;}
body#rebrand a.whiteBtnSm[href="/resources/whitepapers/"]:hover {background-color: #005bf8;}
body#rebrand a.whiteBtnSm[href="/resources/webinars/"]:hover {background-color: #8400ff;}
body#rebrand a.whiteBtnSm[href="/resources/infographics/"]:hover {background-color: #fcd532;color:#212121;}
body#rebrand a.whiteBtnSm[href="/news-events/press-releases/"]:hover {background-color: #77ad23;}
body#rebrand a.whiteBtnSm[href="/resources/qa/"]:hover {background-color: #a000a8;}

/*---- Hero and .blueActionBtn Action Blue Button ----*/
body#rebrand .hhContent-btn {background-color: #005bf8; color: #fff; text-decoration: none; font-size: 25px; padding: 15px 40px 15px 40px; border-radius: 50px; transition: background-size 0.4s ease !important; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 1%)!important; background-position: center; background-repeat: no-repeat; background-size: 0%; z-index: 1;}
body#rebrand .blueActionBtn {border-radius: 25px; color: #fff; background-color: #005bf8; padding: 10px 30px; font-size: 20px; position: relative; border: none; cursor: pointer; background-image: radial-gradient(circle, #00aeef 10%, #005bf8 10%);background-position: center; background-repeat: no-repeat; background-size: 0%;transition: background-size 0.2s ease; z-index: 1;}
body#rebrand .blueActionBtn:hover {background-size: 1000%; transition: background-size 0.2s ease !important;text-decoration: none; color: #fff;}
body#rebrand .hhContent-btn:hover, .hhContent-btn:active, .hhContent-btn:focus {background-size: 1000%; transition: background-size 0.3s ease !important;text-decoration: none; color: #fff;}
body#rebrand .blueActionBtn:active, .blueActionBtn:focus {background-size: 1000%; transition: background-size 0.2s ease;text-decoration: none; color: #fff;}