.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8000px;
    background-repeat: none;
    background-image: url(/img/top_0808.jpg);
    z-index: 9999999;
    pointer-events: none;
    opacity: 0.2;
}

:root {
	--text-color: #333333;
	--bg-color: #FFFFFF;

    --space-color: #0E3FBD;
    --space-logo-color: #0B318F;

    --bg: #f5f9fb;
    --form-bg: #eceef4;
    --text: #131820;
    --space-text: #0b318e;
    --space-display: #0e3fbd;
    --secondary: #868686;
    --gray: #575757;
    --white: #ffffff;
    --red: #dc3545;
    --green: #198754;
    --space-500: #d0d9ef;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus {
    outline: 4px solid rgba(0,125,250,0.6);
    outline-offset: 1px;
}

body {
    margin: 0;
    color: var(--text);
    background-color: var(--bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    position: relative;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
}

.tooltip {
  position: absolute;
  z-index: 1080;
  display: block;
  margin: 0;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 12px;
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: 0.7;
}
/*.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}*/

.bs-tooltip-top, .bs-tooltip-auto[data-popper-placement^=top] {
  padding: 0.4rem 0;
}
/*.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: 0.4rem 0.4rem 0;
  border-top-color: #000;
}*/

.bs-tooltip-end, .bs-tooltip-auto[data-popper-placement^=right] {
  padding: 0 0.4rem;
}
/*.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: 0;
  width: 0.4rem;
  height: 0.8rem;
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: 0.4rem 0.4rem 0.4rem 0;
  border-right-color: #000;
}*/

.bs-tooltip-bottom, .bs-tooltip-auto[data-popper-placement^=bottom] {
  padding: 0.4rem 0;
}
/*.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 0.4rem 0.4rem;
  border-bottom-color: #000;
}*/

.bs-tooltip-start, .bs-tooltip-auto[data-popper-placement^=left] {
  padding: 0 0.4rem;
}
/*.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: 0;
  width: 0.4rem;
  height: 0.8rem;
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: 0.4rem 0 0.4rem 0.4rem;
  border-left-color: #000;
}*/

.tooltip-inner {
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 0.25rem;
}

.space-admin-wrap {
    min-height: 100vh;
    display: grid;
    /*
    grid-template-columns: clamp(250px, 22vw, 340px) 1fr;
    */
    grid-template-columns: clamp(250px, 22vw, 350px) clamp(300px, 78vw, 2000px);
}

main {
    /*max-height: 100vh;
    overflow-y: auto;*/
    padding-top: 40px;
    padding-bottom: 40px;
}

.space-admin-wrap header {
    background: var(--white);
    box-shadow: 0 0 200px rgb(0 0 0 / 3%);
    --header-pad: 44px;
    padding-top: var(--header-pad);
    padding-bottom: var(--header-pad);
    /*max-height: 100vh;
    overflow-y: auto;*/
}

a.header-logo {
    padding-left: var(--header-pad);
    padding-right: var(--header-pad);
    display: block;
    margin-bottom: 10px;
}

.header-logo img {
    height: 62px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

.header-title {
    color: var(--space-text);
    font-size: 16px;
    padding-left: var(--header-pad);
    padding-right: var(--header-pad);
    letter-spacing: 1px;
}

.header-nav {
    margin-top: 30px;
}

.header-nav ul {
    list-style-type: none;
}

.header-nav .nav-link {
    padding-left: var(--header-pad);
    padding-right: var(--header-pad);
    display: grid;
    align-items: center;
    justify-content: flex-start;
    height: 59px;
    color: var(--secondary);
    font-weight: bold;
    font-size: 15px;
    grid-template-columns: 44px 1fr 25px;
    line-height: 1.4;
}

.nav-link .nav-text > span {
    display: inline-block;
}

.header-nav .nav-link.active {
    --nav-bw: 5px;
    border-left: var(--nav-bw) solid var(--space-display);
    color: var(--text);
    background: var(--bg);
    padding-left: calc(var(--header-pad) - var(--nav-bw));
}

.header-nav .nav-link:hover {
    color: var(--text);
}

.header-nav .nav-link:hover .nav-icon, .header-nav .nav-link.active .nav-icon {
    color: var(--space-display);
}

.header-nav .nav-link .nav-icon {
    font-size: 18px;
}

.header-nav li {
    margin-bottom: 0;
}

.space-logo {
    max-width: 80px;
    display: block;
    color: var(--secondary) !important;
    line-height: 2;
    margin: 0 auto 13px;
    width: 50%;
    font-size: 11px;
    text-align: center;
}

.header-nav h3.space-subtitle {
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--space-logo-color);
    margin-bottom: 5px;
}

.space-subtitle picture {
    width: 88px;
    display: block;
    margin: 10px auto 0;
    max-width: 90%;
}

.header-nav span.unread {
    line-height: 1;
    display: grid;
    place-content: center;
    font-size: 14px;
    background: #daddde;
    color: #565656;
    color: var(--space-color);
    padding: 3px 0;
    border-radius: 10px;
}

.header-nav .nav-link:hover span.unread, .header-nav .nav-link.active span.unread {
    background: var(--space-500);
    color: var(--space-color);
}

.loginform main {
    min-height: 100vh;
    display: grid;
    place-content: center;
    min-height: 80vh;
    overflow: visible;
}



@media (max-width: 992px) {

    .space-admin-wrap {
        grid-template-columns: 100%;
    }

    main {
        max-height: none;
        min-height: 100vh;
    }

    .space-admin-wrap header {
        position: fixed;
        z-index: 999;
        --margin: 30px;
        bottom: var(--margin);
        right: var(--margin);
        top: auto;
        left: auto;
        width: 80px;
        height: 80px;
        overflow: hidden;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 20px 200px 10px rgba(0,0,0,0.3), 0 5px 11px rgba(0,0,0,0.1);
        transition: 0.3s;
        cursor: pointer;
    }

    .space-admin-wrap header:not(.header-active):hover {
        transform: scale(0.9);
    }

    a.header-logo {
        padding-left: 17px;
        padding-right: 0px;
        margin-top: 10px;
        width: 350px;
        transition: 0.3s;
    }

    a.header-logo:focus {
        outline: none !important;
    }

    .space-admin-wrap header.header-active {
        height: 100vh;
        border-radius: 8px;
        width: 100vw;
        bottom: auto;
        right: auto;
        overflow-y: auto;
        bottom: var(--margin);
        right: var(--margin);
        height: calc(100vh - var(--margin) - var(--margin));
        width: calc(100vw - var(--margin) - var(--margin));
    }

    header.header-active a.header-logo {
        padding-left: var(--header-pad);
        padding-right: var(--header-pad);
        width: 100%;
        margin-top: 36px;
    }

}

label[for] {
    cursor: pointer;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.7);
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-content: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
}

