/* Color Variables */
:root {
    --red: #ff0000;
    --red-light: #ff0000;
    --red-bg: #ffd9d9;
    --red-bg-dark: #4b2424;
    --orange: #ff7700;
    --orange-light: #ff7700;
    --orange-bg: #ffdaba;
    --orange-bg-dark: #322a24;
    --yellow: #ffa900;
    --yellow-light: #ffff00;
    --yellow-bg: #fff8b8;
    --yellow-bg-dark: #363319;
    --green: #00a500;
    --green-light: #00ff00;
    --green-bg: #cfffcf;
    --green-bg-dark: #283228;
    --cyan: #00aebc;
    --cyan-light: #00aebc;
    --cyan-bg: #dcfff9;
    --cyan-bg-dark: #233f3a;
    --blue: #0000ff;
    --blue-light: #00bbff;
    --blue-light-strong: #00ffff;
    --blue-bg: #bbe3ff;
    --blue-bg-dark: #263036;
    --purple: #7d0dff;
    --purple-light: #bf89ff;
    --purple-bg: #f6efff;
    --purple-bg-dark: #241e2d;
    --pink: #f400fd;
    --pink-light: #f400fd;
    --pink-bg: #f8eaf6;
    --pink-bg-dark: #332130;
    --grey: #aaaaaa;
}

/* Animations */
@keyframes LoadingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes JSEnableDisplay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* General */
html,
body {
    font-family: "Arial", "Helvetica Neue";
    width: 100%;
    min-height: calc(100vh - 48px);
    /* occupy full screen */
    padding: 0;
    margin: 0;
}

/* text box */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
    background-color: transparent;
    padding: 2px;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--blue);
    font-size: 16px;
    height: 32px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover {
    border-bottom-color: var(--green);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
    border-bottom-color: var(--green-light);
}

.textbox-error {
    border-bottom-color: var(--red);
}

/* textarea */
textarea {
    background-color: transparent;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid var(--blue);
    outline: none;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

textarea:hover {
    border-color: var(--green);
}

textarea:focus {
    border-color: var(--green-light);
}

/* select box */
select {
    padding: 4px;
    border: 2px solid var(--blue);
    font-size: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    transition: border-color 0.3s ease-in-out;
}

/* button */
.btn {
    padding: 10px 16px;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    color: white;
    background-color: var(--blue);
    height: 36px;
    border-radius: 18px;
    text-align: center;
    cursor: pointer;
}

.btn-small {
    padding: 7px 12px;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    color: white;
    background-color: var(--blue);
    height: 30px;
    border-radius: 18px;
    text-align: center;
    cursor: pointer;
}

.btn-small-circle {
    padding: 7px 0;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    color: white;
    background-color: var(--blue);
    width: 30px;
    height: 30px;
    border-radius: 18px;
    text-align: center;
    cursor: pointer;
}

.btn i,
.btn-small i {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.btn span,
.btn-small span {
    padding-left: 2px;
    padding-right: 2px;
}

.btn.btn-red,
.btn-small.btn-red,
.btn-small-circle.btn-red {
    background-color: var(--red);
}

.btn.btn-orange,
.btn-small.btn-orange,
.btn-small-circle.btn-orange {
    background-color: var(--orange);
}

.btn.btn-green,
.btn-small.btn-green,
.btn-small-circle.btn-green {
    background-color: var(--green);
}

.btn.btn-grey,
.btn-small.btn-grey,
.btn-small-circle.btn-grey {
    background-color: var(--grey);
    cursor: default;
}

/* link */
.link {
    color: var(--blue);
}

.link:hover {
    color: var(--green);
}

/* headers */
h1 {
    font-size: 24px;
}

h2 {
    font-size: 22px;
}

.hidden {
    display: none;
}

/* tables */
table {
    border-collapse: collapse;
    width: max-content;
    min-width: 100%;
}

table tbody tr.tr-highlight {
    background-color: var(--blue-bg);
}

table tbody .obj-tr-selected,
table tbody tr.obj-tr-selected:nth-child(odd) {
    background-color: var(--orange-bg);
}

th,
td {
    padding: 6px;
}

/* color classes */
.red {
    color: var(--red);
}

.red-light {
    color: var(--red-light);
}

.orange {
    color: var(--orange);
}

.orange-light {
    color: var(--orange-light);
}

.yellow {
    color: var(--yellow);
}

.yellow-light {
    color: var(--yellow-light);
}

.green {
    color: var(--green);
}

.green-light {
    color: var(--green-light);
}

.cyan {
    color: var(--cyan);
}

.cyan-light {
    color: var(--cyan-light);
}

.blue {
    color: var(--blue);
}

.blue-light {
    color: var(--blue-light);
}

.purple {
    color: var(--blue);
}

.purple-light {
    color: var(--blue-light);
}

.pink {
    color: var(--pink);
}

.pink-light {
    color: var(--pink-light);
}

/* Login Page */
body.login-page {
    background-color: var(--blue-bg);
}

#login-box-out {
    width: 100%;
    min-height: 100vh;
    padding: 36px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#login-box {
    width: 320px;
    max-width: 98%;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 24px;
}

#login-box h1 {
    margin-top: 16px;
    margin-bottom: 16px;
}

