/* Minification failed. Returning unminified contents.
(5855,36): run-time error CSS1046: Expect comma, found '24'
(5855,42): run-time error CSS1046: Expect comma, found '/'
(6084,52): run-time error CSS1046: Expect comma, found '24'
(6084,58): run-time error CSS1046: Expect comma, found '/'
(6084,88): run-time error CSS1046: Expect comma, found '24'
(6084,94): run-time error CSS1046: Expect comma, found '/'
(6184,40): run-time error CSS1046: Expect comma, found '24'
(6184,46): run-time error CSS1046: Expect comma, found '/'
(6840,40): run-time error CSS1046: Expect comma, found '24'
(6840,46): run-time error CSS1046: Expect comma, found '/'
(8388,40): run-time error CSS1046: Expect comma, found '38'
(8388,46): run-time error CSS1046: Expect comma, found '/'
(8398,40): run-time error CSS1046: Expect comma, found '38'
(8398,46): run-time error CSS1046: Expect comma, found '/'
(8406,40): run-time error CSS1046: Expect comma, found '38'
(8406,46): run-time error CSS1046: Expect comma, found '/'
(8410,40): run-time error CSS1046: Expect comma, found '38'
(8410,46): run-time error CSS1046: Expect comma, found '/'
(8415,40): run-time error CSS1046: Expect comma, found '38'
(8415,46): run-time error CSS1046: Expect comma, found '/'
(8425,40): run-time error CSS1046: Expect comma, found '38'
(8425,46): run-time error CSS1046: Expect comma, found '/'
(8602,19): run-time error CSS1046: Expect comma, found '37'
(8602,25): run-time error CSS1046: Expect comma, found '/'
(8618,19): run-time error CSS1046: Expect comma, found '31'
(8618,24): run-time error CSS1046: Expect comma, found ')'
(8628,44): run-time error CSS1046: Expect comma, found '38'
(8628,50): run-time error CSS1046: Expect comma, found '/'
(8705,37): run-time error CSS1046: Expect comma, found '0'
(8705,41): run-time error CSS1046: Expect comma, found '/'
(8720,37): run-time error CSS1046: Expect comma, found '0'
(8720,41): run-time error CSS1046: Expect comma, found '/'
(9540,40): run-time error CSS1046: Expect comma, found '38'
(9540,46): run-time error CSS1046: Expect comma, found '/'
(10779,44): run-time error CSS1046: Expect comma, found '38'
(10779,50): run-time error CSS1046: Expect comma, found '/'
(10784,40): run-time error CSS1046: Expect comma, found '38'
(10784,46): run-time error CSS1046: Expect comma, found '/'
(14187,37): run-time error CSS1046: Expect comma, found '0'
(14187,41): run-time error CSS1046: Expect comma, found '/'
(14977,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14978,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14993,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14994,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14995,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14996,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14997,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14998,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14999,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15000,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15001,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15002,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15003,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15004,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15005,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15006,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15007,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15030,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-selector-caption-text'
(15031,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-selector-caption-background'
(15130,15): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15131,16): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15165,19): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15166,18): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15167,20): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15168,21): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15171,29): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15171,76): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15205,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15206,15): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15240,19): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15241,18): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15242,20): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15243,21): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15246,29): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15246,76): run-time error CSS1039: Token not allowed after unary operator: '-ck-todo-list-checkmark-size'
(15359,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-image-caption-text'
(15360,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-image-caption-background'
(15367,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-marker-yellow'
(15371,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-marker-green'
(15375,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-marker-pink'
(15379,25): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-marker-blue'
(15383,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-pen-red'
(15388,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-highlight-pen-green'
(15394,30): run-time error CSS1039: Token not allowed after unary operator: '-ck-image-style-spacing'
(15404,20): run-time error CSS1039: Token not allowed after unary operator: '-ck-image-style-spacing'
(15410,21): run-time error CSS1039: Token not allowed after unary operator: '-ck-image-style-spacing'
(15420,20): run-time error CSS1039: Token not allowed after unary operator: '-ck-image-style-spacing'
(15441,19): run-time error CSS1039: Token not allowed after unary operator: '-ck-inline-image-style-spacing'
(15442,22): run-time error CSS1039: Token not allowed after unary operator: '-ck-inline-image-style-spacing'
(15446,21): run-time error CSS1039: Token not allowed after unary operator: '-ck-inline-image-style-spacing'
(15450,20): run-time error CSS1039: Token not allowed after unary operator: '-ck-inline-image-style-spacing'
(15491,19): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-mention-background'
(15492,14): run-time error CSS1039: Token not allowed after unary operator: '-ck-color-mention-text'
 */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Inter';
}

@font-face {
    font-family: 'Queulat-bold';
    src: url("/fonts/queulat-bold.otf");
}

@font-face {
    font-family: 'Queulat-bold';
    src: url("/fonts/queulat-bold.otf");
}

@font-face {
    font-family: 'Queulat-light';
    src: url("/fonts/queulat-light.otf");
}

@font-face {
    font-family: 'Queulat-medium';
    src: url("/fonts/queulat-medium.otf");
}

@font-face {
    font-family: 'Queulat-regular';
    src: url("/fonts/queulat-regular.otf");
}

@font-face {
    font-family: 'Queulat';
    src: url('/fonts/Latinotype - Queulat Cnd Regular.otf');
}

.main-wrapper {
    position: relative;
}

.loader-full-page {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    background-color: #343434a6;
    height: 100%;
    opacity: 1 !important;
}

.right-section {
    padding-bottom: 40px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.5s ease;
    width: calc(100% - 320px);
    margin-left: 320px;
    min-height: 100vh;
    background-color: #F2F2F2;
    padding-left: 30px;
    padding-right: 30px;
}

.main-wrapper.active .right-section {
    width: calc(100% - 84px);
    margin-left: 84px;
}

.progress-main-section {
    border: 1px solid #EAECF0;
    border-radius: 16px;
    background-color: #fff;
    position: relative;
}

.dashboard-section-wrapper .progress-main-section {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    border: none;
}

    .dashboard-section-wrapper .progress-main-section .progress-body {
        padding: 20px 16px 20px !important;
    }

.progress-header h3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}

.progress-header {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #EAECF0;
}

.progress-body, .update-body {
    padding: 32px 17px;
}

.progress-inner-body {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    padding: 19px 19px;
    display: flex;
    justify-content: space-between;
    background-color: #fff
}

.progress-left-side {
    display: flex;
    align-items: center;
}

    .progress-left-side img {
        width: 60px;
        margin-right: 20px;
    }

    .progress-left-side svg {
        margin-right: 20px;
    }

.progress-text h5 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
    color: #101828;
}

.progress-text p {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
}

.progress-text h3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
}

.progress-right-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}

.dot-icon-wrapper i {
    color: #98A2B3;
    font-size: 19px;
}


.cursor-pointer {
    cursor: pointer;
}


.playlist-section li.active {
    background-color: #F4EBFF;
    border-radius: 6px;
}

.playlist-section li:hover {
    background-color: #F4EBFF;
    border-radius: 6px;
    /* transform: scale(1.1); */
    /* padding: 0px 10px; */
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

.playlist-section {
    padding-bottom: 15px;
    max-height: 300px;
    overflow: auto;
}

.progress-main-border .card-header-custom {
    padding: 16px 0px;
}

.progress-main-section.progress-main-border.border-top-0 {
    padding: 7px;
}

.search-tab-wrapper {
    position: relative;
}

    .search-tab-wrapper img {
        position: absolute;
        left: 14px;
        top: 14px;
    }

    .search-tab-wrapper svg {
        position: absolute;
        left: 14px;
        top: 14px;
    }

.change-view-div {
    border: 1px solid #D0D5DD;
    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.05));
    border-radius: 8px;
    display: flex;
}

    .change-view-div span {
        display: inline-block;
        padding: 8px 10px;
        background-color: #fff;
    }


    .change-view-div .active {
        background-color: #F9FAFB;
    }

.grade-list {
    display: flex;
    align-items: center;
    width: 100%;
}

    .grade-list > div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        border-radius: 16px;
    }

        .grade-list > div div {
            color: #344054;
            border-radius: 16px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 2px 8px;
            font-weight: 500;
            font-size: 12px;
        }

.teaching-practice-content {
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.myactivity-content-inner-video-title .teaching-practice-content {
    max-width: fit-content;
    margin-left: auto;
    overflow: auto;
}

.border-add {
    border: 1px solid #EAECF0;
    border-radius: 12px;
    background-color: #fff;
}

.playlist-button {
    margin-top: 5px;
    margin-bottom: 15px;
}

.progress-main-section.progress-main-border {
    border: none;
    border-top: 1px solid #EAECF0;
}

.progress-main-border .progress-body {
    padding: 0px 0px;
}

.videoplayer-inner {
    margin-bottom: 18px;
}

    .videoplayer-inner img, .videoplayer-inner video {
        width: 100%;
        height: 100%;
        margin-bottom: 18px;
    }

.school-video-dash .update-list-section {
    margin-top: 0px;
}

.nopad {
    padding-left: 0px;
    padding-right: 0px;
}

.change-view-div span:hover {
    background-color: #F9FAFB;
    cursor: pointer;
}

.thought-starter-list {
    margin: 0px 22px 10px;
    padding: 0px 22px 20px;
}

    .thought-starter-list li {
        list-style: decimal;
        color: #000;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
    }

.material-list-wrapper span img {
    margin-right: 11px;
    cursor: pointer;
}

.material-list-wrapper span svg {
    margin-right: 4px;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.material-list-wrapper {
    padding: 0px 22px 0px;
    color: #000;
}

.breadcrub-wrapper ol.breadcrumb {
    background-color: inherit;
    padding: 0;
}

    .breadcrub-wrapper ol.breadcrumb li {
        margin-right: 18px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }

.breadcrub-wrapper .breadcrumb li + li::before {
    padding-right: 32px;
    display: inline-block;
    margin: 3px 0.2em;
    background-image: url('/assets/media/images/TCImages/chevron-right.svg');
    background-repeat: no-repeat;
    width: 20px;
    height: 19px;
    content: "";
    position: relative;
    top: -4px;
}

.breadcrub-wrapper .breadcrumb-item.active {
    color: #6941C6;
    font-weight: 600;
}

.activityTab-list-wrapper .nav li {
    margin-right: 10px;
    padding: 10px 0px 11px 0px;
}

    .activityTab-list-wrapper .nav li a {
        color: #667085;
        padding: 10px 15px 14px 15px;
        cursor: pointer;
    }

.activityTab-list-wrapper li a:hover {
    text-decoration: none;
}

.activityTab-list-wrapper li .active {
    border-bottom: 1px solid #6F2495;
    color: #6F2495 !important;
}

.activityContent-list-wrapper {
    padding: 30px 15px;
}

.myactivity-content-video-title {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 6px;
    overflow: auto;
    margin-bottom: 20px;
    background-color: #fff;
}

.myactivity-content-inner-video-title {
    display: flex;
}

.w-2 {
    width: 2%;
}

.w-41 {
    width: 41%;
}

.w-43 {
    width: 43%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-12 {
    width: 14%
}

.video-main-section-myactivity, .finearts-title-myactivity, .date-added-title-myactivity, .account-title-myactivity, .dot-image-myactivity {
    margin: 0px 10px;
}

.toggle-body-innercontent {
    margin: 5px 30px 15px;
    padding: 30px;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    margin-top: 24px;
}

.card-header-custom .accordion-btn img {
    transform: rotate(90deg);
}

.card-header-custom .accordion-btn svg {
    transform: rotate(90deg);
    stroke: #98A2B3;
}

.progress-main-border .card-header-custom .collapsed img {
    transform: rotate(0deg);
}

.progress-main-border .card-header-custom .collapsed svg {
    transform: rotate(0deg);
}

.right-image-myactivity {
    cursor: pointer;
}

    .right-image-myactivity .active {
        transform: rotate(90deg);
    }

        .right-image-myactivity .active img {
            position: relative;
            top: 4px;
        }

        .right-image-myactivity .active svg {
            position: relative;
            top: 4px;
        }

.no-frame-selected {
    max-width: 900px;
    margin: auto;
}

.explamination-icon img {
    border: 8px solid #F9F5FF;
    display: inline;
    border-radius: 50%;
}

.explamination-icon svg {
    outline: 8px solid #F9F5FF;
    display: inline;
    border-radius: 50%;
    stroke: #6F2495;
}

.card-no-activity {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
}

.video-reflected-shared {
    margin: 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.avtar-section {
    display: flex;
    align-items: center;
}

.avtarImages-wrapper img {
    margin: 0 -10px;
    cursor: pointer;
}

.avtarImages-wrapper svg {
    margin: 0 -10px;
    cursor: pointer;
}

.edit-video-detail-button {
    margin: 20px 15px 0px;
    display: flex;
    justify-content: space-between;
}

.no-frame-selected.no-activity-yet {
    max-width: 1050px;
}

.explamination-icon {
    margin-bottom: 10px;
    margin-left: 8px;
}

.morenumber-text {
    background-color: #F2F4F7;
    width: 28px;
    height: 28px;
    display: inline-block;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin: 0px -7px;
}

.video-main-section-myactivity img {
    width: 122px;
    border-radius: 12px;
}


.dot-wrap {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
}

.dot-wrap-primary {
    background-color: #0BA5EC;
}

.dot-wrap-success {
    background-color: #12B76A;
}

.myactivity-content-video-title .right-image-myactivity .collapsed img {
    transform: rotate(0deg);
}

.myactivity-content-video-title .right-image-myactivity img {
    transform: rotate(90deg);
}

.resource-heading .resource-main-heading img {
    margin-left: 2px;
    width: 26px;
}

.myactivity-content-video-title .right-image-myactivity .collapsed svg {
    transform: rotate(0deg);
}

.myactivity-content-video-title .right-image-myactivity svg {
    transform: rotate(90deg);
}

.resource-heading .resource-main-heading svg {
    margin-left: 2px;
    width: 24px;
}


.dataTable-ft {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.activityTab-list-wrapper li.active a {
    border-bottom: 1px solid #6941C6;
    color: #6941C6;
}

.activityTab-list-wrapper .nav {
    margin-bottom: 20px;
    width: fit-content;
}

caption {
    display: none;
}

.create-new-user-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    background-color: #7F56D9;
    color: #fff;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .create-new-user-btn:not(:disabled):hover {
        background-color: #6d48bd;
        text-decoration: none;
        color: #fff;
    }

    .create-new-user-btn:hover i {
        color: #fff;
    }

.border-own {
    border: 1px solid #EAECF0;
}

.link-btn {
    padding: 0px 0;
    color: #7F56D9;
    border-bottom: 1px solid #7F56D9;
    border-radius: 0;
    font-size: 12px;
    text-transform: unset;
}

.dataTable_isEditable > .dataTable-bd tr:nth-child(even) > td:last-child {
    background-color: #d7d7d7;
}

.light-green-bg {
    background: #F9F5FF;
}

.own-second-data-table.border-own {
    border: solid 1px #e4e8ec !important;
}

.data-table table {
    margin-bottom: 0;
}

.resource-table tbody tr td:last-child {
    padding-right: 15px;
}

.own-second-data-table.border-own td {
    font-size: 14px;
    background-color: #fdfdfd;
    vertical-align: middle;
}

.own-second-data-table tbody tr td {
    border-bottom: 1px solid #ddd;
}

.dataTable-bd td {
    padding: 15px 10px;
    font: 400 12px/1 Roboto,"HelveticaNeue-Light",Helvetica,Arial,sans-serif;
}

.icon {
    display: inline-block;
    vertical-align: bottom;
    font-size: 0;
    background: transparent 0 0 no-repeat;
}

.icon_edit {
    width: 10px;
    height: 13px;
    fill: #828282;
}

.form-own .form-group .form-control {
    border: solid 1px #e0e5e9;
    border-radius: 5px;
    min-height: 40px;
    color: #31373a;
    height: inherit;
}

.cursor {
    cursor: pointer;
}

.account-icon img {
    position: inherit !important;
    top: 0 !important;
    left: 0 !important;
}

.account-icon svg {
    position: inherit !important;
    top: 0 !important;
    left: 0 !important;
}

.account-icon.ml-2 {
    position: relative;
    top: -2px;
}

.account-text a {
    color: #101828;
}

    .account-text a:hover {
        color: #101828;
        text-decoration: none;
    }

.color-blue-own-a a {
    color: #6941C6;
}

    .color-blue-own-a a:hover {
        color: #6941C6;
        text-decoration: none
    }

.fliter-by-list-header .text-3.mr-3 {
    white-space: nowrap;
}

.showmore-content {
    max-height: 100px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    transition: 0.3s ease-in-out;
}

.showmore-gradient {
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    position: absolute;
    bottom: 0;
}

.showmore-hidden {
    max-height: none;
}

.videoplayer-inner .video-js {
    width: 100% !important;
    padding-top: 56.25%;
    height: 0px !important;
    position: relative;
}

.create-new-list-text {
    padding: 16px;
    color: #000;
    font-size: 14px;
    text-align: left;
}

.draggable {
    cursor: move;
    user-select: none;
}

.dragged-style {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.drag-placeholder {
    height: 3px;
    width: 100%;
    background-color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hide {
    display: none;
}

.breadcrub-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.main-wrapper .btn.text-light-primary:hover {
    color: #6941C6;
}

.update-inner-list-section p {
    padding-right: 16px;
    margin-bottom: 0px;
}

.video-playlist-stop img {
    width: 10px;
    position: relative;
    top: -1px;
}

.video-playlist-stop svg {
    width: 10px;
    position: relative;
    top: -1px;
}

.playlist-section li {
    margin-bottom: 4px;
}

    .playlist-section li a:hover {
        text-decoration: none;
    }

.favoritePlayListBind {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
}

.update-inner-list-section a {
    color: #101828;
    word-break: break-word;
}

    .update-inner-list-section a:hover {
        text-decoration: none;
    }



.container-pagination {
    position: relative;
    display: inline-block;
    margin: 16px 0 16px 0;
}

.total-page {
    padding: 15px;
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
}

.subtle-shadow {
    box-shadow: 0 0 5px rgba(221, 221, 221, 0.5);
}

.bg-white {
    background-color: #fff !important;
}

.pagination-wrap .container-pagination .fa {
    font-size: 22px;
    position: relative;
    top: 3px;
}

.pagination-container {
    position: absolute;
    bottom: 100%;
    z-index: 55;
    left: 10px;
    right: 10px;
    background: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    max-height: 200px;
    overflow-y: auto;
}

.pagination-container-down-box {
    top: 54px;
    bottom: auto !important;
}

.pagination-wrap .fa {
    font-size: 32px;
    font-weight: 600;
}

.pad-half {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.sharing-table-wrapper .border-own-simple {
    border: solid 1px #e4e8ec;
}

.swapper-box-container li {
    min-height: 40px;
    box-shadow: 0 0 4px #ddd;
    text-align: center;
    background: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 15px;
    cursor: pointer;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

    .swapper-box-container li img {
        max-width: 100%;
        width: 25px;
    }

    .swapper-box-container li svg {
        max-width: 100%;
        width: 24px;
    }

.flex-one {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.video-js .vjs-big-play-button {
    top: 0px !important;
    right: 0px !important;
    left: 0px !important;
    bottom: 0px !important;
    margin: auto;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
    border: 3px solid #FFFFFF;
    backdrop-filter: blur(8px);
    border-radius: 48px;
}

    .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
        font-size: xxx-large;
        top: 15px;
    }

.roles-name-section {
    height: 86px;
    border-radius: 5px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 2px;
}

.playlist-section li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 8px;
    cursor: pointer;
    padding: 15px 10px;
    border-radius: 6px;
    color: #344054;
}

.add-padd {
    padding-top: 22px;
    padding-bottom: 22px;
}

.btn-add-resoure:not(:disabled):hover {
    background: #e9e9e9;
    color: #6F2495;
}

.item-image-sec {
    width: 50%;
}

.profile-image-sec img {
    width: 26px;
    border-radius: 50%;
    max-width: 26px;
}


.profile-image-sec svg {
    width: 24px;
    border-radius: 50%;
}

.max-width-add {
    max-width: 900px;
}


.modal-footer {
    width: 100%;
    padding: 24px;
}

.upload-delete-button .btn {
    border: 1px solid #ddd;
    cursor: pointer;
}

    .upload-delete-button .btn:not(:disabled):hover {
        background: #ddd;
    }

.overflow-scroll-add {
    max-height: 350px;
    overflow: auto;
}

.add-padd-new {
    padding-top: 16px;
    padding-bottom: 16px;
}

.row-active-wrapper {
    background: #F9F5FF;
    border: 1px solid #EAECF0;
}

.remove-select-button {
    background-color: #fff;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}

span.checkmark.disabled-border {
    border: 2px solid #ddd !important;
}

.disabled-color {
    color: #ddd;
}

.report-head-name {
    font-size: 20px;
    background: #fff;
    width: 100%;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.report-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-pack: start;
    -webkit-justify-content: start;
    -ms-flex-pack: start;
    justify-content: start;
    width: 100%;
}

    .report-header li {
        text-align: center;
        border: 1px solid #ddd;
        padding: 10px 8px;
        background: rgba(108,91,91,0.05);
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        width: 20%;
    }

        .report-header li.active {
            border-bottom: none;
            background: #fff;
            border-top: 3px solid #2376dc;
        }

.bottom-data-reporting {
    border: 1px solid #ddd;
    background: #fff;
    border-top: none;
}

.evaluation-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1%;
    background: #f1eded5e;
    border: 1px solid #ddd;
    padding: 15px 0;
}

.evaluation-head-left-sec {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 25px;
}

.date-view {
    margin: 0 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
}

.own-second-data-table thead tr th:first-child {
    padding-left: 15px !important;
    border-radius: 5px 0 0 0;
}

.own-second-data-table thead tr th {
    background-color: #fff;
}

.js-modal-reject img {
    width: 13px;
}

.own-second-data-table tbody tr:last-child td {
    border-bottom: none;
}

.resource-table tbody tr td:first-child {
    padding-left: 15px;
}

body .date-view input {
    background-color: #fff;
    padding: 3px 5px;
    width: 160px;
}

.wrapper {
    margin: 20px 20px;
}

.datepicker-icon {
    position: absolute;
    right: 4px;
    z-index: 99;
    top: 6px;
}

.date-input-icon-wrapper {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.datePicker-ui {
    position: relative;
}


.growth-report-section li {
    color: #667085;
    padding: 10px 15px 14px 15px;
    cursor: pointer;
}

    .growth-report-section li.active {
        border-bottom: 1px solid #6941C6;
        color: #6941C6;
    }

.video-display-section {
    min-width: 130px;
    background: #000;
    max-height: 75px;
}

    .video-display-section a, .video-display-section img {
        max-height: 75px;
        object-fit: contain;
    }

.video-desc-section {
    word-break: break-all;
    margin: 0 5px;
    line-height: 1.5;
}

.vid-name-val {
    font-weight: bold;
    color: blue;
}

    .vid-name-val.small {
        max-width: 250px;
        position: inherit !important;
    }

.video-desc-section .vid-name-val {
    position: relative;
    top: 16px;
}

.vid-desc-val {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}

.list-item-vid-sec, .video-sec-show-after {
    padding-top: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 12px;
    border: 1px solid #ddd;
    border-bottom: none;
    position: relative;
}

.video-after-large {
    width: 260px;
    background: #000;
    height: 150px;
}

.video-desc-after {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.video-sec-show-after.collapse.show, .video-sec-show-after.collapsing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    position: relative;
    top: -101px;
    background: #fff;
    -webkit-transition: none;
    transition: none;
    -webkit-transform: none;
    transform: none;
    -webkit-animation: none;
    animation: none;
}

.vid-last-col {
    position: relative;
}

    .vid-last-col span {
        position: absolute;
        z-index: 9;
        cursor: pointer;
        right: 20px;
    }

.video-desc-after .vid-name-val {
    font-size: 14px;
}

.video-desc-after .video-desc-section {
    width: 60%;
    margin-right: 0;
    font-size: 14px;
}

.inside-vide-wrap {
    margin: 0 15px;
}

.middle-video-sec {
    margin: 25px 0px;
}

.inside-vide-wrap .first-div {
    margin-left: 0;
}

.last-div-vd {
    color: #000;
}

.video-upd {
    position: relative;
}

    .video-upd .fa {
        margin: 0 5px;
        font-size: 17px;
        position: absolute;
        top: -2px;
    }

.vd-active {
    background: #fff !important;
    border-top: 3px solid #6c6c9c !important;
}

.fa.font-new {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.video-after-large .row .middle-video-sec {
    margin-right: 0 !important;
}

.video-display-section, .video-after-large {
    position: relative;
}

    .video-display-section .video-controls.cursor img {
        height: 35px;
    }

    .video-display-section .video-controls.cursor svg {
        height: 24px;
    }

.video-upd .fa-sort-asc {
    top: 6px !important;
}

.main-calibrate-section.active {
    position: relative;
    padding: 4% 5% 4% 5% !important;
}

.download-answer-key {
    font-size: 12px;
    position: absolute;
    bottom: 7px;
    right: 5px;
    background: #2376dc;
    padding: 9px;
    border-radius: 15px;
    color: #fff !important;
}

.main-calibrate-section.class-section-list-div.active {
    background-color: lightpink;
}

.main-calibrate-section.class-section-list-div.practice {
    background-color: #b6ecb6;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.video-menu-bar div {
    background: #f7f7f7;
    padding: 13px 20px;
    border: 1px solid #ddd;
    font-weight: bold;
    color: #6c6c9c;
}

.video-menu-header {
    border: 1px solid #EAECF0;
    background: #fff;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #475467;
    padding: 16px 24px;
}

.video-inside-container {
    width: 100%;
    border: 1px solid #ddd;
    background: #fff;
    font-weight: 600;
    border-top: none;
    position: relative;
    max-height: 179px;
}

.video-data {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.video-section-main {
    padding-top: 1%;
    color: #a4a2a2;
}

.video-menu-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}


.picker {
    font-size: 16px;
    text-align: left;
    line-height: 1.2;
    color: #000000;
    position: absolute;
    z-index: 10000;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}


.picker__input {
    cursor: default;
}

    .picker__input.picker__input--active {
        border-color: #0089ec;
    }

.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.picker__holder {
    position: absolute;
    background: #ffffff;
    border: 1px solid #aaaaaa;
    border-top-width: 0;
    border-bottom-width: 0;
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
    min-width: 176px;
    max-width: 466px;
    max-height: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
    transform: translateY(-1em) perspective(600px) rotateX(10deg);
    -webkit-transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
    transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s;
}


.picker__frame {
    padding: 1px;
}

.picker__wrap {
    margin: -1px;
}

.picker--opened .picker__holder {
    max-height: 25em;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
    border-top-width: 1px;
    border-bottom-width: 1px;
    -webkit-transform: translateY(0) perspective(600px) rotateX(0);
    transform: translateY(0) perspective(600px) rotateX(0);
    -webkit-transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
    transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s;
    box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12);
}


.picker__box {
    padding: 0 1em;
}


.picker__header {
    text-align: center;
    position: relative;
    margin-top: 0.75em;
}


.picker__month,
.picker__year {
    font-weight: 500;
    display: inline-block;
    margin-left: 0.25em;
    margin-right: 0.25em;
}

.picker__year {
    color: #999999;
    font-size: 0.8em;
    font-style: italic;
}


.picker__select--month,
.picker__select--year {
    border: 1px solid #b7b7b7;
    height: 2em;
    padding: 0.5em;
    margin-left: 0.25em;
    margin-right: 0.25em;
}



.picker__select--month {
    width: 35%;
}

.picker__select--year {
    width: 22.5%;
}

    .picker__select--month:focus,
    .picker__select--year:focus {
        border-color: #0089ec;
    }

.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: 0.5em 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    top: -0.25em;
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}


.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

    .picker__nav--prev:before,
    .picker__nav--next:before {
        content: " ";
        border-top: 0.5em solid transparent;
        border-bottom: 0.5em solid transparent;
        border-right: 0.75em solid #000000;
        width: 0;
        height: 0;
        display: block;
        margin: 0 auto;
    }

    .picker__nav--next:before {
        border-right: 0;
        border-left: 0.75em solid #000000;
    }

    .picker__nav--prev:hover,
    .picker__nav--next:hover {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
    }

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: #f5f5f5;
    border-left-color: #f5f5f5;
}


.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: inherit;
    width: 100%;
    margin-top: 0.75em;
    margin-bottom: 0.5em;
}

@media (min-width: 24.5em) {
    .picker__select--month,
    .picker__select--year {
        margin-top: -0.5em;
    }

    .picker__nav--prev,
    .picker__nav--next {
        top: -0.33em;
    }

    .picker__nav--prev {
        padding-right: 1.5em;
    }

    .picker__nav--next {
        padding-left: 1.5em;
    }
}

@media (min-height: 33.875em) {
    .picker__table {
        margin-bottom: 0.75em;
    }
}

.picker__table td {
    margin: 0;
    padding: 0;
}

.picker__weekday {
    width: 14.285714286%;
    font-size: 0.75em;
    padding-bottom: 0.25em;
    color: #999999;
    font-weight: 500;
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: 0.5em;
    }
}

.picker__day {
    padding: 0.3125em 0;
    font-weight: 200;
    border: 1px solid transparent;
}

.picker__day--today {
    position: relative;
}

    .picker__day--today:before {
        content: " ";
        position: absolute;
        top: 2px;
        right: 2px;
        width: 0;
        height: 0;
        border-top: 0.5em solid #0059bc;
        border-left: 0.5em solid transparent;
    }

.picker__day--disabled:before {
    border-top-color: #aaaaaa;
}

.picker__day--outfocus {
    color: #dddddd;
}

    .picker__day--infocus:hover,
    .picker__day--outfocus:hover {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
    }

.picker__day--highlighted {
    border-color: #0089ec;
}

    .picker__day--highlighted:hover,
    .picker--focused .picker__day--highlighted {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
    }

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    background: #0089ec;
    color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: #bbbbbb;
}

.picker__footer {
    text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
    border: 1px solid #ffffff;
    background: #ffffff;
    font-size: 0.8em;
    padding: 0.66em 0;
    font-weight: bold;
    width: 33%;
    display: inline-block;
    vertical-align: bottom;
}

    .picker__button--today:hover,
    .picker__button--clear:hover,
    .picker__button--close:hover {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
        border-bottom-color: #b1dcfb;
    }

    .picker__button--today:focus,
    .picker__button--clear:focus,
    .picker__button--close:focus {
        background: #b1dcfb;
        border-color: #0089ec;
        outline: none;
    }

    .picker__button--today:before,
    .picker__button--clear:before,
    .picker__button--close:before {
        position: relative;
        display: inline-block;
        height: 0;
    }

    .picker__button--today:before,
    .picker__button--clear:before {
        content: " ";
        margin-right: 0.45em;
    }

    .picker__button--today:before {
        top: -0.05em;
        width: 0;
        border-top: 0.66em solid #0059bc;
        border-left: 0.66em solid transparent;
    }

    .picker__button--clear:before {
        top: -0.25em;
        width: 0.66em;
        border-top: 3px solid #ee2200;
    }

    .picker__button--close:before {
        content: "\D7";
        top: -0.1em;
        vertical-align: top;
        font-size: 1.1em;
        margin-right: 0.35em;
        color: #777777;
    }

    .picker__button--today[disabled],
    .picker__button--today[disabled]:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #dddddd;
        cursor: default;
    }

        .picker__button--today[disabled]:before {
            border-top-color: #aaaaaa;
        }

.picker__list {
    list-style: none;
    padding: 0.75em 0 4.2em;
    margin: 0;
}

.picker__list-item {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    margin-bottom: -1px;
    position: relative;
    background: #ffffff;
    padding: 0.75em 1.25em;
}

@media (min-height: 46.75em) {
    .picker__list-item {
        padding: 0.5em 1em;
    }
}

/* Hovered time */
.picker__list-item:hover {
    cursor: pointer;
    color: #000000;
    background: #b1dcfb;
    border-color: #0089ec;
    z-index: 10;
}

/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
    border-color: #0089ec;
    z-index: 10;
}

    .picker__list-item--highlighted:hover,
    .picker--focused .picker__list-item--highlighted {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
    }

.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
    background: #0089ec;
    color: #ffffff;
    z-index: 10;
}

/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
    border-color: #dddddd;
    z-index: auto;
}

/* The clear button */
.picker--time .picker__button--clear {
    display: block;
    width: 80%;
    margin: 1em auto 0;
    padding: 1em 1.25em;
    background: none;
    border: 0;
    font-weight: 500;
    font-size: 0.67em;
    text-align: center;
    text-transform: uppercase;
    color: #666;
}

    .picker--time .picker__button--clear:hover,
    .picker--time .picker__button--clear:focus {
        color: #000000;
        background: #b1dcfb;
        background: #ee2200;
        border-color: #ee2200;
        cursor: pointer;
        color: #ffffff;
        outline: none;
    }

    .picker--time .picker__button--clear:before {
        top: -0.25em;
        color: #666;
        font-size: 1.25em;
        font-weight: bold;
    }

    .picker--time .picker__button--clear:hover:before,
    .picker--time .picker__button--clear:focus:before {
        color: #ffffff;
        border-color: #ffffff;
    }

.picker--time {
    min-width: 256px;
    max-width: 320px;
}

    .picker--time .picker__holder {
        background: #f2f2f2;
    }

@media (min-height: 40.125em) {
    .picker--time .picker__holder {
        font-size: 0.875em;
    }
}

.picker--time .picker__box {
    padding: 0;
    position: relative;
}

.progress-body .card-header-custom .collapsed img {
    transform: rotate(0deg);
}

.progress-body .card-header-custom .collapsed svg {
    transform: rotate(0deg);
}

