/* $Id$ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 400;
  vertical-align: baseline;
  box-sizing: border-box;
  letter-spacing: .1px;
  text-rendering: optimizeLegibility;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

html, body, main {
  height: 100%;
  width: 100%;
  color: #1d1d1d;
  background-color: #fff;
  font-family: 'Zoho_Puvi', Helvetica, Arial, sans-serif;
  font-size: 14px;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.dspTbl{
    display: table;
    border-collapse: collapse;
}
.dspTblRow{
    display: table-row;
}
.dspTblCell{
    display: table-cell;
    padding: 13px 10px;
    border-bottom: 1px solid #ddd;
}
.dspTbl.dspTblGrow .dspTblRow .dspTblCell:last-child{
    width:100%;
}
.dspTbl.dspTblGrow .dspTblRow .dspTblCell{
    white-space: nowrap;
    /*vertical-align: top;*/
}
.dspTblColor .dspTblRow:first-child .dspTblCell{
    color:#19af5c;
    font-size: 14px;
    font-weight: 600;
    width: 150px;
}
.dspTblColor .dspTblRow .dspTblCell:first-child {
    width: 30%;
}
.dspTblColor .dspTblRow .dspTblCell:last-child {
    width: 70%;
}
.apiPlayArea .dspTblCell.dspVerBtm{
    vertical-align: bottom;
}
.p0 {
    padding: 0;
}
.pl0 {
    padding-left: 0;
}
.mb5{
    margin-bottom: 5px;
}
.mb20{
    margin-bottom: 20px;
}
.mb25{
    margin-bottom: 25px;
}
.mt5 {
    margin-top: 5px;
}
.mt8 {
    margin-top: 8px;
}
.mt20{
    margin-top: 20px;
}
.mt25 {
    margin-top: 25px;
}
.mt30 {
    margin-top: 30px;
}
.ml10 {
    margin-left: 10px;
}
.ml20 {
    margin-left: 20px;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20{
    padding-left: 20px;
}
.pl40{
    padding-left: 40px;
}
.mt10{
    margin-top: 10px;
}
.mt15{
    margin-top: 15px;
}
.mb15{
    margin-bottom: 15px;
}
.mb10{
    margin-bottom: 10px;
}
.mr20 {
    margin-right: 20px;
}
.mr160 {
    margin-right: 160px;
}
.pr15{
    padding-right: 15px;
}
.p10 {
    padding: 10px;
}
.p15{
    padding: 15px;
}
.pt30{
    padding-top:30px;
}
.flt_left {
    float: left;
}
.flt_right {
    float: right;
}
.pt2 {
    padding-top: 2px;
}
.pt10 {
    padding-top: 10px;
}
.pt20 {
    padding-top: 20px;
}
.pb10 {
    padding-bottom: 10px;
}
.fnt10 {
    font-size: 10px;
}
.fnt12{
    font-size: 12px
}
.fnt14{
    font-size: 14px
}
.fnt18 {
    font-size: 18px;
}
.fnt24 {
    font-size: 24px;
}
.fntBld{
    font-weight: 700;
}
.wid{
    position: relative;
    float: left;
    box-sizing: border-box;
}
.wid50{
    width: 50%;
}
.wid100{
    width:100%;
}
.pl5 {
    padding-left: 5px;
}
.p20 {
    padding: 20px;
}
.pl25 {
    padding-left: 25px;
}
.pr25 {
    padding-right: 25px;
}
.pb20 {
    padding-bottom: 20px;
}
#ztb-container{
    box-shadow: 0 1px 3px rgba(0,0,0,.3);

}
.txt-left {
    text-align: left;
}
.txt-right {
    text-align: right;
}
.txt-center {
    text-align: center;
}
.vT {
    vertical-align: top;
}
.gClr {
    color: #3d3d3d;
}
.lightGrey {
    color: #c8cac8;
}
.acsTknClr {
    color: #6d6d6d;
}
.dfClr {
    color: #1d1d1d;
}
.orgClr {
    color: #f98319;
}
.blueClr {
    color: #1473ff !important;
}
.greenClr {
  color: #089949;
}
.greenColor{
    color: #089949;
}
.blueClr:hover, .greenClr:hover, .slPrfSgnOut:hover {
  text-decoration: underline !important;
  cursor: pointer;
}
.mt60 {
    margin-top: 60px;
}
.apiLogo {
    width: 295px;
    float: left;
}
.apiLogo a.sheetAppLogo {
    background: url(../../../../images/zohosheet_logo.665da2ea656f1b82383d526e39923438.svg) no-repeat;
    width: 100px;
    height: 40px;
    background-size: contain;
    position: relative;
    top: 3px;
}
.dotTopBrd {
    border-top: 1px dotted #ddd;
}
#ztb-container, #ztb-switch-menu, .ztb-profile-container, #ztb-menu-container *, #ztb-search, #ztb-profile-image, #ztb-profile-image-pre{
    border-color: transparent!important;
}
.ztb-profile-container {
    margin-top: 8px !important;
}
.apihdr{
    font-weight: 600;
    margin-bottom: 10px;
}
.apiLnhgt, .apiMain .dspTblCell, .apiWrap p, .accesstoken p, .accesstoken li, .accesstoken td, .apiLnhgt pre,
.apiLnhgt p, .apiLnhgt span, .apiLnhgt strong, .apiLnHgt li, .apiMain .dspTblCell pre  {
    line-height: 2;
}
.apiLnhgt li {
    list-style: none;
}
.apiWhole{
    float: left;
    width:100%;
    height: calc(100% - 41px);
    position: relative;
}
.apiWhole table {
    table-layout: fixed;
    width: 100%;
    word-break: break-word;
}
.apiTopBand {
    height: 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 4px 16px 4px 12px;
}
#ztb-topband a#ztb-logo {
    margin: 12px 0 0 20px;
}
.apiIntro{
    cursor:pointer;
}
.apiLfn{
    position: absolute;
    top:0;
    width:250px;
    left: 0;
    bottom: 0;
    background: #f7f8f7;
    box-sizing: border-box;
    border-right:1px solid #e7e7e7;
    padding: 15px 0 24px 0;
    z-index: 1;
    transition: all .5s ease;
    z-index: 2;
}
.apiLfnPL{
    padding: 0 15px;
}
.apiCheck > input[type="radio"]{
    display: none;
}
.apiCheck label{
    padding: 10px 5px;
    width: 100%;
    display: block;
    font-size:14px;
    padding-left: 20px;
    margin-bottom: 10px;
    position: relative;
    cursor: pointer
}
.apiCheck label:before{
    content:'';
    position: absolute;
    right:10px;
    top:50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #bdbdbd;
    position: absolute;
}
.apiCheck label:hover {
    background-color: #d9f7e6;
}
.apiCheck > input[type="radio"]:checked + label{
    background: #19af5c;
    color: #fff;
}
.apiCheck > input[type="radio"]:checked + label:before{
    border-left-color: transparent;
    border-top-color: #fff;
    top: 58%;
    right: 15px;
}
.apiCheck > input[type="radio"]:checked + label + .apiMtdLst{
    display: block;
    max-height: 850px;
    transition: max-height 1s ease;
    overflow: hidden;
}
.apiCheck > input[type="radio"] + label.noArraow:before {
    border: 0;
}
.apiMtdLst{
    padding-left: 30px;
    max-height: 0;
    overflow: auto;
}
.fnt16{
    font-size: 16px;
}
.txtBld, .apiCheck > input[type="radio"]:checked + label {
    font-weight: 700;
}
.apiMtdLst li.active {
    color:#19af5c;
}
.apiIntro.active {
    background: #19af5c;
    color: #fff;
    padding: 10px 0 10px 20px;
}
.apiMtdLst li{
    /*margin-bottom: 12px;*/
    cursor: pointer;
    padding: 6px 5px;
}
.apiDesc{
    padding-left: 250px;
}
.alpHdr{
    padding: 15px 10px 25px 0;
    font-weight: 600;
    font-size: 14px;
}
.apiclr{
    color:#2e7480;
}
.apiPlayArea{
    background: #f9faf9;
    border-left: 1px solid #ddd;
    display:flex;
    height: 100%;
    overflow: auto;
    flex-direction: column;
}
.apiPlayArea .dspTblCell{
    border:none;
    padding: 5px 15px 7px 0;
    vertical-align: middle;
}
.apiPlayArea input[type="text"]{
    height: 26px;
    border:1px solid #ddd;
    outline: none;
    width: 252px;
    background: #f9f8f8;
    font-size: 13px;
}
.apiCtn{
    border-bottom: 1px solid #ddd;
}
.pad020{
    padding: 0 20px;
}
.pad030 {
    padding: 0 30px;
}
.pad03040 {
    padding: 0 30px 40px;
}
.pb30 {
    padding-bottom: 30px;
}
.apiDspFlex{
    display: flex;
    flex-direction: column;
}
.apiDspCol{
    align-items: center;
    justify-content: center;
}
.hgt100{
    height: 100%;
}
.ui-zcombo.ui-focusable .ui-zcombo-dropdown,.ui-zcombo{
    background: #f9f8f8;
}
.apiBtn{
    border: 1px solid #19af5c;
    background: #19af5c;
    color: #fff;
    font-size: 14px;
    padding: 7px 30px;
    cursor: pointer;
}
.apiPlayArea input[type="button"] {
    border: 1px solid #22a55c;
    background-color: #19af5b;
    color: rgb(255, 255, 255);
    padding: 4px 14px 6px 14px;
    font-size: 13px;
    cursor: pointer;
    margin: 10px 0 0;
}
.apiPlayArea input[type="button"], .apiBtn {
    border-radius: 30px;
}
.apiPlayArea input[type="button"]:hover, .apiBtn:hover {
    background: linear-gradient(50deg,#19af5c,#189e53);
}
.apiWrap{
    width: 100%;
    white-space: normal;
    word-break: break-all;
}
.apiMaskLdr{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 400;
}
.apiMaskLdr:before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid #19af5c;
  border-bottom-color: transparent;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  animation: translateLoader .8s linear infinite;
}
#combo_spreadSheetListMenu {
    height: 300px !important;
    overflow: auto;
}
.ht60 {
    height: 60%;
}
.ht40 {
    height: 40%;
}
.over-auto{
    overflow: auto;
}
.apiPlayArea .frmReq {
    position: absolute;
    left: 0;
    width: 100%;
}
#requestArea:before {
    content: attr(data-title);
    position: absolute;
    top: 300px;
    left: 3%;
    padding: 15px;
    border-radius: 5px;
    width: 90%;
    text-align: center;
    color: #a9a9a9;
    font-size: 18px;
}
#requestArea.note:before {
    display: none;
}
.alpHdr:before {
    content: attr(data-title);
    top: 0;
}
.resHdr, .apiPlayArea .frmReq {
    position: relative;
    left: 0;
    right: 0;
    z-index: 1;
    padding-left: 20px;
    font-weight: 600;
    font-size: 16px;
    padding-top: 10px;
    box-sizing: border-box;
    padding-bottom: 10px;

    background-color: #f4f5f4;
    border-bottom: 1px solid #e3e3e3;
}
.resHdr .status {
    padding: 5px 0 5px 5px;
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    position: absolute;
    top: 9px;
    right: 26px;
    padding-left: 30px;
    padding-right: 10px;
    font-weight: 600;
}
.resHdr .status.success {
    background-color: #1ebb9d;
}
.resHdr .status.success:before{
    content: "";
    position: absolute;
    width: 5px;
    height: 10px;
    border: 1px solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(38deg);
    top: 6px;
    left: 11px;
}
.resHdr .status.success:after{
  padding-right: 10px;
  font-size: 12px;
  padding-left: 20px;
}
.resHdr .status.badrequest, .resHdr .status.unauthorized {
    background-color: #e64e5a;
}
.resHdr .status.badrequest:before, .resHdr .status.unauthorized:before{
  content: "✕";
  font-size: 12px;
  position: absolute;
  left: 10px;
}
.resHdr .status.badrequest:after, .resHdr .status.unauthorized:after{
  padding-right: 10px;
  font-size: 12px;
  padding-left: 20px;
}
.resHdr .status.servererror {
    background-color: #f38534;
    padding-left: 23px;
}
.resHdr .status.servererror:before{
    content: "!";
    font-size: 17px;
    position: absolute;
    left: 10px;
    top: 2px;
}
.resHdr .status.servererror:after{
  padding-right: 10px;
  font-size: 12px;
  padding-left: 14px;
}
.accesstoken li a, .accesstoken a {
    color: #089949;
    font-size: 14px;
    text-decoration: none;
}
.accesstoken li a:hover, .accesstoken a:hover {
    text-decoration: underline;
    cursor: pointer;
}    
.accesstoken p, .accesstoken li {
    margin: 10px 0;
    font-size: 14px;
}
.accesstoken h2, .accesstoken strong, .accesstoken h4, .accesstoken h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.accesstoken td {
    padding: 10px 6px;
    border: 1px solid #e3e3e3;
    vertical-align: middle;
}
.apiWhole .ldjs {
    background-color: #F7F7F7;
    width: 100%;
    padding: 20px;
    margin: 10px 0px;
    display: inline-block;
}
.apiDetails .ldjs {
    width: 96%;
    padding-top: 10px;
    padding-bottom: 0;
}
.ldjs.apiURL {
    padding: 0;
    word-wrap: break-word;
}
.ldjs .greninfo {
    word-break: break-all;
    overflow: auto;
}
.ldjs.apiURL .greninfo {
    margin-bottom: 5px;
    font-size: 11px;
    overflow: auto;
}
.apiWhole .greninfo {
    border-left: 4px solid #a9e2ba;
    clear: both;
    background-color: #FFF;
    padding: 15px !important;
    margin: 10px 0px 20px;
    overflow: auto;
}
.accesstoken p span {
    word-break: break-all;
}
.apiWhole .gry {
    font-size: 14px;
    font-weight: 600;
}
.apiDetails fieldset {
    width: 90%;
    border: 1px solid #19af5a !important;
}
.apiDetails legend {
    background-color: #19af5b;
    padding: 5px;
    color: #fff;
}
.apiDetails fieldset div {
    color: #3d3d3d;
    font-weight: 600;
    padding-bottom: 5px;
}
.accesstoken .user, .accesstoken .add, .accesstoken .create, .accesstoken .edit {
    width: 100%;
}
#requestArea .ui-zcombo, .apiPlayArea input[type="text"] {
    height: 30px !important;
    border-radius: 2px;
    background-color: #fcfbfc;
    border: 1px solid #e7e8e7;
}
#requestArea .ui-zcombo .ui-zcombo-select-item {
    line-height: 28px;
    padding-top: 7px;
}
#requestArea .ui-icon.ui-icon-triangle-1-s {
    margin-top: 7px;
}
#api_params {
    width: 95%;
}
.apiWhole textarea {
    height: 28px;
    width: 252px;
    background-color: #f9f8f8;
}
.timerdiv {
    width: 250px;
    display: block;
    float: right;
    margin-top: 8px;
    margin-right: 50px;
}
.timrTtl {
    text-align: left;
    margin-top: 9px;
    float: left;
}
.timer {
    width: 80px;
    float: right;
    margin-top: 2px;
}
.timerMinutes, .timerSeconds {
    width: 38px;
    height: 38px;
    border-radius: 2px;
    color: #fff;
    float: left;
    position: relative;
}
.timerSeconds {
    margin-left: 2px;
}
.timerMinutes .pl5, .timerSeconds .pl5 {
    padding-left: 7px;
}
.timerMinutes:before {
    content: ":";
    position: absolute;
    top: 0px;
    color: rgb(130, 130, 130);
    z-index: 2;
    left: 36px;
    font-size: 16px;
}
.timerMinutes:after, .timerSeconds:after {
    content: "Minutes";
    font-size: 7px;
    margin-left: 3px;
    letter-spacing: 0.5;
    color: #1d1d1d;
}

