/*SFDI-619 ctct reband. new CTSans font
    * Poppins changed to CTSans
    * link bright blue color 1856ED changed to 0081E4
    * headline (topics and so forth) 0b1450 changed to 333333
    * #0b1450 changed to #0081E4 (subtopic page)

*/
@font-face {
    font-display: swap;
    font-family: 'CTSans Regular';
    font-style: normal;
    font-weight: 400;
    src: url("CTSansFont/CTSans-Regular-7827c2b2e45e00bc3604e750650ef81f.woff2") format("woff2"),
         url("CTSansFont/CTSans-Regular-b451882fa4a29bb324c5a55a10047d1f.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'CTSans SemiBold';
    font-style: normal;
    font-weight: 600;
    src: url("CTSansFont/CTSans-Semibold-626a4e0c7d123f31227d9342622f4b1e.woff2") format("woff2"),
         url("CTSansFont/CTSans-Semibold-06bfbbb97f1a3ecec853af5c29e06537.woff") format("woff")
}

@font-face {
    font-display: swap;
    font-family: 'CTSans Bold';
    font-style: normal;
    font-weight: 700;
    src: url("CTSansFont/CTSans-Bold-ae9a6216ddb1db65aa87d5dc67d47a1c.woff2") format("woff2"),
         url("CTSansFont/CTSans-Bold-b635c3186a6a9720e05fe0e398e657a1.woff") format("woff")
}

/* crm-5370. ctct rebrand font. poppins-regular - latin
source: https://google-webfonts-helper.herokuapp.com/fonts/poppins?subsets=latin
*/
@font-face {
font-family: 'Poppins Regular';
font-style: normal;
font-weight: 400;
src: url("PoppinsFont/poppins-v9-latin-regular.eot"); /* IE9 Compat Modes */
src: local('Poppins Regular'), local('Poppins-Regular'),
    url("PoppinsFont/poppins-v9-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
    url("PoppinsFont/poppins-v9-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-regular.woff") format('woff'), /* Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */
    url("PoppinsFont/poppins-v9-latin-regular.svg#Poppins") format('svg'); /* Legacy iOS */
}
/* poppins-600 - latin */
@font-face {
font-family: 'Poppins SemiBold';
font-style: normal;
font-weight: 600;
src: url("PoppinsFont/poppins-v9-latin-600.eot"); /* IE9 Compat Modes */
src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
    url("PoppinsFont/poppins-v9-latin-600.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
    url("PoppinsFont/poppins-v9-latin-600.woff2") format('woff2'), /* Super Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-600.woff") format('woff'), /* Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-600.ttf") format('truetype'), /* Safari, Android, iOS */
    url("PoppinsFont/poppins-v9-latin-600.svg#Poppins") format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
font-family: 'Poppins Bold';
font-style: normal;
font-weight: 700;
src: url("PoppinsFont/poppins-v9-latin-700.eot"); /* IE9 Compat Modes */
src: local('Poppins Bold'), local('Poppins-Bold'),
    url("PoppinsFont/poppins-v9-latin-700.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
    url("PoppinsFont/poppins-v9-latin-700.woff2") format('woff2'), /* Super Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-700.woff") format('woff'), /* Modern Browsers */
    url("PoppinsFont/poppins-v9-latin-700.ttf") format('truetype'), /* Safari, Android, iOS */
    url("PoppinsFont/poppins-v9-latin-700.svg#Poppins") format('svg'); /* Legacy iOS */
}

/* CRM-5434 fix for popup menu background showing as transparent */
@media(max-width: 1023px) {
    #toptopnav .navbar__menu {
        z-index: 4;
    }
}

/* crm-5370 CTCT rebranding */
body {
    color: #333333;
}

/* SFDI-464 use h1 for title instead of h2 */
h1#rn_summary {
    font-size: 30px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #0081E4;
}

a {
    color: #0081E4;
}


#KB_HOME_HEADLINE {
    color: #0081E4;
}

#custom-search-input .btn {
    background-color: #0081E4;
}