.half-bg-side {
    min-height: 100vh;
    background: url(/assets/media/img/teaching-img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

.light-head-txt {
    font-size: 22px;
    font-weight: 300;
}

.content-side {
    background-color: #F0F9FF;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 100vh;
}

.form-start-wrapper {
    max-width: 350px;
}

.margin-down {
    margin-bottom: 15px;
}

.pad-up-down {
    padding-bottom: 15px;
    padding-top: 15px;
}

.login-module-form .form-group {
    min-height: 80px;
}

    .login-module-form .form-group .form-control {
        min-height: 50px;
    }


.form-control {
    font-size: 15px;
}

.own-small-font, .font-13 {
    font-size: 13px;
}

.pad-up {
    padding-top: 15px;
}

.pad-down-sm {
    padding-bottom: 7px;
}

.pad-down {
    padding-bottom: 15px;
}

.color-grey-own {
    color: #9fabb3;
}


.upload-video-center {
    max-width: 900px;
    margin: auto;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 8px;
}

.recourse-radio-section {
    border-top: 1px solid #EAECF0;
}

.resource-content {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #EAECF0;
    outline: 0;
    border-radius: 8px;
}

.resource-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.resource-body-section {
    padding: 15px 24px 20px;
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.row.recourse-radio-section .form-check {
    padding: 16px 0px 20px;
}

.profile-img img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.card-custom {
    border-radius: 16px;
    padding: 0px 15px;
}

.form-own .form-group label {
    font-size: 13px;
    font-weight: 600;
    color: #5f6466;
    margin-bottom: 6px;
}
.form-own .form-group .right-text {
    font-size: 13px;
    font-weight: 600;
    color: #5f6466;
    margin-bottom: 6px;
    display: inline-block;
}
.avatar {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid #ebebeb;
    overflow: hidden;
}

.avatar_img {
    position: absolute;
}

.avatar_lg {
    width: 130px;
    height: 130px;
    border-color: #e1e1e1;
}

.pad-half {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.form-own.form-own-md .form-group {
    min-height: 80px;
    list-style: none;
}

.fileField {
    max-width: 300px;
}

.fileField-pseudoInput {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
    position: relative;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #ffffff;
}

.fileField-pseudoInput-label {
    max-width: 164px !important;
    border: 1px solid #a1a1a1;
    padding: 1px 15px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 14px/1.5 Roboto,"HelveticaNeue-Light",Helvetica,Arial,sans-serif;
    text-align: left;
    color: #000000;
    display: flex;
    align-items: center;
}

.fileField-pseudoInput-btn {
    margin-left: 10px;
}

.fileField-file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.material-list-wrapper a {
    color: #7F56D9;
}

.progress-main-section .progress-body .library-image-wrapper {
    width: 100%;
    height: 105px;
}

.sidebarTeachingcontent {
    display: flex;
    align-items: center;
    margin-left: 10px;
    margin-bottom: 0px !important;
    white-space: nowrap;
}

.breadcrub-wrapper ol.breadcrumb a {
    color: #6941C6;
    font-weight: 600;
}

.progress-button.text-right.mb-4 {
    position: relative;
}

.resource-footer-wrapper {
    padding: 24px;
    display: flex;
    justify-content: end;
}

.hr-wrapper {
    margin-top: 0px;
    margin-bottom: 0px;
}

.resource-item-access-wrapper .row {
    margin-top: 20px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #F9FAFB;
    opacity: 1;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    cursor: default;
}

.progress-main-container {
    padding: 0px 15px;
}

.nopadd-add {
    padding-left: 0px;
    padding-right: 0px;
}

.main-wrapper.active .container-fluid.nopadd-add {
    padding-left: 15px;
    padding-right: 15px;
}

.update-inner-list-section.mb-5, .progress-button.text-right.mb-4 {
    padding: 0px 24px;
}

.vertical-video-view {
    background-color: #fff;
    border-radius: 16px;
}

.update-inner-list-section {
    padding: 0px 20px 10px;
}

.modal-dialog-wrapper {
    margin: 1.75rem auto;
    z-index: 77;
    position: relative;
    pointer-events: none;
}

.file-upload-label {
    max-width: 220px;
    border: 1px solid #b8c0c5;
    padding: 4px 15px;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 14px/1.5 Roboto, "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
    text-align: left;
    color: #31373a;
}

.upload-file {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.docu-list li {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #f9fcfe;
    border-bottom: 1px solid rgba(221, 221, 221, 0.4);
}

    .docu-list li .document-icon {
        width: 32px;
        margin-right: 5%;
        margin-left: 5px;
    }

    .docu-list li .document-cross-icon {
        width: 24px;
        margin-left: 10px;
    }

.file-upload-progress {
    display: none;
}

    .file-upload-progress .fileField-progress-bd {
        width: 100%;
        height: 10px;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .file-upload-progress .fileField-progress-bd, .fileField-progress-bd {
        height: 8px !important;
        margin-right: 20px;
    }

.file-uploader-form {
    min-height: 130px;
    margin-bottom: 17px !important;
}

    .file-uploader-form .form-control {
        min-height: 130px !important;
        outline: none;
        box-shadow: none;
        position: relative;
        z-index: 5;
        opacity: 0;
        cursor: pointer;
    }

    .file-uploader-form .file-upload-wrapper {
        left: 7.5px;
        position: absolute;
        right: 7.5px;
        top: 0;
        bottom: 0;
        background: #fff;
        border: none;
        pointer-events: none;
        color: #b8c0c5;
    }

.file-upload-wrapper {
    width: 300px;
    margin: 9px auto;
    border: none;
}

.fileField-progress-bd {
    width: 100%;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    height: 20px; /* Set the height */
    background-color: #eee; /* Color of the background */
}

    .fileField-progress-bd::-webkit-progress-bar {
        background-color: #eee; /* Color of the background */
    }

    .fileField-progress-bd::-webkit-progress-value {
        background-color: #6F2495; /* Color of the progress bar */
    }

    .fileField-progress-bd::-moz-progress-bar {
        /* Firefox */
        background-color: #6F2495; /* Color of the progress bar */
    }

.link-label-text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #344054;
}

.video-upload-container {
    display: flex;
    align-items: center;
    padding: 0px 14px 0px 0px;
    margin-bottom: 15px;
}

.video-inner-container {
    border: 1px solid #6941C6;
    border-radius: 12px;
    padding: 16px;
    flex: 1;
    margin-right: 20px;
}

.file-upload-wrapper > div, .video-after-upload {
    background-color: #F2E9F4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 6px solid #F8F4FB;
    margin: 10px auto;
}

    .video-after-upload svg {
        color: #6F2495;
        width: 22px;
        height: 22px;
    }

.remove-container > div {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.video-upload-main-section {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    border-radius: 12px;
}

.video-complete {
    background: #FFFFFF;
    border: 1px solid #6F2495;
    border-radius: 12px;
}

.video-after-upload i {
    color: #6F2495;
}

.sharing-table-wrapper tbody tr td img {
    width: 21px;
    margin-right: 13px;
}

.sharing-table-wrapper tbody tr td svg {
    margin-right: 13px;
    color: #475467;
    width: 20px;
    height: 20px;
}


.border-own-simple.bg-white.text-center button {
    padding: 0;
    line-height: initial;
    border: 0;
    margin: 0;
}

.js-accountStatusView-unlockBtn img {
    width: 21px !important;
}

.table-icon-list {
    display: flex;
    justify-content: end;
}

a.link.link_sm.framework-delete {
    display: none;
}

.add-bg-header {
    background-color: #fff;
    box-shadow: 0px 4px 8px -15px rgba(16, 24, 40, 0.1), 0px 2px 4px -4px rgba(16, 24, 40, 0.06);
    padding-left: 22px;
    padding-right: 22px;
}

.activityTab-list-wrapper .dash-header-section {
    margin-bottom: 0px;
}

.dot-image-myactivity {
    text-align: right;
    position: relative;
}

.reflected-table.sharing-table-wrapper img {
    margin-right: 0px;
}

.reflected-table.sharing-table-wrapper svg {
    margin-right: 0px;
}

.video-title-text a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 57px;
}

.activityTab-list-wrapper li.menu-option {
    padding: 0;
    margin-right: 0px;
}

li.playlist-nested-list:hover {
    background: #F4EBFF;
}

.playlist-section li.nested-list:hover {
    background-color: inherit;
}

li.nested-list .playlist-section {
    padding-bottom: 0px;
}

.playlist-nested-list {
    margin-left: 20px;
    margin-right: 4px;
}

li.nested-list {
    margin-bottom: 0px;
}

.own-small-font a {
    color: #212529;
}

    .own-small-font a:hover {
        text-decoration: none;
    }

.upload-drop-msg {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}

    .upload-drop-msg span {
        color: #6F2495;
        font-weight: 600;
    }

.container.video-upload-wrapper {
    padding: 15px 24px 20px;
}

.profile-user-detail {
    display: flex;
    align-items: center;
    padding: 13px 20px
}

.userprofile-detail ul {
    display: inherit !important;
}

    .userprofile-detail ul li {
        margin-left: 0px !important;
    }

        .userprofile-detail ul li img {
            height: auto;
            border-radius: inherit;
            width: 14px !important;
        }

        .userprofile-detail ul li svg {
            height: auto;
            border-radius: inherit;
            width: 24px !important;
        }

.profile-img {
    position: relative;
}

.userprofile-detail.menu-options ul li a {
    padding-left: 23px !important;
}

.menu-options.userprofile-detail {
    top: 48px;
    z-index: 101;
}

.activity-header-main {
    padding: 11px;
    color: #fff;
    padding-top: 83px;
}

.attachment-list {
    color: #6F2495;
}

    .attachment-list span {
        background: #F8F4FB;
        mix-blend-mode: multiply;
        border-radius: 16px;
        padding: 8px 18px;
        display: inline-block;
        cursor: pointer;
    }

.share-playlist-label label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #98A2B3;
}

.sharing-table-wrapper span.profile-img img {
    width: 40px;
}

.three-dot-menu img {
    width: auto !important;
}


.sharing-table-wrapper tfoot {
    background-color: #fff;
}

.user-playlist-data {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-right-side {
    background: #F8F4FB;
    border-radius: 16px;
    padding: 24px 24px;
}

.comment-textarea {
    position: relative;
}

    .comment-textarea textarea {
        padding-left: 60px;
        padding-top: 9px;
        resize: none;
    }

.video-count {
    position: absolute;
    top: 11px;
    left: 11px;
    color: #6941C6;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.usercomment-section {
    background-color: #fff;
    padding: 0px 10px;
    border: 1px solid #EAECF0;
    border-radius: 16px;
    max-height: 1400px;
    overflow: auto;
}

.sharing-content-body .video-count {
    color: #0F3188;
}

.observation-content-body .video-count {
    color: #AD006D;
}

.feedback-button-list {
    display: flex;
    justify-content: space-between;
}

.btn-framework-feeback {
    background: #F7E5F0;
    border: 1px solid #CE66A7;
    border-radius: 8px;
    color: #AD006D;
}

    .btn-framework-feeback:not(:disabled):hover {
        color: #c5047e;
        background: #f7d7ea;
    }

.feedback-button-list button.btn.observation-bg:not(:disabled):hover {
    background-color: #c5047e;
}

.observation-tablist .nav {
    background-color: #F9FAFB;
    padding: 10px 10px;
    border-radius: 8px;
    width: 90%
}

.observation-tablist .nav-pills .nav-link {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #667085;
    margin-bottom: 7px;
}

    .observation-tablist .nav-pills .nav-link.active {
        background: #FFFFFF;
        box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
        border-radius: 6px;
        color: #344054;
    }

.framework-body-content .row {
    border: 1px solid #EAECF0;
    border-radius: 16px;
}

.framework-body-content.General-body-content .video-inner-container {
    border: 1px solid #DE99C5;
}

.General-body-content .file-upload-wrapper > div, .General-body-content .video-after-upload {
    background-color: #F7E5F0;
    outline: 6px solid #FBF2F8;
}

.framework-inner-list ul li {
    color: #344054;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
}

.framework-feedback-queationlist h5 {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter';
    color: #344054;
    font-style: normal;
}

.admin-playlist-video-section .videoplaylist-class-record {
    margin-bottom: 14px;
    align-items: center;
}

a.resource-libary-wrapper img {
    width: 21px !important;
}

.left-menu-list > li svg {
    stroke: white;
    width: 24px;
    height: 24px;
}

.upper-section .left-menu-list > li.active a svg {
    stroke: #110045;
}

.update-inner-list-section .three-dot-menu {
    width: 10px;
}

.playlist-button button svg, .create-svg-add svg {
    stroke: white;
}

.progress-main-section .update-inner-list-section .three-dot-menu {
    width: 0;
}

.breadcrub-wrapper .breadcrumb-item + .breadcrumb-item {
    padding-left: 0px;
}

.deletePlayList svg {
    stroke: #B42318;
}

.add-resorces-btn svg {
    stroke: #6F2495;
    margin-right: 4px;
    width: 20px;
    height: 20px;
}

.add-resorces-btn .btn-create-progress svg {
    stroke: white;
}

.videoplayer-main-section .progress-button .btn-add-resoure svg {
    fill: #6F2495;
    stroke: #6F2495;
}

.now-playing-wrapper .now-playing svg {
    fill: #6F2495;
    stroke: #6F2495;
    width: 15px;
    height: 15px;
}

.tableSort-desc svg {
    width: 16px;
    height: 16px;
    stroke: #475467;
}

.tableSort-asc svg {
    width: 16px;
    height: 16px;
    stroke: #475467;
}

.admin-playlist-video-section .remove-playlist-btn svg {
    stroke: #B42318;
}

.admin-playlist-video-section .add-playlist-btn svg {
    stroke: #6F2495;
}

.js-deleteFolder svg, .deletePlayListGroup svg {
    stroke: #B42318;
}

.js-adminplaylist-back-action svg {
    stroke: #6F2495;
}

.editing-testing-text a:hover {
    color: #000;
}

.resource-main-page .dash-header-section {
    margin-bottom: 0px;
}

.header-right-side ul li span svg {
    color: #667085;
}


.change-view-div .active svg {
    stroke: #1D2939;
}

.TCTermsAndConditions-wrapper .font-weight-bold {
    color: #6F2495;
}

.progress-main-border .card-header-custom .d-inline-block.ml-3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    text-transform: capitalize;
    text-align: start;
    margin-bottom: 0px;
}

.progress-main-border .card-header-custom svg {
    stroke: #98A2B3;
}

.video-list-text {
    color: #667085;
}

.vertical-video-view img {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#m_TCHVideos img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#m_TCHVideos .video-title-text a {
    height: 26px;
    -webkit-line-clamp: 1;
}

#m_TCHVideos .video-title-text span {
    height: 26px;
    -webkit-line-clamp: 1;
}

#m_TCHVideos .update-inner-list-section {
    padding: 16px 0px 8px;
}

.update-inner-list-section .three-dot-menu > svg, #m_ResourceLibraryVideos .three-dot-menu > svg, .sharing-table-wrapper tbody tr td .three-dot-menu > svg {
    stroke: #98A2B3;
}

.dot-image-w {
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    border: 1px solid #D0D5DD;
}

#dvFilterBy .grade-level {
    background: #F8F4FB;
    mix-blend-mode: multiply;
    border-radius: 16px;
}

.material-list-wrapper span.color-blue-own {
    background: #F8F4FB;
    mix-blend-mode: multiply;
    border-radius: 16px;
    padding: 7px 10px;
    margin-bottom: 10px;
    display: inline-block;
}

    .material-list-wrapper span.color-blue-own span.text-4 {
        font-size: 14px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }

.heading-tc-video {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
    color: #101828;
}

.videoplayer-inner .video-js {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.update-list-section .progress-main-section .progress-body {
    padding: 0px 16px 28px;
}

    .update-list-section .progress-main-section .progress-body a img {
        border-radius: 12px;
    }

    .update-list-section .progress-main-section .progress-body .update-inner-list-section {
        padding: 0px;
    }

        .update-list-section .progress-main-section .progress-body .update-inner-list-section p {
            padding-right: 0px;
            font-weight: 500;
            font-size: 14px;
        }

.video-js *, .video-js :after, .video-js :before {
    box-sizing: inherit;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.video-player-inner-w {
    background-color: #fff;
    border-radius: 16px;
}

.progress-main-border #accordion .card-custom {
    background-color: #fff;
    margin-bottom: 16px;
}

.progress-main-border .accordion .card-custom {
    background-color: #fff;
    margin-bottom: 16px;
}

.js-filter-list svg {
    width: 20px;
    height: 20px;
}

.dash-header-section .js-heading-back-url svg {
    stroke: #6F2495;
    margin-right: 8px;
}

.video-player-inner-w .update-inner-list-section {
    margin-bottom: 24px;
}

.left-menu-list > li svg path {
    stroke: #fff;
}

.file-section a {
    color: #6F2495;
}

.item-image-sec img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.multi-input-image svg {
    stroke: #667085;
    width: 21px;
}

.resource-item-access-wrapper .multi-select-input .select2-container .select2-search--inline .select2-search__field {
    padding-left: 8px;
    padding-top: 4px;
}

.resource-item-access-wrapper .multi-select-input .select2-container--default .select2-selection--multiple {
    max-height: 90px;
    overflow: auto;
}

.update-inner-list-section .custom-badge {
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 25px;
}

.js-videoDurationText, .js-file-size-calculate {
    white-space: nowrap;
}

.file-font-wrapper {
    color: #667085;
    font-weight: 400 !important;
}

.line-height-28 {
    line-height: 28px;
}

.color-date-add {
    color: #475467;
}

.color-addedby-add {
    color: #344054;
}

.added-text-color {
    color: #475467;
}

.date-added-text-color {
    color: #101828;
}

.resource-main-page.resource-add-mrgin .dash-header-section {
    margin-bottom: 32px;
}

.custom-calender-design {
    border: 1px solid #D0D5DD;
    background-color: #fff;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    height: 42px;
    padding: 9px 12px 9px;
    width: fit-content;
    min-width: 100%;
    cursor: pointer;
}

    .custom-calender-design span {
        display: inline-block;
        white-space: nowrap;
        font-size: 14px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .custom-calender-design svg {
        color: #667085;
        stroke: #667085;
        cursor: pointer;
        position: relative;
    }

    .custom-calender-design #customRangeCalc {
        display: flex;
        justify-content: space-between;
    }

.daterangepicker {
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
    border: 1px solid #F2F4F7 !important;
    background-color: #fff !important;
    border-radius: 8px !important;
}

    .daterangepicker:before {
        border-bottom: 7px solid #F2F4F7;
    }

    .daterangepicker .ranges ul {
        width: auto;
        padding-left: 16px;
        padding-top: 16px;
        border-right: 1px solid #eaecf0;
        padding-right: 16px;
    }

    .daterangepicker .ranges li.active {
        background-color: #F9FAFB;
        color: #344054;
        border-radius: 6px;
    }

    .daterangepicker .ranges li:hover {
        background-color: #F9FAFB;
    }

    .daterangepicker .ranges li {
        color: #344054;
        cursor: pointer;
        font-size: 14px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
    }

    .daterangepicker.show-calendar .ranges {
        margin-top: 0px;
    }

    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
        font-size: 14px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        color: #344054;
        padding: 8px 8px;
    }

    .daterangepicker td.in-range {
        background-color: #EAECF0;
    }

    .daterangepicker td.active, .daterangepicker td.active:hover {
        color: #fff;
        background-color: #6F2495;
        border-radius: 50% !important;
    }

    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
        background-color: #EAECF0;
        color: #344054;
        border-radius: 50% !important;
    }

    .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
        color: #667085;
        font-size: 14px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
    }

    .daterangepicker.ltr.show-ranges.opensright.show-calendar {
        margin-right: 97px;
    }


    .daterangepicker.show-ranges.ltr .drp-calendar.left {
        border-left: none !important;
    }

    .daterangepicker .calendar-table table {
        border-collapse: separate;
        border-spacing: 0 1px;
    }

    .daterangepicker .drp-calendar.right {
        border-left: 1px solid #eaecf0;
    }

    .daterangepicker .drp-buttons {
        margin-left: 153px;
        border-left: 1px solid #eaecf0;
        border-top: 1px solid #eaecf0;
    }

    .daterangepicker.show-calendar .drp-buttons {
        display: flex !important;
        align-items: center;
        justify-content: end;
    }

    .daterangepicker .drp-buttons {
        padding: 16px;
    }

    .daterangepicker .drp-selected {
        border-radius: 8px;
        border: 1px solid #e3e5e7;
        background: #FFF;
        padding: 10px 14px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        width: 100%;
        font-size: 16px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        color: #101828;
        text-align: justify;
    }

#m_TCHVideos .p-0 a, #m_TCVVideos .vertical-video-view .mb-4 > a, .admin-playlist-vdeo, .relative-video-anchor > a, .resoucre-image-div {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
}

    .relative-video-anchor a img, .resoucre-image-div img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

.color-change-video-title {
    color: #1D2939 !important;
    line-height: 28px !important;
}

.fine-art-color {
    color: #101828 !important;
}

.myactivity-content-inner-video-title .font-weight-normal {
    color: #475467;
}

.myactivity-content-inner-video-title .three-dot-menu svg {
    stroke: #98A2B3;
    margin-left: 15px;
}

.right-image-myactivity svg {
    stroke: #98A2B3;
}

.card-no-activity-section {
    max-width: 900px;
    margin: auto;
}

.frame-text-color {
    color: #344054;
}

.textcustom-error-framework {
    color: #912018;
}


.gray-800-color {
    color: #1D2939
}

.gray-700-color {
    color: #344054;
}

.gray-600-color {
    color: #475467;
}

.gray-400-color {
    color: #98A2B3;
}

.gray-900-color {
    color: #101828;
}

.base-black {
    color: #000;
}

.collabe-color {
    color: #6F2495;
}

.main-color {
    color: #110045;
}

.rose-color {
    color: #AD006D;
}

.selectpicker ~ button {
    background-color: #fff !important;
}

.selectpicker ~ button {
    background-color: #fff !important;
    border: 1px solid #D0D5DD;
    border-radius: 6px !important;
}

    .selectpicker ~ button:focus {
        outline: none;
    }

.bootstrap-select .dropdown-toggle:focus {
    outline: none !important;
    outline: none !important;
    outline-offset: 0 !important;
}

.selectpicker ~ .dropdown-menu .dropdown-item.selected.active {
    background-color: #e9ecef;
    border-bottom: 0;
}

.selectpicker ~ .dropdown-menu .dropdown-item {
    border-bottom: 0;
    font-size: 16px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 10px 16px;
}

.bootstrap-select .dropdown-menu li a span.text {
    color: #101828;
}

.selectpicker ~ .dropdown-menu {
    padding-top: 0px;
    padding-bottom: 0px;
}

.selectpicker ~ .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.155em;
    content: "";
    border-top: none !important;
    border-left: none !important;
    box-sizing: border-box;
    height: 10px;
    width: 10px;
    border-style: solid;
    border-color: #667085;
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
    transition: border-width 150ms ease-in-out;
}

.dropup .selectpicker ~ .dropdown-toggle::after {
    vertical-align: middle;
    transform: rotate(-135deg);
}

.selectpicker ~ .btn {
    padding: 10px 14px !important;
    height: 44px;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #e9ecef !important;
}

label#shareCohortId-error {
    display: none !important;
}

.reflected-table.sharing-table-wrapper .table-responsive {
    border-radius: 20px;
}

.sharing-bg-content .reflection-bg {
    background-color: #0F3188;
}

.observation-bg-content .reflection-bg {
    background-color: #AD006D;
}

.sharing-bg-content .reflection-color {
    color: #0F3188;
}

.observation-bg-content .reflection-color {
    color: #AD006D;
}

.observation-bg-content .btn-create-progress {
    border: 1px solid #AD006D !important;
    background: #AD006D !important;
}

.sharing-bg-content .btn-create-progress {
    border: 1px solid #0F3188 !important;
    background: #0F3188 !important;
}

.sharing-bg-content span.js-commentPanelView-time-continues svg {
    stroke: #0F3188;
}

.observation-bg-content span.js-commentPanelView-time-continues svg {
    stroke: #AD006D;
}

.sharing-bg-content .activityContent-list-wrapper .right-side-section a {
    color: #0F3188;
}

.sharing-bg-content .video-count {
    color: #0F3188;
}

.observation-bg-content .video-count {
    color: #AD006D;
}

.observation-bg-content .activityContent-list-wrapper .right-side-section a {
    color: #AD006D;
}

.sharing-bg-content .timerset span {
    color: #0F3188;
}

.observation-bg-content .timerset span {
    color: #AD006D;
}

.sharing-bg-content .commentRightSide .reply-wrapper {
    color: #0F3188;
}

.observation-bg-content .commentRightSide .reply-wrapper {
    color: #AD006D;
}

.sharing-bg-content .usercomment-section .commentSection .file-add-wrapper {
    background: #E7EAF3;
}

.sharing-bg-content .usercomment-section .commentSection .file-content-text a {
    color: #0F3188;
}

.observation-bg-content .usercomment-section .commentSection .file-add-wrapper {
    background-color: #F7E5F0;
}

.observation-bg-content .usercomment-section .commentSection .file-content-text a {
    color: #AD006D;
}

.observation-bg-content .text-bg-light-primary {
    background-color: #F7E5F0;
}

.observation-bg-content .text-light-primary {
    color: #AD006D;
}

.sharing-bg-content .text-bg-light-primary {
    background: #E7EAF3;
}

.sharing-bg-content .text-light-primary {
    color: #0F3188;
}

.sharing-bg-content .text-bg-grey {
    background: #E7EAF3;
}

.sharing-bg-content .grade-list > div div {
    color: #0F3188;
}

.observation-bg-content .text-bg-grey {
    background-color: #F7E5F0;
}

.observation-bg-content .grade-list > div div {
    color: #AD006D;
}

.observation-bg-content .attach-file-wrapper {
    background-color: #F7E5F0;
}

    .observation-bg-content .attach-file-wrapper span {
        color: #AD006D;
    }

.sharing-bg-content .attach-file-wrapper {
    background: #E7EAF3;
}

    .sharing-bg-content .attach-file-wrapper span {
        color: #0F3188;
    }

.sharing-bg-content .material-list-wrapper span.color-blue-own {
    background: #E7EAF3;
}

.sharing-bg-content .color-blue-own a {
    color: #0F3188;
}

.observation-bg-content .material-list-wrapper span.color-blue-own {
    background-color: #F7E5F0;
}

.observation-bg-content .color-blue-own a {
    color: #AD006D;
}

.observation-bg-content .activity-right-side {
    background-color: #FBF2F8;
}

.sharing-bg-content .activity-right-side {
    background: #F3F5F9;
}

.observation-bg-content .file-add-wrapper.file-add-wrapper-new .file-content-text {
    color: #AD006D;
}

.sharing-bg-content .file-add-wrapper.file-add-wrapper-new .file-content-text {
    color: #0F3188;
}

.observation-bg-content .file-add-wrapper {
    background-color: #F7E5F0;
}

.sharing-bg-content .file-add-wrapper {
    background: #E7EAF3;
}

.sharing-bg-content .right-select-main select {
    color: #0F3188;
    background: #F3F5F9;
}

.observation-bg-content .right-select-main select {
    color: #AD006D;
    background-color: #FBF2F8;
}

.sharing-bg-content ~ .update-timestamp-modal-wrapper .modal-footer .btn-create-progress {
    background: #0F3188 !important;
    border: 1px solid #0F3188 !important;
}

.observation-bg-content ~ .update-timestamp-modal-wrapper .modal-footer .btn-create-progress {
    background-color: #AD006D !important;
    border: 1px solid #AD006D !important;
}

.play-btn-add svg {
    fill: #6F2495;
    stroke: #6F2495
}

.observation-bg-content .play-btn-add svg {
    fill: #AD006D;
    stroke: #AD006D;
}

.observation-bg-content .usercommentProfile .comment-time {
    color: #AD006D;
}

.sharing-bg-content .usercommentProfile .comment-time {
    color: #0F3188;
}

.sharing-bg-content .play-btn-add svg {
    fill: #0F3188;
    stroke: #0F3188;
}

.threedots svg {
    pointer-events: none;
}

.attach-file-wrapper svg {
    pointer-events: none;
}

.framework-select-list > .row {
    border-bottom: 1px solid #EAECF0;
    padding-bottom: 1rem;
    margin-left: 0px;
    margin-right: 0px;
}

    .framework-select-list > .row:last-child {
        border-bottom: none;
    }

.framework-feedback-right-section .framework-select-list.custom-modal-section textarea {
    min-height: 77px;
}

.general-border-bottom {
    border-bottom: 1px solid #EAECF0;
    padding-bottom: 1rem;
}

    .general-border-bottom:last-child {
        border-bottom: none;
    }

.video-upload-container:last-child, .video-upload-container:last-child {
    margin-bottom: 0px !important;
}

.General-body-content .video-after-upload svg {
    stroke: #AD006D;
    width: 20px;
    height: 20px;
}

.feedback-Steps-section {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #F2F4F7;
    width: 90%;
}

.timeline-progress {
    position: relative;
    padding: 0 0rem 0 2.4rem;
    list-style: none;
}

.progress__item {
    position: relative;
    min-height: 45px;
    counter-increment: list;
    padding-left: 0.5rem;
}


    .progress__item:before {
        content: "";
        position: absolute;
        left: -1.8rem;
        top: 24px;
        height: 51%;
        width: 1px;
        border-left: 2.5px solid #EAECF0;
    }

    .progress__item:after {
        position: absolute;
        left: -2.5rem;
        top: 0;
        content: " ";
        border: 8px solid #fff;
        border-radius: 500%;
        background: #EAECF0;
        height: 26px;
        width: 26px;
        transition: all 500ms ease-in-out;
        outline: 2px solid #EAECF0;
    }

    .progress__item.progress__item--completed:after {
        content: "\2713";
        background: inherit;
        color: #AD006D;
        outline: 2px solid #AD006D;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 23px;
        border: 13px solid #F7E5F0;
    }

    .progress__item.progress__item--active:after {
        background: #AD006D;
        color: #AD006D;
        outline: 2px solid #AD006D;
        box-shadow: 0px 0px 0px 6px #f4ebff;
        border: 8px solid #F7E5F0;
    }

    .progress__item:last-child:before {
        border: none;
        height: 0px;
    }

.progress__info {
    margin-bottom: 0px;
    padding-top: 5px;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #344054;
}

    .progress__info a {
        color: #344054;
    }

.progress__item.progress__item--active p.progress__info {
    color: #AD006D;
}

    .progress__item.progress__item--active p.progress__info a {
        color: #AD006D;
    }

.progress__item.progress__item--completed.progress__item:before {
    border-left: 2.5px solid #AD006D;
}

li.progress__item.selected-progress p a {
    color: #AD006D;
}

.notication-inner {
    border: 1px solid #EAECF0;
    border-radius: 6px;
    background-color: #fff;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 20px;
}

.notification-main-header {
    padding: 24px 24px 20px;
}

    .notification-main-header .notification-header {
        padding: 0px;
    }

.notification-section.notification-new-section .notification-header select.form-control {
    font-size: 16px;
    font-weight: 600;
    color: #344054;
}

.notification-section.notification-new-section .notification-header button {
    padding: 8px 16px;
    border-radius: 6px;
}

.notification-section {
    padding: 0px 221px 0px 210px;
    margin-bottom: 32px;
}

.notification-list-section li {
    border-top: 1px solid #F2F4F7;
    padding: 18px 0px;
}

    .notification-list-section li:first-child {
        padding-top: 20px;
    }

.notification-list {
    display: flex;
    padding: 0px 24px;
}

.notification-file {
    display: flex;
    padding-top: 10px;
}

.active-color {
    background-color: #f7feff;
}

ul.notification-list-section {
    max-height: 800px;
    overflow: auto;
}

.notification-file .mr-3 {
    border-radius: 28px;
    outline: 4px solid #F8F4FB;
    background: #F2E9F4;
    display: flex;
    width: 32px;
    height: 32px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.notification-file .mr-2 svg {
    stroke: #6F2495;
}

.notication-header-list ul {
    display: flex;
    white-space: nowrap;
    overflow: auto;
    padding-bottom: 10px;
}

    .notication-header-list ul li {
        display: flex;
        padding: 8px 12px;
        justify-content: center;
        align-items: center;
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
        cursor: pointer
    }

    .notication-header-list ul::-webkit-scrollbar-track, .notication-inner.bell-notification-inner .notification-list-section::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #ffffff;
    }

    .notication-header-list ul::-webkit-scrollbar {
        width: 4px;
        background-color: #fff;
        height: 6px;
    }

.notication-inner.bell-notification-inner .notification-list-section::-webkit-scrollbar {
    width: 5px;
    background-color: #fff;
}

.notication-header-list ul::-webkit-scrollbar-thumb, .notication-inner.bell-notification-inner .notification-list-section::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #b09feb;
}

.notication-header-list ul li.active {
    background-color: #F9FAFB;
    border-radius: 6px;
    color: #344054;
}

.bell-notification-inner {
    border-left: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
}

.bell-notification {
    width: 390px;
    position: absolute;
    top: 0;
    right: 0;
}

.notication-inner.bell-notification-inner .notification-list-section {
    max-height: calc(100vh - 170px);
}

.activity-right-side .file-add-main-section {
    margin-bottom: 7px;
}

.modal-custom-body .multi-select-input .select2-container .select2-search--inline {
    height: 100%;
    margin-top: 9px;
    margin-left: 8px;
}

.modal-inner-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 11px;
    margin-left: 5px;
}

.sharing-bg-content ~ .resource-observation-link-modal .modal-footer .btn-create-progress {
    background: #0F3188 !important;
    border: 1px solid #0F3188 !important;
}

.observation-bg-content ~ .resource-observation-link-modal .modal-footer .btn-create-progress {
    background-color: #AD006D !important;
    border: 1px solid #AD006D !important;
}

