/* CSS Master template working v3 June 15, 2023*/

/*This is all that is needed for that top panel that disappears. Keep in mind that some of this is re-used for other sections below. Best not to duplicate*/


/* header ticket display*/

.Header__panelbtns
{
display:none; 
}

/*
.Header__panelbtns {
align-items: baseline;
}

.Header__containerLi
 {	
box-shadow: 0 0.625rem 0.625rem rgba(0,0,0,0.16);	
padding: 0;	
font-weight: 600;
color: #555;
border: 0;
font-size: 0.875rem;
text-decoration: none;
cursor: pointer;
background: #fff;
transition: .5s all;
border-radius: 0.1875rem;
line-height: 1.428571;
display:none 
}
*/
/*  end header ticket di


/*home stuff*/

*  { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
} 

.commonStyle__ulAlign { 
    margin: 0; 
    padding: 0; 
    list-style: none;
} 


.home .Layout__oneColumn .Layout__layout1 { 
    padding: 0px;
} 

.Layout__oneColumn { 
    max-width:  73.125rem; 
    min-height:  75vh; 
    position:  relative; 
    transition:  max-width 200ms ease; 
    display:  block;
    flex-wrap:  wrap; 
    justify-content:  space-between; 
    padding:  0 0.9375rem 2.5rem; 
    margin:  0 auto; 
    background-color:  transparent;
 transition: none;
} 

.Layout__fullWidth { 
    max-width: 80rem;
} 

/*
.home .Layout__oneColumn { 
    padding:   0px;
    padding-top:  0px; 
    background-color:  #fff !important;
    max-width: 100%;
} */

.home div#layoutContainer { 
    padding: 0; 
    border-bottom: 1px solid #efefef;
} 

:focus { 
    outline: 0;
} 

.AccessibilityControl__common { 
    outline: none;
} 

.body { 
  /*  font-family:  "Latoregular",sans-serif; 
*/
font-family:  helvetica; 
    margin:  0; 
    padding:  0; 
    line-height:  1.6; 
    background:  #f3f5f7;
    color:  #000;
} 

#container { 
    width: 100%; 
    height: 100vh; 
    -webkit-overflow-scrolling: touch; 
    overflow-y: auto;
} 

.AppContainer__homePage {		
    margin: 1.5rem 0 0;
}
/*home stuff*/

/* widgets */

.AppContainer__homeWidget {padding: 0px}

.WidgetsContainer__widgetCont {
}

.WidgetsContainer__lftWd+.WidgetsContainer__lftWd,.WidgetsContainer__rightWd+.WidgetsContainer__rightWd,.WidgetsContainer__lftWd+.WidgetsContainer__rightWd,.WidgetsContainer__rightWd+.WidgetsContainer__lftWd{
  margin-top:0.25rem
}
.WidgetsContainer__lftWd:after {
  clear: both;
  content: '';
  display: block;
}

.WidgetsContainer__lft{
  list-style: none;
  padding:.4rem
}




/* widgets */

/* top panel for sure */

.sectionselecttab{
  top:0px;    
width:100%
 	border-bottom: 2px solid #9dcae0;
    background-color: #2B86BC; 
  position: -webkit-sticky;
  position: sticky;
  list-style-type: none;
}

.zc-product-list-tab{
     max-width: 1160px;
    margin: 0 auto;
}
.zc-product-list-tab ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    margin: 0px;
    padding: 0px;
}
.zc-product-list-tab li {
    text-align: center;
    min-width: 16%;
  	position:relative;
  	transition: all 0.5s;
}
.zc-product-list-tab li:before {
    content: '|';
    position: absolute;
    right: 0px;
    top: 10px;
    color: #e5e3e1;
}
.zc-product-list-tab li:last-child:before {
    content: '';
    position: absolute;
    right: 0px;
    top: 10px;
    color: #e5e3e1;
}
.zc-product-list-tab li a {
    padding: 10px 0px;
    display: inline-block;
    color: #555;
  	transition: all 0.5s
}
.zc-product-list-tab li:hover a,.zc-product-list-tab li.tab-active a{
  	color: #2b86bc;
}
.zc-product-list-tab li.tab-active a {
    border-bottom: 3px solid #2b86bc;
}

