html, body {
    margin: 0 !important;
    padding: 0 !important;
}
video {
    max-width: 100% !important;
}

#mainpage {
    min-height: 96.5% !important;
}
.main-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out, margin-right 0.35s ease-in-out, right 0.35s ease-in-out;
    flex-direction: column;
}

.form-control-dark {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-gray);
}
.form-control-dark:focus {
    color: #fff;
    background-color: var(--bs-dark);
    border-color: #fff;
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}
.avatar {
    margin-top: -15px;
    margin-bottom: -15px;
    width: 46px;
    height: 46px;
    /*box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;*/
    box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0, rgba(27, 31, 35, 0.15) 0 0 0 1px;
}
.btn-primarybluegray,
.btn-primaryindie:hover,
.btn-primarybluegray:hover,
.btn-outline-primarybluegray:hover,
.btn-outline-primaryindie:hover,
.btn-outline-warning:hover,
.btn-outline-danger:hover {
    color: #f3f3f3 !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
.card-img-list {
    min-height: 170px !important;
    max-height: 170px !important;
}
.card-hoverable:hover {
    box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15) !important;
}
.img-category {
    width: 100%;
    height: 180px;
}
.img-logo {
    max-width: 165px !important;
}
.img-logo-icon {
    width: 24px !important;
    height: 24px !important;
}
.img-thumbnail-middle {
    width: 100px;
}
.img-thumbnail-lg {
    width: 120px;
    height: auto;
}
.img-thumbnail-circle {
    width: 120px;
    height: 116px;
    border: 1px solid #f4f4f4;
    padding: 2px 4px;
    border-radius: 50%;
}
.img-thumbnail-small {
    width: 24px !important;
    height: 24px !important;
}
.img-thumbnail-post {
    width: 32px !important;
    height: 32px !important;
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
    height: 100vh;
}
@media (min-width: 768px) {
    #mainpage {
        min-height: 90.5% !important;
    }
    .avatar {
        width: 72px;
        height: 72px;
    }
    .card-img-list {
        min-height: 190px !important;
        max-height: 190px !important;
    }
    .img-category {
        width: 100%;
        height: auto;
        max-height: 200px;
    }
    .img-logo {
        min-width: 165px !important;
        max-width: 180px !important;
    }
    .img-thumbnail-post {
        width: 64px !important;
        height: 100% !important;
    }
}