@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
}

a, .btn-link { color: #0366d6; }

.btn-primary {
    background-color: #1b6ec2;
    border-color: #1861ac;
    color: #fff;
}

app {
    display: flex;
    flex-direction: column;
    position: relative;
}

.top-row {
    align-items: center;
    display: flex;
    height: 6.4rem;
    background-color: #fff;
}

.main { flex: 1; }

.main .top-row {
    background-color: white;
    border-bottom: 0px solid #d6d5d5;
    justify-content: flex-end;
    z-index: 1;
}

.main .top-row > a, .main .top-row .btn-link {
    margin-left: 1.5rem;
    white-space: nowrap;
}

.main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar {
    background-color: #FBFBFB;
    z-index: 1050;
}

.side_navigation_title {
    font-size: 1rem;
    font-weight: 600;
    color: #171B1E;
    padding-left:32px;
}

.sidebar .navbar-brand {
    font-size: 1.1rem;
}

.sidebar .oi {
    font-size: 1.1rem;
    top: -2px;
    vertical-align: text-top;
    width: 2rem;
}

.sidebar .nav-item:first-of-type { padding-top: 1rem; }

.sidebar .nav-item:last-of-type { padding-bottom: 1rem; }

    .sidebar .nav-item a {
        align-items: center;
        border-radius: 4px;
        color: #717579;
        display: flex;
        height: 3rem;
        line-height: 3rem;
    }
.sidebar .nav-item a.active {
    color: #FF6175;
}

.sidebar .nav-item a:hover {
  color: #FF6175;
}

.navbar-toggler { background-color: rgba(255, 255, 255, 0.1); }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }

.invalid { outline: 1px solid red; }

.validation-message { color: red; }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1200;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

@media (max-width: 11767.98px) {
    /*.main .top-row:not(.auth) { display: none; }*/

    .main .top-row.auth { justify-content: space-between; }

    .main .top-row a, .main .top-row .btn-link { margin-left: 0; }
}

@media (min-width: 1167px) {
    app { flex-direction: row; }

    /*.sidebar {
        height: auto;
        min-height: 100vh;
        min-height: 100vh;
        position: sticky;
        top: 0;
        width: 250px;
    }*/

    .main .top-row {
        position: sticky;
        top: 0;
    }

    .main > div {
        padding-left: 1rem !important;
        padding-right: 1.5rem !important;
        padding-top: 1.1rem;
    }

    .navbar-toggler { display: none; }

    .sidebar .collapse {
         /*Never collapse the sidebar for wide screens*/ 
        display: block;
    }
}

.form {
    display: flex;
    position: relative;
    height:100vh;
}

.form ~ .row .col-6{
    position:absolute;
    top:0;
    right:0;
    padding:50px 50px 0;
}

.card-set-img-icon {
    padding-right: 7px;
}

label.card-set-img-icon {
    margin-top: -7px;
}

span.card-set-img-icon {
    margin-top: -7px;
}

.school-management-screen-send-password-refresh-email {
    width: 20px;
    margin-left: 5px;
}

.form_col_left {
    width: 50%;
    background: url(../assets/login_bg.jpg) no-repeat bottom/cover;
    padding-top: 80px;
}

.form_login_logo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.testing_badge {
    margin-bottom: 3rem;
}

.heading_primary {
    font-size: 2rem;
    color: white;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 30px;
    text-align: center;
}

.signup_slider {
    position: absolute;
    top: 50%;
    width: 45%;
    text-align: center;
}

.signup_slider {
    mix-blend-mode: lighten;
}

.slider {
    position: absolute;
    bottom: 0;
}

.slider_feedback_box {
    position: absolute;
    background-color: white;
    font-size: .9rem;
    color: #102015;
    padding: .8rem .9rem;
    border-radius: 5px;
    top: 0;
    left: 75%;
    width: 75%;
    font-weight: 400;
    line-height: 1.4;
}

.heading_secondary {
    font-size: 1.7rem;
    color: #103457;
    font-weight: 700;
    position: relative;
    margin-right:auto;
}

.email-verify-step {
    color: #051e13;
    background-color: #1987824a;
    border-color: #198754;
    width: 96%;
    /*margin: 0 auto 20px;*/
}

#the_fbl_wdgt_wrap {
    display: none !important;
}

.form_top_row {
    display: flex;
    align-items: center;
    padding: 0 18px;
    flex-wrap: wrap;
}

.sign_up_link {
    font-size: 15px;
    font-weight: 600;
    color: #03014c;
}

.sign_up_link button.e-control.e-btn.e-lib.sign_up_btn {
    color: #5381f8;
    background-color: transparent;
    padding: 0;
    border: 0;
    font-weight: 600;
}

.form_label {
    color: #0c1423;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.form_group{
    margin-bottom:20px;
}

.form_span input.e-control.e-textbox.e-lib.e-input {
    width: 100%;
    border: 1px solid #efeefc !important;
    padding: 1.2rem 3rem;
    display: flex;
    border-radius: 5px;
    font-size: .95rem;
    color: #545454;
    outline: none;
}

.form_span input[type="text"].e-control.e-textbox.e-lib.e-input {
    background: url(../assets/icon_email.svg) 14px center no-repeat;
}

.form_span input[type="password"].e-control.e-textbox.e-lib.e-input {
    background: url(../assets/icon_password.svg) 14px center no-repeat;
}

.form_span input.e-control.e-textbox.e-lib.e-input:focus {
    border: 1px solid #0c1423;
    color: #0c1423;
}

.form_span input.e-control.e-textbox.e-lib.e-input:focus::-webkit-input-placeholder {
    color: #545454;
}

.form_span input.e-control.e-textbox.e-lib.e-input::-webkit-input-placeholder {
    font-size: .95rem;
    color: #858494;
    font-weight: normal;
}

.e-control.e-btn.e-lib.e-primary.input_submit {
    background: linear-gradient(to right, #eb4d4d, #ee9c22, #7ac362, #458ccb);
    padding: 0.9rem 3.8rem;
    font-size: 16px !important;
    color: white;
    font-weight: 500;
    outline: none;
    border: none;
    border-radius: 100px;
    margin: 30px auto 20px;
    width: 70%;
    cursor: pointer;
    transition: all 0.3s;
    background-size: 100%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
.input_submit_login {
    background: linear-gradient(to right, #eb4d4d, #ee9c22, #7ac362, #458ccb);
    padding: 1.8rem 6rem;
    font-size: 1.5rem;
    color: white;
    font-weight: 500;
    outline: none;
    border: none;
    border-radius: 100px;
    margin: 30px auto 20px;
    width: 70%;
    cursor: pointer;
    transition: all 0.3s;
    background-size: 100%;
}
.input_submit_login:hover {
    background-size: 150%;
    transition: all 0.3s;
}
.e-control.e-btn.e-lib.input_cancel {
    background: #76767612;
    padding: 1rem 3rem;
    font-size: 1rem;
    color: #7a7a7a;
    font-weight: 500;
    outline: none;
    border: 2px solid #919191;
    border-radius: 100px;
    width: 70%;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

.e-control.e-btn.e-lib.input_cancel:focus {
    box-shadow: none;
}

.forgot_password {
    font-size: 1rem;
    font-weight: 600;
    color: #6a5ae0;
    text-decoration: none;
    text-align: center;
    display: block;
    margin-bottom: 25px;
}

.language_Selector span.e-ddl.e-lib.e-input-group.e-control-container.e-control-wrapper {
    border-color: #450581;
    background-color: #f4f0ff;
}

.language_Selector {
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
}

.language_Selector span > input::-webkit-input-placeholder {
    color: #450581 !important;
}

.nav-link {
    color: #FF6175;
}

.page-heading-parent {
    display: flex;
    align-items: center;
    margin-bottom:40px;
}

.page-heading {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0C1423;
    margin-bottom:0px;
}

.recommendation-badge {
    font-size: .8rem;
    font-weight: 500;
    color: white;
    background-color: #FF8FA2;
    padding: 6px 10px;
    border-radius: 5px;
    margin-left:10px
}

.subject_card_parent {
    display: flex;
    flex-wrap: wrap;
    width: 40%;
    justify-content: space-between;
}

.subject_card {
    background-color: #ccc;
    padding: 20px 28px;
    display: inline-flex;
    flex-direction: column;
    border-radius: 10px;
    margin-bottom:20px;
    width:47%;
}

.subject_icon {
    display: inline-flex;
    align-items: center;
    margin-bottom:20px;
}

.subject_card_img{
    width:45%;
}

.subjec-card-heading {
    font-size: 20px;
    margin-left: 20px;
    margin-bottom: 0px;
}

.quiz_count {
    font-size: 1rem;
    font-weight:600;
    color:white;
}

.color_green {
    background-color: #88E2CE;
}
.color_purple {
    background-color: #9087E5;
}

.color_pink {
    background-color: #FF6175;
}

.color_yellow {
    background-color: #FFC93D;
}

.color_dark_blue {
    background-color: #5573BD;
}
.color_dark_green {
    background-color: #69960F;
}

/*@media (max-width: 768px){
    .signup_slider .slider_img {
        display: none;
    }

    .main {
        padding-top: 1px;
    }

    .subject_card_parent {
        margin: 0 auto;
        width: 60%;
    }

    .page-heading-parent {
        margin-bottom: 20px;
        margin-top: 74px;
        justify-content: center;
    }

    .page-heading {
        font-size: 1.1rem;
    }

    .sidebar {
        width: 100% !important;
        padding: 0 20px;
        position: initial !important;
    }

    .navbar-brand {
        margin-right: 2.25rem;
    }

    .form_top_row {
        justify-content: center;
        margin-top: 170px;
    }

    .form ~ .row .col-6 {
        padding: 0 10px;
    }

    .heading_primary {
        font-size: 2.2rem;
        width: 65%;
    }

    .heading_secondary {
        margin-right: unset;
    }

    .skillkeep_logo {
        width: 60%;
        margin-bottom: 4.5rem;
    }

    .slider_feedback_box {
        width: 60%;
        left: 45%;
        font-size: 11px;
    }

    .language_Selector {
        left: 25%;
    }

    .slider_img {
        width: 60%;
    }

    .subject_card_img {
        width: 40%;
    }
}*/

@media (max-width: 380px) {
    .form{
        height:120vh;
    }
    .form_col_left {
        width: 100%;
        padding-top: 40px;
    }
    .skillkeep_logo {
        width: 45%;
    }

    .heading_primary{
        display:none;
    }

    .slider{
        display:none;
    }

    .form ~ .row .col-6 {
        width: 100%;
        top:60px;
    }

    .heading_secondary{
        color:#fff;
    }
    .sign_up_link{
        color:#fff;
    }
    .form_label{
        color:#fff;
    }
    .language_Selector {
        bottom: -1%;
    }
    .subject_card_parent{
        width:100%;
    }
    .subject_card {
        padding: 20px 15px;
    }
    .subjec-card-heading {
        margin-left: 11px;
    }
 }

/*New template 17/08/2023*/
@font-face {
    font-family: 'Duplet';
    src: url('fonts/template/Duplet-Regular.woff2') format('woff2'), url('fonts/template/Duplet-Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Duplet';
    src: url('fonts/template/Duplet-Semibold.woff2') format('woff2'), url('fonts/template/Duplet-Semibold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Duplet';
    src: url('fonts/template/Duplet-Bold.woff2') format('woff2'), url('fonts/template/Duplet-Bold.woff') format('woff');
    font-weight: bold;
    font-display: swap;
}

/*html {
    font-size: 62.5%;
}*/

/*--Utilities--*/
.m-20 {
    margin-bottom: 2rem;
}

.m-30 {
    margin-bottom: 3rem;
}

.m-40 {
    margin-bottom: 4rem;
}

.m-50 {
    margin-bottom: 5rem;
}

.w-50 {
    width: 50%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

.pb-10 {
    padding-bottom: 1rem;
}

.font-size-14 {
    font-size: 14px !important;
}

.pb-10px {
    padding-bottom: 10px;
}

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

.pb-0 {
    padding-bottom: 0 !important;
}

.br-bottom {
    border-bottom: 2px solid #EFEEFC;
}

.u-mb-20 {
    margin-bottom: 3rem;
}

body {
    font-family: 'Duplet' !important;
    color: #0C1423;
    line-height: 1.5;
    background-color: #F6F6F7;
}
.e-control {
    font-family: 'Duplet' !important;
}
.top-columns-parent {
    display: flex;
}
.content {
    width: 100%;
}
.sidenav {
    width: 21%;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    z-index: 2;
    min-width: 275px;
    background-color: #FBFBFB;
    max-width: 500px;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0px;
}

.main-logo {
    width: 77%;
    max-width: 180px;
}

.app-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    padding: 1rem;
}

#nav-menu-container {
/*    z-index: 0;*/
}

.nav-menu-container-opened {
    position: fixed;
    width: 100%;
    z-index: 9 !important;
    height: 100%;
}

.top-nav {
    width: 100%;
    padding: 0;
    background-color: transparent;
    margin-bottom: 20px;
}

.page-heading {
    color: #0C1423;
    font-family: Duplet;
    font-size: 25px;
    font-weight: 600;
    margin-right: auto;
}

.search-form {
    flex-basis: 70%;
    border-radius: 20px;
    border: 1px solid #eee;
    padding: 0 20px;
}

.form-search-input {
    padding: 14px 5px;
    width: 90%;
    outline: none;
    border: none;
    border-radius: 20px;
    color: #0C1423;
    font-size: 15px;
}

.form-search-input::-webkit-input-placeholder {
    font-size: 15px;
    color: #717579;
}

.search-btn {
    background-color: transparent;
    border: none;
    outline: none;
}

.search-btn-img {
    width: 23px;
}

.icon-update,
.icon-notification {
    width: 25px;
}

.user-update-box,
.user-notification-box {
    position: relative;
    text-decoration: none;
}

.user-notification-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    top: -10px;
    right: -9px;
}

.user-notification-circle--green {
    background-color: #1EAE4B;
}

.user-notification-circle--red {
    background-color: #FD5353;
}

.w-60 {
    width: 60%;
}

.user-profile-box {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    position: relative;
    width: 90%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 0%;
}

.w-75 {
    width: 75%;
}

.nav-heading {
    color: #171B1E;
    font-size: 16px;
    font-weight: 700;
    margin: 2rem 0 1.2rem 1.5rem;
    padding: 12px 15px;
    padding-left: 0;
}

.user-nav {
    padding-left: 4%;
}

.user-nav-list {
    list-style: none;
    margin-bottom: 15px;
}

.user-management-related-prod-acc-badge {
    background-color: #e4e4e4;
    margin-left: 5px;
    color: #676767;
}

.dashboard-icon {
    width: 25px;
    height: 25px;
    margin-right: 20px;
}

.email-verify-btn:hover {
    color: white;
}

.dash-nav-item-icon {
    margin-left: 10px;
    margin-top: -5px;
    transform: rotate(-180deg);
    transition: all .2s;
}

.user-nav .accordion-item.collapsed .dash-nav-item-icon {
    transform: rotate(0deg);
    transition: all .2s;
}

.user-nav .accordion-item .nav-heading {
    cursor: pointer;
}

.e-toolbar-item.e-overlay {
    background: white !important;
}

.e-toolbar-item .e-control.e-btn.e-lib.e-tbar-btn.e-tbtn-txt {
    background: white;
}

.user-nav-list-link {
    color: #717579;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 10px 0 10px 1.5rem;
    display: block;
    transition: all .2s;
}

.user-list-scrollable-bar {
    max-height: 500px;
    overflow-y: auto;
}

.user-nav-list-link:hover {
    color: #FF6175;
}

#productAccountManagementUsersListModalComponent {
    max-width: 650px;
}

.user-nav-list-link:hover .dashboard-icon {
    filter: invert(45%) sepia(66%) saturate(1437%) hue-rotate(320deg) brightness(109%) contrast(101%);
    transition: filter .2s;
}

.user-profile-btn {
    width: 80%;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 10px 13px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    min-height: 63px;
    padding-top: 5px;
}

.user-profile-info {
    display: flex;
    align-items: center;
}

.user-role-type {
    font-size: 12px;
    color: #EE9C22;
    margin-left: 5px;
    position: absolute;
    bottom: 6px;
    margin-left: 0;
}
    
.user-role-type::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #EE9C22;
    border-radius: 50%;
    margin-right: 5px;
}

.user-role {
    color: #414144;
    text-align: right;
    font-size: 11px;
    border-radius: 100px;
    background: #E5E7EB;
    padding: 3px 9px;
    font-weight: 600;
    margin-left: 9px;
}

.user-profile-img {
    width: 33px;
    margin-right: 10px;
}

.user-name {
    color: #171B1E;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
/*    width: 124px;*/
}

.import-img-from-json-preview {
    width: 30px;
    height: 30px;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #959595;
    margin-bottom: -1px;
}

.user-role {
    color: #525252;
    text-align: left;
    font-size: 12px;
    border-radius: 3px;
    background: #D9D9D9;
    padding: 4px 4px;
    margin-top: 2px;
    font-weight: 600;
    width: 54px;
    margin-bottom: 0;
    text-align: center;
}

.impersonating-user-profile {
    background: red;
    color: white;
}

.language-btn {
    border-radius: 10px;
    border: 1px solid #FF6175;
    width: 70%;
    padding: 15px 10px;
    background-color: white;
    color: #FF6175;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}

.copyrights {
    margin: auto;
    margin-top: 3rem;
    padding-bottom: 2rem;
}

.footer-text {
    color: #171B1E;
    font-size: 14px;
    font-weight: 600;
}

.rights-reserved-text {
    color: #717579;
    font-size: 14px;
    font-weight: 600;
}

main {
    padding: 1rem;
}

.screen-heading {
    margin-bottom: 3rem;
}

.highlighter {
    color: #FF6175;
}

.heading-secondary {
    color: #0C1423;
    font-size: 30px;
    font-weight: 300;
}

.sub-heading {
    color: #717579;
    font-size: 14px;
    font-weight: 300;
}

.user-setsa-box {
    margin-top: 5rem;
}

.recent-card-heading {
    color: #0C1423;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
}

.user-directory-add-your-sets-text .file-upload-instruction {
    width: 30%;
}

#viewStreakModal_dialog-content {
    padding: 0;
    margin: auto;
    min-width: 392px;
}

.add-new-set-btn {
    padding: 48px 30px;
    border: none;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgb(174 174 174 / 50%);
    font-size: 14px;
    color: #203B81;
    font-weight: 600;
    border: 1px solid #EFEFEF;
}

.plus-icon {
    width: 30px;
}

.nav-menu-selected-child-name {
    font-weight: 100;
    font-size: 13px;
    padding-left: 5px;
    color: red;
    display: inline-block;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.card-set {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px rgba(239, 241, 246, 0.8);
    padding: 15px;
    transition: all .2s;
    width: 100%;
    max-width: 415px;
}

.card-set:hover {
    box-shadow: 0px 0px 20px 0px rgb(219 219 219);
}

.card-set-with-b {
    box-shadow: 0px 0px 20px 0px rgba(239, 241, 246, 0.8);
    border: 0.5px solid #C4C4C4;
}

.subject-catgories {
    color: #858585;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

#dailyGoalTodayProgressModal_dialog-content {
    margin: 0 !important;
}

.font-size-16 {
    font-size: 16px !important;
}

.crumbs-img {
    margin: 0px 5px;
}

.set-card-heading {
    color: #0C1423;
    font-size: 18px;
}

.set-card-info {
    color: #717579;
    font-size: 14px;
    margin-left: 1rem;
}

.set-card-buttons {
    border-top: 1.5px solid #F3F3F3;
    padding: 15px 0px 2px 0px;
}

.set-btn {
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    padding: 0px 25px;
}

.set-btn + .set-btn {
    border-left: 1px solid #ccc;
}

.btn-detail {
    color: #EE9C22;
}

.btn-detail:hover {
    color: #e19420;
}

.btn-Add {
    color: #FF6175;
}

.calender-box {
    background-color: white;
    padding: 20px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    min-width: 440px;
}

.calender-date {
    color: #242B42;
    font-size: 25px;
    font-weight: 600;
}

.calender-filter {
    border-radius: 50px;
    background: #F6F7FA;
    padding: 5px 10px;
}

.filter-btn {
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    color: #7E8CA0;
    padding: 10px 30px;
}

.filter-btn.active {
    background-color: white;
    color: #1EAE4B;
}

.calender-current-day {
    color: #C4C4C4;
    font-size: 14px;
}

.calender-current-date {
    color: #242B42;
    font-size: 14px;
}

.entry-date {
    color: #717579;
    font-size: 15px;
    font-weight: 600;
}

.entry-date::after {
    content: '';
    height: 2px;
    width: 84%;
    display: inline-block;
    border-bottom: 1px dashed #0C1423;
}

.achievement-badge-box {
    position: relative;
}

.achievement {
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0px 4px 6px 0px rgba(62, 73, 84, 0.04);
    padding: 30px 20px;
    min-width: 440px;
}

.achievement-badge-img,
.achievement-badge-lock {
    width: 120px;
}

.achievement-badge-lock {
    top: 0;
    position: absolute;
}

.achievement-title {
    color: #314D82;
    font-size: 15px;
    font-weight: 600;
}

.recommended-box {
    margin-top: 4rem;
    /*width: 90%;*/
}

.btn-view-all {
    color: #717579;
    text-decoration: none;
    font-size: 16px;
}

.view-img {
    margin-left: 5px;
}

.recommended-topic {
    padding: 15px;
    display: flex;
    text-decoration: none;
    font-size: 18px;
    border-radius: 16px;
    box-shadow: 0px 4px 6px 0px rgba(62, 73, 84, 0.04);
    align-items: center;
    color: white;
}

.recommended-topic-img {
    margin-right: 1rem;
}

.topic-maths {
    background: #88E2CE;
}

.topic-art {
    background: #FF6175;
}

.topic-history {
    background: #5573BD;
}

.topic-science {
    background: #9087E5;
}

.topic-tech {
    background: #FFC93D;
}

.topic-sports {
    background: #8FC9FF;
}

.card-status-badge {
    display: inline-flex;
    padding: 3px 16px;
    justify-content: center;
    align-items: center;
    color: #147131;
    font-size: 11px;
}

.badge-active {
    border-radius: 100px;
    border: 0.5px solid #1EAE4B;
    background: #EAFFE3;
    margin-right: 10px;
}

.view-streak-calendar-score {
    font-size: 10px;
    color: inherit !important;
    top: 3px;
    position: relative;
}

.view-streak-calendar-day {
    position: absolute;
    font-size: 18px;
    top: -18%;
    left: 33%;
    color: inherit !important;
}

.view-streak-calendar-day-one-digit {
    position: absolute;
    font-size: 18px;
    top: -18%;
    left: 42%;
    color: inherit !important;
}

*.e-bigger .e-calendar .e-content span.e-day {
    height: 44px !important;
    width: 44px !important;
}

.view-streak-calendar-streak {
    font-size: 10px;
    position: absolute;
    left: 45%;
    bottom: -25%;
    color: inherit !important;
}

.study-streak-label {
    font-size: 13.7px;
    font-weight: 100;
    position: absolute;
    margin-top: 5px;
}

.badge-inactive {
    border-radius: 100px;
    border: 0.5px solid #EB4D4D;
    background: #FFE0E4;
    color: #EB4D4D;
    padding-left: 12px;
    padding-right: 12px;
    margin-right: 3%;
}

.card-more-options {
    list-style: none;
}

.card-more-options .dropdown-toggle::after {
    display: none;
}

.user-directory-card-more-options-link {
    border-radius: 50%;
    width: 33px;
    height: 33px;
    display: flex;
}

.user-directory-card-more-options-link:hover {
    /*background-color: #ccc;*/
}

.card-more-options-link {
    border-radius: 50%;
    width: 33px;
    height: 33px;
    display: flex;
}

.card-more-options-link:hover {
    background-color: #ccc;
}

.user-settings-nav {
    border-radius: 5px;
    border: 2px solid #EFEEFC;
    background: #FFF;
    padding: 15px 0;
}

.user-settings-nav-item {
    list-style-type: none;
}

.user-settings-nav-link {
    text-decoration: none;
    color: #0C1423;
    font-size: 16px;
    padding: 15px 25px;
    width: 100%;
}

.user-settings-nav-link.active {
    background: #F0F0F0;
}

/*.user-settings-nav-img {
    margin-right: 1.5rem;
}*/

.user-settings-fields {
    border-radius: 5px;
    border: 2px solid #EFEEFC;
    background: #FFF;
    padding: 15px 30px;
}

.user-settings-input-field-group {
    flex-basis: 70%;
}

.user-settings-field-row {
    padding-bottom: 3rem;
    padding-top: 3rem;
    border-bottom: 2px solid #EFEEFC;
}

.user-settings-field-verify-email-label {
    font-size: 15px !important;
    color: dimgray !important;
}

.user-settings-field-row-sm {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
}

.user-settings-field-title {
    color: #0C1423;
    font-size: 18px;
    font-family: Duplet !important;
}

.user-settings-field-input-field {
    padding: 10px 10px;
    background-color: #FFFFFF;
    font-size: 16px;
}

.user-settings-field-input-field::-webkit-input-placeholder {
    font-size: 15px;
    color: #858494;
}

.input-alert-message {
    font-size: 14px;
    color: #FF6175;
}

.btn-save {
    display: block !important;
    border-radius: 100px !important;
    background: linear-gradient(90deg, #EB4D4D 0%, #EE9C22 29.89%, #7AC362 64.53%, #458CCB 100%) !important;
    font-size: 14px !important;
    color: white;
    border: none !important;
    padding: 15px 40px;
}
/*Override primary button to view as .btn-save*/
.e-control.e-btn.e-lib.e-primary {
    border-radius: 100px !important;
    background: linear-gradient(90deg, #EB4D4D 0%, #EE9C22 29.89%, #7AC362 64.53%, #458CCB 100%) !important;
    font-size: 14px !important;
    color: white;
    border: none !important;
    padding: 15px 40px;
}
.e-control.e-btn.e-lib {
    border-radius: 100px !important;
    background: #CACACA;
    font-size: 14px !important;
    color: white;
    /*border: none !important;*/
    padding: 15px 40px;
}
.btn-cancel {
    display: block !important;
    font-size: 14px !important;
    color: #F66 !important;
    border: none !important;
    background-color: transparent !important;
}

.btn-save.btn-enable {
    background: #EB4D4D !important;
    padding: 15px 70px !important;
}

.btn-save.btn-disable {
    background: #CACACA !important;
    padding: 15px 70px !important;
}

.btn-disable-my-profile-security {
    background: #D52027 !important;
    font-weight: 600 !important;
}

.btn-disable-my-profile-security:hover {
    background: #f76060 !important;
}

.btn-reset-my-profile-security:hover {
    color: #c30909 !important;
    border-color: #c30909 !important;
}

.btn-reset-my-profile-security {
        color: #EB4D4D !important;
        background: transparent !important;
        border-style: solid !important;
        border-width: 1px !important;
        border-color: #EB4D4D !important;
        font-weight: 600 !important;
        padding-left: 27px !important;
        padding-right: 27px !important;
    }

.min-w-208 {
    min-width: 208px !important;
}

.btn-save.btn-outline {
    background: transparent !important;
    border: 1px solid #EB4D4D !important;
    padding: 15px 50px !important;
    color: #D52027 !important;
}

.user-settings-account-name {
    font-size: 16px;
    color: #858494;
}

.security-setting-row {
    padding-bottom: 3rem;
    padding-top: 1rem;
}

.security-setting-heading {
    font-size: 16px;
    color: #0C1423;
}

.security-setting-instruction {
    font-size: 13px;
    color: #404040;
}

.security-setting-steps {
    list-style-type: none;
    font-size: 15px;
    color: #404040;
}

.security-step-count {
    font-size: 20px;
    color: #23262F;
    padding-right: 10px;
}

.authenticator-links {
    border-right: 2px solid #D9D9D9;
    padding-right: 10px;
    padding-left: 10px;
}

.authenticator-links:last-child {
    border-right: 0px;
}

.security-key {
    border-radius: 5px;
    background: #D6C9F5;
    color: #450581;
    font-size: 13px;
    padding: 10px;
    font-weight: 500;
}

.code-box {
    border-radius: 10px;
    border: 1px solid #CECECE;
    padding: 10px 20px;
    position: relative;
}

.copy-btn {
    border: none;
    background-color: transparent;
    position: absolute;
    right: 15px;
    top: 15px;
}

.p-10 {
    padding: 10px;
}

.pv-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.cardset-quick-view-image {
    width: 20px;
    margin-right: 10px;
    cursor: help;
}

#cardset-quick-view {
    padding-bottom: 30px;
}

.cardset-quick-view-row {
    height: 25px;
}

.inline-block {
    display: inline-block !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

#school-users-management-grid {
    margin-top: 0 !important;
    /*min-width: 1000px;*/
}

.sc-table-filter {
    border-radius: 5px;
    padding: 18px;
    width: 98%;
    border: 1px solid #E9E9E9;
    margin-bottom: 20px;
    position: absolute;
    top: 60px;
    z-index: 9999;
}

.sc-table-filter__header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.sc-table-filter__title {
    font-size: 16px;
    color: #525252;
    margin-right: 20px;
    margin-bottom: 0;
}

.sc-table-filter__controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sc-table-filter__button {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #EAEAEA;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: #353535;
    gap: 6px;
    transition: all 0.2s ease;
}

    .sc-table-filter__button:hover {
        background-color: #f8f8f8;
    }

.sc-table-filter__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-table-filter__button--active {
    border-color: #EE9C22;
}

.sc-table-filter__button-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-table-filter__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.sc-table-filter__tag {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 100px;
    font-size: 13px;
    gap: 6px;
}

.sc-table-filter__tag--blue {
    background: rgba(69, 140, 203, 0.10);
    color: #458CCB;
}

.sc-table-filter__tag--purple {
    background: #EFEEFC;
    color: #9C6CDA;
}

.sc-table-filter__tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .sc-table-filter__tag-remove svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.sc-table-filter__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(50, 77, 171, 0.10);
    margin-top: 4px;
    z-index: 100;
    display: none;
    background-color: white;
}

.sc-table-filter__dropdown--active {
    display: block;
}

.sc-table-filter__search {
    display: flex;
    border-bottom: 1.5px solid #F6F6F7;
    padding: 10px 15px;
}

.sc-table-filter__search-input {
    border: transparent;
    font-size: 14px;
    padding: 0;
    margin-bottom: 0;
}

.sc-table-filter__options {
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding-left: 0;
}

.sc-table-filter__option {
    padding: 8px 12px;
    cursor: auto;
    display: flex;
    align-items: center;
}

    .sc-table-filter__option:hover {
        background-color: #f5f5f5;
    }


.sc-table-filter__checkbox-input {
    height: 15px;
    width: 15px;
    cursor: pointer;
}

    #school-users-management-grid th {
        min-width: 150px;
    }

    #school-users-management-grid td {
        min-width: 150px;
    }

    #school-users-management-grid tr td:first-of-type {
        min-width: 50px;
    }

    #school-users-management-grid tr th:first-of-type {
        min-width: 50px;
    }

    #school-users-management-grid #Grid_header_table {
        width: inherit !important;
    }

