@import url('https://fonts.googleapis.com/css?family=Encode+Sans:100,200,300,400,400i,500,700');
@import url('https://fonts.googleapis.com/css?family=Poetsen+One:100,200,300,400,400i,500,700');
/* */

body {
    background: #f9f9f9;
}
/* Home Page Title */

#docsSearch h1 {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    margin-top: .4em;
    /* font-family: "Poetsen One", sans-serif; */
	font-family: "Encode sans", sans-serif;
	color: #002e5f;
    padding: 10px;
}
.navbar .nav li {
    display: inline-block;
    float: none;
    font-family: "Encode Sans", sans-serif;
    font-size: 13px;
    letter-spacing: .1em;
}
.navbar .nav li a, .navbar .icon-private-w {
    font-size: 14px;
    font-weight: 300;
}
.navbar .nav .active a {
    color: #ffac4a !important;
}

/* Header Size */
a.brand {
	margin-top: 10px;
	margin-bottom: 10px;
	vertical-align: middle;
	height:60px;
}
a.brand > img {
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    height: auto;
    margin-left: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: auto;
}

.navbar .navbar-inner {
    /* background: #ffffff; */
    height: 60px;
}
.navbar .navbar-inner .container-fluid {
    padding: 0;
    height: 60px;
}
.navbar .brand {
    float: left;
    display: block;
    padding: 0px;
    margin-left: -20px;
    font-size: 20px;
    font-weight: 200;
    color: #777;
    text-shadow: 0 1px 0 #fff;
	margin-top: auto;
	margin-bottom: auto;
	vertical-align: middle;
}
/* Home Page Search Bar Background */

#docsSearch {
    background: #ffffff;
    border-top: 1px solid #dadada;
    margin-bottom: 3em;
    padding: 1.5em 0;
}
/* Search Input Box */

input.search-query {
    padding-right: 14px;
    padding-right: 4px \9;
    padding-left: 14px;
    padding-left: 4px \9;
    margin-bottom: 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
}
/* Home Page Category Title*/

.category-list h3 {
    color: #002e5f;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3em;
    font-family: "Encode Sans", sans-serif;
}

/* Category Styles */

.category-list .category p {
    color: #7e8287;
    font-family: "Encode Sans", sans-serif;
    font-weight: 100;
    font-size: 15px;
    letter-spacing: 0.25px;
}
.category-list .category {
    background-color: #fff;
    background-position: top 20px center !important;
    background-repeat: no-repeat !important;
    background-size: 100px auto !important;
    /* box-shadow: 0 7px 4px -5px rgba(0, 0, 0, 0.05); */
    box-sizing: border-box;
	border: 0px solid #fff;
    min-height: 183px;
    padding: 120px 20px 15px;
    position: relative;
    width: 31.5%;
    transition: all 0.2s;
	border-radius: 15px;
}
.category-list .category:hover {
    text-decoration: none;
    background: #01f197;
	/* border: 2px solid #e6fef5; */
	/* outline: 10px solid #01f197;
	outline-offset: -10px; */
}



.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    text-align: center;
    padding-left: 0%;
    font-family: "Encode Sans", sans-serif;
    /* text-transform: uppercase; */
    color: #002e5f;
    font-size: 22px;
    letter-spacing: 1px;
}

.collection-category h2 a {
    font-weight: 400;
    margin: 0 0 20px;
    text-align: center;
    padding-left: 0%;
    font-family: "Encode Sans", sans-serif;
    /* text-transform: uppercase; */
    color: #002e5f;
    font-size: 22px;
    letter-spacing: 1px;
}

.collection-category .category-list {
    margin: 0 0 4em;
    text-align: center;
}



/* Home Page Link Style */

#serp-dd .result a, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a span, .category-list .category .article-count, .category-list .category .article-count, .contentWrapper a {
    font-weight: 500;
    letter-spacing: .25px;
    color: #92959A;
    margin-top: 15px;
    /* text-transform: capitalize; */
    text-decoration: none;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 500;
}
#serp-dd .result a:hover, #serp-dd .result>li.active, #full-Article strong a, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count, .contentWrapper a {
    letter-spacing: .25px;
    color: #002e5f; 
	/* color: #B7B8BC !important; */
    margin-top: 15px;
    /* text-transform: capitalize; */
    /* text-decoration: underline; */
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 400;
}

#article-count {
	color: #92959A;
}

/* Home Page Search Button */