.timerSeconds:after {
    content: "Seconds";
}
#requestParams .dspTblCell p {
    color: #b1694c;
}
.apiWhole #responseDiv.lI:before {
    border: 2px solid #e3e3e3 !important;
    background: #fff !important;
    border-top: 2px solid #666 !important;
    left: 50% !important;
    top: 40% !important;
    width: 20px !important;
    height: 20px !important;
}

/* ------logout menu start ----- */

.apiTopBand .slProfile a {
    color: #1d1d1d;
    text-decoration: none;
}

.slProfile {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: relative;
    float: right;
    margin-top: 3px;
}
/* .slDwnArr:after {
    content: '';
    border: 4px solid transparent;
    border-top-color: #999;
    position: absolute;
    right: -13px;
    transform: translateY(-50%);
    cursor: pointer;
    top: 50%;
} */
.slProfile img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    cursor: pointer;
}
.slPrfMenu.slMenu {
    left: auto;
    right: 0;
    padding: 0;
    width: 260px;
    overflow: initial;
    border-radius: 10px;
    max-height: 500px;
}
.slMenu {
    position: absolute;
    max-height: 400px;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #dfdfdf;
    z-index: 3;
    overflow: auto;
    padding: 10px 0;
    min-width: 160px;
    white-space: nowrap;
    animation: translateDown .3s ease;
    border-radius: 10px;
    box-shadow: 2px 1px 6px rgba(0,0,0,.1);
}
.slPrfMenu.slMenu:before, .slPrfMenu.slMenu:after {
    content: '';
    position: absolute;
    top: -16px;
    border: 8px solid transparent;
    border-bottom-color: #fff;
    right: 10px;
}
.slPrfMenu.slMenu:after {
    border-width: 9px;
    border-bottom-color: #e1e1e1;
    z-index: -1;
    top: -19px;
    right: 9px;
}
.slPrfMore {
    padding: 8px 10px;
}
.slMenu li {
    position: relative;
}
.slMenu li:hover {
    background: #e6f8f3;
}
.slPrfMore li {
    padding: 7px 5px;
}
.slPrfMore li.download:hover {
    background: transparent;
    cursor: default;
}
.slPrfMore a {
    display: block;
}
.slPrfMore li.slLineSep {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 10px;
    margin-bottom: 3px;
}
.slPrfMore li.download a, .slPrfMore .slTheme span {
    display: inline-block;
    cursor: pointer;
}
.slSubPrfCtn {
    background: #fafafa;
    padding: 15px;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 10px 10px 0 0;
    cursor: default;
}
.slSubPrf {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    float: left;
    margin-right: 0;
}
.slPrfDetails {
    width: 186px;
    margin-left: 10px;
    float: left;
}
.slSrch.slMenu li, .slPrfDetails p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slPrfDetails p {
    margin-bottom: 5px;
}
.slPrfSgnOut {
    color: #f33f3f !important;
    float: right;
    font-weight: 600;
    font-size: 14px;
    margin-right: 2px;
}
.apiTopBand .signInArea {
    float: right;
    margin-top: 7px;
}

