html, body { height: 100%}

@media (max-width: 575.98px){
    [class*=container] {
        padding: 0 1rem !important;
    }
}

.bg-notification {
    background-color: #d5eaff !important;
}

.box {
    transition: all 300ms;
    background: rgba(255,255,255,.25);
    border: 1px solid #FFF;
    border-radius: .5rem;
    padding: 1rem;
    box-shadow: 0 .25rem .25rem rgba(0,0,0,0.05) }

.box-sm { padding: .5rem .75rem}    
.box-lg { padding: 1.0rem }    
    
.box:hover {
    background: rgba(255,255,255,.75) !important;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,0.075) }

.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 }
.size-20 { font-size: 20px !important }

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% }

.trail-social-proof .ratio:not(:first-child) { margin-left: -.5rem }


.icon { 
    display: inline-block;
    position: relative }

.icon.text-primary    { fill: var(--flex-primary); color: var(--flex-primary) }
.icon.text-secondary  { fill: var(--flex-secondary); color: var(--flex-secondary) }
.icon.text-white      { fill: #FFF }
.icon.text-whatsapp   { fill: #03B35B }
.icon.text-current    { fill: currentColor; color: currentColor !important }

@media(max-width:1199.98px){
    .h-100 {
        /* height: auto !important */
    }
}
  
.chat-item .chat-delete { visibility: hidden }
.chat-item:hover .chat-delete { visibility: visible }