.modal.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    width: 480px;
    max-width: 80%;
    background: var(--white);
    border: 2px solid #eee;
    box-shadow: 3px 23px 170px rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 32px 25px;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

p.modal-warning {
    font-size: 12px;
    color: #848484;
    margin-bottom: 22px;
}

p.form-caption {
    color: #797979;
    font-size: 13px;
    margin-top: -10px;
    margin-bottom: 10px;
    margin-left: 160px;
}

textarea {
    resize: vertical;
    min-height: 200px;
    line-height: 1.6;
}

input[readonly], input[readonly]:focus, input[readonly]:hover, textarea[readonly], textarea[readonly]:focus, textarea[readonly]:hover {
    background: #eee;
    box-shadow: none;
    border-color: #d1d1d1;
    cursor: not-allowed;
}

label {
    margin-bottom: 5px;
}

a.modal-open {
    margin-top: 0;
    display: inline-block;
    margin-bottom: 30px;
}

.space-admin-wrap.loginform {
    display: grid;
    grid-template-columns: 100%;
    place-content: center;
    min-height: 80vh;
}

.loginform .container {
    max-width: 420px;
}

.loginform .form {
    background: var(--white);
    padding: 60px 65px;
    /* border: 2px solid #f7f7f7; */
    border-radius: 8px;
    box-shadow: 2px 80px 180px 30px rgb(0 0 30 / 5%), 0px 5px 10px -2px rgb(0 0 30 / 5%);
    margin-bottom: 30px;
}

.input .error-message {
    color: var(--red);
    margin-bottom: 10px;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    margin-top: 4px;
}

.content {
    background: var(--white);
    box-shadow: 2px 40px 60px 10px rgb(0 26 95 / 7%), 0px 5px 10px -2px rgb(0 26 95 / 10%);
    border-radius: 8px;
    padding: 30px 45px;
    margin-bottom: 20px;
}

.content.content-index, .content.index {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.container {
    max-width: 1300px;
    width: 95%;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        width:  98%;
    }
}

.actions-wrap {
    display: block;
    margin: 0;
}

/*.actions-wrap > .column, .actions-wrap > .column-responsive {
    padding: 0;
}*/

.actions-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    margin-bottom: 20px;
    justify-content: space-between;
    font-size: 18px;
}

.actions-wrap .heading {
    display: none;
}

/*.actions-wrap .side-nav > * {
    margin-right: 25px;
    padding: 0;
    line-height: 1;
}*/

.actions-wrap .actions { 
    font-size: 22px;
}