#login-box h2,
#login-box p {
    margin-top: 0;
    margin-bottom: 16px;
}

#login-box form {
    width: 100%;
    display: inline-block;
}

#login-box .textbox {
    width: 100%;
    display: inline-block;
    margin-bottom: 16px;
}

#login-box .btn {
    display: inline-block;
    margin-bottom: 16px;
}

/* Main Page */
#header {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border-bottom: 2px solid var(--blue);
    box-sizing: border-box;
    background-color: var(--blue-bg);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    z-index: 1;
}

#header-upper {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#header-l {
    width: 256px;
}

#header-title {
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    color: var(--blue);
    text-decoration: none;
}

#header-m {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#header-m-dbinfo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 14px;
}

.header-m-text {
    font-size: 20px;
}

#header-m-arrow {
    display: none;
}

#page-title {
    font-size: 24px;
    font-weight: bold;
    color: var(--blue);
    margin-top: 0;
    margin-bottom: 0;
}

#header-r {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    column-gap: 18px;
}

#header-btn-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
}

.btn i.fa-spinner,
.btn-small i.fa-spinner {
    display: none;
}

#loading-box {
    padding: 24px 0;
    width: 100%;
    text-align: center;
    font-size: 28px;
}

#loading-box i.fa-spinner,
#loading-object-box i.fa-spinner,
.btn i.fa-spinner,
.btn-small i.fa-spinner {
    animation: LoadingRotate 1s linear 0s infinite;
}

#load-failed-box {
    padding: 24px 0;
    width: 100%;
    text-align: center;
}

#load-failed-box-top {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 12px;
    font-size: 24px;
    font-weight: bold;
    color: var(--orange);
}

#load-failed-box-icon {
    position: relative;
}

#load-failed-box-icon .fa-triangle-exclamation {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    font-size: 13px;
}

#header-db-select {
    font-size: 15px;
    padding: 3px 2px;
    margin-left: 3px;
    margin-right: 3px;
}

#header-db-select-refresh {
    display: inline-block;
}

#header-db-select-box,
#header-username {
    cursor: pointer;
}

#header-db-select-box i,
#header-username i {
    display: inline-block;
    margin-right: 3px;
}

#header-username span {
    font-size: 18px;
}

#header-options-box {
    padding: 0 12px;
    margin-top: 6px;
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    column-gap: 4px;
}

.header-option {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: background-color 0.3s ease-in-out;
}

.header-option:hover,
.header-option-current {
    background-color: white;
}

.header-option-current {
    padding: 6px 12px;
    font-weight: bold;
    cursor: default;
}

.header-option a {
    display: inline-block;
    padding: 6px 12px;
    box-sizing: border-box;
    color: black;
    text-decoration: none;
}

#main-box {
    margin-top: 48px;
    min-height: calc(100vh - 48px);
}