#school-users-management-grid #Grid_content_table {
    width: inherit !important;
}

#school-users-management-grid .e-gridcontent .e-content .e-table .e-row.e-altrow .e-rowcell {
    padding: 6px 8px !important;
}

#school-users-management-grid #Grid_toolbarItems {
    margin-top: 0px;
    margin-bottom: 130px;
}

#school-users-management-grid #Grid_toolbarItems #Grid_search {
    top: -90px;
}

#school-users-management-grid .e-toolbar-item button {
    background: transparent !important;
}

#school-users-management-grid .e-toolbar-item {
    background: transparent !important;
}

#school-users-management-grid .e-headercelldiv.e-headerchkcelldiv {
    padding-left: 6px !important;
}

.school-users-management-class-group-badge {
    font-size: 12px;
    font-weight: 100;
    padding: 7px;
    border-style: solid;
    border-width: 1px;
}

.authentication-codes {
    font-size: 15px;
    width: 20%;
    line-height: 2;
}

.copy-btn:hover .icon-copy {
    stroke: #ababab;
}

.security-setting-detail-highlighter {
    color: #147131;
}

.app-update-notification {
    padding-left:10px;
    padding-right:10px;
}

.user-notification {
    padding-left: 10px;
    padding-right: 10px;
}

.set-card-creator-heading {
    font-size: .84rem;
    text-align: right !important;
    width: 100%;
}

.e-dropdown-menu{
    border:0 !important;
}

.product-account-incorrect-data {
    background-color: #ffdede;
}

.user-profile-box.dropdown .dropdown-menu {
    transform: none !important;
    inset: unset !important;
    top: 89px !important;
}

.user-profile-dropdown-box {
    color: #A4A4A4 !important;
    background: white !important;
    border: white !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.e-tab .e-tab-header {
    text-decoration: none;
    color: #0C1423;
    font-size: 16px;
    padding: 15px 25px;
    padding-top: 0;
    width: 100%;
    align-items: center !important;
}
.e-tab-wrap {
    height: 70px !important;
}
.e-text-wrap {
    transform: translateY(50%);
}
.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #F0F0F0 !important;
    border: 0 !important;
}
.e-tab .e-tab-header .e-toolbar-item {
    background: #FFFFFF !important;
    border: 0 !important;
}
.e-ileft {
    height: 70px !important;
}
.cycle_BMX::before {
    content: "\e736";
}
.e-tab .e-tab-header.e-vertical::before { border: 0 !important; }

.e-tab .e-tab-header.e-vertical {
    width: 270px !important;
    max-width: 270px !important;
    border-radius: 5px !important;
    border: 2px solid #EFEEFC !important;
    z-index: 1;
    padding: 0;
    margin-right: 2%;
}
.e-toolbar-items {
    width: 100%;
}

.e-tab-text {
    font-family: 'Duplet' !important;
}
.sf-tab-custom-body-content-template {
    background-color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom:20px;
    min-height: 280px;
    border: 2px solid #EFEEFC;
    border-radius: 5px;
}

.navigation-checkbox {
    display: none;
}

.navigation-button {
    position: absolute;
    top: 34px;
    left: 20px;
    cursor: pointer;
    z-index: 1;
}

.navigation-close-btn {
    cursor: pointer;
    right: -20px;
    top: 15px;
    position: absolute;
}

.question-title {
    font-size: 16px;
    color: #2C343A;
    position: relative;
    margin-right: 30px;
}

.question-description {
    font-size: 16px;
    color: #2C343A;
    position: relative;
}

.question-title::after {
    content: "*";
    font-size: 16px;
    color: #D52027;
    font-weight: 500;
    position: absolute;
    top: 0;
}

.question-card-input {
    border-radius: 5px;
    border: 0.5px solid #C4C4C4;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    padding: 13px 20px;
    width: 90%;
    font-family: "Duplet";
}

.question-card-input::-webkit-input-placeholder {
    font-size: 13px;
    color: #C3CCCE;
}

.curriculum-box {
    border-radius: 100px;
    border: 1px solid #DFE7FF;
    background: #FAFBFF;
    padding: 15px 10px 10px 10px;
    overflow-x: scroll;
    white-space: nowrap;
    width: 75%;
}

.curriculum-box::-webkit-scrollbar {
    width: 50px;
    height: 10px;
}


.curriculum-btn {
    border-radius: 100px;
    border: 1px solid #DFE7FF;
    background: #FAFBFF;
    padding: 6px 12px 6px 6px;
    margin-right: 1.5rem;
    display: inline-flex;
    align-items: center;
}

.curriculum-country-name {
    font-size: 15px;
    color: #0C1423;
    margin-left: 1rem;
}

/* -- Curriculum Country Color -- */

.shade-yellow {
    background-color: #FFF39A;
}

.shade-orange {
    background-color: #EBBBA6;
}

.shade-orange-yellow {
    background-color: #FAC312;
}

.shade-green {
    background-color: #7AC362;
}

.curriculum-active {
    background-color: #CBD8FF;
    border-width: 1px;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    border-color: white;
}

.subject-search-box {
    border-radius: 10px;
    background: #FFF;
    padding: 18px 25px;
    width: 78%;
}

.subject-search-input {
    background-color: transparent;
    padding-left: 5px;
    border: none;
    width: 95%;
    font-size: 16px;
    font-family: "Duplet";
    color: #717579;
}

.subject-search-input:focus {
    border: none;
    outline: none;
}

.subject-search-input::-webkit-input-placeholder {
    font-size: 15px;
    color: #717579;
}

.subject-search-btn {
    width: 80%;
}

.recommended-subject-box {
    align-items: start;
    flex-wrap: wrap;
    width: 90%;
}

.recommended-subject {
    border-radius: 2px;
    border: 1.7px solid #BFC9CE;
    text-decoration: none;
    font-size: 13px;
    color: #0C1423;
    padding: 8px 15px;
    font-weight: 600;
    margin-right: 20px;
    margin-bottom: 15px;
    transition: all .3s;
}

.recommended-subject:hover {
    background-color: #ECECEC;
    transition: all .3s;
}

.password_checker_item {
    font-size: 15px !important;
    font-family: Duplet !important;
}

.min-w-180 {
    min-width: 180px;
}

.mr-10{
    margin-right:10%
}

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

.pt-10 {
    padding-top: 1rem;
}

.pt-8px {
    padding-top: 8px;
}

.pr-0 {
    padding-right: 0 !important;
}

.chart-custom-font text {
    font-family: 'Duplet' !important;
}

.class-stats-select-options {
    margin-right: 20px;
    width: 110px !important;
}

.myprofile-danger-zone-title {
    font-size: 25px;
    color: #EB4D4D;
    margin-top: 20px;
}

.myprofile-danger-zone-text {
    font-size: 16px;
}

.myprofile-danger-zone-li-text{
    font-size: 16px;
}

/*Used for the Create Request Button in: MyProfile/Privacy/Download a copy of my information*/
.row.align-items-center.pt-2 > .col-10 > .e-control.e-btn.e-lib.e-primary {
    float: right;
}

.e-footer-content > .e-control.e-btn.e-lib.e-flat.e-primary{
    float: right;
}

h4 {
    margin-bottom: 0;
}

.u-width-15 {
    width: 15%;
}

.badge-grey {
    background: #ECECEC;
    color: #909090 !important;
    border: 0.5px solid #909090;
    border-radius: 100px;
}

.curriculum-box-library {
    border: none;
    background: transparent;
    width: 86%;
    border-radius: 0px;
    padding: 0px;
}

.card-set-row {
    margin-bottom: 17px;
}

.card-set-box {
    border-radius: 5px;
    border: 0.5px solid #C4C4C4;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    margin-top: 10px;
    width: 85%;
}

.card-set-heading {
    color: #525252;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 0px;
}

.new-card-set-box {
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    padding: 20px 17px;
    border-radius: 10px;
}

.card-question-label {
    color: #717579;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0px;
}

.fomatting-icon {
    margin-right: 15px;
    cursor: pointer;
}

.add-image-text {
    margin-bottom: 0;
    font-size: 14px;
    color: #C4C4C4;
    margin-left: 0;
}

.card-set-input {
    border-radius: 5px;
    border: 1px solid #9D9D9D;
    padding: 15px 10px;
    width: 100%;
    font-size: 16px;
    color: #6A6A6A;
}

    .card-set-input::-webkit-input-placeholder {
        font-size: 14px;
        color: #C4C4C4;
    }

    .card-set-input:focus {
        border: 1px solid #323232;
        outline: none;
    }

    .card-set-input.car-set-textarea {
        min-height: 150px;
    }

.new-card-set-box.new-add-card {
    height: 342px;
    padding: 0px;
}

.mt-15 {
    margin-top: 15px;
}
.new-add-card-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(250, 195, 18, 0.20) 0%, rgba(238, 156, 34, 0.20) 100%);
    outline: none;
    border: none;
    font-size: 16px;
    color: #203B81;
    font-weight: 600;
}


.user-set-search {
    padding: 0 15px;
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: 100px;
    width: 80%;
    max-width: 500px;
    min-width: 200px;
    margin: auto;
}

.user-set-search-input {
    background-color: transparent;
    width: 95%;
    height: 100%;
    padding: 10px;
    border: none;
    font-size: 16px;
    color: #717579;
}

    .user-set-search-input::-webkit-input-placeholder {
        font-size: 15px;
        color: #717579;
        font-weight: 600;
    }

    .user-set-search-input:focus {
        border: none;
        outline: none;
    }

.user-set-filter-btn {
    background-color: transparent;
    width: 95%;
    height: 100%;
    padding: 20px 20px;
    border: none;
    font-size: 16px;
    color: #717579;
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: 10px;
    white-space: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sets-parent {
    margin-bottom: 50px;
}

.my-sets-time-heading {
    color: #A5A5A5;
    font-size: 16px;
    min-width: 150px;
}

.my-sets-time-heading::after {
    width: 63px;
    height: 1px;
    background-color: #A5A5A5;
    content: '';
    display: inline-block;
    margin-left: 10px;
}

.mr-30 {
    margin-right: 30px;
}

.email-verify-box {
    padding: 10px 0;
    background: rgba(255, 97, 117, 0.20);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 2%;
    margin-bottom: 2%;
}

.e-verify-close {
    position: relative;
    right: -4%;
    font-size: 12px;
}

.verify-message {
    font-size: 16px;
    color: #D52027;
    margin-right: 16px;
}

.verify-message svg {
    margin-right: 5px;
    margin-top: -5px;
}

.verify-msg-er-icon .tooltip-arrow {
    display: none;
}

.verify-msg-er-icon .tooltip-inner {
    background-color: white;
    color: #000000;
    font-size: 15px;
    font-weight: 400;
    background-blend-mode: normal;
    max-width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.email-verify-btn {
    color: white;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 2px;
    text-decoration: none;
}

.v-ls-btn {
    background-color: #FF6175;
    margin-right: 15px;
    cursor: pointer;
}

.v-ls-btn:hover {
    background-color: #ff3a54;
}

.v-ls-next-btn {
    background-color: #B51B21;
}

.v-ls-next-btn:hover {
    background-color: #891519;
}

.new-set-popup-dialog {
    max-width: 100%;
}

.new-set-popup-content {
    padding: 35px 25px;
}

.new-set-popup-content-no-border {
    padding: 35px 25px;
}

.new-set-popup-title {
    font-size: 19px;
    color: #2C343A;
    font-weight: 600;
}

.popup-description {
    font-size: 12px;
    color: #888;
    margin-bottom: 40px;
}

.new-set-popup-header {
    border-bottom: 0px;
    padding: 0px;
}

.new-set-popup-body {
    border-bottom: 0px;
    padding: 0px;
}

.btn-new-set {
    padding: 12px 10%;
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
    color: #2C343A;
    text-decoration: none;
    font-weight: 600;
}


.library-dialog {
    max-width: 1200px;
}

.library-content {
    padding: 35px 25px;
}

.library-body {
    padding: 0;
    margin-top: 10px;
}

.library-subjects {
    width: 31%;
    max-height: 450px;
    overflow-y: scroll;
    padding: 0px 0 0 10px;
    direction: rtl;
    display: inline-block;
}

.library-subjects-sets {
    width: 67%;
    display: inline-block;
    vertical-align: top;
    border-left: 3px solid #F6F6F6;
    padding-left: 10px;
    margin-left: 10px;
    max-height: 460px;
    overflow-y: auto;
    position: relative;
}

.un-select-subject-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 10px;
    background: #F8F8F8;
    top: 0;
    left: 0;
}

.un-select-sub-inner-info {
    color: #525252;
    font-size: 15px;
    display: block;
    margin-top: 10px;
}

.sys-lib-accor {
    direction: ltr;
}

.library-subjects-sets::-webkit-scrollbar {
    background-color: transparent;
}

.library-subjects::-webkit-scrollbar,
.set-questions-box::-webkit-scrollbar,
.final-sorted-questions-tab::-webkit-scrollbar {
    width: 3px;
    background-color: #F9F9F9;
    border-radius: 100px;
}

.library-subjects::-webkit-scrollbar-thumb,
.set-questions-box::-webkit-scrollbar-thumb,
.final-sorted-questions-tab::-webkit-scrollbar-thumb {
    width: 3px;
    background-color: #D9D9D9;
    border-radius: 100px;
    height: 100px;
}

.top-level-sub-item {
    border-radius: 5px;
    border: 0.5px solid #C4C4C4;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    padding: 10px 15px 0px;
    margin-bottom: 5px;
}

.library-subjects-btn {
    font-size: 16px;
    color: #2C343A;
}

.library-topic-btn {
    font-size: 17px;
    color: #717579;
}

.library-subjects-btn:focus {
    background-color: transparent;
    box-shadow: none;
}

.library-subjects .accordion-button::after {
    order: -1;
    margin-left: 0;
    margin-right: 7px;
}

.top-sub-btn:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.64592 4.64592C1.69236 4.59935 1.74754 4.56241 1.80828 4.5372C1.86903 4.512 1.93415 4.49902 1.99992 4.49902C2.06568 4.49902 2.13081 4.512 2.19155 4.5372C2.2523 4.56241 2.30747 4.59935 2.35392 4.64592L7.99992 10.2929L13.6459 4.64592C13.6924 4.59943 13.7476 4.56255 13.8083 4.53739C13.8691 4.51223 13.9342 4.49929 13.9999 4.49929C14.0657 4.49929 14.1308 4.51223 14.1915 4.53739C14.2522 4.56255 14.3074 4.59943 14.3539 4.64592C14.4004 4.6924 14.4373 4.74759 14.4624 4.80833C14.4876 4.86907 14.5005 4.93417 14.5005 4.99992C14.5005 5.06566 14.4876 5.13076 14.4624 5.1915C14.4373 5.25224 14.4004 5.30743 14.3539 5.35392L8.35392 11.3539C8.30747 11.4005 8.2523 11.4374 8.19155 11.4626C8.13081 11.4878 8.06568 11.5008 7.99992 11.5008C7.93415 11.5008 7.86903 11.4878 7.80828 11.4626C7.74754 11.4374 7.69236 11.4005 7.64592 11.3539L1.64592 5.35392C1.59935 5.30747 1.56241 5.2523 1.5372 5.19155C1.512 5.13081 1.49902 5.06568 1.49902 4.99992C1.49902 4.93415 1.512 4.86903 1.5372 4.80828C1.56241 4.74754 1.59935 4.69236 1.64592 4.64592Z" fill="%232C343A"/></svg>');
}

.library-subjects-body {
    padding-right: 0px;
    padding-top: 2px;
}

.topic-badge {
    margin-left: auto;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
}

.level-count {
    font-size: 13px;
    margin-left: auto;
}

.top-level-btn {
    font-size: 16px;
    color: #8D929A;
}

.topic-sets {
    font-size: 14px;
    color: #8D929A;
}

.topic-set-btn {
    background-color: transparent;
    outline: none;
    border: none;
    font-size: 14px;
    color: #4E4E4E;
    padding: 0;
    width: 100%;
    text-align: left;
}

.lib-inner-subj-body {
    padding: 0px;
}

.library-subjects-item .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #2C343A;
    box-shadow: none;
}

.library-subjects-item .accordion-button:focus {
    box-shadow: none;
}

.library-subjects-item .library-topic-btn:not(.collapsed) {
    color: #EE9C22;
}

.library-subjects-item .top-level-btn:not(.collapsed) {
    color: #e9b200;
}

.library-subjects-item .accordion-button {
    border-bottom: 1px solid #F6F6F6;
}


.accordion-button.library-subjects-btn:not(.collapsed) {
    border-bottom: 1px solid #F6F6F6;
}

.accordion-button.library-subjects-btn {
    border-bottom: 1px solid transparent;
}

.library-topic-btn:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.64592 4.64592C1.69236 4.59935 1.74754 4.56241 1.80828 4.5372C1.86903 4.512 1.93415 4.49902 1.99992 4.49902C2.06568 4.49902 2.13081 4.512 2.19155 4.5372C2.2523 4.56241 2.30747 4.59935 2.35392 4.64592L7.99992 10.2929L13.6459 4.64592C13.6924 4.59943 13.7476 4.56255 13.8083 4.53739C13.8691 4.51223 13.9342 4.49929 13.9999 4.49929C14.0657 4.49929 14.1308 4.51223 14.1915 4.53739C14.2522 4.56255 14.3074 4.59943 14.3539 4.64592C14.4004 4.6924 14.4373 4.74759 14.4624 4.80833C14.4876 4.86907 14.5005 4.93417 14.5005 4.99992C14.5005 5.06566 14.4876 5.13076 14.4624 5.1915C14.4373 5.25224 14.4004 5.30743 14.3539 5.35392L8.35392 11.3539C8.30747 11.4005 8.2523 11.4374 8.19155 11.4626C8.13081 11.4878 8.06568 11.5008 7.99992 11.5008C7.93415 11.5008 7.86903 11.4878 7.80828 11.4626C7.74754 11.4374 7.69236 11.4005 7.64592 11.3539L1.64592 5.35392C1.59935 5.30747 1.56241 5.2523 1.5372 5.19155C1.512 5.13081 1.49902 5.06568 1.49902 4.99992C1.49902 4.93415 1.512 4.86903 1.5372 4.80828C1.56241 4.74754 1.59935 4.69236 1.64592 4.64592Z" fill="%23EE9C22"/></svg>');
}

.top-level-btn::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="5" viewBox="0 0 7 5" fill="none"><path d="M1 2.5L6 2.5M6 2.5L4.125 0.625M6 2.5L4.125 4.375" stroke="%238D929A" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(0);
    background-position: center;
}

.top-level-btn:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="5" viewBox="0 0 7 5" fill="none"><path d="M1 2.5L6 2.5M6 2.5L4.125 0.625M6 2.5L4.125 4.375" stroke="%238D929A" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(89deg);
    background-position: center;
}

.library-sets > .card-set {
    width: 49%;
    padding: 11px;
    margin-bottom: 15px;
}

.library-sets .set-card-question {
    width: 41%;
}

.library-sets .set-card-detail {
    margin-bottom: 3rem;
}

.set-info-dialog {
    max-width: 32%;
}

.set-info-dialog .set-card-question {
    width: 25%;
}

.set-info-para {
    font-size: 16px;
    color: #717579;
    margin-bottom: 20px;
}

.set-questions-box {
    background-color: #F9F9F9;
    padding: 15px 15px 10px 30px;
    max-height: 500px;
    overflow-y: auto;
}

.set-info-question {
    font-size: 16px;
    color: #3C3C3C;
    margin-bottom: 20px;
}

.set-info-question-link {
    color: #3C3C3C;
    text-decoration: none;
    display: block;
    border-bottom: 2px solid #ECECEC;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.set-info-detail {
    font-size: 15px;
    color: #ACACAC;
    padding-top: 10px;
}

.btn-back {
    color: #858585;
    font-size: 16px;
    text-decoration: none;
}

.btn-back svg {
    margin-right: 7px;
}

.text-align-center {
    text-align: center;
}

.margin-auto {
    margin: auto;
}

.mt--3 {
    margin-top: -3% !important;
}

.matching-game-only-image {
    margin-top: 15%;
    width: 90px !important;
    height: 90px !important;
}

