body{
    background-color: rgba(243, 245, 247, 1.0);
}

/* Move to GLOBAL */
.documentation h1{
  font-size: 24px;
  line-height: 1.0;
  color: #000000;
}
.documentation h2{
  font-size: 19px;
  line-height: 1.1;
  color: #000000;
  margin-top: 30px;
}
.carrier-capabilities h2{
  margin-top: 10px; 
}
.documentation h3{
  font-size: 16px;
  line-height: 1.1;
  color: #000000;
  margin-top: 20px;
}

.documentation img {
  max-width: 100% !important;
}

.documentation .sub-header{
  font-size: 15px;
  line-height: 1.3;
  color: #9fce52;
}

.documentation-nav a{
  color: #000;
}
.documentation-nav a:hover{
  color: #459de1;
}

.documentation-nav .active a {
  color: #459de1;
}

.documentation {
  font-size: 14px;
  line-height: 1.6;
  color: #6f7c82;
}

a.underlined{
  text-decoration: underline;
}

.documentation ol {list-style: none; counter-reset: li}
.documentation ol li {
  counter-increment: li;
  padding-bottom: 10px;
}
.documentation ol li:before{
  content: counter(li) ". ";
  color: #6f7c82;
  display: inline-block; 
  width: 1.2em;
  margin-left: -1.2em;
}

.detail-header ul {list-style: initial; padding-left: 40px;}
.detail-header ul li {
  padding-bottom: 10px;
}
.detail-header ul li:before{
  color: #6f7c82;
  display: inline-block;
  width: 1.2em;
  
}

.documentation .button > a{
    display: inline-block;
    position: relative;
    font-size: 13px;
    padding: 12px 16px 14px 16px;
    border-radius: 6px;
    color: #ffffff;
    letter-spacing: 0.8px;
    z-index: 3;
    background-color: #9fce52;
    margin-right: 6px;
    display: inline-block;
    font-weight: 500;
}
.documentation .button > a:hover{
    background-color:#7CB247;
}

/* FOOTER */
.documentation-footer .lower-footer{
    border-bottom: none;
}

span.parameter{
  color: rgba(204, 110, 149, 1.0);
  border-radius: 4px;
  background-color: #f7f9fa;
  border: solid 1px #e9edf0;
  padding: 3px;
  font-family: Menlo-Regular;
  font-size: 10pt;
}

.documentation.content{
    margin-top: 14px;
    max-width: 971px;
}

.documentation .column-header{
    max-width: 490px;
}
.documentation .detail-header{
    width: 100%;
    position: relative;
}

.background{
    background-color: rgba(243, 245, 247, 1.0);
}
.background .left{
    position: absolute;
    float: left;
    width: 50%;
    background-color: rgba(243, 245, 247, 1.0);
}
.background .right_div{
    position: absolute;
    float: left;
    width: 50%;
    background-color: #fff;
}

.left-column{
    padding-top: 16px;
    float: left;
    min-height: 810px;
    min-width: 200px;
    background-color: rgba(243, 245, 247, 1.0);
    border-top: solid 1px rgba(232, 236, 239, 1.0);
}

.right-column{
    padding: 16px 50px 40px 50px;
    float: left;
    background-color: hsla(0,0%,100%,.85);
    border: solid 1px rgba(232, 236, 239, 1.0);
}

.documentation-nav{
    float: left;
    width: 200px;
}

.documentation-nav h2{
  font-size: 15px;
  line-height: 1.0;
  color: #909eaa;
}

.sub-nav li{
  font-size: 13px;
  line-height: 2.0;
  color: #404a52;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* PODS */

.pods li{
  width: 300px;
  height: 216px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.1), inset 0 3px 0 0 #9fce52;

  display: block;
  float: left;
  margin-top: 30px;
  margin-right: 30px;

}

.pods li .icon{
    margin-top: 30px;
    margin-left: 30px;
}
.pods li h3{
    margin-left: 30px;
    margin-right: 30px;

  font-size: 15px;
  line-height: 1.0;
  color: #000000;
  font-weight: bold;
}
.pods li p{
    margin-left: 30px;
    margin-right: 30px;
  font-size: 13px;
  line-height: 1.5;
  color: #6f7c82;
}
.pods li .cta{
    padding-left: 30px;
    padding-right: 30px;
    color: #9fce52;
    font-size: 13px;
    line-height: 1.5;
}

.sub-pods li{
  width: 190px;
  height: 75px;
  
  display: block;
  float: left;
  margin-top: 30px;
  margin-right: 30px;

}

.sub-pods li a{
  font-size: 15px;
  line-height: 1.3;
  color: #9fce52;
  margin-bottom: 4px;
}
.sub-pods li p{
  font-size: 13px;
  line-height: 1.5;
  color: #939ca3;
}

/*
 * ICONS
 */


