@import url('https://cdn.spanx.com/static/frontend/Expandlab/spanx/en_US/css/ionicons.min.css');
@import url('https://cdn.spanx.com/static/frontend/Expandlab/spanx/en_US/css/fonts.css');

/* ----------------------
// Zendesk elements
// ----------------------*/

main[role=main] {
    position: relative;
	z-index: 1;
	padding-top: 30px;
	padding-bottom: 30px;
	background: #fff;
}

.breadcrumbs {overflow: hidden; margin-top: -1.5rem; margin-bottom: 1rem; display: none;}
.breadcrumbs li {float: left; display: block; font-size: 14px; color: #111}
.breadcrumbs li a {display: inline-block; padding: 0; color: #dd0330; font-family: "brandon_grotesque_medium","Helvetica Neue",Helvetica,Arial,sans-serif;}
.breadcrumbs li a:after {
    font-family: 'Ionicons';
    content: "\f3d3";
    padding: 0 9px 0 7px;
    font-size: 10px;
    color: #8c8c8c;
    background: 0 0;
    display: inline-block;
}
.breadcrumbs li:last-child a {color: #111; pointer-events: none; font-family: "brandon_grotesque_regular","Helvetica Neue",Helvetica,Arial,sans-serif;}
.breadcrumbs li:last-child a:after { display: none;}

.breadcrumbs.breadcrumbs--search-results { margin: 0 0 1rem}

.page-title-wrapper._zendesk { margin-bottom: 2rem}
.page-title-wrapper._zendesk h1.page-title { font-size: 24px; font-family: "brandon_grotesque_medium","Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing: 0;}

.article-title { position: relative; padding-top: 3rem; border-top: 1px solid #e9e9e9; line-height: 1.3;}
.article-rows > [class*='col-'] + [class*='col-'] { margin-top: 3rem}

.article-list { margin: 0;}
.article-list li { font-size: 17px; line-height: 1.35; margin-bottom: .75rem;}
.article-list.list._arrows li:before {top: 11px;font-size: 0.8em;}
.article-list li:last-child { margin-bottom: 0;}
.article-list li a {}

.article-actions { margin-top: 2.5rem}
.article-actions a {font-size: 16px; line-height: 1.35; }

.article-header { margin-top: -1.25rem; margin-bottom: 2rem}
.article-header .article-meta,
.search-result__meta { font-size: 14px; color: #8c8c8c; overflow: hidden;}
.search-result__meta .user-profile { color: #8c8c8c; text-decoration: none;}
.search-result__meta .user-profile:hover { text-decoration: underline;}
.search-result__meta .meta__item { float: left; position: relative;}
.search-result__meta .meta__item:after { content: "-"; padding: 0 10px}
.search-result__meta .meta__item:last-child:after { display: none;}

.article__body {font-size: 16px; line-height: 1.45;}
.article__body ul:not(.list):not(.indent) {list-style-type: disc; padding-left: 1.5rem;}
.article__body ul:not(.list):not(.indent) li {list-style-type: disc; }
.article__body p,
.article__body div,
.article__body li,
.search-result__description { font-size: 16px; line-height: 1.45;}

.article__body ul + p { margin-top: 2rem}
.article__body p + h3,
.article__body p + h4,
.article__body p + h5 { margin-top: 2.5rem}

.article__body p:empty,
.article__body p:empty em:empty,
.article__body em:empty { display: none;}

.sidenav__category-name { font-size: 16px}
.sidenav__sections-list {}

.is-hidden { display: none;}

.search-results {}
.search-results-list {}
.search-results-list > li {border-top: 1px solid #e9e9e9; padding: 2.5rem 0;}
.search-results-list > li:last-child { padding-bottom: 0;}
.search-results-list > li .title { margin-bottom: .5rem; font-size: 20px;}

.search-result-votes { font-size: 16px; position: relative; top: -2px}
/* .search-result-votes span { color: #dd0330} */

.pagination {border-top: 1px solid #e9e9e9; padding: 2rem 0 0; margin-top: 2.5rem}
.pagination ul { text-align: center;}
.pagination ul > li { display: inline-block; font-size: 17px; vertical-align: middle;}
.pagination ul > li.pagination-current span { color: #8c8c8c; }
.pagination ul > li.pagination-current span,
.pagination ul > li a { display: inline-block; padding: 0 3px}

/* .col-container { display: flex;}
.col-container .theme-sidenav { flex: 0 0 30%; max-width: 30%;} */

.article-footer { margin-top: 2.5rem}

.article-vote {position: relative;}

.article-vote-controls {display: inline-block; vertical-align: middle; margin-right: 1rem;}
.article-vote-controls__item { padding-left: 0; border: none; }
.article-vote-controls__item,
.article-vote-controls__item:hover,
.article-vote-controls__item:active,
.article-vote-controls__item:focus {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.article-vote-controls__item:before {
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: #e21558;
    content: "\f004";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.article-vote-controls__item--voted { border: none;}
.article-vote-controls__item--voted:before { content: "\f004"; font-weight: 900;}
.article-vote-count { display: inline-block; font-size: 14px; color: #8c8c8c; vertical-align: middle;}


@media (min-width: 768px) {
    main[role=main] { padding-top: 3rem; padding-bottom: 3rem;}
    .breadcrumbs { display: block;}

    .article-rows > [class*='col-'] + [class*='col-'] { margin-top: 0}
    .article-rows > [class*='col-']:nth-child(2n+1) { clear: left;}
    .article-rows > [class*='col-'] + [class*='col-'] ~ [class*='col-'] h4 { margin-top: 3rem}

    .distro-block-wrap .row > [class*='col-']:nth-child(2n+1) { clear: left;}
    
    .search-results-list > li {padding: 3rem 0;}
    .search-results-list > li .title {font-size: 21px;}
    .article__body ul:not(.list):not(.indent) {padding-left: 3.5rem;}

    .pagination {margin-top: 3rem}
}

@media (min-width: 992px) {
    main[role=main] { padding-top: 4rem; padding-bottom: 4rem;}
    .page-title-wrapper._zendesk h1.page-title { font-size: 30px;}

    .article-rows > [class*='col-']:nth-child(2n+1) { clear: none;}
    .article-rows > [class*='col-']:nth-child(3n+1) { clear: left;}
    .article-rows > [class*='col-'] + [class*='col-'] ~ [class*='col-'] h4 { margin-top: 0}
    .article-rows > [class*='col-'] + [class*='col-'] + [class*='col-'] ~ [class*='col-'] h4 { margin-top: 3rem;}
    
    .article-header .article-meta,
    .search-result__meta { font-size: 15px;}
    .article-vote-count { font-size: 15px;}

    .article__body p,
    .article__body li,
    .search-result__description { font-size: 17px;}
}

@media (min-width: 1200px) {

}



/* ----------------------
// Hero/search
// ----------------------*/

#section-header { border: 0 !important}
          
.banner-base._banner-zendesk-search {}
.banner-base._banner-zendesk-search .text-block-container { max-width: 96%; }
.banner-base._banner-zendesk-search .text-block-container .search input[type='submit'] { display: none;}

.banner-base._banner-zendesk-search .search-wrap { position: relative; transform: translateY(1rem);}
.banner-base._banner-zendesk-search .search-wrap .search-icon { position: absolute;  left: 0.4rem; font-size: 4rem; padding: 0 1rem; top: 0;}

/* form input style from theme */
#query {display:block;width:100%;height:4.5rem;padding:8px 14px;font-size:1.6rem;line-height:1.42857143;color:#555;background-color:#fff;border:1px solid #ccc;border-radius:2px;-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 1px rgba(0,0,0,.05);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s}@media (min-width:992px){#query{font-size:15px}}#query:focus{border-color:#dd0330;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(221,3,48,.5);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(221,3,48,.5)}#query::-moz-placeholder{color:#999;opacity:1}#query:-ms-input-placeholder{color:#999}#query::-webkit-input-placeholder{color:#999}#query::-ms-expand{border:0;background-color:transparent}#query[disabled],#query[readonly],fieldset[disabled] #query{background-color:#e6e6e6;opacity:1}#query[disabled],fieldset[disabled] #query{cursor:not-allowed}textarea#query{height:auto}
/* overwrites */
#query {
    border-color: #111; 
    color: #111; 
    font-family: "brandon_grotesque_regular","Helvetica Neue",Helvetica,Arial,sans-serif; 
    height: 5rem; 
    font-size: 1.8rem; 
    border-radius: 8px; 
    border-width: 2px; 
    padding-left: 5rem;
}

@media (min-width: 768px) {
    .banner-base._banner-zendesk-search .search-wrap {transform: translateY(3rem);}
    .banner-base._banner-zendesk-search .text-block-container { max-width: 44%; }
}

@media (min-width: 992px) {
    .banner-base._banner-zendesk-search .search-wrap {transform: translateY(3.75rem);}
    .banner-base._banner-zendesk-search .search-wrap .search-icon { left: 0.4rem; top: 0.4rem;}
    .banner-base._banner-zendesk-search .text-block-container { max-width: 46%; }
    #query { height: 5.5rem; font-size: 2rem; padding-left: 5.75rem; }
}

@media (min-width: 1200px) {
    #query {height: 6rem;}
    .banner-base._banner-zendesk-search .search-wrap {transform: translateY(4.25rem);}
}


/* ----------------------
// HP icons row
// ----------------------*/

.hp-icons-base .item { display: block; padding: 0; text-align: center; border-radius: 8px;}
.hp-icons-base .item i { display: block; color: #dd0330; font-size: 8rem; line-height: 0;}
.hp-icons-base .item .title { display: block; padding-top: 1.5rem;}

@media (min-width: 768px) {
    .hp-icons-base .item { padding: 2rem; border: 3px solid transparent; }
    .hp-icons-base .item:hover { border-color: #dd0330;}
}

@media (min-width: 992px) {

}

/* ----------------------
// HP article list
// ----------------------*/

.knowledge-base { border-top: 2px solid#e9e9e9; padding-top: 2rem }
.knowledge-base .inner-width-container {max-width: 991px; margin: 0 auto;}

.category-list-title { margin-top: 1.25rem} /* match item pad for equal spacing */
.category-list { text-align: center; margin-top: 1.5rem}
.category-list > li {text-align: center; line-height: 2.4;}
.category-list > li a { display: inline-block}

@media (min-width: 768px) {
    .knowledge-base { padding-top: 3rem }

    .category-list {}
    .category-list > li { display: inline-block; line-height: 1;}
    .category-list > li a {padding: 1.25rem; display: inline-block}
}

@media (min-width: 992px) {
    .knowledge-base {padding-top: 4rem }

    .category-list { display: flex; flex-wrap: wrap; margin-top: 2rem  }
    .category-list > li {text-align: left; flex: 1 1 27%; max-width: 27%; display: block; }
    .category-list > li:nth-child(3n-1) {flex: 1 1 46%; max-width: 46% }
}

/* ----------------------
// Zendesk Forms
// ----------------------*/

.form-field.select {
    border: 0;
    padding: 0;
    margin: 0;
    height: auto;
    box-shadow: none;
}


.form-field { margin-top: 2rem; }
.form-field:first-of-type { margin-top: 0;}

.form-field label {
    display: block;
}

.form-field.boolean { overflow: hidden; margin-top: 1.25rem; position: relative } 
.form-field.boolean label { display: inline-block; margin: 0; padding-left: 22px; cursor: pointer;} 
.form-field.boolean input { position: absolute; left: 0; top: 0} 

.form-field.text + .form-field.boolean,
.form-field.select + .form-field.boolean {
    margin-top: 2rem
}

.nesty-input {
    display: block;
    width: 100%;
    height: 4.5rem;
    padding: 0 14px;
    font-size: 1.6rem;
    line-height: 4.5rem;
    color: #111;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.nesty-input:hover,
.nesty-input:focus {
    color: #111
}


.new-request-form input[type='text'] {
    display: block;
    width: 100%;
    height: 4.5rem;
    padding: 8px 14px;
    font-size: 1.6rem;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.new-request-form textarea {
    min-height: 120px;
}

.new-request-form footer {
    margin-top: 2rem;
    text-align: center;
}

.suggestion-list { margin-bottom: 2rem}
.suggestion-list .searchbox {
    margin-top: 1rem
}

.suggestion-list .searchbox-suggestions ul {
    padding-left: 17px;
    line-height: 1.45;
}

.suggestion-list .searchbox-suggestions ul li {
    position: relative;
    line-height: 1.45;
}

.suggestion-list .searchbox-suggestions ul li::before {
    font-family: 'Ionicons';
    content: "\f3d3";
    font-size: 1em;
    position: absolute;
    left: -17px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: inherit;
}

.new-request-form footer input {
    display: inline-block;
    font-family: "brandon_grotesque_medium","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    background-image: none;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border: 0 solid transparent;
    border-radius: 3px;
    text-shadow: none;
    text-transform: uppercase;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.67rem;
    padding-right: 1.67rem;
    height: 4.5rem;
    line-height: 4.5rem;
    font-size: 15px;
    -webkit-appearance: button;
    cursor: pointer;
    background:#dd0330;
    color:#fff;
    border-style: solid;
    border-color:#dd0330;
    border-width: 0;
}

#request_description_hint {
    margin: .5rem 0 0;
    font-family: "brandon_grotesque_regular_italic","Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-size: 14px;
}

.upload-dropzone {
    height: 4.5rem;
    padding: 0 14px;
    font-size: 1.6rem;
    line-height: 4.5rem;
    color: #111;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    box-shadow: inset 0 0 1px rgba(0,0,0,.05);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    cursor: pointer;
}

.upload-dropzone span {
    line-height: inherit;
    padding: 0;
    font-size: 12px;
}

@media (min-width: 768px) {
    .new-request-form footer { margin-top: 3rem; text-align: right}
}