#main-box-l {
    position: fixed;
    top: 48px;
    left: 0;
    z-index: 1;
    width: 300px;
    height: calc(100vh - 48px);
    background-color: var(--blue-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main-box-l-top {
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
}

#main-box-l-top-u {
    width: 100%;
    margin-bottom: 2px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#main-box-l-title {
    flex-grow: 1;
    text-align: left;
    font-size: 21px;
    font-weight: bold;
    color: var(--blue);
}

#main-box-l-top-btnbox {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    column-gap: 8px;
}

#main-box-l-dbcount-box {
    font-size: 18px;
    font-weight: bold;
}

#main-box-l-dbcount-box span {
    display: inline-block;
}

#main-box-l-dbcount-infotxt {
    color: var(--green);
    display: inline-block;
    margin-left: 6px;
}

#main-box-l-bottom {
    width: 100%;
    flex-grow: 1;
    padding: 0 12px 24px;
    box-sizing: border-box;
    overflow-y: auto;
}

.main-box-l-db-header {
    width: 100%;
    min-height: 36px;
    border-radius: 18px;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    column-gap: 2px;
}

.main-box-l-db-header-arrow {
    width: 30px;
    min-height: 36px;
    padding: 4px 10px 4px 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.main-box-l-db-header-arrow:hover,
.main-box-l-db-header.current .main-box-l-db-header-arrow,
.main-box-l-db-header-r:hover,
.main-box-l-db-header.current .main-box-l-db-header-r {
    background-color: white;
}

.main-box-l-db-header-split {
    width: 1px;
    height: 100%;
    background-color: black;
}

.main-box-l-db-header-r {
    min-height: 36px;
    padding: 4px 12px 4px 6px;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.main-box-l-db-header-name {
    flex-grow: 1;
    font-size: 18px;
}

.main-box-l-db-header-edit {
    text-align: center;
    color: var(--blue);
}

.main-box-l-db-header-count {
    min-width: 24px;
    text-align: right;
    font-size: 18px;
    margin-right: 5px;
}

.main-box-l-db-header-status {
    text-align: right;
}

.main-box-l-db-header-status i.fa-circle-check {
    color: var(--green);
}

.main-box-l-db-header-status i.fa-triangle-exclamation {
    color: var(--red);
}

.main-box-l-db-header-status i.fa-clock {
    color: var(--blue);
}

.main-box-l-db-schemas {
    margin-top: 6px;
    padding-left: 24px;
    display: none;
}

.main-box-l-schema {
    width: 100%;
    padding: 4px 16px;
    min-height: 32px;
    border-radius: 18px;
    box-sizing: border-box;
    margin-top: 4px;
    margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

.main-box-l-schema-name {
    flex-grow: 1;
    font-size: 17px;
}

.main-box-l-schema-count {
    min-width: 24px;
    text-align: right;
    font-size: 17px;
}

.main-box-l-schema:hover,
.main-box-l-schema.current {
    background-color: white;
}

#main-box-m {
    padding: 8px 12px 24px;
    box-sizing: border-box;
    margin: 48px 256px 0 300px;
    min-height: calc(100vh - 48px);
}

#main-box-m-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 12px;
    column-gap: 12px;
}

#main-box-m.no-left-sidebar {
    margin-left: 0;
}

#js-enable-box {
    width: 100%;
    text-align: center;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 20px;
    font-weight: bold;
    color: var(--orange);
    opacity: 0;
    animation: JSEnableDisplay 0.5s linear 1.2s 1;
    animation-fill-mode: forwards;
}

#none-selected-box {
    width: 100%;
    padding-top: 36px;
    padding-bottom: 36px;
    font-size: 20px;
    text-align: center;
}

#none-selected-icon {
    display: inline-block;
    width: 72px;
    height: 66px;
    position: relative;
    color: var(--blue);
    margin-bottom: 16px;
}

#none-selected-icon i {
    display: block;
}

#none-selected-icon i.fa-database {
    font-size: 60px;
}

#none-selected-icon i.fa-circle-question {
    font-size: 32px;
    position: absolute;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: white;
    border: 3px solid white;
    border-radius: 50%;
    box-sizing: border-box;
}

