@import url('https://rsms.me/inter/inter.css');
body { font-family: 'Inter', -apple-system, sans-serif; }
@supports (font-variation-settings: normal) {
  body { font-family: 'Inter var', -apple-system, sans-serif; }
}

/* Rounded table */
.table-rounded {
    border-radius: var(--bs-border-radius)!important;
    border-collapse: collapse;
}

.table-rounded thead tr:first-child td:first-child {
    border-radius: var(--bs-border-radius) 0 0 0;
}

.table-rounded thead tr:first-child td:last-child {
    border-radius: 0 var(--bs-border-radius) 0 0;
}

/* Do not show bottom separator line for last row */
.table-rounded tbody tr:last-child td {
    border-bottom-width: 0px;
}

.table-rounded tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--bs-border-radius);
}

.table-rounded tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--bs-border-radius) 0 ;
}
/* Rounded table end */

/* Remove underline from all links (enabled by Bootstrap v5 by default) */
a, .btn-link {
    text-decoration: none;
}

.form-control::placeholder {
    opacity: 0.5 !important;
}

.hkknx-bg-highlight {
    background-color: rgba(255,255,181,1);
    color: var(--bs-dark);
}

.text-highlight {
    text-decoration: underline;
    text-decoration-color: rgb(255,255,181);
}