.apiTopBand .signIn, .apiTopBand .signUp {
    padding: 0;
    margin: 5px 6px 6px 0;
    letter-spacing: .4px;
    border: 1px solid transparent;
    webkit-transition: none;
    -moz-transition: none;
    transition: none;
    height: 28px;
    background-color: #f4f4f4;
    border-color: #DDD !important;
}
.apiTopBand .signUp {
    background-color: #f0483e;
    border-color: #f0483e !important;
}
.apiTopBand .signBtn {
    float: left;
    padding: 0 12px;
    border-right-width: 1px;
    border-right-style: solid;
}
.apiTopBand .signIn a, .apiTopBand .signUp a {
    color: #333;
    line-height: 25px;
    padding: 0 15px;
    text-decoration: none;
}
.apiTopBand .signUp a {
    color: #fff;
}
.disbleSelectSp {
    pointer-events: none;
    opacity: 0.3;
}
.refreshBtn {
    border: 0;
    background: #f9faf9;
}
.refreshBtn.load {
    animation: rotateBdr 600ms linear infinite;
}
.exampleTable {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
    border: 1px solid grey;
    width: 325px;
    /*height: 110px;*/
    padding: 5px;
    margin-top: 10px;
}
.exampleTable th {
    font-weight: 600;
}
.exampleTable th, .exampleTable td {
    padding: 3px 0;
}
.tabular_table_example {
    margin-top: 10px;
    margin-bottom: 15px;
}
/* ------- logout menu ------*/
.apiVer {
    position: relative;
    margin-top: 24px;
    margin-left: 16px;
}
.apiVer:before {
    content: "";
    width: 8px;
    font-size: 14px;
    border-top: 2px solid #000;
    position: absolute;
    left: -9px;
    top: 6px;
}
/* ------ sample request start ----- */
.sampReqArea {
    width: 96%;
}
.sampReq {
    margin-top: 0;
    border: 1px solid #dfdfdf;
}
.sampReqTab {
    background-color: #f7f7f7;
    margin: 0 auto;
    padding: 0;
    width: auto;
    display: inline-block;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
}
.sampReqTab .bdrRt {
    border-right: 1px solid #dfdfdf;
}
.hlTab li {
    background-color: transparent;
    padding: 5px 10px;
    border-bottom: 1px solid #d7d7d7;
    position: relative;
    cursor: pointer;
    border-bottom: 0;
    border-right: 0;
    text-align: center;
    white-space: nowrap;


}
.hlTab li.active {
    background-color: #089949;
    color: #fff;
}
.hlTab li:first-child.active {
    border-radius: 5px 0 0 5px;
}
.hlTab li:last-child.active {
    border-radius: 0 5px 5px 0;
}
.apiDetails .ldjs.sampReqTab {
    padding: 0;
    margin: 0;
    width: auto;
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    top: -16px;
    display: flex;
}
.apiDetails .ldjs.sampReq {
    margin-top: 0;
    padding-top: 30px;
    background-color: #f9f9f9;
}
.apiWhole .sampReq .greninfo {
    border-left-color:rgb(169, 226, 186);
}
.apiWhole .sampReq .greninfo p {
    /*white-space: pre-wrap;*/
    overflow:auto;
    padding-bottom: 15;
    margin-bottom: -10;
}
/* ------ sample request end ----- */
/* ------ sample response start ----- */
ul.smplResp {
    margin-left: 20px;
}
ul.smplResp li {
    position: relative;
    list-style: disc;
}
ul.smplResp li:before {
    /*content: "\2022";
    color: #1d1d1d;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 25px;
    position: absolute;
    top: -10px;
    left: 10px;*/
}
/* ------ sample response end ----- */
/****** navigation button start ****/
.navExpColpBtn {
    width: 36px;
    height: 42px;
    position: absolute;
    left: 100%;
    border-left-color: #fff;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 5px 5px 0px;
    cursor: pointer;
    background-color: #fff;
    display: none;
}
.navExpColpBtn:before {
    content: "+";
    font-size: 24px;
    color: #000;
    position: absolute;
    left: 0;
    top: 0;
    width: 33px;
    height: 100%;
    color: #fff;
    line-height: 40px;
    text-align: center;
}
.apiLfn.navExp {
    left: 0;
}
.navExp .navExpColpBtn:before {
    content: "-";
    top: -5px;
    font-size: 40px;
    color: #000;
}
.apiPlayGrnd {
    display: none;
    right: 10px;
    top: 15px;
    cursor: pointer;
    background-color: #19af5c;
    color: #fff;
    border-radius: 30px;
    padding: 5px 10px;
    z-index: 2;
    text-decoration: none;
}
.posRel {
    position: relative;
}
.posAbs {
    position: absolute;
}
.showtimer .apiPlayGrnd {
    display: none;
}
/****** navigation button end ******/
/* -- syntax highlighting start -- */
.hlProperty, .hlKey {
    color: #7f0055;
}
.hlString, .hlValue {
    color: #2a00ff;
}
.hlDlg{
    color: #C69060;
}
.hlVname {
    /*color: #8B0000;*/
    color: #693e3e;
}