.button-box-p {
    width: 100%;
    margin-top: 0;
    margin-bottom: 16px;
}

#main-box-r {
    position: fixed;
    top: 48px;
    right: 0;
    z-index: 1;
    padding: 8px 12px;
    box-sizing: border-box;
    width: 256px;
    height: calc(100vh - 48px);
    background-color: var(--blue-bg);
    overflow-y: auto;
}

#main-box-r-title {
    width: 100%;
    text-align: left;
    font-size: 21px;
    font-weight: bold;
    color: var(--blue);
    margin-bottom: 6px;
}

.main-box-r-link {
    width: 100%;
    padding: 4px 16px;
    min-height: 32px;
    border-radius: 18px;
    box-sizing: border-box;
    margin-bottom: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.3s ease-in-out;
}

.main-box-r-link:hover,
.main-box-r-link.current {
    background-color: white;
}

.main-box-r-link.current {
    cursor: default;
}

.main-box-r-link-icon i {
    width: 18px;
    font-size: 16px;
    text-align: center;
}

.main-box-r-link-icon i.fa-plug {
    font-size: 18px;
}

.main-box-r-link-text {
    flex-grow: 1;
}

#main-box p {
    margin-top: 0;
    margin-bottom: 16px;
}

#main-box h2 {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 16px;
}

#main-box #load-ok-box {
    margin-bottom: 16px;
}

#main-box #load-failed-box,
#main-box #load-ok-box,
#main-box #loading-object-box,
#main-box #load-object-failed-box,
#main-box #load-object-ok-box,
#main-box #main-box-f-query #loading-box {
    display: none;
}

#main-box #total-p {
    font-size: 18px;
}

#main-box #schema-import-box {
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
}

#schema-edit-api-key-input-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
}

#schema-edit-api-key {
    flex-grow: 1;
}

#main-box #db-conn-new-box,
#main-box #db-user-new-box {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: var(--green-bg);
}

#main-box #db-conn-new-inp-box {
    margin-bottom: 8px;
}

#main-box #db-user-new-inp-box {
    margin-top: 4px;
    margin-bottom: 8px;
}

#main-box #db-conn-new-inp-url {
    width: 250px;
}

#main-box #db-conn-new-inp-apikey {
    width: 500px;
}

#main-box #db-user-new-inp-username {
    width: 256px;
}

#main-box #db-user-new-inp-password,
#main-box #db-user-new-inp-password-confirm {
    width: 300px;
}

#main-box #db-user-new-errmsg,
#main-box #db-conn-new-errmsg {
    margin-top: 10px;
    margin-bottom: 4px;
}

#main-box #db-conn-count-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 24px;
    margin-bottom: 12px;
}

#main-box #db-conn-count-box #db-conn-count-box-total,
#main-box #db-conn-count-box #db-conn-count-box-health {
    font-size: 17px;
}

#main-box .db-conn-tr-current {
    background-color: var(--green-bg);
}

#main-box .db-conn-td-api-key,
#main-box .db-conn-td-modules {
    display: none;
}

#main-box .db-conn-td-count {
    width: 80px;
    text-align: center;
}

#main-box .db-conn-td-status {
    width: 105px;
    text-align: center;
}

#main-box .db-conn-td-btn {
    width: 212px;
    text-align: center;
}

#main-box .db-conn-btn-flex {
    width: 212px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#main-box .db-conn-btn-flex .btn-small {
    margin: 2px;
}

/* .user-standard #main-box .db-conn-td-btn {
    width: 160px;
    text-align: center;
} */

.user-standard #main-box .db-conn-td-btn .db-conn-btn-edit,
.user-standard #main-box .db-conn-td-btn .db-conn-btn-delete {
    display: none;
}

#main-box .schema-td-objects {
    width: 80px;
    text-align: center;
}

#main-box .schema-td-btn {
    width: 78px;
    text-align: center;
}

#main-box #add-box {
    width: 100%;
    margin-bottom: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: var(--green-bg);
    cursor: pointer;
}