.content-wrap {
    max-width: 100%;
}

.header-nav p.copyright {
    text-align: center;
    font-size: 12px;
    color: #7d7d7d;
}

i.ph-envelope-simple.metakey-icon {
    vertical-align: sub;
    font-size: 1.3em;
    color: var(--secondary);
    margin-right: 8px;
}

.input select[multiple] {
    min-height: 180px;
}

.admin-2col-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
    grid-gap: 0 20px;
}

h1 {
    font-weight: bold;
    font-size: 25px;
    color: var(--secondary);
}

.side-nav .actions {
    font-size: 23px;
}

.table-responsive {
    margin-bottom: 0;
    margin-left: -40px;
    margin-right: -40px;
    width: auto;

    --pad: calc(5% + 25px);
    --pad: calc(5% + -4px);
    margin-left: calc(var(--pad) * -1);
    margin-right: calc(var(--pad) * -1);
    width: calc(100% + var(--pad) + var(--pad));

    /*margin-left: 0;
    margin-right: 0;
    width: 100%;*/
}

.table-responsive.accounts-table{
    overflow-x: initial;
}

table {
    border-spacing: 0 20px;
    padding: 10px 40px 80px;
    padding: 10px var(--pad) 80px;
    /*padding: 10px 0 80px;*/
}

td, th {
    border: 0;
    padding: 22px 8px;
    line-height: 1.5;
    word-break: keep-all;
    font-size: 14px;
}

th {
    padding: 0 8px;
    line-height: 1;
    font-size: 0.9em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary);
}

