#msb,
.mnb {
    display: none;
}
.form-select:focus {
    box-shadow: none;
}
.file-preview .fileinput-remove,
.fileinput-remove-button {
    display: none;
}
.circle-btn .bi {
    color: #0d6efd !important;
}
.fw-bold {
    font-weight: bold !important;
}

.swiper {
    margin-right: 0;
    margin-left: 0;
}
#faq-search-bar {
    font-size: 16px;
    font-weight: 500;
}

.navbar-default {
    /* background-color: #FFF; */
    margin-left: 280px;
}

/*main side bar*/
.msb {
    width: fit-content;
    background-color: #f5f7f9;
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    min-height: 100%;
    overflow-y: auto;
    white-space: nowrap;
    height: 100%;
    z-index: 1;
    border-right: 1px solid #ddd;
    .navbar {
        border: none;
        margin-left: 0;
        background-color: inherit;
    }
    .navbar-header {
        width: 100%;
        border-bottom: 1px solid #e7e7e7;
        margin-bottom: 20px;
        background: #fff;
    }
    .navbar-nav {
        .panel {
            border: 0 none;
            box-shadow: none;
            margin: 0;
            background: inherit;
        }
        li {
            display: block;
            width: 100%;
            a {
                padding: 15px;
                color: #5f5f5f;
                .glyphicon,
                .fa {
                    margin-right: 8px;
                }
            }
        }
    }
    .nb {
        padding-top: 5px;
        padding-left: 10px;
        margin-bottom: 30px;
        overflow: hidden;
    }
}
ul.nv,
ul.ns {
    position: relative;
    padding: 0;
    list-style: none;
}
.nv {
    li {
        display: block;
        position: relative;

        &::before {
            clear: both;
            content: "";
            display: table;
        }
        a {
            color: #444;
            padding: 10px 25px;
            display: block;
            vertical-align: middle;

            .ic {
                font-size: 16px;
                margin-right: 5px;
                font-weight: 300;
                display: inline-block;
            }
        }
    }
    /*ns: nav-sub*/
    .ns {
        li {
            a {
                padding: 10px 50px;
            }
        }
    }
}

/*main content wrapper*/
.mcw {
    margin-left: 280px;
    position: relative;
    min-height: 100%;

    /*content view*/
    .cv {
    }
}

/*globals*/
a,
a:focus,
a:hover {
    text-decoration: none;
}