#teacher-class-group-refresh-btn {
    top: 170px;
}

.cursor-pointer{
    cursor: pointer;
}

.svg-red {
    filter: invert(16%) sepia(91%) saturate(6707%) hue-rotate(4deg) brightness(102%) contrast(121%);
}
.spinner-img {
    margin-top: 5%;
    width: 45px;
    height: 45px;
}

#delete-user-multiple-accounts-error-list {
    margin-top: 50px;
    margin-bottom: 30px;
}

.spinner-container {
    width: 100%;
    text-align: center;
}
.selected-directory-label-path {
    color: #717579;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.selected-directory-label-path:hover {
    color: red;
}
.selected-directory-label-path-container {
    margin-bottom: 2%;
    margin-top: 1%;
}
.create-flashcardset-card-img-thumb {
    width: 50px;
    height: 50px;
    float: right;
}
.float-right{
    float: right;
}

.e-spinner-pane {
    z-index: 1100 !important;
}
#app {
    /*position: absolute;*/
    /*position: relative;*/
}
.e-spinner-inner {
    position: fixed !important;
}

.accordion-body-custom {
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.user-directory-menu {
    color: #147131;
    cursor: pointer;
}

.flashcard-context-menu-activate-label {
    color: #147131;
}

.flashcard-context-menu-deactivate-label {
    color: #EB4D4D;
}

.flashcard-context-menu-edit-label {
    color: #a6a6a6;
}

.flashcard-card-already-added-label {
    color: #D9D9D9;
}

.flashcard-card-already-added-label:hover {
    color: #D9D9D9;
}

.card-status-badge-ellipsis {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-align: center;
}

.library-subjects-show-responsive {
    display: none !important;
}

.parent-center-objects {
    width: 100%;
    text-align: center;
}

.library-card-detail-image{
    max-width:220px;
    max-height:220px;
}

.e-checkbox-wrapper .e-frame.e-check {
    background-color: #EB4D4D !important;
    border-color: #EB4D4D !important;
}

.e-checkbox-wrapper.e-wrapper > .e-label {
    font-size: 15px;
}

.e-checkbox-wrapper.e-wrapper{
    margin-bottom: 1rem;
}

/* Used to Override label coming from html inherit file from Platform */
.user-settings-fields > form > div > .col-12.align-content-center > h3 {
    font-size: 20px;
    color: #0C1423;
    font-family: 'Duplet';
}

/* Used to Override label coming from html inherit file from Platform */
.user-settings-fields > form > div > .col-12.align-content-center > h5 {
    font-size: 15px;
    color: #404040;
    margin-bottom: 40px;
    font-family: 'Duplet';
}

.privacy-heading {
    font-size: 20px;
    color: #0C1423;
}

.privacy-subtitle {
    font-size: 15px;
    color: #404040;
    margin-bottom: 40px;
    display: block;
}

.privacy-data-label {
    font-size: 15px;
}

.privacy-data-input {
    width: 1.5em;
    height: 1.5em;
    margin-right: 10px;
    border-color: #cdcdcd;
}

.privacy-data-input:focus {
    box-shadow: none;
}

.privacy-data-input:checked {
    background-color: #EB4D4D;
    border-color: #EB4D4D;
}

.privacy-seprator {
    border-bottom: 1px solid #EFEEFC;
    margin: 20px 0;
}

.delet-account-title {
    font-size: 25px;
    color: #EB4D4D;
    margin-top: 20px;
}

.following-data-tile {
    font-size: 18px;
    color: #0C1423;
    margin-top: 25px;
    margin-bottom: 20px;
}

.del-data-list {
    font-size: 14px;
    margin-bottom: 10px;
}

.plan-package-box {
    padding: 20px 30px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    margin-bottom: 20px;
}

.plan-pack-top-box {
    border-bottom: 1px solid rgba(13, 88, 239, 0.1);
    padding-bottom: 20px;
    padding-top: 10px;
    margin-bottom: 30px;
}

.plan-title {
    display: block;
    font-size: 20px;
    color: #2F76BC;
    line-height: 1;
}

.plan-price {
    display: inline-block;
    font-size: 50px;
    color: #EE9C22;
    font-weight: 600;
}

.plan-duration {
    display: inline-block;
    font-size: 18px;
    color: rgba(44, 52, 58, 0.8);
    margin-left: 5px;
}

.package-feature-list-box {
    margin-bottom: 50px;
}

.package-feature-list {
    color: #0A3E66;
    font-size: 15px;
    margin-bottom: 10px;
    list-style-type: none;
    display: flex;
    align-items: center;
}

.package-feature-list svg {
    margin-right: 10px;
}

.btn-plan {
    border-radius: 100px !important;
    border: 1.5px solid transparent !important;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB) !important;
    background-clip: padding-box, border-box !important;
    background-origin: padding-box, border-box !important;
    font-size: 16px !important;
    color: #0C1423 !important;
    font-weight: 600 !important;
    min-width: 150px;
}

.user-learning-set {
    margin-bottom: 2rem;
}

.learning-set-title {
    color: #0C1423;
    font-size: 18px;
    font-weight: 600;
}

.learning-subj-title {
    color: #717579;
    font-size: 18px;
    font-weight: 600;
}

.learning-topic-title {
    color: #171B1E;
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 25px;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom: 50px;
}

.learning-score-box {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
}

.learning-questions-store {
    padding-bottom: 10px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.question-store-heading {
    color: #858494;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 5px;
    font-weight: 600;
}

.question-store-counter {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
    display: block;
    color: #147131;
}

.learning-set-row {
    perspective: 1700px;
    transform-style: preserve-3d;
}

.learning-card {
    width: 47%;
    margin-left: 2%;
    perspective: 700px;
    align-self: self-start;
    transition: transform .5s cubic-bezier(.57,-0.38,.5,1.33);
    transform-style: preserve-3d;
}

.learning-card-question {
    border-radius: 30px;
    background: #FCFCFC;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
    padding: 22px 25px;
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.side-a {
    position: relative;
}

.side-b {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotateX(-180deg);
}

.side-a,
.side-b {
    backface-visibility: hidden;
}

/*-- This roration temporary set on hover --*/
.learning-card-flip-card {
    transition: transform .5s cubic-bezier(.57,-0.38,.5,1.33);
}

.learning-card-counter {
    font-size: 16px;
    color: #858494;
}

button.question-edit-btn img {
    margin-right: 7px;
}

.matching-game-question-box {
    margin: 0 10px;
    color: #5B5B5B;
    font-size: 14px;
}

.w-70 {
    width: 70%;
}

.study-session-fix-ios-transform-text {
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

.current-card-question {
    color: #2C3A48;
    font-size: 22px;
    font-size: 18px;
    width: 70%;
    margin-top: 20px;
}
.current-card-question-full-width {
    color: #2C3A48;
    font-size: 22px;
    font-size: 18px;
    width: 100%;
    margin-top: 20px;
}
.learning-card-buttons {
    padding-bottom: 22px;
    margin-top: auto;
}

.learning-card-btn,
.btn-previous-question,
.btn-next-question {
    outline: none;
    border: none;
}

.btn-previous-question,
.btn-next-question {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFF1F4;
    border: 1px solid #EB4D4D;
    filter: drop-shadow(0px 10px 8px rgba(117, 60, 239, 0.10));
}

.sm-btn-pre {
    background-color: transparent;
    border: 0;
}

    .sm-btn-pre span {
        font-size: 14px;
        color: #818181;
        margin-left: 10px;
    }

.sm-btn-next {
    order: -1;
    margin-right: 10px;
}

.sm-btn-pre:hover circle {
    fill: #818181;
    transition: all .2s;
}

.sm-btn-pre:hover path {
    stroke: #fff;
    transition: all .2s;
}

.btn-previous-question:hover {
    background-color: #EB4D4D;
    transition: all .2s;
}

    .btn-previous-question:hover path {
        stroke: #fff;
        transition: all .2s;
    }

.btn-next-question:hover {
    background-color: #EB4D4D;
    transition: all .2s;
}

    .btn-next-question:hover path {
        stroke: #fff;
        transition: all .2s;
    }

.learning-card-btn {
    border-radius: 100px;
    font-size: 15px;
    padding: 8px 25px;
    border-radius: 100px;
    transition: all .2s ease-in;
}

.learning-card-btn + .learning-card-btn {
    margin-left: 15px;
}

.btn-know {
    border: 1px solid #FAC312;
    background: #FFF5D7;
    color: #EE9C22
}

.btn-know:hover {
    background: #fbecbf;
}

.btn-flip {
    color: #fff;
    background: linear-gradient(90deg, #7AC362 0.08%, #458CCB 100.09%);
}

.btn-flip:hover {
    background: linear-gradient(90deg, #61bf42 0.08%, #1662a5 100.09%);
}

.btn-dont {
    color: #8B79F9;
    border: 1px solid #8B79F9;
    background: #F3F1FF;
}

.btn-dont:hover {
    background: #e9e6ff;
}

.set-questions-tracker-box {
    width: 32%;
    margin-left: 2%;
}


.btn-randomizer {
    border-radius: 100px;
    border: 1px solid #147131;
    background: #FAFFFB;
    color: #147131;
    font-size: 13px;
    padding: 10px 0;
    display: block;
    width: 100%;
}

.btn-sorted-options {
    border-radius: 100px;
    border: 1px solid #2C343A;
    background: #fff;
    color: #2C343A;
    font-size: 13px;
    padding: 10px 0;
    display: none;
    width: 100%;
}

.btn-sorted-dropdown {
    display: inline-block;
    width: 48%;
}

.set-questions-tracker {
    margin-top: 10px;
    min-width: 278px;
}

.questions-sorting {
    border-bottom: 2px solid #BFC9CE;
    margin-bottom: 10px;
}

.questions-sorting .nav-link {
    font-size: 14px;
    color: #717579;
    padding: 0 0 10px 0;
    border-bottom: 2px solid transparent;
    position: relative;
}

.questions-sorting .nav-link::after {
    content: '';
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: transparent;
    bottom: -4px;
    left: 0;
}

.nav-link.sorting-list-item.active {
    color: #147131;
}

.nav-link.sorting-list-item.active::after {
    background-color: #147131;
}

.sorted-quetions {
    background-color: #fff;
    color: #525252;
    font-size: 15px;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.02);
    list-style: none;
    display: flex;
    justify-content: space-between;
    border: 1px solid transparent;
    align-items: center;
}

.sorted-quetions:hover {
    background-color: #f0f0f0;
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}

.btn-view-all {
    width: 100%;
    outline: none;
    border: none;
    font-size: 16px;
    color: #525252;
    font-weight: 600;
    padding: 15px;
    border-radius: 10px;
    border-radius: 10px;
    border: 1px dashed #EB4D4D;
    background: linear-gradient(180deg, rgba(250, 195, 18, 0.20) 0%, rgba(238, 156, 34, 0.20) 100%);
    margin-top: 20px;
    transition: all .3s;
}

.btn-view-all.pulse-btn:hover{
  animation: pulse-black 1s backwards;
}

.btn-view-all-dashboard {
    color: #717579;
    text-decoration: none;
    font-size: 16px;
}

.br-orange {
    border: 1px solid #EE9C22 !important;
}

.br-orange-fn {
    border: 1px solid #EE9C22 !important;
    background-color: #FFF8EE;
}

.br-red {
    border: 1px solid #D52027 !important;
}

.br-green-fn {
    border: 1px solid #147131 !important;
    background-color: #FAFFFB;
}

.congrats-title {
    color: #7D4FA0;
    font-size: 30px;
    font-weight: 600;
}

.congrats-description {
    color: #717579;
    font-size: 14px;
}

.final-sorted-questions-tab {
    max-height: 440px;
    overflow-y: auto;
    padding-right: 10px;
}

.final-sorted-quetions {
    padding: 15px 20px;
    border-radius: 20px;
    border: 1px solid #C4C4C4;
    margin-bottom: 15px;
}

.fn-question {
    color: #0C1423;
    font-size: 16px;
    margin-bottom: 15px;
}

.fn-explanation {
    color: #858585;
    font-size: 14px;
    line-height: 1.5;
}

.fn-modal-footer {
    background-color: #E8E5FA;
    padding: 20px 15px;
    border-radius: 20px;
}

.fn-modal-footer-today-progress {
    background-color: #E8E5FA;
    padding: 20px 15px;
    border-radius: 20px;
}

.fn-modal-btn {
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 16px;
}

.fn-modal-btn + .fn-modal-btn {
    margin-left: 15px;
    padding: 10px 30px;
}

.fn-modal-btn-gr {
    border: 1px solid #147131;
    background: #DCFAE5;
    color: #147131;
}

.fn-modal-btn-orange {
    border: 1px solid #FAC312;
    background: #FFF5D7;
    color: #EE9C22;
}

.nav-menu-context-label {
    font-size: 14px;
    color: #717579;
    font-family: 'Duplet';
    padding-top: 3px;
    display: inline-block;
    width: 120px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-align: left;
}

.text-align-center{
    text-align:center;
}

.modal-colored-border {
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
}

.new-set-popup-title-library {
    font-size: 19px !important;
    color: #2C343A !important;
    padding-left: 25px;
    font-weight: 600 !important;
    padding-top: 15px;
    font-family: 'Duplet';
}

.no-horizontal-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#login-password-input {
    background: url(../assets/icon_password.svg) 14px center no-repeat;
    border-right: 0 !important;
    height: 53px;
}

.e-password-show-icon {
    background-image: url('../assets/show-password-icon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 0 !important;
}

.nav-link.active > .user-nav-list-link {
    color: #FF6175;
}

.nav-link.active > .user-nav-list-link > .dashboard-icon {
    color: #FF6175;
}

.nav-link.active > .user-nav-list-link > .dashboard-icon {
    filter: invert(45%) sepia(66%) saturate(1437%) hue-rotate(320deg) brightness(109%) contrast(101%);
/*    transition: filter .2s;*/
}

.btn-study-inactive {
    color: #d3d3d3;
}

.btn-study-inactive:hover {
    color: #d3d3d3;
}

.form_span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-success.modified.valid {
    border-color: #ced4da;
}

.form_span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.e-input-focus {
    border-width: 1px !important;
    border-radius: 5px !important;
    border-color: #0C1423 !important;
    box-shadow: none !important;
}

.form_span.e-input-group.e-control-container.e-control-wrapper.e-error.modified.invalid {
    box-shadow: none !important;
}

.form_span.e-input-group.e-control-container.e-control-wrapper.valid.e-input-focus {
    border-width: 1px !important;
    border-radius: 5px !important;
    border-color: #0C1423 !important;
    box-shadow: none !important;
}

/*Override fix form thead regex password input in the SignUp screen*/
.p-0.px-2.password_checker_item {
    background-color: transparent;
}

/*Override fix to display MyProfile Privacy button on the left */
.e-content.e-lib.e-touch > .e-item.e-active > .user-settings-fields > form > .row.align-items-center.pt-2 {
    float: left !important;
    padding-left: 30px;
}

/*Override fix to display MyProfile Privacy button on the left, fix to hide div col 2 which is inherit from the platform page file. */
.e-content.e-lib.e-touch > .e-item.e-active > .user-settings-fields > form > .row.align-items-center.pt-2 > .col-2.align-content-center {
    display: none;
}

/*Override 'Go back to Login' button from SignUp screen */
.form_top_row.flex-column.flex-sm-row > .sign_up_link.mb-sm-0.mb-2 > .e-control.e-btn.e-lib.e-outline {
    color: #5381F8;
}

.margin-bottom-2 {
    margin-bottom: 2%;
}

.my-profile-change-pwd-current-warning {
    color: #FF6175;
    font-family: Duplet;
    font-size: 15px;
}

.min-w-150{
    min-width: 150px;
}
.max-w-150 {
    max-width: 150px;
}
.min-h-281{
    min-height: 281.07px;
}

.ellipsis-text {
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-align: center;
}

#libraryModalComponentModal_dialog-header {
    /*padding: 0;*/
}

#libraryModalComponentModal_dialog-content {
    padding-top: 0;
}

.flashcardset-breadcrumb-ellipsis {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    text-align: center;
    min-width: 60px;
}

.flashcardset-breadcrumb-parent {
    overflow: hidden;
    width: 100% !important;
    margin-left: -3%;
}

/*Override fix to display always the text filter button for the MySets screen*/
.user-set-filters > .btn.btn-secondary.user-set-filter-btn.show {
    color: #717579;
}

.user-set-filters > .btn.btn-secondary.user-set-filter-btn {
    color: #717579;
}

.learning-card-action-buttons{
    margin:auto;
}

.learning-card-controls {
    margin-top: 60px;
}

.learning-card-key-controls {
    width: 63%;
    margin-top: 30px;
}

.key-control-heading {
    font-size: 12px;
    color: #0C1423;
    margin-bottom: 15px;
    display: inline-block;
}

.direction-key-arrow {
    margin-bottom: 10px;
}

.keyboard-button-heading {
    font-size: 13px;
    color: #8D929A;
}

.learning-card-complete-btn {
    text-decoration: none;
    font-size: 14px;
    color: white;
    background-color: #458CCB;
    padding: 12px 29px;
    border-radius: 5px;
    margin-top: 15px;
}

.learning-card-test-btn {
    text-decoration: none;
    font-size: 15px;
    color: #1EAE4B;
    background-color: transparent;
    padding: 12px 20px;
    border-radius: 5px;
    margin-top: 20px;
    border: 1px solid #1EAE4B;
    margin-left: auto;
    margin-right: 10px;
}

.learning-card-test-btn:hover {
    background-color: #1EAE4B;
    color: #fff;
    transition: all .2s;
}

.learning-card-complete-btn:hover {
    background-color: #3970af;
    color: white;
}

.onboard-pop-content {
    background: white;
    border-radius: 10px;
    /*filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.10));*/
}


.onboard-pop-title {
    color: #0C1423;
    font-size: 24px;
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
}

.onboard-logo {
    margin-left: 10px;
}

.onboard-popup-description {
    color: #888;
    font-size: 16px;
    text-align: center;
    margin-bottom: 30px;
}

.guide-pop-counter {
    background-color: #7AC362;
    width: 23px;
    height: 23px;
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.guide-pop-title {
    font-size: 17px;
    color: #0C1423;
    margin-left: 13px;
    margin-bottom: 0;
}

.guide-tour-pop-close {
    margin-left: auto;
}

.guide-tour-pop-description {
    font-size: 15px;
    color: #979797;
    line-height: 1.2;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: justify;
}

.guide-tou-button-next {
    background-color: #EE9C22;
    padding: 8px 20px;
    font-size: 15px;
    color: white;
    border: none;
    border-radius: 5px;
    display: flex;
    margin-left: auto;
}

.onboard-tour-step-parent {
    box-shadow: 0px 0px 0px 5000px rgba(12, 20, 35, 0.30);
    opacity: 1;
    width: 8%;
    height: 270px;
    top: 19%;
    left: 18%;
    position: absolute;
    overflow: visible;
}

.onboard-tour-step-parent-2 {
    width: 16%;
    height: 60px;
    top: 23%;
    left: 1%;
}

.onboard-tour-dialog {
    width: 310px;
}

.guide-pop-top-box {
    width: 100%;
}


.onboard-step-content {
    background: white;
    border-radius: 10px;
    /*filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.10));*/
    padding: 15px;
    /*position: absolute;
    bottom: -220px;*/
}


/*-- Forms Login and Sign up Css --*/

.l-s-body {
    background-color: white;
}

.form {
    display: flex;
    position: relative;
}

.form_col_left {
    width: 50%;
    background: url(../assets/login_bg.jpg) no-repeat bottom/cover;
    padding-top: 80px;
}

.form_reset .form_col_left {
    background: url(../assets/reset_bg.jpg) no-repeat bottom/cover;
}

.form_reset.form_new_password .form_col_left {
    background: url(../assets/newPassword.jpg) no-repeat bottom/cover;
}

.form_reset.form_signUp .form_col_left {
    background: url(../assets/signup_bg.jpg) no-repeat top/cover;
    background-position: 50%;
}

.form_reset .skillkeep_logo {
    width: 50%;
    margin-top: 5rem;
}

.form_reset .form_col_left {
    height: 100vh;
}

.form_signUp .form_col_left {
    height: auto;
}

.form_login_logo {
    display: flex;
    justify-content: center;
}

.skillkeep_logo {
    width: 40%;
    margin-bottom: 2rem;
}

.slider {
    position: absolute;
    bottom: 0;
}

.form_signUp .slider {
    position: static;
}

.form_signUp .slider_img {
    display: block;
    margin: auto;
    mix-blend-mode: lighten;
}

.slider_feedback_box {
    position: absolute;
    background-color: white;
    font-size: 1rem;
    color: #102015;
    padding: 1.2rem 1.5rem;
    border-radius: 5px;
    top: 0;
    left: 75%;
    width: 75%;
    font-weight: 400;
    line-height: 1.4;
}

#pending-school-invitations-grid td {
    min-width: 150px;
}

#pending-school-invitations-grid th {
    min-width: 150px;
}

#pending-school-invitations-grid_content_table {
    width: inherit !important;
}

#pending-school-invitations-grid_header_table {
    width: inherit !important;
}

.form_col_right {
    width: 50%;
    padding: 50px 80px;
    background: url(../assets/circle_jpg.png) top right no-repeat;
}

.form_top_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.heading_secondary {
    font-size: 1.7rem;
    color: #0c1423;
    font-weight: bold;
}

.sign_up_link {
    font-size: 15px;
    font-weight: 500;
    color: #03014c;
}

.sign_up_btn {
    text-decoration: none;
    color: #5381f8;
}

.login {
    margin-top: 4rem;
}

.through_social {
    display: flex;
    flex-direction: column;
}

.login_button_social {
    border: 1px solid #e6e6e6;
    padding: 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 5px;
}

.login_button_google {
    color: #0c092a;
    margin-bottom: 20px;
}

.login_button_facebook {
    color: #fff;
    background-color: #0056b2;
    margin-bottom: 20px;
}

.login_icon_facebook {
    margin-right: 15px;
}

.login_icon_google {
    margin-right: 15px;
}

.seprator {
    margin: 1rem auto;
    font-size: 1.2rem;
    color: #858494;
    display: block;
    width: 80%;
    text-align: center;
}

.seprator::after {
    content: "";
    height: 2px;
    width: 40%;
    background-color: #e6e6e6;
    display: inline-block;
    margin-left: 20px;
    margin-bottom: 4px;
}

.seprator::before {
    content: "";
    height: 2px;
    width: 40%;
    background-color: #e6e6e6;
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 4px;
}

.form_login {
    margin-top: 50px;
    width: 70%;
}

.form_group {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}

.form_side-by-side {
    display: flex;
    flex-direction: row;
}

.form_side-by-side .form_control {
    width: 50%;
}

.form_control + .form_control {
    padding-left: 25px;
}

.form_label {
    color: #0c1423;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.form_input {
    width: 100%;
    border: 1px solid #efeefc;
    padding: 1.5rem 5rem;
    display: flex;
    border-radius: 5px;
    font-size: 1.5rem;
    color: #545454;
    outline: none;
}

.sk-form-select {
    padding-left: 1.5rem;
}

.form-phone-code {
    flex-basis: 10%;
    padding: 1.5rem;
    margin-right: 15px;
}

.form-phone-input {
    padding-left: 20px;
}

.form_input_name {
    background: url(../assets/icon_email.svg) 3% center no-repeat;
}

.form_input_password {
    background: url(../assets/icon_password.svg) 3% center no-repeat;
    position: relative;
}

.form_input_user {
    background: url(../assets/icon_user.svg) 4% center no-repeat;
    position: relative;
}

.hide_password {
    position: absolute;
    right: 20px;
    top: 50px;
}

.form_input:focus {
    border: 1px solid #0c1423;
    color: #0c1423;
}

.form_input:focus::-webkit-input-placeholder {
    color: #545454;
}

.form_input::-webkit-input-placeholder {
    font-size: 1.5rem;
    color: #858494;
    font-weight: normal;
}

.form_icon {
    margin-right: 8px;
}

.input_submit {
    background: linear-gradient(to right, #eb4d4d, #ee9c22, #7ac362, #458ccb);
    padding: 1.8rem 6rem;
    font-size: 1.5rem;
    color: white;
    font-weight: 500;
    outline: none;
    border: none;
    border-radius: 100px;
    margin: 30px auto 20px;
    width: 70%;
    cursor: pointer;
    transition: all 0.3s;
    background-size: 100%;
}

.input_submit:hover {
    background-size: 150%;
    transition: all 0.3s;
}

.forgot_password {
    font-size: 1rem;
    font-weight: 500;
    color: #6a5ae0;
    text-decoration: none;
    text-align: center;
    display: block;
    margin-bottom: 25px;
}

.form_terms {
    font-size: .9rem;
    color: #858494;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}

.form_terms span {
    color: #49465f;
    font-weight: 500;
}

.form_password_validation {
    margin-top: 15px;
}

.password_validation_condition {
    font-size: 15px;
    color: #ff592c;
    font-weight: normal;
    margin-right: 20px;
}

.form_check {
    margin-right: 5px;
}

.form_control {
    display: flex;
    flex-direction: column;
}

.form_control .form_input_name {
    padding-left: 40px;
}

.form_control .form_input_user {
    padding-left: 41px;
}

.z-index-top {
    z-index: 9999999;
}

.z-index-top-relative {
    z-index: 9999999;
    position: relative;
}

.z-index-top-img {
    background: #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 20px 8px rgba(239, 241, 246, 0.50);
    z-index: 99999;
}

.z-index-top-white {
    z-index: 9999999;
    background-color: white;
    position:relative;
    border-radius: 5px
}

.keyboard-controls-without-transition {
    width: 100%;
    margin-left: 4%;
    align-self: self-start;
}

.keyboard-controls-buttons {
    width: 47%;
}

.tour-guide-unselected-button {
    opacity: .2;
}

.sidebar-tour-guide {
    background-color: #FBFBFB;
    z-index: unset;
    position: absolute !important;
}

.sidenav-tour-guide {
    width: 100%;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    z-index: unset;
}

.img-circle-login {
    background: url(../assets/circle_jpg.png) top right no-repeat;
}

.height-55 {
    height: 55px;
}

#login-page-email {
    height: 53px;
}

.mr-3 {
    margin-right: 3%;
}

.mt-2 {
    margin-top: 2% !important;
}

.min-w-130{
    min-width: 130px;
}

/*Fix to set spinner overlay to cover full height*/
.e-spinner-pane.e-spin-overlay.e-spin-show {
    position: fixed;
}

.learning-card-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: all .2s ease-in;
}

