/* Write your custom CSS here */

.page-content {
    margin-left: 0;
    width: 100%;
}

.secondary-sidebar {
    width: 250px;
}

.page-header,
.page-inner {
    width: calc(100% - 250px);
}

.page-link {
    color: #8014f1;
}

.page-link:focus,
.page-link:active,
.page-link:hover {
    box-shadow: none;
}

.page-item.active .page-link {
    border-color: #6a06d4 !important;
    background-color: #8014f1 !important;
}


.accordion-menu li.open .sub-menu li:not(.animation) a {
    opacity: 1;
}

.btn-settings-toggle {
    margin: 5px 22px 10px 22px;
    width: calc(100% - 44px);
}

.btn-settings-toggle i {
    display: none;
}

.collapsed-sidebar .btn-settings-toggle {
    margin: 10px 10px;
    width: 41px;
    height: 41px;
    border-radius: 41px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapsed-sidebar .btn-settings-toggle i {
    font-size: 18px;
    display: block;
}

.collapsed-sidebar .btn-settings-toggle span {
    display: none;
}

.note-icon-caret:before {
    display: none !important;
}

[class*=" note-icon"]:before,
[class^=note-icon]:before,
.note-btn {
    font-size: 9px !important;
}

.precision-image {
    margin-bottom: 0;
    padding-top: 54%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hidden-sidebar.page-sidebar-visible .secondary-sidebar {
    margin-left: 0 !important;
}

.hidden-sidebar .navbar-nav {
    justify-content: flex-end !important;
}

.note-editor .note-editing-area .note-editable {
    background-color: white;
}

/* Skeleton Loading */
.skeleton h1,
.skeleton h2,
.skeleton h3,
.skeleton h4,
.skeleton h5,
.skeleton h6,
.skeleton p,
.skeleton li,
.skeleton .btn,
.skeleton label,
.skeleton span,
.skeleton small,
.skeleton article,
.skeleton figure,
.skeleton button,
.skeleton tr,
.skeleton .profile-avatar,
.skeleton .form-control {
    border-radius: 12px;
    color: transparent !important;
    -moz-appearance: none !important;
         appearance: none !important;
    -webkit-appearance: none;
    background-color: rgb(230, 230, 230) !important;
    background-image: none !important;
    border-color: rgb(230, 230, 230) !important;
}

.skeleton h1::-moz-placeholder, .skeleton h2::-moz-placeholder, .skeleton h3::-moz-placeholder, .skeleton h4::-moz-placeholder, .skeleton h5::-moz-placeholder, .skeleton h6::-moz-placeholder, .skeleton p::-moz-placeholder, .skeleton li::-moz-placeholder, .skeleton .btn::-moz-placeholder, .skeleton label::-moz-placeholder, .skeleton .form-control::-moz-placeholder {
    color: transparent;
}

.skeleton h1::placeholder,
.skeleton h2::placeholder,
.skeleton h3::placeholder,
.skeleton h4::placeholder,
.skeleton h5::placeholder,
.skeleton h6::placeholder,
.skeleton p::placeholder,
.skeleton li::placeholder,
.skeleton .btn::placeholder,
.skeleton label::placeholder,
.skeleton .form-control::placeholder {
    color: transparent;
}

@keyframes skeleton {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

.skeleton {
    pointer-events: none;
    animation: skeleton 1s infinite alternate;
}

.skeleton img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
}

.page-right-sidebar {
    width: 300px;
    right: -300px
}