.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion .active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "\2212";
}

.accordion-panel {
  display:none;
  padding:10px;
}

.release-items ul li{
    
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 380px) {
    .tutorial-maincontent-haslist{width:100%;}
    .tutorial-maincontent-nolist{width:100%;}
    .tutorial-tableofcontent-haslist{width:100%;}
    .tutorial-tableofcontent-nolist{width:100%;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 380px) and (max-width: 768px){
    .tutorial-maincontent-haslist{width:100%;}
    .tutorial-maincontent-nolist{width:100%;}
    .tutorial-tableofcontent-haslist{width:100%;}
    .tutorial-tableofcontent-nolist{width:0%;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .tutorial-maincontent-haslist{width:70%;}
    .tutorial-maincontent-nolist{width:100%;}
    .tutorial-tableofcontent-haslist{margin-left:10px;width:28%;position:sticky; top:0;}
    .tutorial-tableofcontent-nolist{width:0%;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1024px) {
    .tutorial-maincontent-haslist{width:80%;}
    .tutorial-maincontent-nolist{width:100%;}
    .tutorial-tableofcontent-haslist{margin-left:10px;width:17%;position:sticky; top:0;}
    .tutorial-tableofcontent-nolist{width:0%;}
}

.tutorial-table-of-content {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #eee;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    border-radius: 5px;
}
.tutorial-table-of-content h3{padding:5px 10px;font-weight: bolder; border-bottom: 1px solid #ccc;padding-bottom: 2px;margin-bottom:2px;}
.tutorial-table-of-content .tofc-item{padding:5px 10px;}
.tutorial-table-of-content .tofc-item:before{content:"\003E";padding-right:10px;}


.tutorial-tags {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #eee;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    border-radius: 5px;
}
.tutorial-tags h3{padding:5px 10px;font-weight: bolder; border-bottom: 1px solid #ccc;padding-bottom: 2px;margin-bottom:2px;}
.tutorial-tags .tag-item{padding:5px 10px;}
.tutorial-tags .tag-item:before{content:"\003E";padding-right:10px;}



.tutorial-related-articles {
    display: block;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background: #eee;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15);
    border-radius: 5px;
}
.tutorial-related-articles h3{padding:5px 10px;font-weight: bolder; border-bottom: 1px solid #ccc;padding-bottom: 2px;margin-bottom:2px;}
.tutorial-related-articles .tag-item{padding:5px 10px;}
.tutorial-related-articles .tag-item:before{content:"\003E";padding-right:10px;}