.footer-terms-condition {
    background-color: #fff;
    border-radius: 6px;
}

    .footer-terms-condition ul {
        margin-bottom: 0px;
        display: flex;
    }

        .footer-terms-condition ul li {
            list-style: none;
            margin-right: 20px;
        }

            .footer-terms-condition ul li a {
                margin-right: 20px;
                color: #000;
                font-weight: 500;
                cursor: pointer;
            }

            .footer-terms-condition ul li:hover {
                text-decoration: underline;
            }

.faramework-edit-table table tr td svg {
    margin-right: 13px;
    color: #475467;
}

.rubric-field-design .list-inline button {
    padding-bottom: 3px;
    border-radius: 0px;
    padding-left: 2px;
    padding-right: 2px;
}

    .rubric-field-design .list-inline button:hover {
        color: #7b56c5;
    }

#dialog-bd {
    max-height: 500px;
    overflow: auto;
}

td.js-frameworkView-itemLabel .shelf.shelf_2 {
    padding-bottom: 15px;
}

ul.vList.vList_sm.mix-vList_indent > li {
    padding-bottom: 15px;
    list-style-type: none;
}

    ul.vList.vList_sm.mix-vList_indent > li > b {
        display: inline-block;
    }

.custom-details-add-wrapper .own-second-data-table thead tr th {
    border-bottom: none;
}

a.btn.btn-edit-progress.mb-3.gray-700-color {
    color: #344054;
}

.w-90 {
    width: 90%;
}

.w-10 {
    width: 10%;
}

.icon-data-list {
    justify-content: end;
}

    .icon-data-list > div {
        padding-left: 50px;
    }

.rating-lavel-section {
    border: solid 1px #e4e8ec !important;
}

.rating-drag-inner {
    background: #fdfdfd;
    border-bottom: 1px solid #dee2e6;
    padding: 13px 23px 13px 30px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
}

    .rating-drag-inner svg {
        color: #344054;
    }

.rubric-field-design .js-frameworkView-deleteContainer {
    padding: 5px 16px;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 0 5px rgba(221, 221, 221, 0.5);
    border: 1px solid #EAECF0;
    flex-direction: column;
}

    .rubric-field-design .js-frameworkView-deleteContainer ul.list-unstyled.list-inline {
        margin-bottom: 0px;
    }

.modal-dialog.p-4.max-width-add {
    min-width: 900px;
}

.toggle-parent-innercontent .toggle-inner-innercontent {
    margin-top: 20px;
}

.resource-heading {
    margin-bottom: 20px;
}

.play-btn-add svg {
    cursor: pointer;
}

.feedback-button-list a.btn.observation-bg:hover {
    background-color: #c5047e;
}

.feedback-button-list svg {
    width: 20px;
    height: 20px;
}

.framework-select-list.filer-select select {
    color: #667085;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.framework-feedback-right-section .sharing-table-wrapper thead tr th {
    font-weight: 500;
    font-size: 12px;
}

.toaster-custom-wrapper .toaster-image svg {
    border: 6px solid #D1FADF;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    outline: 8px solid #ECFDF3;
}

.toaster-inner-text a {
    margin-top: 20px;
    display: inline-flex;
    color: #6F2495 !important;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.toaster-inner-text {
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #475467;
}

.no-result-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn-notification {
    border-radius: 8px;
    border: 1px solid #A97CBF;
    background: #F2E9F4;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.notification-body-wrapper {
    padding: 20px 24px;
    border-top: 1px solid #EAECF0;
}

.notication-inner-body {
    margin-bottom: 32px;
}

.notification-left-side-data {
    position: relative;
    padding-right: 30px;
}

.notication-dots {
    position: absolute !important;
    top: 0;
    right: 0;
    cursor: pointer;
}

.notification-left {
    margin-right: 24px;
    width: 180px;
}

.notification-right {
    flex: 1;
}

.notification-image-section {
    border-radius: 6px;
    background: #F8F4FB;
    color: #6F2495;
    height: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 179px;
}

    .notification-image-section img {
        width: 100%;
        border-radius: 6px;
    }

.withsvg-wrapper {
    width: 50px;
    height: 50px;
    background: #E1D4EA;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-image-upper-section {
    min-height: 317px;
    display: flex;
    justify-content: end;
    align-items: center;
}

.notification-button-content a:hover {
    text-decoration: none;
    color: #8d3bb7;
}

.notification-button-content .btn-notification:not(:disabled):hover {
    background-color: #eee1f1;
}

.notication-dots ul li a {
    color: #B42318;
}

.notification-heading-data span {
    margin-left: 5px;
    display: inline-block;
}

.activity-svg-wrap {
    border-radius: 10px;
    border: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    width: 48px;
    height: 48px;
    padding: 12px;
    margin: 0px auto 10px;
}

.notification-section.notification-new-section button.btn.btn-cancel a:hover {
    color: #374150;
    text-decoration: none;
}

.notification-section.notification-new-section .notification-header button span.ml-2 {
    position: relative;
    top: -2px;
}

.notication-dots svg {
    stroke: #98A2B3;
}

.notification-description > div {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 21px;
}

.notification-heading-data > div {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 21px;
}

.empty-state-image {
    max-width: 512px;
    margin: auto;
}

    .empty-state-image svg {
        stroke: #6F2495;
    }

.progress-main-section.dashboard-paylist-section .card-header-custom .d-inline-block.ml-3 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.not-found-body {
    width: 500px;
    display: flex;
    justify-content: center;
}

    .not-found-body .base-black a {
        text-decoration: underline;
    }

        .not-found-body .base-black a:hover {
            color: #000
        }

    .not-found-body .collabe-color:hover {
        color: #6F2495;
    }

.custom-calender-design span span {
    color: #101828 !important;
}

.dashboard-right-feature-section .update-inner-list-section p {
    font-weight: 600 !important;
}

.activity-header-main.reflection-bg a#btnDownloadReport:hover {
    color: #970a62;
}

.newset-select .dropdown.bootstrap-select.filter-select {
    border: none;
}

.progress-main-section.dashboard-design-right-side .progress-body .update-inner-list-section p {
    font-weight: 600;
}

.login-section {
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 32px;
    border-radius: 16px;
}

.login-section-bg {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100vh;
    align-items: center;
    background-image: url('/assets/media/images/TCImages/login-Background.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.mb-28 {
    margin-bottom: 28px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-16 {
    margin-bottom: 16px;
}

.login-contact-text a:hover {
    color: #6F2495;
    text-decoration: underline;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-24 {
    margin-top: 24px;
}

.login-form-section.search-tab-wrapper svg {
    position: inherit;
    color: #6F2495;
}

.login-form-section.search-tab-wrapper input {
    padding-left: 15px;
}

.dashboard-image-upper-section #customLegend > div {
    margin-left: 16px;
}

.dashboard-image-upper-section > div {
    width: 100%;
}

.notification-section.notification-new-section .notification-header .filter-option-inner .filter-option-inner-inner {
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #101828;
}

.notification-header .search-inner-wrapper.d-flex.align-items-center a {
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.notification-section.notification-new-section .notification-header .bootstrap-select .dropdown-menu li a:hover {
    background-color: #F9FAFB;
}

.notification-section.notification-new-section .notification-header .bootstrap-select .dropdown-menu li a span.check-mark {
    right: 15px;
    top: 9px;
}

    .notification-section.notification-new-section .notification-header .bootstrap-select .dropdown-menu li a span.check-mark::after {
        color: #7F56D9;
        border-width: 0 0.22em 0.22em 0;
        width: 10px;
        height: 19px;
    }

.p-24 {
    padding: 24px;
}

.font-size-30 {
    font-size: 30px;
    line-height: 38px;
}

.font-size-48 {
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.96px;
}

.observation-timer-wrapper {
    border-radius: 16px;
    border: 1px solid #EAECF0;
    background: #FFF;
}

.insight-core-design {
    padding: 2px 10px;
    border-radius: 16px;
    background: #F2F4F7;
    mix-blend-mode: multiply;
    display: inline-block;
}

.inperson-observation .dropdown.bootstrap-select {
    width: 100% !important;
}

.inperson-observation .filter-option-inner-inner {
    color: #101828;
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.inperson-observation .bootstrap-select .dropdown-menu li a:hover {
    background-color: #F9FAFB;
}

.inperson-observation .bootstrap-select .dropdown-menu li a span.check-mark {
    right: 15px !important;
    top: 9px !important;
}

    .inperson-observation .bootstrap-select .dropdown-menu li a span.check-mark::after {
        color: #7F56D9;
        border-width: 0 0.22em 0.22em 0;
        width: 10px;
        height: 19px;
    }

.avtarImages-wrapper.profile-img img.mr-3 {
    width: 40px;
    height: 40px;
}

.update-dot-badges {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #026AA2;
    margin-right: 6px;
    display: inline-block;
}

.no-list-style ul {
    list-style: none;
}

.login-section .gray-900-color {
    color: #101828 !important;
}

.login-section .btn.btn-create-progress {
    padding: 10px 18px;
}

.login-section .btn.btn-create-progress {
    padding: 10px 18px;
    font-size: 16px !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.login-section .custom-checkbox-wrapper span.text-grey {
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color: #344054;
}

.login-section .color-blue-own.font-600 {
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.margin-tab.dropdown-item {
    margin-left: 18px !important;
}

.js-resource-libraries-doc-items {
    margin-bottom: 16px;
}

.remove-container svg {
    width: 20px;
    height: 20px;
    color: #344054;
}

.usage-statistics-wrapper {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    padding: 16px 14px;
    background: #fff;
}

.usage-column-content {
    border-radius: 8px;
    border: 1px solid #EAECF0;
    padding: 32px 20px 12px;
    background-color: #fff;
}

    .usage-column-content .col-md-6 {
        padding-left: 12px;
        padding-right: 12px;
    }

.useage-inner-column {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    padding: 16px;
    margin-bottom: 20px;
}

.dashboard-data-reports ul.js-dashboardDataDisplayTabs li {
    padding: 10px 15px 14px 15px;
    cursor: pointer;
}

.header-nav-wrapper {
    border-bottom: 1px solid #EAECF0;
    background: linear-gradient(180deg, #6F2495 0%, #110045 100%);
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 2px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

.right-section.reportSpecificBg {
    background: #fff;
}

.canvas-toltip-wrapper {
    background: #fff;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
    padding: 12px 12px;
    width: fit-content;
    position: absolute;
    z-index: 9999;
}

.canvas-toltip-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    background-color: #000;
    border-radius: 50%;
    margin-right: 8px;
}

.accent-color-bg {
    background-color: #FF8C00;
}

.collabe-color-bg {
    background-color: #6F2495;
}

.connect-color-bg {
    background-color: #0F3188;
}

.rose-color-bg {
    background-color: #AD006D;
}

.ajax-error {
    margin-top: 10px;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
}

.sumitted-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.check-bg-color {
    background-color: #D1FADF;
}

    .check-bg-color svg {
        stroke: #039855;
    }

.cross-bg-color {
    background-color: #FEE4E2;
}

    .cross-bg-color svg {
        stroke: #D92D20;
    }

.minus-bg-color {
    background-color: #F2F4F7;
}

.minus-bg-color {
    stroke: #475467;
}

.sumitted-icon svg {
    margin-right: 0px !important;
}

.ratinginner-period .rating-inner {
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #475467;
}

.logincheckbox-wrapper input#RememberMe {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    display: block;
}

.logincheckbox-wrapper input[type="hidden"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
}

.logincheckbox-wrapper label.checkbox {
    display: inline-flex;
    position: relative;
    cursor: pointer;
    font-size: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 0px;
}

.logincheckbox-wrapper .checkbox .checkmark:after {
    position: absolute;
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #7F56D9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.accountDeatils-parent {
    border-radius: 16px;
    border: 1px solid #EAECF0;
    background: #FFF;
}

.accountDeatils-header {
    padding: 20px 24px 20px;
    border-bottom: 1px solid #EAECF0;
}

.accountDeatils-body {
    padding: 16px 24px 24px;
}

    .accountDeatils-body.search-tab-wrapper input {
        padding: 10px 14px;
        height: 44px;
    }

    .accountDeatils-body textarea {
        min-height: 90px !important;
    }

.interlock-card {
    border-radius: 16px;
    border: 1px solid #C5A7D5;
    background: #F8F4FB;
    padding: 32px;
    min-height: 165px;
    position: relative;
}

.container-fluid.calibration-activites {
    padding-right: 32px;
}

.checked-card {
    border: 1px solid #D0D5DD;
    background: #F9FAFB;
}

.check-card-icon {
    width: 24px;
    height: 24px;
    padding: 6px;
    border-radius: 50%;
    border: 1px solid #D0D5DD;
    background: #F2F4F7;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
}

    .check-card-icon svg {
        stroke: #475467;
    }

.login-contact-text {
    font-weight: 600;
}

.input-icon-wrapper.Inpersoncalender-svg {
    cursor: pointer;
}

.datePicker.js-datePickerView input {
    height: 44px;
}

.js-selectFieldView input#ObservationTitle {
    height: 44px;
}

.input-icon-wrapper.Inpersoncalender-svg svg {
    top: 13px;
}

.toast-error {
    background-color: inherit;
}

.toaster-custom-wrapper.error-toaster .toaster-image svg {
    border: 6px solid #FEE4E2;
    outline: 8px solid #FEF3F2;
    stroke: #D92D20;
    fill: #FEE4E2;
}

.js-dashboardDataDisplayGraph {
    margin-top: 20px;
}

.observation-table-wrapper {
    width: 80px;
    height: 48px;
    margin-right: 15px;
    border-radius: 6px;
    background: #F8F4FB;
}

    .observation-table-wrapper img {
        width: 100% !important;
        height: 48px;
        border-radius: 6px;
    }

.select-piker-report li {
    padding: 0px;
}

    .select-piker-report li.active {
        border-bottom: none;
        padding: 0px;
    }

.mosquedo-wrapper-parent {
    position: fixed;
    bottom: 10px;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 999;
    cursor: context-menu;
    max-width: fit-content;
}

.mosquedo-wrapper .btn-cancel {
    border: 1px solid #6F2495;
}

.mosquedo-wrapper {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
    border: 1px solid #6F2495;
    background-color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
}

.termsandcondition-section {
    margin: auto;
    font-family: 'Inter';
    font-size: 16px;
    color: #000;
}

.heading-font {
    font-size: 28px;
    display: block;
    margin-bottom: 20px;
}

.termsandcondition-section p {
    margin-bottom: 20px;
}

.heading-3-font {
    color: #000;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 15px;
    display: block;
    margin-top: 15px;
}

.box_inset {
    padding: 20px;
}

.box_matted {
    border: 6px solid #eaeaea;
    background-color: #f9f9f9;
}

    .box_matted .dialog-hd {
        margin-bottom: 10px;
    }

.mix-txt_center {
    text-align: center;
}

.txt_8 {
    font-size: 24px;
}

#dialog-bd {
    max-height: 500px;
    overflow: auto;
}

.dialog-bd {
    margin-bottom: 20px;
}

.txt_12 {
    font-size: 16px;
}

.mix-dialog_center {
    text-align: center;
}

.btn_cta {
    border-radius: 4px;
    padding: 6px 20px;
    font-family: 'Inter';
    color: #ffffff;
    background-color: #17569b;
}

canvas#lineChart {
    height: 260px !important;
}

li.menu-option.deleteVideo svg {
    width: 20px;
    height: 20px;
    stroke: #B42318;
}

li.menu-option.archiveVideo svg {
    width: 20px;
    height: 20px;
    stroke: #344054;
}

.submit-header-style {
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.sort-playlist-icon {
    border: none;
    margin-top: -15px;
    margin-left: 5px;
}

.userassignmentlimit {
    text-align: left;
    color: #2376dc;
    margin: 3px 0 15px 0;
    margin-left: 68%
}

.pb-10 {
    padding-bottom: 10px;
}

.mobile-screen-inner-wrapper .mobile-header-section {
    padding: 24px 24px 20px 24px;
    border-bottom: 1px solid #EAECF0;
}

.mobile-screen-inner-wrapper {
    border-radius: 16px;
    border: 1px solid #EAECF0;
    background: #FFF;
}

.mobile-body-section {
    padding: 24px 24px 32px;
}

    .mobile-body-section .btn-create-progress a {
        color: #fff;
    }

    .mobile-body-section .upload-button-wrap a {
        color: #6F2495;
    }

.myactivity-content-video-title .text-3 {
    font-size: 14px;
}

.border-radius-own, .current-password-text {
    border-radius: 16px;
}

.tablesorter-header-inner span.checkmark {
    margin-right: 0px;
}

.tablesorter-header-inner .custom-chebox-wrapper {
    margin-right: 0px;
}

#partial-result .custom-chebox-wrapper {
    margin-left: 10px;
    margin-right: 0px;
}

#partial-result .sharing-table-wrapper tbody tr td svg, #partial-result .sharing-table-wrapper tbody tr td img {
    margin-right: 0px;
}

.border-own-simple a.btn {
    padding: 0px;
}

.container-fluid.header-secound + .vertical-view-section {
    padding-top: 162px;
}

.vertical-view-section, .CalibrationReport-wrapper, .js-userAccountsManagementView, .pt-97 {
    padding-top: 97px;
}

.dashboard-section-wrapper, mobile-screen-wrapper, .container-fluid.calibration-activites {
    padding-top: 105px;
}

.container-fluid.header-secound .vertical-view-section {
    padding-top: 0px;
}

.pt-140 {
    padding-top: 140px;
}

.activityTab-list-wrapper + .vertical-view-section {
    padding-top: 130px;
}

.container-fluid.CalibrationReport-wrapper .vertical-view-section {
    padding-top: 10px;
}

.search-container {
    position: relative;
}

.clear-search-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    font-weight: 600;
    color: #313184;
}

#txtfilterSearch::-webkit-search-cancel-button {
    display: none;
}

.divider-option {
    padding: 0;
    height: 0.5px; /* Adjust this for the thickness of the line */
    background: #999;
}

.ac-search-container {
    position: relative;
}

.clear-ac-search-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    font-weight: 600;
    color: #5a72af;
}

.file-font-wrapper {
    word-break: break-all;
}

.js-activity-search-filter::-webkit-search-cancel-button {
    display: none;
}

.resource-main-page.resource-add-mrgin .container-fluid.header-secound + .vertical-view-section {
    padding-top: 97px;
}
/*  check mark code*/
.checkmark {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 1px solid #7F56D9;
    border-radius: 6px;
    background-color: #F9F5FF;
    min-width: 22px;
    flex: 0 0 22px;
}

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #7F56D9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-badge {
    border-radius: 16px;
    font-weight: 500;
    font-size: 12px;
    padding: 4px 8px;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-desc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-asc {
    display: block !important;
}

th.tablesorter-header.ts-header.tablesorter-headerAsc.ts-cssAsc .tableSort-asc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssAsc .tableSort-desc {
    display: block !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-desc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-asc {
    display: block !important;
}

th.tablesorter-header.ts-header.tablesorter-headerAsc.ts-cssAsc .tableSort-asc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssAsc .tableSort-desc {
    display: block !important;
}

.component-name {
    display: flex;
    justify-content: space-between;
    margin-right: 20px;
}

.upperSection {
    display: flex;
    background-color: #fff;
    color: #000;
    font-size: 15px;
}

.add-border {
    border: 1px solid #ddd;
}

.frameWork {
    width: 33%;
    font-size: 16px;
}

.ratingPeriodSection {
    width: 45%;
    font-size: 16px;
}

.lower-main-section.add-border {
    border-top: none;
}

.avgRating {
    width: 10%;
    margin-right: 16px;
}

.ratingChange {
    width: 10%;
    text-align: center;
}

.text-center {
    text-align: center;
}

.font-weight {
    font-weight: 800;
}

.border-pad {
    border-right: 1px solid #ddd;
    padding: 12px 18px 10px;
}

.pad-20 {
    padding: 11px 0px 10px;
}

.ratingsWrapper {
    display: flex;
}

.rating-inner {
    width: 20%;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.avginner {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.lowerSection {
    background-color: #fff !important;
    border-top: none;
}

    .lowerSection .rating-inner {
        margin: 0px;
    }

    .lowerSection .frameWork {
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
        color: #101828;
    }

.ul-list-wrapper li {
    list-style: none;
}

ul.ul-list-wrapper {
    text-align: right;
    padding-right: 16%;
    margin-bottom: 0px;
}

.collapse.show {
    display: inherit !important;
}

.upperSection.lowerSection .collapsed img {
    transform: rotate(180deg);
}

.rating-inner-user {
    font-weight: 400 !important;
}

.frameWork.collapsed svg {
    transform: rotate(180deg);
}

.upperSection.instructionalsection-wrapper {
    background-color: #F9FAFB;
    border-bottom: 1px solid #EAECF0;
}

    .upperSection.instructionalsection-wrapper > div {
        color: #475467;
        font-family: 'Inter';
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 18px;
    }

.usage-statistics-wrapper .selectpicker ~ .btn {
    height: 41px !important;
}

.upperSection.lowerSection {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EAECF0;
}

.avgRating > div {
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: #475467;
}

.avgRating.text-center.border-pad .avginner {
    font-size: 12px;
    font-weight: 500;
}

.lower-main-section .frameWork {
    padding: 20px 18px 17px !important;
    border-right: 1px solid #EAECF0;
}

.lower-main-section .ratingPeriodSection, .lower-main-section .avgRating {
    padding: 21px 18px 20px !important;
    border-right: 1px solid #EAECF0;
}

.logo-learn-assess {
    height: 41px;
    position: relative;
}

.activityTab-list-wrapper.reflection-wrapper, .activity-header-main.observation-bg {
    margin-left: -30px;
    margin-right: -30px;
}

.container-fluid.CalibrationReport-wrapper.pt-77 {
    padding-top: 77px;
}

.usage-statistics-wrapper .select-piker-report .dropdown {
    width: 250px !important;
}

.school-video-dash .update-list-section {
    margin-top: 0px;
}

.video-pagination-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

    .video-pagination-wrapper a {
        color: #6f2495;
        float: left;
        padding: 4px 10px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
        margin: 0 4px;
        font-size: 12px;
        border-radius: 4px;
    }

        .video-pagination-wrapper a.active {
            background-color: #6f2495;
            color: white;
            border: 1px solid #6f2495;
        }

        .video-pagination-wrapper a:hover:not(.active) {
            background-color: #ddd;
        }

.js-add-max-height {
    max-height: calc(100% - 110px);
    overflow: auto;
}

    .js-add-max-height::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #ffffff;
    }

    .js-add-max-height::-webkit-scrollbar {
        width: 0px;
        background-color: #F5F5F5;
        height: 6px;
    }

    .js-add-max-height::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #b09feb;
    }

#m_VItem > div:first-child {
    margin-top: 3px;
}

#m_VItem > div {
    margin-bottom: 10px;
    padding-top: 16px;
    padding-bottom: 11px !important;
}

.now-playing-wrapper {
    background-color: #f9f5ff;
    border-radius: 12px;
    position: sticky;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    top: 66px;
    z-index: 1;
}

.video-pagination-wrapper {
    margin-top: 20px;
}

.pagination-loader-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.col-md-12.pagination-loader-wrapper img {
    width: 30px;
}

.progress-main-section.js-add-max-height .progress-header {
    position: sticky;
    z-index: 2;
    top: 0;
    background-color: #fff;
}

#m_VItem .relative-video-anchor > a {
    width: 125px;
    height: 73px;
}

.new-height-add {
    height: 100%;
}

.progress-main-section.js-add-max-height {
    position: fixed;
    margin-right: 20px;
    width: 30vw;
}

#m_ResourceLibraryVideos .add-padd a {
    word-break: break-all;
}

#m_VOPaging, #m_VOSPaging, #m_VORPaging, #m_ResourceUsageStatsDetailPaging {
    padding: 10px 15px 15px;
}

.min-height-table {
    min-height: 350px;
}

.profile-image-width {
    width: 150px;
}

.resource-anchor-wrapper {
    color: inherit;
    text-decoration: none;
}

.activity-header-main.reflection-bg a svg {
    width: 18px;
    height: 18px;
}

.acntname-txt-color, .acntname-txt-color a {
    color: #6941C6;
    font-weight: 600;
}

.group-account-edit .accountDeatils-body.search-tab-wrapper select {
    padding: 10px 14px;
    height: 44px;
    border-radius: 8px;
}

.group-account-edit .accountDeatils-body textarea {
    min-height: 60px !important;
    resize: none;
}

.ownerEmail-Input {
    min-height: 44px;
}

.clear-rc-search-button {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 22px;
    font-weight: 600;
    color: #5a72af;
}

.no-account-selected-section {
    max-width: 400px;
    margin: 0px auto;
}

.row.batch-upload-border {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px 20px;
}

.btn.dwn-btn a {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: #212529;
}

    .btn.dwn-btn a:hover {
        text-decoration: none;
    }

.btn.dwn-btn svg {
    margin-right: 5px;
}

.batch-upload-modal-body a, .batch-upload-modal-body span.upload-drop-msg > span {
    cursor: pointer;
}

    .batch-upload-modal-body a:hover {
        color: #8632b0;
    }

.container-fluid.header-secound.px-3.resource-body-section .select2-results__option:before {
    display: none;
}

.container-fluid.header-secound.px-3.resource-body-section li.select2-selection__choice {
    background-color: #fff !important;
    color: #000 !important;
    border: none;
    font-size: 15px;
    margin-top: 11px;
}

.container-fluid.header-secound.px-3.resource-body-section span.select2-selection__choice__remove {
    display: none;
}

td.max-width-td {
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* single select menu */
.select2-container--default .select2-selection--single {
    margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f77750;
    border-width: 2px;
}

.select2-container--default .select2-selection--single {
    border-width: 2px;
}

.select2-selection .select2-selection--single:after {
    content: 'hhghgh';
}

.modal-inner-body .select2-container--default .select2-selection--single .select2-selection__choice {
    margin-top: 11px;
    margin-left: 5px;
}

.js-userAccountsManagementView .sharing-table-wrapper table tbody tr td svg {
    margin-right: 0px;
}

.js-userAccountsManagementView .sharing-table-wrapper table tbody tr td a {
    padding: 0;
}

.userUpload-csv-wrapper img {
    position: absolute;
    top: 5px;
    left: -8px;
}

/*user account management*/

.masquerade-svg svg:hover {
    color: #2b7bdd;
}


.suggestion-item {
    padding: 8px;
    cursor: pointer;
    margin-bottom: 5px;
}

    .suggestion-item:hover, .suggestion-item.active {
        background-color: #f5f2f2; /* Color change on hover and active state */
        border-radius: 6px;
    }

#group-account-searchInput:hover + .your-arrow-icon {
    color: #007bff; /* Change the color of the arrow icon on hover */
}

.user-search-inner input {
    padding-left: 36px;
    height: 46px;
}

.user-search-inner .multi-input-image {
    left: 8px;
    top: 10px;
}

.user-search-inner, .user-input-section {
    position: relative;
}

.suggestion-list-wrapper {
    position: absolute;
    background-color: #fff;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border-top: 0;
    z-index: 9;
    max-height: 200px;
    overflow: auto;
    border: 1px solid #EAECF0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    font-size: 16px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
}

    .suggestion-list-wrapper::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #ffffff;
    }

    .suggestion-list-wrapper::-webkit-scrollbar {
        width: 4px;
        background-color: #F5F5F5;
        height: 6px;
    }

    .suggestion-list-wrapper::-webkit-scrollbar {
        width: 5px;
        background-color: #F5F5F5;
    }

    .suggestion-list-wrapper::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #ffffff;
    }

.userInput-loader-wrapper {
    position: absolute;
    top: 10px;
    right: 12px;
}

.user-search-inner input#group-account-searchInput {
    padding-left: 35px;
    height: 47px;
}

/* group account css*/
.label-account-text {
    border: 1px solid #ced4da;
    border-radius: 8px;
    padding: 10px 16px;
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border: 1px solid #D0D5DD;
    color: #495057;
    font-weight: 400;
    box-shadow: 0px 1px 2px rgb(16 24 40 / 5%);
    font-size: 16px;
    min-height: 44px;
    user-select: none;
    background-color: #efefef;
}


.cursor-pointer {
    cursor: pointer;
}

.evaluation-head-wrapper {
    background: #f1eded5e;
    border: 1px solid #ddd;
    padding: 15px 0px;
}

.pad-l-r-10 {
    padding-left: 7px;
    padding-right: 7px;
}

.obs-report-action-btn {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-right: 10px;
}

.resource-anchor-wrapper:hover {
    text-decoration: none;
}

.js-draggable-row {
    cursor: move;
}

.tag-visualizer-border {
    border: 2px solid rgba(221, 221, 221, 0.35);
    margin: 10px;
    margin-left: 0px;
}

.min-height-step {
    min-height: calc(100vh - 65px);
}

.new-select-dropdown select {
    height: 39px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 70px;
    color: #344054;
    font-weight: 400;
}

.new-select-dropdown .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: 80px;
}

.step-text.mb-3 {
    color: #000;
    font-size: 18px;
    font-weight: 600;
}

.record-success-wrapper {
    color: green;
    font-weight: 600;
}

.record-danger-wrapper {
    font-weight: 600;
    color: red;
}

.video-import-section {
    max-width: 480px;
    margin: auto;
}

.activityTab-list-wrapper + .vertical-view-section.pt-90 {
    padding-top: 90px;
}

/*assigment design css open*/


.assignment-progress .progress-bar {
    height: 8px;
    background-color: #6F2495 !important;
}

.assignment-progress .progress {
    background-color: #bcbcbc !important;
}

.assignment-table-wrapper table thead {
    background-color: #F9FAFB;
}

.mb-32 {
    margin-bottom: 32px;
}

.mt-32 {
    margin-top: 32px;
}

.assignment-table-wrapper table thead {
    background-color: #F9FAFB !important;
}

.task-radio-button-design input[type="radio"] {
    accent-color: #6F2495;
    width: 15px;
    height: 15px;
}

.task-radio-button-design .form-check {
    padding-bottom: 8px;
}

.w-90 {
    width: 90%;
}

.assignment-task-toggle {
    background-color: #F9FAFB;
    padding: 16px;
    border-radius: 16px;
}

.assignment-watchlist-wrapper {
    border-radius: 16px;
    background: #FFF;
    margin-bottom: 16px;
    padding: 16px;
}

.assignment-watchlist-wrapper-temp {
    border-radius: 5px;
    margin-bottom: 5px;
}

.assignment-task-toggle .three-dot-menu svg {
    transform: rotate(90deg);
    stroke: #98A2B3;
}

.assignment-watchlist-wrapper svg {
    cursor: pointer;
}

.assignment-watchlist-wrapper span.text-bg-grey {
    padding: 2px 8px;
    border-radius: 16px;
    background: #F2F4F7;
    mix-blend-mode: multiply;
    color: #344054;
    text-align: center;
    font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.replace-list-wrapper {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
    padding: 16px 16px;
}

.replace-text {
    color: #6F2495;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 142.857% */
}

.replace-link-text {
    color: #475467;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.select-video-modal-wrapper .js-detail-page-url img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.select-video-modal-wrapper .video-popup-section {
    max-height: 400px;
    overflow: auto;
}

.new-tablist-Design ul {
    border-radius: 8px;
    border: 1px solid #F2F4F7;
    background: #F9FAFB;
    padding: 8px;
}

    .new-tablist-Design ul li {
        width: 50%;
        text-align: center;
    }

        .new-tablist-Design ul li a {
            color: #667085;
            font-family: 'Inter';
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
        }

            .new-tablist-Design ul li a.active {
                border-radius: 6px;
                background: #FFF !important;
                box-shadow: 0px 1px 2px 0px rgb(16 24 40 / 6%), 0px 1px 3px 0px rgb(16 24 40 / 10%);
                color: #344054 !Important;
                font-family: 'Inter';
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 20px;
            }

.assignment-persent-text.ml-3 {
    white-space: nowrap;
}

.assigment-resource > div {
    width: fit-content;
}

.success-700-color {
    color: #027A48 !important;
}

.reflect-video-box {
    border-radius: 16px;
    background: #F9FAFB;
    padding: 16px 16px;
}

.reflect-section-body {
    border-radius: 16px;
    background: #FFF;
    padding: 16px 16px;
}

.reflect-button-list button {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 10px 16px;
    color: #344054;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-right: 24px;
}

.reflect-button-list a {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 10px 16px;
    color: #344054;
    font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-right: 24px;
}

.reflection-inner-section {
    display: flex;
    align-items: center;
}

.accountDeatils-footer-wrapper {
    margin-bottom: 24px;
    margin-right: 24px;
    display: flex;
    justify-content: end;
}


.Assignment-table-wrapper > td {
    padding: 0px !important;
    border-top: 0;
}

.w-60 {
    width: 60%;
}

.vertical-view-section.assignament-body-section .myactivity-content-video-title {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #FFF;
}

.vertical-view-section.assignament-body-section .toggle-inner-innercontent {
    margin-left: 39px;
}

.assignment-creation-wrapper .accountDeatils-body input, .assignment-creation-wrapper .accountDeatils-body textarea {
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgb(16 24 40 / 5%);
    height: 44px;
}

.assignment-creation-wrapper .assignment-task-toggle .three-dot-menu svg {
    transform: inherit;
}

.vertical-view-section.assignament-body-section .video-main-section-myactivity a:hover {
    text-decoration: none;
}

.assignment-table-wrapper .sharing-table-wrapper table tbody {
    background-color: inherit;
}

.reflected-table.sharing-table-wrapper.assignment-table-wrapper thead {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

    .reflected-table.sharing-table-wrapper.assignment-table-wrapper thead tr th:first-child {
        border-top-left-radius: 20px;
    }

    .reflected-table.sharing-table-wrapper.assignment-table-wrapper thead tr th:last-child {
        border-top-right-radius: 20px;
    }

.w-8 {
    width: 8%;
}

.assignament-body-section li.menu-option.archiveVideo svg {
    margin-right: 0px;
}

.modal-create-section input {
    height: 44px;
}

.watch-videoAccountLibrary {
    width: 178px;
    height: 106px;
}

    .watch-videoAccountLibrary img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;
        border-radius: 6px 0px 0px 6px;
    }

.selectList-popup-wrapper .myactivity-content-video-title {
    padding: 16px;
    border: 0;
    border-top: 1px solid #ddd;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-15 {
    width: 15%;
}

.w-32 {
    width: 32%;
}

.selectList-popup-header {
    background-color: #F9FAFB;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
    display: flex;
    padding: 16px;
}

.selectList-popup-wrapper {
    border-radius: 12px;
    border: 1px solid #EAECF0;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
}

.selectList-popup-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.selectList-popup-wrapper .myactivity-content-video-title .video-main-section-myactivity a:hover {
    text-decoration: none;
}

.selectPlayList-popup .selectList-popup-wrapper .myactivity-content-inner-video-title .btn {
    padding: 8px 14px;
}

.selectPlayList-popup .myactivity-content-inner-video-title > div, .selectList-popup-header > div {
    margin: 0px 10px;
}

.allPlaylist-select .filter-select {
    width: 100% !important;
    left: 0px;
}

.assignament-body-section .video-main-section-myactivity.w-60 a {
    width: 100%;
}

.assignament-body-section .video-main-section-myactivity.w-60 .assignement-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 540px;
    display: inline-block;
}

