html {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
}
body {
    margin: 0px;
}
body.no-scroll {
  overflow: hidden;
}
#api-menu {
    position: fixed;
    width: 300px;
    height: 100vh;
    border-right: solid 1px #ececec;
    background-color: #fcfcfc;
    overflow-y: auto;
    padding-bottom: 20px;
    box-sizing: border-box;
    top: 0px;
}
#api-container {
    max-width: 1200px;
}
#api-content-container {
    width: 100%;
    padding-left: 310px;
    box-sizing: border-box;
}
#api-content {

}
@media print {
    #api-menu {
        display: none;
    }
    #api-content-container {
        padding-left: 0px;
    }
}

#logout {
    background-image: url(../img/logout.png);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 15px 9px;
    display: block;
    padding: 10px;
    padding-left: 39px;
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    margin: 15px;
    background-color: #ececec;
    border-radius: 3px;
    border: solid 1px #dadada;
    font-weight: bolder;
}

/* Section */
.apidoc-section {
    display: block;
}
.api-section-headline {
    font-weight: bold;
    font-size: 17px;
    text-align: center;
    padding: 10px;
}

/* Route */
.route {
    border: solid 1px gray;
    border-radius: 3px;
    margin-bottom: 10px;
}
.route-content {
    padding: 10px;
}
.route.get {
    border-color: #3498db;
}
.route.post {
    border-color: #18bc9c;
}
.route.put {
    border-color: #f39c12;
}
.route.delete {
    border-color: #e74c3c;
}

.route-name {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    padding: 10px;
}
.route-name.get {
    background-color: #3498db;
}
.route-name.post {
    background-color: #18bc9c;
}
.route-name.put {
    background-color: #f39c12;
}
.route-name.delete {
    background-color: #e74c3c;
}
.route-name .route-method {
    display: inline-block;
    padding: 7px 7px;
    background-color: white;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 10px;
}
.route-name-title {
    display: inline-block;
    padding: 5px 10px;
    background-color: rgba(255,255,255,0.7);
    border-radius: 3px;
    font-weight: bold;
}
.route-example-url {
    color: gray;
}
.route-example-url .route-method {
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
.route-example-url .route-method.get {
    color: #3498db;
}
.route-example-url .route-method.post {
    color: #18bc9c;
}
.route-example-url .route-method.put {
    color: #f39c12;
}
.route-example-url .route-method.delete {
    color: #e74c3c;
}
.route-req-button {
    display: inline-block;
    float: right;
    padding: 7px 7px;
    background-color: white;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}


[data-param-order] {
    background-color: rgba(0,0,0,0.08);
    display: inline-block;
    padding: 1px 3px;
    border-radius: 3px;
    cursor: default;
    color: #c82829;
}

/* Table params */
table.route-param-table {
    width: 100%;
}
table.route-param-table tr td:first-child {
    width: 20px;
}
.route-content-headline {
    font-weight: bold;
    font-size: 1.1rem;
    margin-top: 10px;
    margin-bottom: 5px;
}
tr .param-type {
    background-color: #f5f5f5;
    display: inline-block;
    padding: 4px 5px;
    border-radius: 3px;
    border: solid 1px #e8e8e8;
    cursor: default;
    font-family: monospace;
    margin-right: 5px;
}
tr .param-type:first-letter {
    text-transform: uppercase;
}
tr .param-required {
    display: inline-block;
    margin-right: 5px;
}
tr .param-example {
    color: #969696;
}
tr .param-description {
    margin-top: 4px;
}

.route-req-params table {
    border-collapse: collapse;
    cursor: default;
}
.route-req-params table td {
    vertical-align: top;
    padding: 8px 10px;
}
.route-req-params table td:first-child {
    text-align: right;
    padding-right: 0px;
    font-weight: bold;
    padding-top: 12px;
}

.route-param-selected {
    background-color: #f9e87c !important;
}

/* MENU */
.api-menu-header {
    font-weight: bold;
    font-size: 17px;
    text-align: center;
    padding: 10px;
}
#api-menu-ul,
#api-menu-ul ul {
    width: 100%;
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}
#api-menu-ul li {
    list-style-type: none;
    display: block;
    box-sizing: border-box;
}
#api-menu-ul li a {
    text-decoration: none;
    display: block;
    color: black;
}
#api-menu-ul li a:hover {
    background-color: #e8e8e8;
}
#api-menu-ul > li > a {
    font-weight: bold;
    padding: 10px 0px 7px 15px;
    color: gray;
}
#api-menu-ul > li > ul > li > a {
    padding: 5px 0px 5px 30px;
    border-top: solid 1px transparent;
    border-bottom: solid 1px transparent;
    transition: background-color 300ms, border-top 300ms, border-bottom 300ms;
}
#api-menu-ul > li > ul > li > a.active {
    background-color: white;
    border-top: solid 1px #ececec;
    border-bottom: solid 1px #ececec;
}
#api-menu-ul li.menu-section {
    /*background-color: #f4f4f4;*/
    border-radius: 3px;
    /*padding: 4px 8px;*/
}
#api-menu-ul li.menu-route {

}
#api-menu-ul li a span.menu-route-method {
    font-weight: bold;
    display: inline-block;
    padding-right: 5px;
}
#api-menu-ul li a span.menu-route-method.get {
    color: #3498db;
}
#api-menu-ul li a span.menu-route-method.post {
    color: #18bc9c;
}
#api-menu-ul li a span.menu-route-method.put {
    color: #f39c12;
}
#api-menu-ul li a span.menu-route-method.delete {
    color: #e74c3c;
}
#api-menu-ul li.menu-route .content-authorized-sign {
    font-weight: bold;
    color: #666666;
}