.learning-card-btn-hotkey-pressed {
    transform: translateY(-4px);
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: all .2s ease-in;
}

.learning-card-btn:active {
    transform: translateY(0px);
    box-shadow: 0 0 20px rgba(0,0,0,0.02);
    transition: all .2s ease-in;
}

.learning-card-image-only {
    margin-bottom: 10px;
    width: 100%;
    height: 270px;
    border-radius: 7px;
}

.learning-card-sorted-quetions-small {
    width: 30px;
    height: 30px;
}


.delete-badge-required {
    background-color: #EB4D4D;
    font-size: 14px;
}

.dang-title {
    color: #EB4D4D;
    font-size: 18px;
    font-weight: 600;
}

.delet-acc-heading {
    font-size: 18px;
    color: #0C1423;
}

.delete-account-info {
    color: #666;
    font-size: 15px;
    font-family: 'Duplet';
}

.guide-tou-button-next.guide-tour-finish {
    background-color: #1EAE4B;
    padding: 10px 22px;
    margin-left: 0;
    position: relative;
}

.guide-tou-button-next.guide-tour-finish::after {
    content: '';
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: #1EAE4B;
    filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .3s;
}

.guide-tou-button-next.guide-tour-finish:hover::after {
    opacity: 0;
    transition: all .3s;
}

.card-learning-question-box {
    margin-bottom: 40px;
}

.card-learning-answer-box {
    margin-bottom: 30px;
}

.learning-card-img {
    width: 100%;
    cursor: pointer;
    transition: all .2s;
    object-fit: contain;
}

.learning-card-img:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.02);
    transition: all .2s;
    transform: scale(1.05);
}

.learning-card-image-view {
    color: #525252;
    text-decoration: none;
    font-size: 13px;
    margin-top: 5px;
}

.invalid-email-user-alert {
    border-radius: 5px;
    background: #ffe3e3;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    margin-bottom: 3%;
}

.invalid-email-user-alert-message {
    color: #741717;
    font-size: 15px;
    margin: 0 auto 0 10px;
}

.daily-tip-sent-email-alert {
    border-radius: 5px;
    background: #EAFFE3;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    margin-bottom: 3%;
    position: relative;
}

.study-material-share-invitation-alert-msg {
    font-size: 16px;
    color: #D52027;
    margin-right: 16px;
    display: inline-block;
    margin-bottom: 4%;
}

.study-material-share-invitation-alert-msg svg {
    margin-right: 5px;
    margin-top: -5px;
}

.daily-tip-action-button-share-email-box {
    background-color: #EAFFE3;
    transition: all .2s;
    opacity: 1 !important;
    z-index: 9;
    display: initial !important;
}

.hidden {
    opacity: 0;
}

#users-management-selected-account-details {

}

.users-management-selected-account-details-item {
    font-size: 14px;
    font-family: 'Duplet';
    margin-bottom: 0;
}

.visible {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#inviteParentBtn {
    padding: 15px 40px;
}

.opacity-5 {
    opacity: 0.5 !important;
}
.opacity-0 {
    opacity: 0 !important;
}
.opacity-1 {
    opacity: 1 !important;
}
.auto-save-user-alert {
    border-radius: 5px;
    background: #EAFFE3;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 52%;
    align-items: center;
}

.ml-6 {
    margin-left: 6%;
}

.auto-save-user-alert-message {
    color: #06220F;
    font-size: 15px;
    margin: 0 auto 0 10px;
}
.set-card-empty-title-background {
    border-radius: 5px;
    padding: 15px;
    display: flex;
    width: 100%;
    align-items: center;
}

.set-card-empty-title-error-message {
    color: #FF6175;
    font-size: 15px;
    margin: 0 auto 0 10px;
}

.set-card-saving-progress {
    position: fixed;
    right: 40px;
    bottom: 20px;
}

.btn-progress-saving {
    background-color: white;
    color: #0C1423;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.10);
    border: none;
    padding: 15px 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.btn-progress-saving svg {
    margin-right: 10px;
}

.fl-img-close {
    background-color: transparent;
    border: none;
    margin-left: auto;
    cursor: pointer;
    padding: 0px;
}

#imageSearcherModalComponentDialog .modal-dialog.modal-dialog-centered {
    min-height: initial !important;
}

.custom-hidden {
    display: none !important;
}

/*.user-directory-options-button {
    float:right;
    width: 25%;
    right: 0 !important;
}*/

.display-inline-block {
    display: inline-block;
}

.e-dlg-header-content {
    padding-right: 5px !important;
    padding-top: 10px !important;
}

.mt-3 {
    margin-top: 3%;
}

.mt-0 {
    margin-top: 0;
}

#school-users-management-refresh-btn {
    width: 165px;
}

.study-session-img-card-small {
    width: 105px;
    height: 96px;
}

.study-session-img-card-medium {
    width: 250px;
    height: 226px;
}

.w-100{
    width: 100% !important;
}

.card-creating-sepration-container {
    width: 85%;
}

.w-85 {
    width: 85% !important;
}

.study-session-img-card-large {
    width: 335px;
    height: 246px;
}

.set-question-edit {
    border-bottom: 2px solid #BFC9CE;
    padding-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 278px;
}

.question-edit-btn {
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #676767;
    display: flex;
    align-items: center;
}

.question-edit-btn svg {
    margin-right: 10px;
}

.loading-page-body {
    background: url(../assets/loading-screen-bg.png) no-repeat;
    background-position: bottom center;
    height: 100vh;
    display: flex;
    justify-content: center;
    margin: auto;
}

.loading-container {
    margin-top: 180px;
}

.loading-box-heading {
    font-size: 50px;
    color: #20283F;
    width: 65%;
    text-align: center;
}

.loading-highlight {
    color: #EE9C22;
}

.loading-title {
    font-size: 28px;
    display: block;
    color: #147131;
    margin-top: 15px;
}

.loading-text {
    font-size: 16px;
    font-weight: 600;
    color: #0C1423;
    margin-top: 30px;
    display: block;
}

.no-underline-link {
    text-decoration: none;
}

.pl-0{
    padding-left: 0 !important;
}

.set-card-creation-detail {
    color: #858494;
    border-left: .5px solid;
    font-size: 13px;
    margin-left: 5px;
    padding-left: 5px;
    margin-bottom: 2px;
}

.card-student-learning-text {
    font-size: 16px;
    color: #8E8E8E;
    margin-left: 10px;
}

.set-card-detail {
    border-top: 1px solid #F3F3F3;
    padding: 15px 0;
}

.set-card-activity-info {
    color: #8D8D8D;
    font-size: 11px;
}

.synfusion-circular-gauge-custom-annotation {
    color: green;
    background-color: transparent;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    padding: 4px 0 0 6px;
    font-weight: bold;
}

.ml-10 {
    margin-left: -10px;
}

.pt-10px {
    padding-top: 10px;
}

.back-btn {
    color: #EE9C22;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 20px;
}

.back-btn img {
    margin-right: 10px;
}

.back-btn:hover {
    color: #C8831C;
}

.back-btn:hover svg path {
    stroke: #C8831C;
}

.set-card-description {
    font-size: 14px;
    color: #45494e;
    margin: 9px 0;
    height: 21px;
    max-width: 309px;
}

.set-card-progress-bar-text {
    font-size: 11px;
    color: #6e6e6e;
    text-align: center;
    margin-top: 4px;
    font-weight: 600;
}

.max-w-70 {
    max-width: 70px;
}

.max-w-100 {
    max-width: 100px;
}

.max-w-115 {
    max-width: 115px;
}

.max-w-400 {
    max-width: 400px;
}

.set-card-bottom-info {
    width: 100%;
    justify-content: space-between;
}

.m-width-250 {
    max-width: 250px;
}

.card-status-badge-fix-position {
    position: absolute;
    right: 8%;
    top: 3%;
}

.card-more-options-fix-position {
    position: absolute;
    right: 0;
    top: 0;
}

.p-50 {
    padding: 50px;
}

.color-gray {
    color: gray;
}

.position-relative {
    position: relative;
}

.mr-13px {
    margin-right: 13px;
}

.teacher-class-subscriptions-frequency-weekday {
    position: absolute;
    bottom: 0;
    right: 0;
}

.timer-sm-scrn svg {
    margin-right: 10px;
}

.timer-sm-scrn-d {
    font-size: 14px;
    color: #EE9C22;
}

.learning-card-left-panel-width {
    width: 100%;
}

.pt-0 {
    padding-top: 0;
}

.my-sets-study-now-btn {
    padding: 10px 28px;
    font-size: 15px;
    padding: 8px 25px;
    border-radius: 100px;
    transition: all .2s ease-in;
    outline: none;
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #7AC362 0.08%, #458CCB 100.09%);
}

.pl-15 {
    padding-left: 15px;
}

.bigger-checkbox.e-checkbox-wrapper .e-frame {
    height: 20px;
    width: 20px;
    padding: 4px 0;
}

.bigger-checkbox.e-checkbox-wrapper .e-check {
    font-size: 15px;
}

.bigger-checkbox.e-checkbox-wrapper .e-ripple-container {
    height: 52px;
    top: -11px;
    width: 47px;
}

.bigger-checkbox.e-checkbox-wrapper .e-label {
    line-height: 20px;
    font-size: 14px;
}

.ml-0 {
    margin-left: 0;
}
/*MatchingGame css init */
.matchinggame-card-vertical-margin {
    margin-bottom: 2%;
}
.matchinggame-cards-status {
    display: flex;
    flex-direction: column;
    width: 312px;
}

.matchinggame-cards-status ul {
    flex: 1;
}

.dropzone {
    min-height: 64px;
    width: 291px;
    text-align: center;
    height: 150px;
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: transparent;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    background: #EAFFE3;
}

.no-drop {
    border: 2px dashed red;
}

.can-drop {
    border: 2px dashed green;
}

.draggable {
    /*margin-bottom: 10px;*/
    /*padding: 10px 25px;*/
    border: 1px solid #424d5c;
    cursor: grab;
    background-color: transparent;
    color: #ffffff;
    width: 100%;
    min-height: 63px;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 0;
}
.draggable-answer {
    width: 100%;
}

.draggable:active {
    cursor: grabbing;
    opacity: .7;
}

.dragging {
    cursor: grabbing;
}

.matchinggame-questions-header {
    color: black;
    margin-bottom: 3%;
    color: #0C1423;
    font-size: 20px;
    font-weight: 600;
}

.drag-answer-matchinggame-questions-header {
    color: black;
    margin-bottom: 2.5%;
    color: #0C1423;
    font-size: 20px;
    font-weight: 600;
}

.matchinggame-image-only-box {
    width: 150px;
    height: 117px;
}
.matchinggame-image-with-text-box {
    width: 60px;
    height: 60px;
}

.mix-blend-mode {
    mix-blend-mode: difference;
    color: white;
}

.user-account-child-parents-email-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: inline-block;
}

.matchinggame-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
}

.matchinggame-small-text {
    font-size: 12px;
}

/*MatchingGame css end */
.card-creating-sepration {
    margin-top: 30px;
}

.card-creating-help {
    color: #FF6175;
    font-size: 16px;
    font-weight: 600;
}

.card-creating-help:hover {
    color: #FF1734;
    font-size: 16px;
    font-weight: 600;
}

.card-creating-help > a {
    color: inherit;
    text-decoration: none
}

.card-set-responsive {
    max-width: 425px;
    min-width: 365px;
    margin-bottom: 10px;
    min-height: 121px;
}

.set-card-heading-responsive {
    font-size: 15px;
    color: #0C1423;
}

.set-card-img-responsive {
    width: 100px;
    height: 100px;
    float: right;
    border-radius: 10px;
}

.set-btn-responsive {
    font-size: 17px;
    text-decoration: none;
}

.badge-active-responsive {
    border-radius: 100px;
    border: 0.5px solid #1EAE4B;
    background: #EAFFE3;
    margin-right: 10px;
}

.set-btn-responsive:hover {
    color:red;
    font-weight: 600;
}

.pl-10 {
    padding-left: 10px;
}

.my-sets-algorithm-label-text {
    color: #717579;
    font-size: 14px;
    font-weight: 300;
    margin-left: 10px
}

.share-offer-received-invitation-move-arrows-container{
    margin: auto;
    padding: 5px;
    padding-bottom: 25px;
}

.share-offer-received-invitation-move-arrows {
    width: 12px;
}

.share-offer-received-invitation-move-arrows-arrow-left {
    width: 12px;
    position: absolute;
    margin-left: -4%;
    margin-top: 2px;
}

.share-offer-received-invitation-move-arrows-arrow-right {
    width: 12px;
    position: absolute;
    margin-left: 2%;
    margin-top: 2px;
}

.account-billing-multiple-account-warning-label {
    border-radius: 5px;
    background: #FFF4D1;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 100%;
    align-items: center;
    margin: unset !important;
    box-shadow: none;
    border-radius: 0;
    max-width: 700px;
}

.cards-validations-warning-label {
    border-radius: 5px;
    background: #FFF4D1;
    box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.05);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 80%;
    align-items: center;
    margin-bottom: 50px;
}

.cards-validations-warning-grid-mode-label {
    border-radius: 5px;
    background: #fff;
    box-shadow: 
        0px 17px 5px 0px rgba(92, 92, 92, 0.00), 
        0px 11px 4px 0px rgba(92, 92, 92, 0.01), 
        0px 6px 4px 0px rgba(92, 92, 92, 0.05), 
        0px 3px 3px 0px rgba(92, 92, 92, 0.09), 
        0px -1px 1px 0px rgba(92, 92, 92, 0.10);
    padding: 15px;
    display: flex;
    margin: 0 auto;
    width: 80%;
    align-items: center;
    margin-bottom: 50px;
}

.disabled-input-element {
    background-color: #e7e7e7 !important;
}

.disabled-input-text-element {
    color: #e7e7e7 !important;
    cursor: not-allowed;
}

.new-set-popup-title {
    font-size: 15px;
    color: #717579;
}

.modal-final-result {
    margin-top: 48px;
    margin-bottom: 48px;
    border-top: 4px solid #F5F5F5;
    padding-top: 32px;
}

.modal-result-box {
    border-radius: 5px;
    background: linear-gradient(180deg, #FFF 0%, rgba(224, 224, 224, 0.29) 100%);
    box-shadow: 0px 13px 40px 0px rgba(0, 0, 0, 0.10);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 31%;
}

.modal-flipped-text {
    font-size: 16px;
    margin-top: 5px;
    text-align: center;
}

.modal-flipped-counter {
    font-size: 25px;
    font-weight: 600;
}

.modal-flipped-text.gr {
    color: #147131;
}

.modal-flipped-counter.gr {
    color: #7AC362;
}

.modal-flipped-text.or {
    color: #EE9C22;
}

.modal-flipped-counter.or {
    color: #FAC312;
}

.modal-flipped-text.pr {
    color: #58ACF6;
}

.modal-flipped-counter.pr {
    color: #458CCB;
    /*font-size: 14px;*/
}

.go-my-set-btn {
    display: block;
    width: 100%;
    background-color: #1EAE4B;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px;
    text-align: center;
    margin-bottom: 10px;
    border: 0;
    transition: all .2s cubic-bezier(0,.57,.22,.99);
}

.go-my-set-btn:hover {
    background-color: #1c9643;
    transition: all .3s cubic-bezier(0,.57,.22,.99);
}

.go-my-set-btn.outline {
    border: 1px solid #1EAE4B;
    color: #1EAE4B;
    margin-bottom: 30px;
    background-position: 100%;
    transition: all .3s cubic-bezier(0,.57,.22,.99);
    background-size: 220%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, white 50%);
}

.go-my-set-btn.outline:hover {
    background-position: 0%;
    color: white;
    transition: all .3s cubic-bezier(0,.57,.22,.99);
}

.fn-session-heading {
    font-size: 20px;
    font-weight: 600;
    color: #7D4FA0;
    margin-bottom: 20px;
}

.fn-more-sessions-card {
    background-color: white;
    padding: 10px 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.fn-session-text {
    font-size: 14px;
}

.fn-session-detail {
    font-size: 12px;
}

.fn-last-act-txt {
    color: #8D8D8D;
    font-size: 12px;
}

span.fn-progress-text {
    font-size: 14px;
    margin-right: 10px;
    color: #717579;
}

span.fn-progress-count {
    font-size: 14px;
    margin-left: 10px;
    color: #EE9C22;
}

no-border {
    border: 0;
}

.set-card-progress-bar-text-study-session {
    font-size: 19px;
}

.set-card-progress-bar-text-study-session-number {
    font-size: 16px;
    font-weight: 400;
    font-family: 'Duplet';
}

.mb-3 {
    margin-bottom: 3%;
}

.ai-study-box {
    border-radius: 12px;
    background: linear-gradient(180deg, #FACFF2 0%, #A98FED 100%);
    box-shadow: 0px 0px 20px 0px rgba(239, 241, 246, 0.50);
    padding: 10px 6px;
    max-width: 350px;
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
}

.ai-study-box-disabled {
    background: linear-gradient(180deg, #efebee 0%, #f7e8e8 100%) !important;
}
.goal-study-box {
    border-radius: 12px;
    background: white;
    box-shadow: 0px 0px 20px 0px rgba(239, 241, 246, 0.50);
    padding: 6px;
    max-width: 350px;
    margin-bottom: 10px;
    display: inline-block;
    margin-left: 0;
    border: 1px solid #EE9C22;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 10px;
}

.goal-study-box-detail {
    padding: 20px 15px 13px 15px;
    padding-top: 8px;
    padding-bottom: 0;
}

.goal-cancel-btn {
    color: #EB4D4D;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.goal-duration-btn {
    width: 50px;
    height: 50px;
    background: linear-gradient(180deg, #FFF 0%, #F6F6F6 100%);
    filter: drop-shadow(0px 0px 10px rgba(130, 130, 130, 0.25));
    border-radius: 50%;
    color: #747474;
    text-decoration: none;
    font-size: 13px;
    transition: all .2s;
    margin-right: 10px;
    font-weight: 600;
}

.goal-duration-btn:hover {
    background: #7AC362;
    color: white;
    transition: all .2s;
}
.goal-duration-btn-selected {
    background: #7AC362 !important;
    color: white;
    transition: all .2s;
}
.ai-study-box-detail {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.80);
  padding: 10px 10px;
}

.ai-study-heading{
  color: #464647;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.ai-study-detail {
    color: #717579;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    min-height: 10px;
}

.ai-study-btn {
    padding: 8px 15px;
    border-radius: 100px;
    background: #EE9C22;
    font-size: 14px;
    color: white;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: all .2s ease-in;
}

.ai-study-btn:hover,
.view-streak-btn:hover {
    background: #e19420;
    transition: all .2s ease-in;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.text-align-left {
    text-align: left;
}

.view-streak-btn {
    padding: 8px 15px;
    border-radius: 100px;
    background: white;
    font-size: 13px;
    color: #717579;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #EE9C22;
    background-color: #EE9C22;
    color: white !important;
    text-align: center;
    transition: all .3s ease-in;
}

.view-streak-btn + .view-streak-btn {
    background-color: transparent;
    margin-left: 10px;
    color: #717579;
    border: 1px solid #C4C4C4;
}

.view-streak-btn + .view-streak-btn:hover {
    color: white;
    background-color: #bdc2c7;
    transition: all .3s ease-in;
}

.reamain-time {
    font-size: 20px;
}

.reamain-left {
    font-size: 15px;
    color: #1EAE4B;
}

.activity-heading {
    font-size: 15px;
    color: #717579;
    font-weight: 600;
    margin-bottom: 20px;
}


.activity-detail-heading {
    font-size: 14px;
    color: #0C1423;
    font-weight: 400;
}

.activity-detail-time {
    font-size: 14px;
    color: #7AC362;
    font-weight: 600;
}

.view-prog-btn {
    font-size: 13px;
    color: #458CCB;
    text-decoration: none;
/*    border-bottom: 1.5px solid #EE9C22;*/
    font-weight: 600;
    text-align: center;
    transition: all .3s ease-in;
}

.view-prog-btn:hover {
    color: #52a2e9;
    transition: all .2s ease-in;
}

.ai-study-btn:hover {
    color: white;
}

.ai-bg-logo{
  position: absolute;
  bottom: 20px;
  right: 30px;
}

.goal-study-box.goal-current-progress {
    max-width: 400px;
    padding-bottom: 11px;
}

.goal-today-duration {
    font-size: 16px;
}

.goal-total-set-duration {
    font-size: 12px;
    color: #858585;
}

.goal-streak-box-change-month-btn {
    float: right;
    padding: 10px;
}

.goal-study-box.goal-current-progress .ai-study-heading {
    font-size: 15px;
}

.goal-streak-box {
    background-color: white;
    max-width: 400px;
    border-radius: 10px;
    width: 100%;
}

.goal-month {
    font-size: 20px;
    color: #242B42;
    font-weight: 600;
}

.goal-month-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #C4C4C4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-month-btn + .goal-month-btn {
    margin-left: 10px;
}

.goal-month-btn:hover {
    background-color: #C4C4C4;
    transition: all .2s;
}

.goal-streak-detai {
    text-align: center;
    margin-top: 20px;
}

.goal-total-time {
    color: #7AC362;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 0px;
}

.goal-total-time-warning {
    color: #EE9C22;
    font-size: 45px;
    font-weight: 600;
    margin-bottom: 0px;
}

.goal-message {
    color: #858585;
    font-size: 16px;
}

.no-padding {
    padding: 0;
}

.set-card-recent-session-info {
    color: #717579;
    font-size: 13px;
    margin: 0;
}

.w-150{
    width: 150px;
}

.w-150i {
    width: 150px !important;
}

.set-card-recent-session-info-studied-label {
    font-size: .75rem;
    color: #717579;
    text-align: right !important;
    width: 100%;
}

.completed-baseline-done-studying {
    padding: 15px 15px !important;
    float: left;
    width: 130px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    color: white !important;
    background-color: #458CCB;
    border-radius: 5px;
    margin: 0;
}

.completed-baseline-continue-studying {
    padding: 15px 15px !important;
    float: right;
    width: 210px;
    text-align: center;
    background-color: #EE9C22;
    cursor: pointer;
    text-decoration: none;
    font-size: 15px;
    color: white !important;
    border-radius: 5px;
    margin: 0;
}

.curriculum-subject-collap {
    border-radius: 100px;
    border: 1px solid #DFE7FF;
    background: #FAFBFF;
    padding: 15px 25px;
    width: 76%;
    font-size: 15px;
    color: #0C1423;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.curriculum-subject-collap span {
    transform: rotate(90deg);
    transition: .2s all ease-in;
}

.curriculum-subject-collap.collapsed span {
    transform: rotate(0deg);
    transition: .2s all ease-in;
}


#share-offer-receiver-email {
    height: 100%;
}

#share-offer-message {
    height: 100%;
}

.empty-box-image-card {
    height: 58px;
    width: 58px;
}

.match-game-bg {
    background: linear-gradient(297deg, rgba(227, 228, 255, 0.90) 0%, rgba(69, 140, 203, 0.90) 100%);
    backdrop-filter: blur(10px);
    height: 95vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /*overflow-y: auto !important;*/
}

.match-game-img {
    width: 70%;
}

.match-game-box {
    border-radius: 20px;
    background: #FFF;
    padding: 40px 25px 25px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1000px;
}

.match-game-heading {
    color: #0C1423;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 50px;
}

.match-game-exit-btn {
    font-size: 16px;
    color: #5B5B5B;
    border-radius: 5px;
    border: 1px solid #D9D9D9;
    font-weight: 400;
    text-decoration: none;
    padding: 10px 15px;
    transition: all .2s;
}

    .match-game-exit-btn:hover {
        color: #0C1423;
        background: white;
        transition: all .2s;
    }

    .match-game-exit-btn:active {
        transform: scale(0.95);
        transition: all .2s;
    }

.match-game-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 40px;
}

.match-game-description {
    color: #8D929A;
    font-size: 18px;
    line-height: 1.6;
    width: 70%;
    text-align: center;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 50px;

}

.match-question-box {
    display: flex;
    justify-content: space-between;
}

.match-game-rule-box {
    display: flex;
    width: 70%;
    justify-content: space-between;
    margin: auto;
}

.game-rule-box-l {
    width: 45%;
}

.rule-box-heading {
    color: #FF6175;
    font-size: 18px;
    margin-left: 10px;
    margin-bottom: 0px !important;
}

.rule-box-desrciption {
    color: #717579;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 20px;
}

.sum-button-p {
    width: 80%;
    display: flex;
    justify-content: center;
}

.game-start-btn,
.back-to-learning {
    border-radius: 100px;
    font-size: 15px;
    padding: 12px 50px;
    text-decoration: none;
    display: inline-block;
    margin-top: 40px;
    text-align: center;
    transition: all .5s cubic-bezier(0,.57,.22,.99);
}

