.app {
    height: calc(100dvh - 6rem);
    min-height: 200px;
}
.o-tap {
    z-index: 6;
}
.tb-sinhala {
    background-color: transparent !important;
    box-shadow: none !important;
    resize: none;
    z-index: 2;
}
.hl-sinhala {
    box-shadow: none !important;
    resize: none;
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
    color: transparent;
    background-color: transparent;
    z-index: 1;
}
.hl-mark {
    background-color: var(--bs-primary-border-subtle, rgba(13, 110, 253, 0.45)) !important;
    color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.tb-singlish {
    outline: none !important;
    box-shadow: none !important;
    z-index: 3;
}
.ig-singlish {
    width: auto;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ig-focus {
    border-color: var(--bs-primary-border-subtle, #86b7fe) !important;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color, --bs-focus-ring-color) !important;
}
.i-back {
    top: 1.47px;
}        
.btn-flash {
    transition: background-color 0.15s ease-out, color 0.15s ease-out !important;
}
.btn-flash-active {
    background-color: var(--bs-secondary, --bs-gray) !important;
    color: #fff !important;
}      
.bs-keys {
    clip-path: inset(-3rem 0px 0px 0px);
    resize: none;
    z-index: 4;
}
.bs-handle {
    width: 40px;
    height: 4px;
}
.tt-copy {
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.tt-arrow {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--bs-secondary);
}        
.fst-quote::before {
    content: "“";
}
.fst-quote::after {
    content: "”";
}