td:first-child, th:first-child {
    padding-left: 30px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

td:last-child, th:last-child {
    padding-right: 30px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

tbody tr {
    box-shadow: 2px 20px 30px 12px rgb(0 26 95 / 4%), 0px 4px 5px -2px rgb(0 26 95 / 7%);
    background: var(--white);
    border-radius: 8px;
}

.paginator {
    text-align: center;
    margin-top: -70px;
}

.paginator p {
    font-size: 12px;
    color: var(--secondary);
}

.index-status {
    font-weight: bold;
    font-size: 12px;
    color: var(--secondary);
}

.index-status.status-red {
    color: var(--red);
}

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

.index-title {
    font-weight: bold;
    color: var(--space-color);
    display: block;
}

.index-date {
    font-size: 12px;
    color: #6b6b6b;
}

th, th > a {
    color: #8e8e8e;
}

th > a {
    border-bottom: 2px dotted #c5cde0;
}

th > a.asc, th > a.desc {
    color: #525252;
}

tr.index-link {
    cursor: pointer;
    transition: 0.2s;
}

tr.index-link:hover {transform: scale(0.99);}

.change-status-contact:hover {
    text-decoration: line-through;
}

.message {
    cursor: pointer;
    position: fixed;
    opacity: 0.9;
    background: rgb(14 63 189 / 29%);
    color: var(--space-logo-color);
    border: 2px solid rgba(255,255,255,0.1) !important;
    font-weight: bold;
    padding: 12px 52px;
    max-width: 80%;
    border-radius: 8px;
    top: 8vh;
    font-size: 16px;
    backdrop-filter: blur(12px);
    left: 50%;
    transform: translate(-50%,0);
    box-shadow: 0 20px 60px 9px rgb(0 0 0 / 5%), 0 3px 4px -1px rgb(0 0 0 / 10%);
    transition: 0.2s;
    z-index: 99999;
}

.message.hidden {
    display: block;
    opacity: 0;
    pointer-events: none;
}

.message.success {
    background: rgb(25 135 84 / 23%);
    color: var(--green);
}

.message.error {
    background: rgb(220 53 69 / 32%);
    color: var(--red);
}

.loginform form, .loginform input[type=submit] {
    margin-bottom: 0;
}

.loginform input[type=submit] {
    display: block;
    width: 100%;
    font-size: 13px;
}

.loginform fieldset {
    margin-bottom: 0;
}

.loginform .form > h3 {
    font-size: 19px;
    color: var(--space-color);
    text-align: center;
    letter-spacing: 0.5px;
    margin-top: 16px;
}

.login-go-site {
    text-align: center;
}

.loginform input[type=text], .loginform input[type=password] {
    text-align: center;
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    box-shadow: 14px 20px 30px #0e3fbd26, 0 2px 4px #0427823b;
    /*border-radius: 14px;*/
    transition: 0.1s;
}

.button.button-outline, button.button-outline, input[type='button'].button-outline, input[type='reset'].button-outline, input[type='submit'].button-outline {
    box-shadow: 10px 10px 30px #577ee424, 0 2px 4px #536aa726, 7px 7px 21px #0e3fbd0d inset;
}

.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover {
    transform: scale(0.98);
}

footer .site-logo {
    width: 230px;
    font-size: 13px;
    color: var(--secondary);
    margin: 0 auto;
    text-align: center;
}

footer .site-logo h3.space-subtitle {
    font-size: 17px;
    color: var(--space-color);
    margin-bottom: 10px;
}

footer .site-logo a.space-logo svg {
    width: 160px;
    width: 100%;
}

footer {
    height: 20vh;
    display: flex;
    align-items: center;
}

footer .site-logo p.copyright {
    margin-bottom: 0;
}

a.inlineflex {
    display: inline-flex;
    align-items: center;
}

a.inlineflex > i {
    margin-right: 5px;
}

h2.content-title {
    margin-bottom: 5px;
    font-size: 25px;
    color: var(--space-color);
    font-weight: bold;
}

.content-date {
    font-size: 16px;
    color: #777777;
}

.content-wrap table, .admin-home-wrap table {
    padding: 0;
    border-spacing: 0;
    margin-top: 20px;
}

.content-wrap tbody tr, .admin-home-wrap tbody tr {
    box-shadow: none;
}

.content-wrap td:first-child, .content-wrap th:first-child, .admin-home-wrap td:first-child, .admin-home-wrap th:first-child {
    padding-left: 0;
}

.content-wrap td, .content-wrap th, .admin-home-wrap td, .admin-home-wrap th {
    padding: 10px 30px 10px 0px;
    border-bottom: 2px solid #eee;
    border-radius: 0;
    word-break: break-all;
    white-space: normal;
}

.content-wrap .index-status, .admin-home-wrap .index-status {
    font-size: inherit;
}

.content-wrap th, .admin-home-wrap th {
    max-width: 20%;
    width: 160px;
    word-break: break-all;
    white-space: normal;
    line-height: 1.3;
}

.content-value img {
    height: 240px;
}

td > p, .content-view p {
    margin-bottom: 0;
    line-height: 1.75;
}

td > p + p, .content-view p + p {
    margin-top: 5px;
}

.content-wrap tr:last-child td, .content-wrap tr:last-child th {
    border-bottom: 0;
}

.content-wrap fieldset legend {
    color: var(--space-color);
    font-size: 25px;
    margin-bottom: 29px;
    font-weight: normal;
}

.content-wrap fieldset .input {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    margin: 20px 0;
    position: relative;
}

.input .input-count {
    position: absolute;
    right: 10px;
    top: 8px;
    color: var(--secondary);
    font-size: 15px;
}

.input .input-count.danger, .index-date.danger {
    color: var(--red);
}

.content-wrap .input.checkbox {
    padding-left: 160px;
    grid-template-columns: auto;
    margin-top: 0px;
}

.content-wrap form [type=submit], .content-wrap form .button {
    margin-left: 160px;
}

.content-wrap form [type=submit] {
    font-size: 14px;
    padding: 0 40px;
    letter-spacing: 1px;
    margin: 60px auto 0;
    display: block;
}

.content-wrap fieldset {
    margin-bottom: 30px;
}

.content-wrap label {
    margin-bottom: 0;
}

.content-wrap fieldset input, .content-wrap fieldset select, .content-wrap fieldset textarea {
    margin-bottom: 0;
}

.content-wrap fieldset [maxlength], .content-wrap fieldset select[maxlength], .content-wrap fieldset textarea[maxlength] {
    padding-right: 33px;
}

.content-wrap tbody tr:hover, .content-wrap .content-row:hover {
    background: #f5f5f5;
}

.content-view {
    padding: 0;
    border-spacing: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

.content-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    border-bottom: 2px solid #eee;
    align-items: center;
}

.content-view .content-label, .content-view .content-value {
    margin: 0;
    padding: 10px 0px;
    word-break: break-all;
}

.content-view .content-row:last-child {
    border-bottom: 0;
}

.content-view .content-label {
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--secondary);
    color: #8e8e8e;
    font-weight: bold;
    font-size: 15px;
}

ul.breadcrumbs-trail {
    list-style-type: none;
    display: flex;
    align-items: center;
    line-height: 1;
    margin: 0;
}

ul.breadcrumbs-trail li {
    margin: 0;
    font-size: 16px;
}

.breadcrumbs-trail i {
    font-size: 0.9em;
    margin: 2px 3px;
}

.content-index-head {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.content-index-head h3 {
    margin: 0;
}

.content-index-head .button {
    margin: 0;
}

.singleinfo-row td.category {
    font-weight: bold;
    color: var(--secondary);
    font-size: 14px;
}

.singleinfo-row .index-date {
    font-size: 14px;
    color: var(--text);
}

.singleinfo-row .index-date.danger {
    color: var(--red);
}

.content-index td.actions, .content.index td.actions, .navigator-actions {
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
    word-break: keep-all;
}

.content-index td.actions i, .content.index td.actions i, .navigator-actions i {
    font-size: 19px;
    vertical-align: middle;
}

.content-index td.actions a, .content.index td.actions a, .navigator-actions a {
    line-height: 1;
    padding: 0;
    margin-left: 13px;
}

.singleinfo-row .index-title {
    word-break: normal;
    white-space: normal;
    min-width: 240px;
}

.input .radios {
    grid-column: 2 / 3;
    display: flex;
}

.input.radio label, .input.checkbox label {
    margin-right: 30px;
}

.news-form-invisible {
    display: none;
}

.error-message ul li {
    margin-bottom: 1px;
}

img.upload-img {
    height: 170px;
    margin-left: 160px;
    background: #eee;
    padding: 30px;
}

.input + img.upload-img {
    margin-top: -10px;
}

/*.input.file input[type=file] {
    display: none;
}

.input.file label.img-drag-input {
    background: var(--bg);
    border: 3px solid #d3dde2;
    color: var(--secondary);
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
    width: 220px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    box-shadow: 2px 20px 30px 12px rgb(0 26 95 / 4%), 0px 4px 5px -2px rgb(0 26 95 / 7%);
}

.input.file label.img-drag-input:before {
    content: "クリックで選択\Aまたはファイルをドラッグ";
    white-space: pre;
    display: flex;
}

.input.file label.img-drag-input:hover, .input.file.dragon label.img-drag-input {
    box-shadow: 10px 10px 30px #577ee424, 0 2px 4px #536aa726, 7px 7px 21px #0e3fbd0d inset;
}

.input.file label.img-drag-input:hover.img-drag-input:before {
    content: "クリックで選択";
}

.input.file label.img-drag-input:hover {
    color: var(--space-color);
}

.input.file.dragon label.img-drag-input {
    border: 3px dashed var(--space-color);
    color: var(--space-color);
}

.input.file.dragon label.img-drag-input:before {
    content: "ファイルをドラッグ";
}*/

.content-value img.upload-img {
    margin-left: 0;
    padding: 0;
    margin-right: 10px;
}

.ql-wrapper {
    margin-top: 40px;
    /*box-shadow: 2px 20px 30px 12px rgb(0 26 95 / 4%), 0px 4px 5px -2px rgb(0 26 95 / 7%);*/
    /*margin-left: 160px;*/
}

.ql-toolbar.ql-snow {
    background: var(--bg);
    display: flex;
    justify-content: space-between;
    justify-content: center;
    border: 1px solid #d1d1d1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    background: var(--white);
    margin-right: 4px;
    margin-bottom: 0;
    box-shadow: 6px 9px 17px #0e3fbd17, 0 2px 4px #0427821f;
}

.ql-snow .ql-picker {
    background: var(--white);
    box-shadow: 6px 9px 17px #0e3fbd17, 0 2px 4px #0427821f;
}

.ql-container.ql-snow {
    border: 1px solid #d1d1d1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ql-editor:focus, div#editor:focus {
    outline: none;
}

.ql-editor {
    line-height:1.75;
    padding-top: 20px;
    padding-bottom: 20px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 9px;
}

@media (max-width: 992px) {
    .ql-wrapper {
        margin-left: 0;
    }
}

.content-value.content-value-body {
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg);
    margin: 20px 0;
    padding: 20px;
}

.content-wrap fieldset select, .content-wrap fieldset input[type=date] {
    width: 180px;
    max-width: 100%;
}

.navigators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
    grid-gap: 20px;
    padding-bottom: 110px;
    padding-top: 30px;
}

