@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata|Raleway:200');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//db.onlinewebfonts.com/c/bf05f041f45dcd046f7d858d97c3fcda?family=FF+DIN);
/* 新增區塊 */
body {
    margin: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

 * {
    font-family: "Noto Sans TC", "FF DIN", Portrait, serif, "Noto Sans TC", "sans-serif", "Arial", "微軟正黑體";
    box-sizing: border-box;
} 

button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

header {
    display: block;
    background: linear-gradient(90deg, #460582 0, #7f53cf 100%) !important;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 99;
    box-shadow: 0 .5rem 1rem rgba(70,5,130,.1);
}

header .logo {
    width: 230px;
}

header .title {
    font-size: 14px;
    color: #ffffff;
    margin-left: 24px;
    padding-top: 4px;
}

header .header-info {
    margin-left: auto;
}

header .header-info .title {
    font-size: 13px;
    color: #ffffff;
    text-align: right;
    display: block;
    margin-bottom: 4px;
}
@media (max-width:768px) {
    header .header-info .title {
    display: none;
    }
}

.content .updateTime {
    font-size: 12px;
    color: #000;
    text-align: right;
    display: block;
    padding: 8px;
}
.content .updateTime i {
    margin-right: 8px;
}

.res-link{
    display: block;
    width: 100%;
    font-size: 12px;
    word-wrap: break-word;
    padding: 8px;
    background-color: #f5f5f5;
    margin-top: 24px;
    border-radius: 8px;
}

footer{
    font-size: 12px;
    padding: 8px;
    bottom: 0px;
}

/* 新增區塊end */


.hljs-comment,
.hljs-title {
    color: #8e908c
}

.hljs-variable,
.hljs-attribute,
.hljs-tag,
.hljs-regexp,
.ruby .hljs-constant,
.xml .hljs-tag .hljs-title,
.xml .hljs-pi,
.xml .hljs-doctype,
.html .hljs-doctype,
.css .hljs-id,
.css .hljs-class,
.css .hljs-pseudo {
    color: #c82829
}

.hljs-number,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in,
.hljs-literal,
.hljs-params,
.hljs-constant {
    color: #f5871f
}

.ruby .hljs-class .hljs-title,
.css .hljs-rules .hljs-attribute {
    color: #eab700
}

.hljs-string,
.hljs-value,
.hljs-inheritance,
.hljs-header,
.ruby .hljs-symbol,
.xml .hljs-cdata {
    color: #718c00
}

.css .hljs-hexcolor {
    color: #3e999f
}

.hljs-function,
.python .hljs-decorator,
.python .hljs-title,
.ruby .hljs-function .hljs-title,
.ruby .hljs-title .hljs-keyword,
.perl .hljs-sub,
.javascript .hljs-title,
.coffeescript .hljs-title {
    color: #4271ae
}

.hljs-keyword,
.javascript .hljs-function {
    color: #8959a8
}

.hljs {
    display: block;
    background: white;
    color: #4d4d4c;
    padding: .5em
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
    opacity: .5
}

.right .hljs-comment {
    color: #969896
}

.right .css .hljs-class,
.right .css .hljs-id,
.right .css .hljs-pseudo,
.right .hljs-attribute,
.right .hljs-regexp,
.right .hljs-tag,
.right .hljs-variable,
.right .html .hljs-doctype,
.right .ruby .hljs-constant,
.right .xml .hljs-doctype,
.right .xml .hljs-pi,
.right .xml .hljs-tag .hljs-title {
    color: #c66
}

.right .hljs-built_in,
.right .hljs-constant,
.right .hljs-literal,
.right .hljs-number,
.right .hljs-params,
.right .hljs-pragma,
.right .hljs-preprocessor {
    color: #de935f
}

.right .css .hljs-rule .hljs-attribute,
.right .ruby .hljs-class .hljs-title {
    color: #f0c674
}

.right .hljs-header,
.right .hljs-inheritance,
.right .hljs-name,
.right .hljs-string,
.right .hljs-value,
.right .ruby .hljs-symbol,
.right .xml .hljs-cdata {
    color: #b5bd68
}

.right .css .hljs-hexcolor,
.right .hljs-title {
    color: #8abeb7
}

.right .coffeescript .hljs-title,
.right .hljs-function,
.right .javascript .hljs-title,
.right .perl .hljs-sub,
.right .python .hljs-decorator,
.right .python .hljs-title,
.right .ruby .hljs-function .hljs-title,
.right .ruby .hljs-title .hljs-keyword {
    color: #81a2be
}

.right .hljs-keyword,
.right .javascript .hljs-function {
    color: #b294bb
}

.right .hljs {
    display: block;
    overflow-x: auto;
    background: #1d1f21;
    color: #c5c8c6;
    padding: .5em;
    -webkit-text-size-adjust: none
}

.right .coffeescript .javascript,
.right .javascript .xml,
.right .tex .hljs-formula,
.right .xml .css,
.right .xml .hljs-cdata,
.right .xml .javascript,
.right .xml .vbscript {
    opacity: .5
}


h1,
h2,
h3,
h4,
h5 {
    color: black;
    margin: 12px 0
}

h1 .permalink,
h2 .permalink,
h3 .permalink,
h4 .permalink,
h5 .permalink {
    margin-left: 0;
    opacity: 0;
    transition: opacity .25s ease
}

h1:hover .permalink,
h2:hover .permalink,
h3:hover .permalink,
h4:hover .permalink,
h5:hover .permalink {
    opacity: 1
}

.triple h1 .permalink,
.triple h2 .permalink,
.triple h3 .permalink,
.triple h4 .permalink,
.triple h5 .permalink {
    opacity: .15
}

.triple h1:hover .permalink,
.triple h2:hover .permalink,
.triple h3:hover .permalink,
.triple h4:hover .permalink,
.triple h5:hover .permalink {
    opacity: .15
}

h1 {
    font: 200 36px 'Raleway', Helvetica, sans-serif;
    font-size: 36px
}

h2 {
    font: 200 36px 'Raleway', Helvetica, sans-serif;
    font-size: 24px
}

h3 {
    font-size: 100%;
    text-transform: uppercase
}

h5 {
    font-size: 100%;
    font-weight: normal
}

p {
    margin: 0 0 10px
}

p.choices {
    line-height: 1.6
}

a {
    color: #428bca;
    text-decoration: none
}

li p {
    margin: 0
}

hr.split {
    border: 0;
    height: 1px;
    width: 100%;
    padding-left: 6px;
    margin: 12px auto;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.2) 51.4%, rgba(255, 255, 255, 0.2) 51.4%, rgba(255, 255, 255, 0) 80%)
}