.unassigned-text {
    padding: 2px 8px;
    border-radius: 16px;
    background: #F2F4F7;
    mix-blend-mode: multiply;
    color: #344054;
    text-align: center;
    font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.viewAssignment-section-wrapper textarea#comment {
    padding-left: 11px;
}

.viewAssignment-section-wrapper .usercomment-section {
    padding: 24px 24px;
}

    .viewAssignment-section-wrapper .usercomment-section .right-side-section {
        background-color: #fff;
    }

.viewAssignment-section-wrapper .everyOneCommentSection span.everyOneSelct .dropdown.bootstrap-select {
    width: 140px;
}

    .viewAssignment-section-wrapper .everyOneCommentSection span.everyOneSelct .dropdown.bootstrap-select .filter-option-inner-inner {
        font-weight: 500;
        font-size: 14px;
    }

.commenting-assignment-section.viewAssignment-section-wrapper .everyOneCommentSection span.everyOneSelct .dropdown.bootstrap-select .filter-option-inner-inner button {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.accountDeatils-body.assignment-creation-wrapper .assignment-watchlist-wrapper:last-child {
    margin-bottom: 0px;
}

.accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content {
    margin-bottom: 12px !important;
}

    .accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content:last-child {
        margin-bottom: 0px !important;
    }

.pl-new-16 {
    padding-left: 16px !important;
}

.pr-new-16 {
    padding-right: 16px !important;
}

.pt-103 {
    padding-top: 103px;
}

.pt-20 {
    padding-top: 20px !important;
}

.upload-file-padding {
    padding: 16px 24px;
}

.deletesvg svg {
    stroke: #B42318 !important;
}

.assignment.multi-input-image {
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 2px;
}

.assignment.search-tab-wrapper svg {
    position: absolute;
    left: 6px;
    top: 13px;
    width: 21px;
    color: #667085;
}



.select-playlist-modal {
    max-height: 500px;
    overflow: auto;
}

.assignament-body-section li.menu-option.archiveVideo svg {
    margin-left: 0px;
}

.assignment-task-toggle li.menu-option svg {
    transform: inherit;
    margin-left: 0px;
}

.assignment-task-toggle li.menu-option.deletePlayList svg {
    width: 20px;
    height: 20px;
    stroke: #B42318;
}

.remove-video-btn {
    border-radius: 8px;
    border: 1px solid #D92D20;
    background: #D92D20;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #fff;
}

.sharing-table-wrapper.overflow-content.table-content-wrapper .collapse.show {
    display: table-row !important;
}
/* new css add */
.assignment-creation-wrapper .accountDeatils-body .myactivity-content-video-title.assignment-task-toggle {
    overflow: inherit;
}

.trash-svg svg {
    stroke: #B42318 !important;
}

.assignment-creation-wrapper .accountDeatils-body .select2-search--inline input.select2-search__field {
    margin-top: 8px !important;
    height: 36px !important;
}

.userImage-section img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
}

.select-taskmodal-body {
    padding: 32px 24px 32px;
}

    .select-taskmodal-body .video-upload-main-section {
        margin-bottom: 16px;
    }

        .select-taskmodal-body .video-upload-main-section:last-child {
            margin-bottom: 0px;
        }

.selectTask-border {
    border: 1px solid #6F2495 !important;
}

.w-40 {
    width: 40%;
}

.assignment-creation-wrapper div#cke_1_contents, .modal-create-section .cke_contents {
    height: 130px !important;
}

input#txtVideoSearch::-webkit-search-cancel-button {
    display: none;
}

.select-video-modal-wrapper .select-video-list {
    max-height: 488px;
    overflow: auto;
}

.task-type-detail .video-popup-section {
    max-height: 288px;
    overflow: auto;
}

    .select-video-modal-wrapper .select-video-list::-webkit-scrollbar-track, .task-type-detail .video-popup-section::-webkit-scrollbar-track, .assignment-table-wrapper::-webkit-scrollbar-track, .watch-videoTeachingChannel .col.px-0::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #ffffff;
    }

    .select-video-modal-wrapper .select-video-list::-webkit-scrollbar, .task-type-detail .video-popup-section::-webkit-scrollbar, .assignment-table-wrapper::-webkit-scrollbar, .watch-videoTeachingChannel .col.px-0::-webkit-scrollbar {
        width: 4px;
        background-color: #fff;
    }

    .select-video-modal-wrapper .select-video-list::-webkit-scrollbar-thumb, .task-type-detail .video-popup-section::-webkit-scrollbar-thumb, .assignment-table-wrapper::-webkit-scrollbar-thumb, .watch-videoTeachingChannel .col.px-0::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #b09feb;
    }

.no-decoration-anchor a {
    color: #6F2495;
}

    .no-decoration-anchor a:hover {
        text-decoration: none;
    }

.assignament-body-section .myactivity-content-video-title {
    overflow: inherit;
}

.assignment-table-wrapper {
    max-height: 300px;
    overflow: auto;
}

.archive-badge-wrapper {
    background: #D92D20;
    color: white;
    mix-blend-mode: multiply;
    text-align: center;
    font-size: 13px !important;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 20px;
    padding: 2px 8px;
    border-radius: 16px;
}

.complete-badge-wrapper {
    background: #ECFDF3;
    mix-blend-mode: multiply;
    color: #027A48;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 2px 8px;
    border-radius: 16px;
}

.gray-watch-wrapper {
    padding: 6px 10px;
    border-radius: 20px;
    font-family: 'Inter';
    display: flex;
    align-items: center;
}

.watch-videoTeachingChannel .col-auto a {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
    width: 178px;
    height: 106px;
}

.watch-videoTeachingChannel .col-auto img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.watch-videoTeachingChannel .update-inner-list-section {
    padding: 16px 0px 8px;
}

.watch-videoTeachingChannel .video-title-text a {
    height: 26px;
    -webkit-line-clamp: 1;
}
/* #m_TCHVideos */

.assignment-creation-wrapper .toggle-inner-innercontent .no-decoration-anchor ul {
    padding-inline-start: 40px;
}

.upload-file-content .video-after-upload svg {
    width: 18px;
    height: 18px;
}

.upload-file-content .file-upload-wrapper > div, .upload-file-content .video-after-upload {
    width: 35px;
    height: 35px;
}

.task-radio-button-design .form-check > div {
    position: relative;
    top: -4px;
}

.watch-videoTeachingChannel .col.px-0 {
    max-height: 520px;
    overflow: auto;
}

.assigneeTable thead th:nth-child(1) {
    width: 75% !important;
}

.assigneeTable thead th:nth-child(2) {
    width: 25% !important;
}

.accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content a:hover {
    color: #6F2495;
}

.word-wrap {
    word-break: break-all;
}

.video-popup-section.selected-document-link .video-upload-container {
    padding-right: 5px !important;
    width: 100%;
}

.upload-fileswrapper .file-upload-wrapper > div, .upload-fileswrapper .video-after-upload {
    width: 28px;
    height: 28px;
}

.accountDeatils-body.upload-fileswrapper svg {
    width: 20px;
    height: 20px;
}
/* .assignment-section-wrapper .assignment-task-toggle .toggle-inner-innercontent figure {
    width: 100% !important;
    margin: 0px !important;
} */

.manageUsersection .accountDeatils-header ol {
    padding-inline-start: 40px;
}

.manageUsersection .accountDeatils-header ul {
    padding-inline-start: 40px;
}

.assignment-creation-wrapper .assignment-section-wrapper .assignment-task-toggle .toggle-inner-innercontent figure {
    margin-bottom: 16px;
    display: block;
    /* width: fit-content!important; */
}
/* .manageUsersection .accountDeatils-header figure{
     width: fit-content;
}  */

.reflect-video-box a:hover {
    color: #6F2495;
}

.watch-videoTeachingChannel .video-title-text a:hover {
    color: #101828;
}

.assignament-body-section li.menu-option.archiveVideo svg {
    margin-left: 0px;
}

.assignment-task-toggle li.menu-option svg {
    transform: inherit;
    margin-left: 0px;
}

.assignment-task-toggle li.menu-option.deletePlayList svg {
    width: 20px;
    height: 20px;
    stroke: #B42318;
}

.remove-video-btn {
    border-radius: 8px;
    border: 1px solid #D92D20;
    background: #D92D20;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #fff;
}

.sharing-table-wrapper.overflow-content.table-content-wrapper .collapse.show {
    display: table-row !important;
}

.scroll-design::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #ffffff;
}

.scroll-design::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
}

.scroll-design::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #b09feb;
}

.js-selected-video-item .text-5.font-400.gray-600-color {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.video-popup-section.selected-video img {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.assigment-resource .teaching-practice-content a:hover {
    text-decoration: none;
}

.file-upload-wrapper.font-15 svg {
    color: #475467;
}

.collabe-color:hover {
    color: #6F2495;
}

.assignmentSelected {
    border: 2px solid #6F2495 !important;
}

.js-activity-assignments .myactivity-content-video-title:hover {
    border: 2px solid #6F2495 !important;
    cursor: pointer;
}

.assignmentSelectedTask {
    border: 2px solid #6F2495 !important;
}

.js-activity-assignments-task .myactivity-content-video-title:hover {
    border: 2px solid #6F2495 !important;
    cursor: pointer;
}

.js-activity-assignment-tasks .js-selected-assignment-task:hover {
    border: 2px solid #6F2495 !important;
    cursor: pointer;
}

.js-activity-assignment-tasks .js-selected-assignment-task, .js-activity-assignments-task .myactivity-content-video-title {
    border: 2px solid #EAECF0;
}

.table-responsive.scroll-design .menu-options {
    top: -15px;
    right: 19px;
}

.incomplete-grey-wrapper {
    padding: 2px 8px;
    border-radius: 16px;
    background: #F2F4F7;
    mix-blend-mode: multiply;
    color: #344054;
    text-align: center;
    font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.js-activity-assignments .myactivity-content-video-title {
    border: 2px solid #ddd;
}

.border-radius-16 {
    border-radius: 16px;
}

.manageUsersection figure img {
    width: 100%;
}

.view-task-newSection .accountDeatils-header figure {
    margin-bottom: 16px;
    display: block;
    /* width: fit-content!important; */
}

    .view-task-newSection .accountDeatils-header figure img {
        width: 100%;
    }

.view-task-newSection .accountDeatils-header ul, .view-task-newSection .accountDeatils-header ol {
    padding-inline-start: 40px;
}
/*  */

.js-draggable-row-section {
    cursor: move;
}

.js-draggable-row-task {
    cursor: move;
}

/*  */
.assignment-report-inner {
    border: 1px solid #EAECF0;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0px 1px 3px 0px rgb(16 24 40 / 10%);
}

.assignment-report-header {
    padding: 13px 18px;
    background-color: #F9FAFB;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.resourse-report-assignment .assignment-report-inner .myactivity-content-video-title {
    padding: 0px 0px 0px;
    margin-bottom: 0px;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #ddd;
}

    .resourse-report-assignment .assignment-report-inner .myactivity-content-video-title:last-child {
        border-bottom: none;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .resourse-report-assignment .assignment-report-inner .myactivity-content-video-title .myactivity-content-inner-video-title {
        padding: 22px 20px 22px;
    }

.resourse-report-assignment .assignment-report-inner .sharing-table-wrapper {
    border: none;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

    .resourse-report-assignment .assignment-report-inner .sharing-table-wrapper table {
        border-radius: 0px;
    }

        .resourse-report-assignment .assignment-report-inner .sharing-table-wrapper table tr td {
            border-top: 0px;
            padding-left: 54px;
            padding-right: 20px;
        }

.assignment-report-inner a:hover {
    text-decoration: none;
}

.resourse-report-assignment .assignment-report-inner .assignment-table-wrapper table tbody tr {
    border-top: 1px solid #ddd;
}

.w-28 {
    width: 28%;
}

.resourse-report-assignment .assignment-report-inner .toggle-parent-innercontent .toggle-inner-innercontent {
    margin-top: 0px;
}

.resourse-report-assignment .assignment-report-inner .reflected-table.sharing-table-wrapper tbody tr td span {
    font-weight: 500;
}

.searchColleagecheckbox .custom-chebox-wrapper {
    top: 4px;
    margin-right: 0px;
}

.color-red-own {
    color: #D92D20;
}

.add-position-own {
    position: absolute;
    left: 0;
    right: 0;
}

.bg-red-own {
    background-color: #D92D20;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px !important;
    color: #fff;
}

.ck-content p {
    margin-bottom: 0px;
}

.assignment-report-inner .video-main-section-myactivity a {
    cursor: inherit;
}

.assignment-report-inner .reflected-table.sharing-table-wrapper.assignment-table-wrapper {
    overflow: inherit;
    max-height: none;
}

.assignament-body-section .assignment-table-wrapper {
    overflow: inherit;
    max-height: none;
}

.modal-anouncement-wrapper .modal-lg .modal-content {
    border-radius: 12px !important;
    border: 1px solid #fff;
}

.annoucenment-modal-body {
    color: #000 !important;
    font-size: 23px !important;
    border: 1px solid #efefef;
    border-radius: 6px;
    line-height: 35px !important;
}

    .annoucenment-modal-body .text-3 {
        color: #000;
        font-size: 19px;
        line-height: 33px;
    }

.modal-anouncement-wrapper .modal-lg {
    width: 800px;
}

.modal-anouncement-wrapper .modal-header {
    border-bottom: 1px solid #efefef !important;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.modal-anouncement-wrapper .border-top {
    border-top: 1px solid #efefef !important;
    padding-bottom: 16px;
}

.modal-anouncement-wrapper .modal-footer button {
    border-radius: 6px !important;
    font-weight: 700;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    font-family: 'Inter';
}

.mosquedo-wrapper span {
    position: relative;
    margin-right: 8px;
    top: -2px;
}

.mosquedo-wrapper .font-weight-600 {
    font-weight: 600 !important;
}

@media (max-width: 1199.98px) {
    .grade-list > div {
        margin-bottom: 10px;
    }

    .w-add-responsive {
        width: 100%
    }

    .w-12 {
        width: 27%;
    }

    .color-change-video-title {
        line-height: 18px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .framework-feedback-right-section .sharing-table-wrapper thead tr.tablesorter-headerRow th:first-child {
        white-space: nowrap;
    }

    .update-list-section.dashboard-section-wrapper .progress-header {
        padding: 11px 13px;
        flex-wrap: wrap;
    }

    .dashboard-section-wrapper .progress-header h3 {
        font-size: 14px;
    }

    .progress-main-section.dashboard-paylist-section .card-header-custom .d-inline-block.ml-3 {
        font-size: 13px;
        line-height: 18px;
    }

    .progress-button.d-flex.justify-content-between.align-items-center.mb-3.px-3 {
        flex-wrap: wrap;
    }

    .heading-tc-video {
        font-size: 18px;
        line-height: 23px;
    }

    .notification-section {
        padding: 0px 80px 0px 80px;
    }

    .video-reflected-shared {
        flex-wrap: wrap;
    }

    .date-added-title-myactivity .profile-image-sec {
        width: 30px;
    }

    .framework-body-content.General-body-content .video-inner-container a.collabe-color {
        width: 277px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .framework-body-content.General-body-content .video-inner-container .rose-color {
        width: 150px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .videoplaylist-class-record .grade-list > div {
        margin-bottom: 0px;
    }

    #m_TCAdminGroup .three-dot-menu svg, #m_TCAdminPlayList .three-dot-menu svg {
        margin-left: 20px;
    }

    .progress-main-section.dashboard-paylist-section .container-fluid {
        padding: 0px;
    }

    #customLegend {
        width: auto !important;
    }

    .myactivity-content-video-title {
        padding: 20px;
        overflow: auto;
        margin-bottom: 20px;
    }

        .myactivity-content-video-title .right-image-myactivity .collapsed img {
            transform: rotate(0deg);
        }

        .myactivity-content-video-title .right-image-myactivity img {
            transform: rotate(90deg);
        }

    .container-fluid.header-secound + .vertical-view-section {
        padding-top: 162px;
    }

    .vertical-view-section, .CalibrationReport-wrapper, .js-userAccountsManagementView, .pt-97 {
        padding-top: 97px;
    }

    .dashboard-section-wrapper, mobile-screen-wrapper, .container-fluid.calibration-activites {
        padding-top: 105px;
    }

    .container-fluid.header-secound .vertical-view-section {
        padding-top: 0px;
    }

    .pt-140 {
        padding-top: 140px;
    }

    .resource-main-page.resource-add-mrgin .container-fluid.header-secound + .vertical-view-section {
        padding-top: 97px;
    }

    .progress-main-section.js-add-max-height {
        width: auto;
    }
    /* assigment maker css open */

    .assignment.multi-input-image {
        position: absolute;
        left: 0px;
        top: 2px;
    }

    .assignment.search-tab-wrapper svg {
        position: absolute;
        left: 6px;
        top: 13px;
    }

    .accountDeatils-body.assignment-creation-wrapper .assignment-watchlist-wrapper:last-child {
        margin-bottom: 0px;
    }

    .accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content {
        margin-bottom: 12px !important;
    }

        .accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content:last-child {
            margin-bottom: 0px !important;
        }

    .pl-new-16 {
        padding-left: 16px !important;
    }

    .pr-new-16 {
        padding-right: 16px !important;
    }

    .pt-103 {
        padding-top: 103px;
    }

    .pt-20 {
        padding-top: 20px !important;
    }

    /*  */

    .framework-body-content.General-body-content .video-inner-container a.collabe-color {
        width: 277px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .framework-body-content.General-body-content .video-inner-container .rose-color {
        width: 150px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .videoplaylist-class-record .grade-list > div {
        margin-bottom: 0px;
    }

    #m_TCAdminGroup .three-dot-menu svg, #m_TCAdminPlayList .three-dot-menu svg {
        margin-left: 20px;
    }

    .progress-main-section.dashboard-paylist-section .container-fluid {
        padding: 0px;
    }

    #customLegend {
        width: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #m_TCHVideos .p-0 a {
        padding-top: 100%;
    }

    .everyOneCommentSection {
        margin-bottom: 10px;
    }

    .reflected-table {
        white-space: nowrap;
        overflow: auto;
    }

    .framework-feedback-right-section {
        margin-top: 20px;
    }

    .myactivity-content-inner-video-title {
        overflow: auto;
        white-space: nowrap;
    }

    .date-added-title-myactivity .profile-image-sec {
        width: 30px;
    }

        .date-added-title-myactivity .profile-image-sec img {
            max-width: inherit;
        }

    .date-added-title-myactivity.w-15, .finearts-title-myactivity.w-20, .video-main-section-myactivity.w-43.d-flex {
        width: auto;
    }

    .create-new-list-text button {
        margin-left: 0px !important;
    }

    .feedback-Steps-section {
        width: fit-content;
    }

    .framework-body-content.General-body-content .video-inner-container a.collabe-color {
        width: 277px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #customLegend {
        width: auto !important;
    }

    .framework-body-content.General-body-content .video-inner-container span.rose-color {
        width: 200px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .videoplaylist-class-record .grade-list > div {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .admin-playlist-video-section.js-draggable-row .row {
        white-space: nowrap;
        overflow: auto;
    }

    #js-filter-activityVideos .myactivity-content-inner-video-title .color-change-video-title {
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .account-title-myactivity.w-15 {
        width: auto;
    }

    #m_TCHVideos .update-inner-list-section > .d-flex.justify-content-between {
        overflow: auto;
    }

    .showmore-gradient {
        width: 100%;
        height: 30px;
        position: absolute;
        bottom: 0;
    }

    #m_TCAdminGroup .three-dot-menu svg, #m_TCAdminPlayList .three-dot-menu svg {
        margin-left: 20px;
    }

    .progress-main-section.dashboard-paylist-section .container-fluid {
        padding: 0px;
    }

    #customLegend {
        width: auto !important;
    }

    .newset-select {
        margin-top: 10px;
    }

    .js-selectFieldView .account-filter {
        min-width: 150px !important;
    }

    .container-fluid.header-secound + .vertical-view-section.activity-ipad-padding {
        padding-top: 220px;
    }

    .add-resorces-btn {
        margin-top: 10px;
    }

    .container-fluid.header-secound + .vertical-view-section {
        padding-top: 215px;
    }

    .vertical-view-section, .CalibrationReport-wrapper, .js-userAccountsManagementView, .pt-97 {
        padding-top: 97px;
    }

    .dashboard-section-wrapper, mobile-screen-wrapper, .container-fluid.calibration-activites {
        padding-top: 105px;
    }

    .container-fluid.header-secound .vertical-view-section {
        padding-top: 0px;
    }

    .pt-140 {
        padding-top: 140px;
    }

    .resource-main-page.resource-add-mrgin .container-fluid.header-secound + .vertical-view-section {
        padding-top: 97px;
    }

    .progress-main-section.js-add-max-height {
        position: inherit;
        width: 100%;
    }

    .flex-wrap-md-add {
        flex-wrap: wrap;
    }

    .viewtask-assignment .assigment-library-wrap .watch-videoAccountLibrary img {
        aspect-ratio: inherit;
    }

    .viewtask-assignment .assigment-library-wrap .watch-videoAccountLibrary {
        width: 100%;
        height: 100%;
        margin-bottom: 15px;
    }

    .viewtask-assignment .assigment-library-wrap .d-flex.align-items-center {
        flex-wrap: wrap;
    }

    .container-fluid.header-secound + .vertical-view-section.assignament-body-section {
        padding-top: 150px;
    }
    /*  */

}

@media (max-width: 991.98px) {
    .card-no-activity-section .col-sm-6 {
        margin-bottom: 15px;
    }

    .grade-list > div {
        margin-bottom: 10px;
    }

    .cta-ft.mr-2.ml-auto {
        margin-left: inherit !important;
    }

    .account-filter {
        position: relative;
    }

    .search-header {
        margin: 20px 0px;
    }

    .progress-header {
        flex-wrap: wrap;
    }

    .progress-button .btn:first-child {
        margin-left: 0px;
    }


    .progress-inner-body {
        margin-bottom: 25px;
    }

    .progress-left-side img {
        width: 32px;
        margin-right: 10px;
    }

    .progress-left-side svg {
        width: 24px;
        margin-right: 10px;
    }

    .progress-text h5 {
        font-size: 10px;
    }

    .progress-text p {
        font-size: 9px;
    }

    .progress-text h3 {
        font-size: 11px;
    }

    .w-add-responsive {
        width: 100%;
        align-items: center;
    }

    .upload-video-center {
        margin: 0px 15px;
    }

    .modal-dialog.p-4.max-width-add {
        min-width: inherit;
    }

    .heading-tc-video {
        font-size: 22px;
        line-height: 21px;
    }

    .text-6.file-font-wrapper {
        word-break: break-all;
    }

    .color-change-video-title {
        line-height: 18px !important;
    }

    .w-12 {
        width: 27%;
    }

    .video-reflected-shared {
        flex-wrap: wrap;
    }

    .js-cohortManagmentView.bg-white.p-4.w-75 {
        width: 100% !important;
        margin: 16px;
    }

    .overflow-content {
        width: 100%;
        overflow: auto;
        white-space: nowrap;
    }

    .videoplayer-main-section.js-teachingChannelVideoDetail .progress-button button {
        margin-left: 10px;
    }

    .progress-button.d-flex.justify-content-between.align-items-center.mb-3.px-3 {
        flex-wrap: wrap;
    }

    .notification-section {
        padding: 0px 40px 0px 40px;
    }

    .myactivity-content-video-title {
        padding: 8px;
    }

    .reflected-table.sharing-table-wrapper tbody tr td span {
        font-weight: 400;
        font-size: 9px;
    }

    .reflected-table.sharing-table-wrapper thead th {
        font-weight: 500;
        font-size: 9px;
        line-height: 14px;
    }

    .main-wrapper .btn {
        padding: 5px 10px;
    }

    .font-size-48 {
        font-size: 30px;
        line-height: 20px;
    }

    .font-size-30 {
        font-size: 20px;
        line-height: 20px;
    }

    .inperson-observation .filter-option-inner-inner {
        font-size: 12px;
    }

    .dashboard-image-upper-section.w-100 {
        font-size: 12px;
    }

    .assignament-body-section div#myTabContents .myactivity-content-video-title.mb-32.mt-32 {
        overflow: auto;
    }

        .assignament-body-section div#myTabContents .myactivity-content-video-title.mb-32.mt-32 .myactivity-content-inner-video-title {
            width: 1100px;
        }

    .watch-videoTeachingChannel .col-auto a {
        width: 100%;
        height: 100%;
        padding-top: inherit;
    }

    .watch-videoTeachingChannel .col-auto img {
        position: inherit;
    }
}

@media (max-width: 767.98px) {
    .modal-dialog.p-4.max-width-add {
        min-width: inherit;
    }

    .search-tab-wrapper {
        margin-bottom: 15px;
    }

    .activityTab-list-wrapper .nav {
        flex-direction: column;
    }

    .dash-header-section {
        padding-bottom: 20px;
    }

    .progress-inner-body {
        margin-bottom: 20px;
    }

    .main-wrapper .btn {
        font-size: 12px;
        padding: 7px 12px;
    }

    #customLegend {
        width: auto !important;
    }

    .myactivity-content-inner-video-title {
        width: 1150px;
    }

    .toggle-parent-innercontent {
        width: 1150px;
    }

    .card-no-activity-section .col-sm-6 {
        margin-bottom: 15px;
    }

    .grade-list > div {
        margin-bottom: 10px;
    }

    .dash-header-section h4 {
        line-height: inherit;
    }

    .teacher-header-heading h5 {
        font-size: 12px;
    }

    .text-6.file-font-wrapper {
        word-break: break-all;
        margin-right: 20px;
    }

    .update-inner-list-section {
        margin-top: 20px;
    }

    .update-list-section {
        margin-top: 0px;
    }

    .thought-starter-list li {
        font-size: 12px;
    }

    .thought-starter-list {
        margin: 0px 20px 10px;
    }

    .draggable-content {
        padding: 0;
    }

        .draggable-content .update-inner-list-section {
            margin-top: 0px !important;
        }

    .datePicker.js-datePickerView {
        margin-bottom: 16px;
    }

    .row.pb-3.js-tabsView-panel {
        overflow: auto;
    }
    .js-cohort-tabsView-panel {
        overflow: auto;
    }

    .filter-footer button {
        margin-bottom: 10px;
    }

    .custom-chebox-wrapper {
        margin-bottom: 12px;
    }

        .custom-chebox-wrapper + .cta-ft {
            margin-left: 0px !important;
        }

    .js-cohortManagmentView .flex-one {
        flex: inherit;
    }

    .js-cohortManagmentView .swap-wrapper {
        margin-top: 30px;
        padding-left: 0px !important;
    }

    .account-filter label {
        position: inherit !important;
    }

    .filter-and-sorting-resource.ml-auto {
        margin-left: initial !important;
    }

    .main-wrapper .btn {
        margin-bottom: 16px;
    }

    .cta-ft.mr-2.ml-auto {
        margin-left: inherit !important;
    }

    .account-filter {
        position: relative;
    }

    .obsreport-main-list, .row.video-menu-header {
        width: 1000px;
    }

    .grade-list {
        flex-wrap: wrap;
    }

    .breadcrub-wrapper ol.breadcrumb li {
        font-size: 10px;
    }

    .upload-video-center {
        margin: 0px 15px;
    }

    .file-upload-wrapper {
        width: auto;
    }

    .upload-drop-msg {
        font-size: 10px;
    }

    .update-inner-list-section.mb-5, .progress-button.text-right.mb-4 {
        padding: 0px 18px;
    }

    .video-title-text a {
        height: 45px;
    }

    #m_ResourceLibraryVideos .w-100.ml-3 {
        word-break: break-word;
    }

    #m_ResourceLibraryVideos a .d-flex.align-items-center {
        flex-direction: column;
    }

    .js-cohortManagmentView.bg-white.p-4.w-75 {
        width: 100% !important;
        margin: 16px;
    }

    .overflow-content {
        width: 100%;
        overflow: auto;
        white-space: nowrap;
    }

    .framework-feedback-right-section {
        margin-top: 25px;
    }

    .activity-header-main .col-md-7.col-12.col-lg-6.col-xl-6.d-flex.justify-content-end {
        flex-wrap: wrap;
    }

        .activity-header-main .col-md-7.col-12.col-lg-6.col-xl-6.d-flex.justify-content-end a {
            display: block;
        }

    .feedback-Steps-section {
        width: 100%;
    }

    .feedback-button-list {
        flex-wrap: wrap;
    }

        .feedback-button-list .ml-3 {
            margin-left: 0px !important;
        }

    .dashboard-image-upper-section {
        min-height: initial;
    }

    .progress-header h3 {
        font-size: 16px;
    }

    .update-list-section.dashboard-section-wrapper {
        padding: 0px 15px;
    }

    .notification-section {
        padding: 0px 15px 0px 15px;
    }

    .notification-header {
        flex-wrap: wrap;
    }

        .notification-header .search-inner-wrapper.d-flex.align-items-center {
            flex-wrap: wrap;
        }

            .notification-header .search-inner-wrapper.d-flex.align-items-center .ml-3 {
                margin-left: 0px !important;
            }

    .font-size-48 {
        font-size: 20px;
        line-height: 13px;
    }

    .font-size-30 {
        font-size: 16px;
        line-height: 13px;
    }

    .login-section {
        padding: 32px 24px;
    }

    .usage-column-content {
        padding: 10px 2px 10px;
    }

    #usage-statistics .custom-calender-design, #Resource-Videos-Watched .custom-calender-design {
        margin-bottom: 10px;
    }

    #Resource-Videos-Watched .pagination-wrapper, #Resource-Videos-Watched .page-numbers {
        flex-wrap: nowrap;
    }

    .activityTab-list-wrapper .nav {
        width: 100%;
    }

    .dashboard-image-upper-section.w-100 {
        font-size: 10px;
    }

    #m_TCHVideos .d-flex.justify-content-between {
        flex-wrap: wrap;
    }

    #customLegend {
        width: 100% !important;
    }

    .mb-show.text-left.text-5.font-400 a.collabe-color {
        word-break: break-all;
        width: 175px;
        display: block;
        white-space: nowrap;
        overflow: auto;
        text-overflow: ellipsis;
    }

    .addlink-url {
        margin-bottom: 16px;
    }

    .video-inner-container {
        padding: 10px;
        margin-right: 10px;
    }

    .remove-container > div {
        padding: 8px 7px;
    }

    .add-bg-header .filter-list-w {
        margin-bottom: 10px;
    }

    .header-right-side {
        display: none;
    }

    .file-upload-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .parent-process .text-left.own-small-font {
        word-break: break-all;
        margin-right: 10px;
    }

    .video-inner-container span.text-4.font-500 {
        width: 163px;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
    }

    .video-after-upload svg {
        width: 16px;
        height: 16px;
    }

    .upload-video-center .text-center.mt-3.mb-3 a {
        width: 100%;
        display: inline-block;
        padding: 12px 20px;
    }

    .upload-video-center .text-center.mt-3.mb-3 {
        margin-left: 24px;
        margin-right: 24px;
    }

    .item-image-sec {
        width: 100%;
    }

    .resource-video-content .col-md-4 {
        margin-bottom: 20px;
    }

        .resource-video-content .col-md-4:last-child {
            margin-bottom: 0px;
        }

        .resource-video-content .col-md-4:nth-child(3) {
            order: -1;
        }

    .filter-body.filter-by-list .fliter-by-list-header {
        flex-direction: column;
    }

    .fliter-by-list-header .text-3.mr-3 {
        width: 100%;
        margin-left: 25px;
    }

    .videoplayer-main-section.js-teachingChannelVideoDetail .progress-button button {
        margin-left: 0px;
        width: 100%;
    }

    #js-AccountDiv {
        margin-bottom: 16px;
    }

    .usage-statistics-wrapper .filter-date {
        margin-bottom: 11px;
    }

    #tableVideoObsInstfocusData .upperSection.instructionalsection-wrapper {
        width: 1200px
    }

    .js-RolesManagementView .container-fluid.w-75 {
        width: 100% !important;
    }

    .avtar-section .btn.btn-edit.text-light-primary {
        margin-bottom: 0px;
    }

    .row.js-commentPanelView-selectFieldView .col-md-4 {
        margin-bottom: 15px;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .activity-header-main.reflection-bg a, .activity-header-main.observation-bg a {
        margin-bottom: 0px;
        margin-top: 10px;
    }

    .resource-body-section {
        padding: 4px 24px 10px;
    }

    #createVideoObservationView-question label {
        margin-bottom: 0px;
    }

    .progress-button.d-flex .position-relative {
        width: 100%;
    }

        .progress-button.d-flex .position-relative button {
            width: 100%;
            margin-top: 0px;
        }

    .video-player-inner-w .progress-button .d-flex.justify-content-between {
        margin-bottom: 12px;
    }

    .upload-video-center .resource-body-section {
        padding-top: 20px;
    }

    .selectpicker ~ .btn {
        padding: 13px 14px !important;
        height: 48px;
    }

    .min-height-step .upload-video-center .resource-body-section {
        margin-top: 14px;
    }

    .progress-button.d-flex .position-relative {
        margin-bottom: 12px;
    }

    .swap-wrapper {
        width: 100%;
    }

    .js-step1Part1View.js-validationView .resource-body-section {
        margin-top: 0px;
        padding-top: 0px;
    }

    .usage-statistics-wrapper.mb-32 .d-flex.align-items-center.flex-wrap .filter-date {
        margin-bottom: 0px;
    }

        .usage-statistics-wrapper.mb-32 .d-flex.align-items-center.flex-wrap .filter-date .custom-calender-design {
            margin-bottom: 0px !important;
        }

    .profile-right-content {
        flex: auto;
    }

    .profile-footer-btn .btn {
        width: 100%;
    }

    .flex-one.profile-right-content .form-own.form-own-md .form-group, .current-password-text .form-own.form-own-md .form-group {
        margin-bottom: 0px;
    }

    .fileField-pseudoInput-label {
        height: 44px;
        border-radius: 6px;
    }

    .profile-right-content ul {
        margin-bottom: 0px;
    }

    .framework-body-content.General-body-content .btn-framework-feeback {
        margin-bottom: 0px !important;
    }

    .js-resourcesView-list .video-inner-container span.text-4.font-500 {
        width: 132px;
    }

    .js-resourcesView-list .mb-show.text-left.text-5.font-400 a.collabe-color {
        width: 142px;
    }

    .activityTab-list-wrapper .nav li a {
        display: inline-block;
        width: 100%;
    }

    .filter-and-sorting-resource.pad-up-down-sm > div {
        width: 100%;
        margin-bottom: 6px;
        margin-left: 0px !important;
    }

    .activityTab-list-wrapper .nav li {
        padding-bottom: 0px;
    }

    .js-dashboardDataDisplayGraph {
        margin-top: 10px;
    }

    .videoplayer-main-section.js-teachingChannelVideoDetail .menu-options.js-menu-options {
        right: 0px !important;
    }

    .create-new-list-text button {
        text-align: left;
    }

    .framework-body-content.General-body-content .video-inner-container span.rose-color {
        width: 174px;
    }

    .framework-body-content.General-body-content .video-inner-container .d-flex.justify-content-between.align-items-center.w-100.flex-wrap > div, .framework-body-content.General-body-content .video-inner-container .d-flex.justify-content-between.align-items-center.w-100.flex-wrap > div a {
        width: 100%;
    }

    .custom-calender-design span {
        font-size: 9px;
    }

    #m_TCAdminPlayList .sharing-table-wrapper tbody tr td svg {
        margin-left: 20px;
    }

    #m_TCAdminPlayListVideos .update-inner-list-section {
        margin-top: 0px;
    }

    .disable-mobile {
        pointer-events: none;
        user-select: none;
        opacity: 0.4;
    }

    .mosquedo-wrapper-parent {
        word-break: break-all;
        margin: 0px 16px;
        text-align: center;
    }

        .mosquedo-wrapper-parent .btn {
            margin-bottom: 0px;
        }

    .mosquedo-wrapper > div:nth-child(2) {
        width: 100%;
    }

    .upload-button-wrap {
        margin-bottom: 0px !important;
    }

    .text-5.font-400.text-white {
        width: 180px;
        word-break: break-all;
    }

    .container-fluid.header-secound + .vertical-view-section {
        padding-top: 310px;
    }

    .col-md-12.col-lg-12.col-12.d-flex.justify-content-md-end.flex-wrap.pb-3.pt-3.resource-body-section {
        padding: 4px 0px 10px;
    }

    .vertical-view-section, .CalibrationReport-wrapper, .js-userAccountsManagementView, .pt-97 {
        padding-top: 150px;
    }

    .resource-header {
        padding: 12px 24px;
    }

    /* assigment maker css open */

    .assignment.multi-input-image {
        position: absolute;
        left: 0px;
        top: 2px;
    }

    .assignment.search-tab-wrapper svg {
        position: absolute;
        left: 6px;
        top: 13px;
    }

    .accountDeatils-body.assignment-creation-wrapper .assignment-watchlist-wrapper:last-child {
        margin-bottom: 0px;
    }

    .accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content {
        margin-bottom: 12px !important;
    }

        .accountDeatils-parent.mb-32 .assigment-resource .mb-3.text-bg-light-primary.p-2.teaching-practice-content:last-child {
            margin-bottom: 0px !important;
        }

    .pl-new-16 {
        padding-left: 16px !important;
    }

    .pr-new-16 {
        padding-right: 16px !important;
    }

    .pt-103 {
        padding-top: 103px;
    }

    .pt-20 {
        padding-top: 20px !important;
    }

    .assignment-creation-wrapper.pt-97.px-0 {
        padding-top: 85px;
    }

    .assignment-creation-wrapper .col-md-12.col-lg-7.col-xl-8 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .assignment-creation-wrapper .col-md-12.col-lg-5.col-xl-4 {
        padding-left: 0px;
        padding-right: 0px;
    }

    .assignment-creation-wrapper .accountDeatils-body .myactivity-content-video-title.assignment-task-toggle {
        overflow: auto;
    }

    .assignament-body-section .newset-select.d-flex.flex-wrap > div {
        margin-bottom: 20px;
        margin-right: 0px !important;
    }

        .assignament-body-section .newset-select.d-flex.flex-wrap > div:last-child {
            margin-bottom: 0px;
        }

    .container-fluid.header-secound + .vertical-view-section {
        padding-top: 216px !important;
    }

    .viewtask-assignment {
        padding-top: 90px;
    }

    .assigment-library-wrap .d-flex.align-items-center {
        flex-wrap: wrap;
    }

    .viewtask-assignment .watch-videoAccountLibrary {
        width: 100%;
        height: 100%;
        margin-bottom: 15px;
    }

        .viewtask-assignment .watch-videoAccountLibrary img {
            aspect-ratio: inherit;
        }

    .viewtask-assignment .d-flex.align-items-center.flex-wrap > div:first-child {
        width: 100%;
    }

    .viewtask-assignment a.resource-anchor-wrapper > div {
        flex-wrap: wrap;
    }

        .viewtask-assignment a.resource-anchor-wrapper > div > div {
            width: 100%;
        }

    .flex-wrap-add {
        flex-wrap: wrap;
    }
}