.navigators-grid .navigator {
    background: var(--white);
    box-shadow: 2px 40px 60px 10px rgb(0 26 95 / 7%), 0px 5px 10px -2px rgb(0 26 95 / 10%);
    border-radius: 8px;
    padding: 25px 25px 20px;
    text-align: center;
    display: block;
}

.navigators-grid .navigator-face img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 50%;
}

.navigators-grid .navigator-name {
    font-size: 18px;
    margin: 7px 0 0;
    color: var(--space-color);
    font-weight: bold;
    display: block;
}

.navigators-grid .navigator-isvisible {
    margin-bottom: 6px;
}

.navigator-actions {
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
    margin-top: 13px;
    display: flex;
    justify-content: center;
}

.navigator-actions a {
    margin: 0 11%;
    color: var(--secondary);
}

.navigator-actions a:hover {
    color: var(--space-color);
}

.navigators-grid .navigator-name:hover {
    opacity: 0.7;
}

a.navigator.navigator-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9ea7ab;
    color: #FFF;
    font-weight: bold;
    font-size: 16px;
    flex-direction: column;
    transition: 0.2s;
}

a.navigator.navigator-add:hover {
    transform: scale(0.98);
}

.navigator-add i {
    font-size: 29px;
    margin-bottom: 5px;
}

