/****************************
-- Product Detail --
****************************/
#supportproduct .product-detail .grid {
  border-bottom: 1px solid #e1e1e1;
  padding: 18px 0 22px;
}

#supportproduct .product-detail .model {
  color: #333;
}

#supportproduct .product-detail .select-version {
  max-width: 330px;
  min-width: 270px;
  width: 100%;
}

#supportproduct .product-detail .img-wrap {
  margin-top: 25px;
}

#supportproduct .product-detail .links {
  margin-top: 25px;
}

#supportproduct .product-detail .links p {
  line-height: 1.25;
  margin-top: 15px;
}

/* Columns */
#supportproduct .product-detail .col.frst {
  max-width: 725px;
  width: 100%;
}

#supportproduct .product-detail .col.frst .links {
  display: none;
}

#supportproduct .product-detail .col.lst {
  max-width: 330px;
  width: 100%;
}

/* Possibly needed fixes */
#supportproduct .product-detail + .firmware-update {
  margin-top: -1px;
}

#supportproduct .small-red-text {
  color: red;
  font-size: 12px;
}



/****************************
-- Top Articles --
****************************/
#supportproduct .top-articles .wrapper {
  border-bottom: 1px solid #ececec;
}

#supportproduct .top-articles .inner {
  padding: 35px 0 40px;
}

#supportproduct .top-articles .col {
  width: 100%;
}

#supportproduct .top-articles li {
  margin-top: 20px;
}

#supportproduct .top-articles li a {
  line-height: 1.5;
}

/****************************
-- Topics --
****************************/
#supportproduct .topics .inner {
  padding: 0 0 40px;
}

/*---------------------
Grid
---------------------*/
#supportproduct .topics .inner h3 {
  margin-bottom: 1em;
}

#supportproduct .topics .topics-grid .grid {
  display: none;
  margin: 0 -7px;
}

#supportproduct .topics .topics-grid .col {
  padding: 0 7px;
  width: 50%;
}

#supportproduct .topics .topics-grid .box {
  padding-right: 50px;
  position: relative;
  transition: border 200ms ease;
}

#supportproduct .topics .topics-grid .box:after {
  color: #63b7e0;
  content: '>';
  font-family: ngicons;
  font-size: 15px;
  margin-top: -5px;
  position: absolute;
  right: 30px;
  top: 50%;
  transition: color 200ms ease;
}

#supportproduct .topics .topics-grid .box:hover {
  border-color: #662d80;
  text-decoration: none;
}

#supportproduct .topics .topics-grid .box:hover:after {
  color: #662d80;
}

#supportproduct .topics .topics-grid .box h4 {
  margin-bottom: 0.25em;
}

 .live-chat-support-col {
  padding:0 65px;
  margin-top: 35px;
}

 .live-chat-support-col a.arrow {
  display: block;
  float: right;
}

/*---------------------
Main Topic - List
---------------------*/
#supportproduct .topics .topics-list .box {
  display: none;
}

#supportproduct .topics .topics-list li {
  font-weight: 700;
  margin-top: 1.5em;
}

#supportproduct .topics .topics-list li:first-child {
  margin: 0;
}

#supportproduct .topics .topics-list li a {
  color: #808080;
}

#supportproduct .topics .topics-list .active {
  color: #662d80;
}

/*---------------------
Main Topic - Videos
---------------------*/
/*#supportproduct .topics .topic {
  margin-top: 30px;
}*/

#supportproduct .topics .topic h4 {
  color: #333;
  font-weight: 700;
  margin-bottom: 1em;
}

#supportproduct .topics .topic .videos figure {
  margin: 20px 0 0;
}

#supportproduct .topics .topic .videos figure:first-child {
  margin-top: 0;
}

#supportproduct .topics .topic .videos figcaption {
  margin-top: 5px;
  text-align: center;
}

/*---------------------
Main Topic - Articles
---------------------*/
#supportproduct .topics .topic .articles {
  margin-top: 30px;
}

#supportproduct .topics .topic .articles .kb-articles:after,
#supportproduct .topics .topic .articles .kb-article article:after {
  content: 'K';
}

#supportproduct .topics .topic .articles .questions:after,
#supportproduct .topics .topic .articles .question article:after {
  content: 'Q';
}

#supportproduct .topics .topic .articles .filters span {
  color: #808080;
  display: inline-block;
  padding-left: 25px;
  position: relative;
}

#supportproduct .topics .topic .articles .filters span:after,
#supportproduct .topics .topic .articles article:after {
  color: #adadad;
  font-family: ngicons;
  font-weight: 700;
  font-size: 13px;
  left: 0;
  line-height: 16px;
  margin-top: -8px;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: color 200ms ease;
  width: 16px;
}

