.sticky-navigation-left {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}
.reflection-left {
    -webkit-box-reflect: left 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgb(0 0 0 / 9%));
}
.reflection-right {
    -webkit-box-reflect: right 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgb(0 0 0 / 9%));
}
.reflection-top {
    -webkit-box-reflect: above 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgb(0 0 0 / 9%));
}
.reflection-bottom {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgb(0 0 0 / 9%));
}
a{
    text-decoration: none;
}
.fs-medium{
    font-size: var(--font_size_medium);
}
.fs-5{
    font-size: var(--font_size_fs_5) !important;
}
.fs-6{
    font-size: var(--font_size_fs_6) !important;
}
.mobile .navigation span.small{
    font-size: var(--font_size_extra_small);
}

.bg-dark-transparent {
    background: linear-gradient(to top, #000 0, #000 calc(100% - 10rem), #191c2000 100%);
}
.bg-dark-transparent-solid{
    background: linear-gradient(to top, #000 0, #000 calc(100% - 1rem), #191c2000 100%);
}
.fw-300{
    font-weight: 300;
}
.fw-400{
    font-weight: 400;
}
.fw-500{
    font-weight: 500;
}
.fw-600, .table th{
    font-weight: 600;
}
.fw-700{
    font-weight: 700;
}
.plyr{
    min-width: 100% !important;
}
.btn-sm:not(.py-auto){
    padding-block: .35rem;;
}
.navigation.sticky-top{
    /*
    make the priority of the top navigation sticky bar higher than the others to avoid overlap
    */
    z-index: 1021;
}
.vh-100-minus-header{
    height:calc(100vh - 60px);
}
.vh-100-minus-header-footer{
    height:calc(100vh - 120px);
}

.table-responsive{
    min-height:20rem;
}

/*
IMPORTANT
Implemented partially only on the home page of OD SOCIAL
Need to update the FOOTER JS to switch overflow hover to scroll on small devices
because they do not support hover event of the browser.
*/
.window-panel{
    min-height:calc(100vh - 70px);
    max-height:calc(100vh - 70px);
}
/**
weird behavior. If used multi-columns rows, the overflow of the second column becomes hidden due to margins of the rows. 
*/
.offcanvas .container-fluid{
    padding-right:0.25rem;
}
.mw-50{
    max-width:50%;
}
.navbar-brand.logo img{
    height:2rem;
}
.input-group input{
    padding-inline: 1rem;
}
/**
* fixes for SELECT library
*/
.selectize-dropdown{
    width:100% !important;
}
.selectize-input{
    height:100%;
    height:40px;
    border-radius: 0.375rem !important;
    min-width: 15rem;
}
.selectize-input input{
    width: auto !important;
}
.small *:not(.navigation a .small), .swal2-footer{
    font-size: .9rem;
}
.frm-filter *{
    font-size:.95rem;
}
.frm-filter .input-group .selectize-input{
    padding-block: 0.5rem;
    border-radius: 0 !important;
}
/**
* pagination
*/
.pagination .page-link{
    padding:4px 12px;
    font-size: .9rem;
}
/**
* misc 
*/
table .form-check-input, .form-check-input{
    border: 2px solid lightgrey;
    height: 1.2rem;
    width: 1.1rem;
}
table.trash tr td, table.trash tr:hover{
    background-color: rgb(255 220 220) !important;
}
.btn-toggle-navigation-left i{
    font-size: 1.5rem !important;
}
.swal2-html-container{
    /* font-size: 1rem !important; */
    font-size: 0.95rem !important;
}
.badge.notification-count, .badge.message-count{
    padding-block: 2px !important;
}
.offcanvas-body > .container-fluid{
    --bs-gutter-x: 1rem;
}