.game-start-btn:hover {
    background-color: #23cb58;
    transform: scale(1.05);
    transition: all .5s cubic-bezier(0,.57,.22,.99);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.game-start-btn:active {
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transform: scale(1);
    transition: all .1s cubic-bezier(0,.57,.22,.99);
}

.back-to-learning:hover {
    color: #D52027;
}

.game-start-btn {
    background: #1EAE4B;
    color: white;
}

.back-to-learning {
    background: transparent;
    color: #D52027;
    border: 1px solid #D52027;
    margin-right: 10px;
}

.match-game-comp-pop .game-start-btn {
    margin-top: 20px;
}

.question-set-heading {
    color: #0C1423;
    font-size: 20px;
    font-weight: 600;
    align-self: flex-start;
    margin-bottom: 40px;
}

.match-question-list {
    width: 35%;
    margin-right: 25px;
}

.match-question-card-inner {
    display: flex;
    margin-bottom: 10px;
}

.match-question-list-in-box {
    background: #FAFAFA;
    padding: 20px 15px;
    max-height: 530px;
}

.match-question-card-list {
    color: #5B5B5B;
    padding: 10px;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    max-width: 425px;
    min-width: 365px;
    margin-bottom: 10px;
    min-height: 80px;
}

.drag-match-question-card-list {
    color: #5B5B5B;
    padding: 10px;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    max-width: 425px;
    min-width: 365px;
    margin-bottom: 10px;
    height: 100%;
}

.question-card-number {
    width: 25px;
    height: 23px;
    border-radius: 50%;
    background-color: rgba(69, 140, 203, 0.10);
    color: #458CCB;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

.drag-question-card-number {
    width: 30px;
    height: 23px;
    border-radius: 50%;
    background-color: rgba(69, 140, 203, 0.10);
    color: #458CCB;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

.match-question-heading {
    margin: 0 10px;
    color: #5B5B5B;
    font-size: 14px;
    width: 80%;
}

.match-answer-list-in-box {
    background: #FAFAFA;
    padding: 20px 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: hidden;
    align-content: flex-start;
}

.match-answer-list {
    width: 65%;
    max-height: 530px;
    overflow: auto;
}

.match-ans-card {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    font-size: 14px;
    color: #858585;
    width: 48%;
    margin-bottom: 15px;
    position: relative;
    cursor: pointer;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: backwards;
}

.card-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 20px;
    color: #147131;
    background-color: #EAFFE3;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}

.card-indicator.wrong {
    color: #FF6175;
    background-color: #FFE8E8;
}

.match-ans-card:hover .card-indicator,
.test-me-choices-box:hover .card-indicator {
    animation: puffIn .5s cubic-bezier(0,.59,.15,1) both;
}

.match-ans-card:hover .card-indicator.wrong,
.test-me-choices-box:hover .card-indicator.wrong {
    animation: tinDownOut .8s cubic-bezier(0,.59,.15,1) both;
}

.drag-match-ans-card {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
    padding: 14px 16px;
    font-size: 14px;
    color: #858585;
    width: 100%;
    height:100%;
    text-align: left;
    z-index: 99;
}

.game-question-img {
    display: block;
    margin-top: 10px;
}

.match-questions-counter {
    display: flex;
    justify-content: space-between;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
    width: 100%;
    padding-top: 5%;
}

.match-question-title {
    font-size: 14px;
    color: #0C1423;
    padding-left:5px;
}

.match-question-counter {
    color: #458CCB;
}

.match-ans-counter {
    color: #EE9C22;
}

.match-card-correct-ind {
    border: 1px solid #147131;
    background-color: #EAFFE3;
    color: #147131;
}

/*.match-card-correct {
    border: 1px solid #147131;
    background: #EAFFE3;
}*/

/*.match-card-error-ind {
    border: 1px solid #EB4D4D;
}*/

/*.match-card-error {
    border: 1px solid #FF6175;
    background: #FFE8E8;
}*/

.keyboard-controls-buttons {
    perspective: 1300px;
}

.mr-2 {
    margin-right: 2%;
}

.match-card-voice-btn {
    background: none;
    border: none;
    background-color: #6A5AE0;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    justify-content: center;
    align-items: center;
    padding: 4px;
}

.match-card-voice-btn-test-me {
    display: block;
    margin-left: 0% !important;
    margin-top: 7%;
}

.match-card-btn {
    border-radius: 100px;
    background: #EE9C22;
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 10px 19px;
    align-self: flex-start;
}

.choose-ans-btn {
    border-radius: 100px;
    background: transparent;
    font-size: 13px;
    color: #595959;
    text-decoration: none;
    padding: 7px 14px;
    display: inline-block;
    border: 1px solid #7B7B7B;
}

.choose-ans-btn-wrong {
    border-radius: 100px;
    background: #EB4D4D;
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 7px 14px;
    display: inline-block;
    border: 1px solid transparent;
}

.choose-ans-btn-correct {
    border-radius: 100px;
    background: #7AC362;
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 7px 14px;
    display: inline-block;
    border: 1px solid transparent;
}

.responsive-card-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 28px;
}

.back-btn-rs {
    background: none;
    border: none;
    font-size: 14px;
    color: #0C1423;
    display: flex;
    align-items: center;
}

    .back-btn-rs svg {
        margin-right: 10px;
    }

.rs-top-ans {
    font-size: 13px;
    color: #0C1423;
}

.matchinggame-responsive-truncate-box {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    max-height: 200px;
}

.matching-game-image-small {
    width: 70px !important;
    height: 70px !important;
}

.mh-70 {
    min-height: 70px;
}

.matchinggame-title-text {
    color: #0C1423;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    word-break: break-all;
    padding: 15px;
    text-align: left;
}

.matchinggame-answer-header-text {
    padding: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.choose-ans-btn-wrong:hover {
    color: white;
}
.choose-ans-btn-correct:hover {
    color: white;
}
.min-h-80 {
    min-height: 80px;
}

.matchinggame-congrats-title {
    color: #0C1423;
    font-size: 30px;
    font-weight: 600;
}

.matchinggame-congrats-description {
    color: #8D929A;
    font-family: Duplet;
    font-weight: 300;
    font-size: 15px;
}

#matching-game-confirm-completed-btn {
    background: #1EAE4B;
    width: 233px;
    margin: auto;
    border-radius: 100px;
    height: 50px;
    padding: 12px 10px;
    color: white !important;
    margin-bottom: 3%;
    margin-top: 5%;
    border: 0;
}

.matching-game-correct-completed.drag-match-ans-card {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: backwards;
    opacity: 1;
    animation: puffIn .5s cubic-bezier(0,.59,.15,1) both;
}

.matchinggame-dragdrop-incorrect.drag-match-ans-card.margin-auto.position-relative {
    animation: tinDownOut .8s cubic-bezier(0,.59,.15,1) both;
}

.min-h-55 {
    min-height: 55px;
}

.matchrs-top-ans {
    font-size: 14px;
}

.matchinggame-cardbox-answer {
   float: left;
    margin: auto;
    margin-left: 2%;
}

.matchinggame-cardbox-question {
    float: left !important;
}

.matchinggame-list-dragdrop {
    padding-top: 35px;
}

#matching-game-left-list {
    overflow-y: auto;
    height: 55vh;
}

.matchinggame-left-list {
    background: #FAFAFA;
    max-width: 330px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 30px;
}

#matching-game-left-list::-webkit-scrollbar {
    width: 13px;
    background-color: #e2e2e2;
}

#matching-game-left-list::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #7D4FA0;
}

#dailyGoalTodayProgressModal_dialog-content::-webkit-scrollbar {
    width: 13px;
    background-color: #e2e2e2;
}

#dailyGoalTodayProgressModal_dialog-content::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #7D4FA0;
}

.matchinggame-right-list {
    background: #FAFAFA;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
}

.matchinggame-bg-dragdrop {
    background: #FAFAFA;
}

.matchinggame-dragdrop-incorrect {
    background: #FFE8E8 !important;
    border: 1px solid #FF6175 !important;
}

.matchinggame-dragdrop-correct {
    border: 1px solid #147131 !important;
    background: #EAFFE3 !important;
}

.matchinggame-dragdrop-truncate-box {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    max-height: 123px;
}

.ml-2 {
    margin-left: 2%;
}

.matchinggame-dragdrop-title-questions-parent {
    position: relative;
    width: 320px;
    padding-bottom: 10px;
}

.matchinggame-dragdrop-title-questions-remaining-text {
    position:absolute;
    right: 0;
}

.max-h-50 {
    height: 50px !important;
}

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

.matching-game-image-small-60 {
    width: 60px;
    height: 60px;
}

.matching-game-correct-completed {
    background: #EAFFE3 !important;
}

.mt-6 {
    margin-top: 6%;
}
.card-correct-img-cross {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 30%;
    left: 43%;
    color: green;
}

.card-correct-text {
    position: absolute;
    bottom: 10%;
    left: 30%;
    font-family: 'Duplet';
    font-size: 30px;
    font-weight: bold;
    color: green;
    -webkit-text-stroke: 1px #F8F8F8;
    text-shadow: 0px 1px 4px #23430C;
}

.card-incorrect-img-cross {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 30%;
    left: 43%;
    color: red;
}

.card-incorrect-text {
    position: absolute;
    bottom: 10%;
    left: 30%;
    font-family: 'Duplet';
    font-size: 30px;
    font-weight: bold;
    color: red;
    -webkit-text-stroke: 1px #F8F8F8;
    text-shadow: 0px 1px 4px #23430C;
}

.pulse {
    animation: pulse-animation .6s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1); }
    10% { transform: scale(1.005); }
    20% { transform: scale(1.01); }
    30% { transform: scale(1.015); }
    40% { transform: scale(1.02); }
    50% { transform: scale(1.025); }
    60% { transform: scale(1.02); }
    70% { transform: scale(1.015); }
    80% { transform: scale(1.01); }
    90% { transform: scale(1.005); }
    100% { transform: scale(1); }
}

.disabled-opacity {
    opacity: .3;
    cursor: not-allowed;
}

.mobile-description-scrollbar {

}

.user-daily-goal-progressbar {
    margin-top: -8%;
    margin-left: -4%;
}

.ai-study-detail-daily-goal-progress {
    color: #464647;
    font-size: 20px;
    font-weight: 600;
}

.pt-15 {
    padding-top: 15px;
}

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

.daily-goal-view-streak-progress {
    padding-top: 18px;
    margin-bottom: -4px;
}

.daily-goal-month-title-modal {
    color: #7D4FA0;
    font-size: 22px;
    font-weight: 600;
}

.card-create-mode-box {
    background-color: rgba(238, 156, 34, .1);
    padding: 5px;
    border-radius: 5px;
    display: inline-flex;
}

.card-create-mode-btn {
    padding: 10px 20px;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 14px;
    color: #EE9C22;
    border-radius: 5px;
}

.card-create-upload-btn {
    font-size: 14px;
    color: #7AC362;
    border: none;
    border-bottom: 1px solid #7AC362;
    outline: none;
    margin-left: 20px;
    background-color: transparent;
    font-weight: 600;
    padding: 0 0 1px 0;
}

.file-upload-instruction {
    outline: none;
    background: transparent;
    border: none;
}

.card-create-mode-btn.active {
    background-color: white;
    color: #EE9C22;
}

.pl-0i {
    padding-left: 0 !important;
}

text {
    font-family: 'Duplet' !important;
}

.create-card-normal-view {
    padding: 30px 27px 60px;
}

.create-card-grid-view {
    padding: 30px 0;
}

.grid-top-row-detail {
    display: flex;
    font-size: 15px;
    color: #717579;
    font-weight: 600;
    margin-bottom: 10px;
}

.grid-creating-table-row {
    display: flex;
    font-size: 15px;
    color: #6A6A6A;
}

    .grid-creating-table-row:last-child {
        border-bottom: 1px solid #9D9D9D;
    }

.grid-col-number-box,
.grid-col-number-cell {
    width: 2%;
}

.grid-col-question-box,
.grid-col-question-cell {
    width: 48%;
}

.grid-col-ans-box,
.grid-col-ans-cell {
    width: 48%;
}

.grid-col-number-box,
.grid-col-question-box,
.grid-col-ans-box {
    flex-grow: 1;
}

.grid-col-number-cell,
.grid-col-question-cell,
.grid-col-ans-cell {
    border: 1px solid #9D9D9D;
    background: #FFF;
    align-items: center;
    display: flex;
    color: #6A6A6A;
    padding-left: 5px;
    border-bottom: 0;
    flex-grow: 1;
}

.grid-col-ans-cell,
.grid-col-question-cell {
    border-left: 0;
}

    .grid-col-number-cell,
    .grid-col-question-cell,
    .grid-col-ans-cell:focus {
        outline: none;
    }

.card-file-btn {
    background-color: #EAFFE3;
    border: 1px dashed #147131;
    padding: 30px 15px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto 20px auto;
    display: block;
    cursor: pointer;
}

.card-file-btn-disabled {
    background-color: #dbdbdb;
    padding: 30px 15px;
    border-radius: 10px;
    width: 90%;
    margin: 0 auto 20px auto;
    display: block;
    cursor: pointer;
    border: 0;
    cursor: not-allowed;
}

.filter-section {
    width: 40%
}

.view-link {
    font-size: 13px !important;
    text-decoration: none !important;
    width: 100px !important;
    margin-left: 10px;
}

.card-p {
    font-size: 12px;
    color: #999999;
}

.teacher-user-stats-select-user {
    padding-top: 8px;
    width: 99.8%;
    padding-bottom: 8px;
    border-radius: 5px;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.cursor-not-allowed #email-text {
        cursor: not-allowed !important;
}

.cursor-normal {
    cursor:default !important;
}

.card-file-prog-box {
    width: 90%;
    margin: 0 auto;
    display: block;
}

.upload-file-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-file-heading {
    font-size: 16px;
    color: #147131;
    margin-bottom: 0px;
}

.upload-file-ins {
    font-size: 13px;
    color: #A9A9A9;
    margin-bottom: 0px;
}

.upload-perc {
    font-size: 13px;
    font-style: italic;
    color: #A9A9A9;
}

.card-btn-upload {
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 100px;
    border: 1px solid #FF6175;
    color: #EB4D4D;
    display: inline-block;
    font-size: 14px;
}

.modal-set-button-group {
    width: 90%;
    margin: 20px auto 0 auto;
}


.file-upload-ins-vid {
    height: 200px;
    width: 100%;
    background: #C4C4C4;
    margin-bottom: 30px;
}

.upload-detail-para {
    font-size: 14px;
    color: #4C4C4D;
    margin-bottom: 10px;
}

.upload-detail-para ~ li {
    font-size: 14px;
    color: #4C4C4D;
    padding-left: 10px;
    list-style-position: outside;
    margin-bottom: 10px;
}

.padding-h-50 {
    padding-left: 50px;
    padding-right: 50px;
}

.width-7 {
    width: 7%;
}
.mr-7 {
    margin-right: 7%;
}

.pl-40 {
    padding-left: 40px;
}

.importing-card-uploading-drag-enter-bg {
    background-color: #cdfcbd !important;
}

.share-offer-share-link-url {
    background-color: #FF6175;
    color: white;
    text-decoration: none;
    padding: 17px 30px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
    width: 100%;
    word-wrap: break-word;
}

.share-offer-share-link-url-copied-text {
    word-wrap: break-word;
    background-color: transparent;
    padding: 10px;
    width: 100px;
    color: black;
    font-size: 14px;
    text-decoration: none;
}

.font-bold-600 {
    font-weight: 600;
}

.font-bold {
    font-weight: bold;
}

.share-offer-received-offer-img {
    width: 120px;
    height: 120px;
}

.m0 {
    margin: 0;
}

.ml-2-important {
    margin-left: 2%;
}

.set-card-question {
    flex-grow: 1;
}

.btn-test-me {
    color: #7AC362;
}

.btn-test-me:hover {
    color: #7AC362;
}

#test-me-completed-modal {
    border-radius: 20px;
    background: conic-gradient(from 128deg at 50% 50%, #FEEAD7 25.215857326984406deg, #FFF9E6 158.29936265945435deg, #FFFAEC 194.547700881958deg, #FFE7EA 339.6006202697754deg);
    max-width: 600px;
    width: 100%;
    padding: 20px 40px;
    padding-top: 20px;
}

#test-me-modal {
    border-radius: 20px;
    background: conic-gradient(from 128deg at 50% 50%, #FEEAD7 25.215857326984406deg, #FFF9E6 158.29936265945435deg, #FFFAEC 194.547700881958deg, #FFE7EA 339.6006202697754deg);
    max-width: 600px;
    width: 100%;
    padding: 20px 40px;
    padding-top: 20px;
}

.test-me-question-row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    align-items: flex-start;
}

.test-me-ques-heading {
    color: #0C1423;
    font-size: 18px;
    width: 100%;
}

.q-indi-for-q {
    color: #FF6175;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.test-me-result-ms {
    color: #9D630D;
    font-size: 14px;
    display: block;
    margin-bottom: 10px;
    margin-top: 25px;
    /* animation: ans-swing-return 0.6s ease-out; */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
    animation-duration: 1s;
    animation-fill-mode: backwards;
}

.test-me-result-ms-correct {
    color: #7AC362;
    animation-name: ans-swing-return;
}

.test-me-result-ms-wrong {
    color: #FF6175;
    animation-name: sans-swing-wrong;
}

.test-me-modal .modal-content {
    background-color: transparent;
    border: none;
}

.test-me-sele-ans-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.test-me-check {
    width: 22px;
    height: 22px;
    background-color: white;
    border: 1px solid #858585;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    cursor: pointer;
}

.test-me-ans {
    display: flex;
}

.test-me-check-box {
    display: none;
}

.test-me-check-box:checked + .test-me-check.ch-correct {
    background-color: #7AC362;
    border-color: #147131;
    transition: all .2s;
}

.test-me-check-box-wr:checked + .test-me-check.ch-wrong {
    background-color: #EB4D4D;
    border-color: #D52027;
    transition: all .2s;
}

.test-me-choices-box {
    border-radius: 5px;
    border: 1px solid #FFF;
    background: rgba(255, 255, 255, 0.60);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 10px 15px;
    width: 49%;
    margin-bottom: 12px;
    transition: all .1s;
    transform: scale(1);
    cursor: pointer;
    min-height: 67px;
}

    .test-me-choices-box:hover {
        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.10);
        transition: all .1s;
        transform: scale(1.05);
    }

    .test-me-choices-box:active,
    .test-me-choices-box:focus {
        transform: scale(1);
    }

.test-me-ans-text {
    font-size: 13px;
    color: #696969;
    margin-left: 10px;
    float: right;
    width: 100%;
}

.test-me-summary-result {
    border: 3px solid #FF6175;
    background-color: white;
    color: #7AC362;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    margin-top: 25px;
}

.test-me-sum-total {
    font-size: 40px;
    color: #7AC362;
}

.test-me-total-q {
    font-size: 20px
}

.test-me-sum-heading {
    font-size: 20px;
    color: #D52027;
    margin-bottom: 5px
}

.test-me-sum-detail {
    font-size: 13px;
    color: #676767;
}

.test-me-confirmation {
    max-width: 400px;
    width: 100%;
    padding: 20px;
}

.test-me-top-row {
    width: 100%;
    align-items: center;
    margin-bottom: 30px
}

.test-me-con-h {
    font-size: 17px;
    color: #0C1423;
}

.test-btn-con {
    font-size: 15px;
    border-radius: 100px;
    padding: 10px 40px;
    border: 1px solid;
    text-decoration: none;
}

    .test-btn-con.confirm {
        background-color: #7AC362;
        border-color: #147131;
        color: white;
    }

    .test-btn-con.cancel {
        background-color: #E7E7E7;
        border-color: #A7A7A7;
        color: #888888;
        margin-left: 20px;
    }

/*
 * ----------------------------------------
 * animation swing-in-bottom-bck
 * ----------------------------------------
 */
@keyframes ans-swing-return {
    0% {
        transform: rotateX(-70deg);
        transform-origin: bottom;
        opacity: 0;
    }

    100% {
        transform: rotateX(0);
        transform-origin: bottom;
        opacity: 1;
    }
}

@keyframes sans-swing-wrong {
    0% {
        transform: rotateX(80deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

.justify-content-end {
    justify-content: end !important;
}

.test-me-image {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    object-fit: contain;
}

.test-me-image-ans {
    margin: auto;
    float: right;
    object-fit: contain;
}

.color-white {
    color: white !important;
}

.user-badge-notify {
    display: flex;
    align-items: center;
}

.user-badge-notify {
    border-radius: 5px;
    border: 1px solid #7AC362;
    background: #FFF;
    padding: 10px;
    margin-bottom: 3%;
}

.user-badge-notify.orange {
    border: 1px solid #EE9C22;
}

.user-badge-notify-icon {
    background-color: #7AC362;
    padding: 10px;
}

.user-badge-notify-icon.orange {
    background-color: #EE9C22;
}

.user-badge-notify-detail {
    font-size: 14px;
    color: #676767;
    margin-left: 15px;
    margin-bottom: 0;
    width: 100%;
    padding-right: 10px;
}

    .user-badge-notify-detail.orange {
        color: #EE9C22;
    }

.p-15 {
    padding: 15px;
}

.form_span.login-input-disabled.e-input-group.e-control-container.e-control-wrapper.e-valid-input.valid {
    background: #efefef;
}

.form_span.e-input-group.e-control-container.e-control-wrapper.e-valid-input.valid {
    background: #efefef;
}


.swap-opt-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.swap-title {
    font-size: 16px;
    color: #0C1423;
    font-weight: normal;
}

.form-check-input.swap-opt-input {
    font-size: 21px
}

    .form-check-input.swap-opt-input:active {
        filter: none;
    }

    .form-check-input.swap-opt-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(122, 195, 98, 0.25);
        border-color: #7AC362;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='grey'/%3e%3c/svg%3e");
    }

    .form-check-input.swap-opt-input:checked:focus {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }


    .form-check-input.swap-opt-input:checked {
        background-color: #7AC362;
        border-color: #7AC362;
    }

.ml-1 {
    margin-left: 1%;
}

#imageSearcherModalComponentDialog {
    max-width: 1200px;
    min-height: 500px;
    height: 90%;
    max-height: 90%;
}

.image-searcher-list {
    width: 95%;
    margin: auto;
    margin-top: 15px;
    height: 80%;
    overflow-y: auto;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background-color: #00000008;
}

.image-searcher-item-img-container {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
}

.image-searcher-item-img-container span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

.image-searcher-list::-webkit-scrollbar {
    width: 13px;
    background-color: #e2e2e2;
}

.image-searcher-list::-webkit-scrollbar-thumb {
    background-color: #7D4FA0;
    border-radius: 0;
}

.image-searcher-search-input-text-container {
    width: 87%;
    margin: auto;
    margin-top: 20px;
}

.image-seacher-seach-input-text-clear {
    margin-top:7px;
    float: right;
}

.image-searcher-item {
    height: 255px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-searcher-item-img {
    height: 100%;
    width: 100%;
    border-radius: 5px;
    object-fit: contain;
}

.image-searcher-confirm-btn-disabled {
    background: #635d5d !important;
    opacity: 0.85;
    cursor: no-drop !important;
}

#imageSearcherModalComponentDialog_dialog-content {
    padding-top: 0;
}

.image-searcher-confirm-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 20%;
    margin: auto;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border: 3px solid white;
}

.image-searcher-item-img-selected {
    border-style: solid;
    border-color: #1EAE4B;
    border-width: 8px;
    border-radius: 15px;
}

.image-searcher-search-input-text {
    border-radius: 5px !important;
    border: 0.5px solid #C4C4C4 !important;
    background: #FFF !important;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    padding: 10px 15px;
    width: 92% !important;
    font-family: "Duplet" !important;
    float: left;
}

.learning-card-row {
    margin-bottom: 0.5rem;
}

.mb-05 {
    margin-bottom: 0.5rem;
}

.mr-1 {
    margin-right: 1%;
}

.modal-final-result-progress {
    margin-bottom: 0px;
    margin-top: 25px;
}

.set-card-recent-session-info-studied-label-today-progress {
    font-size: .75rem;
    color: #717579;
    text-align: left;
    width: 40%;
}

.tip-box {
    background-color: white;
    border-radius: 10px;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    padding: 30px 20px;
}

.tip-top-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tip-img {
    width: 20%;
}

.tip-heading {
    font-size: 20px;
    margin-left: 10px;
    font-weight: 600;
}

.tip-detail-box {
    border-radius: 10px;
    border: 1px solid rgba(69, 140, 203, 0.50);
    background: rgba(69, 140, 203, 0.10);
    padding: 10px 15px;
    margin-bottom: 20px;
}

.tip-detail-heading {
    color: #458CCB;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.tip-description {
    color: #203B81;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.tip-detail-link {
    text-decoration: none;
    color: #2C9CFF;
}

.tip-function-box {
    display: flex;
}

.tip-func-buttons {
    display: flex;
}

.tip-func-btn {
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 100px;
    padding: 10px 20px;
}

    .tip-func-btn.gr {
        background-color: #7AC362;
        color: white;
    }

    .tip-func-btn.outline {
        background-color: white;
        color: #0C1423;
        border: 1px solid #858585;
        margin-left: 10px;
    }

.tip-share-box {
    margin-left: auto;
}

.tip-share-buttons {
    position: relative;
}

.tip-share-btn {
    border-radius: 100px;
    background-color: #EDEDED;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    transition: all .2s;
}

.further-function-box {
    position: absolute;
    background-color: #FFF;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.10);
    padding: 10px 15px;
    width: 250px;
    right: 0;
    top: -540%;
    opacity: 0;
    display: none;
}

