html, body { height: 100% }

body { 
    font-size: 10pt;
    /* max-width: 572px;  */
    margin: 0 auto }

a.text-reset:hover { color: var(--flex-primary) !important }

.lh-0 { line-height: 0 !important }

.w-32 { width: 2rem }
.w-48 { width: 3rem }
.w-64 { width: 4rem }
.w-96 { width: 6rem }
.w-128 { width: 8rem }

.scroll-y { overflow-y: auto }

.small-xs { font-size: 75% }

.material-symbols-outlined.fs-1 { font-size: 5rem !important }
.material-symbols-outlined.fs-2 { font-size: 4rem !important }
.material-symbols-outlined.fs-3 { font-size: 3rem !important }
.material-symbols-outlined.fs-4 { font-size: 2rem !important }
.material-symbols-outlined.fs-5 { font-size: 1.5rem !important }
.material-symbols-outlined.fs-6 { font-size: 1rem !important }

.btn { font-weight: bold }

.btn-orange,
.btn-orange:hover
.btn-orange:active,
.btn-orange:focus { 
    border-color: #FFAC30 !important;
    background-color: #FFAC30 !important }

.btn-lemon,
.btn-lemon:hover
.btn-lemon:active,
.btn-lemon:focus { 
    border-color: #FFEA30 !important;
    background-color: #FFEA30 !important }

.btn-watermelon,
.btn-watermelon:hover
.btn-watermelon:active,
.btn-watermelon:focus { 
    border-color: #B1D485 !important;
    background-color: #B1D485 !important }

.btn-danger:not(.btnselected):hover,
.btn-watermelon:not(.btnselected):hover,
.btn-lemon:not(.btnselected):hover,
.btn-orange:not(.btnselected):hover,
.btn-success:not(.btnselected):hover { box-shadow:inset 0 0 10rem rgba(255,255,255,.0125) !important }

.btn-rating-group .btn-danger { background: #FF5630 !important }
.btn-rating-group .btn-success { background: #36B37E !important }

#splash,
#login form { 
    background: url(img/bg-splash.png);
    background-size: cover }

#login form {
    border-top-left-radius: 3rem;
}    

.modal.show { display: block }