/* crm-3365 styles for website redesign
   crm-4029 make all H3 tags bold
   crm-5370 change font from whitney to poppins and make font class names ctct-generic
 */
.CTCT-bold {
    font-family: 'CTSans Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
}

.CTCT-semibold {
    font-family: 'CTSans SemiBold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
}

.CTCT-regular {
    font-family: 'CTSans Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
}

/* make bootstrap columns same size - heights https://stackoverflow.com/a/22892773 */
@media (min-width: 768px) {
  .row.equal:not([style*="display:none"]) {
    display: flex !important;
    display: -webkit-flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }

  .row.equal [class^='col-']:not([style*="display:none"]) {
    display: flex !important;
    display: -webkit-flex !important;
    flex-direction: column !important;
    padding-bottom: 40px;
    margin-bottom: 20px;
    flex-basis: 20em; /* safari fix:  https://stackoverflow.com/a/42985098 */
  }

  .row.equal + .row.equal {
    padding-top: 20px;
  }

}


/* alternative to HR tag - style bottom of bootstrap column to look like HR tag. this solution aligns to bottom of column, whereas HR tag does not. */
.insetParent {
    position: relative;
}

.insetBottom:before {
  content : "";
  position: absolute;
  left    : 4%;
  bottom  : 0;
  height  : 1px;
  width   : 92%;
  border-bottom-style: inset;
  border-bottom-width: thin;
}

/* styles overrides jqueryUI autocomplete styles with CC look n feel.*/
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
    background: #FFF;

    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ui-menu-item {
    FONT-SIZE: 18px;
    color: #333
}

.ui-menu .ui-menu-item a.ui-corner-all:hover, .ui-menu .ui-menu-item a.ui-corner-all:focus, .ui-menu .ui-menu-item a.ui-corner-all:active {
    background:#394856 !important;
    color:#FFFFFF;
    border-radius:0;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #394856;
    border: none;
    color:#FFFFFF;
    border-radius:0;
    font-weight: normal;
}

#howcanwehelpyou h2 {
    font-size: 36px;
}

div.searchContainer {
    background: #DEE1E3;
    padding-left: 40px;
    padding-right: 40px;

    background-image: url("GreyGrowthRings-brandhub_logo_subpage_hero_full.png");
    background-size: cover;
}

div.searchContainer .searchElementSpacing {
    margin-top: 0px;
    padding-top: 40px;
    margin-bottom: 0;
}

#KB_HEAD_GUIDANCE {
    font-size: 18px;
}

#topicItemTemplateContainer h3 {
    font-size: 30px;
}

#topicItemTemplateContainer p {
    font-size: 18px;
}

#topicHomeArea h2 {
    font-size: 30px;
    color: #333333;
}

#topicHomeArea h3 {
    font-size: 20px;
    color: #333333;
}

#topicHomeArea a {
    font-size: 18px;
}

#topicHomeMoreLI h4 a {
    font-size: 20px;
}

#vidoTutorialFixedContent p {
    font-size: 18px;
}


/* crm-5370 video links */
#VideoAnchorIdx span {
    padding-left: 10px;
    padding-right: 10px;
    word-break: break-all;
}

#VideoAnchorIdx a {
    white-space: nowrap;
    font-size: 18px;
}

#videoTutorialAreaInsertPoint h3 a {
    font-size: 20px;
}

#videoTutorialAreaInsertPoint h4 {
    font-size: 18px;
    color: #333333;
}

#videoTutorialAreaInsertPoint h4~p {
    font-size: 14px;
}

#videoTutorialAreaInsertPoint a {
    font-size: 18px;
}

/* crm-5370 quickstart page */
#guideArea #KB_QS_TEXT {
    font-size: 18px;
}

#guideArea h3 {
    font-size: 18px;
    color: #333333;
}

#guideArea #guidesummary {
    font-size: 14px;
}

