@import url('css-vars.css');

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0px;
    padding: 0px;
    min-height: 398px;
    color: hsl( var(--clr_h),var(--clr_fg_s),var(--clr_fg_l) );
    /* background-image: url('/assets/img/background-001.jpg'); */
    /* background-size: cover; */
    /* background-blend-mode: soft-light; */
    /* background-attachment: fixed; */
    background-color: hsla(var(--clr_h),var(--clr_bg_s),var(--clr_bg_l),0.975);
}

.main-background {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100vh;
    background-color: hsla(var(--clr_h),var(--clr_bg_s),var(--clr_bg_l),0.9);
}

header {
    cursor: default;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9;
    margin: 0px;
    height: var(--header_height);
    overflow: auto;
    text-align: center;
    font-size: 1.125em;
    font-weight: 600;
    background-color: hsla(var(--clr_h),var(--clr_head_bg_s),var(--clr_head_bg_l),0.95);
    color: hsl( var(--clr_h),var(--clr_head_fg_s),var(--clr_head_fg_l) );
    box-shadow: 0 5px 15px rgba(0,0,0,0.125);
    transition: 0.2s ease-in-out;
}
header:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

header *.title {
    height: 100%;
    align-content: center;
    padding-top: 8px;
    font-size: 1.5em;
    line-height: 1.5em;
}
header *.header-owner {
    height: 100%;
    align-content: center;
}
header *.title a {
    cursor: pointer;
    margin-left: -15px; padding-left: 15px;
    margin-right: -15px; padding-right: 15px;
    background-color: inherit;
    color: inherit;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.25s ease-in-out;
}
header *.title a:hover {
    color: hsla(var(--clr_h),100%,100%,0.9);
    background-color: hsla(var(--clr_h),100%,100%,0.07);
    box-shadow: 0 0 12px 6px hsla(var(--clr_h),100%,100%,0.05);
    transition: 0.25s ease-in-out;
}

footer {
    /* position */
    position: fixed;

    bottom: 0px;
    width: 100%;
    margin: 0px;
    line-height: 1.5rem;
    /* font */
    font-size: 0.8em;
    font-weight: 100;
    line-height: 0.9em;
    /* cursor */
    cursor: default;
    /* dimension and alignment */
    text-align: center;
    /* max-height: 64px; */
    min-height: 1.5rem;
    max-height: 3rem;
    overflow: hidden;
    /* interior */
    background-color: hsl( var(--clr_h),var(--clr_bg_s),75% );
    color: hsl( var(--clr_h),var(--clr_fg_s),var(--clr_fg_l) );
    box-shadow: 0 -5px 15px rgba(0,0,0,0.125);
    /* additional */
    transition: 0.2s ease-in-out;
}

footer:hover {
    box-shadow: 0 -5px 15px rgba(0,0,0,0.25);
}
footer .footer-support, 
footer .footer-owner,
footer .footer-developer {
    position: relative;
    bottom: 50%;
    right: 0;
    transform: translate( 0%, 50% );
}
    .footer-support img, .footer-owner img, .footer-developer img { width: 18px; }
    .footer-support   { font-weight: 300; text-align: left;   }
    .footer-owner     { font-weight: 500; text-align: center; }
    .footer-developer { font-weight: 300; text-align: right;  }

.navbar-contents {
    position: relative;
    top: var(--header_height);
    display: block;
    z-index: 9;
    margin: 0px;
    /* padding: 2px 10px; */
    /* background: transparent !important; */
}
.contents {
    position: relative;
    top: var(--header_height);
    margin: 0px;
    overflow: auto;
    width: 100%;
    padding: 5px 15px;
    background: transparent !important;
}

.form-control:focus, .btn:focus {
    box-shadow: 0 0 12px 6px hsla( var(--clr_h), var(--clr_head_bg_s), 82.5%, 0.95 );
}

.btn-main {
    --bs-btn-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-bg: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-hover-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-hover-bg: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l_hover) );
    --bs-btn-hover-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), 45% );
    --bs-btn-focus-shadow-rgb: 54, 131, 247;
    --bs-btn-active-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-active-bg: hsl( var(--clr_h), var(--clr_head_bg_s), 45% );
    --bs-btn-active-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), 42.5% );
    --bs-btn-active-shadow: inset 0 3px 5px hsla(var(--clr_h), var( --clr_bg_s ), 12.5%, 0.125);
    --bs-btn-disabled-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-disabled-bg: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-disabled-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
}

.btn-outline-main {
    --bs-btn-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-hover-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-hover-bg: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-hover-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-focus-shadow-rgb: 54, 131, 247;
    --bs-btn-active-color: hsl( var(--clr_h), var(--clr_head_bg_s), 97.5% );
    --bs-btn-active-bg: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-active-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-active-shadow: inset 0 3px 5px hsla(var(--clr_h), var( --clr_bg_s ), 12.5%, 0.125);
    --bs-btn-disabled-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: hsl( var(--clr_h), var(--clr_head_bg_s), var(--clr_head_bg_l) );
    --bs-gradient: none;
}

table.table thead {
    position: sticky;
    top: 0;
}

table.table thead th,
table.table tbody th {
    font-weight: 500;
    vertical-align: middle;
    padding-left: 12px;
    padding-right: 12px;
}
table.table thead th {
    font-size: 1.00em;
    line-height: 1.05em;
    background-color: hsl( var(--clr_h), var(--clr_bg_s), 62.5% );
    color: hsl( var(--clr_h),var(--clr_fg_s),92.5% );
}
table.table tbody th {
    font-size: 0.95em;
    line-height: 1.00em;
    background-color: hsl( var(--clr_h), var(--clr_bg_s), 92.5% );
}

table.table tbody td {
    font-size: 0.90em;
    line-height: 1em;
    vertical-align: top;
    padding-left: 8px;
    padding-right: 8px;
}

table.table tbody.init_data td {
    background-color: hsl( var(--clr_h), var(--clr_bg_s), 97.5% );
    color: hsl( var(--clr_h),var(--clr_fg_s),20.0% );
}

table.table tbody tr.selected td {
    background-color: hsl( var(--clr_h), var(--clr_bg_s), 85% );
    color: hsl( var(--clr_h), var(--clr_fg_s), 25% );
}

table.table.table-hover tbody.init_data tr:hover td {
    background-color: hsla( var(--clr_h), var(--clr_bg_s), 65%, 0.125 );
    color: hsl( var(--clr_h), var(--clr_fg_s), var(--clr_fg_l) );
}
table.table.table-hover tbody.init_data tr.selected:hover td {
    background-color: hsla( var(--clr_h), var(--clr_bg_s), 35%, 0.25 );
}

#table-content {
    background-color: rgba(255,255,255,0.35);
    color: #666666;
}

/* HTML: <div class="loader"></div> */

.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: hsl( var(--clr_h), 100%, 50% );
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}