/* BuddyFile screen conventions adapted to Bootstrap 5. */
.btn-default { --bs-btn-color: #212529; --bs-btn-bg: #fff; --bs-btn-border-color: #adb5bd; --bs-btn-hover-bg: #e9ecef; --bs-btn-hover-border-color: #6c757d; }
.btn-block { display: block; width: 100%; }
.panel { margin-bottom: 20px; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
.panel-heading, .panel-footer { padding: 10px 15px; background: var(--bs-tertiary-bg); }
.panel-heading { border-bottom: 1px solid var(--bs-border-color); border-radius: .5rem .5rem 0 0; }
.panel-footer { border-top: 1px solid var(--bs-border-color); border-radius: 0 0 .5rem .5rem; }
.panel-body { padding: 15px; }
.panel-title { margin: 0; font-size: 1rem; }
.panel-primary { border-color: var(--bs-primary); }
.panel-primary > .panel-heading { color: #fff; background: var(--bs-primary); }
.page-header { margin: 35px 0 20px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border-color); }
.form-group { margin-bottom: 15px; }
.control-label { font-weight: 600; }
.input-group-addon { display: flex; align-items: center; padding: .375rem .75rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.checkbox label, .radio label { font-weight: normal; }
.checkbox input, .radio input { margin-right: .4rem; }
.label { display: inline-block; padding: .3em .6em; border-radius: .25rem; font-size: .8em; color: #fff; }
.label-default { background: #6c757d; } .label-primary { background: var(--bs-primary); } .label-success { background: var(--bs-success); } .label-danger { background: var(--bs-danger); } .label-warning { background: var(--bs-warning); color: #212529; }
.pull-right { float: right !important; } .pull-left { float: left !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.hidden, .hide { display: none !important; }
.well { padding: 20px; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.navbar-default { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.navbar-inverse { background: #212529; color: #fff; }
.navbar-nav > li > a { display: block; padding: .65rem 1rem; color: inherit; text-decoration: none; }
.navbar-nav > .active > a { color: var(--bs-primary); background: rgba(0,0,0,.04); }
.navbar-right { margin-left: auto; }
.navbar-toggle { padding: 8px 10px; margin-left: auto; background: transparent; border: 1px solid var(--bs-border-color); border-radius: .3rem; }
.icon-bar { display: block; width: 22px; height: 2px; margin: 4px 0; background: currentColor; }
.dropdown-menu > li > a { display: block; padding: .35rem 1rem; color: var(--bs-body-color); text-decoration: none; }
.dropdown-menu > li > a:hover { background: var(--bs-tertiary-bg); }
.nav-pills > li > a { display: block; padding: .5rem 1rem; text-decoration: none; border-radius: .375rem; }
.nav-pills > li.active > a { background: var(--bs-primary); color: #fff; }
.nav-tabs > li > a { display: block; padding: .5rem 1rem; text-decoration: none; }
.close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; }
.modal-header h4 { margin: 0; }
.modal-body { overflow-wrap: anywhere; }
.modal .form-control { width: 100%; }
/* Upload status is display-only and must stay within the progress circle. */
.bb-upload-files #progress-circle { max-width: 400px; margin: auto; }
.bb-upload-files #progress-circle canvas { max-width: 100%; height: auto; }
.bb-upload-files #progress-circle .progress-data { top: 50%; transform: translateY(-50%); pointer-events: none; }
.bb-upload-files #progress-circle .time-and-size { display: flex; justify-content: space-between; gap: .5rem; max-width: 90%; }
.bb-upload-files #progress-circle .time-and-size .label { float: none !important; min-width: 0; }
.bb-upload-files #progress-circle .speedIndicator { display: flex; justify-content: center; clear: both; margin: 0; width: 100%; }
.bb-upload-files #progress-circle .speedIndicator > div { flex: 0 0 auto; width: auto; }
.bb-upload-files #progress-circle .speedIndicator h3 { margin-top: 1rem; font-size: 1.5rem; }
.dataTables_filter { margin-bottom: 10px; }
div.dt-container .dt-search input { margin-left: .5rem; }
.table > tbody > tr.info > td { --bs-table-bg: #cff4fc; } .table > tbody > tr.warning > td { --bs-table-bg: #fff3cd; }
.help-block { display: block; color: var(--bs-secondary-color); margin: 5px 0; }
.buddyfile-space-chart { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.buddyfile-space-donut { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(var(--bs-primary) var(--used), var(--bs-secondary-bg) 0); display: grid; place-items: center; }
.buddyfile-space-donut span { width: 105px; height: 105px; border-radius: 50%; background: var(--bs-body-bg); display: grid; place-items: center; font-size: 1.5rem; font-weight: 600; }
@media (min-width: 576px) { .navbar-toggle { display: none; } .navbar-nav { flex-direction: row; } .navbar-collapse { align-items: center; } }
@media (max-width: 575px) { .navbar-header { width: 100%; display: flex; } .navbar-nav { flex-direction: column; } }
.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-offset-1 { margin-left: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-offset-2 { margin-left: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25.00000000%; }
.col-xs-offset-3 { margin-left: 25.00000000%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-offset-4 { margin-left: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-offset-5 { margin-left: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50.00000000%; }
.col-xs-offset-6 { margin-left: 50.00000000%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-offset-7 { margin-left: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-offset-8 { margin-left: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75.00000000%; }
.col-xs-offset-9 { margin-left: 75.00000000%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-offset-10 { margin-left: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-offset-11 { margin-left: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100.00000000%; }
.col-xs-offset-12 { margin-left: 100.00000000%; }
@media (min-width: 576px) {
.col-sm-offset-0 { margin-left: 0.00000000%; }
.col-sm-offset-1 { margin-left: 8.33333333%; }
.col-sm-offset-2 { margin-left: 16.66666667%; }
.col-sm-offset-3 { margin-left: 25.00000000%; }
.col-sm-offset-4 { margin-left: 33.33333333%; }
.col-sm-offset-5 { margin-left: 41.66666667%; }
.col-sm-offset-6 { margin-left: 50.00000000%; }
.col-sm-offset-7 { margin-left: 58.33333333%; }
.col-sm-offset-8 { margin-left: 66.66666667%; }
.col-sm-offset-9 { margin-left: 75.00000000%; }
.col-sm-offset-10 { margin-left: 83.33333333%; }
.col-sm-offset-11 { margin-left: 91.66666667%; }
.col-sm-offset-12 { margin-left: 100.00000000%; }
}
@media (min-width: 768px) {
.col-md-offset-0 { margin-left: 0.00000000%; }
.col-md-offset-1 { margin-left: 8.33333333%; }
.col-md-offset-2 { margin-left: 16.66666667%; }
.col-md-offset-3 { margin-left: 25.00000000%; }
.col-md-offset-4 { margin-left: 33.33333333%; }
.col-md-offset-5 { margin-left: 41.66666667%; }
.col-md-offset-6 { margin-left: 50.00000000%; }
.col-md-offset-7 { margin-left: 58.33333333%; }
.col-md-offset-8 { margin-left: 66.66666667%; }
.col-md-offset-9 { margin-left: 75.00000000%; }
.col-md-offset-10 { margin-left: 83.33333333%; }
.col-md-offset-11 { margin-left: 91.66666667%; }
.col-md-offset-12 { margin-left: 100.00000000%; }
}
@media (min-width: 992px) {
.col-lg-offset-0 { margin-left: 0.00000000%; }
.col-lg-offset-1 { margin-left: 8.33333333%; }
.col-lg-offset-2 { margin-left: 16.66666667%; }
.col-lg-offset-3 { margin-left: 25.00000000%; }
.col-lg-offset-4 { margin-left: 33.33333333%; }
.col-lg-offset-5 { margin-left: 41.66666667%; }
.col-lg-offset-6 { margin-left: 50.00000000%; }
.col-lg-offset-7 { margin-left: 58.33333333%; }
.col-lg-offset-8 { margin-left: 66.66666667%; }
.col-lg-offset-9 { margin-left: 75.00000000%; }
.col-lg-offset-10 { margin-left: 83.33333333%; }
.col-lg-offset-11 { margin-left: 91.66666667%; }
.col-lg-offset-12 { margin-left: 100.00000000%; }
}