@keyframes fadeOut {
  0%   { background-color: #FFFFFF; }
  20%  { background-color: rgb(0, 123, 255, 0.3); }
  100% { background-color: #FFFFFF; }
}

.hkknx-bg-primary-fade-out {    
    background-image:none !important; 
            animation: fadeOut 0.7s ease-in-out; 
}

.hkknx-hover-animated-shadow { transition: box-shadow .3s; }
.hkknx-hover-animated-shadow:hover { box-shadow: var(--bs-box-shadow-sm); }
.hkknx-hover-animated-shadow:active { box-shadow: none !important; }

.hkknx-hover-bg-body-secondary:not(.active):hover { background-color: rgba(var(--bs-secondary-bg-rgb)) !important; }
.hkknx-hover-bg-body-tertiary:not(.active):hover { background-color: rgba(var(--bs-tertiary-bg-rgb)) !important; }

.hkknx-hover-text-body:hover { color: var(--bs-body-color) !important; }
.hkknx-hover-text-body-secondary:hover { color: var(--bs-secondary-color) !important; }

.hkknx-hover-animated-scale { transition: all .2s ease-in-out; }
.hkknx-hover-animated-scale:hover { transform: scale(1.02); }
.hkknx-hover-animated-scale:active { transform: scale(1); }
.hkknx-hover-animated-scale:target { transform: scale(1); }

/* Animate from the bottom up */
.modal.fade.sheet .modal-dialog {transform: translate(0,50pt)}
.modal.fade.sheet.show .modal-dialog {transform: translate(0,0)}

[data-bs-theme='light'] .hide-light,
[data-bs-theme='dark'] .hide-dark {
  display: none;
}

.hkknx-text-stroke-width-medium {
    -webkit-text-stroke-width: medium;
}

.hkknx-text-stroke-width-thick {
    -webkit-text-stroke-width: thick;
}
/* Define the `xs` breakpoint */
@media (min-width:480px) {
    .p-xs-3 {
        padding:1rem!important;
    }

    .p-xs-2 {
        padding:0.5rem!important;
    }

    .p-xs-1 {
        padding:0.25rem!important;
    }
}

@media (max-width:480px) { /* breakpoint for smaller than `xs` */
    .col-tile {
        max-width: 120pt;
        min-width: 88pt;
    }
 }

@media (min-width:480px) { /* breakpoint for `xs` and upwards */
    .col-tile {
        max-width: none;
        width: 120pt;
    }
}

/* Wiggle animation is used to indicate that tiles can be reordered */
@keyframes hkknx-wiggle {
    0% { transform: rotate(-1deg); }
   50% { transform: rotate(1deg); }
}

.hkknx-wiggle {
  display: inline-block;
  animation: hkknx-wiggle 0.2s infinite;
}

.hkknx-wiggle:hover {
  animation: none;
}


/* The icon of a fan accessory is rotated by 360°
   to indicate that the fan is turned on. */
@-webkit-keyframes rotation360 {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation360 {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes rotation360 {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes rotation360 {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
@-keyframes rotation360 {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.hkknx-fan-rotate{
    -webkit-animation: rotation360 1s infinite linear;
    -moz-animation: rotation360 1s infinite linear;
    -o-animation: rotation360 1s infinite linear;
    -ms-animation: rotation360 1s infinite linear;
    animation: rotation360 1s infinite linear;
    display: inline;
}

@keyframes bounce-down {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* Custom header class for list-group */
.hkknx-list-group-section {
    padding-bottom: 1.5rem;
}

.hkknx-list-group-footer, .hkknx-list-group-header {
    color: var(--bs-secondary-color);
    padding-left: 1rem;
    padding-right: 1rem;
    font-size:.8em;
}

.hkknx-list-group-header {
    text-transform: uppercase;
    padding-bottom: 0.5rem;
}

.hkknx-list-group-footer {
    padding-top: 0.5rem;
}

.hkknx-list-group-sidebar {
    border-radius: 0;
}

.hkknx-list-group-sidebar .list-group-item {
    border-style: none;
    border-radius: var(--bs-border-radius)!important;
}

.hkknx-list-group-sidebar .list-group-item:not(.active) {
    background-color: transparent;
}

.hkknx-list-group-sidebar .list-group-item-action:not(.active):hover {
    background-color: rgba(var(--bs-secondary-bg-rgb));
}

.hkknx-chart {
    -webkit-touch-callout: none; /* Safari */
    -webkit-user-select: none; /* Chrome */     
    -webkit-user-drag: none;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
}

.hkknx-colorwheel {
    -webkit-touch-callout: none; /* Safari */
    -webkit-user-select: none; /* Chrome */     
    -webkit-user-drag: none;
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
    cursor: pointer;
}

/* Make any primary text inside an active list group item visible */
.list-group-item.active .text-primary {
    color: var(--bs-white) !important;
}

.w-35 {
    width:35% !important;
}

.w-65 {
    width:65% !important;
}

/* hkknx-gap-* is a backport of the gap css property to make that work on Safari 12. */
*:is(.flex-row, .flex-sm-row, .flex-md-row, .flex-lg-row, .flex-xl-row).hkknx-gap-5 > *:not(:first-child) {
    margin-left: 3rem;
}

*:is(.flex-row, .flex-sm-row, .flex-md-row, .flex-lg-row, .flex-xl-row).hkknx-gap-4 > *:not(:first-child) {
    margin-left: 1.5rem;
}

*:is(.flex-row, .flex-sm-row, .flex-md-row, .flex-lg-row, .flex-xl-row).hkknx-gap-3 > *:not(:first-child) {
    margin-left: 1rem;
}

*:is(.flex-row, .flex-sm-row, .flex-md-row, .flex-lg-row, .flex-xl-row).hkknx-gap-2 > *:not(:first-child) {
    margin-left: 0.5rem;
}

*:is(.flex-row, .flex-sm-row, .flex-md-row, .flex-lg-row, .flex-xl-row).hkknx-gap-1 > *:not(:first-child) {
    margin-left: 0.25rem;
}

*:is(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column).hkknx-gap-5 > *:not(:first-child) {
    margin-top: 3rem;
}

*:is(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column).hkknx-gap-4 > *:not(:first-child) {
    margin-top: 1.5rem;
}

*:is(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column).hkknx-gap-3 > *:not(:first-child) {
    margin-top: 1rem;
}

*:is(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column).hkknx-gap-2 > *:not(:first-child) {
    margin-top: 0.5rem;
}

*:is(.flex-column, .flex-sm-column, .flex-md-column, .flex-lg-column, .flex-xl-column).hkknx-gap-1 > *:not(:first-child) {
    margin-top: 0.25rem;
}

.hkknx-flex-fill-equal {
    flex-grow: 1;
    flex-basis: 0;
} 

.hkknx-dropdown-item-image {
    width: 20pt !important;
    height: 20pt !important;
    display: flex;
    flex-shrink: 0; /* Disable shrinking */
    justify-content: center;
    align-items: center;
    color:var(--bs-secondary-color);
    background-color:rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity));
    font-size:1rem;
    border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important; 
    border-radius:50%;
}