#main-box #add-box.add-box-expanded {
    cursor: default;
}

#main-box #db-conn-new-box .card-title,
#main-box #db-user-new-box .card-title,
#main-box #add-box .card-title {
    font-weight: bold;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 0;
}

#main-box #db-conn-new-box .card-title,
#main-box #db-conn-new-box .card-subtitle {
    margin-bottom: 8px;
}

#main-box #add-box-bottom {
    display: none;
    margin-top: 8px;
}

#main-box #add-inputs-box {
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
}

#main-box #add-inputs-box input[name="name"] {
    width: 300px;
}

#main-box #add-inputs-box input[name="desc"] {
    flex-grow: 1;
}

#main-box #add-datacards-box {
    margin-top: 16px;
}

#main-box #add-datacards-box .card-title {
    font-size: 20px;
    margin-bottom: 12px;
}

#main-box #add-datacards-box .add-datacard {
    width: 100%;
    padding: 10px 14px;
    box-sizing: border-box;
    background-color: var(--blue-bg);
    border-radius: 12px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
}

#main-box #add-datacards-box .add-datacard input[name="name"] {
    width: 200px;
}

#main-box #add-datacards-box .add-datacard select[name="type"] {
    width: 160px;
}

#main-box #add-datacards-box .add-datacard input[name="desc"] {
    flex-grow: 1;
}

#main-box #add-datacards-box .add-datacard .del-btn-box {
    width: 50px;
    text-align: right;
}

#main-box #add-bottombtn-box {
    margin-top: 24px;
    margin-bottom: 8px;
}

#main-box #add-error-msg {
    margin-bottom: 8px;
}

#main-box .total-div {
    width: 100%;
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 24px;
}

#main-box .total-div .total-div-innerbox {
    display: inline-block;
}

#main-box #item-cards-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    column-gap: 12px;
}

#main-box .item-card {
    width: calc(50% - 8px);
    margin-bottom: 16px;
    padding: 12px 16px;
    box-sizing: border-box;
    border-radius: 16px;
    background-color: var(--blue-bg);
}

#main-box .item-card .card-title {
    font-weight: bold;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 8px;
}

#main-box .item-card .card-desc {
    margin-top: 0;
    margin-bottom: 10px;
}

#main-box .item-card .item-card-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

#main-box .item-card .item-card-top-left {
    flex-grow: 1;
}

#main-box .item-card .item-card-top-right {
    width: 120px;
    text-align: right;
}

#main-box #object-top-total-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 36px;
    font-size: 18px;
    margin-top: 8px;
    margin-bottom: 16px;
}

#main-box #object-top-add-btns {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 24px;
    margin-bottom: 16px;
}

#main-box #choose-paging-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 12px;
}

#main-box #choose-paging-box-query {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 16px;
}

#main-box #choose-paging-input,
#main-box #object-page-input {
    width: 50px;
    text-align: center;
}

#main-box #object-data-json {
    display: none;
}

#main-box #object-filter-box {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 12px;
    background-color: var(--blue-bg);
    margin-bottom: 16px;
}

#main-box #object-filter-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue);
}

#main-box .object-filter-out {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
}

#main-box #object-filter-search-out {
    margin-bottom: 16px;
}

#main-box #object-filter-col-control {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    row-gap: 24px;
    column-gap: 12px;
}

#main-box .object-filter-aspect {
    width: 150px;
    text-align: left;
    font-weight: bold;
    font-size: 17px;
}

#main-box .object-filter-control {
    flex-grow: 1;
}

#main-box #object-filter-keyword-input {
    width: 100%;
}

#main-box .object-filter-actions {
    width: 150px;
    text-align: right;
}

#main-box #object-table-top {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 36px;
    margin-bottom: 16px;
}

#main-box #object-table-box {
    margin-bottom: 16px;
    overflow-x: auto;
}

#main-box #object-selected-count {
    display: inline-block;
    margin-left: 24px;
}

#main-box #object-page-select-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 6px;
}

#main-box #object-sort-box {
    /* kept but hidden due to historical reasons */
    /* it can still store sorting variables */
    display: none;
}