dl dt {
    float: left;
    width: 130px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700
}

dl dd {
    margin-left: 150px
}

blockquote {
    color: rgba(0, 0, 0, 0.5);
    font-size: 15.5px;
    padding: 10px 20px;
    margin: 12px 0;
    border-left: 5px solid #e8e8e8
}

blockquote p:last-child {
    margin-bottom: 0
}

pre {
    background-color: #f5f5f5;
    padding: 12px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    overflow: auto
}

pre code {
    color: black;
    background-color: transparent;
    padding: 0;
    border: none
}

code {
    color: #444;
    background-color: #f5f5f5;
    font: 'Inconsolata', monospace;
    padding: 1px 4px;
    border: 1px solid #cfcfcf;
    border-radius: 3px
}

ul,
ol {
    padding-left: 2em
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 12px
}

table tr:nth-child(2n) {
    background-color: #fafafa
}

table th,
table td {
    padding: 6px 12px;
    border: 1px solid #e6e6e6
}

.text-muted {
    opacity: .5
}

.note,
.warning {
    padding: .3em 1em;
    margin: 1em 0;
    border-radius: 2px;
    font-size: 90%
}


.note p,
.warning p {
    margin: .5em 0
}

.note {
    color: black;
    background-color: #f0f6fb;
    border-left: 4px solid #428bca
}

