#CatalogTabContent .nav-tabs {
    border-bottom: 0;
}

#CatalogTabContent .nav-tabs .nav-link {
    color: #596D7C;
    padding: 12px 15px 5px 15px;
}

#CatalogTabContent .nav-tabs .nav-link.active {
    color: #2F80ED;
    background-color: #fff;
    border: 0;
    border-bottom: 4px solid #2F80ED;
}

#CatalogTabContent .nav-tabs .catalog-tab-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: moco-tab-spinner 0.6s linear infinite;
}

#CatalogTabContent .nav-tabs .nav-link:not(.active):hover {
    color: #0F60CD;
    background-color: #fff;
    border-color: #fff;
}

#CatalogTabContent .nav-tabs .nav-link:focus {
    box-shadow: none;
}

@keyframes moco-tab-spinner {
    to {
        transform: rotate(360deg);
    }
}

#CatalogPageTabContent {
    border-top: 1px solid #ddd;
}

.thumbnail-course {
    padding: 0;
    position: relative;
}

.thumbnail-course:hover {
    box-shadow: 0px 7px 14px rgba(65, 69, 88, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.07);
}

.thumbnail-img-block {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.thumbnail-img-adaptive-block {
    width: 100%;
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.thumbnail-img-adaptive {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    border-radius: 5px 5px 0 0;
}

.thumbnail-img-block-list {
    width: 240px;
    height: 130px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


.thumbnail-course .truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.thumbnail-course .course-title h6 {
    margin-top: 5px;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    color: #344050;
    display: contents;
}

.thumbnail.thumbnail-course.selected,
.course-list-row.selected {
    box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
}

.thumbnail {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

.thumbnail.list {
    margin-bottom: 0;
    border: 0;
}

.thumbnail .caption {
    padding: 9px;
    cursor: pointer;
}

.thumbnail.list .caption {
    padding: 0 20px;
    max-width: 600px;
}

.thumbnail .course-period,
.thumbnail.list .course-period {
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: #9DA9BB;
}

.thumbnail .more-info-area {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.thumbnail.list .more-info-area {
    position: absolute;
    right: 15px;
    top: 50px;
}


.thumbnail .more-info-area a.more:hover {
    text-decoration: none;
}

.opacity-overlay-block {
    opacity: 0;
    background-color: rgb(0, 0, 0);
}

.fa.fa-angle-down,
.fa.fa-angle-up {
    padding: 0 7px;
    font-size: 18px;
    color: #1177d1;
}

.fa.fa-angle-down.small,
.fa.fa-angle-up.small {
    font-size: 16px;
}

.course-more-info-area {
    width: 0;
    padding: 0;
}

.course-more-info-area.selected {
    box-sizing: border-box;
    padding: 10px;
    margin: 5px;
    width: 100%;
}

.course-more-info-area.selected .item-row-course {
    border: 1px solid #ddd;
}

.course-more-info-area.selected .item-row-course .content {
    padding: 10px;
}

.head-info-block .course-name {
    padding: 15px 60px 20px 0;
    text-align: left;
    width: 100%;
    font-size: 16px !important;
    font-weight: 500;
    color: #344050;
    margin: 0;
    display: block;
    position: relative;
    border-bottom: 1px solid #E2E3E5;
}

.head-info-block .right-panel {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    right: 10px;
}

.admin-menu {
    min-width: 38px;
}

.star-rating-bg {
    color: #e0e0e0;
}

.star-rating-live {
    color: #F68F57;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.star-rating .star-rating__live {
    color: #bbbbbb;
}

.star-rating-item {
    width: 18px;
    height: 16px;
    flex: 0 0 18px;
}

.star-rating-img,
.star-rating-votes-number {
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.available-block {
    font-size: 13px;
    color: #5E6E82;
    min-height: 20px;
}

.item-row-course .tags .label {
    background-color :#E6EFFC;
    color: #1C4F93;
    font-weight: 500;
}

.outline-container-circ-progress {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    top: 20px;

// Білий зовнішній обвід
outline: 2px solid white;
    outline-offset: 2px;
}

.container-circ-progress {
    height: 46px;
    width: 46px;
    display: flex;
    place-items: center;
    justify-content: center;
}

.container-circ-progress.list {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 0 0 20px;
}

.container-circ-progress .circular-progress {
    width: 56px;
    height: 56px;
    background-color: #efefef;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: absolute;
}
.container-circ-progress .circular-progress:before {
     content: "";
     position: absolute;
     height: 46px;
     width: 46px;
     background-color: #fff;
     border-radius: 50%;
}

.container-circ-progress .circular-progress .circular-progress-label {
    z-index: 99;
    color: #748194;
}

.progress-area .progress {
    height: 8px;
    border-radius: 3px;
}

.progress-area .progress .progress-bar {
    border-radius: 3px;
}

.ml-cert-item {
    max-width: 380px;
    border: 1px dashed #748194;
    border-radius: 4px;
    padding: 10px;
    height: 64px;
}

.ml-cert-item.active {
    border: 1px dashed #27BCFD;
}

.ml-cert-item .ml-cert-caption {
    color: #748194;
}

.ml-cert-item.active .ml-cert-caption {
    color: #344050;
}

.ml-cert-btn-area {
    border: 1px solid #0D6EFD;
    border-radius: 4px;
    padding: 10px 14px;
}

.ml-teachers-label {
    font-weight: 500;
}

.ml-teachers {
    font-weight: 400;
}

.ml-cat-pic-background {
    height: 280px;
    border-radius: 5px;
    color: #fff;
    background-size: cover !important;
}

.ml-cat-row-bg {
    padding-left: 30px;
    padding-right: 40px;
    margin-top: -50px;
}

.ml-cat-item {
    background: #EDF2F9;
    border: 1px solid #D8E2EF;
    border-radius: 4px;
    min-height: 60px;
    cursor: pointer;
}

.ml-cat-item:focus {
    box-shadow: 0 0 0 4px rgba(49, 132, 253, 0.5);
}

.ml-cat-item:hover {
    background: #E5F7FF;
    border: 1px solid #1978A2;
}

.ml-cat-item.active,
.ml-cat-item:active {
    background: #E6EFFC;
    border: 1px solid #2C7BE5;
}

.ml-cat-item:hover .ml-cat-label {
    color: #1978A2;
}

.ml-cat-item.active .ml-cat-label,
.ml-cat-item:active .ml-cat-label {
    color: #2C7BE5;
}

.ml-cat-item .badge-info {
    color: #fff;
    background-color: #2C7BE5;
}

.ml-cat-item:hover .badge-info {
    background-color: #1978A2;
}

.ml-cat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ml-cat-item-card {
    border: 1px solid #D8E2EF;
    border-radius: 8px;
    min-height: 160px;
    cursor: pointer;
    background-color: #fff;
}

.ml-cat-item-card .ml-cat-pic-icon {
    background-size: 100% !important;
    transition: background-size 0.3s ease-in-out;
}

.ml-cat-item-card:hover {
    box-shadow: 0 7px 14px rgba(65, 69, 88, 0.1), 0 3px 6px rgba(0, 0, 0, 0.07);
}

.ml-cat-item-card:hover .ml-cat-pic-icon {
    background-size: 110% !important;
}

.ml-cat-label-card {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 50px;
    color: #232E3C;
}

.ml-cat-label-card-descr {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    height: 80px;
    color: #5E6E82;
    font-size: small;
}

.ml-cat-edit {
    left: 20px;
    top: 0;
}

.ml-cat-main-link:hover {
    text-decoration: none;
}

.ml-cat-pic-icon {
    height: 80px;
    width: 80px;
    background-size: cover !important;
    border-radius: 6px;
}

.ml-cat-pic-icon .fa-pencil-square-o {
    font-size: 20px;
    color: #fff;
}

.ml-btn-catedory {
    justify-content: space-between;
    align-items: center;
}

.ml-nocourses {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 300px;
}

.ml-nocourses .mess-label {
    color: #9DA9BB;
    max-width: 400px;
}

.search-form-control {
    width: 100% !important;
    max-width: 330px!important;
    min-width: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.7422 10.3439C12.5329 9.2673 13 7.9382 13 6.5C13 2.91015 10.0899 0 6.5 0C2.91015 0 0 2.91015 0 6.5C0 10.0899 2.91015 13 6.5 13C7.93858 13 9.26801 12.5327 10.3448 11.7415L10.3439 11.7422C10.3734 11.7822 10.4062 11.8204 10.4424 11.8566L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L11.8566 10.4424C11.8204 10.4062 11.7822 10.3734 11.7422 10.3439ZM12 6.5C12 9.53757 9.53757 12 6.5 12C3.46243 12 1 9.53757 1 6.5C1 3.46243 3.46243 1 6.5 1C9.53757 1 12 3.46243 12 6.5Z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
    padding: .375rem .75rem .375rem 2.375rem;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.search-form-control::placeholder {
    color: #B6C1D2;
}

.filters-panel .select2-container {
    margin: 0 10px 5px 0;
}

#fsort {
    height: 36px;
    border: 1px solid #B6C1D2;
    border-radius: 4px;
    margin-right: 10px;
}

.select2-selection:focus-visible {
    outline: none;
}

.filters-panel .select2-container--default .select2-selection--multiple,
.filters-panel .select2-container .selection .select2-selection--single .select2-selection__rendered {
    border: 1px solid #ced4da;
    border-radius: 4px;
    cursor: text;
}

.filters-panel .select2-container .selection .select2-selection--single .select2-selection__rendered {
    line-height: 34px;
}

.filters-panel .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 35px;
}

.filters-panel .select2-container--default .select2-selection--single {
    border: 0;
    line-height: 34px;
}

.pagin-region .page-link {
    padding: 0.5rem 0.75rem;
}

.thumbnail-course .caption .course-name-link:hover .course-name {
    color: #2C7BE5;
}

.thumbnail-course .caption .course-name-link:hover {
    text-decoration: none;
}

.notavailable .label {
    position: absolute;
    left: 15px;
    top: 15px;
    background: #F68F57;
    border-radius: 3px;
    padding: 0.3em 0.5em;
}

.tag-filter {
    width: 160px;
    border-bottom: 1px solid #9c9c9c;
    cursor: pointer;
}

#filterTag {
    position: absolute;
}

#filterTag .modal-dialog {
    width: 300px;
    max-height: 430px;
    position: absolute;
    right: 10px;
    top: 170px;
}

#filterTag .modal-content {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border: 0;
}

#filterTag .modal-body {
    border-top: 2px solid #9c9c9c;
}

#filterTag .find-tag-input {
    padding-right: 30px;
}

