@font-face {
    font-family: "PoppinsLight";
    src: url("../fonts/Poppins-ExtraLight.woff2");
    font-display: swap;
}

@font-face {
    font-family: "PoppinsRegular";
    src: url("../fonts/Poppins-Regular.woff2");
    font-display: swap;
}

@font-face {
    font-family: "PoppinsMedium";
    src: url("../fonts/Poppins-Medium.woff2");
    font-display: swap;
}

:root {
    --trebe-orange: rgb(247, 147, 30) !important;
    --trebe-blue: rgb(29, 57, 96) !important;
    --trebe-dark-blue: rgb(3, 31, 70) !important;
    --color-advanced: rgb(64, 64, 64) !important;
    --color-light: rgb(248, 248, 248) !important;
    --color-highlight: rgb(248, 248, 248) !important;
    --color-background: rgb(255, 255, 255) !important;
    --color-active: rgba(216, 216, 216, 0.533) !important;
    --color-text: var(--trebe-dark-blue) !important;
    --color-main: rgb(255, 255, 255) !important;
}

[data-theme="dark"] {
    --color-highlight: rgb(72, 72, 72) !important;
    --color-background: rgb(80, 80, 80) !important;
    --color-active: rgb(92, 92, 92) !important;
    --color-text: rgb(240, 240, 240) !important;
    --color-main: var(--color-background) !important;
}

.poppins-regular {
    font-family: "PoppinsRegular" !important;
}

.poppins-light {
    font-family: "PoppinsLight" !important;
}

* {
    box-sizing: border-box !important;
    font-family: "PoppinsMedium" !important;
    color: var(--trebe-dark-blue) !important;
}

body {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

#main {
    background-color: var(--color-main) !important;
}

#context {
    border: 3px solid var(--trebe-orange) !important;
    background-color: var(--color-highlight) !important;
}

#context>button {
    background-color: var(--color-highlight) !important;
    color: var(--color-text) !important;
}

td {
    padding: 0.8rem !important;
}

span {
    display: inline-flex !important;
    align-items: center !important;
}

.top {
    background-color: var(--trebe-blue) !important;
}

#words {
    background-color: var(--color-advanced) !important;
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
}

.small {
    font-size: small !important;
}

.bullet {
    color: #78A75A !important;
}

.tune {
    color: var(--color-text) !important;
    font-size: 1rem !important;
}

.status {
    color: green !important;
}

.pointer {
    cursor: pointer !important;
    user-select: none !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.dropdown-item:active {
    background-color: lightgray !important;
}

.header {
    background-color: var(--color-highlight) !important;
}

.original {
    background-color: var(--color-light) !important;
}

.breakpoint {
    outline: none !important;
    cursor: text !important;
}

.timestamp {
    color: var(--color-text) !important;
}

.speaker {
    border-color: var(--trebe-orange) !important;
    color: var(--color-text) !important;
    opacity: 1 !important;
}

.speaker-option-label {
    padding-bottom: 0.25rem !important;
    font-size: 0.8rem !important;
}

#duration,
#speed {
    min-width: 5vw !important;
}

#controls {
    border: 2px solid lightgray !important;
    border-right: none !important;
    border-left: none !important;
}

select {
    cursor: pointer !important;
}

select,
input {
    font-family: "PoppinsRegular" !important;
}

.btn:active,
select:active,
select:focus,
input:active,
input:focus {
    outline-color: var(--trebe-orange) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(247, 147, 30, 0.6) !important;
    border-color: var(--trebe-orange) !important;
}

.form-check-input:checked {
    border-color: var(--trebe-orange) !important;
    background-color: var(--trebe-orange) !important;
}

.btn-color {
    background-color: var(--trebe-blue) !important;
}

.btn-color:active {
    outline-color: var(--trebe-blue) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(29, 57, 96, 0.6) !important;
    border-color: var(--trebe-blue) !important;
}

.nav-item .nav-link {
    font-size: 0.9rem !important;
}

#waveform ::part(scroll) {
    overflow-x: scroll !important;
}

#waveform ::part(region-handle-right),
#waveform ::part(region-handle-left) {
    border-width: 1.5px !important;
}

.highlight {
    background-color: var(--color-active) !important;
}

.bg-success {
    background-color: mediumseagreen !important;
}

#alert {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

.visible {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.25s linear !important;
}

.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    transition: visibility 0s 1s, opacity 1s linear !important;
}

.breakpoint {
    color: var(--color-text) !important;
}

td {
    background-color: var(--color-background) !important;
    border-color: var(--color-background) !important;
}

@media (max-width: 768px) {
    .border-end {
        border-right: 0 !important;
    }
}

@media (min-width: 992px) {
    .border-bottom {
        border-bottom: 0 !important;
    }
}