.note h1,
.note h2,
.note h3,
.note h4,
.note h5,
.note h6 {
    color: #428bca
}

.warning {
    color: black;
    background-color: #fbf1f0;
    border-left: 4px solid #c9302c
}

.warning h1,
.warning h2,
.warning h3,
.warning h4,
.warning h5,
.warning h6 {
    color: #c9302c
}



nav {
    position: fixed;
    top: 50px;
    bottom: 0;
    overflow-y: auto;
    display: block;
    padding:24px 8px;
}

nav .resource-group {
    padding: 0
}

nav .resource-group .heading {
    position: relative
}

nav .resource-group .heading .chevron {
    position: absolute;
    top: 5px;
    right: 12px;
    color: #460582;
}

nav .resource-group .heading a {
    display: block;
    color: #460582;
    /* opacity: .7; */
    border-left: 2px solid transparent;
    padding: 4px;
    margin-bottom: 0;
    margin: 0;
}
nav .resource-group .heading a i{
    margin-right: 8px;
    font-size: 14px;
    margin-bottom: 4px;
}

nav .resource-group .heading a:hover {
    text-decoration: none;
    background-color: bad-color;
    border-left: 2px solid black
}

nav ul {
    list-style-type: none;
    padding-left: 0
}

nav ul a {
    display: block;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    /* border-top: 1px solid #d9d9d9; */
    border-left: 2px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

nav ul a:hover {
    text-decoration: none;
    background-color: bad-color;
    border-left: 2px solid #7F53CF;
    transition: .5s;
}

nav ul>li {
    margin: 0
}

nav ul>li:first-child {
    margin-top: -12px
}

nav ul>li:last-child {
    margin-bottom: -12px
}

nav ul ul a {
    padding-left: 24px
}

nav ul ul li {
    margin: 0
}

nav ul ul li:first-child {
    margin-top: 0
}

nav ul ul li:last-child {
    margin-bottom: 0
}

nav>div>div>ul>li:first-child>a {
    border-top: none
}

.preload * {
    transition: none !important
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.badge {
    display: inline-block;
    float: right;
    min-width: 10px;
    min-height: 14px;
    padding: 3px 7px;
    font-size: 12px;
    color: #000;
    background-color: #f2f2f2;
    border-radius: 10px;
    margin: 4px 0;
}

.badge.get {
    color: #70bbe1;
    background-color: #d9edf7
}

.badge.head {
    color: #70bbe1;
    background-color: #d9edf7
}

.badge.options {
    color: #70bbe1;
    background-color: #d9edf7
}

.badge.put {
    color: #f0db70;
    background-color: #fcf8e3
}

.badge.patch {
    color: #f0db70;
    background-color: #fcf8e3
}

.badge.post {
    color: #93cd7c;
    background-color: #dff0d8
}

.badge.delete {
    color: #ce8383;
    background-color: #f2dede
}

.collapse-button {
    float: right
}

/* .collapse-button .close {
    display: none;
    color: #428bca;
    cursor: pointer
} */
.collapse-button .off {
    display: none;
    color: #428bca;
    cursor: pointer
}

.collapse-button .open {
    color: #428bca;
    cursor: pointer
}

/* .collapse-button.show .close {
    display: inline
} */
.collapse-button.show .off {
    display: inline
}

.collapse-button.show .open {
    display: none
}

.collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out
}

nav {
    width: 300px
}

.container {
    max-width: 1366px;
    width: 100%;
    margin: 0 auto;
}

.container .row {
    max-width: 1366px;
    width: 100%;
    display: flex;
    justify-items: center;
    position: relative;
}


.container .row .content {
    margin-left: 300px;
    width: calc(100% - 300px);
    margin-top: 24px;
    padding-left: 16px;
}

.container .row:after {
    content: '';
    display: block;
    clear: both
}

.container-fluid nav {
    width: 22%
}

.container-fluid .row .content {
    margin-left: 24%
}

.container-fluid.triple nav {
    width: 16.5%;
    padding-right: 1px
}

.container-fluid.triple .row .content {
    position: relative;
    margin-left: 16.5%;
    padding-left: 24px
}

.middle:before,
.middle:after {
    content: '';
    display: table
}

.middle:after {
    clear: both
}

.middle {
    box-sizing: border-box;
    width: 51.5%;
    padding-right: 12px
}

.right {
    box-sizing: border-box;
    float: right;
    width: 48.5%;
    padding-left: 12px
}

.right a {
    color: #428bca
}

.right h1,
.right h2,
.right h3,
.right h4,
.right h5,
.right p,
.right div {
    color: white
}

.right pre {
    background-color: #1d1f21;
    border: 1px solid #1d1f21
}

.right pre code {
    color: #c5c8c6
}

.right .description {
    margin-top: 12px
}

.triple .resource-heading {
    font-size: 125%
}

.definition {
    margin-top: 12px;
    margin-bottom: 12px
}

.definition .method {
    font-weight: bold
}

.definition .method.get {
    color: #2e8ab8
}

.definition .method.head {
    color: #2e8ab8
}

.definition .method.options {
    color: #2e8ab8
}

.definition .method.post {
    color: #56b82e
}

.definition .method.put {
    color: #b8a22e
}

.definition .method.patch {
    color: #b8a22e
}

.definition .method.delete {
    color: #b82e2e
}

.definition .uri {
    word-break: break-all;
    word-wrap: break-word
}

.definition .hostname {
    opacity: .5
}

.example-names {
    background-color: #eee;
    padding: 12px;
    border-radius: 6px
}

.example-names .tab-button {
    cursor: pointer;
    color: black;
    border: 1px solid #ddd;
    padding: 6px;
    margin-left: 12px
}

.example-names .tab-button.active {
    background-color: #d5d5d5
}

.right .example-names {
    background-color: #444
}

.right .example-names .tab-button {
    color: white;
    border: 1px solid #666;
    border-radius: 6px
}

.right .example-names .tab-button.active {
    background-color: #5e5e5e
}

#nav-background {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16.5%;
    padding-right: 14.4px;
    background-color: #fbfbfb;
    border-right: 1px solid #f0f0f0;
    z-index: -1
}