#whatnewArea #KB_WN_TEXT {
    font-size: 18px;
}

#whatnewArea #KB_WN_SUBHEADLINE {
    font-size: 18px;
    color: #333333;
}

#whatnewArea h4 {
    font-size: 16px;
    color: #333333;
}

#whatnewArea div {
    font-size: 14px;
}


/* search result page format */
#searchlisting {
    list-style: none;
    padding-left: 10px;
    padding-top: 20px;
}

#searchlisting li a {
    font-size: 18px;
}

#searchlisting .Element_4 {
    font-size: 12px;
    color: #FF5BA0;
}

#searchlisting .Element_5 {
    font-size: 12px;
    color: #C5C5C5;
}

/*crm-3273, snippet formatting */
mark
{
    background-color: unset;
    font-weight: bold;
}

/*crm-5152 ellipsis and no wrap text*/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: calc(100% - 30px);
}

/* article detail page */s

#articleDetailArea h1, #articleDetailArea h2, #articleDetailArea h3, #articleDetailArea h4 {
    color: #333333;
}

#articleDetailArea h1 {
    font-size: 36px;
}

#articleDetailArea h3 {
    font-size: 24px;
}

#articleDetailArea h4 {
    font-size: 20px;
    font-family: ;
}

#articleDetailArea {
    font-size: 18px;
}

/* crm-3660 make article images dynamically sized */
/* CRM-3779 : DFbug SO: Issue with inline images in KB articles  */
div#articleDetailArea img {
    /*  display: block;  */
    max-width: 100%;
    height: auto;
}

/* crm-4030 add padding to article tables */
div#articleDetailArea th, td {
    padding: 5px;
}

#articleDetailArea #rn_answerid, #articleDetailArea #rn_updated {
    font-size: 16px;
}


/* drop downs etc */
div.langdd-container {
    padding-bottom: 7px;

    font-size: 12px;
}

div.langdd-container li {
    font-size: 12px;
}

div.langdd-container a {
    padding: 0 10px;
    text-decoration: none;
}

a.dropdown-toggle, a.dropdown-toggle:hover, a.dropdown-toggle:focus {
    color: #333333;
}

/* crm-3813 hide certain elements for mobile app when "mobile" URL parameter is present */
.hiddenOnApp {
    display:none !important;
}

/* crm-5152 new breadcrumb GUI */
nav#breadcrumbs {
    margin-top: 25px;
    padding: 0 10px 0 10px;
}

nav#breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav#breadcrumbs li {
    /* display creates proper alignment above breadCrumbBottom class */
    display: inline;
    padding-top: 15px;

    margin-right: 5px;
}

nav#breadcrumbs li a {
    /* display and padding create proper spacing above breadCrumbBottom class */
    padding-bottom: 15px;
    display: inline-block;

    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: #333333;
    font-size: 18px;
}

nav#breadcrumbs li a:hover {
    color: #0081E4;
}

nav#breadcrumbs li a span {
    white-space: pre;
}

nav#breadcrumbs li.bcSelected {
    /* display padding and bottom border is white to overlay the
       grey bottom border of breadCrumbBottom class */
    display:inline;
    padding-bottom: 18px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: lightgray;
    border-bottom-color: white;

    background: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

nav#breadcrumbs li.bcSelected a {
    color: #0081E4;
}

/* bottom border of breadcrumb tabs */
.breadCrumbBottom {
    width: 100%;
    border-top: 1px solid lightgray;
}

.backlink {
    margin-top: 20px;
    display: block;
}

/* used for debug purposes only */
.debug {
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 8px;
    color: auto;
    line-height:14px;
}

.debugButton {
    width:80px;
    height:14px;
    color:black;
    vertical-align: top;
}

/* CRM-5954 lazy load videos. put min size to ensure screen is stable while content is dynamically rendered */
#videomini {
    min-height: 169px;
    min-width: 300px;
}