#edit-popup-shadow {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #aaaaaaaa;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#edit-popup {
    width: 800px;
    max-width: 95%;
    max-height: 95%;
    background-color: var(--blue-bg);
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

#edit-popup .edit-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

#edit-popup #edit-popup-title {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: var(--blue);
    margin-top: 0;
    margin-bottom: 16px;
}

#edit-popup .edit-box-out {
    display: none;
}

#edit-popup .edit-box .edit-property-name-box {
    width: 160px;
}

#edit-popup .edit-box .edit-property-name {
    font-size: 17px;
}

#edit-popup .edit-box .edit-property-type {
    font-size: 16px;
}

#edit-popup .edit-box .edit-input {
    flex-grow: 1;
}

#edit-popup .edit-box .edit-input textarea {
    width: 100%;
    min-height: 75px;
    resize: vertical;
}

#edit-popup .edit-box .edit-input .edit-input-field[type="checkbox"],
#main-box .obj-batch-del-checkbox {
    width: 20px;
    height: 20px;
}

#edit-popup #edit-box-bulkimport-input {
    width: 100%;
    height: 150px;
    min-height: 150px;
    resize: vertical;
    margin-bottom: 16px;
}

#edit-popup .object-clone-select {
    min-width: 300px;
}

#edit-popup #object-clone-keep-id {
    width: 20px;
    height: 20px;
}

#edit-popup #edit-popup-btn-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 6px;
    margin-top: 12px;
}

#edit-popup #db-conn-edit-url,
#edit-popup #db-conn-edit-api-key,
#edit-popup #db-conn-edit-name,
#edit-popup #user-pass-reset-password,
#edit-popup #user-pass-reset-password-confirm {
    width: 100%;
}

#main-box .obj-th-sort {
    cursor: pointer;
}

#main-box .obj-th-sort-in {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#main-box .obj-th-sort-txt {
    flex-grow: 1;
}

#main-box .obj-th-sort-arrows {
    width: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#main-box .obj-th-sort-arrows i {
    display: inline-block;
    line-height: 8px;
    font-size: 18px;
    color: var(--grey);
}

#main-box .obj-th-sort-arrows i.current {
    color: var(--blue);
}

#main-box .obj-td-created,
#main-box .obj-td-updated {
    width: 135px;
    text-align: center;
}

#main-box .obj-td-batch-del {
    width: 30px;
    text-align: center;
}

#main-box .obj-td-btn, .user-td-btn {
    width: 120px;
    text-align: center;
}

#main-box .td-btn-in {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
}

#main-box .object-edit-done-btn,
#main-box .object-edit-cancel-btn,
#main-box .user-edit-done-btn,
#main-box .user-edit-cancel-btn {
    display: none;
}

#main-box .user-connection-url {
    font-size: 15px;
}

#main-box .user-td-schema-p,
#main-box .db-clone-schema-p {
    margin-top: 4px;
    margin-bottom: 4px;
}

#main-box .user-td-schema-p label,
#main-box .db-clone-schema-p label {
    padding-left: 6px;
}

#main-box .backup-clone-success-count-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    column-gap: 24px;
    margin-bottom: 12px;
}

#main-box .backup-clone-success-count-box span {
    display: inline-block;
}

#main-box .obj-property-input {
    min-height: 75px;
    max-width: 500px;
    overflow-wrap: break-word;
}

#main-box #query-input {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: 256px;
    min-height: 150px;
    margin-bottom: 16px;
    resize: vertical;
}

#main-box #restore-ul-info,
#main-box #db-clone-info {
    margin-top: 16px;
    margin-bottom: 16px;
}

#main-box #db-clone-direction-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 16px;
    margin-bottom: 16px;
}

#main-box #db-clone-direction-box .db-clone-direction-select {
    width: 250px;
}

#main-box #db-clone-direction-box .fa-arrow-right {
    font-size: 24px;
}

#main-box #load-clone-db-failed-box,
#main-box #load-clone-db-ok-box,
#main-box #loading-clone-schema-box,
#main-box #load-clone-schema-ok-box,
#main-box #load-clone-schema-failed-box {
    display: none;
}