.head-action a.button i {
    font-size: 16px;
    vertical-align: middle;
    line-height: 1;
    margin-top: -3px;
    margin-right: 3px;
}

.related h4 {
    margin-bottom: -10px;
}

.related {
    margin-top: 60px;
}

.related-message {
    font-weight: bold;
    opacity: 0.5;
    margin: 30px 0;
    text-align: center;
}

textarea[name=schedule] {
    min-height: 5em;
}

.content-value a {
    word-break: break-all;
}

.content-wrap + .content-index + .content-index {
    margin-top: -40px;
    /*border-top: 1px solid #bbb;*/
    border-radius: 0;
}

td.account-profile-picture {
    padding-right: 20px;
    vertical-align: middle;
    line-height: 1;
    min-width: 50px;
}

td.account-profile-picture img {
    border-radius: 50%;
    max-width: 30px;
    height: 30px;
    object-fit: cover;
    width: 30px;
}

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

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

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

tr.account-disabled {
    opacity: 0.7;
}

tr.account-disabled .account-profile-picture img {
    filter: grayscale(1);
}

tr.account-disabled .index-title {
    color: #353535;
}

fieldset, input, select, textarea {
    background-color: var(--white);
}

.account-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: -4px;
    padding-left: 8px;
    padding-right: 8px;
}

.account-actions select {
    width: min-content;
}

.account-actions .submit {
    display: inline;
}

.account-actions * {
    margin: 0;
}

.accounts td, .accounts th {
    padding: 10px 8px;
}

.accounts table {
    border-spacing: 0 13px;
}

.account-check input[type="checkbox"] {
    margin: 0;
    margin-left: 10px;
}

.content-value img.google-profile {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border-radius: 50%;
    margin-right: 8px;
}

.content-view-survey .content-row {
    grid-template-columns: 100%;
    padding: 10px 0;
}

.content-view-survey .content-label, .content-view-survey .content-value {
    padding: 0;
}

.auto-calc .content-value {
    color: var(--green);
}

.accounts.content-index td.actions {
    padding-right: 20px;
}

.unreads {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 12px;
}

.admin-2col-column .content h3 {
    margin-bottom: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-bottom: 30px;
}

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

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

.content-more {
    font-size: 15px;
    text-align: right;
}

.content-more a > i {
    vertical-align: middle;
    margin-top: -4px;
}

.admin-2col-column table td:not(.index-title-td) {
    overflow: hidden;
    white-space: nowrap;
}

/*.admin-2col-column table .index-title {
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}*/

.admin-2col-column .content {
    padding: 28px 35px;
}

p.loggedas {
    /* text-align: center; */
    font-size: 12px;
    color: #7d7d7d;
    margin-bottom: 0;
    margin-top: -10px;
    padding-left: var(--header-pad);
    padding-right: var(--header-pad);
}

.admin-home-wrap h3 > i {
    vertical-align: middle;
    font-size: 41px;
    color: #9e9e9e;
}

.accounts-table th.accounts-check-all input {
    margin: 0;
    margin-top: 4px;
}

.accounts-table th.accounts-check-all {
    text-align: center;
}

.account-action-select,
.account-viewmode-select {
    font-size: 14px;
    padding-right: 42px;
    height: 32px;
    margin-right: 10px;
}

.modal.modal-bigright form {
    margin-bottom: 0;
}