.hlDlgName {
    color: #5e57b5;
}
.hlDlgMap{
    color: #c6607c;
}
.hlFunc{
    color: #b7b5b5;
}
.hlEntity {

    color: #00aa02;
/*    color: #009999;  */
}
.hlPyNumber{
    color: #800001;
}
.hlPunctuation {
    color: #999;
}
.hlNumber {
    /*color: #1654e4;*/
}
.hlBoolean, .hlConstant,  {
    /*color: #20639B;*/
}
.hlOperator, .hlURL {
    /*color: #880000;*/
}
.hlFunction {
    /*color: #DD4A68; */
}
.hlEncode{
    color: #0000c1;
    font-style: italic;
    font-weight: bold;
}
.hlEqualJS{
    color:#859901;
}
.hlBoldJS{
    color: #063642;
    font-weight: bold;
}
.hlVal {
    font-style: italic;
}
.hlBold {
    font-weight: bold;
}

.hlVar {
    color:#238bd1;
}
.hlStringDlg {
    color:#D10000;
}
.hlStringJS {
    color: #2aa19a;
}
.hlNumberJS{
    color: #d13582;
}
.hlJSON{
    color:#cb4b15;
}
.respArea pre, .greninfo pre span, .rqArea .cde, .greninfo pre{
    font-family: monospace;
}
.usgLmtTbl th {
    color: #19af5c;
    padding: 13px 10px;
    border-bottom: 1px solid #dfdfdf;
}
.usgLmtRow td {
    padding: 13px 10px;
    border-bottom: 1px solid #ddd;
}
.usgLmtRow tr {
    padding: 13px 10px;
    border-bottom: 1px solid #ddd;
}
.usgLmtType{
    border-bottom: 1px solid #ddd;
    background-color: #f7f7f7;
    padding: 5px 10px;
}
.apiusageDetails{
	height: 100%;
    overflow: auto;
}
.hdrColor {
    color: #616261;
    opacity: 0.7;
}
.usgLmtTbl tr:first-child, .hdrSticky {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}
/* -- syntax highlighting end -- */
.dsp_none {
    display: none;
}
.bdrTop {
    border-top: 1px solid #dfdfdf;
}

.separator_li {
    position: relative;
    padding-top: 30px;
}

.separator_li::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -30;
    right: 0;
    height: 1px;
    border-top: 1px solid #dfdfdf;
    z-index: 1;
}