.ck-content ul, .ck-content ol {
    padding-inline-start: 40px !important;
}

.observation-table-wrapper .notification-image-section {
    width: auto;
    height: inherit;
}

    .observation-table-wrapper .notification-image-section .withsvg-wrapper {
        width: 26px;
        height: 26px;
    }

        .observation-table-wrapper .notification-image-section .withsvg-wrapper svg {
            width: 14px;
            height: 14px;
            margin-right: inherit;
        }

a.observationReportDownload {
    display: inline-block;
    width: 110px;
    text-align: center;
}

    a.observationReportDownload svg {
        stroke: #101828;
    }

/*  13/08/2024 changes*/
.dash-header-section h1 {
    font-family: 'Queulat-black';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
}

    .dash-header-section h1.font-weight-normal {
        font-family: 'Queulat-regular';
        font-weight: 400;
        font-size: 24px;
        line-height: 32px;
        color: #101828;
    }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

span#displayVertically {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 2px;
}

.change-view-div span:first-child {
    border-right: 1px solid #D0D5DD;
}

span#displayHorizontally {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.vertical-video-view:hover {
    transform: scale(1.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.change-view-div span:hover {
    background-color: #F9FAFB;
    cursor: pointer;
}

.tchHovereffect:hover {
    transform: scale(1.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.scroll-horizntal {
    overflow: hidden;
    padding: 1px 1px;
}

.playlist-name-text {
    display: flex;
    align-items: center;
}

    .playlist-name-text span {
        max-width: 480px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: normal;
        font-size: 14px;
        padding: 8px 17px;
        font-weight: 800;
    }

#m_TCHVideos .p-0 span, #m_TCVVideos .vertical-video-view .mb-4 > span, .admin-playlist-vdeo, .relative-video-anchor > span, .resoucre-image-div {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
}




.video-title-text span {
    color: #101828;
}

.video-title-text span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 57px;
    word-break: break-word;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%);
}
/* .search-tab-wrapper input:focus-visible,.checkmark:focus-visible,.ck.ck-editor__main>.ck-editor__editable.ck-focused:focus-visible,.assignment-creation-wrapper .accountDeatils-body input:focus, .progress-main-border #accordion .card-custom button > div:focus , .notication-dots:focus , .playlist-section > div:focus ,.dashboard-paylist-section .accordion-border .card-custom:focus , .playlist-nested-list a:focus ,.video-player-inner-w:focus , .tchHovereffect:focus ,.vertical-video-view:focus ,.change-view-div:focus {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%);
} */
.ck.ck-editor__main > .ck-editor__editable.ck-focused:focus {
    border: none;
}

:focus-visible, div:focus-visible, input:focus-visible, button:focus-visible a:focus-visible {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%) !important;
}

:focus:not(:focus-visible), button:focus:not(:focus-visible), a:focus:not(:focus-visible), div:focus:not(:focus-visible), input:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.ck.ck-editor__main > .ck-editor__editable.ck-focused:focus-visible {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%) !important;
}

.page-numbers button.btn-page:focus {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%);
    border-radius: 50%;
}

.header-right-side ul li:focus {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%);
    border-radius: 50%;
}

#m_VItem > div {
    margin-top: 3px;
}

#m_VItem .tchHovereffect:focus {
    border-radius: 12px;
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%) !important;
}

.video-player-inner-w .videoplayer-inner .vjs-control-text, .vjs-time-tooltip, .video-player-inner-w .videoplayer-inner .vjs-remaining-time.vjs-time-control.vjs-control span, .video-player-inner-w .videoplayer-inner .vjs-seek-to-live-text, .video-player-inner-w .videoplayer-inner .vjs-remaining-time-display, .video-player-inner-w .videoplayer-inner .vjs-current-time-display, .video-player-inner-w .videoplayer-inner .vjs-control-text, .video-player-inner-w .videoplayer-inner .vjs-time-control.vjs-time-divider, .video-player-inner-w .videoplayer-inner .vjs-duration-display {
    font-size: 14px;
}

.video-player-inner-w .videoplayer-inner .vjs-live-display span.vjs-control-text {
    font-size: 16px;
}

.video-player-inner-w .videoplayer-inner .vjs-play-progress.vjs-slider-bar {
    font-size: 18px;
}

.video-player-inner-w .videoplayer-inner .vjs-control-text {
    font-size: 16px;
}

.video-player-inner-w .videoplayer-inner .vjs-live-display {
    font-size: 19px;
}

.relative-video-anchor > span {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
}

#m_VItem .relative-video-anchor > span {
    width: 125px;
    height: 73px;
}

.update-list-section .progress-main-section .progress-body span img {
    border-radius: 12px;
}

.relative-video-anchor span img, .resoucre-image-div img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.update-inner-list-section span {
    color: #101828;
    word-break: break-word;
}

.text-light-primary span {
    color: #6F2495;
}

.related-video-anchor {
    margin-bottom: 10px;
    display: block;
}

    .related-video-anchor:first-child {
        margin-bottom: 5px;
    }

    .related-video-anchor > div {
        padding: 11px 0px 6px;
    }

    .related-video-anchor:hover {
        text-decoration: none;
    }

    .related-video-anchor:first-child {
        position: sticky;
        top: 68px;
        z-index: 1;
    }

.progress-header h2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    color: #101828;
}

.dashboard-index-videoList .tchHovereffect {
    border-radius: 6px;
    padding: 9px 0px;
}

.filter-option-inner-inner {
    color: #212529;
}

#assignmentCohortId {
    color: #212529 !important;
    background-color: #fff !important;
}

/* .menu-options a:focus-visible , .menu-options ul > li:focus-visible {
    border: 1px solid #6f249545;
} */

/* vertical view anchor css code open */
#m_TCVVideos .vertical-video-view .mb-4 > span {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    display: inline-block;
}

.update-inner-list-section span {
    color: #101828;
    word-break: break-word;
}

.menu-options ul li > span {
    display: block;
    color: black;
    text-align: left;
    padding: 8px 16px;
    text-decoration: none;
    cursor: pointer;
}

.menu-options ul li > span {
    padding: 16px;
    display: flex;
    align-items: center;
}

.menu-options ul li span svg {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.video-title-text span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 57px;
}

.video-title-text span {
    color: #101828;
}

.vertical-parent-view > a:hover {
    text-decoration: none;
}

/* vertical view anchor css code closed */

.playlist-section .nested-list .card-body-custom-wrapper .playListBind.playlist-nested-list a:first-child {
    margin-top: 2px;
}

.card-body-custom-wrapper .playlist-section li a {
    margin-top: 2px;
    margin-right: 2px;
}

li.editPlayListName:focus-visible, li.deletePlayList {
    margin: 2px;
}

.assignment-creation-wrapper .accountDeatils-body .select2-search--inline input.select2-search__field:focus-visible {
    box-shadow: none !important;
}

.bootstrap-select select#assignmentCohortId {
    /* color: #000!important; */
    color: rgb(33 37 41 / 80%) !important;
}

#m_TCHVideos .update-inner-list-section .menu-options li:focus-visible {
    margin: 3px 3px;
}

.scroll-horizntal > a:hover, div#m_TCHVideos > a:hover {
    text-decoration: none;
}

div#m_TCHVideos > a > div {
    cursor: pointer;
}

.video-list-text span {
    color: rgb(27 31 38) !important;
}

.multiselect-container > li > a {
    width: 98%;
    display: inline-block;
    margin: 1px 0px 0px 1px;
}

    .multiselect-container > li > a:focus-visible {
        box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%) !important;
    }

.related-video-anchor .tchHovereffect:hover {
    position: inherit;
}

.now-playing span {
    color: #6F2495;
}

.selected-three-dot .menu-options ul li:focus-visible {
    margin: 2px 2px;
}

.scrolldesign::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    background-color: #ffffff;
}

.scrolldesign::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.scrolldesign::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #b09feb;
}

.playlist-name-text span {
    max-width: 480px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    font-size: 14px;
    padding: 8px 17px;
    font-weight: 800;
}

.scrolldesign::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    background-color: #ffffff;
}

.scrolldesign::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.scrolldesign::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #b09feb;
}

.scrolldesign {
    padding-right: 7px;
}

.cross-icon {
    background: #A9A9A9;
    color: #fff;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    position: absolute;
    top: -7px;
    right: -3px;
    cursor: pointer;
}

.profile-cross-text {
    display: none;
    background: #fff;
    color: #000;
    padding: 12px 20px;
    position: absolute;
    right: 0;
    top: 16px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
    white-space: nowrap;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.cross-icon:hover .profile-cross-text {
    display: block;
}

.cross-icon a {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

#ddlGAPageSize {
    color: #000!important;
}
.page-numbers .btn-page {
    color: #000!important;
}
.custom-chebox-wrapper .visually-hidden , .clear-rc-search-button , #demoselect1 , #demoselect2 , #demoselect3{
    color: #000!important;
}
.sharlist-modal .custom-chebox-wrapper {
    display: flex;
    align-items: center;
}
.padd-0{
    padding: 0px!Important;
}
.remove-playlist-btn span {
    color: #B42318;
}
.add-playlist-btn.text-4.js-btnAddToPlayList > span {
    color: #6F2495;
}
.u-hasError.selectField {
    background-color: rgba(189, 50, 50, 0.25) !important;
}

.u-hasError + .u-hasError {
    border-left: none;
}

.u-hasError > label,
.u-hasError .u-hasError-label {
    color: #bd3232 !important;
}

.u-hasError > input {
    border-color: #bd3232 !important;
}
.u-hasError > textarea {
    border-color: #bd3232 !important;
}

.u-hasError > select {
    border-color: #bd3232 !important;
}

.u-hasError-label {
    display: none;
}

.u-hasError .u-hasError-label {
    display: block;
}

.u-highlight {
    -webkit-animation: highlight 3s;
    animation: highlight 3s;
}

@-webkit-keyframes highlight {
    from {
        background-color: rgba(110, 173, 68, 0.5) !important;
    }

    to {
        background-color: inherit !important;
    }
}

@keyframes highlight {
    from {
        background-color: rgba(110, 173, 68, 0.5) !important;
    }

    to {
        background-color: inherit !important;
    }
}

.u-noScrolling {
    width: 100%;
    overflow: hidden;
    position: fixed;
}

.u-hasState {
    position: relative;
}

.u-isHidden {
    display: none !important;
}

.u-isVisuallyHidden {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.u-isDisabled {
    pointer-events: none;
}

.flex-basis-100 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}


.navbar-vertical.navbar-expand-lg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 320px;
    width: 320px;
    overflow-y: auto;
}
.left-section {
    width: 320px;
    padding: 20px 32px;
    border-right:1px solid #EAECF0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: normal;
}
.butterflyimage {
     padding-right: 15px;
     padding-left:15px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.butterflyimage img{
    width:28px;
}
.main-wrapper.active .sidebarTeachingcontent{
    margin-left:0px;
}
.dashboard-list-wrapper .navbar-nav > li {
    margin-bottom: 18px;
    padding: 13px 15px;
}
.dashboard-list-wrapper li span{
    font-weight: 600;
    color: #344054;
}
.dashboard-list-wrapper span img {
    padding-right: 15px;
}

.dashboard-list-wrapper span svg {
    padding-right: 15px;
}


.dashboard-list-wrapper  .navbar-nav > li.active {
    background-color: #F9FAFB;
    border-radius: 6px;
}
.dashboard-list-wrapper a{
    color: #344054;
    font-weight: 600;
}
.dashboard-list-wrapper li.active a{
    color: #101828;
    font-weight: 600;
}
.sidebarfooter > div {
    margin-bottom: 14px;
}
.main-wrapper.active .butterflyimage {
    margin: auto;
}

@media (max-width: 767.98px) {
    .main-wrapper.active .butterflyimage {
        margin: 0;
    }
    .dashboard-list-wrapper  .navbar-nav > li.active {
        background-color: #F9FAFB;
        border-radius: 6px;
    }
    .dashboard-list-wrapper a{
        color: #344054;
        font-weight: 600;
    }
}


.dash-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    padding: 16px 32px;
    /* margin-bottom: 32px; */
    background-color: #fff;
    box-shadow: 0px 4px 8px -59px rgba(16, 24, 40, 0.1), 0px 2px 4px -3px rgba(16, 24, 40, 0.06);
}
.header-right-side ul {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
}
.header-right-side ul li {
    margin-left: 24px;
}
.dash-header-section h1 {
    font-family: 'Queulat-black';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
}
.dash-header-section h1.font-weight-normal {
    font-family: 'Queulat-regular';
    font-weight: 400;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
}
.new-font-add {
    font-family: 'Queulat-black'!important;
    font-weight:900;
}
.new-font-add span {
    font-family: 'Queulat'!important;
    font-weight:400;
    
}
.main-wrapper.active header {
    position: fixed;
    width: calc(100% - 84px);
    right: 0;
    z-index: 5;
    transition: all 0.5s ease;
}
.main-wrapper.active .container-fluid.header-secound {
    position: fixed;
    padding-top: 72px;
    width: calc(100% - 84px);
    z-index: 4;
    right: 0;
    transition: all 0.5s ease;
}
.main-wrapper header {
    position: fixed;
    width: calc(100% - 320px);
    z-index: 5;
    right: 0;
    transition: all 0.5s ease;
}
.main-wrapper .container-fluid.header-secound {
    position: fixed;
    padding-top: 72px;
    width: calc(100% - 320px);
    z-index: 4;
    right: 0;
    transition: all 0.5s ease;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dash-header-section h1 {
        font-size: 20px;
    }
    .dash-header-section h1.font-weight-normal {
        font-size: 18px;
    }
    .main-wrapper.active header {
        position: fixed;
        width: calc(100% - 84px);
        right: 0;
        z-index: 5;
        transition: all 0.5s ease;
    }
    .main-wrapper.active .container-fluid.header-secound {
        position: fixed;
        padding-top: 72px;
        width: calc(100% - 84px);
        z-index: 4;
        right: 0;
        transition: all 0.5s ease;
    }
    .main-wrapper header {
        position: fixed;
        width: calc(100% - 320px);
        z-index: 5;
        right: 0;
        transition: all 0.5s ease;
    }
    .main-wrapper .container-fluid.header-secound {
        position: fixed;
        padding-top: 72px;
        width: calc(100% - 320px);
        z-index: 4;
        right: 0;
        transition: all 0.5s ease;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .dash-header-section h1 {
        font-size: 18px;
    }
    .dash-header-section h1.font-weight-normal {
        font-size: 16px;
    }
    .main-wrapper.active header {
        position: fixed;
        width: calc(100% - 84px);
        right: 0;
        z-index: 5;
        transition: all 0.5s ease;
    }
    .main-wrapper.active .container-fluid.header-secound {
        position: fixed;
        padding-top: 72px;
        width: calc(100% - 84px);
        z-index: 4;
        right: 0;
        transition: all 0.5s ease;
    }
    .main-wrapper header {
        position: fixed;
        width: calc(100% - 320px);
        z-index: 5;
        right: 0;
        transition: all 0.5s ease;
    }
    .main-wrapper .container-fluid.header-secound {
        position: fixed;
        padding-top: 72px;
        width: calc(100% - 320px);
        z-index: 4;
        right: 0;
        transition: all 0.5s ease;
    }
   
    .pt-140 {
        padding-top: 140px;
    }

    .activityTab-list-wrapper + .vertical-view-section {
        padding-top: 130px;
    }
}

@media (max-width: 767.98px) {

    .dash-header-section {
        padding-bottom: 20px;
        padding: 10px 14px;
        margin-bottom:24px;
    }
    .dash-header-section h1 {
        font-size: 18px;
        line-height:normal;
    }
    .dash-header-section h1.font-weight-normal {
        font-size: 13px;
        line-height: 32px;
        padding: 5px 0px;
        margin-bottom: 19px;
    }
    .profile-img img{
        height: 30px!important;
        width: 30px!important;
    }
    header{
        width: 100%!important;
    }
    .main-wrapper .container-fluid.header-secound{
        left: 0;
        width: 100%!important;
        padding-top: 61px!important;
    }
}


@media (max-width: 575.98px) {
    .dash-header-section {
        padding-bottom: 20px;
        padding: 10px 14px;
        margin-bottom:24px;
    }
    .dash-header-section h1 {
        font-size: 18px;
        line-height:normal;
    }
    .dash-header-section h1.font-weight-normal {
        font-size: 13px;
        line-height: 32px;
        padding: 5px 0px;
        margin-bottom: 19px;
    }
    .profile-img img{
        height: 30px!important;
        width: 30px!important;
    }
    header{
        width: 100%!important;
    }
}


.custom-badge {
    border-radius: 16px;
    text-align: center;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    padding: 4px 8px;
}

.custom-badge-success {
    color: #027A48;
    background-color: #ECFDF3;
}

.custom-badge-danger {
    color: #B42318;
    background-color: #FEF3F2;
}

.filter-badges {
    background-color: #F2F4F7;
    padding: 3px 7px;
    margin-left: 8px;
    border-radius: 3px;
    color: #344054 !important;
}

.custom-badge-primary {
    color: #6F2495;
    background-color: #F2E9F4;
}

.custom-badge-blue {
    color: #0F3188;
    background-color: #E7EAF3;
}

.custom-badge-grey {
    background-color: #F2F4F7;
    color: #344054;
}

.custom-badge-submit {
    color: #AD006D;
    background-color: #F7E5F0;
}

.custom-badge-waiting {
    color: #B54708;
    background-color: #FFFAEB;
}

.custom-upadte-badges {
    color: #026AA2;
    border-radius: 16px;
    background: #F0F9FF;
    mix-blend-mode: multiply;
    padding: 2px 8px 2px 6px;
}

.custom-new-badges {
    background: #F0F9FF;
    color: #026AA2;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .custom-badge {
        font-size: 10px;
    }
}

.filter-wrapper {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    border-radius: 12px;
    margin: 0px 0px;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-header {
    padding: 27px 24px;
    border-bottom: 1px solid #EAECF0;
}

.filter-body {
    padding: 30px 24px;
    border-bottom: 1px solid #EAECF0;
}

.filter-footer {
    padding: 16px 24px
}

.grade-parent-section {
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.grade-level {
    background: #F9FAFB;
    mix-blend-mode: normal;
    border-radius: 16px;
    padding: 3px 8px;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
}

.topic-grade {
    background: #FFFFFF;
    mix-blend-mode: normal;
    border-radius: 16px;
    padding: 2px 10px 2px;
    min-width: fit-content;
    margin-right: 10px;
}

.fliter-by-list-header {
    display: flex;
    align-items: center;
}

.filter-body.filter-by-list {
    padding: 10px 0px;
    border: navajowhite;
}

.filter-list-w > div {
    margin-left: 25px;
}

.filter-videos-count {
    margin-right: 25px;
}

.filter-list-w {
    display: flex;
    align-items: center;
    justify-content: end;
    flex-wrap: wrap;
}

    .filter-list-w span {
        color: #4d545e;
    }

.js-filter-list .gray-700-color {
    color: #344054;
}

@media (max-width: 1199.98px) {
    .filter-footer {
        padding: 16px 24px
    }
}

@media (max-width: 991.98px) {
    .filter-select-div {
        margin-bottom: 7px;
        flex-wrap: wrap;
    }

        .filter-select-div .input-group {
            margin-bottom: 20px;
            padding-left: 0px !important;
        }

    .filter-wrapper {
        background: #FFFFFF;
        border: 1px solid #EAECF0;
        box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
        border-radius: 12px;
        margin: 0px 0px;
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 767.98px) {
    .filter-header {
        padding: 10px 18px;
    }

    .filter-body {
        padding: 13px 18px;
        border-bottom: 1px solid #EAECF0;
    }

    .filter-select-div {
        margin-bottom: 7px;
    }

    .filter-list-w {
        justify-content: start;
    }

        .filter-list-w > div {
            margin-left: 0px;
            margin-bottom: 20px;
            width: 100%;
        }

    .change-view-div {
        width: auto !important;
    }

    .filter-list-w > div:nth-child(2) button {
        margin-bottom: 0px;
    }

    .filter-wrapper .filter-header .filter-btn button {
        margin-bottom: 0px;
    }

    .filter-wrapper {
        background: #FFFFFF;
        border: 1px solid #EAECF0;
        box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
        border-radius: 12px;
        margin: 0px 0px;
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}


@media (max-width: 575.98px) {
    .filter-header {
        padding: 10px 18px;
    }

    .filter-body {
        padding: 13px 18px;
        border-bottom: 1px solid #EAECF0;
    }

    .filter-select-div {
        margin-bottom: 7px;
    }

    .filter-list-w {
        justify-content: start;
    }

        .filter-list-w > div {
            margin-left: 0px;
            margin-bottom: 20px;
            width: 100%;
        }

    .change-view-div {
        width: auto !important;
    }

    .filter-list-w > div:nth-child(2) button {
        margin-bottom: 0px;
    }

    .filter-wrapper .filter-header .filter-btn button {
        margin-bottom: 0px;
    }

    .filter-wrapper {
        background: #FFFFFF;
        border: 1px solid #EAECF0;
        box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
        border-radius: 12px;
        margin: 0px 0px;
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .filter-body {
        padding: 12px 24px;
    }

    .filter-header {
        padding: 10px 24px;
    }
}

button {
    margin: 0;
    border: none;
    padding: 0;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    cursor: pointer;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-font-smoothing: inherit;
}

.main-wrapper .btn {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    padding: 10px 16px;
}

.btn-edit-progress {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px solid #ddd 2px rgba(16, 24, 40, 0.05);
    color: #344054;
}

.btn-create-progress {
    background: #6F2495;
    border: 1px solid #6F2495;
    box-shadow: 0px 1px solid #ddd 2px rgba(16, 24, 40, 0.05);
    color: #FFFFFF !important;
}

.btn-cancel {
    background-color: #fff;
    border: 1px solid #D0D5DD;
    color: #344054;
}

    .btn-cancel:not(:disabled):hover {
        background-color: #f5f5f5ab;
        border: 1px solid #D0D5DD;
        color: #374150;
    }

.accordion-btn {
    background: none;
    border: none;
    box-shadow: none;
    font-family: 'Inter';
    color: #101828;
    text-transform: uppercase;
    cursor: pointer;
}

.btn-create-progress:not(:disabled):hover {
    background-color: #7760a7;
    color: #fff;
}

.btn-create-playList:not(:disabled):hover {
    background-color: #6d48bd;
    color: #fff;
}

.btn-edit-progress:not(:disabled):hover {
    background-color: #f1eded6b;
}

.playlist-button button {
    font-size: 16px !important;
}

.main-wrapper .btn:focus {
    box-shadow: 0px 0px 3px 1px rgb(46 38 88 / 63%);
}

.btn-created-disabled {
    background-color: #E9D7FE;
    border: 1px solid #E9D7FE;
    pointer-events: none;
}

.btn-add-resoure {
    background-color: #F9F5FF;
    border: 1px solid #A97CBF;
    border-radius: 8px;
    color: #6F2495;
}

.share-video-color {
    background-color: #0F3188;
    border: 1px solid #0F3188;
}

    .share-video-color:hover {
        background-color: #041a50;
    }

.submit-video-color {
    background-color: #AD006D;
    border: 1px solid #AD006D;
}

    .submit-video-color:hover {
        background-color: #91095e;
    }

.add-playlist-btn {
    background: #F2E9F4;
    border: 1px solid #A97CBF;
    border-radius: 8px;
    color: #6F2495;
}

.remove-playlist-btn {
    background: #FFFFFF;
    border: 1px solid #FDA29B;
    box-shadow: 0px 1px solid #ddd 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    color: #B42318;
}

.reflection-bg {
    background-color: #6F2495;
}

.sharing-bg {
    background-color: #0F3188;
}

.btn-framework {
    background-color: #F8F4FB;
}

.observation-bg {
    background-color: #AD006D;
}

.reflection-color {
    color: #6F2495;
}

.sharing-color {
    color: #0F3188;
}

.observation-color {
    color: #AD006D;
}

button.cancelBtn {
    font-size: 14px !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600 !important;
    line-height: 20px;
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px solid #ddd 2px 0px rgba(16, 24, 40, 0.05);
    color: #344054;
    padding: 9px 16px !important;
}

button.applyBtn, .btn-primary.disabled, .btn-primary:disabled {
    border-radius: 8px;
    border: 1px solid #6F2495;
    background: #6F2495;
    box-shadow: 0px 1px solid #ddd 2px 0px rgba(16, 24, 40, 0.05);
    color: #FFF;
    font-size: 14px !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600 !important;
    line-height: 20px;
    padding: 9px 16px !important;
}

.progress-button .btn {
    margin-left: 12px;
    margin-bottom: 16px;
}

button.applyBtn:not(:disabled):hover {
    background-color: #8632b1;
    border-color: #8632b1;
}

.admin-playlist-video-section .js-btnAddToPlayList:not(:disabled):hover {
    color: #6F2495;
    background: #ede2ef;
}

.admin-playlist-video-section .remove-playlist-btn:not(:disabled):hover {
    background: #ffdede4a;
    color: #B42318;
}

.upload-button-wrap {
    border-radius: 8px;
    border: 1px solid #A97CBF;
    background: #F2E9F4;
    color: #6F2495;
    font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.btn-create-playList-wrapper:not(:disabled):hover {
    background-color: #6d48bd;
    color: #fff;
}

.btn-edit-progress-wrapper:not(:disabled):hover {
    background-color: #f1eded6b;
}

.download-csv-btn {
    display: flex;
    justify-content: flex-end;
}

    .download-csv-btn .btn {
        background-color: #fefdfd;
        border: 1px solid #ddd;
    }

        .download-csv-btn .btn:not(:disabled):hover {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
        }

@media (max-width: 1199.98px) {
    li .menu-option.deleteVideo svg {
        width: 20px;
        height: 20px;
        stroke: #B42318;
    }

    li.menu-option.archiveVideo svg {
        width: 20px;
        height: 20px;
        stroke: #344054;
    }
}

@media (max-width: 991.98px) {
    .usage-statistics-wrapper button {
        margin-bottom: 10px;
    }
}

@media (max-width: 767.98px) {

    .main-wrapper .btn {
        padding: 12px 12px;
    }

    .progress-button .btn {
        margin-top: 0px;
    }

    .progress-button .btn {
        margin-bottom: 12px;
    }

    .filter-and-sorting-resource.ml-auto a.btn {
        margin-bottom: 0px;
    }

    .add-playlist-btn {
        background: #F2E9F4;
        border: 1px solid #A97CBF;
        border-radius: 8px;
        color: #6F2495;
    }

    .remove-playlist-btn {
        background: #FFFFFF;
        border: 1px solid #FDA29B;
        box-shadow: 0px 1px solid #ddd 2px rgba(16, 24, 40, 0.05);
        border-radius: 8px;
        color: #B42318;
    }

    .playlist-button button {
        font-size: 16px !important;
    }
}


@media (max-width: 575.98px) {
    .main-wrapper .btn {
        padding: 12px 12px;
    }

    .progress-button .btn {
        margin-top: 0px;
    }

    .progress-button .btn {
        margin-bottom: 12px;
    }

    .filter-and-sorting-resource.ml-auto a.btn {
        margin-bottom: 0px;
    }

    .playlist-button button {
        font-size: 16px !important;
    }
}
@font-face {
    font-family: 'Queulat-black';
    src: url("/fonts/queulat-black.otf");
}

@font-face {
    font-family: 'Queulat-bold';
    src: url("/fonts/queulat-bold.otf");
}

@font-face {
    font-family: 'Queulat-light';
    src: url("/fonts/queulat-light.otf");
}

@font-face {
    font-family: 'Queulat-medium';
    src: url("/fonts/queulat-medium.otf");
}

@font-face {
    font-family: 'Queulat-regular';
    src: url("/fonts/queulat-regular.otf");
}

.text-1 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #101828;
    font-family: 'Inter';
}

.text-2 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
}

.text-3 {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #101828;
    font-family: 'Inter';
}

.text-4 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
}

.text-5 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.text-6 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
}

.text-7 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 18px;
}

.font-18 {
    font-family: 'Inter';
    font-style: normal;
    font-size: 18px;
}

.font-16 {
    font-family: 'Inter';
    font-style: normal;
    font-size: 16px;
}

.font-15 {
    font-family: 'Inter';
    font-style: normal;
    font-size: 15px;
}

.font-14 {
    font-family: 'Inter';
    font-style: normal;
    font-size: 14px;
}

.font-12 {
    font-family: 'Inter';
    font-style: normal;
    font-size: 12px;
}

.text-grey {
    color: #475467;
}

.tex-bg-grey {
    background-color: #475467;
}

.textcustom-error {
    color: #B42318 !important;
}

.textcustom-bg-error {
    background-color: #FEF3F2;
}

.textcustom-white {
    color: #fff;
}

.textcustom-warning {
    color: #B54708;
}

.textcustom-bg-warning {
    background-color: #FFFAEB;
}

.text-blue_light {
    color: #026AA2;
}

.text-bg-blue_light {
    background-color: #F0F9FF;
}


.text-light-primary {
    color: #6F2495;
}

.text-bg-light-primary {
    background-color: #F9F5FF;
}

    .text-bg-light-primary.now-playing {
        background-color: #F9F5FF;
        mix-blend-mode: multiply;
        border-radius: 16px;
    }

.text-bg-primary {
    background-color: #6F2495;
}

    .text-bg-primary:hover {
        background-color: #7760a7;
        color: #fff;
    }

.text-bg-grey {
    background-color: #F2F4F7;
}

.font-300 {
    font-weight: 300;
}

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

.font-500 {
    font-weight: 500;
}

.font-600 {
    font-weight: 600;
}

.font-600 {
    font-weight: 600 !important;
}

.font-700 {
    font-weight: 700;
}

.font-800 {
    font-weight: 800;
}

.font-900 {
    font-weight: 900;
}

.color-red-own {
    color: #D92D20;
}

.video-title-text a {
    color: #101828;
}

.color-black-own {
    color: #31373a;
}

.color-blue-own {
    color: #6F2495;
}

    .color-blue-own a {
        color: #6F2495;
    }

.list-inline.own-breadcrum a {
    color: #6F2495;
}

.playlist-bg-add {
    /* background-color: #F9FAFB;*/
    border-radius: 16px;
}

.text-bg-dark-primary {
    background-color: #E7E5EC;
}

@media (max-width: 1199.98px) {
    .text-2 {
        font-size: 14px;
        line-height: 22px;
    }

    .text-4 {
        font-size: 13px;
    }
}

@media (max-width: 991.98px) {
    .text-2 {
        font-size: 14px;
        line-height: 22px;
    }

    .text-4 {
        font-size: 14px;
    }

    .text-5 {
        font-size: 14px;
    }

    h4.mb-0.d-inline-block.text-3 {
        font-size: 15px;
    }
}

@media (max-width: 767.98px) {
    .text-1 {
        font-size: 15px;
    }

    .text-2 {
        font-size: 18px;
        line-height: 22px;
    }

    .text-3 {
        font-size: 16px;
    }

    .text-4 {
        font-size: 14px;
    }

    .text-5 {
        font-size: 12px;
    }
}


@media (max-width: 575.98px) {
    .font-18 {
        font-size: 18px;
    }

    .font-16 {
        font-size: 16px;
    }

    .font-15 {
        font-size: 15px;
    }

    .font-14 {
        font-size: 14px;
    }

    .font-12 {
        font-size: 12px;
    }

    .text-1 {
        font-size: 15px;
    }

    .text-2 {
        font-size: 18px;
        line-height: 22px;
    }

    .text-3 {
        font-size: 16px;
    }

    .text-4 {
        font-size: 14px;
    }

    .text-5 {
        font-size: 12px;
    }
}
.toaster-custom-wrapper {
    background: #FFFFFF;
    border: 1px solid #F2F4F7;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 12px;
    width: 420px;
    min-height: 114px;
    padding: 16px 16px;
}

.toaster-inner {
    display: flex;
}

.toaster-image {
    margin-right: 5px;
    width: 14%;
}

.toaster-right-section {
    width: 85%;
}

.toaster-inner-text {
    padding-right: 40px;
}

.cancel-toaste-icon {
    position: absolute;
    right: 0;
    top: -4px;
}

    .cancel-toaste-icon img {
        width: 14px;
        cursor: pointer;
    }

    .cancel-toaste-icon svg {
        cursor: pointer;
    }

.toaster-sucess {
    border: 6px solid #D1FADF;
    border-radius: 28px;
    background-color: #D1FADF;
    outline: 6px solid #ECFDF3;
}
#toast-container > .toast-success {
    background-image: none !important;
}