#searchBar button {
    color: #002e5f;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #01f197;
    border-radius: 0 5px 5px 0;
    border: 1px solid #01f197;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
    position: absolute;
}
#searchBar button:hover {
    background: #99f9d5;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    border: 1px solid #99f9d5;
}
input, button, select, textarea {
    font-family: "Encode Sans",
    sans-serif,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
}


/* Category Images */

/*
  Here is where you determine the images to be used just above each section of your Help Scout main page.
  You have to create one #category-xxx CSS selector for each separate category in your Help Scout collection.
  To get your category xxx number, simply visit the relevant category in your Help Scout docs and
  check the URL bar for the 3 digit category number.

  Then you have to specify an image located on a shared server somewhere on the internet that can
  serve up the images so Help Scout can display them.
*/

/* Direct Debit */
#category-295 {
    background-image: url(https://www.allpay.net/app/uploads/2025/07/HS-Circle-Mobile-App.svg);
}
/* Direct Debit */
#category-218 {
    background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Direct-Debit.svg);
}

/* Debit & Credit */
#category-219 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Debit-Credit.svg);
}

/* Prepaid Carta - purple */
#category-223 {
  background-image: url(https://www.allpay.net/app/uploads/2025/09/HS-Circle-Prepaidpurple.svg);
}

/* Cash */
#category-224 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Cash-Payout.svg);
}

/* Customer Account Manager */
#category-229 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Customer-Account-Manager.svg);
}

/* File Manager */
#category-228 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-File-Manager.svg);
}

/* Messenger */
#category-235 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Messenger.svg);
}

/* Payments Hub Migration */
#category-231 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Migration.svg);
}

/* Payments Hub Guides */
#category-93 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-User-Guides.svg);
}

/* Payments Hub Videos */
#category-92 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Videos.svg);
}

/* Prepaid */
#category-322 {
  background-image: url(https://www.allpay.net/app/uploads/2024/08/Help-Scout-Prepaid.svg);
}
/* etc... keep going and add one CSS ID selector for each category. */



/* Side Bar Styles */

#sidebar .nav-list a {
    display: inline-block;
    color: #92959a;
    font-size: 14px;
    padding: 6px 15px 6px 0;
    line-height: 20px;
    margin-left: 0;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 500;
}
#sidebar .nav-list a:hover {
    color: #002e5f;
    /* text-decoration: underline;
  	text-decoration-color: #01f197; */
}
#sidebar .nav-list a:hover .icon-arrow {
    display: inline;
	color: #FFAc4A !important;
}

#sidebar .nav-list .active a, #sidebar .nav-list .active a:hover, #sidebar .nav-list .active a:focus {
    font-weight: 600;
    color: #002e5f;
    background: 0 0;
    text-shadow: none;
    /* text-decoration: underline; */
}
#sidebar .nav-list .active a .icon-arrow {
    display: none !important;
}

#sidebar h3 {
    text-transform: uppercase;
    font-size: 16px;
    color: #7e8287;
    font-weight: 400;
    margin-bottom: 4px;
    font-family: "Encode Sans",
    sans-serif;
    letter-spacing: 2px;
}

.articleList a:hover span {
	text-decoration-color: #01f197 !important; 
}

/* Article Styles */

#main-content {
    background: none;
    float: right;
    margin-bottom: 2em;
    padding: 32px 0 0 28px;
}

#fullArticle img {
    display: block;
    margin: 1em 0 2em;
    padding: 4px;
    border-radius: 4px;
    box-sizing: border-box;
}

#fullArticle .title, .contentWrapper h1 {
    margin: 0 30px .5em 0;
    font-family: "Encode Sans",
    sans-serif;
    color: #002e5f;
    font-weight: 700;
}
#fullArticle .printArticle {
    position: absolute;
    right: 46px;
    top: 40px;
}
#fullArticle, #fullArticle p, #fullArticle ul, #fullArticle ol, #fullArticle li, #fullArticle div, #fullArticle blockquote, #fullArticle dd, #fullArticle table {
    color: #4a4e57;
    font-family: "Encode Sans",
    sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
}
#fullArticle blockquote {
	border-left:5px solid #ffac4a;
}

/* #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .collection a, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count {
	text-decoration: underline;
}
*/

#fullArticle a:hover, #fullArticle p a:hover, #fullArticle ul a:hover, #fullArticle ol a:hover, #fullArticle li a:hover, #fullArticle table a:hover {
	text-decoration: underline;
	text-decoration-color: #01f197;
}