#right-panel-background {
    position: absolute;
    right: -12px;
    top: -12px;
    bottom: -12px;
    width: 48.6%;
    background-color: #333;
    z-index: -1
}

@media (max-width:1200px) {
    nav {
        width: 240px;
    }

    .container .row .content {
        margin-left: 240px;
        width: calc(100% - 240px);
    }
}

@media (max-width:992px) {
    nav {
        width: 200px;
    }

    .container {
        max-width: 100%;
    }

    .container .row .content {
        margin-left: 194px;
        width: calc(100% - 200px);
    }
}

@media (max-width:768px) {
    nav {
        display: none
    }

    .container {
        width: 95%;
        max-width: none
    }

    .container .row .content,
    .container-fluid .row .content,
    .container-fluid.triple .row .content {
        margin-left: auto;
        margin-right: auto;
        width: 95%
    }

    #nav-background {
        display: none
    }

    #right-panel-background {
        width: 48.6%
    }
}

.back-to-top {
    display: none;
    position: fixed;
    z-index: 1;
    bottom: 0;
    right: 24px;
    padding: 4px 8px;
    color: rgba(0, 0, 0, 0.5);
    background-color: #f2f2f2;
    text-decoration: none !important;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px
}
nav .resource-group{
    border: none;
}
.resource-group {
    padding: 12px;
    margin-bottom: 12px;
    background-color: white;
    border: 1px solid #d9d9d9;
    border-radius: 6px
}