#toast-container > div {
    overflow: inherit !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: inherit !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border: none !important;
    background-position: inherit !important;
    margin: 0 !important;
    color: #000 !important;
    max-width: inherit !important;
}

.toast-success {
    background-color: inherit !important;
}

#toast-container > div:hover {
    box-shadow: none !important;
}
.cancel-toaste-icon svg {
    cursor: pointer;
    width: 20px;
    height: 20px;
    color: #667085;
}
.toaster-custom-wrapper .toaster-image svg {
    border: 6px solid #D1FADF;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    outline: 8px solid #ECFDF3;
    fill: #D1FADF;
}

.toaster-inner-text a {
    margin-top: 20px;
    display: inline-flex;
    color: #6F2495 !important;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.toaster-inner-text {
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #475467;
}
@media (max-width: 767.98px) {
    div#toast-container {
        bottom: 15px;
        top: inherit;
        right: inherit;
        left: inherit;
        transform: translate(10px, 10px);
    }
    #toast-container > div {
        background-color: #fff;
        border-top-left-radius:10px!important;
        border-top-right-radius:10px!important;
    }
    .toaster-custom-wrapper{
        width: auto;
    }
}


/* ---------------------------------------------------------------------- Modal - Layout container ---------------------------------------------------------------------- */
.modal {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
}

.modal-sm-own .modal-dialog {
    max-width: 700px;
}

.modal_bg {
    background: rgba(204, 204, 204, 0.9);
}

.modal_inline {
    position: absolute;
}

.modal-underlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
}

.modal-inner {
    min-width: 50vw;
    position: relative;
    z-index: 7;
    color: #000;
    background-color: #f9f9f9;
}

.modal-inner_isScrollable {
    max-height: 85vh;
    overflow-y: scroll;
}

.modal-inner_sm {
    width: 50vh;
}

.modal-inner_md {
    width: 70vh;
}

.modal-inner_lg {
    width: 90%;
}


.create-playlist-modal .modal {
    background: rgba(52, 64, 84, 0.7);
    backdrop-filter: blur(8px);
}

.modal-content {
    border-radius: 5px;
}

.modal-min-width-820 {
    min-width: 820px;
}

.observation-select-modal .modal-body {
    padding: 0;
}

    .observation-select-modal .modal-body .bg-green {
        background: #f4f8fb;
        padding: 15px;
        box-shadow: 0 0 1px rgba(189, 189, 189, 0.5);
    }

.modal-header .close img {
    width: 24px;
}

.modal {
    z-index: 5555 !important;
    background: rgba(0, 0, 0, 0.25) !important;
    overflow-y: auto;
}

.modal-edit-video {
    border-right: 1px solid #dee2e6 !important;
    padding-right: 5px;
}

.modal-max-height {
    max-height: 70vh;
    overflow-y: auto;
}

.modal-dialog {
    z-index: 77;
}

.modal-underlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    background: rgba(0, 0, 0, 0.25);
}

.modal-dashboard {
    margin-left: -17px;
    margin-right: -17px;
}

    .modal-dashboard .modal-header {
        padding: 18px 24px;
        border-bottom: 1px solid #eee;
    }

        .modal-dashboard .modal-header h3 {
            color: #265389;
            font-weight: 400;
            font-size: 20px;
            margin: 0;
            line-height: 30px;
        }

    .modal-dashboard .normal-table {
        width: 100%;
        max-width: 100%;
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
        font-size: 12px;
    }

        .modal-dashboard .normal-table th {
            padding: 8px;
            line-height: 20px;
            vertical-align: top;
            border-bottom: 1px solid #ddd;
            text-align: left;
            font-weight: 500;
            background-color: #255084;
            color: #fff;
        }

        .modal-dashboard .normal-table td {
            padding: 8px;
            font-weight: 700;
            line-height: 20px;
            text-align: left;
            vertical-align: top;
            border-bottom: 1px solid #ddd;
        }

        .modal-dashboard .normal-table tr:hover {
            background-color: #e9edf2;
            color: #255084;
            cursor: pointer;
        }

        .modal-dashboard .normal-table td.remedial {
            background-color: #f0efef;
        }

            .modal-dashboard .normal-table td.remedial:hover {
                color: #255084;
                cursor: pointer;
            }

.modal-footer {
    border-top: none;
}

.modal-custom-body {
    padding: 24px 24px 20px;
}

.modal-footer {
    width: 100%;
    padding: 16px 24px 24px;
}

.modal textarea {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    min-height: 128px;
}

.modal-custom-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 24px 24px 20px;
}

    .modal-custom-header img {
        cursor: pointer;
    }

    .modal-custom-header svg {
        cursor: pointer;
    }

.modal-input-design input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}

    .modal-input-design input:focus, .modal-input-design select:focus {
        box-shadow: none;
        outline: none;
    }

.modal-input-design select {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}


.modal-sm-own {
    align-items: inherit !important;
}




.modal textarea {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    min-height: 128px;
}

.modal-custom-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 24px 24px 20px;
}

    .modal-custom-header img {
        cursor: pointer;
    }

    .modal-custom-header svg {
        cursor: pointer;
    }

.modal-input-design input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}

    .modal-input-design input:focus, .modal-input-design select:focus {
        box-shadow: none;
        outline: none;
    }

.custom-modal-section .modal-body input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
}

.shared-modal-wrapper .modal-footer {
    border-top: 1px solid #dee2e6;
}

.modal_inline {
    position: absolute;
}

.modal-underlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
}

.modal-inner {
    min-width: 50vw;
    position: relative;
    z-index: 7;
    color: #000;
    background-color: #f9f9f9;
}

.create-playlist-modal .modal {
    background: rgba(52, 64, 84, 0.7);
    backdrop-filter: blur(8px);
}

.modal-content {
    border-radius: 5px;
}

@media (max-width: 1199.98px) {
    .modal-content {
        border-radius: 5px;
    }

    .modal-min-width-820 {
        min-width: 820px;
    }

    .observation-select-modal .modal-body {
        padding: 0;
    }

    .modal-dashboard .normal-table th {
        padding: 8px;
        line-height: 20px;
        vertical-align: top;
        border-bottom: 1px solid #ddd;
        text-align: left;
        font-weight: 500;
        background-color: #255084;
        color: #fff;
    }

    .modal-dashboard .normal-table td {
        padding: 8px;
        font-weight: 700;
        line-height: 20px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid #ddd;
    }
}

@media (max-width: 991.98px) {
    .modal-content {
        border-radius: 5px;
    }

    .modal-min-width-820 {
        min-width: 820px;
    }

    .observation-select-modal .modal-body {
        padding: 0;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .modal-dialog.modal-input-design.modal-dialog-centered.max-width-add {
        min-width: auto !important;
    }

    .modal-dialog.modal-dialog-centered.max-width-add {
        min-width: 500px !important;
    }

    .modal-underlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 6;
        background: rgba(0, 0, 0, 0.25);
    }

    .modal-dashboard {
        margin-left: -17px;
        margin-right: -17px;
    }

    .modal-input-design input {
        background: #FFFFFF;
        border: 1px solid #D0D5DD;
        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
        border-radius: 8px;
    }
}

@media (min-width: 992px) {
    .modal-sm-own .modal-dialog {
        width: 700px;
    }

    .modal-xs-own .modal-dialog {
        width: 500px;
    }

    .modal-lg-own .modal-dialog {
        width: 90%;
        max-width: 90%;
    }

    .modal-lg-40 .modal-dialog {
        width: 40%;
        max-width: 90%;
    }

    .modal-min-width-820 {
        min-width: inherit;
    }

    .modal-underlay {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 6;
        background: rgba(0, 0, 0, 0.25);
    }

    .modal-dashboard {
        margin-left: -17px;
        margin-right: -17px;
    }
}


@media (max-width: 767.98px) {
    .modal-dialog.modal-input-design.modal-dialog-centered.max-width-add {
        min-width: auto !important;
    }

    .modal-custom-body {
        padding: 8px 5px 10px;
    }

    .modal-min-width-820 {
        min-width: inherit;
        width: inherit;
    }

    .modal-dialog.modal-dialog-centered.max-width-add {
        min-width: auto !important;
    }

    div#frameworkInstructionaleModal .js-modal-content.js-validationView .modal-dialog {
        max-width: 350px;
        margin: 1.75rem auto;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog.modal-input-design.modal-dialog-centered.max-width-add {
        min-width: auto !important;
    }

    .modal-custom-body {
        padding: 8px 5px 10px;
    }

    .modal-min-width-820 {
        min-width: inherit;
        width: inherit;
    }

    .modal-dialog.modal-dialog-centered.max-width-add {
        min-width: auto !important;
    }

    div#frameworkInstructionaleModal .js-modal-content.js-validationView .modal-dialog {
        max-width: 350px;
        margin: 1.75rem auto;
    }
}

.modal-max-width {
    max-width: 600px;
}

.modal-custom-change .modal-content {
    border-radius: 12px;
}

.modal-large-width {
    max-width: 950px;
}

.search-tab-wrapper input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    padding: 10px 10px 10px 42px;
    width: 100%;
    outline: none;
    color: #667085;
}

.filter-select {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    width: 100%;
    height: 44px;
    cursor: pointer;
}

    .filter-select:focus {
        box-shadow: 0px 1px 5px 1px rgb(46 38 88 / 63%);
        outline: none;
    }

.mutliSelect-wrapper button.multiselect.dropdown-toggle:focus {
    box-shadow: 0px 1px 5px 1px rgb(46 38 88 / 63%);
}

.filter-option-inner {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
}

.custom-modal-section textarea {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    min-height: 128px;
}

.filer-select select {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    height: 45px;
}

.filter-date input {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #101828;
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    height: 45px;
}

.resource-body-section input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
}

.resource-body-section input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
}

.resource-body-section textarea {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    min-height: 128px;
}

.resource-body-section select {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    border-radius: 8px;
    cursor: pointer;
}

.resource-body-section input[type="radio"] {
    height: auto;
    accent-color: #7F56D9;
    cursor: pointer;
}

.mix-txt_white {
    color: #ffffff;
}

.mix-txt_blue {
    color: #16569b;
}

.mix-txt_darkBlue {
    color: #38414a;
}

.mix-txt_black {
    color: #000000;
}

.mix-txt_green {
    color: #6ead44;
}

.mix-txt_orange {
    color: #f79423;
}

.mix-txt_gray {
    color: #818385;
}

.mix-txt_red {
    color: #bd3232;
}

.logincheckbox-wrapper input#RememberMe {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    display: block;
}

.logincheckbox-wrapper input[type="hidden"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox input:checked ~ .checkmark:after {
    display: block;
}

.resource-body-section input {
    background: #FFFFFF;
    border: 1px solid #D0D5DD;
    border-radius: 8px;
}

.resource-body-section input {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
}

.filter-option-inner {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
}

@media (max-width: 1199.98px) {
    .filter-option-inner {
        font-size: 13px;
    }
}

@media (max-width: 991.98px) {
    .filter-option-inner {
        font-size: 13px;
    }
}

@media (max-width: 767.98px) {
    .filter-option-inner {
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
    }

    .overflow-content {
        width: 100%;
        overflow: auto;
        white-space: nowrap;
    }

    .framework-feedback-right-section {
        margin-top: 25px;
    }

    .activity-header-main .col-md-7.col-12.col-lg-6.col-xl-6.d-flex.justify-content-end {
        flex-wrap: wrap;
    }

        .activity-header-main .col-md-7.col-12.col-lg-6.col-xl-6.d-flex.justify-content-end a {
            display: block;
        }

    .feedback-button-list .ml-3 {
        margin-left: 0px !important;
    }

    .dashboard-image-upper-section {
        min-height: initial;
    }

    .update-list-section.dashboard-section-wrapper {
        padding: 0px 15px;
    }

    .notification-section {
        padding: 0px 15px 0px 15px;
    }

    .notification-header {
        flex-wrap: wrap;
    }

        .notification-header .search-inner-wrapper.d-flex.align-items-center {
            flex-wrap: wrap;
        }

            .notification-header .search-inner-wrapper.d-flex.align-items-center .ml-3 {
                margin-left: 0px !important;
            }

    .font-size-48 {
        font-size: 20px;
        line-height: 13px;
    }

    .font-size-30 {
        font-size: 16px;
        line-height: 13px;
    }
}


@media (max-width: 575.98px) {
    .filer-select select {
        font-family: 'Inter';
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        height: 45px;
    }

    .filter-date input {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        color: #101828;
        height: 45px;
    }

    .resource-body-section input {
        background: #FFFFFF;
        border: 1px solid #D0D5DD;
        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
        border-radius: 8px;
    }

    .resource-body-section input {
        width: 100%;
        height: 40px;
        padding: 8px 12px;
    }
}

.sharing-table-wrapper table {
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.02), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 16px;
    margin-bottom:0px;
}
.sharing-table-wrapper  td,.sharing-table-wrapper  th{
    vertical-align: middle;
    padding: 16px 16px;
}
.sharing-table-wrapper th {
    padding: 16px 16px;
    vertical-align: middle !important;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
    border-bottom:none!important;
}
.sharing-table-wrapper td:first-child {
    color: #101828;
    font-weight: 500;
}
.sharing-table-wrapper td {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
}
.sharing-table-wrapper table thead {
     background-color: #F9FAFB;
  /*  background-color: #fff;*/
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    color: #475467;
}
.sharing-table-wrapper table tbody{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #475467;
    background-color:#fff;
}
.reflected-table  table thead {
    background-color: #fff;
}
.sharing-table-wrapper tfoot tr td {
    padding: 12px 26px 20px;
}
.sharing-table-wrapper thead tr th {
    border-top: none;
}

.sharing-table-wrapper {
    border: 1px solid #EAECF0;
    border-bottom-right-radius: 19px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.reflected-table.sharing-table-wrapper thead th {
    font-weight: 500;
    font-size: 12px;
}

.reflected-table.sharing-table-wrapper tbody tr td span {
    font-weight: 400;
    font-size: 14px;
}

.font-500 {
    font-weight: 500 !important;
}
.dataTable_isEditable > .dataTable-bd tr:nth-child(odd) > td:last-child {
    background-color: #e6e6e6;
}

.tableSort-desc, span.tableSort-asc {
    margin-left: 5px;
    cursor: pointer;
}
.table-condensed thead tr th {
    font-weight: 500 !important;
}
.table-icon-list {
    display: flex;
    justify-content: space-evenly;
}
.add-border-left {
    border-left: 1px solid #ddd;
}
#partial-result .sharing-table-wrapper td, #partial-result .sharing-table-wrapper th {
    padding: 16px 9px;
}

.account-owner-wdth{
    width: 350px;
}
th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-desc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssDesc .tableSort-asc {
    display: block !important;
}

th.tablesorter-header.ts-header.tablesorter-headerAsc.ts-cssAsc .tableSort-asc {
    display: none !important;
}

th.tablesorter-header.ts-header.tablesorter-headerDesc.ts-cssAsc .tableSort-desc {
    display: block !important;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sharing-table-wrapper.overflow-content {
        overflow: auto;
    }
    .sharing-table-wrapper.overflow-content table th, .sharing-table-wrapper.overflow-content table tr{
        white-space:nowrap;
    }
    .account-icon.ml-2 {
        position: relative;
        top: -2px;
    }
    .table-icon-list {
        display: flex;
        justify-content: space-evenly;
    }
    .add-border-left {
        border-left: 1px solid #ddd;
    }
    .sharing-table-wrapper table {
        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.02), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
        border-radius: 16px;
        margin-bottom:0px;
    }
    .sharing-table-wrapper td:first-child {
        color: #101828;
        font-weight: 500;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .sharing-table-wrapper.overflow-content {
        overflow: auto;
    }
    .sharing-table-wrapper.overflow-content table th, .sharing-table-wrapper.overflow-content table tr {
        white-space: nowrap;
    }
    .table-icon-list {
        display: flex;
        justify-content: space-evenly;
    }
    .add-border-left {
        border-left: 1px solid #ddd;
    }
    .sharing-table-wrapper table {
        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.02), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
        border-radius: 16px;
        margin-bottom:0px;
    }
    .sharing-table-wrapper td:first-child {
        color: #101828;
        font-weight: 500;
    }
}

    @media (max-width: 1199.98px) {
        .sharing-table-wrapper th {
            font-weight: 500;
            font-size: 12px;
        }

        .sharing-table-wrapper td, .sharing-table-wrapper th {
            padding: 16px 16px;
        }

        .sharing-table-wrapper table tbody {
            font-size: 12px;
        }

        .sharing-table-wrapper td:first-child {
            color: #101828;
            font-weight: 500;
        }

        .reflected-table table thead {
            background-color: #fff;
        }


        .sharing-table-wrapper tfoot tr td {
            padding: 12px 26px 20px;
        }

        .sharing-table-wrapper thead tr th {
            border-top: none;
        }
        .account-icon.ml-2 {
            position: relative;
            top: -2px;
        }
    }

    @media (max-width: 991.98px) {
        .sharing-table-wrapper th {
            font-weight: 500;
            font-size: 12px;
        }

        .sharing-table-wrapper td, .sharing-table-wrapper th {
            padding: 16px 16px;
        }

        .sharing-table-wrapper table tbody {
            font-size: 12px;
        }

        .sharing-table-wrapper td:first-child {
            color: #101828;
            font-weight: 500;
        }

        .reflected-table table thead {
            background-color: #fff;
        }
        .avtarImages-wrapper.profile-img img.mr-3 {
            width: 29px;
            height: 29px;
        }
    }

    @media (max-width: 767.98px) {
        .sharing-table-wrapper td:first-child {
            color: #101828;
            font-weight: 500;
        }

        .reflected-table table thead {
            background-color: #fff;
        }

        .sharing-table-wrapper tfoot tr td {
            padding: 12px 26px 20px;
        }

        .sharing-table-wrapper thead tr th {
            border-top: none;
        }
    }


    @media (max-width: 575.98px) {
        .sharing-table-wrapper th {
            font-weight: 500;
            font-size: 12px;
        }

        .sharing-table-wrapper td, .sharing-table-wrapper th {
            padding: 16px 16px;
        }

        .sharing-table-wrapper table tbody {
            font-size: 12px;
        }

        .sharing-table-wrapper td:first-child {
            color: #101828;
            font-weight: 500;
        }

        .reflected-table table thead {
            background-color: #fff;
        }
    }

.custom-chebox-wrapper {
    margin-right: 30px;
    position: relative;
    top: 6px;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    color: #7F56D9;
}

    .custom-checkbox input[type="checkbox"] {
        display: none;
    }

.checkmark {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border: 1px solid #7F56D9;
    border-radius: 6px;
    background-color: #F9F5FF;
    min-width: 22px;
    flex: 0 0 22px;
}

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid #7F56D9;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox .label-text {
    margin-left: 5px;
}


/*mutlti select design*/

.mutliSelect-wrapper .btn-group {
    width: 100%;
}

.mutliSelect-wrapper button.multiselect.dropdown-toggle {
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border: 1px solid #D0D5DD;
    color: #495057;
    font-weight: 400;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-size: 16px;
}

.mutliSelect-wrapper .dropdown-toggle::after {
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    width: 9px;
    height: 9px;
    border-style: solid;
    border-width: 2px 2px 0 0px;
    border-color: #667085;
    transform: rotate(135deg);
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 14px;
}

.mutliSelect-wrapper ul {
    width: 100%;
    max-height: 200px;
    overflow: auto;
    transform: translate3d(0px, 45px, 0px) !important;
}

    .mutliSelect-wrapper ul li a label {
        display: flex;
        padding: 10px 20px;
        align-items: center;
    }

        .mutliSelect-wrapper ul li a label input {
            width: 18px !important;
            height: 18px;
            box-shadow: none;
            width: auto;
            margin-bottom: 0px !important;
            margin-right: 16px;
            accent-color: #7F56D9;
        }

        .mutliSelect-wrapper ul li a label:hover {
            background-color: #f5f5f5;
        }

.mutliSelect-wrapper .multiselect.dropdown-toggle.disabled {
    background-color: #F9FAFB;
    cursor: default;
}

/*input checkbox-seclect */
.search-multi-wrapper {
    position: relative;
}

.search-list-mutliple {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    position: absolute;
    width: 100%;
    top: 43px;
    display: none;
    z-index: 9;
}

    .search-list-mutliple ul {
        margin-bottom: 0px;
        max-height: 200px;
        overflow: auto;
    }

        .search-list-mutliple ul li {
            list-style: none;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #344054;
            padding: 12px 16px;
            cursor: pointer;
        }

            .search-list-mutliple ul li:hover {
                background-color: #f5f5f5;
            }

            .search-list-mutliple ul li:last-child {
                padding-bottom: 16px;
            }

    .search-list-mutliple span.checkmark {
        border: 1px solid #D0D5DD;
    }

.search-multi-wrapper .search-tab-wrapper img {
    top: 10px;
}

.search-multi-wrapper .search-tab-wrapper svg {
    top: 10px;
}

.search-multi-wrapper.open .search-list-mutliple {
    display: block;
}

#selectedValue {
    display: inline-block;
    background-color: #ddd;
    border-radius: 20px;
    padding: 1px 12px 4px;
    margin: 10px;
}



@media (max-width: 1199.98px) {
    .search-list-mutliple ul {
        margin-bottom: 0px;
        max-height: 200px;
        overflow: auto;
    }

        .search-list-mutliple ul li {
            list-style: none;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #344054;
            padding: 12px 16px;
            cursor: pointer;
        }

            .search-list-mutliple ul li:hover {
                background-color: #f5f5f5;
            }
}

@media (max-width: 991.98px) {
    .usage-statistics-wrapper button {
        margin-bottom: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .search-list-mutliple ul {
        margin-bottom: 0px;
        max-height: 200px;
        overflow: auto;
    }

        .search-list-mutliple ul li {
            list-style: none;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #344054;
            padding: 12px 16px;
            cursor: pointer;
        }

            .search-list-mutliple ul li:hover {
                background-color: #f5f5f5;
            }
}

@media (max-width: 767.98px) {
    .custom-chebox-wrapper {
        top: 6px;
    }

    .custom-checkbox {
        font-size: 16px;
        color: #7F56D9;
    }
}


@media (max-width: 575.98px) {
    .custom-chebox-wrapper {
        top: 6px;
    }

    .custom-checkbox {
        font-size: 16px;
        color: #7F56D9;
    }
}

.pagination-wrapper button{
    color: #344054;
}
.pagination-wrapper, .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}
.pagination-wrapper .btn-page {
    border: none;
    width: 36px;
    height: 36px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    color: #475467;
    background-color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.pagination-wrapper .btn-selected {
    background-color: #F9FAFB;
    color: #1D2939;
    border-radius: 50%;
}
.pagination-wrapper .left-btn{
    width: 180px;
}
.pagination-wrapper .right-btn{
    width: 125px;
}
.account-management-pagging .pagination-wrapper .left-btn{
    width: 153px;
}
.account-management-pagging .pagination-wrapper .right-btn{
    width: 115px;
} 
.pagination-wrapper {
    border-top: 1px solid #D0D5DD;
    padding-top: 30px;
}
.container-pagination {
    position: relative;
    display: inline-block;
    margin: 16px 0 16px 0;
}




@media (max-width: 1199.98px) {
    .pagination-wrapper, .page-numbers {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
    }
    .pagination-wrapper, .page-numbers {
        gap: 4px;
    }
    .pagination-wrapper .left-btn{
        width: 180px;
    }
    .pagination-wrapper .right-btn{
        width: 136px;
    }
    .container-pagination {
        margin: 16px 0 16px 0;
    }
}

@media (max-width: 991.98px) {
    .pagination-wrapper .left-btn {
        width: 200px
    }
    .pagination-wrapper .right-btn {
        width: 175px;
    }
    .container-pagination {
        margin: 16px 0 16px 0;
    }
}

@media (max-width: 767.98px) {

    .pagination-wrapper button {
        font-size: 10px;
    }
    .pagination-wrapper img {
        width: 10px;
    }
    .pagination-wrapper {
        padding-top: 15px;
    }
    #m_TCAdminPlayListPaging .pagination-wrapper {
        flex-wrap: initial !important;
    }
    .pagination-wrapper .prevoius-text, .pagination-wrapper .next-text , span.perious-text{
        display: none;
    }
    .pagination-wrapper svg {
        width: 20px;
        height: 20px;
    }
    .pagination-wrapper .right-btn, .pagination-wrapper .left-btn{
        width:auto;
        margin-bottom:0px;
    }
    .page-numbers {
        width: 78%;
    }
}


@media (max-width: 575.98px) {
    .pagination-wrapper button {
        font-size: 10px;
    }

    .pagination-wrapper img {
        width: 10px;
    }

    .pagination-wrapper {
        padding-top: 15px;
    }

    #m_TCAdminPlayListPaging .pagination-wrapper {
        flex-wrap: initial !important;
    }
    .pagination-wrapper .prevoius-text, .pagination-wrapper .next-text , span.perious-text{
        display: none;
    }
    .pagination-wrapper svg {
        width: 20px;
        height: 20px;
    }
    .pagination-wrapper .right-btn, .pagination-wrapper .left-btn{
        width:auto;
        margin-bottom:0px;
    }
    .page-numbers {
        width: 78%;
    }
}
.three-dot-menu {
    position: relative;
    display: inline-block;
}

.three-dot-menu.selected-three-dot > svg {
    stroke: #101828 !important;
}
    .three-dot-menu svg {
        position: relative;
        display: inline-block;
    }

.three-dot-menu.selected-three-dot > svg {
    stroke: #101828 !important;
}

.three-dot-menu svg {
    width: 16px;
    height: 16px;
}

    .three-dot-menu svg.menu-toggle {
        width: 20px;
        height: 20px;
    }

.menu-options {
    display: none;
    position: absolute;
    min-width: 243px;
    z-index: 1;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    color: #344054;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

    .menu-options ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        max-height: 350px;
        overflow: auto;
    }

        .menu-options ul li a {
            padding: 16px;
            display: flex;
            align-items: center;
            margin: 2px 2px;
        }

    .menu-options a {
        display: block;
        color: black;
        text-align: left;
        padding: 8px 16px;
        text-decoration: none;
    }

        .menu-options a:hover {
            background-color: #F9FAFB;
        }

.submenu {
    display: none;
    position: absolute;
    top: 50px;
    min-width: 200px;
    background: #FFFFFF;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    color: #344054;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-top: 15px;
}

.menu-option:hover .submenu {
    display: block;
}

/*new css add 4/26*/

.add-playlist-right-icon {
    position: absolute;
    right: 0px;
}
.menu-options ul li a img {
    width: 21px;
    margin-right: 10px;
}

.menu-options ul li a svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.menu-option:hover .add-playlist-right-icon img {
    transform: rotate(90deg);
    transition: 0.5s all ease;
}

.menu-option:hover .add-playlist-right-icon svg {
    transform: rotate(90deg);
    transition: 0.5s all ease;
}

.add-playlist-right-icon img {
    width: 12px !important;
}

@media (max-width: 767.98px) {

        .three-dot-menu svg.menu-toggle {
            width: 20px;
            height: 20px;
        }

    .menu-options {
        display: none;
        position: absolute;
        min-width: 243px;
        z-index: 1;
        right: 0;
        background: #FFFFFF;
        border: 1px solid #EAECF0;
        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
        border-radius: 8px;
        color: #344054;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
    }

    .menu-options ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        max-height: 350px;
        overflow: auto;
    }

.menu-options a:hover {
    background-color: #F9FAFB;
}

.submenu {
    display: none;
    position: absolute;
    top: 50px;
    min-width: 200px;
    background: #FFFFFF;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    color: #344054;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    margin-top: 15px;
}

.menu-option:hover .submenu {
    display: block;
    }
}



.select2-container {
    width: 100% !important;
}

.mutliSelect-wrapper .btn-group {
    width: 100%;
}

.mutliSelect-wrapper button.multiselect.dropdown-toggle {
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border: 1px solid #D0D5DD;
    color: #495057;
    font-weight: 400;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-size: 16px;
    padding-right: 27px;
}

    .mutliSelect-wrapper button.multiselect.dropdown-toggle span.multiselect-selected-text {
        overflow: hidden;
        width: 100%;
        display: inline-block;
    }

.mutliSelect-wrapper .btn-group {
    width: 100%;
}

.mutliSelect-wrapper button.multiselect.dropdown-toggle {
    background-color: #FFFFFF;
    width: 100%;
    text-align: left;
    border: 1px solid #D0D5DD;
    color: #495057;
    font-weight: 400;
    box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
    font-size: 16px;
}

.mutliSelect-wrapper .dropdown-toggle::after {
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    width: 9px;
    height: 9px;
    border-style: solid;
    border-width: 2px 2px 0 0px;
    border-color: #667085;
    transform: rotate(135deg);
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 14px;
}