#dialog-cover {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.8);
    display: none;
}
#dialog {
    max-width: 1000px;
    margin: auto;
    border: solid 1px #e0e0e0;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    max-height: 100%;
    overflow: auto;
}
#dialog .dialog-input {
    width: 100%;
    display: block;
    color: black;
      background-color: #fafafa;
      border: solid 1px #e6e6e6;
      padding: 10px;
     border-radius: 3px;
    box-sizing: border-box;
    font-family: monospace;
}
#dialog .dialog-input[disabled] {
    color: #bdbdbd;
}
#dialog-input-req-body-not-used {
    color: red;
}
#dialog .dialog-input-label {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}
#dialog .dialog-description .method {
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
#dialog .dialog-description .method[data-method='get'] {
    color: #3498db;
}
#dialog .dialog-description .method[data-method='post'] {
    color: #18bc9c;
}
#dialog .dialog-description .method[data-method='put'] {
    color: #f39c12;
}
#dialog .dialog-description .method[data-method='delete'] {
    color: #e74c3c;
}
#dialog-button-container {
    margin-top: 20px;
    text-align: right;
}
.button {
    display: inline-block;
    padding: 7px 7px;
    background-color: #dedede;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
}
.button-indicator {
    display: inline-block;
    padding: 7px 7px;
    background-color: #fdafaf;
    border-radius: 3px;
    font-weight: bold;
}
.button-indicator.saved {
    background-color: #18bc9c;
    color: white;
}
#api-endpoint-control-container {
    margin-bottom: 20px;
}
#api-endpoint-control {
    margin: auto;
    display: flex;
    text-align: center;
    align-items: center;
      justify-content: center;
}
.flex-fill {
    flex: 1;
}
#api-endpoint-control-input {
    display: inline-block;
    padding: 6px 7px;
    border-radius: 3px;
    background-color: #fafafa;
    border: solid 1px #e6e6e6;
}
#api-endpoint-control > * {
    display: inline-block;
    margin-right: 5px;
}
#api-endpoint-control > *:last-child {
    margin-right: 0px;
}
#api-endpoint-control-label {
    display: inline-block;
    padding: 7px 7px;
    background-color: #3498db;
    border-radius: 3px;
    font-weight: bold;
    color: white;
}
#api-container h1 {
    text-align: center;
    margin-bottom: 30px;
}
ul.ul-desc {
    margin: 0;
    list-style-type: none;
    background-color: #fafafa;
    border: solid 1px #e6e6e6;
    padding: 10px;
    color: #5d5d5d;
}
ul.ul-desc li.headline {
    font-weight: bold;
}
table.table-desc {
    color: #5d5d5d;
    border: solid 1px #e6e6e6;
    border-radius: 3px;
    background-color: #fafafa;
    margin-top: 5px;
    border-collapse: collapse;
}
table.table-desc thead {
    text-align: left;
}
table.table-desc tbody tr:nth-child(2n+1) {
    /*background-color: #ffffff;*/
}
table.table-desc thead tr th,
table.table-desc tbody tr th,
table.table-desc tbody tr td {
    padding: 4px 10px 4px 10px;
    vertical-align: top;
}
table.table-desc thead tr th {
    padding-top: 10px;
}
table.table-desc tbody tr th {
    text-align: left;
}
table.table-desc tbody tr:last-child td {
    padding-bottom: 10px;
}
table.table-desc tbody tr td:first-child {
}
table.table-desc ul {
    padding-left: 20px;
    margin: 0;
}
table.table-desc a {
    color: rgb(33, 123, 226);
    text-decoration: none;
}
table.table-desc a:hover {
    text-decoration: underline;
}

/* LOGIN BOX */

#login-box {
    display: block;
    max-width: 300px;
    box-shadow: 0 3px 10px #00000047;
    margin: auto;
    padding: 30px;
    margin-top: 30px;
}
#login-box h1 {
    text-align: center;
}
#login-box label,
#login-box input {
    display: block;
}
#login-box label {
    font-size: 13px;
    color: #464646;
    text-transform: uppercase;
    margin-bottom: 3px;
}
#login-box input {
    width: 100%;
    padding: 6px 7px;
    border-radius: 3px;
    background-color: #fafafa;
    border: solid 1px #e6e6e6;
    margin-bottom: 8px;
}
#login-box input[type='submit'] {
    display: inline-block;
    padding: 10px 10px;
    background-color: #e53935;
    color: white;
    border-radius: 3px;
    font-weight: bold;
    border: none;
    text-transform: uppercase;
    cursor: pointer;
}
#login-box input[type='submit']:hover {
    background-color: #ca2925;
}

#login-box .login-error {
    color: #e53935;
    font-weight: bolder;
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
}