.resource-group h2.group-heading,
.resource-group .heading a {
    padding: 12px;
    margin: -12px -12px 12px -12px;
    background-color: #F8F2FE;
    /* border-bottom: 1px solid #d9d9d9; */
    /* border-top-left-radius: 6px;
    border-top-right-radius: 6px; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 500;
}

.triple .content .resource-group {
    padding: 0;
    border: none
}

.triple .content .resource-group h2.group-heading,
.triple .content .resource-group .heading a {
    margin: 0 0 12px 0;
    border: 1px solid #d9d9d9
}

nav .resource-group .collapse-content {
    padding: 0
}

.action {
    margin-bottom: 12px;
    padding: 12px 12px 0 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 6px
}

.action h4.action-heading {
    padding: 6px 12px;
    margin: -12px -12px 12px -12px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden
}

.action h4.action-heading .name {
    float: right;
    font-weight: normal;
    padding: 6px 0
}

.action h4.action-heading .method {
    padding: 6px 12px;
    margin-right: 12px;
    border-radius: 3px;
    display: inline-block
}

.action h4.action-heading .method.get {
    color: #fff;
    background-color: #337ab7
}

.action h4.action-heading .method.head {
    color: #fff;
    background-color: #337ab7
}

.action h4.action-heading .method.options {
    color: #fff;
    background-color: #337ab7
}

.action h4.action-heading .method.put {
    color: #fff;
    background-color: #ed9c28
}

.action h4.action-heading .method.patch {
    color: #fff;
    background-color: #ed9c28
}

.action h4.action-heading .method.post {
    color: #fff;
    background-color: #5cb85c
}

.action h4.action-heading .method.delete {
    color: #fff;
    background-color: #d9534f
}

.action h4.action-heading code {
    color: #444;
    background-color: #f5f5f5;
    border-color: #cfcfcf;
    font-weight: normal;
    word-break: break-all;
    display: inline-block;
    margin-top: 2px
}

.action dl.inner {
    padding-bottom: 2px
}

.action .title {
    border-bottom: 1px solid white;
    margin: 0 -12px -1px -12px;
    padding: 12px
}

.action.get {
    border-color: #bce8f1
}

.action.get h4.action-heading {
    color: #337ab7;
    background: #d9edf7;
    border-bottom-color: #bce8f1
}

.action.head {
    border-color: #bce8f1
}

.action.head h4.action-heading {
    color: #337ab7;
    background: #d9edf7;
    border-bottom-color: #bce8f1
}

.action.options {
    border-color: #bce8f1
}

.action.options h4.action-heading {
    color: #337ab7;
    background: #d9edf7;
    border-bottom-color: #bce8f1
}

.action.post {
    border-color: #d6e9c6
}

.action.post h4.action-heading {
    color: #5cb85c;
    background: #dff0d8;
    border-bottom-color: #d6e9c6
}

.action.put {
    border-color: #faebcc
}

.action.put h4.action-heading {
    color: #ed9c28;
    background: #fcf8e3;
    border-bottom-color: #faebcc
}

.action.patch {
    border-color: #faebcc
}

.action.patch h4.action-heading {
    color: #ed9c28;
    background: #fcf8e3;
    border-bottom-color: #faebcc
}

.action.delete {
    border-color: #ebccd1
}

.action.delete h4.action-heading {
    color: #d9534f;
    background: #f2dede;
    border-bottom-color: #ebccd1
}

#second-header {
    display: block;
    background-color: #ffffff;
    font-size: 13px;
    padding: 8px 12px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #d9d9d9;
    border-left: 2px solid transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    color:#7F53CF
}

.loginDescImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    max-width: 65%;
    height: auto;
    margin: 0 auto;
    display: block;
}

.loginDescImg:hover {
    opacity: 0.7;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 100;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    max-width: 45%;
    max-height: 100%;
    object-fit: contain;
}

/* Caption of Modal Image */
.caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content,
.caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.closeModalImg {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.closeModalImg:hover,
.closeModalImg:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}