.mutliSelect-wrapper ul {
    width: 100%;
    max-height: 200px;
    overflow: auto;
    transform: translate3d(0px, 45px, 0px) !important;
}

    .mutliSelect-wrapper ul li a label {
        display: flex;
        padding: 10px 20px;
        align-items: center;
    }

        .mutliSelect-wrapper ul li a label input {
            width: 18px !important;
            height: 18px;
            box-shadow: none;
            width: auto;
            margin-bottom: 0px !important;
            margin-right: 16px;
            accent-color: #7F56D9;
        }

        .mutliSelect-wrapper ul li a label:hover {
            background-color: #f5f5f5;
        }

.mutliSelect-wrapper .multiselect.dropdown-toggle.disabled {
    background-color: #F9FAFB;
    cursor: default;
}

.mutliSelect-wrapper .dropdown-toggle::after {
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    width: 9px;
    height: 9px;
    border-style: solid;
    border-width: 2px 2px 0 0px;
    border-color: #667085;
    transform: rotate(135deg);
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 14px;
}

.mutliSelect-wrapper ul {
    width: 100%;
    max-height: 200px;
    overflow: auto;
    transform: translate3d(0px, 45px, 0px) !important;
}

    .mutliSelect-wrapper ul li a label {
        display: flex;
        padding: 10px 20px;
        align-items: center;
    }

        .mutliSelect-wrapper ul li a label input {
            width: 18px !important;
            height: 18px;
            box-shadow: none;
            width: auto;
            margin-bottom: 0px !important;
            margin-right: 16px;
            accent-color: #6F2495;
            min-width: 18px;
        }

        .mutliSelect-wrapper ul li a label:hover {
            background-color: #f5f5f5;
        }

.mutliSelect-wrapper .multiselect.dropdown-toggle.disabled {
    background-color: #F9FAFB;
    cursor: default;
}

/*input checkbox-seclect */
.search-multi-wrapper {
    position: relative;
}

.search-list-mutliple {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    position: absolute;
    width: 100%;
    top: 43px;
    display: none;
    z-index: 9;
}

    .search-list-mutliple ul {
        margin-bottom: 0px;
        max-height: 200px;
        overflow: auto;
    }

        .search-list-mutliple ul li {
            list-style: none;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #344054;
            padding: 12px 16px;
            cursor: pointer;
        }

            .search-list-mutliple ul li:hover {
                background-color: #f5f5f5;
            }

            .search-list-mutliple ul li:last-child {
                padding-bottom: 16px;
            }

    .search-list-mutliple span.checkmark {
        border: 1px solid #D0D5DD;
    }

.search-multi-wrapper .search-tab-wrapper img {
    top: 10px;
}

.search-multi-wrapper .search-tab-wrapper svg {
    top: 10px;
}

.search-multi-wrapper.open .search-list-mutliple {
    display: block;
}

#selectedValue {
    display: inline-block;
    background-color: #ddd;
    border-radius: 20px;
    padding: 1px 12px 4px;
    margin: 10px;
}

.search-multi-wrapper {
    position: relative;
}

.search-tab-wrapper {
    position: relative;
}

    .search-tab-wrapper svg {
        position: absolute;
        left: 13px;
        top: 10px;
        width: 21px;
        color: #667085;
    }

.search-multi-wrapper .search-tab-wrapper img {
    top: 10px;
}

.search-multi-wrapper .search-tab-wrapper svg {
    top: 10px;
}

.search-list-mutliple {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    border-radius: 8px;
    position: absolute;
    width: 100%;
    top: 43px;
    display: none;
    z-index: 9;
}

    .search-list-mutliple ul {
        margin-bottom: 0px;
        max-height: 200px;
        overflow: auto;
        padding-inline-start: 0px;
    }

        .search-list-mutliple ul li {
            list-style: none;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            color: #344054;
            padding: 12px 16px;
            cursor: pointer;
        }


    .search-list-mutliple span.checkmark {
        border: 1px solid #D0D5DD;
    }

.select2-results__option {
    padding-right: 14px;
    vertical-align: middle;
    font-size: 14px;
}

    .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #e9e9e9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 20px;
        vertical-align: middle;
    }

    .select2-results__option[aria-selected=true]:before {
        font-family: fontAwesome;
        content: "\f00c";
        color: #fff;
        background-color: #f77750;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #eaeaeb;
    color: #272727;
}

.select2-container--default .select2-selection--multiple {
    margin-bottom: 10px;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 4px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #f77750;
    border-width: 2px;
}

.select2-container--default .select2-selection--multiple {
    border-width: 2px;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.select2-selection .select2-selection--multiple:after {
    content: 'hhghgh';
}

/* select with icons badges single*/
.select-icon .select2-selection__placeholder .badge {
    display: none;
}


.select-icon .select2-results__option:before,
.select-icon .select2-results__option[aria-selected=true]:before {
    display: none !important;
}

.select-icon .select2-search--dropdown {
    display: none;
}

.multi-select-input .select2-container--default .select2-selection--multiple {
    margin-bottom: 0px !important;
}

.multi-select-input .select2-container--default .select2-selection--multiple {
    margin-bottom: 0px !important;
    min-height: 10px;
    border: 1px solid #D0D5DD !important;
    padding: 0px 3px 0px 25px;
    min-height: 43px;
    border-radius: 6px;
}

.multi-select-input ul.select2-selection__rendered {
    min-height: 40px;
}

.multi-select-input .select2-container .select2-search--inline .select2-search__field {
    margin-top: 0px !important;
}

.multi-select-input .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 6px;
}

.select2-container--open .select2-dropdown--below {
    background: #FFFFFF;
    border: 1px solid #EAECF0;
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03) !important;
    border-radius: 8px !important;
    padding: 10px;
}

.multi-select-input li.select2-selection__choice {
    font-size: 12px;
    background-color: #6f2495 !important;
    color: #fff !important;
}

.multi-select-input .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: #6f2495 !important;
    color: #fff !important;
}

div#shareObservationModel .multi-select-input li.select2-selection__choice, div#updateShareObservationModel .multi-select-input li.select2-selection__choice {
    font-size: 12px;
    background-color: #0F3188 !important;
    color: #fff !important;
}

div#shareObservationModel .multi-select-input .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, div#updateShareObservationModel .multi-select-input .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: #0F3188 !important;
    color: #fff !important;
}

.multi-select-input {
    position: relative;
}

.multi-input-image {
    display: inline-block;
    position: absolute;
    left: 23px;
    top: 37px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: inherit !important;
}

.select2-results__option:before {
    width: 24px !important;
    height: 24px !important;
    border: 1px solid #D0D5DD !important;
}

.select2-results__option[aria-selected=true]:before {
    font-family: fontAwesome;
    content: "\f00c";
    color: #7F56D9 !important;
    background-color: #fff !important;
    border: 0;
    display: inline-block;
    padding-left: 3px;
    border: 1px solid #7F56D9 !important;
}

.container-fluid.header-secound.px-3.resource-body-section span.select2-selection__clear {
    margin-top: 9px;
}

.multi-select-input .select2-container--default .select2-selection--single {
    margin-bottom: 0px !important;
}

.multi-select-input .select2-container--default .select2-selection--single {
    margin-bottom: 0px !important;
    min-height: 10px;
    border: 1px solid #D0D5DD !important;
    padding: 0px 3px 0px 25px;
    min-height: 43px;
    border-radius: 6px;
}

.multi-select-input .select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-radius: 6px;
}

.multi-select-input .select2-container--default .select2-selection--single .select2-selection__choice__remove {
    background-color: #6f2495 !important;
    color: #fff !important;
}

div#shareObservationModel .multi-select-input .select2-container--default .select2-selection--single .select2-selection__choice__remove, div#updateShareObservationModel .multi-select-input .select2-container--default .select2-selection--single .select2-selection__choice__remove {
    background-color: #0F3188 !important;
    color: #fff !important;
}

.resource-item-access-wrapper .multi-select-input .select2-container--default .select2-selection--single {
    max-height: 90px;
    overflow: auto;
}

.left-side {
    width: 250px;
    color: #fff;
}

.right-side {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: calc(100% - 250px);
    margin-left: 250px;
    background-color: #f4f8fb;
    min-height: 100vh;
    font-size: 14px;
    color: #6c6c6c;
}

.showCommentsSection {
    padding: 20px 0px 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #d4d4d4;
    flex-wrap: wrap;
}

.commentmainSection {
    display: flex;
    padding: 13px 0px;
    border-bottom: 1px solid #e4e4e4;
}

.assignmentCommentMainSection {
    display: flex;
    padding: 13px 0px;
    border-bottom: 1px solid #e4e4e4;
}

.userImage {
    margin-right: 11px;
}

    .userImage img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }

.UsernameSection {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}


.feedbackSection {
    display: flex;
    justify-content: end;
    align-items: center;
}

.feedbackSection > div {
    margin-top: -35px;

   /* padding-left: 10px;*/
    padding-right: 10px;
   font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}
.feedbackSection-no-margin > div {
    margin-top: 0px;
}

.searchInput {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.commentmainSection:last-child {
    border: none;
}
.assignmentCommentMainSection:last-child {
    border: none;
}

.commentRightSide {
    width: 100%;
    padding-top: 9px;
}

.right-side-section {
    font-size: 15px;
    background: #f9fcfe;
    min-height: 760px;
}
.timerset {
    display: flex;
    border-bottom: 1px solid #dddddd4f;
    padding-bottom: 25px;
    padding-top: 4px;
    color: #000;
}

    .timerset span {
        color: #6F2495;
        margin-right: 8px;
        cursor: pointer;
        font-style: normal;
        font-weight: 600;
        line-height: 20px;
       font-family: 'Inter';
        font-size: 14px;
    }

.everyOneCommentSection {
    background-color: #c0c0c03b;
    padding: 13px 22px;
    border-radius: 6px;
}

.comentImage {
    margin-top: 5px;
}

    .comentImage img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 2px;
    }

.sharedPeopleText {
    text-align: end;
    margin-bottom: 10px;
}


.reply-inner-Comment {
    margin-top: 19px;
    display: flex;
}

.replyProfile {
    margin-right: 15px;
}

    .replyProfile img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }

.ReplyCommmentSection {
    width: 100%;
}

.text-area-wrapper {
    position: relative;
}

.usercommentProfile {
    display: flex;
    align-items: center;
    position: absolute;
    top: 11px;
    left: 17px;
}

    .usercommentProfile img {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 8px;
    }

.text-area-wrapper textarea {
    padding-top: 40px;
    padding-left: 50px;
}

.text-area-wrapper textarea {
    padding-top: 45px;
    padding-left: 124px;
    resize: none;
    font-size: 14px;
}

.right-side button {
    font-size: 12px;
}

.commentActive {
    background-color: #dddddd85;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
}

.timer {
    position: absolute;
    top: 37px;
    left: 32px;
    color: #2d6fa3;
    cursor: pointer;
}

.font-14 {
    font-size: 14px;
}

.right-footer-wrapper {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.right-select-main select {
    border: none;
    background-color: #F2E9F4;
    border-radius: 20px;
    padding: 4px 8px;
    color: #6F2495;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.search-images img {
    width: 20px;
    margin-left: 6px;
    margin-right: 8px;
    cursor: pointer;
}

.threedots {
    font-size: 30px;
    line-height: 0;
    cursor: pointer;
}

.exclamination-circle-image img {
    width: 18px;
    position: relative;
    top: -1px;
    cursor: pointer;
    left: 10px;
}

.searchInput input {
    border: 1px solid #ccc;
    height: 32px;
    padding: 0px 10px;
    color: #878080;
    border-radius: 16px;
    width: 230px;
}

.searchInput button {
    padding: 4px 10px;
    font-weight: 600;
    border-radius: 4px;
    font-size: 12px;
}

.everyOneSelct select {
    border: navajowhite;
    background-color: inherit;
    color: #878080;
    cursor: pointer;
    max-width: 200px;
}

.Type-content-wrapper {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
}

.type-inner-wrapper input {
    display: inline-block;
}

.type-inner-wrapper {
    color: #000;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.nav-tablist-wrapper .nav-link {
    color: #000;
}

    .nav-tablist-wrapper .nav-link.active {
        color: #000;
        border: none;
        border-bottom: 2px solid blue;
        font-weight: 700;
    }

.nav-tablist-wrapper .nav-tabs .nav-link:focus, .nav-tablist-wrapper .nav-tabs .nav-link:hover {
    border: none;
}

.update-timestamp-modal-wrapper h5 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}

.update-timestamp-modal-wrapper button span {
    color: #0606a4;
    font-weight: 400;
    font-size: 14px;
}

.save-options-btn {
    padding: 7px 35px;
    font-size: 12px;
}

.core-wrapper label {
    color: #000;
    margin-bottom: 0px;
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 13px;
}

.circle-image-text {
    display: none;
}

.rubic-section:hover .circle-image-text {
    display: block !important;
}

.rubic-section {
    position: relative;
}

    .rubic-section:hover .circle-image-text {
        display: block !important;
        background-color: #fff;
        padding: 2px 10px;
        font-weight: 700;
        border-radius: 6px;
        position: absolute;
        bottom: -18px;
        white-space: nowrap;
        font-size: 12px;
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.everyOneSelct:focus-visible {
    outline: none;
}

:focus-visible {
    outline: none;
}

.search-images {
    margin-left: 15px;
}

.showComment {
    display: flex;
    flex-direction: column;
}

    .showComment .custom-control-label::before {
        background-color: #848080;
        border: 1px solid #848080;
        width: 35px;
        padding: 8px;
        left: -2.35rem;
    }

    .showComment .custom-switch .custom-control-label::after {
        background-color: #fff;
        top: 7px;
    }

    .showComment .custom-control-label {
        padding-left: 13px;
    }

.show-Content {
    position: relative;
    top: 2px;
}

.displayNone {
    display: none;
}

.custom-checkbox-wrapper {
    display: flex;
    align-items: center;
}

    .custom-checkbox-wrapper img {
        width: 20px;
        margin-left: 16px;
    }

.custom-switch-wrapper {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 23px;
    margin: 0px 10px;
}

.custom-slider {
    position: absolute;
    cursor: pointer;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.custom-switch-wrapper input {
    display: none;
}

.custom-slider:before {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    left: 5px;
    bottom: 5px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50px;
}

.custom-checkbox-wrapper input:checked + .custom-slider {
    background-color: #007bff;
}

    .custom-checkbox-wrapper input:checked + .custom-slider:before {
        transform: translateX(22px);
    }

.observation-list.js-commentManagerView-list-feed::before {
    border-left: 0 !important;
}

.everyOneCommentSection {
    display: flex;
    justify-content: space-between;
}

.everyOneCommentSection span {
    display: inline-block;
}

.commentTimeAgo.video-comment {
   font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.commentTimeAgo.inperson-comment {
    font-size: 12px;
    color: #a5a5a5;
    font-weight: 600;
}

.side-menu-wrapper {
    background-color: #fff;
    padding: 6px 15px;
    border-radius: 4px;
    position: absolute;
    z-index: 2;
    display: none;
}

    .side-menu-wrapper ul {
        margin-bottom: 0px;
        list-style: none;
    }

.side-menu-wrapper ul li {
    cursor: pointer;
    padding: 14px 10px;
    color: #344054;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    border-bottom:none;
}

    
.side-menu-wrapper ul li:last-child {
    border: none;
}

.commentSection .text-area-wrapper textarea {
    padding-top: 10px;
    padding-left: 92px;
}

.usercommentProfile .comment-time {
    color: #6F2495;
    margin-right: 8px;
    cursor: pointer;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
   font-family: 'Inter';
    font-size: 14px;
    margin-top: 1px;
}

.updateTimeset-wrapper .close span {
    font-size: 20px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.62);
}

.timeSet-body label {
    color: #000;
    font-size: 14px;
    font-weight: 600;
}

.timeSet-body .time-hours, .timeSet-body .time-mins, .timeSet-body .time-secs {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.timeSet-body select {
    width: 75px;
    cursor: pointer;
}

.diabled-custom-wrapper {
    color: #dfdfdf;
    pointer-events: none;
    user-select: none;
}

    .diabled-custom-wrapper select {
        border-color: #dfdfdf;
        color: #dfdfdf;
    }

.timeset-button-wrapper button {
    color: #fff;
    font-size: 14px;
    padding: 8px 16px;
    font-weight: 600;
}

.timeset-button-wrapper .btn-secondary {
    background-color: #afacac;
    border-color: #afacac;
}

.file-add-main-section {
    margin-top: 10px;
}

.file-add-wrapper {
     display: flex;
    justify-content: space-between;
    align-items:center;
    border-radius: 16px;
    background: #F2E9F4;
   font-family: 'Inter';
    width: fit-content;
    padding: 2px 8px 2px 6px;
    margin-bottom:6px;
}

.file-content-text:hover {
    text-decoration: underline;
}


.file-delete-wrapper {
    font-size: 16px;
    font-weight: 800;
    color: #a7a7a7;
    cursor: pointer;
}

.attach-file-wrapper img {
    width: 12px;
    margin-right: 7px;
    cursor: pointer;
}

.attach-file-wrapper {
    border: none;
    background-color: #F2E9F4;
    border-radius: 20px;
    padding: 4px 15px;
    color: #8a8a8a;
    font-size: 12px;
    cursor: pointer;
}

.attach-main-section {
    position: relative;
}

.edit-attach-wrapper {
    background-color: #fff;
    padding: 0px 0px;
    border-radius: 4px;
    position: absolute;
    z-index: 2;
    right: 0px;
    top: -108px;
    width: 180px;
    display: none;
}
    .edit-attach-wrapper ul{
      margin-bottom:0px;
    }
    .edit-attach-wrapper ul li {
        color: #000;
        font-size: 14px;
        padding: 14px 14px;
        cursor: pointer;
        list-style: none;
    }

        .edit-attach-wrapper ul li:last-child {
            border: none;
        }

        .edit-attach-wrapper ul li:hover {
            background-color: rgba(245, 245, 245);
            /* background-color: rgba(245, 245, 245, 0.5); */
        }

    .edit-attach-wrapper img {
        width: 26px;
        margin-right: 10px;
    }

.show {
    display: block;
}

.link-delete-wrapper {
    font-size: 16px;
    font-weight: 800;
    color: #a7a7a7;
    cursor: pointer;
}
.activityContent-list-wrapper .right-side-section {
    background-color: #fff;
    padding: 0px !important;
}
.activityContent-list-wrapper .everyOneCommentSection {
    background-color: #fff;
}
.activityContent-list-wrapper .custom-modal-section textarea {
    padding-left: 82px;
    padding-top: 11px;
}
.activityContent-list-wrapper span.js-commentPanelView-time-continues, .activityContent-list-wrapper span.js-commentPanelView-time-stop {
    position: absolute;
    top: 7px;
    left: 58px;
    cursor:pointer;
}
.comment-select-section .filter-option-inner-inner {
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    color:#101828;
}
.comment-textarea textarea::placeholder {
    color: #000 !important;
   font-family: 'Inter';
}
.comment-textarea textarea {
    color: #000 !important;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.commentmainSection a.js-tag-visualizer {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.commentmainSection {
    padding-top: 24px;
    border-bottom:none;
}
.commentmainSection a.js-tag-visualizer {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.assignmentCommentMainSection {
    padding-top: 24px;
    border-bottom: none;
}

.everyOneSelct select {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
.everyOneSelct select {
    color: #101828;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 14px;
    margin-left: 10px;
}
.commentSection {
    border-radius: 8px;
    border: 1px solid #F2F4F7;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    padding: 12px 14px;
    min-height: 92px;
}
.timerset {
    padding-bottom: 18px;
    border: 0;
}
.file-add-main-section {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}
.file-add-wrapper {
    border-radius: 16px;
    background: #F2E9F4;
   font-family: 'Inter';
    width: fit-content;
    padding: 2px 8px 2px 6px;
    margin-bottom:6px;
}
.file-content-text a {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.file-add-wrapper.file-add-wrapper-new .file-content-text {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    cursor: pointer;
}
.all-observation-count {
   font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
.right-side-section a {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    cursor:pointer;
}
.UsernameSection .threedots svg {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    color: #98A2B3;
}
.reply-wrapper {
    color: #6F2495;
   font-family: 'Inter';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-top: 9px;
    display: inline-block;
    cursor: pointer;
}

.side-menu-wrapper ul li:hover {
    background-color: #F9FAFB;
}
.side-menu-wrapper{
    padding:0px 0px;
}
.side-menu-wrapper ul li svg {
    width: 18px;
    height: 18px;
}
.activityContent-list-wrapper .js-videoObservationView-commentManagerView .mix-state_overlay {
    flex-direction: column;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
}
.file-delete-wrapper svg, .link-delete-wrapper svg {
    width: 18px;
    height: 18px;
    margin-left: 2px;
}
.added-text-wrapper{
    color:#000;
}
.attach-file-wrapper span {
    color: #6F2495;
}
.resource-observation-link-modal .modal-body ul li {
    list-style: none;
}
.usercomment-section::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

.usercomment-section::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #f9f9f9;
}

.usercomment-section::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #ffffff;
}
.videoObservation-hd{
    margin-bottom:0px!important;
}
.own-video-controller .commentTimeline-comment-dot.js-commentTimelineView-dot img {
    filter: grayscale(0);
}
.right-select-main .dropdown.bootstrap-select {
    margin-bottom: 10px;
}

.timeSet-body .form-own.form-group span {
    margin-left: 10px;
}
.timeSet-body .form-own.form-group .selectpicker ~ button {
    padding: 7px 14px !important;
    height: 37px;
}
.diabled-custom-wrapper button {
    border: 1px solid #e7e7e7;
    color: #dfdfdf;
}
.diabled-custom-wrapper .selectpicker ~ .dropdown-toggle::after {
    border-color: #dfdfdf;
}

span.exclamination-circle-image {
    position: relative;
    top: -1px;
}

.comment-select-section span.attach-file-wrapper {
    background: inherit;
    padding: 0;
    color: #667085;
}
.Queations-list-wrapper li {
    list-style: none;
    color:  #000;
   font-family: 'Inter';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 1rem;
}
.assignmentCommentMainSection textarea {
    padding-left: 12px !important;
}

.assignment-observation-comment-list::before {
    border-left: 0 !important;
}


@media (min-width: 768px) and (max-width: 991.98px) {
    .commentmainSection {
        display: flex;
        padding: 13px 0px;
        border-bottom: 1px solid #e4e4e4;
    }
    .assignmentCommentMainSection {
        display: flex;
        padding: 13px 0px;
        border-bottom: 1px solid #e4e4e4;
    }
    .userImage {
        margin-right: 11px;
    }
    .file-delete-wrapper svg, .link-delete-wrapper svg {
        width: 18px;
        height: 18px;
        margin-left: 2px;
    }
}
@media (max-width: 767.98px) {
    .activityContent-list-wrapper .right-side-section {
        min-height: auto!important;
    }
    .feedbackSection > div{
        margin-top: 0px;
    }
    .usercomment-section .commentSection .file-content-text a {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-overflow: ellipsis;
    }
}
.own-video-controller .playbackBar-controls {
    padding-right: 15px;
    margin-top: -5px;
}

.own-video-controller .playbackBar {
    background: transparent;
}

.own-video-controller {
    left: 0;
    right: 0;
    padding-top: 10px;
    padding-bottom: 6px;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.8);
}

.own-video-controller .commentTimeline-comment-toolTip {
    z-index: 56;
    pointer-events: initial;
    background: #fff;
    box-shadow: 0 0 4px #c5c5c5;
}

.own-video-controller .commentTimeline-comment-toolTip button {
    background-color: #eaeaea;
}

.own-video-controller .commentTimeline-comment-toolTip button > svg {
    fill: #2376dc;
}

.own-video-controller .commentTimeline-comment-toolTip .commentTimeline-comment-toolTip-content {
    color: #7b7b7b;
}

.commentTimeline-comment-toolTip::before {
    border-bottom-color: #fff !important;
}

.own-video-controller .js-commentTimelineContainer:before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #c3c3c3;
    left: 0;
    right: 0;
    top: 50%;
}

.own-video-controller .commentTimeline {
    position: absolute;
    pointer-events: none;
    z-index: 56;
}

.own-video-controller .playbackBar-controls-play > svg {
    width: 16px;
    height: 16px;
}

.own-video-controller .playbackBar-controls-rewind > svg, .own-video-controller .playbackBar-controls-fastForward > svg {
    fill: #58595b;
    width: 16px;
    height: 16px;
}
.own-video-controller .commentTimeline {
    background: transparent;
}

.own-video-controller .progress-playhead::after {
    width: 13px;
    height: 13px;
    margin: auto;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: #838787;
}

.own-video-controller .progress-playhead svg {
    display: none;
}

.own-video-controller .commentTimeline-comment-dot {
    margin-top: 17px;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: relative;
    background-color: #5d989e;
    pointer-events: initial;
}

.commentTimeline-comment-dot.js-commentTimelineView-dot img {
    border-radius: 100%;
    filter: grayscale(1);
}

.commentTimeline-comment-dot, .commentTimeline-comment-dot img:hover {
    filter: initial;
}

.own-video-controller .videoObservation-bd {
    margin-bottom: 0;
}

.own-video-controller .commentTimeline-avatar {
    display: none;
}

.full-width-video {
    margin-top: -9px;
    padding-left: 8px;
    padding-right: 8px;
}

.own-video-controller .videoObservation-bd .progress {
    background-color: transparent;
}

.preview-own-video .progress-playhead {
    left: 0;
}
.own-video-controller .commentTimeline-comment-dot {
    width: 24px;
    height: 24px;
    background-color: inherit;
    margin-top: 23px;
}
.own-video-controller .js-commentTimelineContainer:before {
    border-bottom: 5px solid #c3c3c3;
    border-radius: 10px;
}
.videoObservation-hd.videoplayer-inner .video-js .vjs-play-control .vjs-icon-placeholder:before {
    font-size: 21px !important;
    top: -2px !important;
    left: 0px;
}


.videoplayer-main-section.video-player-inner-w .own-video-controller {
    padding-top: 0px;
    padding-bottom: 0px;
    background: none;
    margin-bottom: 45px;
}
.videoplayer-main-section .video-js .vjs-play-control .vjs-icon-placeholder:before {
    font-size: 24px;
    top: -5px;
}
.video-js .vjs-control{
    color:#fff;
}
.video-desc-section .vid-name-val {
    position: relative;
    top: 16px;
}

.vid-desc-val {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}
.video-desc-section .vid-name-val {
    position: relative;
    top: 16px;
}

.vid-desc-val {
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
}
.icon {
  display: inline-block;
  vertical-align: bottom;
  font-size: 0;
  background: transparent 0 0 no-repeat;
}

.icon_fallthrough {
  pointer-events: none;
}

.icon_lock {
  width: 10px;
  height: 16px;
  fill: #000000;
}

.icon_lockLg {
  width: 42px;
  height: 59px;
  fill: #828282;
}

.icon_check {
  width: 20px;
  height: 20px;
  fill: #6ead44;
}

.icon_check_lg {
  width: 60px;
  height: 60px;
}

.icon_cal {
  width: 25px;
  height: 25px;
  fill: #828282;
  cursor: pointer;
}

.icon_playBtn {
  width: 24px;
  height: 18px;
  fill: #828282;
  cursor: pointer;
}

.icon_pause {
  width: 24px;
  height: 18px;
  fill: #828282;
  cursor: pointer;
}

.icon_warning {
  width: 68px;
  height: 60px;
  fill: #bd3232;
}

.icon_download-all {
  width: 9px;
  height: 13px;
  fill: #ffffff;
}

.icon_trash {
  width: 10px;
  height: 13px;
  fill: #828282;
}

.mix-icon_trash_opaque {
  fill: #ffffff;
}

.icon_edit {
  width: 10px;
  height: 13px;
  fill: #828282;
}

.icon_close {
  width: 9px;
  height: 9px;
  fill: #6d6f71;
}

.icon_throbber {
  width: 60px;
  height: 60px;
  fill: #6ead44;
  animation: spin 850ms linear infinite;
}

.icon_download,
.icon_upload {
  width: 11px;
  height: 15px;
  fill: #1762b6;
}
#icon_grip_isActive path {
  fill: #959595;
}

#icon_grip_isActive path + path {
  fill: #f15d2c;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}



/* ---------------------------------------------------------------------- Playback Bar - Video controls ---------------------------------------------------------------------- */
.playbackBar {
    display: flex;
    border-radius: 4px;
    padding: 7px;
    flex-direction: row;
    background-color: #cecece;
}

.playbackBar-controls {
    display: flex;
    padding-right: 45px;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;
}

    .playbackBar-controls > * + * {
        margin-left: 14px;
    }

.playbackBar-controls-play > svg {
    width: 22px;
    height: 26px;
    fill: #58595b;
}

.playbackBar-controls-play {
    margin-left: 16px;
}

.playbackBar-controls-rewind > svg, .playbackBar-controls-fastForward > svg {
    width: 25px;
    height: 14px;
    fill: #939394;
}

.state {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font: 500 36px/1 FONT;
  text-align: center;
}

.state_isSaving {
  background-color: rgba(243, 243, 243, 0.75);
}

.state_hasSaved {
  background-color: rgba(225, 238, 218, 0.75);
}

.state_hasError {
  background-color: rgba(227, 227, 227, 0.75);
}

.mix-state_overlay {
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

/* ---------------------------------------------------------------------- Video Observation - Layout module for video observations ---------------------------------------------------------------------- */
.videoObservation-hd {
    margin-bottom: 15px;
}

.videoObservation-bd {
    height: 100%;
    margin-bottom: 8px;
}

/* ----------------------------------------------------------------------
 Comment Timeline - Comment module for videos
---------------------------------------------------------------------- */
.commentTimeline {
  width: 100%;
  height: 26px;
  margin-bottom: 3px;
  border-radius: 5px;
  position: relative;
  background-color: #dde8ea;
}

.commentTimeline-avatar {
  display: flex;
  height: inherit;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-right: 6px;
  padding-left: 4px;
  align-items: center;
  position: absolute;
  left: -30px;
  background-color: #dde8ea;
}

.commentTimeline-comment {
  position: absolute;
}

.commentTimeline-comment-dot {
  margin-top: 7px;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  background-color: #5d989e;
}

.commentTimeline-comment-dot.isActive,
.commentTimeline-comment-dot:hover {
  box-shadow: 0 0 0 4px rgba(149, 149, 149, 0.3);
  cursor: pointer;
}

.commentTimeline-comment-toolTip {
  display: flex;
  width: 222px;
  padding-top: 3px;
  padding-bottom: 3px;
  position: relative;
  top: 4px;
  left: -23px;
  z-index: 1;
  flex-direction: row;
  align-items: center;
  background-color: #58595b;
}

.commentTimeline-comment-toolTip-content {
  margin-left: 8px;
  overflow: hidden;
  max-width: 145px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  color: #ffffff;
}

.commentTimeline-comment-toolTip-play,
.commentTimeline-comment-toolTip-search,
.commentTimeline-comment-toolTip-edit {
  width: 22px;
  height: 22px;
  margin-left: 4px;
  position: relative;
  cursor: pointer;
  background-color: #898989;
}

.commentTimeline-comment-toolTip-play > svg,
.commentTimeline-comment-toolTip-search > svg,
.commentTimeline-comment-toolTip-edit > svg {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  fill: #ffffff;
}

.commentTimeline-comment-toolTip-play > svg {
  width: 15px;
  height: 17px;
}

.commentTimeline-comment-toolTip-search > svg {
  width: 14px;
  height: 15px;
}

.commentTimeline-comment-toolTip-edit > svg {
  width: 14px;
  height: 15px;
}

.commentTimeline-comment-toolTip::before {
  border-right: 10px solid transparent;
  border-bottom: 10px solid #58595b;
  border-left: 10px solid transparent;
  position: absolute;
  top: -10px;
  left: 20px;
  content: "";
}

.commentTimeline-comment-dot img, .commentTimeline-comment-dot video {
    max-width: 100%;
}
/* ---------------------------------------------------------------------- Progress - Presentation of video progress ---------------------------------------------------------------------- */
.progress {
    width: 100%;
    height: inherit;
    position: relative;
    user-select: none;
}

.progress-own-video.progress {
    overflow: inherit;
    background: transparent;
    margin-bottom: 10px;
}

.progress-bar {
    height: 15px;
    margin-bottom: 10px;
    background: gray;
}

.progress-buffer {
    position: absolute;
    width: 50%;
    height: 11px;
    top: 0;
    background-color: darkgrey;
}

.progress-progress {
    position: absolute;
    width: 33%;
    height: 11px;
    top: 0;
    background-color: blue;
}

.progress-playhead {
    height: inherit;
    position: absolute;
   /* top: -4px;*/
    left: 0%;
    z-index: 1;
    cursor: pointer;
}

    .progress-playhead > svg {
        width: 21px;
        height: 20px;
        fill: #f15d2c;
    }

    .progress-playhead::after {
        width: 5px;
        height: 100%;
        margin: auto;
        border-radius: 4px;
        position: absolute;
        top: 15px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        content: "";
        background-color: #f15d2c;
    }

    .progress-playhead:hover::after {
        box-shadow: 0 0 0 3px rgba(149, 149, 149, 0.3);
    }

.menu-plus-icon {
    width: 20px;
}

.menu-head-txt {
    margin-left: 15px;
}

.left-menu-list > li > div {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 6px;
    white-space:nowrap;
    width:100%;
}

.logo-container .profile-img img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.main-wrapper.active .logo-container .profile-img {
    display: none;
}

.left-sumenu {
    display: none;
}

.tooltip-details {
    position: absolute;
    bottom: 100%;
    background: #2376dc;
    padding: 5px;
    right: 0;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.left-menu-list .tooltip-details {
    padding: 10px 15px;
    pointer-events: initial;
    min-width: 260px;
    left: 44px;
    border-radius: 0 5px 5px 0;
    background: #fff;
    color: #344054;
    top: -15px;
    bottom: auto;
    visibility: hidden;
    box-shadow: 0.2rem .5rem 1rem rgba(0,0,0,.15)!important;
}

    .left-menu-list .tooltip-details span {
        display: block;
        border-radius: 5px;
        font-weight: 600;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        position: relative;
        z-index: 1;
        color: #344054;
        padding: 3px 5px;
    }

.main-wrapper.active .tooltip-own:hover .tooltip-details, .main-wrapper.active .left-menu-list .tooltip-own:hover .tooltip-details, .main-wrapper.active .left-menu-list > li:hover .tooltip-details {
    opacity: 1;
    visibility: visible;
}

.back-btn-wrapper .tooltip-own:hover .tooltip-details {
    opacity: 1 !important;
}

.main-wrapper.active .left-menu-list > li:hover .tooltip-details span:hover {
    background: #f5f5f5;
    color: rgba(0, 0, 0, 0.588235);
}

.main-wrapper.active .left-menu-list > li.active .tooltip-details span:hover {
    background: #fff !important;
    color: #000;
}

.main-wrapper.active .left-menu-list > li:hover .tooltip-details:hover .main-wrapper .left-menu-list .tooltip-own:hover .tooltip-details {
    opacity: 0;
}

.left-menu-list > li.active .left-sumenu {
    display: block;
}

.main-wrapper.active .help-icon {
    display: none;
}

.back-btn-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #fff;
    width: 310px;
    transition: all 0.3s ease;
}

    .back-btn-wrapper img {
        width: 24px;
        transition: all 0.3s ease;
    }
    .back-btn-wrapper svg {
        width: 24px;
        transition: all 0.3s ease;
    }
    .back-btn-wrapper .signout-icon {
        width: 20px;
    }

    .back-btn-wrapper .profile-img {
        display: none;
    }

        .back-btn-wrapper .profile-img img {
            width: 20px;
        }
        .back-btn-wrapper {
            background-color: inherit;
        }
        .main-wrapper.active .back-btn-wrapper {
            text-align: center;
            width: 60px;
        }

    .main-wrapper.active .back-btn-wrapper .big-small-sidemenu {
        margin-right: auto;
    }

        .main-wrapper.active .back-btn-wrapper .big-small-sidemenu img {
            transform: rotate(180deg);
            width: 28px;
            position: relative;
            left: -3px;
            top: 2px;
        }

        .main-wrapper.active .back-btn-wrapper .big-small-sidemenu svg {
            transform: rotate(180deg);
            width: 24px;
            position: relative;
            left: -3px;
            top: 2px;
        }

    .main-wrapper.active .back-btn-wrapper .profile-img {
        display: inline-block;
        margin-bottom: 6px;
    }

        .main-wrapper.active .back-btn-wrapper .profile-img img {
            height: 25px;
            border-radius: 50%;
            width: 25px;
        }

        .main-wrapper.active .back-btn-wrapper .profile-img svg {
            height: 24px;
            border-radius: 50%;
            width: 24px;
        }

    .main-wrapper.active .back-btn-wrapper .signout-icon {
        width: 24px;
    }

    .main-wrapper.active .right-side-wrapper {
        width: calc(100% - 80px);
        margin-left: 80px;
   }
.right-side-wrapper {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: calc(100% - 320px);
    margin-left: 320px;
    background-color: #f4f8fb;
    min-height: 100vh;
}
.back-btn-wrapper{
    background-color:inherit;
}
/* scroll css open*/
.mCSB_scrollTools {
    position: absolute;
    width: 16px;
    height: auto;
    left: auto;
    top: 0;
    right: -20px;
    bottom: 0;
}
.mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight {
    -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.mCSB_scrollTools {
    opacity: 0;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
}
.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
    opacity: 0;
    filter: "alpha(opacity=0)";
    -ms-filter: "alpha(opacity=0)";
   
}
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
    margin: 0px 0;
}
.mCSB_scrollTools .mCSB_draggerContainer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    position: relative;
    width: 4px;
    height: 100%;
    margin: 0 auto;
    border-radius: 16px;
    text-align: center;
}
.mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight {
    -webkit-transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.75);
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
}
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
    background-color: #b09feb;
    filter: "alpha(opacity=20)";
    -ms-filter: "alpha(opacity=20)";
}
.mCSB_scrollTools .mCSB_draggerRail {
    width: 4px;
    height: 100%;
    margin: 0 auto;
    border-radius: 16px;
}
.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.8);
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
}
.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent;
}