.further-function-box.feedback {
    right: 30px;
    top: -200px;
}

.further-function-box.collect {
    right: 50px;
    top: -150px;
}

.further-function-box-row {
    margin-bottom: 10px;
}

.further-heading {
    color: #0C1423;
    font-size: 13px;
    font-weight: 600;
}

.further-input {
    background-color: #F5F5F5;
    font-size: 14px;
    display: block;
    padding: 10px;
    border: none;
    outline: none;
    border-radius: 5px;
    width: 100%;
    margin-bottom: 15px;
}

.further-input.feedback {
    height: 80px;
}

.further-function-btn {
    color: white !important;
    border-radius: 5px;
    background: #7AC362;
    font-size: 14px;
    display: inline-block;
    padding: 7px 15px;
    text-decoration: none;
}

.tip-share-btn-liked {
    background-color: #EAFFE3 !important;
    transition: all .2s;
}

.tip-share-btn:hover svg path {
    stroke: rgba(122, 195, 98, 1);
    transition: all .2s;
}

.further-function-para {
    font-size: 14px;
    color: #A5A5A5;
}

.opacity-3 {
    opacity: .3;
}

.set-card-reminder {
    margin-right: auto;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #676767;
    font-weight: 600;
    position: relative;
}

.reminder-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
    border: none;
    margin-right: 5px;
}

.reminder-btn:hover {
    background-color: #7AC362;
}

.reminder-btn:hover .reminder-btn-svg path {
    stroke: #fff;
}

.set-reminder-options {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    position: absolute;
    bottom: 50px;
    width: 100%;
}

.reminder-options-list {
    font-size: 14px;
    color: #717579;
    padding: 10px 25px;
    list-style: none;
    text-align: left;
    transition: all .2s;
}

.reminder-options-list:hover {
    background-color: #EAFFE3;
    color: #147131;
    transform: scale(1.05);
    transition: all .2s;
}

.reminder-options-list:not(:last-child) {
    border-bottom: 1px solid #F3F3F3;
}

.set-btn-my-sets {
    padding-right: 13px;
    padding-left: 4px;
}

.set-btn-study {
    padding-right: 0;
    padding-left: 13px;
}

.goal-streak-calender {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goal-streak-date {
    font-size: 17px;
    padding: 5px 10px;
    color: #242B42;
    position: relative;
}

.goal-streak-date.not-achieved {
    color: #EE9C22;
}

.goal-streak-date.not-studied {
    color: #EB4D4D;
}

.goal-streak-tooltip {
    background-color: white;
    padding: 10px 15px;
    border-radius: 5px;
    position: absolute;
    width: 200px;
    left: -89px;
    top: 45px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.05);
}

.goal-streak-tooltip::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    transform: translate(-50%,50%) rotate(45deg);
    background-color: #fff;
    top: -20px;
}

.goal-t-heading {
    font-size: 25px;
    color: #7AC362;
    font-weight: 600;
}

.goal-t-message {
    font-size: 14px;
    color: #858585;
}

.goal-streak-date.achieved {
    background-color: #7AC362;
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 0px;
    text-align: center;
}
.tip-share-btn-tooltip:hover {
    background-color: #EAFFE3;
    transition: all .2s;
}

.tip-share-btn-tooltip:hover + .further-function-box {
    opacity: 1;
    transition: all .2s;
    display: initial;
}

.further-function-box-tooltip {
    right: -20% !important;
    top: -300% !important;
}

.bottom-arrow-feedback {
    border-bottom: 5px solid white;
}

.bottom-arrow-feedback:after {
    content: '';
    position: absolute;
    left: 0;
    right: -60%;
    bottom: -10%;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 12px solid white;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.bottom-arrow-like {
    border-bottom: 5px solid white;
}

.bottom-arrow-like:after {
    content: '';
    position: absolute;
    left: 0;
    right: -20%;
    bottom: -10%;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 12px solid white;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.bottom-arrow-share {
    border-bottom: 5px solid white;
}

.bottom-arrow-share:after {
    content: '';
    position: absolute;
    left: 0;
    right: 20%;
    bottom: -10%;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 12px solid white;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.notifications-bell-icon {
    width: 25px;
    height: 25px;
    margin-right: 1%;
}

.set-reminder-options.dropdown-menu.show {
    transform: translate3d(-25px, -200px, 0px);
}

.set-reminder-already-set-label {
    color: #C4C4C4;
    font-family: 'Duplet';
    font-size: 13px;
    font-weight: normal;
    display: block;
}

.reminder-btn-green-already-set {
    background-color: #7AC362;
}

.reminder-btn-green-already-set .reminder-btn-svg path {
    stroke: #fff;
}

/*
 * ----------------------------------------
 * animation Saving
 * ----------------------------------------
 */

.sk-circle {
    margin-right: 10px;
    width: 25px;
    height: 25px;
    position: relative;
}

    .sk-circle .sk-child {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

        .sk-circle .sk-child:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
        }

    .sk-circle .sk-circle2 {
        transform: rotate(30deg);
    }

    .sk-circle .sk-circle3 {
        transform: rotate(60deg);
    }

    .sk-circle .sk-circle4 {
        transform: rotate(90deg);
    }

    .sk-circle .sk-circle5 {
        transform: rotate(120deg);
    }

    .sk-circle .sk-circle6 {
        transform: rotate(150deg);
    }

    .sk-circle .sk-circle7 {
        transform: rotate(180deg);
    }

    .sk-circle .sk-circle8 {
        transform: rotate(210deg);
    }

    .sk-circle .sk-circle9 {
        transform: rotate(240deg);
    }

    .sk-circle .sk-circle10 {
        transform: rotate(270deg);
    }

    .sk-circle .sk-circle11 {
        transform: rotate(300deg);
    }

    .sk-circle .sk-circle12 {
        transform: rotate(330deg);
    }

    .sk-circle .sk-circle2:before {
        animation-delay: -1.1s;
    }

    .sk-circle .sk-circle3:before {
        animation-delay: -1s;
    }

    .sk-circle .sk-circle4:before {
        animation-delay: -0.9s;
    }

    .sk-circle .sk-circle5:before {
        animation-delay: -0.8s;
    }

    .sk-circle .sk-circle6:before {
        animation-delay: -0.7s;
    }

    .sk-circle .sk-circle7:before {
        animation-delay: -0.6s;
    }

    .sk-circle .sk-circle8:before {
        animation-delay: -0.5s;
    }

    .sk-circle .sk-circle9:before {
        animation-delay: -0.4s;
    }

    .sk-circle .sk-circle10:before {
        animation-delay: -0.3s;
    }

    .sk-circle .sk-circle11:before {
        animation-delay: -0.2s;
    }

    .sk-circle .sk-circle12:before {
        animation-delay: -0.1s;
    }

    .sk-circle .sk-circle1:before,
    .sk-circle .sk-circle2:before,
    .sk-circle .sk-circle3:before,
    .sk-circle .sk-circle4:before,
    .sk-circle .sk-circle5:before,
    .sk-circle .sk-circle6:before,
    .sk-circle .sk-circle7:before,
    .sk-circle .sk-circle8:before,
    .sk-circle .sk-circle9:before,
    .sk-circle .sk-circle10:before,
    .sk-circle .sk-circle11:before,
    .sk-circle .sk-circle12:before {
        background-color: orange;
    }


@-webkit-keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-circleBounceDelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/*
 * ----------------------------------------
 * animation Classes
 * ----------------------------------------
 */
.bombLeftOut {
    animation-name: bombLeftOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.puffIn {
    animation-name: puffIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.slideDown {
    animation-name: slideDown, /*puffOut*/;
    animation-duration: 1s, 1s;
    animation-delay: 0s, 2s;
    animation-timing-function: cubic-bezier(.55,-0.09,.62,1.2);
}

.tinDownOut {
    animation-name: tinDownOut;
}

@keyframes bombLeftOut {
    0% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: rotate(0deg);
        -webkit-filter: blur(0px);
        filter: blur(0px);
    }

    50% {
        opacity: 1;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
        filter: blur(0px);
    }

    100% {
        opacity: 0;
        transform-origin: -100% 50%;
        transform: rotate(-160deg);
        filter: blur(20px);
    }
}

@keyframes puffIn {
    0% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(1.3);
        filter: blur(2px);
    }

    100% {
        opacity: 1;
        transform-origin: 50% 50%;
        transform: scale(1);
        filter: blur(0px);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform-origin: 0 0;
        transform: translateY(-80%);
    }

    100% {
        opacity: 1;
        transform-origin: 0 0;
        transform: translateY(0%);
    }
}

@keyframes puffOut {
    100% {
        opacity: 0;
        transform-origin: 50% 50%;
        transform: scale(1.1);
        filter: blur(2px);
    }
}

@keyframes tinDownOut {
    0%, 20%, 40%, 50% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
    }

    10%, 30% {
        opacity: 1;
        transform: scale(1.1, 1.1) translateY(0);
    }

    100% {
        opacity: 1;
        transform: scale(1, 1) translateY(0);
    }
}

@keyframes pulse-black {
    0% {
        box-shadow: 0 0 0 0 rgba(238, 156, 34, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(238, 156, 34, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(238, 156, 34, 0);
    }
}

.font-normal {
    font-weight: normal !important;
}
.custom-tooltop-bottom-arrow {
    position: absolute;
    border-bottom: 5px solid white;
    bottom: -12%;
}

.custom-tooltop-bottom-arrow:after {
    content: '';
    position: absolute;
    left: 0;
    right: 20%;
    bottom: -10%;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 12px solid white;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}

.color-black {
    color: black;
}

.font-weigh-600 {
    font-weight: 600;
}

.custom-btn-tooltip {
}

.custom-btn-tooltip:hover {
    transition: all .2s;
}

.tooltip-navbar-user-data {
    width: 320px;
/*    height: 90px;*/
    top: -85px;
    left: 20px;
    display: none;
    z-index: 9999;
    border-radius: 10px;
}

.custom-btn-tooltip:hover + .further-function-box {
    opacity: 1;
    transition: all .2s;
    display: initial !important;
    display: initial;
}

.pref-detail-desc {
    font-size: 14px;
    color: #848484;
}

.pref-setting-options {
    display: flex;
    margin-bottom: 40px;
}

.pref-option-heading {
    font-size: 16px;
    color: #646464;
    margin-bottom: 15px;
}

.user-directories-checkbox-subdirectories {
    float: right;
    margin-right: 5%;
}

.move-flash-to-directory-footer {
    margin-top: 10%;
}

.pref-option-allow {
    font-size: 16px;
}

    .pref-option-allow:checked {
        background-color: #E92C2C;
        border-color: #E92C2C;
    }

.pref-option-label {
    font-size: 14px;
    color: #4D4D4D;
    margin-left: 10px;
}

.pref-setting-options {
    display: flex;
    margin-bottom: 40px;
    flex-direction: column;
    width: 50%;
}

.pref-option-avail {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.user-settings-notifications-notification-group-name {
    color: #0C1423;
    font-family: Duplet;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

.dir-box-top-row .file-upload-instruction {
    font-size: 16px;
    color: #7AC362;
    font-weight: 600;
/*    border-left: 2px solid #D9D9D9;*/
    padding-left: 10px;
    margin-left: 10px;
}

.advance-md-q {
    margin-top: -5px;
}

.orgn-card-heading {
    font-size: 17px;
    color: #464647;
    font-weight: 600;
}

.user-settings-notifications-notification-name {
    color: black;
    font-family: Duplet;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.user-settings-notifications-notification-description {
    color: #404040;
    font-family: Duplet;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.user-directories-checkbox-description {
    color: #848484;
    font-family: Duplet;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}
.user-notifications-notification-method-name {
    color: #433B3B;
    font-family: Duplet;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.p-30 {
    padding: 30px;
}

.p-20 {
    padding: 20px;
}

.my-stats-student-selector {
    width: 300px !important;
    margin-left: 90px;
    display: inline-block;
}

.float-left {
    float: left;
}

.min-h-168 {
    min-height: 168px;
}

.max-w-360 {
    max-width: 360px !important;
}

.card-set-response {
    padding-bottom: 15px;
}

.directory-selected-btn-confirm {
    right: 0;
    padding: 13px;
    margin-right: 4%;
    margin-bottom: 4%;
    bottom: 0;
    position: absolute;
}

.directory-selected-text {
    bottom: 0;
    position: absolute;
    margin-bottom: 6%;
    width: 250px;
    word-break: break-word;
    color: #717579;
    font-size: 14px;
    font-weight: 600;
}

.w-380 {
    width: 380px !important;    
}

.e-contextmenu-container.e-sfcontextmenu {
    z-index: 0 !important;
}
/*Users directory datalist override css*/
.user-subdirectory-add-new-icon {
    height: 25px;
    width: 25px;
    filter: invert(46%) sepia(99%) saturate(631%) hue-rotate(94deg) brightness(93%) contrast(76%);
}

.user-add-new-directory {
    position: absolute;
    right: 40px;
    top: 0;
    height: 25px;
    width: 25px;
    border-radius: 12px;
}

.user-remove-new-directory {
    position: absolute;
    right: 0;
    top: 0;
    height: 25px;
    width: 25px;
    border-radius: 12px;
}

.user-directory-add-your-sets-text {
    border-bottom-style: solid;
    border-bottom-color: #F5F5F5;
    border-bottom-width: 3px;
    padding-top: 15px;
    padding-left: 20px;
    padding-bottom: 10px;
    position: relative;
}

.user-sets-box-directory-container {
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 4px 5px 0px rgba(138, 138, 138, 0.09);
    min-height: 45svh;
    position: relative;
}

.user-directory-border-right {
    border-right-width: 4px;
    border-right-color: #F4F4F4;
    border-right-style: solid;
    padding-left: 10px;
    padding-right:0;
    max-width:300px;
    /*min-width: 280px;*/
}

.e-icons.interaction.e-icon-collapsible {
    color: #EE9C22;
}

.user-directory-folder-icon {
    background-image: url('../assets/user-directory-folder-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
}

.opacity-2 {
    opacity: .2;
}

.user-directory-folder-trash-icon {
    background-image: url('../assets/trash-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(19%) sepia(77%) saturate(5959%) hue-rotate(358deg) brightness(101%) contrast(129%);
}

.e-icons.interaction.e-icon-expandable {
    color: #EE9C22 !important;
}

.e-treeview .e-icon-collapsible::before, .e-treeview .e-icon-expandable::before {
    font-size: 20px !important;
    font-weight: bold !important;
    margin-top: -13% !important;
}

.e-treeview.e-list-item.e-hover{
    background-color:transparent !important;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: white !important;
    border-color: white !important;
}

.e-treeview .e-list-item.e-active > .e-text-content {
    font-weight: bold;
}

.user-directories-active-text {
    font-weight: 300 !important;
}

.e-treeview .e-list-item.e-hover > .e-fullrow {
    border-color: #F3F3F3 !important;
    background-color: #F3F3F3;
    transition: all .3s;
    border-radius: 5px;
}
.e-treeview.e-list-item.e-active > .e-text-content.e-icon-expandable {
    color: #EE9C22 !important;
}
.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    font-family: 'Duplet' !important;
    color: #0C1423 !important;
}
.e-treeview .e-list-text {
    font-family: 'Duplet' !important;
    color: #0C1423 !important;
}
.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible {
    color: #EE9C22 !important;
}
.e-treeview .e-list-icon {
    margin: 0 !important;
}
/*end*/

* {
    list-style-type: none;
}

.directory-box {
    width: 100%;
    background-color: white;
    border-radius: 10px;
    padding: 20px 30px;
    position: relative;
}

.dir-box-top-row {
    display: flex;
/*    justify-content: flex-end;*/
    align-items: center;
}

.dir-filter {
    display: flex;
    position: absolute;
    right: 1%;
    min-width: 500px;
}

.dir-filter-check {
    display: flex;
    align-items: center;
    margin-left: 15px;
}
/*
    .dir-filter-check:hover .dir-filter-options {
        opacity: 1;
        visibility: unset;
    }*/

.dir-fil-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 5px;
    transition: all .2s;
    position: relative;
}

    .dir-fil-icon:hover {
        background-color: #EE9C22;
        transition: all .2s;
        border: 1px solid transparent;
    }

        .dir-fil-icon:hover svg path {
            fill: white;
            transition: all .2s;
        }

.dir-filter-heading {
    font-size: 16px;
    color: #676767;
    font-weight: 600;
}

.dir-list-con-box {
    /*display: flex;*/
}

.dir-list-box {
    /*width: 18%;
    border-right: 3px solid #F4F4F4;*/
}

.dir-list-result {
    margin-top: 20px;
    padding-left: 20px;
    width: 78%;
    padding-bottom: 40px;
}

.dir-ul {
    margin-top: 20px;
    padding: 0;
    width: 95%;
}

.dir-link {
    font-size: 14px;
    color: #0C1423;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    position: relative;
}

.dir-arrow {
    margin-right: 6px;
    transform: rotate(-90deg);
}

.dir-fold {
    margin-right: 6px;
}

.dir-link:hover {
    background-color: #F3F3F3;
    transition: all .3s;
}

.dir-ul-inner {
    max-height: 0px;
    overflow: hidden;
    transition: all .3s;
}


.dir-link:hover ~ .dir-ul-inner {
    max-height: 300px;
    transition: all .3s;
}

.dir-link:hover .dir-arrow {
    transform: rotate(2deg);
    transition: all .3s;
}

.dir-link-more-opt {
    background-color: #fff;
    left: 170px;
    position: absolute;
    top: 135px;
    box-shadow: 0px 0px 20px 0px rgba(239, 241, 246, 0.8);
    z-index: 3;
}

.dir-link-more-opt-link {
    font-size: 16px;
    display: block;
    color: #A6A6A6;
    text-decoration: none;
    padding: 5px 20px 10px 20px;
}

    .dir-link-more-opt-link:not(:last-child) {
        border-bottom: 1px solid #F6F6F6;
    }

    .dir-link-more-opt-link.dir-link-delet {
        color: #EB4D4D;
    }

.dir-crumbs {
    margin-bottom: 20px;
}

.dir-curmbs-ul {
    display: flex;
    align-items: center;
    padding: 0;
}

.dir-curmbs-link {
    font-size: 13px;
    color: #0C1423;
    text-decoration: none;
}

.dir-crumbs-icon {
    margin: 0 5px;
}

.dir-new-bt-row {
    display: flex;
    margin-bottom: 30px;
}

.dir-result-cards .card-set {
    margin-right: 20px;
    margin-bottom: 20px;
}

.dir-filter-options {
    position: absolute;
    border-radius: 5px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(50, 77, 171, 0.10);
    padding: 17px 15px;
    right: 0;
    width: 50%;
    top: 50px;
    opacity: 1;
    width: 200px !important;
}

.dir-show-all {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #F6F6F6;
    padding-bottom: 10px;
}

.show-all-text {
    font-size: 16px;
    color: #817C7C;
}

.dir-status-show-opt {
    border-bottom: 1px solid #F6F6F6;
    padding-bottom: 20px;
    margin-bottom: 15px;
}

    .dir-status-show-opt select {
        padding: 5px 10px;
        font-size: 14px;
        margin-top: 11px;
    }

.other-option {
    background-color: transparent;
    outline: none;
    border: 0;
    margin-left: auto;
    padding: 0;
}

    .other-option:hover path {
        fill-opacity: 0.8;
    }

.dir-nav-btn {
    padding: 5px 15px;
    font-size: 14px;
    color: #147131;
    border: 1px solid #147131;
    background-color: #EAFFE3;
    border-radius: 100px;
    margin-bottom: 15px;
    display: none;
    height: 33px;
    width: 96%;
    margin: auto;
    margin-top: 1%;
}

#dir-nav-input {
    display: none;
}

.dir-nav-close-btn {
    position: absolute;
    top: 14px;
    right: 15px;
    transform: scale(1.2);
    background-color: transparent;
    border: none;
    outline: none;
    display: none;
}

.e-list-parent.e-ul {
    padding-left: 5px !important;
} 

a.disabled{
    pointer-events: none;
    cursor: default;
}

.prefanance .fn-modal-footer {
    width: 80%;
    margin: 40px auto 0;
    overflow-x: auto;
    max-height: 400px;
    border-radius: 10px;
}

    .prefanance .fn-modal-footer::-webkit-scrollbar {
        width: 5px;
        background-color: #F9F9F9;
        border-radius: 100px;
    }

    .prefanance .fn-modal-footer::-webkit-scrollbar-thumb {
        background-color: #7D4FA0;
        border-radius: 100px;
    }

.prefanance .fn-session-heading {
    font-size: 23px;
}

.card-select-info {
    font-size: 16px;
    color: #717579;
    text-align: center;
    width: 80%;
    margin: 0 auto 20px;
}

.sel-card-set-h {
    font-size: 28px;
    color: #4E4E4E;
    font-weight: 600;
    margin-bottom: 10px;
}

.sel-card-set-name {
    font-size: 25px;
    color: #7AC362;
    font-weight: 600;
}

.pref-studied-day {
    font-size: 14px;
    color: #0C092A;
    font-weight: 600;
    margin-bottom: 0;
}

.perfomance-meter-heading {
    font-size: 16px;
    color: #717579;
    font-weight: 500;
}

.study-now-no-sessions-yet {
    background-color: white !important;
    padding: 10px;
    border-radius: 10px !important;
    font-size: 16px !important;
}

.game-start-btn:hover {
    color: white !important;
}

#Grid_toolbarItems {
    height: 55px !important;
    overflow: initial !important;
    margin-top: 80px;
    border: 0;
}

#Grid_toolbarItems #Grid_search {
    position: absolute;
    top: -190px;
    margin-left: -50px;
}

.e-hscroll-content #new {
    top: -300% !important;
    margin: 0;
    height: 55px;
}

#Grid_toolbarItems .e-toolbar-items .e-hscroll-bar {
    overflow-x: initial !important;
}

#Grid_toolbarItems .e-toolbar-items {
    background-color: white;
    padding: 15px 10px;
}

#Grid_toolbarItems .e-tbar-btn-text {
    font-size: 15px;
    color: #585858 !important;
    font-weight: 600;
    font-family: 'Duplet';
}

#simple-account-template-manager-container #Grid_toolbarItems .e-toolbar-items .e-hscroll-bar {
    overflow-x: hidden !important;
}

#simple-account-template-manager-container #Grid {
    top: -60px;
}

#simple-account-template-manager-container .e-scroll-left-nav {
    display: initial !important;
    opacity: .5 !important;
    background: black !important;
    z-index: 1;
    padding-top: 12px;
    padding-left: 3px;
}

#simple-account-template-manager-container .e-nav-left-arrow {
    color: white !important;
    font-size: 23px !important;
    font-weight: bold !important;
}

#simple-account-template-manager-container .e-scroll-right-nav {
    display: initial !important;
    opacity: .5 !important;
    background: black !important;
    z-index: 1;
    padding-top: 12px;
    padding-left: 3px;
}

#simple-account-template-manager-container .e-nav-right-arrow {
    color: white !important;
    font-size: 23px !important;
    font-weight: bold !important;
}

#simple-account-template-manager-container .e-toolbar.e-toolbar-item.e-tbar-btn {
    background: white !important;
}

#simple-account-template-manager-container .e-toolbar-item.e-overlay {
    background: white !important;
}

#simple-account-template-manager-container .e-toolbar-item button {
    background: white !important;
}

#simple-account-template-manager-container .e-toolbar-items {
    padding: 0 !important;
}

#simple-account-template-manager-container .e-toolbar-items #new {
    position: relative;
    top:initial !important;
    border-radius: 0px;
    background: transparent;
    outline: initial;
    border: none;
    font-size: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    margin: 0;
    margin-left: initial;
}

#simple-account-template-manager-container .e-toolbar-items #new .e-control.e-btn.e-lib.e-tbar-btn.e-tbtn-txt .e-tbar-btn-text {
    color: #585858 !important;
    font-weight: normal;
}

#simple-account-template-manager-container #new button .e-add.e-icons.e-btn-icon.e-icon-left {
    color: #6c757d;
}

#simple-account-template-manager-container #Grid_toolbarItems #Grid_search {
    position: absolute;
    top: -140px;
    margin-left: -30px;
}

#simple-account-template-manager-container .row:has(.organization-label) {
    position: absolute;
    right: 2%;
    margin-top: -10px;
    z-index: 1;
}

#Grid_toolbarItems .e-toolbar.e-toolbar-item.e-tbar-btn:hover {
    background: inherit;
    border-color: inherit;
    border-style: inherit;
    border-width: inherit;
    border-radius: inherit;
    color: inherit;
}

.pt-25 {
    padding-top:25px !important;
}

.study-material-share-invitation-directory-box {
    padding: 20px;
    background: #fffafa;
    margin-bottom: 30px;
    margin-top: 10px;
    border-radius: 10px;
}

#Grid_toolbarItems .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover .e-icons {
    color: inherit;
    font-weight: bold;
}

#Grid_toolbarItems .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover .e-tbar-btn-text {
    color: inherit;
    font-weight: bold;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background-color: transparent !important;
    border-color: inherit !important;
    border-style: inherit !important;
    border-width: inherit !important;
    border-radius: inherit !important;
    color: inherit;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:active {
    background: inherit !important;
    border-color: inherit !important;
    border-style: inherit !important;
    border-width: inherit !important;
    border-radius: inherit !important;
    box-shadow: inherit !important;
    color: inherit !important;
}

.e-toolbar .e-toolbar-item .e-tbar-btn:focus {
    background: inherit !important;
    border-color: inherit !important;
    border-style: inherit !important;
    border-width: inherit !important;
    border-radius: inherit !important;
    box-shadow: inherit !important;
    color: inherit !important;
}