.inbox {
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    ul,
    li {
        margin: 0;
        padding: 0;
    }
    ul {
        li {
            list-style: none;
            a {
                display: block;
                padding: 10px 20px;
            }
        }
    }
}
.msb,
.mnb {
    -moz-animation: slidein 300ms forwards;
    -o-animation: slidein 300ms forwards;
    -webkit-animation: slidein 300ms forwards;
    animation: slidein 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.mcw {
    -moz-animation: bodyslidein 300ms forwards;
    -o-animation: bodyslidein 300ms forwards;
    -webkit-animation: bodyslidein 300ms forwards;
    animation: bodyslidein 300ms forwards;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
body.msb-x {
    .mcw,
    .mnb {
        margin-left: 0;
        -moz-animation: bodyslideout 300ms forwards;
        -o-animation: bodyslideout 300ms forwards;
        -webkit-animation: bodyslideout 300ms forwards;
        animation: bodyslideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    .msb {
        -moz-animation: slideout 300ms forwards;
        -o-animation: slideout 300ms forwards;
        -webkit-animation: slideout 300ms forwards;
        animation: slideout 300ms forwards;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
}

/* Slide in animation */
@-moz-keyframes slidein {
    0% {
        left: -200px;
    }
    100% {
        left: 0;
    }
}
@-webkit-keyframes slidein {
    0% {
        left: -200px;
    }
    100% {
        left: 0;
    }
}
@keyframes slidein {
    0% {
        left: -200px;
    }
    100% {
        left: 0;
    }
}
@-moz-keyframes slideout {
    0% {
        left: 0;
    }
    100% {
        left: -200px;
    }
}
@-webkit-keyframes slideout {
    0% {
        left: 0;
    }
    100% {
        left: -200px;
    }
}
@keyframes slideout {
    0% {
        left: 0;
    }
    100% {
        left: -200px;
    }
}

@-moz-keyframes bodyslidein {
    0% {
        left: 0;
    }
    100% {
        margin-left: 200px;
    }
}
@-webkit-keyframes bodyslidein {
    0% {
        left: 0;
    }
    100% {
        left: 0;
    }
}
@keyframes bodyslidein {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: 200px;
    }
}
@-moz-keyframes bodyslideout {
    0% {
        margin-left: 200px;
    }
    100% {
        margin-right: 0;
    }
}
@-webkit-keyframes bodyslideout {
    0% {
        margin-left: 200px;
    }
    100% {
        margin-left: 0;
    }
}
@keyframes bodyslideout {
    0% {
        margin-left: 200px;
    }
    100% {
        margin-left: 0;
    }
}
.new-member img {
    height: 83px;
    width: 83px;
}
#side-nav-bar img {
    height: 22px;
    width: 22px;
}
#side-nav-bar {
    padding-right: 10px;
}
.post-create-icons {
    justify-content: space-between;
}
.flex__column {
    justify-content: space-between;
    flex-direction: row;
}
.dataTables_length,
.dataTables_filter {
    float: left;
}
.fc-toolbar-chunk .btn-group span {
    background-color: #fff;
}
@media (max-width: 1024px) {
    .new-member img {
        height: 50px;
        width: 50px;
    }
    .fs-15 {
        font-size: 14px;
    }
    .small,
    small {
        font-size: 0.8em;
    }
    .x-small {
        font-size: 11px;
    }
    label,
    td {
        font-size: 13px;
    }
    .fc .fc-toolbar-title {
        font-size: 1.5em;
        margin: 0;
    }
}

@media (max-width: 992px) {
    .small,
    small {
        font-size: 0.5em;
    }
    .guest-header .small {
        font-size: 0.8em !important;
    }
    .nav-user {
        font-size: 0.6em !important;
    }
    .nav-icon.circle-btn {
        margin-left: 0.5rem !important;
    }
    label {
        font-size: 12px;
    }
    .form-control {
        font-size: 0.8rem;
    }
    .contact-icons {
        justify-items: end;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .fc-toolbar-chunk {
        width: fit-content;
        z-index: 100;
    }
    .fc .fc-toolbar-title {
        font-size: 1.3em !important;
        margin: 0;
    }
}

@media screen and (max-width: 1240px) {
    .container-fluid .navbar.navbar-default {
        /* background-color: #FFF; */
        margin-left: 0px !important;
    }
    #msb {
        padding-top: 61px !important;
        z-index: 1000;
    }
    .web-sidebar {
        display: none;
    }
    #msb,
    .mnb {
        display: block;
    }
    #signInPopUp .small {
        font-size: 12px;
    }
    .small,
    small {
        font-size: 0.8em;
    }
    #side-nav-bar img {
        height: 16px;
        width: 16px;
    }
    #side-nav-bar {
        padding-right: 10px;
    }
    .flex__column {
        flex-direction: column;
    }
    .post-create-icons {
        justify-content: flex-start;
    }
    .fs-17 {
        font-size: 14px;
    }
    .dataTables_filter {
        padding-top: 10px;
    }
    /* .dataTables_filter::before {
            padding-left: 0;
        } */
    div.table-responsive
        > div.dataTables_wrapper
        > div.row
        > div[class^="col-"]:last-child {
        padding-left: 0;
    }
    .stickybar.px-4 {
        padding: 0.5rem !important;
    }
    #pills-contact-tab {
        font-size: 14px;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .btn-edit {
        margin-bottom: 6px;
    }

    .fc .fc-daygrid-day-bottom {
        padding: 5px 3px 0 !important;
    }

    .fc .fc-daygrid-day-number {
        padding: 9px 4px 0 4px !important;
    }
}

/* Use this media-query for mainly iPhone 4/5/SE and Samsung Galaxy S9+ */
@media (max-width: 375.9px) {
}

@media (max-width: 400.1px) {
    .fc .fc-col-header-cell-cushion {
        font-size: 8px !important;
        width: 24px;
    }
}

/* mobile off canvas */

@media (max-width: 575.98px) {
    .mobile-slide {
        width: 85vw;
    }
}

main {
    min-height: 50.2rem;
}