.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}
.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
    opacity: 1;
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}
  /* scroll css closed */
    .main-wrapper.active .add-views-wrapper {
        display: none;
   }
.left-side-bar {
    width: 320px;
    min-height: 100vh;
    color: #FFFFFF;
    padding-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 50px;
    position: fixed;
    transition: all 0.5s ease;
    max-height: 100vh;
    overflow-y: auto;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    background: linear-gradient(180deg, #6F2495 0%, #1100452b 100%), url('/assets/media/images/TCImages/left-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 57%;
}

.main-wrapper.active .left-side-bar {
    z-index: 99;
}
    .main-wrapper.active .left-side-bar .mCustomScrollBox {
        overflow: visible;
   }
    .main-wrapper.active .left-side-bar .mCSB_container {
        overflow: visible;
   }
    .main-wrapper.active .left-side-bar > .mCSB_scrollTools {
        pointer-events: none;
   }
    .main-wrapper.active .left-side-bar .left-menu-list {
        padding-left: 0;
        padding-right: 0;
   }
    .main-wrapper.active .left-side-bar .left-menu-list > li > div {
        position: relative;
        padding-left: 15px;
        padding-right: 12px;
        cursor: pointer;
        padding-top: 14px;
        padding-bottom: 12px;
    }
    .main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu {
        opacity: 0;
        transition: all 0.3s ease;
        visibility: hidden;
        overflow: visible;
        position: absolute;
        left: 59px;
        top: 0;
        background: #fff;
        z-index: 65;
        width: 300px;
        border-radius: 0 6px 6px 0;
        right: 0;
        min-width: 260px;
        padding-right: 15px !important;
        padding-left: 15px !important;
        box-shadow: 0.2rem .5rem 1rem rgba(0,0,0,.15)!important;
   }
    .main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu .mCustomScrollBox {
        overflow: hidden;
   }
    .main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu .mCSB_container {
        overflow: hidden;
   }
    .main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu li a {
        transition: all 0.3s ease;
   }
    .main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu li a:hover {
        background: #f5f5f5;
        color: rgba(0, 0, 0, 0.5882352941176471);
        border-radius: 5px;
   }
    .main-wrapper.active .dashboard.active {
        padding-left: 12px !important;
        margin-right: 2px;
        margin-left: 5px;
   }
    .main-wrapper.active .fixed-form-wrapper, .main-wrapper.active .fixed-form-second-wrapper {
        left: 60px;
   }

    .left-side-bar .left-side-logo {
        width: 60px;
   }
    .left-side-bar .small-logo {
        display: none !important;
        width: 34px;
   }
    .left-side-logo-width {
        width: 200px !important;
   }
    .main-wrapper.active .left-side-bar {
        width: 84px;
        overflow-x:hidden;
   }
    .main-wrapper.active .left-side-bar .small-logo {
        display: block !important;
   }
    .main-wrapper.active .left-side-bar .left-side-logo {
        display: none !important;
   }
    .main-wrapper.active .left-side-bar .menu-head-txt {
        display: none;
   }
    .main-wrapper.active .left-side-bar .left-sumenu {
        display: none;
   }
    .main-wrapper.active .left-side-bar .add-close-views {
        display: none !important;
   }
.mCustomScrollBox {
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}
.mCSB_container {
    overflow: hidden;
    width: auto;
    height: auto;
}
.left-menu-list {
    min-height: 400px;
}
.dashboard.active {
    background-color: #F9FAFB;
    border-radius: 6px;
}
.dashboard.active .menu-head-txt {
    color: #31373a;
}

.main-wrapper.active .left-side-bar{
    padding-left: 0px;
    padding-right: 0px;
}
.main-wrapper-section .submenu-txt{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.upper-section a {
    color: #fff;
    text-decoration: none;
}
.terms-content-wrapper {
    margin-bottom: 10px;
}
.terms-content-wrapper a {
    color: #fff;
    text-decoration: none;
}
.menu-head-txt .text-4{
    font-weight: 600;
}
.left-sumenu li a {
    padding: 8px 12px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px;
}
.terms-content-wrapper .text-4 {
    margin-bottom: 12px;
}
.upper-section .left-menu-list > li.toggle-submenu.active a {
    color: #fff;
}

.upper-section .left-menu-list > li.active > div a {
    color: #344054;
}
.upper-section .left-menu-list > li.toggle-submenu.active > div a {
    color: #fff
}
.upper-section .left-menu-list li > div:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
}
.upper-section .left-menu-list li:hover a {
    color: #344054;
}

.upper-section .left-menu-list > li.active > div {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
}
.upper-section .left-menu-list > li.toggle-submenu.active > div {
    background-color: rgba(255, 255, 255, 0.8);
    color: #31373a;
}
.upper-section .left-menu-list li:hover a {
    color: #fff;
}

/* sidebar hover css open */
.main-wrapper.active .left-side-bar:hover {
    width: 320px;
    transition: all 0.3s ease;
    padding-left: 16px;
    padding-right: 16px;
}
.main-wrapper.active .left-side-bar:hover .menu-head-txt {
   display: initial;
}
.left-menu-list .tooltip-details{
    display: none;
}
.main-wrapper.active .left-side-bar .left-menu-list > li .left-sumenu{
    display: none;
}
.main-wrapper.active .left-side-bar:hover + .right-section {
    margin-left: 320px;
} 
.main-wrapper.active .left-side-bar:hover .left-menu-list{
    padding-left: 0px;
    padding-right: 0px;
}
.main-wrapper.active .left-side-bar:hover .left-menu-list > li{
    padding-right: 16px;
    padding-left: 16px;
}
.main-wrapper.active .left-side-bar .left-menu-list > li:hover .left-sumenu {
    opacity: 1;
    transition: all 0.3s ease;
    visibility: visible;
    display: none !important;
}

/* sidebar hover css closed */

.upper-section .left-menu-list li:hover .menu-head-txt {
    color:#fff;
}
.upper-section .left-menu-list li.toggle-submenu.active:hover .menu-head-txt {
    color: #344054;
}

.upper-section .left-menu-list .left-sumenu li:hover {
    background: rgba(255, 255, 255, 0.3);
}
.upper-section .left-menu-list li.active:hover .menu-head-txt {
    color: #344054;
}
.upper-section .left-menu-list > li.active a path {
    stroke: #110045;
}
.upper-section .left-menu-list .left-sumenu li:hover .submenu-txt {
    color: #fff;
}
.left-menu-list > li.active .left-sumenu {
    padding-left: 0px;
    padding-right: 0px;
}
.upper-section .left-menu-list > li.toggle-submenu.active > div svg path {
    stroke: #31373a !important;
}
.upper-section .left-menu-list > li.toggle-submenu.active > div svg {
    stroke: #31373a;
}
.upper-section .left-menu-list > li.toggle-submenu.active > div span.menu-head-txt svg, .upper-section .left-menu-list > li.toggle-submenu.active > div span.menu-head-txt svg path {
    stroke: #31373a;
}
.left-side-bar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #ffffff;
}

.left-side-bar::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.left-side-bar::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);

    background-color: #b09feb;
}
.notification-list-mobile, .user-profile-mobile {
    display: none;
}
.bar1, .bar2, .bar3 {
    width: 26px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.4s;
}

.bar2 {
    width: 20px;
}

.change .bar2 {
    opacity: 0;
}

.change .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

.change .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}

div#openNav {
    cursor: pointer;
}
@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    
}

@media (max-width: 767.98px) {
    .left-menu-list > li {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    .left-sumenu{
        padding-top:0px;
    }
    .left-menu-list > li svg {
        width: 22px;
        height: 22px;
    }
    .main-wrapper.active .left-side-bar .left-menu-list > li > div {
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .left-side-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        display: none;
    }
    .right-section {
        margin-left: 0px;
        width: 100%;
        transition: inherit;
        padding-top: 60px;
    }
    .left-side-bar.main {
        display: block;
        z-index: 99;
    }
    .main-wrapper.active .left-side-bar{
        width:320px;
    }
    .main-wrapper.active .right-section {
        width: auto;
        margin-left: 0px;
    }

    .main-wrapper.active .left-side-bar .menu-head-txt{
        display:inline-block;
    }
    .main-wrapper.active .main-wrapper-section .sidebarTeachingcontent {
        margin-left: 10px;
    }
    .main-wrapper.active .container-fluid.nopadd-add{
        padding-left:0px;
        padding-right:0px;
    }
    .main-wrapper.active .left-side-bar{
        padding-left:16px;
        padding-right:16px;
    }
    .main-wrapper.active .help-icon {
        display: block;
        text-align: justify;
    }
    .header-nav-wrapper {
        position: fixed;
        z-index: 99;
        border-bottom: none;
        width: 100%;
    }
    .main-wrapper.active .back-btn-wrapper{
        width:100%;
    }
    .notification-list-mobile li, .terms-content-wrapper, .user-profile-mobile {
        padding: 12px 18px;
    }
    .notification-list-mobile, .user-profile-mobile {
        display: block;
    }
    .user-profile-mobile img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius:50%;
    }
    .notification-list-mobile ul {
        margin-bottom: 0px;
    }
    .user-profile-mobile {
        padding-right: 0px;
        display: flex;
        justify-content: space-between;
    }
    .notification-list-mobile li a span svg {
        margin-right: 12px;
    }
    .notification-list-mobile li {
        display: flex;
    }
    .back-btn-wrapper {
        position:initial;
        padding-left:0px;
        padding-right:0px;
    }
    div#openNav {
        cursor: pointer;
    }
    .main-wrapper-section.overlayDesign::after {
        content: '';
        width: 100%;
        display: block;
        height: 100%;
        background: #3a36368a;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .left-sumenu li a{
        padding: 12px 7px;
    }
}
@media (max-width: 575.98px) {
    .left-menu-list > li {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    .left-sumenu{
        padding-top:0px;
    }
    .left-menu-list > li svg {
        width: 22px;
        height: 22px;
    }
    .user-profile-mobile {
        padding-right: 0px;
        display: flex;
        justify-content: space-between;
    }
    .notification-list-mobile li a span svg {
        margin-right: 12px;
    }
    .notification-list-mobile li {
        display: flex;
    }
    .back-btn-wrapper {
        position:initial;
        padding-left:0px;
        padding-right:0px;
    }
    div#openNav {
        cursor: pointer;
    }
}

.left-sumenu {
    max-height: 240px;
    overflow-y: auto;
}

.left-sumenu li a {
    padding: 12px 12px;
    color:#fff;
    font-weight: 600;
    margin-bottom: 8px;
}

.left-sumenu li a .submenu-number {
    color: #fff;
}

.left-sumenu .active {
    background-color: rgba(255, 255, 255, 0.30);
    border-radius: 6px;
}
.left-sumenu li:hover {
    background-color: #F9FAFB;
    border-radius: 6px;
}
.left-sumenu .active .submenu-txt {
    color: #fff;
}

.left-sumenu .active .submenu-number {
    color: #2376dc;
}

.left-sumenu .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
    right: -5px;
}

.signout-icon + .tooltip-details {
    right: auto;
    left: 0;
}

.left-sumenu li {
    padding-left: 28px;
    white-space: nowrap;
}
li.toggle-submenu.active .left-sumenu li {
    padding-left: 42px;
}
.cal-nav-item {
    margin-bottom: 0px !important;
}
@media (max-width: 1199.98px) {
    
}

@media (max-width: 991.98px) {
}

@media (max-width: 767.98px) {
    .left-sumenu li a {
        padding: 12px 7px;
    }
    .left-menu-list > li {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    .left-sumenu{
        padding-top:0px;
    }
    .left-menu-list > li svg {
        width: 22px;
        height: 22px;
    }
    .user-profile-mobile {
        padding-right: 0px;
        display: flex;
        justify-content: space-between;
    }
}


@media (max-width: 575.98px) {
    .left-sumenu li a {
        padding: 12px 7px;
    }
    .left-menu-list > li {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 0px;
    }
    .left-sumenu{
        padding-top:0px;
    }
    .left-menu-list > li svg {
        width: 22px;
        height: 22px;
    }
    .user-profile-mobile {
        padding-right: 0px;
        display: flex;
        justify-content: space-between;
    }
}
/*
Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

.cke_editable
{
	font-size: 13px;
	line-height: 1.6;

	/* Fix for missing scrollbars with RTL texts. (#10488) */
	word-wrap: break-word;
}

blockquote
{
	font-style: italic;
	font-family: Georgia, Times, "Times New Roman", serif;
	padding: 2px 0;
	border-style: solid;
	border-color: #ccc;
	border-width: 0;
}

.cke_contents_ltr blockquote
{
	padding-left: 20px;
	padding-right: 8px;
	border-left-width: 5px;
}

.cke_contents_rtl blockquote
{
	padding-left: 8px;
	padding-right: 20px;
	border-right-width: 5px;
}


.marker
{
	background-color: Yellow;
}

span[lang]
{
	font-style: italic;
}

figure
{
	text-align: center;
	outline: solid 1px #ccc;
	background: rgba(0,0,0,0.05);
	padding: 10px;
	margin: 10px 20px;
	display: inline-block;
}

figure > figcaption
{
	text-align: center;
	display: block; /* For IE8 */
}

/* Widget Styles */
.code-featured
{
	border: 5px solid red;
}

.math-featured
{
	padding: 20px;
	box-shadow: 0 0 2px rgba(200, 0, 0, 1);
	background-color: rgba(255, 0, 0, 0.05);
	margin: 10px;
}

/*new css added Pintu*/
ul.vList ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ul.vList ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul.vList ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ul.vList ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}



.js-rubricSelectionModal-details ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
.js-rubricSelectionModal-details ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.js-rubricSelectionModal-details ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.js-rubricSelectionModal-details ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

.framework-ul-descrption ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
.framework-ul-descrption ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
.framework-ul-descrption ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.framework-ul-descrption ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}
.ck.ck-editor__main .ck-content {
	min-height: 250px;
	max-height: 250px;
	padding: 0.5em 1em;
}

.modal-create-section .ck.ck-editor__main .ck-content {
	min-height: 150px;
	max-height: 200px;
}

	

	.ck.ck-editor__main .ck-content ul, .ck.ck-editor__main .ck-content ol {
		padding-inline-start: 40px;
	}
body {
	/* We need to assaign this CSS Custom property to the body instead of :root, because of CSS Specificity and codepen stylesheet placement before loaded CKE5 content. */
	--ck-z-default: 100;
	--ck-z-modal: calc( var(--ck-z-default) + 999 );
}

.ck.ck-balloon-panel {
	z-index: 99999 !important;
}


/*
 * CKEditor 5 (v41.2.0) content styles.
 * Generated on Wed, 06 Mar 2024 11:21:36 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

:root {
	--ck-color-image-caption-background: hsl(0, 0%, 97%);
	--ck-color-image-caption-text: hsl(0, 0%, 20%);
	--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
	--ck-color-mention-text: hsl(341, 100%, 30%);
	--ck-color-selector-caption-background: hsl(0, 0%, 97%);
	--ck-color-selector-caption-text: hsl(0, 0%, 20%);
	--ck-highlight-marker-blue: hsl(201, 97%, 72%);
	--ck-highlight-marker-green: hsl(120, 93%, 68%);
	--ck-highlight-marker-pink: hsl(345, 96%, 73%);
	--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
	--ck-highlight-pen-green: hsl(112, 100%, 27%);
	--ck-highlight-pen-red: hsl(0, 85%, 49%);
	--ck-image-style-spacing: 1.5em;
	--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
	--ck-todo-list-checkmark-size: 16px;
}

/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
	table-layout: fixed;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
	overflow: hidden;
}
/* @ckeditor/ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
	overflow-wrap: break-word;
	position: relative;
}
/* @ckeditor/ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
	display: table-caption;
	caption-side: top;
	word-break: break-word;
	text-align: center;
	color: var(--ck-color-selector-caption-text);
	background-color: var(--ck-color-selector-caption-background);
	padding: .6em;
	font-size: .75em;
	outline-offset: -1px;
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content .table {
	margin: 0.9em auto;
	display: table;
}
	/* @ckeditor/ckeditor5-table/theme/table.css */
	.ck-content .table table {
		border-collapse: collapse;
		border-spacing: 0;
		width: 100%;
		height: 100%;
		border: 1px double hsl(0, 0%, 70%);
	}
		/* @ckeditor/ckeditor5-table/theme/table.css */
		.ck-content .table table td,
		.ck-content .table table th {
			min-width: 2em;
			padding: .4em;
			border: 1px solid hsl(0, 0%, 75%);
		}
		/* @ckeditor/ckeditor5-table/theme/table.css */
		.ck-content .table table th {
			font-weight: bold;
			background: hsla(0, 0%, 0%, 5%);
		}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
	text-align: right;
}
/* @ckeditor/ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
	text-align: left;
}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
	position: relative;
	clear: both;
	padding: 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
	/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
	.ck-content .page-break::after {
		content: '';
		position: absolute;
		border-bottom: 2px dashed hsl(0, 0%, 77%);
		width: 100%;
	}
/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
	position: relative;
	z-index: 1;
	padding: .3em .6em;
	display: block;
	text-transform: uppercase;
	border: 1px solid hsl(0, 0%, 77%);
	border-radius: 2px;
	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
	font-size: 0.75em;
	font-weight: bold;
	color: hsl(0, 0%, 20%);
	background: hsl(0, 0%, 100%);
	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* @ckeditor/ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
	clear: both;
	margin: 0.9em 0;
	display: block;
	min-width: 15em;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
	list-style: none;
}
	/* @ckeditor/ckeditor5-list/theme/todolist.css */
	.ck-content .todo-list li {
		position: relative;
		margin-bottom: 5px;
	}
		/* @ckeditor/ckeditor5-list/theme/todolist.css */
		.ck-content .todo-list li .todo-list {
			margin-top: 5px;
		}
	/* @ckeditor/ckeditor5-list/theme/todolist.css */
	.ck-content .todo-list .todo-list__label > input {
		-webkit-appearance: none;
		display: inline-block;
		position: relative;
		width: var(--ck-todo-list-checkmark-size);
		height: var(--ck-todo-list-checkmark-size);
		vertical-align: middle;
		border: 0;
		left: -25px;
		margin-right: -15px;
		right: 0;
		margin-left: 0;
	}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content[dir=rtl] .todo-list .todo-list__label > input {
	left: 0;
	margin-right: 0;
	right: -25px;
	margin-left: -15px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
	display: block;
	position: absolute;
	box-sizing: border-box;
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid hsl(0, 0%, 20%);
	border-radius: 2px;
	transition: 250ms ease-in-out box-shadow;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
	display: block;
	position: absolute;
	box-sizing: content-box;
	pointer-events: none;
	content: '';
	left: calc( var(--ck-todo-list-checkmark-size) / 3 );
	top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
	width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
	height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
	border-style: solid;
	border-color: transparent;
	border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
	transform: rotate(45deg);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
	background: hsl(126, 64%, 41%);
	border-color: hsl(126, 64%, 41%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
	border-color: hsl(0, 0%, 100%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
	vertical-align: middle;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
	position: absolute;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > input,
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
	cursor: pointer;
}
	/* @ckeditor/ckeditor5-list/theme/todolist.css */
	.ck-editor__editable.ck-content .todo-list .todo-list__label > input:hover::before, .ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input:hover::before {
		box-shadow: 0 0 0 5px hsla(0, 0%, 0%, 0.1);
	}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input {
	-webkit-appearance: none;
	display: inline-block;
	position: relative;
	width: var(--ck-todo-list-checkmark-size);
	height: var(--ck-todo-list-checkmark-size);
	vertical-align: middle;
	border: 0;
	left: -25px;
	margin-right: -15px;
	right: 0;
	margin-left: 0;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content[dir=rtl] .todo-list .todo-list__label > span[contenteditable=false] > input {
	left: 0;
	margin-right: 0;
	right: -25px;
	margin-left: -15px;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::before {
	display: block;
	position: absolute;
	box-sizing: border-box;
	content: '';
	width: 100%;
	height: 100%;
	border: 1px solid hsl(0, 0%, 20%);
	border-radius: 2px;
	transition: 250ms ease-in-out box-shadow;
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input::after {
	display: block;
	position: absolute;
	box-sizing: content-box;
	pointer-events: none;
	content: '';
	left: calc( var(--ck-todo-list-checkmark-size) / 3 );
	top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
	width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
	height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
	border-style: solid;
	border-color: transparent;
	border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
	transform: rotate(45deg);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::before {
	background: hsl(126, 64%, 41%);
	border-color: hsl(126, 64%, 41%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label > span[contenteditable=false] > input[checked]::after {
	border-color: hsl(0, 0%, 100%);
}
/* @ckeditor/ckeditor5-list/theme/todolist.css */
.ck-editor__editable.ck-content .todo-list .todo-list__label.todo-list__label_without-description input[type=checkbox] {
	position: absolute;
}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ol {
	list-style-type: decimal;
}
	/* @ckeditor/ckeditor5-list/theme/list.css */
	.ck-content ol ol {
		list-style-type: lower-latin;
	}
		/* @ckeditor/ckeditor5-list/theme/list.css */
		.ck-content ol ol ol {
			list-style-type: lower-roman;
		}
			/* @ckeditor/ckeditor5-list/theme/list.css */
			.ck-content ol ol ol ol {
				list-style-type: upper-latin;
			}
				/* @ckeditor/ckeditor5-list/theme/list.css */
				.ck-content ol ol ol ol ol {
					list-style-type: upper-roman;
				}
/* @ckeditor/ckeditor5-list/theme/list.css */
.ck-content ul {
	list-style-type: disc;
}
	/* @ckeditor/ckeditor5-list/theme/list.css */
	.ck-content ul ul {
		list-style-type: circle;
	}
		/* @ckeditor/ckeditor5-list/theme/list.css */
		.ck-content ul ul ul {
			list-style-type: square;
		}
			/* @ckeditor/ckeditor5-list/theme/list.css */
			.ck-content ul ul ul ul {
				list-style-type: square;
			}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content img.image_resized {
	height: auto;
}
/* @ckeditor/ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
	max-width: 100%;
	display: block;
	box-sizing: border-box;
}
	/* @ckeditor/ckeditor5-image/theme/imageresize.css */
	.ck-content .image.image_resized img {
		width: 100%;
	}
	/* @ckeditor/ckeditor5-image/theme/imageresize.css */
	.ck-content .image.image_resized > figcaption {
		display: block;
	}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image {
	display: table;
	clear: both;
	text-align: center;
	margin: 0.9em auto;
	min-width: 50px;
}
	/* @ckeditor/ckeditor5-image/theme/image.css */
	.ck-content .image img {
		display: block;
		margin: 0 auto;
		max-width: 100%;
		min-width: 100%;
		height: auto;
	}
/* @ckeditor/ckeditor5-image/theme/image.css */
.ck-content .image-inline {
	/*
     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
     * This strange behavior does not happen with inline-flex.
     */
	display: inline-flex;
	max-width: 100%;
	align-items: flex-start;
}
	/* @ckeditor/ckeditor5-image/theme/image.css */
	.ck-content .image-inline picture {
		display: flex;
	}
	/* @ckeditor/ckeditor5-image/theme/image.css */
	.ck-content .image-inline picture,
	.ck-content .image-inline img {
		flex-grow: 1;
		flex-shrink: 1;
		max-width: 100%;
	}
/* @ckeditor/ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
	display: table-caption;
	caption-side: bottom;
	word-break: break-word;
	color: var(--ck-color-image-caption-text);
	background-color: var(--ck-color-image-caption-background);
	padding: .6em;
	font-size: .75em;
	outline-offset: -1px;
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
	background-color: var(--ck-highlight-marker-yellow);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
	background-color: var(--ck-highlight-marker-green);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
	background-color: var(--ck-highlight-marker-pink);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
	background-color: var(--ck-highlight-marker-blue);
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
	color: var(--ck-highlight-pen-red);
	background-color: transparent;
}
/* @ckeditor/ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
	color: var(--ck-highlight-pen-green);
	background-color: transparent;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
	max-width: calc(100% - var(--ck-image-style-spacing));
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
	clear: none;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
	float: right;
	margin-left: var(--ck-image-style-spacing);
	max-width: 50%;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
	float: left;
	margin-right: var(--ck-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
	margin-left: auto;
	margin-right: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
	float: right;
	margin-left: var(--ck-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
	margin-right: 0;
	margin-left: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
	margin-left: 0;
	margin-right: auto;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
	margin-top: 0;
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
	margin-top: var(--ck-inline-image-style-spacing);
	margin-bottom: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
	margin-right: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
	margin-left: var(--ck-inline-image-style-spacing);
}
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
	overflow: hidden;
	padding-right: 1.5em;
	padding-left: 1.5em;
	margin-left: 0;
	margin-right: 0;
	font-style: italic;
	border-left: solid 5px hsl(0, 0%, 80%);
}
/* @ckeditor/ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
	border-left: 0;
	border-right: solid 5px hsl(0, 0%, 80%);
}
/* @ckeditor/ckeditor5-basic-styles/theme/code.css */
.ck-content code {
	background-color: hsla(0, 0%, 78%, 0.3);
	padding: .15em;
	border-radius: 2px;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
	font-size: .7em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
	font-size: .85em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
	font-size: 1.4em;
}
/* @ckeditor/ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
	font-size: 1.8em;
}
/* @ckeditor/ckeditor5-mention/theme/mention.css */
.ck-content .mention {
	background: var(--ck-color-mention-background);
	color: var(--ck-color-mention-text);
}
/* @ckeditor/ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
	margin: 15px 0;
	height: 4px;
	background: hsl(0, 0%, 87%);
	border: 0;
}
/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
	padding: 1em;
	color: hsl(0, 0%, 20.8%);
	background: hsla(0, 0%, 78%, 0.3);
	border: 1px solid hsl(0, 0%, 77%);
	border-radius: 2px;
	text-align: left;
	direction: ltr;
	tab-size: 4;
	white-space: pre-wrap;
	font-style: normal;
	min-width: 200px;
}
	/* @ckeditor/ckeditor5-code-block/theme/codeblock.css */
	.ck-content pre code {
		background: unset;
		padding: 0;
		border-radius: 0;
	}

@media print {
	/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
	.ck-content .page-break {
		padding: 0;
	}
		/* @ckeditor/ckeditor5-page-break/theme/pagebreak.css */
		.ck-content .page-break::after {
			display: none;
		}
}

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  width: 278px;
  max-width: none;
  padding: 0;
  margin-top: 7px;
  top: 100px;
  left: 20px;
  z-index: 3001;
  display: none;
  font-family: arial;
  font-size: 15px;
  line-height: 1em;
}

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc;
}

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
}

.daterangepicker.opensleft:before {
  right: 9px;
}

.daterangepicker.opensleft:after {
  right: 10px;
}

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto;
}

.daterangepicker.opensright:before {
  left: 9px;
}

.daterangepicker.opensright:after {
  left: 10px;
}

.daterangepicker.drop-up {
  margin-top: -7px;
}

.daterangepicker.drop-up:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc;
}

.daterangepicker.drop-up:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff;
}

.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
  float: none;
}

.daterangepicker.single .drp-selected {
  display: none;
}

.daterangepicker.show-calendar .drp-calendar {
  display: block;
}

.daterangepicker.show-calendar .drp-buttons {
  display: block;
}

.daterangepicker.auto-apply .drp-buttons {
  display: none;
}

.daterangepicker .drp-calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .drp-calendar.left {
  padding: 8px 0 8px 8px;
}

/* .daterangepicker .drp-calendar.right {
  padding: 8px;
} */

.daterangepicker .drp-calendar.single .calendar-table {
  border: none;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  color: #fff;
  border: solid black;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  display: inline-block;
  padding: 3px;
}

.daterangepicker .calendar-table .next span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.daterangepicker .calendar-table .prev span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
  width: 32px;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
}

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  border-radius: 4px;
  background-color: #fff;
}

.daterangepicker .calendar-table table {
  width: 100%;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999;
}

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0;
}

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px;
}

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0;
}

.daterangepicker td.start-date.end-date {
  border-radius: 4px;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff;
}

.daterangepicker th.month {
  width: auto;
}

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin: 0 auto;
  background: #eee;
  border: 1px solid #eee;
  padding: 2px;
  outline: 0;
  font-size: 12px;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 4px auto 0 auto;
  line-height: 30px;
  position: relative;
}

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.daterangepicker .drp-buttons {
  clear: both;
  text-align: right;
  padding: 8px;
  border-top: 1px solid #ddd;
  display: none;
  line-height: 12px;
  vertical-align: middle;
}

.daterangepicker .drp-selected {
  display: inline-block;
  font-size: 12px;
  padding-right: 8px;
}

.daterangepicker .drp-buttons .btn {
  margin-left: 8px;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
  border-right: 1px solid #ddd;
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-left: 1px solid #ddd;
}

.daterangepicker .ranges {
  float: none;
  text-align: left;
  margin: 0;
}

.daterangepicker.show-calendar .ranges {
  margin-top: 8px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.daterangepicker .ranges li {
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.daterangepicker .ranges li:hover {
  background-color: #eee;
}

.daterangepicker .ranges li.active {
  background-color: #08c;
  color: #fff;
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto;
  }

  .daterangepicker .ranges ul {
    width: 140px;
  }

  .daterangepicker.single .ranges ul {
    width: 100%;
  }

  .daterangepicker.single .drp-calendar.left {
    clear: none;
  }

  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
    float: left;
  }

  .daterangepicker {
    direction: ltr;
    text-align: left;
  }

  .daterangepicker .drp-calendar.left {
    clear: left;
    margin-right: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .daterangepicker .drp-calendar.right {
    margin-left: 0;
  }

  .daterangepicker .drp-calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .daterangepicker .drp-calendar.left .calendar-table {
    padding-right: 8px;
  }

  .daterangepicker .ranges, .daterangepicker .drp-calendar {
    float: left;
  }
}

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto;
  }

  .daterangepicker .ranges {
    float: left;
  }

  .daterangepicker.rtl .ranges {
    float: right;
  }

  .daterangepicker .drp-calendar.left {
    clear: none !important;
  }
}