#main-box #db-clone-schema-select-box {
    margin-bottom: 16px;
}

#main-box #change-password-form {
    width: 400px;
    max-width: 100%;
    margin-bottom: 16px;
}

#main-box #change-password-form input {
    width: 100%;
    margin-bottom: 1em;
}

#main-box #api-doc-schema-select-box {
    margin-bottom: 16px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 32px;
}

#main-box #api-doc-schema-select {
    min-width: 300px;
}

#main-box #api-doc-key-disp {
    display: inline-block;
    border-bottom: none;
    min-width: 320px;
}

#main-box #api-doc-box-ok {
    display: none;
}

#main-box .api-doc-box {
    width: 100%;
    border-width: 2px;
    border-style: solid;
    border-radius: 12px;
    box-sizing: border-box;
    margin-bottom: 12px;
    overflow: hidden;
}

#main-box .api-doc-box-header {
    width: 100%;
    min-height: 38px;
    padding: 2px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 16px;
    cursor: pointer;
}

#main-box .api-doc-box-header-l {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

#main-box .api-doc-box-header-r {
    width: 24px;
    font-size: 22px;
    text-align: right;
}

#main-box .api-doc-header-req-type {
    font-size: 20px;
    font-weight: bold;
    width: 90px;
    text-align: center;
}

#main-box .api-doc-header-req-sep {
    width: 2px;
    height: 100%;
}

#main-box .api-doc-header-req-url {
    font-size: 17px;
    padding-left: 8px;
}

#main-box .api-doc-box-tryout {
    margin-bottom: 16px;
}

#main-box .api-doc-box-content {
    width: 100%;
    display: none;
    box-sizing: border-box;
    border-top-width: 2px;
    border-top-style: solid;
}

#main-box .api-doc-box-tryout {
    display: none;
    padding: 12px 12px 16px;
    background-color: var(--blue-bg);
}

#main-box .api-doc-box-info {
    padding: 12px 12px 0;
}

#main-box .api-doc-basic-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    column-gap: 24px;
}

#main-box .api-doc-basic-info-l {
    flex-grow: 1;
}

#main-box .api-doc-box-tryout .api-doc-tryout-textarea {
    width: 100%;
    margin-bottom: 16px;
    height: 40px;
    min-height: 40px;
    resize: vertical;
}

#main-box .api-doc-box-tryout .api-doc-tryout-header {
    height: 100px;
}

#main-box .api-doc-box-tryout .api-doc-tryout-body {
    height: 300px;
}

#main-box .api-doc-box-tryout .api-doc-curl-preview,
#main-box .api-doc-box-tryout .api-doc-tryout-response {
    display: none;
}

#main-box .api-doc-box-tryout .api-doc-tryout-btnbox {
    width: 100%;
    text-align: center;
    margin-bottom: 16px;
}

#main-box .api-doc-box-content .api-doc-title {
    font-weight: bold;
    color: var(--blue);
    font-size: 18px;
    margin-bottom: 8px;
}

#main-box .api-doc-box-content table {
    margin-bottom: 8px;
}

#main-box .api-doc-box-content table th,
#main-box .api-doc-box-content table td {
    padding: 0 0 8px;
    text-align: left;
}

#main-box .api-doc-box-content table .api-doc-tr-header-key {
    width: 150px;
}

#main-box .api-doc-box-content .api-doc-p-small {
    margin-bottom: 12px;
}

#main-box .api-doc-box-content .api-doc-command,
#main-box .api-doc-box-content .api-doc-httpheader,
#main-box .api-doc-box-content .api-doc-json {
    font-size: 14px;
    font-family: 'Source Code Pro', 'Consolas', 'monospace', 'Courier New';
    background-color: #ededed;
    padding: 8px 12px;
    margin-top: 0;
    margin-bottom: 16px;
}