/* end top panel for sure */


/*This is all that is needed for that top panel that disappears*/


/* this is for the boxes */

.sp_tac { 
    text-align: center;
} 

/* this is for the boxes for the support tickets. It’s really really easy to do! This is all we need!!!!!*

/*suites*/
.sp_suites_heading,
.zc-product-header,
.sp_article_title {
    font-size: 20px;
}
.sp_suites_heading {
    font-weight: 550;
    margin-bottom: 12px;
    font-size: 35px;
      text-align: center;
}
.sp_suites_desc {
/*
font-family:  "Latoregular",sans-serif; 
*/
font-family:  helvetica; 
    font-size: 17px;
  text-align: center;
}


.sp_suites_desc_buttons {
    font-size: 11px;
  text-align: center;
}
/* Below is the font size for CTA
*/
.sp_suites_title {
    font-size: 18px;
    margin-top: 40px;
}

.sp_suites {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}
.sp_suites > div,
.zc-product-list ul li,
.zc-product-panel ul li a,
.sp_circle,
.zc-product-close,
.sp_close,
.sp_df_aic {
    display: flex;
    align-items: center;
}
/* Below is for the size of the box of the CTA
*/
.sp_suites > div , .zc-zoho-one-logo {
    flex-direction: column;
    justify-content: center;
    width: 200px;
    min-height: 140px;
    margin: 0 10px 12px 10px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 30px;
    border-top: 2px linear-gradient;
    position: relative;
    transition: all 0.5s;
    box-shadow: 0 0 1px #43465F;
    -webkit-box-shadow: 0 0 1px #43465F;
    -ms-box-shadow: 0 0 1px #43465F;
}
.bundle_div:hover,.zc-zoho-one-logo:hover {
    box-shadow: 0px 0px 25px #43465F;
    -ms-box-shadow: 0px 0px 25px #43465F;
    -webkit-box-shadow: 0px 0px 25px #43465F;
}

.sp_suites a.bundle_anchor {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0px;
    left: 0px;
}

}
.sp_suites_title .subtext {
    display: none; /* Hide the subtext initially */
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

.sp_suites_title:hover .subtext {
    display: block; /* Show the subtext on hover */
}
}


/*suites*/

/* this the end for all the boxes */


/* This is all we need to make an additional set of boxes. Copy the original code.. and copy this css and change the references*

/*suites*/
.bx_suites_heading,
.zc-product-header,
.bx_article_title {
    font-size: 20px;
}
.bx_suites_heading {
    font-weight: 550;
    margin-bottom: 12px;
    font-size: 38px;
      text-align: center;
}

.bx_suites_title {
    font-size: 18px;
    margin-top: 7px;
}
.bx_suites_subtitle {
    font-size: 18px;
    margin-top: 7px;
}

.bx_suites_desc_buttons {
    font-size: 10px;
  text-align: center;
}

.bx_suites {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}


.bx_suites_desc {
/*
  font-family:  "Latoregular",sans-serif; 
*/
font-family:  helvetica; 
	padding: 18px;
   font-size: 14px;
  text-align: center;
}

.bx_suites > div,
.zc-product-list ul li,
.zc-product-panel ul li a,
.bx_circle,
.zc-product-close,
.bx_close,
.bx_df_aic {
    display: flex;
    align-items: center;
}

.bx_suites > div , .zc-zoho-one-logo {
    flex-direction: column;
    justify-content: center;
    width: 300px;
    min-height: 315px;
    margin: 0 10px 20px 10px;
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px;
    border-top: 3px solid;
    position: relative;
    transition: all 0.5s;
    box-shadow: 0 0 1px #bfbfbf;
    -webkit-box-shadow: 0 0 1px #bfbfbf;
    -ms-box-shadow: 0 0 1px #bfbfbf;
}