.e-gridcontent .e-content .e-table .e-row.e-altrow .e-rowcell {
    /*font-size: 15px;
    color: #585858 !important;
    font-weight: 400;
    padding: 6px 8px !important;*/
}

.e-table .e-row {
    height: 35px;
}

.e-toolbar-items #new {
    position: absolute;
    top: -87px;
    border-radius: 5px;
    background: rgba(254, 94, 114, 0.91);
    outline: none;
    border: none;
    font-size: 15px;
    padding: 13px 25px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-left: -8px;
}

.e-toolbar-items #new .e-control.e-btn.e-lib.e-tbar-btn.e-tbtn-txt {
    background: transparent;
    color: white;
}

.e-toolbar-items #new .e-control.e-btn.e-lib.e-tbar-btn.e-tbtn-txt .e-tbar-btn-text {
    color: white !important;
    font-weight: normal;
}

.row:has(#Grid) {
    background-color: white;
    padding: 30px 25px;
    border-radius: 10px;
    margin-top: 70px;
}

.sf-pager.e-control.e-pager.e-lib.e-gridpager {
    border: 0;
}

#Grid {
    border: 0;
}

.row:has(.organization-label) {
    position: absolute;
    right: 2%;
    margin-top: 90px;
}

.col-4:has(.organization-label) {
    width: 100%;
}

.e-gridheader .e-headercontent .e-columnheader .e-headercell .e-headercelldiv {
    text-align: left !important;
    padding-left: 8px !important;
}

.e-rowcell {
    text-align: left !important;
}

#Grid_toolbarItems #Grid_search .e-input-group.e-control-wrapper {
    padding: 0 15px;
    border: 1px dotted transparent;
    background: linear-gradient(to right, white, white), linear-gradient(to right, #EB4D4D, #EE9C22, #7AC362, #458CCB);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    border-radius: 100px;
    height: 40px;
}

#Grid_ToolbarSearchBox {
    margin-top: 3px;
}
.e-pager .e-pagercontainer {
    border: 0 !important;
    border-radius: 0 !important;
    border-style: none !important;
    border-width: 0 !important;
}

.e-link.e-numericitem.e-spacing.e-currentitem.e-active {
    background: #e9ecef;
    color: #0d6efd;
    opacity: 1;
    border: 0;
}

.e-next {
    border-right-style: none !important;
    border-right-width: 0 !important;
    border: 0 !important;
}
.e-prev {
    border: 0 !important;
    border-right-style: none !important;
    border-right-width: 0 !important;
}

.e-first {
    border: 0 !important;
    border-right-style: none !important;
    border-right-width: 0 !important;
}

.e-rowcell .e-checkbox-wrapper.e-css.e-checkbox-disabled:has(.e-frame.e-icons.e-uncheck) {
    background: url(../assets/unselected-cross-icon.svg) 14px center no-repeat;
    margin-left: -14px;
    display: block;
}
.e-rowcell .e-checkbox-wrapper.e-css.e-checkbox-disabled .e-frame.e-icons.e-uncheck {
    display: none;
}

.e-rowcell .e-checkbox-wrapper.e-css.e-checkbox-disabled:has(.e-frame.e-icons.e-check) {
    background: url(../assets/selected-arrow-icon.svg) 14px center no-repeat;
    margin-left: -14px;
    display: block;
}

.e-rowcell .e-checkbox-wrapper.e-css.e-checkbox-disabled .e-frame.e-icons.e-check {
    display: none;
}

.e-gridheader {
    background-color: #FAFBFF !important;
    padding: 15px 10px;
}

#Grid_toolbarItems .e-toolbar-items #edit .e-tbtn-txt {
    background: white;
}

#Grid_toolbarItems #edit {
    background: white;
}

#Grid_toolbarItems #password {
    background: white;
}

#Grid_toolbarItems #Grid_excelexport {
    background: white;
}

#Grid_toolbarItems .e-toolbar-items #password .e-tbtn-txt {
    background: white;
}

.user-profile-switch-card {
    border-radius: 10px;
    padding: 13px 14px;
    padding-top: 7px;
    padding-bottom: 7px;
    /*    position: absolute;
    width: 80%;
    border-radius: 10px;
    border: 0.5px solid #D9D9D9;
    background: #FFF;
    padding: 13px 14px;
    top: 89px;*/
}

.user-profile-detail .organization-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.w-80 {
    width: 80%;
}

.w-95 {
    width: 95%;
}

.user-personal-account-info {
    border-bottom: 1px solid #EFEEFC;
    padding: 15px 13px;
    transition: all .2s;
    cursor: pointer;
    padding-top: 5px;
    padding-left: 0;
    margin-bottom: 5px;
}

/*.user-personal-account-info:hover {
    background-color: #F8F8F8;
    transition: all .2s;
}
*/
.user-personal-account-heading {
    color: #147131;
    font-size: 12px;
    margin-bottom: 3px;
}

.user-personal-account-name {
    color: #171B1E;
    font-size: 16px;
    margin-bottom: 0;
}

.user-personal-account-email {
    color: #858585;
    font-size: 13px;
    margin-bottom: 10px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
    padding-right: 10px;
}

.organization-card-block.selected {
    background-color: #F8F8F8;
}

/*.organization-card-block:hover {
    background-color: #F8F8F8;
    transition: all .2s;
}*/

.organization-card-block {
    border-bottom: 1px solid #EFEEFC;
    padding: 15px 13px;
    transition: all .2s;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 0;
}

.organization-user-detail-box {
    padding-bottom: 15px;
}

.organization-profile-btn {
    display: flex;
    background-color: transparent;
    border: none;
    align-items: center;
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
}

.organization-name {
    color: #0C1423;
    font-size: 15px;
    margin-bottom: 0px;
    width: 96px;
    text-align: left;
    margin-bottom: 0px;
}

.user-logout-btn:hover {
    background-color: #fff1f2;
}

.profile-selected-badge {
    border-radius: 8px;
    background: #F8FFE9 !important;
    padding: 3px 10px;
    color: #272932;
    font-size: 12px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 14px;
}

.profile-selected-badge svg {
    margin-right: 5px;
}

.u-stats-box {
    width: 100%;
    background-color: white;
    padding: 25px 25px;
    border-radius: 5px;
    border: 2px solid #EFEEFC;
}

.u-stats-box-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
}

    .u-stats-box-top-row .card-create-mode-box {
        background-color: #F3F3F3;
    }

    .u-stats-box-top-row .card-create-mode-btn {
        padding: 7px 15px;
        color: #525252;
    }

        .u-stats-box-top-row .card-create-mode-btn.active {
            color: #EE9C22;
            font-weight: 600;
        }

.u-stats-box-card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.u-stats-card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px #EFF1F6;
    padding: 17px 18px;
    flex-grow: 1;
}

    .u-stats-card:not(:last-child) {
        margin-right: 20px;
    }

.u-stats-card-title {
    color: #0C1423;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
}

.u-stats-card-data {
    color: #0C1423;
    font-size: 37px;
    font-weight: 400;
    margin-bottom: 20px;
}

.u-stats-calc-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-vs-last-month {
    font-size: 13px;
    color: #858585;
}

.u-stats-calc-result {
    border-radius: 100px;
    font-size: 12px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
}

    .u-stats-calc-result svg {
        margin-right: 5px;
    }

    .u-stats-calc-result.positive {
        background: #EAFFE3;
        border: 0.5px solid #1EAE4B;
        color: #147131;
    }

    .u-stats-calc-result.negative {
        background: rgba(255, 97, 117, 0.11);
        border: 0.5px solid #FF6175;
        color: #D52027;
    }

    .u-stats-calc-result.positive path {
        stroke: #147131;
    }

    .u-stats-calc-result.negative path {
        stroke: #D52027;
    }

.user-stats-streaks {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px #EFF1F6;
    padding: 17px 18px;
    margin-bottom: 30px;
}

.user-account-role {
    color: #717579;
    font-size: 12px;
    margin-bottom: 0px;
}

.organization-user-name {
    color: #0C1423;
    font-size: 14px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.organization-user-name span {
    color: #525252;
    margin-right: 5px;
}

.user-logout-btn {
    border-radius: 3px;
    border: 1px solid #FF6175;
    background: #FFF;
    font-size: 15px;
    text-align: center;
    padding: 7px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #EB4D4D;
    margin: auto;
}

.user-logout-btn:hover {
    background-color: #fff1f2;
}

.user-logout-btn svg {
    margin-right: 7px;
}

.user-profile-arrow {
    transform: rotate(-180deg);
    transition: all .3s;
    width: 30px;
    height: 30px;
}

.user-profile-arrow.collapsed {
    transform: rotate(0deg);
    transition: all .3s;
}

#Grid_toolbarItems #relate {
    background: white;
}

#Grid_toolbarItems .e-toolbar-items #relate .e-tbtn-txt {
    background: white;
}

#Grid_toolbarItems .e-toolbar-items #Grid_excelexport .e-tbtn-txt {
    background: transparent;
    height: 30px;
}

#Grid_toolbarItems .e-headercell {
    background-color: #FAFBFF;
}

.row .col-4 .align-self-center.pe-1 span {
    border-radius: 100px;
    border: 1px solid #DFE7FF;
    font-size: 15px;
    color: #53575E;
    height: 50px;
}

.row .col-4 .align-self-center.pe-1 span #organization-filter-dropdown {
    padding: 22px 15px;
    padding-left: 25px;
    font-family: 'Duplet';
}

.e-rowcell {
    font-family: 'Duplet';
}

.e-headercell {
    background-color: #FAFBFF !important;
    padding-left: 2px !important;
}

.e-headertext {
    font-size: 15px;
    color: #585858 !important;
    font-weight: 600;
}

#new button .e-add.e-icons.e-btn-icon.e-icon-left {
    color: white;
}


#Grid_toolbarItems .e-excelexport.e-icons.e-btn-icon.e-icon-left::before {
    content: "\e7c1";
    display: none;
}

#Grid_toolbarItems .e-excelexport.e-icons.e-btn-icon.e-icon-left {
    width: 30px;
    height: 250px;
    background: url(../assets/import-csv.png) 8px center no-repeat;
}
#userEditDialog_dialog-content .row {
    margin-bottom: 30px;
}

#userEditDialog_dialog-content .row .col-8 .e-input-group {
    background-color: #fff;
    padding: 10px;
}

#userEditDialog_dialog-content {
    padding: 40px;
    font-family: 'Duplet';
}

#userEditDialog_dialog-content #user-edit-save-btn {
    text-decoration: none;
    font-size: 16px;
    width: 122px;
    font-weight: 400;
    border: 0;
    border-radius: 5px;
    color: #fff;
    background-color: #7AC362;
}

#userEditDialog_dialog-content #user-edit-save-btn {
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    border-radius: 5px !important;
    color: #fff;
    background-color: #7AC362;
}

#userEditDialog_dialog-content .row .col-8.text-end .e-control.e-btn.e-lib {
    background-color: transparent;
    color: #EB4D4D;
    border: 1px solid;
    border-radius: 5px !important;
    margin-left: 20px;
}

#setPasswordDialog_dialog-content .row {
    margin-bottom: 30px;
}

#nav-menu-parents-children-selector {
    width: 83%;
    margin: auto;
    margin-top: 5%;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 0;
}

#setPasswordDialog_dialog-content {
    padding: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: 'Duplet';
}

#setPasswordDialog_dialog-content .row .col-8 .e-input-group {
    background-color: #fff;
    padding: 10px;
}

#setPasswordDialog_dialog-content  .e-control.e-btn.e-lib.e-primary {
    text-decoration: none;
    font-size: 16px !important;
    font-weight: 400;
    border: 0 !important;
    border-radius: 5px !important;
    color: #fff !important;
    background: #7AC362 !important;
}

    #setPasswordDialog_dialog-content .row .col-8.text-end .e-control.e-btn.e-lib {
        background-color: transparent;
        color: #EB4D4D;
        border: 1px solid;
        border-radius: 5px !important;
        margin-left: 20px;
        width: 122px;
        padding-left: 15px;
        padding-right: 15px;
    }

.e-scroll-right-nav {
    display: none !important;
}

.e-scroll-left-nav {
    display: none !important;
}

.e-hscroll-bar .e-hscroll-content #Grid_search{
    left: 0;
}

.e-spin-overlay {
    z-index: 999999 !important;
}
.e-treeview .e-list-item {
    padding-left: 14px !important;
} 

.ml--3{
    margin-left: -3%;
}

.e-calendar {
    overflow: visible !important;
}

#daily-goal-tooltip-modal {
    min-width: 230px;
    height: 220px !important;
    left: 30%;
    top: 15% !important;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .175);
    border-radius: 10px;
    z-index: 9999;
    padding-top: 10px;
    padding-left: 10px;
}

#mystats-effective-study-score-label {
    width: 157px;
    padding-right: 0;
}

.color-green {
    color: green;
}

.font-italic {
    font-style: italic;
}

#daily-goal-tooltip-modal-dialog-header {
    padding-left: 10px;
    font-size: 14px;
    color: black;
    text-align: left;
    font-family: 'Duplet';
    height: 30px;
}

.ml-4 {
    margin-left: 4%;
}

.hover-hint-images {
    color: #8f8c8c;
    font-size: 14px;
    font-style: italic;
    display: block;
    font-weight: normal;
}

.display-block-important {
    display: block !important;
}

.navbar-brand.w-95{
    text-align: center;
}

.school-btn-tooltip {
    width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-justified {
    display: flex;
    justify-content: center;
    position: relative;
    width: 85%;
    margin: auto;
    margin-bottom: 0%;
    margin-top: 2%;
}

.hover-hint-images-rs {
    color: #8f8c8c;
    font-size: 14px;
    font-style: italic;
    display: block;
    font-weight: normal;
    display: none;
    padding-top: 2px;
    padding-bottom: 10px;
}
.daily-goal-tooltip-modal-title {
    padding-left: 10px;
    font-size: 13px;
    color: black;
    text-align: left;
    font-family: 'Duplet';
    height: 25px;
}

#daily-goal-tooltip-modal_dialog-content {
    padding: 0;
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
    padding-top: 10px;
}

.tooltip-calendar-close-btn {
    position: absolute;
    right: 0;
    top: 0;
}
.tooltip-calendar {
    width: 280px;
    height: 100px;
    top: 40%;
    left: 20%;
    position: absolute;
    background-color: #FFF;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.10);
    padding: 10px 15px;
    right: 0;
}

.template-icon {
    background-image: url('../assets/template-icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

.component-icon {
    background-image: url('../assets/component-icon.png');
    background-repeat: no-repeat;
    background-position: center;
}

.template-directory-border {
    border: 1px solid #ccc;
    height: 70vh;
    overflow: auto;
}

.template-placeholder-border {
    border: 1px solid #ccc;
    height: 20vh;
    overflow: auto;
}

.files-box {
    height:20vh;
}

.template-edit-button-box{
    display: flex;
    justify-content: flex-end;    
}

.comm_template_tree.e-treeview .e-list-item.e-hover > .e-fullrow {
    border-color: #F3F3F3 !important;
    background-color: #F3F3F3;
    transition: all .3s;
    border-radius: 5px;
}

.comm_template_tree.e-treeview .e-list-item.e-active > .e-fullrow {
    background-color: #ccc !important;
    border-color: #ccc !important;
    border-radius: 5px;
    font-weight: 700;
}

.comm_template_tree.e-treeview .e-list-item.e-active > .e-text-content {
    font-weight: bold;
}

.comm_template_tree.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: #000 !important;
}

.comm_template_tree.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible, .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
    color: #000 !important;
}
    
.test-me-baseline-completed-header {
    font-size: 22px;
    text-align: center;
    width: 100%;
    display: block;
    font-weight: 600;
    color: #2c2c2c;
}

.test-me-baseline-completed-summary {
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 2%;
    margin-bottom: 5%;
    font-size: 16px;
    color: #2c2c2c;
}

.test-me-baseline-completed-cardset-name {
    font-size: 24px;
    text-align: center;
    width: 100%;
    display: block;
    font-weight: 600;
    color: black;
}

.test-me-baseline-test-me-btn {
    display: block;
    width: 30%;
    background-color: #1EAE4B;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px;
    text-align: center;
    margin-bottom: 10px;
    border: 0;
    transition: all .2s cubic-bezier(0,.57,.22,.99);
}

.test-me-baseline-title {
    width: 100%;
    text-align: center;
    color: #7D4FA0;
    font-size: 30px;
    font-weight: 600;
}

#test-me-completed-baseline {
    border-radius: 20px;
    background: conic-gradient(from 128deg at 50% 50%, #FEEAD7 25.215857326984406deg, #FFF9E6 158.29936265945435deg, #FFFAEC 194.547700881958deg, #FFE7EA 339.6006202697754deg);
    max-width: 600px;
    width: 100%;
    padding: 20px 40px;
    padding-top: 20px;
}

#dailyGoalTodayProgressModal_dialog-content .reamain-left {
    font-size: 18px;
    color: #717579;
    margin-bottom: 20px;
}


.e-link {
    color: #007bff !important; /* Hyperlink color */
    text-decoration: underline !important; /* Underline like a hyperlink */
    background-color: transparent !important; /* No background for link style */
    border: none !important; /* No border for link style */
    padding: 0 !important; /* No padding for link style */
    cursor: pointer !important; /* Cursor like a hyperlink */
}
.guide-modal-video-mobile {
    position: relative;
    margin-top: 30px;
}

.guide-modal-video {
    position: relative;
    padding-top: 56.25%;
    margin-top: 30px;
}

.user-statistics-btn {
    margin-left: auto;
    background-color: transparent;
    outline: none;
    border: none;
    margin-right: 5px;
    position: absolute;
    right: 32%;
    top: 0;
}

.display-block {
    display: block;
}

.daily-goal-view-streak-butttons-row {
    margin-top: 15px;
}

#view-statistics-select-frequency {
    width: 23%;
    float: right;
    margin-right: 6%;
    margin-bottom: 2%;
}

.user-set-filters .filter-box-fixed-arrow {
    position: absolute;
    right: 10px;
    top: 20px;
}

.min-h-45 {
    min-height: 45px;
}

.view-statistics-title {
    font-size: 19px !important;
    color: #2C343A !important;
    padding-left: 15px;
    font-weight: 600 !important;
    padding-top: 15px;
    font-family: 'Duplet';
}

.view-statistics-label {
    font-size: 15px;
    color: #0C1423;
    margin-left: 1rem;
    display: block;
}

#view-statistics-line-chat-content {
    display: inline-block;
    width: 100%;
}

#view-statistics-line-chat-content text {
    font-family: 'Duplet' !important;
}

.btn-secondary:focus {
    box-shadow: none !important;
}

#view-statistics-mouse-wheel-legend {
    color: #646464;
    font-family: Duplet;
    font-size: 13px;
    font-style: normal;
    margin-bottom: 0;
    margin-left: 30%;
}

#view-statistics-spinner-container {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
}

#view-statistics-study-history-label {
    color: #0C1423;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 2%;
    margin-bottom: 2%;
}

#view-statistics-study-sessions-container {
    background-color: #E8E5FA;
    padding: 20px 15px;
    border-radius: 10px;
    width: 80%;
    margin: auto;
    overflow: auto;
    overflow-x: hidden;
    max-height: 400px;
    margin-top: 7%;
}

#view-statistics-study-sessions-container::-webkit-scrollbar {
    width: 13px;
    background-color: #e8d2ff;
}

#view-statistics-study-sessions-container::-webkit-scrollbar-thumb {
    width: 10px;
    background-color: #7D4FA0;
}

#view-statistics-filter-label {
    margin-top: -5%;
    margin-left: -45%;
}

.views-statistics-filter-btn {
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 40px;
    color: #717579;
    padding-left: 0;
    position: relative;
    padding-right: 0;
    margin-top: -15%;
}

#views-statistics-filter-selected {
    margin-left: -12%;
}

.views-statistics-fixed-arrow {
    top: 15px !important;
}

#view-statistics-charts-container {
    margin-left: 10%;
}

#product-account-template-current-progress-value {
    padding-left: 0;
}

#product-account-template-current-status-label {
    font-weight: 600;
}

#product-account-template-current-progress-label {
    font-weight: 600;
}

#product-account-template-info-text {
    font-size: 13px;
}

#product-account-template-current-status-value {
}

.product-account-template-current-status-value-red {
    color: red !important;
    font-weight: 600;
}

.product-account-template-current-status-value-orange {
    color: #fa7a00 !important;
    font-weight: 600;
}

.product-account-template-current-status-value-green {
    color: #1EAE4B !important;
    font-weight: 600;
}

.list-group process-template-result-operation-list {
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    width: 100%;
}

.process-template-result-operation-list-element {
    font-size: 12px;
}

.product-account-template-current-status-value-expires-at-label {
    font-size: 11px;
}

.process-template-result-operation-list {
    overflow-y: scroll;
    max-height: 570px;
    background: #f4f4f4;
    padding-left: 10px;
    border-radius: 0 !important;
    font-family: monospace;
    font-size: 12px;
}

.product-account-template-management-not-selecting-file-warning-text {
    font-size: 13px;
    color: #534e49;
    font-weight: 400;
}

#process-template button {
    background: white;
}

.list-group.process-template-result-operation-list li{
   background-color: white;
}

.list-group.process-template-result-operation-list li:nth-child(odd) {
    background-color: #f9fffc;
}

.product-account-template-edit-save-btn {
    color: white !important;
}

#product-account-template-edit-save-btn {
    color: white !important;
}

.blog-light-box {
    display: flex;
    align-items: center;
    margin-right: auto;
}

.blog-light-box-title {
    color: #00713a;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0px;
}

.blog-box {
    background-color: #ffc94c;
    display: flex;
    padding: 10px;
    align-items: center;
    width: 570px;
    border-radius: 5px;
    margin-left: 20px;
}

.set-blog-title {
    color: #3a6d2c;
    font-size: 16px;
    font-weight: 600;
}

.set-blog-detail {
    color: #0C1423;
    font-size: 12px;
    width: 46%;
    line-height: 1.2;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-right: auto;
}

.e-control.e-btn.e-lib.my-set-blog-go-btn {
    color: white !important;
    background-color: #51c56f;
    font-size: 12px !important;
    text-decoration: none;
    padding: 7px 10px !important;
    display: flex !important;
    border-radius: 5px !important;
    margin-left: 10px !important;
    align-items: center !important;
    border: 0;
}

.my-set-blog-go-btn:hover {
    background-color: #45a45f !important;
}

.my-set-blog-go-btn img {
    margin-left: 5px;
}

.my-set-blog-go-btn:hover {
    background-color: #45a45f;
}


.welcome-text{
    margin-right: 25px;
}

.blog-content{
    height: 400px;
    overflow: auto;
}

#mystats-panel-container .e-item{
    display: block !important;
}

.drag-handler {
    position: absolute;
    left: 17.5%;
    top: 0;
    transform: translate(-50%, 0);
    z-index: 3;
    height: 100%;
    padding: 0 20px;
    cursor: col-resize;
}

.drag-handler a {
    width: 5px;
    height: 100%;
    display: block;
    cursor: col-resize;
}

.drag-handler svg {
    margin-left: -8px;
    margin-top: 20px;
}

#mystats-chart-container text {
    font-family: 'Duplet' !important;
}

#mystats-panel-container .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: inherit !important;
}

#mystats-panel-container .e-toolbar-item {
    background: transparent !important;
}

#mystats-panel-container .e-tab-header {
    border: 0 !important;
    width: 220px !important;
}
#mystats-panel-container .e-active .e-tab-text {
    color: #121296 !important;
    font-weight: bold;
}

#mystats-panel-container .e-tab-text {
    font-size: 20px;    
    text-decoration: underline;
    color: blue;
}

#mystats-panel-container .e-tab .e-tab-header.e-vertical.e-vertical-left .e-toolbar-item .e-tab-wrap:hover {
    border: 0 !important;
}

#mystats-panel-container {
    min-width: 510px;
}

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

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

#least-learned-card-sets .sf-pager.e-control.e-pager.e-lib.e-gridpager {
    display: none !important;
}

#best-learned-card-sets .sf-pager.e-control.e-pager.e-lib.e-gridpager {
    display: none !important;
}
#mystats-panel-container .e-rowcell {
    padding: 10px !important;
    color: #212529 !important;
    font-size: 13px !important;
}

#least-learned-card-sets {
    margin-bottom: 5%;
}

#mystats-panel-container .e-tab-header {
    margin-right: 0 !important;
}

.mystats-general-label {
    width: 157px;
}

.mystats-general-label-value {
    width: 100px;
}

#mystats-panel-container .e-tab-wrap {
    padding-left: 18px !important;
}

.spinner-img-calendar-fixed {
    max-width: 120px;
    max-height: 80px;
    margin-left: 22%;
    width: 32%;
}

#login-select-context-description {
    font-size: 19px;
}

.e-dropdown-menu {
    background: white;
}

.grid-context-action-button.e-dropdown-popup {
    background: transparent;
    color: #212529;
}

.card-status-badge-fix-position-no-action-btn {
    position: absolute;
    right: 0%;
    top: 3%;
}

.school-users-management-assign-user-to-parent-cancel-btn {
    bottom: 5%;
    position: absolute;
    right: 7%;
}

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

.ml-10px {
    margin-left: 10px;
}

.remove-user-from-school-btns {
    margin-top: 50px;
}

.remove-user-from-school-cancel-btn {
    float: left;
    padding: 12px 22px;
}

.remove-user-from-school-confirm-btn {
    float: right;
    padding: 12px 22px;
}

.school-users-management-assign-user-to-parent-delete-img {
    filter: invert(14%) sepia(77%) saturate(1259%) hue-rotate(358deg) brightness(101%) contrast(109%);
    cursor: pointer;
    height: 18px;
    width: 18px;
    margin-right: 15px;
    margin-bottom: 1%;
}