.icon{
  width: 12px;
  height: 12px;
  object-fit: contain;
  background-color: #9fce52;
  vertical-align:middle;

}
.icon.quickstart{
    background: url('../img/documentation/go-quickstart.png');
}
.icon.tutorials{
    background: url('../img/documentation/go-tutorials.png');
}
.icon.reference{
    background: url('../img/documentation/go-reference.png');
}
.icon.help{
    background: url('../img/documentation/go-help.png');
}
.icon.starter-guide-prerequisites{
    width: 20px;
  height: 20px;
  top: 42px;
  position: relative;
    background: url('../img/documentation/starter-guide-prerequisites.png');
}
.icon.nav-shipping-api{
  float: left;
  margin: 0 8px 0 0;
  background: url('../img/documentation/nav-shipping-api.png');
}
.icon.nav-tracking-api{
  float: left;
  margin-right: 8px;
    background: url('../img/documentation/nav-tracking-api.png');
}
.icon.nav-api-reference{
  float: left;
  height: 10px;
  margin-right: 8px;
  background: url('../img/documentation/nav-api-reference.png');
}
.icon.mobile-nav-arrow{
    float: right;
    margin-left: 6px;
    margin-top: 5px;
    width: 5px;
    height: 4px;
    background: url('../img/documentation/mobile-nav-arrow.png');
}

.documentation-nav.mobile{
    display:none;
}

.arrow{
  font-size: 9px;
}


@media(max-width: 970px){
  .pods li{
    width: 414px;
    height: 200px;
  }
  .sub-pods li{
    width: 214px;
  }
  .documentation-nav{
    margin: 20px 20px 10px 20px;
  }
  .documentation-nav li {
    list-style-type: none;
  }
  .documentation .right-column{
      padding: 10px 30px 40px 30px;
    }
}

.img-responsive img, .img-responsive input[type="image"] {
  display: inline-block;
  max-width: 100% !important;
  height: 100% !important;
}

@media(max-width: 560px){
    .alert {
        max-width: 80%;
    }
    .documentation-nav .active a{
        color: #fff;
    }
    .mobile.documentation-nav{
      display: block;
      width: 100%;
      position: relative;
    }    
    #mobile-sub-nav{
      display: none;
    }
    .mobile.documentation-nav ul.sub-nav{
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .mobile.documentation-nav ul.sub-nav li{
      font-size: 16px;
    }
    .mobile.documentation-nav h2{
      left: 20px;
      position: relative;
    }
    .mobile.documentation-nav .nav-right{
      float: right;
      position: absolute;
      top: 22px;
      right: 20px;
      font-size: 13px;
      line-height: 1.0;
      color: #404a52;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .documentation .left-column{
        display: none;
    }
    .documentation .right-column{
        margin-left: auto;
        margin-right: auto;
    }
    .documentation .column-header{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }
    .documentation .pods{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }
    .documentation .sub-pods{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    }
    .pods li{
        position: relative;
      width: 100%;
    height: 125px;
    }
    .pods li .icon{
    margin-top: 15px;
    margin-left: 15px
    }
    .pods li h3{
        position: absolute;
    top: -6px;
    left: 12px;
    }
    .pods li p{
        position: absolute;
    top: 33px;
    left: 12px;

    }
    .sub-pods li{
      width: 100%;
      height: auto; 
      margin-top: 22px;
      margin-bottom: 0px;
    }
}

/* ====== */
/* BUTTON */
/* ====== */

.btn {
    margin: 0;
    padding: 5px 10px;
    color: white;
    background-color: #49545c;
    outline: none;    
    letter-spacing: .8px;
    border: none;
    border-radius: 6px;
    font-weight: 400;
}

.btn:hover{
  background-color: #3d4854;
  color: white;
}

/* ===== */
/* HLJS */
/* ===== */

div.tabpanel-outer {
    border-radius: 8px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: #ffffff;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.16), 0 6px 8px 0 rgba(0, 0, 0, 0.06);
    margin-bottom: 30px;
}
.hljs {
    background: #fff;
}
ul.nav-tabs {
    border-bottom: 0;
    background-color: rgba(234, 237, 239, 0.4);
    box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
    padding-left: 10px;
}
ul.nav-tabs>li {
    padding-bottom: 0;
}
ul.nav-tabs>li>a{
    font-size: 12px;
    color: #aab6bc;
    border:0;
    padding: 2px 5px;
    margin: 8px 10px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
    color: #fff;
    border: 0;
    padding: 2px 5px;
    margin: 8px 10px;
    background-color: rgba(203, 207, 208, 0.94);
    border-radius: 4px;
}
pre {
   border: 0;
}
.hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name {
    font-weight: initial;
}

/* ===== */
/* PANEL */
/* ===== */

.panel-default>.panel-heading{
  border-bottom: 0;
  background-color: rgba(234, 237, 239, 0.4);
  box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.06), inset 0 -1px 0 0 rgba(0, 0, 0, 0.04);
}
.panel-body {
  padding: 0;
}

.panel-inner{
  padding: 20px;
}

.api-reference-nav-item {
  padding-top: 20px;
  margin-top: 15px;
  padding-bottom: 18px;
  border-top: solid 1px rgba(232, 236, 239, 1.0);
  border-bottom: solid 1px rgba(232, 236, 239, 1.0);
}

/*----------HTTP Verb Styles--------------*/
.http-verb {
    border-radius: 5px;
    padding: 2px 4px;
    font-weight: 400;
    display: inline;
    margin-right: 4px;
    border: 1px solid;
}

.get {
  border-color: rgb(39, 174, 96);
  color: rgb(39, 174, 96);
}

.post {
  border-color: rgb(52, 127, 196);
  color:rgb(52, 127, 196);
}

.put {
  border-color: rgb(89, 72, 75);
  color: rgb(89, 72, 75);
}