.modal.modal-bigright .modal-content {
    max-width: 100vw;
    width: 580px;
    height: 100vh;
    overflow-y: auto;
    border-radius: 0;
    border: 0;
    box-shadow: -47px 0 110px rgb(0 0 0 / 9%), -3px 0 40px rgb(0 0 0 / 7%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translate(100%,0);
    transition: 0.3s;
    padding-left: 45px;
    padding-right: 45px;
}

.modal.modal-bigright.open .modal-content {
    transform: translate(0,0);
}

.modal.modal-bigright {
    place-content: end;
    backdrop-filter: saturate(0.3);
    -webkit-backdrop-filter: saturate(0.3);
    background: rgba(255,255,255,0.3);
    z-index: 99999;
}

.modal.modal-bigright .modal-content > form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.modal.modal-bigright fieldset > div {
    display: grid;
    grid-template-columns: 120px 1fr;
    margin-bottom: 3px;
}

.modal.modal-bigright fieldset > div label {
    padding-top: 5px;
}

.modal.modal-bigright p.form-caption {
    margin-left: 120px;
}

.modal.modal-bigright fieldset > div > p {
    margin-bottom: 13px;
}

.modal.modal-bigright label[for=bcc] {
    font-weight: normal;
}

.email-preview {
    border: 0;
    padding: 18px 22px;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: inherit;
    color: var(--text);
    position: relative;
    border-radius: 4px;
    background: var(--bg);
    font-size: 13px;
    margin-top: -9px;
    margin-bottom: 50px;
}

/*.email-preview:before {
    content: 'プレビュー';
    text-transform: uppercase;
    display: block;
    width: fit-content;
    margin-bottom: 12px;
    font-size: 13px;
    letter-spacing: 0.5px;
    background: #e6e6e6;
    color: #888888;
    padding: 3px 8px;
    line-height: 1;
    border-radius: 2px;
    font-weight: bold;
}*/

.modal.modal-bigright select {
    width: min-content;
}

.email-preview .email-auto-text:not(.email-name-bcc) {
    color: var(--secondary);
    border-bottom: 1px dashed currentColor;
}

.email-preview .email-auto-text:not(.email-name-bcc):before {
    content: '(';
}

.email-preview .email-auto-text:not(.email-name-bcc):after {
    content: ')';
}

.modal.modal-bigright fieldset {
    margin-top: 10px;
}

.modal.modal-bigright h3 {
    margin-bottom: 43px;
}

.related h4 + p {
    margin-top: 14px;
    /* color: var(--secondary); */
    margin-bottom: 0;
    font-size: 14px;
}

.modal.modal-bigright .filter-builder .builder-query {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 23px;
    background: var(--bg);
    padding: 9px 0;
    position: relative;
    padding-right: 20px;
    border-left: 3px solid var(--space-color);
    padding-left: 12px;

    border-left: 0;
    box-shadow: 1px 40px 80px rgb(0 0 0 / 5%), 1px 5px 8px rgb(0 0 0 / 15%);
    box-shadow: 1px 40px 80px rgb(0 0 0 / 8%), 1px 6px 10px -5px rgb(0 0 0 / 15%);
    border-radius: 4px;

    background: #f1f1f1;
    margin-bottom: 18px;
    box-shadow: 1px 5px 8px -4px rgb(0 0 0 / 30%);
    /* box-shadow: none; */
    /* border-bottom: 2px solid #eaeaea;*/

    /*border: 1px solid #d8d8d8;
    background: var(--white);*/
}

.builder-query select {
    cursor: pointer;
}

.builder-query select,.builder-query input {
    appearance: none;
    -webkit-appearance: none;
    margin-bottom: 0;
    background: transparent;
    height: auto;
    padding: 0;
    border: 0;
    border-bottom: 1px dotted;
    border-radius: 0;
    padding: 0 2px;
    font-weight: bold;
    width: 120px;
    min-width: 30px;
    margin: 6px 5px;
}

.builder-query input[type=text] {
    font-weight: normal;
}

.builder-query select:not([multiple]):hover:not(:focus),.builder-query input:hover:not(:focus) {
    color: var(--secondary);
}

#width_tmp_select{
  display : none;
}

.builder-query input[type='date'], 
.builder-query input[type='datetime'], 
.builder-query input[type='datetime-local'], 
.builder-query input[type='time'], 
.builder-query input[type='year'] {
    width: min-content;
}

.builder-input.builder-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.addquery-wrap {
    text-align: right;
    margin-top: -10px;
    margin-bottom: 33px;
}

a#addquery {
}

.builder-query .deletequery {
    position: absolute;
    font-size: 18px;
    color: var(--red);
    right: 5px;
    top: 5px;
}

fieldset .builder-query:first-child .deletequery {
    display: none;
}

.builder-query select[multiple] {
    width: max-content;
    max-width: 340px;
}

.builder-query select[multiple] option {
    white-space: break-spaces;
    margin-bottom: 3px;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 1;
}

#builderhtml { display:none; }

span.select-or-text {
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin-top: 12px;
    background: rgba(0,0,0,0.04);
    margin-left: 10px;
}

span.select-or-text input {
    font-weight: bold !important;
    font-size: 13px;
    width: 96%;
}

span.builder-input {
    display: inline-flex;
    align-items: center;
}

.querydisp {
    background: rgba(0,0,0,0.05);
    font-size: 13px;
    padding: 6px 10px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.querydisp span {
    color: var(--red);
    margin-right: 10px;
}

.querydisp:before {
    content: "フィルター中";
    margin-right: 10px;
    font-weight: bold;
    color: var(--secondary);
}

.querydisp span:after {
    content: '|';
    margin-left: 10px;
    color: var(--secondary);
    font-size: 13px;
}

.querydisp span:last-child:after {
    content: none;
}

a#addquery {
    display: inline-flex;
    align-items: center;
}