#class-group-grid .e-rowcell {
    padding: 6px 8px !important;
}

#delete button {
    background: white !important;
}
#delete {
    background: white !important;
}
#viewStudents button {
    background: white !important;
}
#viewStudents {
    background: white !important;
}

.user-settings-bigger-dropdown {
    height: 50px;
    padding-top: 10px;
}

.nav-menu-class-management-icon-position-fix {
    margin-left: -7px;
}

.school-users-management-assign-user-to-parent-child-panel {
    padding-top: 8px;
    padding-bottom: 8px;
}

.school-users-management-assign-user-to-parent-current-children-label {
    margin-top: -3%;
}

.school-users-management-edit-user-remove-parent-warning-message {
    color: #EB4D4D;
    font-size: 12px;
    margin-left: 0 !important;
    font-weight: 600;
}

.e-control.e-btn.e-lib.e-dropdown-btn.grid-context-action-button.e-icon-btn:hover {
    background: #747474;
}

.e-dropdown-popup.e-control.grid-context-action-button .e-dropdown-menu {
    width: 160px;
}

.grid-context-action-button {
    padding: 5px 10px !important;
    border: 0 !important;
    border-radius: 2px !important;
    height: 30px !important;
    width: 30px !important;
    font-size: 14px !important;
    color: white;
}

.grid-context-action-button .grid-context-action-button-dots {
    margin-top: -15px;
    margin-left: -2px;
    font-size: 25px;
}

.logout-spinner.e-spinner-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.u-stats-box {
    width: 100%;
    background-color: white;
    padding: 25px 25px;
    border-radius: 5px;
    border: 2px solid #EFEEFC;
}

.u-stats-box-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
}

.u-stats-box-top-row .card-create-mode-box {
    background-color: #F3F3F3;
}

.u-stats-box-top-row .card-create-mode-btn {
    padding: 7px 15px;
    color: #525252;
}

    .u-stats-box-top-row .card-create-mode-btn.active {
        color: #EE9C22;
        font-weight: 600;
    }

.u-stats-box-card {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.u-stats-card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px #EFF1F6;
    padding: 17px 18px;
    flex-grow: 1;
}

.u-stats-card:not(:last-child) {
    margin-right: 20px;
}

.u-stats-card-title {
    color: #0C1423;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
}

.u-stats-card-data {
    color: #0C1423;
    font-size: 37px;
    font-weight: 400;
    margin-bottom: 20px;
}

.u-stats-calc-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-vs-last-month {
    font-size: 13px;
    color: #858585;
}

.u-stats-calc-result {
    border-radius: 100px;
    font-size: 12px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
}

.u-stats-calc-result svg {
    margin-right: 5px;
}

.u-stats-calc-result.positive {
    background: #EAFFE3;
    border: 0.5px solid #1EAE4B;
    color: #147131;
}

.u-stats-calc-result.negative {
    background: rgba(255, 97, 117, 0.11);
    border: 0.5px solid #FF6175;
    color: #D52027;
}

.u-stats-calc-result.positive path {
    stroke: #147131;
}

.u-stats-calc-result.negative path {
    stroke: #D52027;
}

.u-stats-calc-result.negative svg {
    transform: rotate(-180deg);
}

.user-stats-streaks {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px #EFF1F6;
    padding: 17px 18px;
    margin-bottom: 30px;
}

.user-stats-m {
    margin-top: 30px;
}

.user-stats-streaks-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.user-stats-streaks-heading {
    font-weight: 600;
    font-size: 16px;
    color: #0C1423;
}

.user-stats-streaks-filters {
    display: flex;
    align-items: center;
}

.user-stats-recent {
    font-size: 13px;
    color: #4E4E4E;
    margin-right: 15px;
}

.user-stats-streaks-filters .btn {
    font-size: 14px;
}

.user-stats-streaks-filters .btn-outline-primary {
    border: 1px solid #D9D9D9;
    color: #6A6A6A;
    padding: 8px 14px;
}

.user-stats-streaks-filters .btn-outline-primary:hover {
    border-color: #7AC362;
    color: #7AC362;
}

.user-stats-streaks-filters .btn-check:checked + .btn {
    background-color: #7AC362;
    border-color: #7AC362;
}

.user-stats-streaks-filters .btn-check:checked + .btn:hover {
    color: white;
}

.u-test-perfomance-result-box {
    display: flex;
    justify-content: space-between;
}

.u-test-perfomance {
    width: 45%;
}

.u-test-perfomance-table {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 20px 0px #EFF1F6;
    padding: 17px 18px;
    width: 100%;
}

.u-test-perfomance-heading {
    font-size: 15px;
    color: #0C1423;
    margin-bottom: 15px;
}

.u-test-perfomance-heading span {
    color: #909090;
}


.u-test-perfomance-table-header,
.u-test-perfomance-table-row {
    display: flex;
    flex-flow: row wrap;
    border-bottom: 2px solid #EFEEFC;
    padding-bottom: 10px;
}

.u-test-perfomance-table-row {
    margin: 10px 0;
    padding-top: 5px;
    padding-bottom: 10px;
}

.u-test-perfomance-table-header-row {
    width: calc(100% / 4);
    font-size: 13px;
    color: #4E4E4E;
}

.u-test-perfomance-table-cell {
    width: calc(100% / 4);
    font-size: 13px;
    color: #525252;
}

.u-test-perfomance-table-cell:first-of-type {
    color: #0C1423;
    font-size: 14px;
}

.u-test-perfomance-table-cell .set-btn {
    font-size: 13px;
    padding: 0 10px;
}

.user-stats-list-th {
    font-size: 15px;
    color: #525252 !important;
    font-weight: 400;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    padding-left: 0 !important;
    background-color: #EEE !important;
}

.user-stats-list-th:nth-of-type(1) {
    border-top-left-radius: 10px;
    padding-left: 10px !important;
}

.user-stats-list-th:nth-of-type(8) {
    border-top-right-radius: 10px;
}

.user-stats-list-body-th {
    font-size: 13px;
    color: #525252 !important;
    padding: 15px 0px !important;
}

.user-stats-list-body-th:nth-of-type(2) {
    color: #0C1423 !important;
    font-size: 14px;
}

.user-stats-list-body-th:nth-of-type(1) {
    padding-left: 10px !important;
}

.grid-btn {
    font-size: 15px;
    text-decoration: none;
}

.grid-btn + .grid-btn {
    margin-left: 10px;
}

.grid-btn-test {
    color: #7AC362;
}

.grid-btn-test:hover {
    color: #57A43D;
}

.grid-btn-study {
    color: #EE9C22;
}

.grid-btn-study:hover {
    color: #CA8115;
}

#school-users-management-grid #newUser button {
    color: #676767 !important;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #ABABAB !important;
    display: flex;
    align-items: center;
    background-color: transparent;
    font-weight: 600;
    margin-right: 20px;
    border-radius: 3px !important;
    margin-left: -20px;
}

#school-users-management-grid #newUser button:hover {
    background-color: #E2E2E2;
}

#school-users-management-grid #Grid_toolbarItems #Grid_search {
    right: 0;
    top: -5px;
}

#school-users-management-grid #pendingInvitations button {
    color: #6A0F0B !important;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #6A0F0B !important;
    display: flex;
    align-items: center;
    background-color: #FFEBEC !important;
    font-weight: 600;
    border-radius: 3px !important;
    margin-left: -20px;
}

#school-users-management-grid #sendEmailVerification button {
    color: #676767 !important;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #ABABAB !important;
    display: flex;
    align-items: center;
    background-color: transparent;
    font-weight: 600;
    margin-right: 20px;
    border-radius: 3px !important;
    margin-left: -20px;
}

.pending-invitation-btn {
    color: #6A0F0B;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #6A0F0B;
    display: flex;
    align-items: center;
    background-color: #FFEBEC;
    font-weight: 600;
    margin-right: auto;
    z-index: 1;
    margin-top: 90px;
    position: absolute;
}

    .pending-invitation-btn span {
        background-color: #FECBC9 !important;
        color: #6A0F0B;
        font-size: 12px;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        margin-left: 5px;
    }
.school-add-new-btn svg {
    margin-right: 5px;
}

.u-stats-box-top-row .user-set-search {
    width: 20%;
}

.u-stats-box-top-row .user-set-search-input::-webkit-input-placeholder {
    font-size: 14px;
}

.u-stats-box-top-row .search-btn-img {
    width: 20px;
}

.u-stats-box-top-row .user-set-search-input {
    padding-left: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}


.school-table-data {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #EEE;
}

.school-table-view {
    border-collapse: collapse;
    width: 100%;
    background: white;
}

    .school-table-view th, td {
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .school-table-view th {
        background-color: transparent;
        color: #464647;
        font-size: 14px;
        font-weight: 400;
        border-bottom: 1px solid #EFEEFC;
        padding: 15px 10px;
    }

    .school-table-view tr:hover {
        background-color: #f9f9f9;
    }

    .school-table-view td {
        border-bottom: 1px solid #EFEEFC;
        font-size: 13px;
        color: #525252;
        padding: 10px 10px;
    }

    .school-table-view tr td:nth-of-type(2) {
        font-weight: 600 !important;
    }

    .school-table-view .privacy-data-input {
        font-size: 10px;
    }

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background-color: transparent;
    cursor: col-resize;
}

    .resizer:hover {
        background-color: #ddd;
    }

#school-users-management-grid #assignToClass button {
    color: #676767 !important;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #ABABAB !important;
    display: flex;
    align-items: center;
    background-color: transparent;
    font-weight: 600;
    margin-right: 0px;
    border-radius: 3px !important;
    margin-left: 0px;
}

.class-group-not-assigned-yet-badge {
    color: #D52027 !important;
    background: rgba(235, 77, 77, 0.30) !important;
    font-size:11px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.class-group-badge {
    color: #458CCB;
    background: rgba(69, 140, 203, 0.10);
    font-size: 13px;
    border-radius: 5px;
    padding: 5px 10px;
    /*display: inline-flex;*/
    position: relative;
    width: 99%;
    border: 0;
}

    .class-group-badge .assign-user-remove-btn {
        right: 0;
    }

    .class-group-badge:hover .assign-user-remove-btn {
        opacity: 1;
    }

    .class-group-badge + .class-group-badge {
        margin-left: 4px;
    }

.verification-badge {
    font-size: 13px;
    border-radius: 4px;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    height: 31px;
}

.e-verfied-badge {
    color: #147131;
    background: #EAFFE3;
    border: 0.5px solid #1EAE4B;
}

.un-verfiy {
    color: #D52027;
    background: rgba(235, 77, 77, 0.30);
    border: 0.5px solid #D52027;
    /* display: flex;
  align-items: center; */
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.un-verfiy-btn-send-email-green {
    color: #147131;
    background: #EAFFE3;
    border: 0.5px solid #1EAE4B;
    padding: 3.6px 8px 4px 8px;
    margin-left: -6px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 31.6px;
    width: 35px;
    display: inline-flex;
}

.un-verfiy-btn-send-email-green:hover {
    background: #b5d7aa;
}

.un-verfiy-btn-send-email {
    color: #D52027;
    background: rgba(235, 77, 77, 0.30);
    border: 0.5px solid #D52027;
    border-left-width: 0;
    padding: 3.6px 8px 4px 8px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 31px;
    width: 35px;
    display: inline-flex;
    position: absolute;
    margin-left: 78px;
}

.un-verfiy-btn-send-email:hover {
    background: rgba(235, 77, 77, 0.6);
}

#pendingSchoolInvitations {
    margin-bottom: 25px;
    position: initial;
    margin-top: 60px !important;
}
#pendingSchoolInvitations #Grid_search {
    margin-bottom: 25px;
    position: initial;
}

.tooltip-inner {
    font-size: 13px;
}

.verfiy-indicator {
    width: 7px;
    height: 7px;
    background: #7AC362;
    border-radius: 50%;
    margin-right: 5px;
}

.un-verfiy .verfiy-indicator {
    background: #D52027;
}

.display-inline {
    display: inline !important;
}

#class-group-grid #new button {
    color: #676767;
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    outline: none;
    border: 1px solid #ABABAB !important;
    display: flex;
    align-items: center;
    background-color: transparent;
    font-weight: 600;
    margin-right: 20px;
    width: auto;
    border-radius: 4px !important;
    height: 40px;
}

#class-group-grid #new button:hover {
    border-style: solid !important;
    border-width: 1px !important;
    background-color: #E2E2E2 !important;
}

.subscribed-teachers-number {
    padding-top: 2px;
    margin-right: 13px;
}


#subscribed-teachers-column-badge {
    display: initial;
}

.display-flex {
    display: flex;
}

#class-group-grid #new {
    border-radius: 0;
    background: inherit;
    padding: 0;
    margin-left: 0;
}

#class-group-grid .e-hscroll-content {
    width: 100%;
}

#class-group-grid #Grid_search {
    left: initial;
    right: 0;
    top: -70px;
}

#class-group-grid .e-toolbar-items #new .e-control.e-btn.e-lib.e-tbar-btn.e-tbtn-txt .e-tbar-btn-text {
    color: #676767 !important;
    font-weight: 600 !important;
}

#class-group-grid #new button .e-add.e-icons.e-btn-icon.e-icon-left {
    color: #676767 !important;
}

#assignmentCell,
#assignedStudentsCell {
    border: 1px solid transparent;
    cursor: pointer;
    border-bottom: 1px solid #EFEEFC;
}

    #assignmentCell:hover,
    #assignedStudentsCell:hover {
        border: 1px solid #CECECE;
        border-radius: 5px !important;
    }

.chevron {
    width: 12px;
    height: 12px;
    margin-left: 5px;
}

.user-circle {
    min-width: 34px;
    width: 34px;
    height: 34px;
    background-color: #9C6CDA;
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border: 2px solid white;
    position: relative;
}

.class-group-badge.class-assign-new-st {
    background-color: #9C6CDA;
    color: white;
    margin-left: 10px;
    outline: none;
    border: none;
}

.class-group-badge.class-assign-new-st:hover {
    background-color: #7333C7;
}

.assi-width-stu {
    width: 110px;
}

.user-display .user-circle:not(:first-child) {
    margin-left: -8px;
}

.more-options {
    color: #9ca3af;
    float: right;
    font-size: 20px;
    padding: 0 8px;
}

/*.dropdown {
    position: fixed;
    width: 270px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(50, 77, 171, 0.10);
    display: none;
    z-index: 1000;
}

    .dropdown.show {
        display: block;
    }*/

.school-user-search-container {
    padding: 16px 0px 5px 0;
}

.school-user-search-box {
    width: 100%;
    padding: 8px 12px 8px 50px;
    border: 0;
    border-bottom: 1.5px solid #EBEBEB;
    font-size: 14px;
    color: #4E4E4E;
    margin-bottom: 10px;
}

    .school-user-search-box::-webkit-input-placeholder {
        color: #4E4E4E;
    }

    .school-user-search-box:focus {
        outline: none;
        border-color: #8b5cf6;
    }

.search-icon {
    position: absolute;
    left: 24px;
    top: 25px;
    color: #9ca3af;
}

.school-user-section-title {
    padding: 5px 16px;
    font-size: 14px;
    color: #6b7280;
}

.user-list {
    max-height: 240px;
    overflow-y: auto;
}

.sc-user-name {
    color: #4E4E4E;
    font-size: 13px;
    font-weight: 600;
}

.user-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

    .user-item:hover {
        background-color: #EFEEFC;
    }

        .user-item:hover .drop-user-profile-btn {
            opacity: 1;
        }

    .user-item input[type="checkbox"] {
        accent-color: #8b5cf6;
    }

.assigned-section {
    border-top: 1px solid #e5e7eb;
    padding: 16px 0px 5px 0;
}

.assigned-users {
    margin-top: 8px;
}

.drop-user-profile-btn {
    margin-left: auto;
    font-size: 13px;
    color: #464647;
    text-decoration: none;
    background-color: #FFF;
    padding: 3px 5px;
    border-radius: 3px;
    opacity: 0;
}

    .drop-user-profile-btn:hover {
        background-color: #F9F9F9;
    }

.user-display {
    display: flex;
    flex-wrap: wrap;
}

.assign-user-remove-btn {
    position: absolute;
    top: -4px;
    right: 2px;
    opacity: 0;
}

.user-circle:hover .assign-user-remove-btn {
    opacity: 1;
    z-index: 1;
}

.class-group-badge-col {
    margin-top: 3px;
}

.send-email-verify-icon {
    margin-top: 2px;
}

.assign-subjet-icon-btn {
    background-color: transparent;
    outline: none;
    border: none;
    transform: scale(1.05);
    display: flex;
    align-items: center;
    padding: 0;
    padding-left: 4px;
    height: 25px;
    width: 23px;
    margin-top: 1px;
}

.assign-subjet-icon-btn:hover {
    background-color: #fff;
    border-radius: 100%;
}

.assign-user-edit:hover g {
    stroke: #D52027;
}

/* Modal overlay */
.usm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.25);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

    .usm-overlay.active {
        display: flex; /* Shown when active class is added */
    }

/* Modal container */
.usm-modal {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    width: 20%;
    padding: 1.5rem;
    /* Added animation */
    opacity: 0;
    transition: all 0.2s ease-out;
}

.usm-overlay.active .usm-modal {
    opacity: 1;
}

/* Modal title */
.usm-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 25px;
}

/* Form group */
.usm-form-group {
    margin-bottom: 20px;
}

/* Label */
.usm-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 10px;
}

/* Input */
.usm-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    font-size: 14px;
    color: #111827;
    outline: none;
    transition: all 0.2s;
}

    .usm-input:focus {
        border-color: #EE9C22;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
    }

/* Dropdown */
.usm-dropdown {
    position: relative;
}

.usm-dropdown-toggle {
    width: 100%;
    padding: 7px 12px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    font-size: 14px;
    color: #6B7280;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .usm-dropdown-toggle:after {
        content: '';
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #6B7280;
        margin-left: 0.5rem;
    }

.usm-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
}

.usm-dropdown.active .usm-dropdown-menu {
    display: block;
}

.usm-dropdown-item {
    padding: 7px 1rem;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .usm-dropdown-item:hover {
        background: rgba(69, 140, 203, 0.07);
    }

/* Button container */
.usm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 40px;
    margin-bottom: 10px;
}

/* Buttons */
.usm-btn {
    padding: 7px 18px;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.usm-btn-cancel {
    background: transparent;
    border: none;
    color: #EF4444;
}

.usm-btn-cancel:hover {
    background: #FEF2F2;
}

.usm-btn-save {
    background: #22C55E;
    border: none;
    color: white;
}

.usm-btn-save:hover {
    background: #16A34A;
}

.pend-row-delet-btn {
    background-color: transparent;
    border: none;
}

.pend-row-delet-btn:hover svg path {
    stroke: #A21B20;
}

/* Student Management Popup */

.user-circle-more-assigned {
    background-color: white;
    color: #686868;
    border: .2px solid #E6E6E6;
    box-shadow: 0 0 5px rgba(0, 0, 0, .05);
}

.stu-cell__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.stu-cell__avatar--purple {
    background-color: var(--primary-color);
}

.stu-cell__avatar--teal {
    background-color: #45a7d7;
}

.stu-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

    .stu-popup.stu-popup--active {
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 1;
        pointer-events: all;
    }

.stu-popup__content {
    background-color: white;
    border-radius: 24px;
    max-width: 650px;
    height: 650px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.stu-popup--active .stu-popup__content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.stu-popup__header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.stu-popup__title {
    font-size: 22px;
    font-weight: 600;
}

.stu-popup__close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--text-light);
    transition: color 0.2s ease;
}

    .stu-popup__close:hover {
        color: var(--text-color);
    }

.stu-popup__search {
    padding: 15px 20px;
    position: relative;
}

    .stu-popup__search .user-set-search {
        width: 100%;
        padding: 3px 15px;
    }

.stu-popup__tabs {
    display: flex;
    padding: 3px 5px;
    background: #F2F5F9;
    width: 93%;
    margin: 0 auto;
}

.stu-popup__tab {
    flex: 1;
    padding: 9px 24px;
    text-align: center;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.2s ease;
    position: relative;
}

.stu-popup__tab--active {
    color: #EE9C22;
    background: white;
}



    .stu-popup__tab--active[data-tab="not-enrolled"]:after {
        background-color: #f5b942;
    }

.stu-popup__tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px 20px;
    opacity: 1;
    transition: opacity 0.1s;
    position: absolute;
    width: 100%;
    top: 223px;
    bottom: 0;
    margin-left: -2%;
}

.stu-popup__tab-content--hidden {
    opacity: 0;
    pointer-events: none;
}

.stu-popup__student-list {
    display: flex;
    flex-direction: column;
}

/* Student Item in List */
.stu-student {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

    .stu-student:last-child {
        border-bottom: none;
    }

    .stu-student:hover {
        background-color: #f9f9f9;
    }

.stu-student__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    background-color: #9C6CDA;
    margin-right: 15px;
    flex-shrink: 0;
}

.stu-student__info {
    flex: 1;
    min-width: 0;
}

.stu-student__name {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4E4E4E;
}

.stu-student__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.stu-student__badge--enrolled {
    background: #DCFCE7;
    color: #22895E;
}

.stu-student__badge--not-enrolled {
    background-color: rgba(150, 150, 150, 0.2);
    color: var(--text-light);
}

.stu-student__actions {
    display: flex;
    gap: 10px;
}

.stu-student__profile-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0;
    background-color: white;
    color: #525252;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .stu-student__profile-btn:hover {
        background-color: #f5f5f5;
    }

.stu-student__profile-icon {
    width: 18px;
    height: 18px;
}

.stu-student__action-btn {
    padding: 8px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.stu-student__action-btn--remove {
    background-color: rgba(255, 107, 107, 0.1);
    color: #E14141;
}

    .stu-student__action-btn--remove:hover {
        background-color: rgba(255, 107, 107, 0.2);
    }

.stu-student__action-btn--enroll {
    background-color: rgba(72, 207, 140, 0.1);
    color: var(--success-color);
}

    .stu-student__action-btn--enroll:hover {
        background-color: rgba(72, 207, 140, 0.2);
    }

.stu-student__action-icon {
    width: 16px;
    height: 16px;
}

/* Profile Popover */
.stu-profile {
    position: absolute;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 3px 24px 7px 0px rgba(0, 0, 0, 0.00), 2px 15px 6px 0px rgba(0, 0, 0, 0.01), 1px 9px 5px 0px rgba(0, 0, 0, 0.05), 1px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 1px 2px 0px rgba(0, 0, 0, 0.10);
    width: 350px;
    z-index: 1100;
    display: none;
}

.stu-profile--active {
    display: block;
}


.stu-profile__content_parent {
    padding: 15px 25px;
}

    .stu-profile__content_parent:not(:last-of-type) {
        border-bottom: 1.5px solid #EFEEFC;
    }

.stu-profile__heading {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #05030D;
}

.stu-profile__name {
    font-size: 14px;
    color: #525252;
    margin-bottom: 5px;
}

.stu-profile__email {
    font-size: 14px;
    color: #525252;
    margin-bottom: 0;
    margin-top: 10px;
}

.stu-profile__parent-count {
    color: #EE9C22;
    font-size: 13px;
}

.stu-profile__accordian-parent {
    background-color: #EFEEFC;
    padding: 10px 12px;
    border-radius: 12px;
}

.confirmDialogBtn1 {

}

.stu-profile__accordian-top-counter {
    display: flex;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    color: #525252;
    font-size: 13px;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 10px;
}

.stu-profile__accordian-paernt-name {
    color: #212121;
    font-size: 14px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.treeviewdiv[name="user-directory-item"].over-drag-object {
    border-color: #EE9C22;
    border-style: dashed;
    border-width: 1px;
}

.overflow-visible {
    overflow: visible;
}

/*brain boost init*/
.brain-boost-heading {
    color: #0C1423;
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 0;
}


.strk-indicator-box {
    background-color: #EAFFE3;
    padding: 7px 26px;
    border-radius: 10px;
    position: relative;
}

.strk-indicator-progress {
    background-color: #8BDE6F;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    z-index: 1;
}

.strk-indicator-detail {
    font-size: 15px;
    color: #0C1423;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brain-boost-detail {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
}

.brain-boost-para {
    font-size: 18px;
    color: #525252;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 20px;
    width: 50%;
    font-weight: 500;
}

.brain-study-btn {
    padding: 10px 70px;
    border-radius: 100px;
    background: #EE9C22;
    font-size: 16px;
    color: white;
    text-decoration: none;
    display: inline-block;
    transition: all .2s ease-in;
}

.brain-study-btn:hover {
    color: white !important;
}

.study-card-suggest-box {
    width: 40%;
    display: flex;
    flex-direction: column;
    margin: 40px auto 0;
}

.brain-boost-card {
    width: 100%;
    border: 1px solid #DADADA;
    border-radius: 10px;
    background-color: white;
    padding: 20px 15px;
    margin-bottom: 20px;
}

.brain-boost-round-progress {
    position: relative;
    width: 60px;
    height: 60px;
}

.brain-boost__circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.brain-boost__circle-bg {
    fill: none;
    stroke: #e8e8e8;
    stroke-width: 12;
}

.brain-boost__circle-progress {
    fill: none;
    stroke: #f5a623;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 377;
    stroke-dashoffset: 132;
    transition: stroke-dashoffset 0.6s ease;
}

.brain-boost__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.brain-boost__percentage {
    font-size: 15px;
    font-weight: bold;
    color: #f5a623;
    line-height: 1;
}

#brain-boost-page-container .dir-box-top-row {
    justify-content: flex-end;
}
/*brain boost end*/