html, body {height: 100vh;min-height: 100vh;}
main {background-color: var(--tt-white); border: 1px solid var(--tt-green);}
.webapp-navbar {padding-left:5%;padding-right:5%}

.webapp-footer {background:var(--tt-blue);color:white;display:inline-block;opacity: 1;}

.form-control:focus, .form-select:focus{
    border-color: var(--tt-red);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--tt-red-half);
}

.now-you-know {font-family: 'Montserrat', 'Poppins', 'Avenir Next', Arial, sans-serif; font-weight: 700; color:var(--tt-gray);}

@media (max-width: 576px) {
    .webapp-navbar img {
        width: 180px;
        height:auto;
    }
}

a.text-muted:focus, a.text-muted:active {outline: none; box-shadow: none; color: var(--tt-red);}

.btn-secondary{ background-color:gray; }
.btn-secondary:hover{ background-color:var(--tt-red); border-color: var(--tt-green);}

.btn-list{ background-color:var(--tt-white); }
.btn-list:hover{ background-color: var(--tt-white); border-color: var(--tt-red);}

.dropdown-item:hover{ background-color: var(--tt-green); }
.dropdown-menu{ border: 1px solid var(--tt-red); }

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th { background-color: var(--tt-green); }
.table > thead > tr > th {background-color: var(--tt-blue); color: white; }
/*input[type="radio"]:checked + label.btn-radio { background-color: #C621270F; border-color: #C62127; }*/
.table-hover tbody tr td button { display: none; }
.table-hover tbody tr:hover td button { display: inline; }


.btn-group button{border: 1px solid var(--tt-red); color: var(--tt-red); width:33%;}
.btn-group button:hover{background-color: var(--tt-red); border: 1px solid var(--tt-green);}

input[type="radio"]:checked + label.btn-radio { background-color: var(--tt-red-half); border-color: var(--tt-red); color: var(--tt-red);}
.btn-group label{border: 1px solid var(--tt-red); color: var(--tt-green);}

.form-check-input:not(:checked) {border-color: var(--tt-red);}
.form-check-input:checked { background-color: var(--tt-red); border-color: var(--tt-green); }
.form-check-input:focus{ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px var(--tt-red); border-color: var(--tt-red); }

.list-group-item.active { background-color: var(--tt-red); border-color: var(--tt-green); }

.offcanvas.offcanvas-top.offcanvas-size-xxl{ --bs-offcanvas-height: 80vh !important; }
.offcanvas.offcanvas-end.offcanvas-size-xxl{ --bs-offcanvas-width: min(50vw, 50vw) !important; }
.offcanvas.offcanvas-end.offcanvas-size-med{ --bs-offcanvas-width: min(33vw, 33vw) !important; }


.badge{background-color: var(--tt-red);}

.bg-tt{background-color: var(--tt-red);}

/* For BS tooltip modifications */
.tooltip-inner { max-width: 400px; /* Adjust the width as needed */ }
.tooltip-inner ul {
    text-align: left; margin: 0; /* Optional: Adjust margin if needed */
    padding: 20px; /* Optional: Adjust padding if needed */
}
.tooltip-inner ul li {
    text-align: left; /* Ensure list items are left-aligned */
}