.bx_suites a.bundle_anchor {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0px;
    left: 0px;
}

.sp_suites > .sp_crmplus {border-color: #191919;}
.sp_suites > .sp_workplace {border-color: #191919;}
.sp_suites > .sp_financeplus {border-color: #191919;}
.sp_suites > .sp_itmanagement {border-color: #191919;}
.sp_suites > .sp_peopleplus {border-color: #191919;}
/*.sp_suites > .sp_bubba {border-color: #01a2f3;}
.bx_suites > .bx_bubba {border-color: #000000;}*/
.bx_suites > .bx_workplace {border-color: #191919;}
.bx_suites > .bx_financeplus {border-color: #191919;}
.bx_suites > .bx_itmanagement {border-color: #191919;}
.bx_suites > .bx_peopleplus {border-color: #191919;}



/*suites*/

/* this the end for all the boxes */

/*The contact us verbiage*/



splay*/
/* 1) Override Zoho’s core theme variables */
:root, .portalContainer {
  --color-brand:        #43465F !important;
  --color-hoverblue1:   #43465F !important;
}

/* 2) Target the “Knowledge Base” pill (and any .Button__tagPrimary elements) */
.Button__tagPrimary {
  background-color: #43465F !important;
  border-color:     #43465F !important;
  color:            #FFFFFF !important;
}

/* 3) If you see variants (basic, btnxlarge, etc.), be explicit */
.Button__tagPrimary.Button__basic,
.Button__tagPrimary.Button__btnxlarge {
  background-color: #43465F !important;
  border-color:     #43465F !important;
  color:            #FFFFFF !important;
}

/* 4) And for good measure, override hover/active states */
.Button__tagPrimary:hover,
.Button__tagPrimary:focus,
.Button__tagPrimary:active {
  background-color: #43465F !important;
  border-color:     #43465F !important;
}
/* ─── Hero (over the banner) ─── */
.Header__bannerAlt #searchBtnContainer {  
  background: transparent !important;
  border: none          !important;
  box-shadow: none      !important;
}

/* Keep the white input in hero */
.Header__bannerAlt #searchBtnContainer input {
  background-color: #ffffff !important;
  border:           1px solid rgba(255,255,255,0.6) !important; /* or whatever makes sense */
}

/* ─── Fixed header (on scroll) ─── */
/* Zoho applies .Header__homeNavbarFixed to the top container when it sticks */
.Header__homeNavbarFixed #searchBtnContainer {
  background-color: #43465F !important;
  border:           1px solid #43465F !important;
  box-shadow:       0 2px 4px rgba(67,70,95,0.3) !important;
}

/* Input and button/icon in the fixed state */
.Header__homeNavbarFixed #searchBtnContainer input {
  background-color: #ffffff !important;
  border:           1px solid #43465F !important;
}
.Header__homeNavbarFixed #searchBtnContainer button,
.Header__homeNavbarFixed #searchBtnContainer svg {
  background-color: #43465F !important;
  fill:             #ffffff !important;
  border-color:     #43465F !important;
}
/* ─── Remove the gray wrapper behind the fixed-header search ─── */
.Header__homeNavbarFixed .Header__titleSearchWrapper,
.Header__homeNavbarFixed .Header__searchSubCont {
  background: transparent !important;
  box-shadow: none       !important;
}

/* ─── Make sure the header’s blue bar is your new color ─── */
.Header__homeNavbarFixed .Header__headerBg {
  background-color: #43465F !important;
}

/* ─── (Optional) give the floating search box a subtle shadow ─── */
.Header__homeNavbarFixed #searchBtnContainer {
  box-shadow: 0 2px 4px rgba(67,70,95,0.3) !important;
}
/* ─── Hide “Add Ticket” on article pages ─── */
#new_ticket_bth,
#new_ticket_button,
a[href*="/newticket"] {
  display: none !important;
}
/* ─── Force the header logo to 150px tall ─── */
img.Header__logo {
  height: 100px      !important;
  width: auto        !important;
  max-height: none   !important;
  max-width: none    !important;
}