.container {
max-width: 100%;
width: 100%;
padding-top: 0;
}
.namespace {
font-family: 'Open Sans', sans-serif;
max-width: 1180px;
margin: auto;
overflow: hidden;
}
h1, .sorters {
text-align: center;
}
.namespace hr {
border: solid 1px #EFEFEF;
}	
.helpHeader {
background: #102E42;
color: white;
font-family: 'Open Sans', sans-serif;
padding-top: 15px;
padding-bottom: 15px;
position: fixed;
width: 100%;
z-index: 2;
top: 80px;
}
.helpHeader > div {
position: relative;
max-width: 1076px;
margin: auto;
}
.helpHeader h2 {
margin: 0;
color: white;
font-size: 24px;
padding-top: 0;
padding-bottom: 0;
}
.helpHeader h2 a {
color: white;
}
.sorters button {
cursor: pointer;
background: white;
color: #102E42;
border-radius: 8px;
margin: 20px 12px;
width: 200px;
outline: none;
border: solid 1px #dadada;
font-size: 18px;
font-weight: 700;
padding: 7px 17px;
text-transform: uppercase;
}
.sorters .button:hover {
box-shadow: 5px 5px 6px 0px rgb(0 0 0 / 26%);
}
.sorters .button.selected {
background: #102E42;
color: white;
border: solid 1px lightgray;
}
#helpCardsBlock {
margin: 0 auto;
margin-bottom: 20px;
max-width: 1090px;
}
.helpCard {
width: 206px;
margin: 4px;
background: white;
min-height: 230px;
text-align: left;
border-radius: 5px;
border: solid 2px #EFEFEF;
cursor: pointer;
display: inline-block;
vertical-align: top;
}
.helpCard .media {
background: #fafafa;
width: 100%;
height: 120px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: solid 2px #EFEFEF;
}
.helpCard .description h3 {
text-decoration: none!important;
clear: none;
font-size: 14px;
color: black;
margin-top: 0px;
margin-bottom: 0;
padding-bottom: 0;
}
.helpCard .description {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px 10px 15px 10px;
}
.helpCard.selected .description {
background: #102E42;
color: white;
}
.helpCard .description p{
font-size: 14px;
margin-top: 0;
line-height: 18px;
}
.helpCard.selected .description h3 {
color: white;
}
.helpSection {
display: none;
max-width: 1080px;
margin: 0 auto;
}
.namespace .helpSection .left {
width: calc(50% - 40px);
float: left;
padding-right: 40px;
margin-top: 30px;
}
.namespace .helpSection .left h3 {
color: black;
font-size: 13.5pt;
}
.namespace .helpSection .left p {
font-size: 14px;
line-height: 22px;
}
.namespace .helpSection .left li {
padding: 0;
margin: 5px;
font-size: 14px;
line-height: 20px;
}
.namespace .helpSection .right {
width: 50%;
float: left;
}
.namespace .helpSection .media {
width: 100%;
height: auto;
margin-top: 0px;
}
@media only screen and (max-width: 1180px) {
#helpCardsBlock {
text-align: center;
}
.helpHeader h2{
margin-left: 0;
}
.namespace .helpTable h2{
margin-left: 0;
}
.namespace .helpTable{
width: 685px;
}
.namespace .helpTable .col3{
width: 290px;
}
.namespace .helpTable .col3 .textContent {
width: 150px;
}
.namespace #troubleshooting .helpMenu{
width: calc(200px - 20px);
padding-left: 10px;
}
.namespace #troubleshooting .helpBody{
width: calc(100% - 210px - 20px);
padding-right: 20px;
}
}
@media only screen and (max-width: 980px) {
.helpHeader{
top: 0;
position: initial;
}
.namespace{
margin-top: 0px;
}
}
@media only screen and (max-width: 685px) {
#main-content .container {
padding-top: 0 !important;
width: 100%;
}
.helpHeader{
padding: 5px;
}
.helpHeader .right{
width: calc(49% - 10%);
}
.helpHeader h2{
margin: 10px 0;
}
.helpHeader .left, .helpHeader .right{
display: block;
width: 100%;
padding: 0;
text-align: center;
}
.sorters button {
margin: 10px 12px;
}
.namespace .helpTable{
width: 290px;
}
.namespace .helpTable .col3 {
width: 300px;
min-width: 300px;
}
.namespace .helpTable .col3 .textContent{
max-width: 170px;
}
.namespace .helpSection{
padding-left: 20px;
padding-right: 20px;
}
.namespace .helpSection .left, .namespace .helpSection .right{
float: none;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.namespace #troubleshooting .helpMenu{
float: none;
margin: auto;
width: 100%;
padding: 20px;
padding-top: 0;
padding-left: 0;
}
.namespace #troubleshooting .helpBody{
float: none;
margin: auto;
width: 90%;
padding: 20px;
padding-top: 0px;
}
.namespace #troubleshooting .accordion ul{
padding-left: 0;
}
}