#supportproduct .topics .topic .articles label {
  display: block;
  margin-top: 0.75em;
}

#supportproduct .topics .topic .articles .filters input:checked + label span:after {
  color: #662d80;
}

#supportproduct .topics .topic .articles-list li {
  border-top: 1px solid #e1e1e1;
  margin-top: 15px;
  padding-top: 15px;
}

#supportproduct .topics .topic .articles-list article {
  padding-right: 55px;
  position: relative;
}

#supportproduct .topics .topic .articles-list article:after {
  color: #662d80;
  left: auto;
  right: 4px;
}

#supportproduct .topics .topic .articles .pager {
  border-top: 1px solid #e1e1e1;
  margin-top: 15px;
  padding-top: 15px;
}


.more-versions:before{
  content: '+';
  font-weight: bold;
  display: inline-block;
  font-size: 39px;
  color: #662d81;
  position: relative;
  top: 7px;
  margin-right: 8px;
  transition:all .6s;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
}

.more-versions:hover, .less-versions:hover{
  text-decoration: none;
}

.more-versions:hover:before{
  -moz-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.less-versions:before{
  content: '-';
  font-weight: bold;
  display: inline-block;
  font-size: 39px;
  color: #662d81;
  position: relative;
  top: 7px;
  margin-right: 8px;
  transition:all .6s;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
}

.hidden-accordion{
  padding: 10px 0;
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.accordion-item{
  border: 1px solid #E8E9E8;
  transition:all .6s;
  -webkit-transition:all .6s;
  -moz-transition:all .6s;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.accordion-item.active{
  background: #FDFEFD;
  border-left:5px solid #582276;
}

.accordion-content{
  padding:0 17px 17px;
}

.accordion-content .arrow{
  margin-top: 15px;
}

.accordion-content .links{
  margin-bottom: 15px;
}
.accordion-content .links .btn{  padding: 15px 21px;}

.accordion-content .links .btn i{margin-right: 10px;}

.accordion-content .links p{
  display: inline-block;
  margin: 25px 0 0 0;
  vertical-align: middle;
  color: #868482;
  font-size: 14px;
}

.accordion-title{
  padding: 17px;
  position: relative;
  display: block;
  width: 100%;
}

.accordion-title:hover{
  text-decoration: none;
}

.accordion-title h1{
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.accordion-title i{
  position: absolute;
  top: 16px;
  right: 15px;
  color: #582276;
  font-size: 26px;
  transition:all .4s;
  -moz-transition:all .4s;
  -webkit-transition:all .4s;
}

.accordion-title:hover i{
  top: 18px;
}



/****************************
-- Bottom Highlight --
****************************/
#supportproduct .bottom-highlight, #supporthome .bottom-highlight, #kb-article-page .bottom-highlight    {
  padding: 25px 0;
}

#supportproduct .bottom-highlight h4, #supporthome .bottom-highlight h4, #kb-article-page .bottom-highlight h4 {
  margin: 0;
}

#supportproduct .bottom-highlight h2 + p, #supporthome .bottom-highlight h2 + p, #kb-article-page .bottom-highlight h2 + p  {
  margin-top: 0.75em;
}

#supportproduct .bottom-highlight .col + .col a, #supporthome .bottom-highlight .col + .col a, #kb-article-page .bottom-highlight .col + .col a{
  margin-top: 1.5em;
}

/*---------------------
For Contact
---------------------*/
.contact-support .bottom-highlight {
    background-color: #ffffff;
    position: relative;
    border-bottom: solid 1px #ececec;
}

.contact-support .bottom-highlight .cta {
  display: inline-block;
  font-weight: 700;
  padding-right: 15px;
  position: relative;
  white-space: nowrap;
}

.contact-support .bottom-highlight .cta:hover {
  text-decoration: none;
}

.contact-support .bottom-highlight .cta:after {
  color: #1a0dab;
  content: 'l';
  font-family: ngicons;
  font-size: 5px;
  margin-top: -2px;
  position: absolute;
  right: 0;
  top: 50%;
  transition: all 200ms ease;
}

.contact-support .bottom-highlight .cta:hover:after {
  margin-top: 0;
}

.contact-support .active .bottom-highlight .cta:after {
  content: 'u';
}

 .contact-support .active .bottom-highlight .cta:hover:after {
  margin-top: -4px;
}

/****************************
-- Contact Support --
****************************/
.contact-support .drawer {
  border-bottom: 1px solid #e1e1e1;
  display: none;
}

.contact-support .slide-drawer .bottom-highlight:after {
  border-style: solid;
  border-width: 0;
  border-color: #fff transparent transparent transparent;
  content: '';
  left: 50%;
  margin-left: -11px;
  position: absolute;
  top: 100%;
  transition: all 200ms ease;
}