#main-box .api-doc-box-content .api-doc-json {
    white-space: pre;
    overflow-x: auto;

    .string {
        color: maroon;
    }
    .number {
        color: black;
    }
    .boolean,
    .null {
        color: blue;
    }
    .key {
        color: teal;
    }
}

#main-box .api-doc-box-content .api-doc-command {
    white-space: pre-wrap;

    .shell-command {
        color: darkgoldenrod;
    }
    .shell-flag {
        color: blue;
    }
    .shell-url,
    .shell-http-method,
    .shell-string {
        color: brown;
    }
}

#main-box .api-doc-box-content .api-doc-httpheader {
    white-space: pre-wrap;

    .http-version {
        color: blue;
    }
    .http-status,
    .http-header-key {
        color: teal;
    }
}

#main-box .api-doc-box-content .api-doc-res-tab-select-box {
    margin-bottom: 12px;
}

#main-box .api-doc-box-content .api-doc-res-tab-select {
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: transparent;
    padding: 4px 12px 7px;
    box-sizing: border-box;
    cursor: pointer;
}

#main-box .api-doc-box-content .api-doc-res-tab-select-current,
#main-box .api-doc-box-content .api-doc-res-tab-select:hover {
    font-weight: bold;
}

#main-box .api-doc-box-content .api-doc-res-tab-select-current {
    cursor: default;
}

#main-box .api-doc-box-content .api-doc-res-tab {
    margin-bottom: 16px;
}

/* Color for each HTTP Status Code */
/* 2XX: green */
/* 4XX: orange */
/* 5XX: red */

#main-box .api-doc-box-content .api-doc-res-tab-select-2 {
    color: var(--green);
}

#main-box .api-doc-box-content .api-doc-res-tab-select-2.api-doc-res-tab-select:hover,
#main-box .api-doc-box-content .api-doc-res-tab-select-2.api-doc-res-tab-select-current {
    border-bottom-color: var(--green);
}

#main-box .api-doc-box-content .api-doc-res-tab-select-4 {
    color: var(--orange);
}

#main-box .api-doc-box-content .api-doc-res-tab-select-4.api-doc-res-tab-select:hover,
#main-box .api-doc-box-content .api-doc-res-tab-select-4.api-doc-res-tab-select-current {
    border-bottom-color: var(--orange);
}

#main-box .api-doc-box-content .api-doc-res-tab-select-5 {
    color: var(--red);
}

#main-box .api-doc-box-content .api-doc-res-tab-select-5.api-doc-res-tab-select:hover,
#main-box .api-doc-box-content .api-doc-res-tab-select-5.api-doc-res-tab-select-current {
    border-bottom-color: var(--red);
}

/* Color for each Request Type */
/* GET:    blue */
/* POST:   green */
/* DELETE: red */

#main-box .api-doc-box-get {
    border-color: var(--blue);
}

#main-box .api-doc-box-get .api-doc-box-header {
    background-color: var(--blue-bg);
}

#main-box .api-doc-box-get .api-doc-header-req-type {
    color: var(--blue);
}

#main-box .api-doc-box-get .api-doc-header-req-sep {
    background-color: var(--blue);
}

#main-box .api-doc-box-get .api-doc-box-content {
    border-top-color: var(--blue);
}

#main-box .api-doc-box-post {
    border-color: var(--green);
}

#main-box .api-doc-box-post .api-doc-box-header {
    background-color: var(--green-bg);
}

#main-box .api-doc-box-post .api-doc-header-req-type {
    color: var(--green);
}

#main-box .api-doc-box-post .api-doc-header-req-sep {
    background-color: var(--green);
}

#main-box .api-doc-box-post .api-doc-box-content {
    border-top-color: var(--green);
}

#main-box .api-doc-box-delete {
    border-color: var(--red);
}

#main-box .api-doc-box-delete .api-doc-box-header {
    background-color: var(--red-bg);
}

#main-box .api-doc-box-delete .api-doc-header-req-type {
    color: var(--red);
}

#main-box .api-doc-box-delete .api-doc-header-req-sep {
    background-color: var(--red);
}

#main-box .api-doc-box-delete .api-doc-box-content {
    border-top-color: var(--red);
}