a#addquery i {
    margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #333333;
        --bg-color: #2f2f2f;
        --space-color: #83a5ff;
        --space-logo-color: #4e4e4e;
        --bg: #2a2d38;
        --form-bg: #636363;
        --text: #ffffff;
        --space-text: #5a8aff;
        --space-display: #85a7ff;
        --secondary: #a8acbd;
        --gray: #575757;
        --white: #1a1b23;
        --red: #ec5160;
        --green: #1bb56e;
        --space-500: #000000;
    }

    .button,button,input[type=submit] {
        background: #0046ff;
        border-color: #0046ff;
    }

    .header-nav span.unread {
        background: var(--space-500);
    }

    h1, h2, h3, h4, h5, h6 {
        color: #b8bccb;
    }

    p.loggedas {
        color: var(--secondary);
    }

    th > a.asc, th > a.desc {
        color: #bdbdbd;
    }

    .modal.modal-bigright {
        background: rgba(0,0,0,0.8);
    }

    .modal.modal-bigright .filter-builder .builder-query {
        background: var(--bg);
    }

    select, input, textarea {
        color: #FFF;
    }

    .content-row, .content-wrap td, .content-wrap th, .admin-home-wrap td, .admin-home-wrap th {
        border-bottom-color: #333;
    }

    .content-wrap tbody tr:hover, .content-wrap .content-row:hover {
        background: var(--bg);
    }

    input:-internal-autofill-selected {
        background: var(--form-bg) !important;
        animation: none !important;
    }

    hr {
        border-color: #3a3a3a;
    }

    .ql-snow .ql-stroke {
        stroke: #cacaca;
    }

    .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
        fill: #cacaca;
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        color: #cacaca;
    }

    .ql-snow .ql-picker-options {
        background: var(--bg);
    }

    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
        border-color: #484848;
    }

    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
        border-color: #484848;
    }

    .ql-container.ql-snow {
        border-color: #484848;
    }

    .ql-toolbar.ql-snow {
        border-color: #484848;
    }

    .ql-editor, .ql-editor * {
        color: #FFF !important;
    }

    input[type='color'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='email'], input[type='month'], input[type='number'], input[type='password'], input[type='search'], input[type='tel'], input[type='text'], input[type='url'], input[type='week'], input:not([type]), textarea, select {
        border-color: #484848;
    }

    input[readonly], input[readonly]:focus, input[readonly]:hover, textarea[readonly], textarea[readonly]:focus, textarea[readonly]:hover {
        background: var(--space-500);
        border-color: var(--space-500);
        color: var(--secondary);
    }

    .button.button-outline, button.button-outline, input[type='button'].button-outline, input[type='reset'].button-outline, input[type='submit'].button-outline {
        color: var(--space-color);
        border-color: var(--space-color);
    }

    th, th > a {
        color: var(--secondary);
        border-bottom-color: var(--secondary);
    }

    .modal {
        background: rgba(0,0,0,0.6);
    }

    .modal-content {
        border-color: #1f1f1f;
    }

    .tooltip-inner {
        background: #FFF;
        color: #000;
    }

    .navigators-grid .navigator {
        border: 1px solid #31333a;
    }

    .space-logo svg .cls-1, .space-logo svg .cls-2 {
        fill: #878a9a !important;
    }

    .space-logo {
        color: #858999 !important;
    }

    a:focus, a:hover {
        color: #aac2ff;
    }
}

.link-list td {
	font-size: 12px;
    word-break: break-all;
    white-space: normal !important;
}

.content-view.content-view-survey {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    grid-gap: 18px;
}

.content-view-survey .content-row {
    border-bottom: 0;
    background: var(--bg);
    /* box-shadow: 1px 14px 10px -9px rgba(0,0,0,0.15); */
    padding: 18px;
    gap: 10px;
    border-radius: 6px;
}

.content-view-survey .content-label {
    font-size: 14px;
    letter-spacing: 0;
}

.relateds {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(440px,1fr));
    gap: 45px;
    margin-top: 85px;
}

.relateds .related {
    margin-top: 0;
}

.relateds .table-responsive {
    margin-bottom: -100px;
}

.relateds .related .index-title {
    word-break: break-all;
}

@media (max-width: 428px) {
    main {
        padding-bottom: 90px;
    }
    .paginator {
        margin-top: 0px;
    }
    #accountsTable > table{
        padding-bottom: 10px;
    }
    .accounts > .paginator{
        margin-bottom: 20px;
    }
}