.contact-support .slide-drawer.active .bottom-highlight:after {
  border-width: 11px 11px 0 11px;
  border-color: #ececec transparent transparent transparent;
}

.contact-support .block {
  border-top: 1px solid #e1e1e1;
  padding: 45px 0;
}

.contact-support .block:first-child {
  border: 0;
}

.contact-support .block h3 + p {
  margin-top: 1.25em;
}

.contact-support .block > p {
  max-width: 670px;
}

.contact-support .block .col {
  margin-top: 15px;
}

.contact-support .block li {
  margin-top: 0.75em;
}

.contact-support .block ul:first-child li:first-child {
  margin: 0;
}

 .contact-support .block a {
  font-weight: 700;
  margin-top: 1em;
}


.only-mobile, .product-pagination.only-mobile{
  display: none;
}

/****************************
-- fake dropdown --
****************************/
.nav-topiclist .open-list {
  border: 1px solid #ececec;
  border-radius: 17px;
  color: #999;
  display: block;
  font-size: 1.5rem;
  padding: 10px 30px 10px 17px;
  position: relative;
  cursor: pointer;
}

.nav-topiclist {
  padding: 15px  0 15px 15px;
  display: none;
}

.nav-topiclist ul li {
  list-style: none;
  color: #808080;
  font-size: 1.5rem;
  line-height: 1.25;
  cursor: pointer;
  padding: 8px 0;
}
.nav-topiclist ul li:before {
    color: transparent;
    content: "";
    position: static;
}

.nav-topiclist ul li:hover {
  color:#333;
}

.nav-topiclist h3 {
  margin-bottom: 8px;
}

/****************************
-- Media Queries --
****************************/

@media (max-width: 480px){
  .product-pagination.only-mobile{
    display: block;
    margin: 10px auto;
  }
  .only-desktop{
    display: none;
  }
  .nav-topiclist {
    display: block;
  }
}
@media screen and (max-width: 640px) {
   .live-chat-support-col {
    margin-top: 15px;
    padding: 0;
  }
   .live-chat-support-col a.arrow {
    float: none;
    display: inline-block;
  }
  .nav-topiclist {
    display: none;
  }
}

@media screen and (max-width: 639px) {
  .nav-topiclist {
    display: block;
  }
}


@media screen and (max-width: 959px) {
  #supportproduct .small-red-text.hidden-xs {
      display: none;
  }
  #supportproduct .small-red-text.show-xs {
      display: block;
      margin: 5px 0;
  }

}
@media screen and (min-width: 960px) {
  #supportproduct .small-red-text.hidden-xs {
      display: none;
  }
  #supportproduct .small-red-text.show-xs {
      display: block;
      margin-top: 0;
  }
}
@media screen and (max-width: 960px) {
  #supportproduct h4.model {
    margin-bottom: 0px;
  }
}




@media screen and (min-width: 30em) {
  /*---------------------
  Topics
  ---------------------*/
  /* Videos */
  #supportproduct .topics .topic .videos .grid {
    margin: 0 -17px;
  }

  #supportproduct .topics .topic .videos .col {
    padding: 0 17px;
    width: 50%;
  }

  #supportproduct .topics .topic .videos figure {
    margin: 0;
  }

  .accordion-content .links p{
    margin: 0 0 0 25px;
  }

}

@media screen and (min-width: 40em) {
  /*---------------------
  Top Articles
  ---------------------*/
  #supportproduct .top-articles .wrapper {
    border: 0;
  }

  /*---------------------
  Topics
  ---------------------*/
  #supportproduct .topics {
    background-color: #FFFFFF;
  }

  #supportproduct .topics .box.hide {
    display: none;
  }

  #supportproduct .topics .box {
    background-color: #ececec;
    border: 1px solid #dedede;
    display: block;
    margin-bottom: 15px;
    padding: 30px 35px;
  }

/*********************
*    WHITE OR GRAY
*********************/


 /* #supportproduct .topics.topics-white{
    background: #F4F5F5;
  }

  #supportproduct .topics.topics-white .box{
    background: #FFFFFF;
  }*/

  /* Grid */
  #supportproduct .topics .topics-grid .select-wrapper {
    display: none;
  }

  #supportproduct .topics .topics-grid .grid {
    display: block;
  }

  /* Videos */
  #supportproduct .topics .topic .videos figcaption {
    margin-top: 20px;
  }

  /*---------------------
  Bottom Highlight
  ---------------------*/
 .bottom-highlight {
    padding: 30px 0;
  }

 .bottom-highlight .wrapper  {
    text-align: left;
  }

 .bottom-highlight .inner {
    display: table;
    width: 100%;
  }

 .bottom-highlight .col {
    display: table-cell;
    vertical-align: middle;
  }

 .bottom-highlight .col + .col {
    text-align: right;
  }

  #supportproduct .bottom-highlight h2 + p {
    margin-top: 0.25em;
  }

 .bottom-highlight .col + .col a {
    margin: 0;
  }

  /* For Contact */