#filterTag .find-icon {
    position: absolute;
    right: 25px;
    cursor: text;
    opacity: .5;
}

#filterTag .select-dropdown {
    border-bottom: 1px solid #d0dde9;
}

#filterTag .select-dropdown {
    max-height: 150px;
    overflow: auto;
}

#filterTag label {
    display: inline;
}

#filterTag .cb-tag:focus {
    box-shadow: none;
}

#filterTag .counter-label.selected {
    font-weight: 800;
}

.learning-filter-panel .top-tag-label.selected {
    font-weight: 600;
}

.learning-filter-panel {
    display: none;
}

.learning-filter-panel .tag-filter .fa-angle-down {
    color: #373a3c;
    transition: transform .5s;
    transform: rotate(0deg);
}

.learning-filter-panel .tag-filter .fa-angle-down.active {
    transform: rotate(180deg);
}

#page-local-moco_my_learning-index.modal-open {
    overflow: auto;
}

#page-local-moco_my_learning-index .modal-backdrop.show {
    opacity: 0;
}

.row-category-as-breadcrumb {
    overflow: auto;
}

.activityname {
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.activityname .mod-type {
    font-weight: 400;
    font-size: 13px;
    color: #5E6E82;
}

.activityname .instancename {
    font-weight: 400;
    font-size: 13px;
    color: #232E3C;
}

.item-row-course .sec-header {
    color: #373a3c;
    font-size: .9375rem;
    font-weight: 400;
}

.section-item {
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.section-item:last-child {
    border-bottom: none;
}

.section-item .fa-angle-down {
    color: #373a3c;
    transition: transform .5s;
    transform: rotate(0deg);
    font-size: 14px;
}

.section-item.collapsed .fa-angle-down {
    transform: rotate(180deg);
}

.header-search-panel .dropdown-item {
    padding: 0.25rem 1rem;
}

.dropdown-menu.courses-manage {
    z-index: 9999;
}

.badge.bg-light {
    padding: .5em .8em;
    border-radius: 1rem;
}

.categories-breadcrumb {
    font-size: 13px;
}

.categories-breadcrumb .fa.fa-angle-right {
    font-size: 13px;
}

#CatalogTabContent .tooltip.fade {
    opacity: .8 !important;
}

#CatalogTabContent .tooltip .tooltip-inner {
    max-width: unset;
    width: 400px;
}

@media screen and (min-width: 1200px) {
    .mb-xl-3 {
        margin-bottom: 1rem !important;
    }
}

@media screen and (max-width: 1200px) {
    .category-as-cards div[class*=" col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }
    .mb-md-2 {
        margin-bottom: .5rem !important;
    }
}

@media (max-width: 778px) {
    .index-page-tabs .nav-tabs {
        padding: 0;
        background-color: unset;
    }
}

@media (max-width: 450px) {
    .header-search-panel {
        flex-wrap: wrap;
        margin-top: 10px;
    }
    .header-search-panel .dropdown {
        position: absolute;
        right: 0;
        top: -45px;
    }
    .filters-panel {
        flex-wrap: wrap;
    }
    .filters-panel .select2-container {
        margin: 0;
    }
    .row-category-as-breadcrumb {
        margin: 0;
    }
    .available-block {
        display: inline-block;
    }
    .thumbnail.list {
        padding-bottom: 20px;
    }
    .thumbnail.list .more-info-area {
        bottom: 0;
        top: auto;
    }
    .thumbnail-img-block-list {
        width: 100%;
        margin-bottom: 5px;
    }
}