#categoryHead .sort select {
    width: 150px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    font-size: 13px;
    color: #7e8287;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 300;
}
/* Style this one if you want bolded article text to have a different color */

#fullArticle strong {
    color: #4a4e57;
}
#fullArticle h1 {
	color: #002e5f;
	padding-top: 50px;
	padding-bottom: 20px;
}
#fullArticle h2 {
    font-size: 24px;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 400;
	padding-top: 30px;
    color: #002e5f;
}
#fullArticle h3 {
    font-size: 20px;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 700;
    color: #002e5f;
	padding-top: 20px;
}
#fullArticle h4 {
    font-size: 16px;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 300;
    color: #7e8287;
    font-style: italic;
}
.contentWrapper p {
    margin-top: -4px;
    word-wrap: break-word;
    font-family: "Encode Sans",
    sans-serif;
    color: #63676b;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: .01em;
}

/* Article Footers */

.articleFoot p, .articleFoot time {
    color: #92959a;
    display: inline-block;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* Page Footers */

footer p {
	color: #92959a;
	font-weight: 400;
}

footer p a {
    color: #92959a;
    font-family: "Encode Sans",
    sans-serif;
    font-weight: 400;
}
footer p a:hover {
    text-decoration: underline;
	text-decoration-color: #01f197;
}


/* Contact Modal */

#contactModal h2, .abuse h2 {
    background: #fff;
    margin: 0;
    padding: 11px 0 10px 18px;
    font-size: 22px;
    border-bottom: 1px solid #ccc;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: "Encode Sans",
    sans-serif;
    color: #002e5f;
    font-weight: 300;
}
#contactModal .control-label {
    width: 110px;
    font-family: "Encode Sans",
    sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #63676b;
}

.btn {
    color: #002e5f;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #01f197;
    border-radius: 500px;
    border: 1px solid #01f197;
    font-size: 14px;
    padding: .5em;
    /* height: 50px; */
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #002e5f;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #99f9d5;
  border: 1px solid #9da39a;
}

#search-query .btn:hover {
    color: #002e5f;
    text-shadow: 0 0px 0px rgba(255,255,255,.0);
    background: #99f9d5;
    border-radius: 5px;
    border: 1px solid #99f9d5;
    font-size: 18px;
    padding: 0 1.5em;
    height: 50px;
}

.category-list {
    text-align: center;
}

/* Fix for making homepage category gallery go smoothly from 3 to 2 to 1 column */

@media screen and (max-width: 1105px) {
    section.category-list .category {
        width: 48.2%;
    }
}
@media screen and (max-width: 760px) {
    section.category-list .category {
        box-sizing: border-box;
        margin: 0 0 20px;
        padding: 120px 20px 15px;
        width: 100%;
    }
}
/* RESPONSIVE */

@media (max-width: 768px) {
    .navbar .btn-navbar {
        margin-top: 16px;
        right: -10px;
    }
    .related {
        padding: 30px 25px 25px;
    }
    .related ul {
        margin-left: 0;
    }
    .related h3 {
        padding-left: 0;
    }
    .related ul>li a {
        margin-left: 0;
    }
}
@media (max-width: 480px) {
    #searchBar button {
        color: transparent;
        text-shadow: 0;
        background: red;
        border-radius: 0 5px 5px 0;
        border: 0;
        font-size: 18px;
        padding: 0 1.5em;
        height: 50px;
        position: absolute;
    }
    #searchBar button .icon-search {
        display: block;
        text-shadow: none;
        margin-top: 15px;
    }
    #searchBar button:hover .icon-search:hover {
        display: block;
        text-shadow: none;
        margin-top: 15px;
        background-color: transparent;
    }
}
@media (max-width: 480px) {
    #fullArticle .title, .contentWrapper h1 {
        font-size: 24px;
    }
    #fullArticle h2 {
        font-size: 20px;
    }
}


/* Collection Titles  */
.collection-category h2 a {
    color: #1e1f23;
}
.collection-category h2 a:hover {
    text-decoration: underline
	text-decoration-color: #01f197;
}

.collection-category h2 {
    font-weight: 400;
    margin: 0 0 20px;
    padding-left: .65%;
    font-family: "Open Sans",
    sans-serif;
    text-align: center;
}

.icon-arrow:before {
	color:#01f197;
}