.contact-support .bottom-highlight .col + .col .cta {
    margin-right: 10px;
  }

  /*---------------------
  Contact Support
  ---------------------*/
 .contact-support .block .grid {
    margin: 0 -30px;
  }

 .contact-support .block .col {
    padding: 0 30px;
    position: relative;
    width: 50%;
  }

 .live-chat-support-col {
    padding: 0 30px;
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-bottom: 10px;
  }

 .live-chat-support-col p {
    float: left;
    width: 60%;
  }

 .contact-support .block .col:before,
 .contact-support .block .col:after {
    background-color: #e1e1e1;
    bottom: 0;
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
  }

 .contact-support .block .col:before {
    left: -1px;
  }

 .contact-support .block .col:after {
    right: 0;
  }

 .contact-support .block .col:first-child:before,
 .contact-support .block .col:last-child:after {
    display: none;
  }
}

@media screen and (min-width: 50em) {
  /*---------------------
  Product Detail
  ---------------------*/
  #supportproduct .product-detail .col.frst {
    float: left;
    width: 65%;
  }

  #supportproduct .product-detail .col.lst {
    float: right;
    width: 30%;
  }

  #supportproduct .product-detail .img-wrap {
    margin: 0;
  }

  /*---------------------
  Top Articles
  ---------------------*/
  #supportproduct .top-articles .grid {
    margin: 0 -25px;
  }

  #supportproduct .top-articles .col {
    padding: 0 25px;
    width: 50%;
  }



  /*---------------------
  Contact Support
  ---------------------*/
 .contact-support .drawer .wrapper {
    padding: 0 25px;
  }

 .contact-support .block {
    padding-bottom: 55px;
  }

 .contact-support .block .grid {
    margin: 0 -65px;
  }

 .contact-support .block .col {
    padding: 0 65px;
  }

 .contact-support .block ul {
    margin-top: 1em;
  }

 .contact-support .block a {
    margin-top: 1.25em;
  }

 .live-chat-support-col {
      padding: 0 65px;
  }
 .live-chat-support-col p {
    float: left;
    width: 60%
  }
}


@media screen and (min-width: 60em) {
  /*---------------------
  Product Detail
  ---------------------*/
  #supportproduct .product-detail .grid {
    padding: 20px 0 40px;
  }

  #supportproduct .product-detail .col.frst .links {
    display: block;
  }

  #supportproduct .product-detail .col.frst .model-wrap {
    margin-bottom:0;
  }

  #supportproduct .product-detail .model {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
  }

  #supportproduct .product-detail .select-version {
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
  }

  #supportproduct .product-detail .col.frst .links > p {
    display: inline-block;
    margin: 0 0 0 25px;
    vertical-align: middle;
  }

  #supportproduct .product-detail .col.lst .links {
    display: none;
  }

  /*---------------------
  Topics
  ---------------------*/
  /* Main */
  #supportproduct .topics .main-topic  {
    margin: 0 -8px;
  }

  #supportproduct .topics .main-topic > .col {
    padding: 0 8px;
  }

  #supportproduct .topics .topics-list {
    width: 29%;
  }

  #supportproduct .topics .topics-list .select-wrapper {
    display: none;
  }

  #supportproduct .topics .topics-list .box {
    display: block;
  }

  #supportproduct .topics .topic {
    margin: 0;
    width: 71%;
  }

  /* Articles*/
  #supportproduct .topics .topic .articles label {
    display: inline-block;
    margin: 0 0 0 1em;
  }

  #supportproduct .topics .topic .articles-list li {
    margin-top: 25px;
    padding-top: 25px;
  }

  #supportproduct .topics .topic .articles .pager {
    margin-top: 25px;
    padding-top: 25px;
  }
}

@media screen and (min-width: 70em) {
  /*---------------------
  Product Detail
  ---------------------*/
  #supportproduct .product-detail .col.frst {
    width: 63%;
  }

  #supportproduct .product-detail .col.lst {
    width: 28.5%;
  }

  /*---------------------
  Topics
  ---------------------*/
  /* Articles*/
  #supportproduct .topics .topic .articles .top {
    display: table;
    width: 100%;
  }

  #supportproduct .topics .topic .articles h4 {
    display: table-cell;
    vertical-align: middle;
  }

  #supportproduct .topics .topic .articles .filters {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
  }
}

@media screen and (min-width: 80em) {
  /*---------------------
  Top Articles
  ---------------------*/
  #supportproduct .top-articles .grid {
    margin: 0 -55px;
  }

  #supportproduct .top-articles .col {
    padding: 0 55px;
  }
}
