.pathBar {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

#coursesList .course-items,
#moduleDataHolder .activity-items,
#tasksList .task-items,
#tasksList .scoreboard-post,
#courseWall .progress-charts {
    padding: 15px 21px;
}

.k-step .course-div-body,
.k-step .module-div-body {
    display: grid;
    align-items: center;
    grid-template-columns: min-content 2fr min-content;
    grid-column-gap: 40px;
}

.k-step .course-div-body span.cid,
.k-step .module-div-body span.cid {
    font-family: 'JetBrains Mono';
    text-transform: uppercase;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.05em;
}

body.dark-mode .k-step .course-div-body span.display-block.m-t-10 {
    display: flex;
    align-items: center;
}
#tasksList .scoreboard-post {
    min-height: 48px;
    max-height: 90px;
    margin: 0;
    border: 0;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    box-sizing: border-box;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    cursor: default;
}

/*#tasksList .scoreboard-post:not(.pfa) {*/
/*    grid-template-columns: minmax(0, 1fr) min-content minmax(0, 1fr) min-content minmax(0, 1fr) min-content minmax(0, 1fr);*/
/*}*/

/*#tasksList .scoreboard-post.pfa {*/
/*    grid-template-columns: minmax(0, 1fr) min-content minmax(0, 1fr) min-content minmax(0, 1fr) min-content minmax(0, 1fr) min-content minmax(0, 1fr);*/
/*}*/

#tasksList .scoreboard-post .scoreboard-item {
    display: flex;
    align-items: center;
    max-height: 48px;
    padding: 10px 12px;
}

#tasksList .scoreboard-post hr.seperator {
    margin: 5px 0;
    height: 24px;
    width: 1px;
    border: 0;
}

#tasksList .scoreboard-post div.bitOnholdSvg {
    background-image: url("/statics/img/icons/light/navbar/bit-onhold-20.svg");
}

#tasksList .scoreboard-post div.bitSvg {
    background-image: url("/statics/img/icons/light/navbar/bit-20.svg");
}

#tasksList .scoreboard-post div.coinSvg {
    background-image: url("/statics/img/icons/light/navbar/coin-20.svg");
}

#tasksList .scoreboard-post div.coinOnholdSvg {
    background-image: url("/statics/img/icons/light/navbar/coin-onhold-20.svg");
}

#tasksList .scoreboard-post div.durationSvg {
    background-image: url("/statics/img/icons/light/navbar/duration-20.svg");
}

#tasksList .scoreboard-post div.taskVSvg,
#topScoreboard div.taskVSvg {
    background-image: url("/statics/img/icons/light/navbar/task-verified-20.svg");
}

#tasksList .scoreboard-post div.taskSbSvg,
#topScoreboard div.taskSbSvg {
    background-image: url("/statics/img/icons/light/navbar/task-submitted-20.svg");
}

#tasksList .scoreboard-post div.taskRSvg,
#topScoreboard div.taskRSvg {
    background-image: url("/statics/img/icons/light/navbar/task-rejected-20.svg");
}

#topScoreboard div.bit20Svg {
    background-image: url("/statics/img/icons/light/bit-20.svg");
}

#topScoreboard div.task20Svg {
    background-image: url("/statics/img/icons/light/task-20.svg");
}

.closed-task {
    /*border-left: 10px solid #cde2ef !important;*/
}

.panel-my-trainers {
    border: 0;
    border-radius: 0px !important;
    box-shadow: none !important;
}

.panel-my-trainers .my-trainers-holder {
    height: 85vh;
    overflow-y: auto;
    padding-bottom: 2em !important;
}

.panel-my-trainers .my-trainers-holder ul#myTrainersList {
    height: 100%;
}

.panel-my-trainers .list-my-trainers li {
    margin: 0;
    box-shadow: none;
    border: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.list-my-trainers .list-group-item {
    border: none;
    border-radius: 0px;
    box-shadow: none;
}

.todos-panel {
    box-shadow: none;
    border: 0;
    /*background-color: transparent;*/
}

.panel-menu-item {
    border-right-color: transparent;
}

.lessonPathTitle {
    padding: 18px 0 0;
    font-size: 0.9em;
    font-weight: 500
}

ul.score-captions li.panel-menu-item:last-child {
    border-right: 0;
}

ul.score-captions li.panel-menu-item {
    border-right: 1px solid var(--black-0);
}

ul.navbarDesk {
    display: flex;
    height: 40px;
    align-items: center;
    margin-right: 20px !important;
}

ul.navbarDesk li.panel-menu-item {
    cursor: default;
    text-align: right;
    font-weight: 600;
    font-size: 14px;
}

.caption-font {
    font-size: 18px;
}

.links-bar {
    padding: 10px 0;
}

.scoreboard-post {
    background: var(--white);
    background-size: 30%;
}

.scoreboard-title {
    font-weight: 600;
    font-size: 1.2rem;
}

.score-captions h5 {
    text-align: right;
    font-weight: 400;
}

input[type='range'] {
    border: 0 !important;
    box-shadow: none !important;
}

.error {
    border: 2px solid var(--red);
}

.text-underline {
    text-decoration: underline;
}

.k-alert-green {
    background-color: #2BB148;
    color: #fff;
    border: 2px solid #2BB148;
}

.k-alert-blue {
    background-color: var(--blue);
    color: #fff;
    border: 2px solid var(--blue);
}

.btn-k-border-green {
    border: 1px solid var(--green);
    color: var(--green);
}

.btn-k-border-green.selected,
.btn-k-border-green:hover {
    color: #fff;
    background-color: #2BB148;
}

.btn-k-border-blue {
    border: 1px solid #3097d1;
    color: var(--blue);
}

.btn-k-border-blue.selected,
.btn-k-border-blue:hover {
    color: #fff;
    background-color: #3097d1;
}

.reg-form-container {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 10px;
}

.breadcrumb {
    border-radius: 10px !important;
}

.k-problem-text strong i.icon.green {
    color: #2BB148;
}

.k-step.lesson {
    padding: 0 !important;
}

.k-step:not(.builder),
.list-group-item:not(.help-items),
.list-group-item.teacher.help-items,
.list-group-item.courseItem {
    margin: 1rem 0;
    border-width: 2px;
    border-radius: 10px;
}

.list-group-item.help-items {
    border-radius: 0;
}

.list-table {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.links-bar {
    border-radius: 1rem !important;
}

.k-step .k-code-out {
    border-radius: 0 0 5px 5px;
    border-top: none;
}

.k-step .toolbar:not(.code-toolbar),
.k-step .extraTasks {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: center;
    margin-top: 15px;
    border-radius: 0 0 10px 10px;
}

.k-step .toolbar {
    overflow: hidden;
    margin-bottom: 0;
    border: none;
    padding: 15px;
}

.k-step .extraTasks {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
}

.k-step .extraTasks p {
    font-size: 16px;
}

.k-step .extraTasks .btn {
    background-color: var(--black-0);
    color: #ffffff;
    padding: 15px;
    border: 0;
    font-size: 16px;
}

.k-step .toolbar button.btn-check,
.k-step .toolbar button.btn-try,
.k-step .toolbar button.runcode {
    width: 100%;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    padding: 20px 10px;
    border-radius: 8px !important;
}

.k-step .toolbar-dark {
    border-radius: 0;
    margin-bottom: 0;
    background-color: #383a3a;
    border: 0;
    border-top: 2px solid #666666;
    color: #ffffff;
    overflow: hidden;
}

.k-step .toolbar-dark button.btn-get-hints {
    background-color: #383a3a;
    border: 2px solid var(--yellow);
    color: #fff;
}

.k-step .toolbar-dark button.btn-get-hints:hover {
    background-color: var(--yellow);
}

.k-step .errorBar,
.k-step .outputBar {
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    border: none;
}

.k-step .successBar > p strong {
    color: #464646;
    font-weight: 500;
    font-size: 1.2em;
}

.k-step .task-problem h1,
.k-step .task-problem h2,
.k-step .task-problem h3,
.k-step .task-problem h4,
.k-step .task-problem h5,
.k-step .task-problem h6 {
    margin-top: 0;
    margin-bottom: 15px;
}

.k-step .errorBar {
    background-color: #EE3734;
}

.k-step .successBar {
    /*background-image: url(https://res.cloudinary.com/kidocode/image/upload/v1611574492/cubie/Confetti-4s-1184px_1_pbnacc.svg);*/
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.k-step .resultsBar,
.k-step .successBar,
.k-step .reviewingBar {
    border-radius: 0 0 8px 8px;
    margin-bottom: 0;
    overflow: hidden;
    border: none;
}

.k-step .resultsBar,
.k-step .reviewingBar {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.k-step .resultsBar .btn-next,
.k-step .reviewingBar .btn-next {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    grid-column-gap: 15px;
}

.k-step .resultsBar .btn-next button.next-step,
.k-step .reviewingBar .btn-next button.next-step {
    text-transform: capitalize;
    font-size: 16px;
    padding: 20px 10px;
    font-weight: 700;
    border-radius: 8px !important;
    min-width: 200px;
    min-height: 64px;
}

.toolbar.htmlrunbar button.runcode {
    border: 0;
}

.k-step .resultsBar .xpcoin_value,
.k-step .successBar .xpcoin_value,
.k-step .reviewingBar .xpcoin_value {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
}

.k-step .resultsBar .xpcoin_value .coinval,
.k-step .successBar .xpcoin_value .coinval,
.k-step .reviewingBar .xpcoin_value .coinval {
    display: flex;
    font-size: 18px;
    font-weight: 600;
    align-items: center;
}

.k-step .successBar div.bitSvg,
.k-step .successBar div.coinSvg,
.k-step .reviewingBar div.bitSvg,
.k-step .reviewingBar div.coinSvg,
.k-step .resultsBar div.bitSvg,
.k-step .resultsBar div.coinSvg,
.lesson-summary div.bitSvg,
.lesson-summary div.coinSvg,
.lesson-summary div.bitOnholdSvg,
.lesson-summary div.coinOnholdSvg,
div.svgIcon24 {
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    margin: 0 5px;
}

div.svgIcon20 {
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

div.svgIcon23 {
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
}

.k-step .code-editor-left .outputBar .titlebar button.pinner div.svgIcon {
    position: relative;
    left: 1px;
    top: 2px;
}

div.openSvgIcon {
    position: relative;
    top: 1px;
}

div.compSvgIcon.inprogress {
    background-image: url("/statics/img/icons/circle-inprogress.svg");
}

/*#tasksList .scoreboard-post .scoreboard-item div.svgIcon20 {*/
/*    margin: 0 5px 0 0;*/
/*}*/

.k-step .successBar div.bitSvg,
.k-step .reviewingBar div.bitSvg,
.k-step .resultsBar div.bitSvg,
.lesson-summary div.bitSvg {
    background-image: url("/statics/img/icons/light/bit-24.svg");
}

.lesson-summary div.bitOnholdSvg {
    background-image: url("/statics/img/icons/light/bit-onhold-24.svg");

}

.k-step .successBar div.coinSvg,
.k-step .reviewingBar div.coinSvg,
.k-step .resultsBar div.coinSvg,
.lesson-summary div.coinSvg {
    background-image: url("/statics/img/icons/light/coin-24.svg");
}

.lesson-summary div.coinOnholdSvg {
    background-image: url("/statics/img/icons/light/coin-onhold-24.svg");
}

.lesson-summary div.durationSvg {
    background-image: url("/statics/img/icons/light/duration-24.svg");
}

.lesson-summary div.hourglassSvg {
    background-image: url("/statics/img/icons/light/hourglass.svg");
}

.lesson-summary div.taskVSvg {
    background-image: url("/statics/img/icons/light/task-verified-24.svg");
}

.lesson-summary div.taskSbSvg {
    background-image: url("/statics/img/icons/light/task-submitted-24.svg");
}

.lesson-summary div.taskRSvg {
    background-image: url("/statics/img/icons/light/task-rejected-24.svg");
}

.k-step .successBar .task-summary .task-score-summary.grid-style {
    display: grid;
    grid-template-columns: 1fr 2fr;

}

.k-step .successBar .btn-next.grid-style {
    display: grid;
    grid-template-columns: 1fr min-content;
    align-items: center;
    grid-column-gap: 15px;
}

.k-step .feelingBar .details-trigger {
    margin-top: 20px;
    display: grid;
}

.k-step .details-trigger .diffAct {
    border: 0;
    border-radius: 8px !important;
    padding: 7px 14px;
    margin-right: 8px;
    max-width: 120px;
    min-width: 60px;
    font-size: 14px;
    font-weight: 700;
}

.k-step .details-trigger .task-feedback-li div.radio:first-child {
    position: relative;
    top: -3px;
    right: -2px;
}

.k-step .details-trigger .task-feedback-li {
    padding: 15px;
    display: grid;
    align-items: center;
    border-top-width: 1px;
    border-top-style: solid;
}

.k-step .details-trigger .task-feedback-li:not(.code) {
    grid-template-columns: max-content 1fr;
    grid-column-gap: 20px;
}

.k-step .details-trigger .task-feedback-li.code {
    grid-template-rows: max-content;
    grid-row-gap: 5px;
}

.k-step .successBar button.next-step {
    text-transform: capitalize;
    font-size: 16px;
    padding: 20px 10px;
    font-weight: 700;
    border-radius: 8px !important;
    min-width: 200px;
    min-height: 64px;
}

.k-step .resultsBar,
.k-step .revisionBar,
.k-step .reviewingBar {
    height: 108px;
    padding: 20px;
}

.k-step .resultsBar:not(:last-child),
.k-step .revisionBar:not(:last-child),
.k-step .reviewingBar:not(:last-child) {
    border-radius: 0;
}

.k-step .resultsBar:last-child,
.k-step .revisionBar:last-child,
.k-step .reviewingBar:last-child {
    border-radius: 0 0 8px 8px;
}

.k-step .resultsBar p:first-child,
.k-step .revisionBar p:first-child,
.k-step .reviewingBar p:first-child {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 16px;
}

.k-step .resultsBar p:nth-child(2),
.k-step .revisionBar p:nth-child(2),
.k-step .reviewingBar span.xpcoin_value {
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
}

.k-step .rejectBar,
.k-step .verifyBar {
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 15px;
    display: grid;
    grid-template-columns: min-content 1fr;
}

.k-step .rejectBar > div,
.k-step .verifyBar > div {
    padding: 15px;
}

.k-step .rejectBar p,
.k-step .verifyBar p {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 400;
    padding: 15px;
}

.k-step .helpBar {
    background-color: #F1641E;
    color: #333;
    font-weight: bold;
    vertical-align: middle;
}

.k-step .task-solution {
    background-color: #2BB148;
    color: #fff

}

.k-step .successBar.collapsed {
    background-color: #ececec;
    color: #333;
}

.k-step .successBar.collapsed a {
    color: var(--blue)

}

.k-problem-body, .k-problem-intro, .task-hints {
    font-weight: 400;
}

.k-step .try-it-holder {
    display: grid;
    justify-items: end;
    margin: 0 0 10px;
}

.k-problem-intro p {
    margin: 0;
}

.k-problem-intro p:not(:last-child) {
    margin-bottom: 5px;
}

.k-problem-intro ul {
    margin: 10px 0;
}

.k-step .xp-holder-kstudio {
    position: relative !important;
    height: 92vh;
    padding: 7em;
}

.k-step .xp-holder > div,
.k-step .error-notif-holder > div {
}

.k-step .xp-holder button.close-xpholder {
    background-color: unset;
    justify-self: self-end;
    position: absolute;
    right: 10px;
    top: 17px;
    font-size: 1.3em;
}

.k-step .error-notif-holder button.close-error-notif {
    background-color: unset;
}

.k-step .error-notif-h {
    height: 62px;
    position: absolute;
    width: 100%;
    z-index: 4;
}

.k-step .kstudio .error-notif-h {
    height: 100px;
    position: absolute;
    width: 50%;
    z-index: 4;
    right: 0;
}

.k-step .xp-holder button:focus,
.k-step .error-notif-holder button:focus {
    outline: none !important;
}

.k-step .xp-holder a.task-feedback:focus {
    color: inherit;
}

.k-step .code-editor-right button.continue {
    font-weight: 700;
}

.k-step .code-editor-right.dark button.continue {
    background-color: var(--green) !important;
    color: #000000;
}

.k-step .code-editor-right.light button.continue {
    color: #ffffff !important;
}

.k-step .code-editor-right.dark button.continue:hover {
    color: #ffffff;
}

.k-step .code-editor-right.light button.continue:hover {
    background-color: #2c974b;
    color: #ffffff;
}

.k-step .code-editor-right .xp-holder {
    background-image: url(https://res.cloudinary.com/kidocode/image/upload/v1611543268/cubie/Confetti-4s-1660px_1_etmjn2.svg);
    height: 100%;
    padding: 4em;
    text-align: center;
    border: none;
    position: relative;
}

.k-step .code-editor-right .error-notif-holder {
    padding: 20px 15px;
    text-align: center;
    border: none;
    opacity: 0.9;
    display: grid;
    grid-template-columns: min-content 2fr min-content;
    align-items: center;
}

.k-step .code-editor-right .error-notif-holder div.notif-content {
}

.k-step .code-editor-right .error-notif-holder span.icon-bug {
    color: var(--black-0);
    font-size: 16px;
}

.k-step .code-editor-right.light .xp-holder {
    background-color: #fcf3f3;
    color: var(--dark);
}

.k-step .code-editor-right.light .error-notif-holder {
    background-color: var(--yellow);
}

.k-step .code-editor-right.light .error-notif-holder button.close-error-notif {
    padding: 8px 20px;
    border-radius: 8px !important;
}

.k-step .code-editor-right.light .xp-holder,
.k-step .code-editor-right.light .error-notif-holder p {
    font-weight: 600;
}

.k-step .xp-holder .content p,
.k-step .error-notif-holder .content p {
    font-weight: 300;
    font-size: 1.5rem;
}

.k-step .error-notif-holder .content p {
    text-align: left;
}

.k-step .error-notif-holder .content p.output {
    white-space: pre-wrap;
    font-family: monospace, sans-serif;
    border: 1px solid var(--border-gray);
    margin: 15px 0;
    padding: 5px 15px;
    border-radius: var(--border-radius);
    text-align: left;
    color: var(--blue);
    box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
}

.k-step .xp-holder .content h4 {
    font-size: 3rem;
    font-weight: 900;

}

.k-step .xp-holder .content h5.coin-title {
    font-size: 3rem;
    font-weight: 900;
}

.k-step .xp-holder .content h5.execute-time {
    font-size: 2rem;
}

.k-step .xp-holder .content div.task-feedback-li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    justify-items: baseline;
}

.k-step .xp-holder .content .feelingBar .details-trigger {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.justify-self-end {
    justify-self: end;
}

.display-flex {
    display: flex;
}
.display-none{
    display: none;
}

.display-grid {
    display: grid;
}

.flex-wrap-wrap {
    flex-wrap: wrap
}

.display-flex-im {
    display: flex !important;
}

.justify-self-start {
    justify-self: start;
}

.justify-content-end {
    justify-content: flex-end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-start {
    justify-content: start;
}

.k-step .xp-holder .content .feelingBar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin: 3rem 0;
}

.k-step .xp-holder .content .feelingBar select {
    position: relative;
    top: 4px;
}

.k-step .code-editor-right.dark .xp-holder .content .feelingBar select {
    color: white;
    border: 1px solid var(--secondary);
    background-color: transparent;
}

.k-step .code-editor-right.light .xp-holder .content .feelingBar select {
    background-color: var(--white);
}

.k-step .code-editor-right .score-holder {
    height: 100%;
    display: grid;
}

.k-step .code-editor-right .score-holder:not(.wrong-output) {
    grid-template-rows: minmax(0, 2fr) min-content;
}

.k-step .code-editor-right .score-holder .score-body {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.k-step .code-editor-right .score-holder .score-body .scoring-res {
    flex-wrap: wrap;
    justify-content: center;
}

.k-step .code-editor-right .score-holder .score-body h4.title {
    margin: 0;
}

.k-step .code-editor-right .score-holder .score-body div.xp {
    display: grid;
    justify-content: center;
    justify-items: start;
    grid-template-rows: max-content;
    grid-row-gap: 24px;
    padding: 0 5px;
    text-align: left;
}

.k-step .code-editor-right .score-holder .score-body button.continue,
.k-step .code-editor-right .score-holder .score-body button.close-error-notif {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    width: 180px;
    padding: 12px 0;
    border-radius: 8px !important;
}

.k-step .code-editor-right .score-holder .score-body.done {
    background-image: url("/statics/img/svg/circuit.svg");
}

.k-step .code-editor-right .score-holder .score-body.review {
    background-color: var(--review-blue);
    background-image: url("/statics/img/svg/circuit.svg");
}

.k-step .code-editor-right .score-holder .score-body.revision {
    background-color: var(--yellow);
    background-image: url("/statics/img/svg/circuit.svg");
}

.k-step .code-editor-right .score-holder .score-body div.svgicon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
}

.k-step .code-editor-right .score-holder .score-body div.bitSvg {

    background-image: url("/statics/img/icons/light/bit-24.svg");
}

.k-step .code-editor-right .score-holder .score-body div.coinSvg {
    background-image: url("/statics/img/icons/light/coin-24.svg");
}

.k-step .code-editor-right .score-holder .score-body div.speedSvg {
    background-image: url("/statics/img/icons/light/speedometer-24.svg");
}

.k-step .code-editor-left .outputBar,
.kstudio .code-editor-left .kstudio-output {
    height: 170px;
    overflow: hidden;
    padding: 0;
}

.kstudio .code-editor-left .kstudio-output {
    left: 0 !important;
    /*width: 50%;*/
    width: 100%;
    border-right: 1px solid var(--border-gray);
}

/*.toolbar.code-toolbar-kstudio {*/
/*    width: 50%;*/
/*    !*position: absolute;*!*/
/*    left: 0 !important;*/
/*    right: 0;*/
/*    bottom: 169px;*/
/*    padding: 0.7rem;*/
/*    border-right: 1px solid var(--border-gray);*/
/*}*/


.k-step .code-editor-left.dark .outputBar,
.kstudio .code-editor-left.dark .kstudio-output {
    background-color: #000;
    color: lime;
}

.k-step .code-editor-left.light .outputBar,
.kstudio .code-editor-left.light .kstudio-output {
    background-color: var(--white);
    color: var(--blue);
    border-bottom-left-radius: var(--border-radius);
}

.k-step .code-editor-right .tab-content div.inputs-cnt > div,
.kstudio .code-editor-right .tab-content div.inputs-cnt > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 1em;
}

.k-step .code-editor-right .tab-content div.inputs-cnt > div div.card,
.kstudio .code-editor-right .tab-content div.inputs-cnt > div div.card {
    padding: 15px;
    background-color: #f6f8fa;
    border: 0;
}

.hide-console {
    height: 45px !important;
}

.hide-console-ks {
    height: 45px !important;
}

.console-hided {
    height: 55px !important;
}

.console-hided-ks {
    height: 48px !important;
    bottom: 41px !important;
}

.k-step .outputBar .titlebar,
.kstudio .kstudio-output .titlebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    height: 45px;
    padding: 0 15px;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.kstudio .kstudio-output.hide-console-ks .titlebar {
    height: 45px;
}

.k-step .outputBar.hide-console .titlebar {
    border-bottom: 0;
}

.k-step .outputBar .output-holder,
.kstudio-output .output-holder {
    height: calc(100% - 44px);
    position: relative;
    top: 0;
    padding-left: 5px;
    overflow-y: auto;
}

.k-step .code-editor-left .outputBar .titlebar span.caption,
.kstudio .code-editor-left .kstudio-output .titlebar span.caption,
.blankcnt .outputBar .titlebar span.caption {
    padding: 0 !important;
    font-size: 0.8em;
    align-self: center;
    font-weight: 700;
}

.k-step .code-editor-left .outputBar .titlebar div.tools,
.kstudio .code-editor-left .kstudio-output .titlebar div.tools {
    justify-self: end;
    align-self: center;
}

.k-step .code-editor-left.dark .outputBar .titlebar span.caption,
.kstudio .code-editor-left.dark .kstudio-output .titlebar span.caption {
    color: var(--secondary);
}

.k-step .code-editor-left.light .outputBar .titlebar span.caption,
.kstudio .code-editor-left.light .kstudio-output .titlebar span.caption {
    color: var(--dark);
}

.k-step .code-editor-left .outputBar .titlebar button.pinner,
.kstudio .code-editor-left .kstudio-output .titlebar button.pinner {
    border: 0;
    background-color: transparent;
    font-size: 13px;
}

.k-step .code-editor-left.dark .outputBar .titlebar button.pinner,
.kstudio .code-editor-left.dark .kstudio-output .titlebar button.pinner {
    color: var(--light);
}

.k-step .code-editor-left.light .outputBar .titlebar button.pinner,
.kstudio .code-editor-left.light .kstudio-output .titlebar button.pinner {
    border-radius: 4px !important;
    border: 0 !important;
    font-size: 16px;
}

.k-step .code-editor-left.light .outputBar .titlebar button.pinner ion-icon,
.kstudio .code-editor-left.light .kstudio-output .titlebar button.pinner ion-icon {
    position: relative;
    top: 2px;
}

.k-step .outputBar .titlebar button:focus, .kstudio-output .titlebar button:focus {
    outline: none !important;
}

.k-step .outputBar .titlebar button.close, .kstudio-output .titlebar button.close {
    color: var(--light);
    opacity: 1;
    margin: 0 5px;
    font-weight: 100;
}

.k-step .outputBar ul,
.kstudio-output ul {
    white-space: pre-wrap;
    font-family: monospace, sans-serif;
    position: absolute;
}

.k-step .outputBar p, .kstudio-output p {
    padding: 0;
    line-height: 13px;
}

/*.k-step .media-heading .icon,*/
.k-step .media-heading .fa,
.k-step .media-heading .fs,
.k-step .media-heading .fl,
.k-step .media-heading .fr {
    font-size: 1.5em;
    vertical-align: middle;
    margin-right: 5px;
}

.k-step .media-heading p,
.item-status-title p,
li.breadcrumb-item p {
    display: inline !important;
    margin: 0;
}

.k-step .media-heading .icon.ads, .k-step .media-heading .fa.ads {
    color: #E62117;
}

/*.k-step .media-heading .icon.code,*/
/*.k-step .media-heading .fa.code,*/
/*.k-step .media-heading .fa.html {*/
/*    color: var(--blue);*/
/*    vertical-align: middle;*/
/*    font-size: 1.7em;*/
/*}*/

.scoreboard-icon {
    font-size: 5.8em;
    color: orange;
    position: absolute;
    top: -11px;
    left: 12px;
}

.score-captions {
    font-size: 1.5em;
}

.score-captions li a {
    white-space: nowrap;
}

.score-captions.md {
    font-size: 1.1em;
}

.tsk-actions .report-bug {
    padding: 7px;
    margin: 0;
    border-radius: 10px;
    height: 30px;
    width: 30px;
}

.collapser {
    font-size: 0.9em;
}

.collapser i {
    font-weight: 600;
}

@media ( max-width: 585px ) {
    .score-captions {
        font-size: 100%;
    }

    .scoreboard-icon {
        font-size: 5em;
    }

}

/** notifications **/
.notify {
    display: block;
    background: #fff;
    padding: 12px 18px;
    width: 100%;
    margin: 0 auto;
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}

.notify h1 {
    margin-bottom: 6px;
}

.successbox h1 {
    color: #678361;
}

.errorbox h1 {
    color: #6f423b;
}

.successbox h1:before, .successbox h1:after {
    background: #cad8a9;
}

.errorbox h1:before, .errorbox h1:after {
    background: #d6b8b7;
}

.notify .alerticon {
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.notify h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.5em;
    line-height: 1.5em;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
    padding: .1em 0;
    color: #444;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.notify h1:before {
    left: -.5em;
    margin: 0 0 0 -50%;
}

.notify h1:before, .notify h1:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 50%;
    height: 1px;
    vertical-align: middle;
    background: #f0f0f0;
}

.notify h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.5em;
    line-height: 1.5em;
    letter-spacing: -0.05em;
    margin-bottom: 20px;
    padding: .1em 0;
    color: #444;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

.notify h1:before,
.notify h1:after {
    content: "";
    position: relative;
    display: inline-block;
    width: 50%;
    height: 1px;
    vertical-align: middle;
    background: #f0f0f0;
}

.notify h1:before {
    left: -.5em;
    margin: 0 0 0 -50%;
}

.notify h1:after {
    left: .5em;
    margin: 0 -50% 0 0;
}

.notify h1 > span {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

.k-step.lesson.closed-task .task-head,
.k-step .task-head.closed,
.k-step.lesson[data-status='done'] .task-head:not(.opened),
.activity-items .item .task-head.closed,
.k-step.lesson .task-head.closed {
    margin: 0;
    border-radius: 10px !important;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border: none !important;
}

.k-step.lesson .task-head,
.k-step .task-head,
.activity-items .item .task-head,
.course-items .item .task-head {
    padding: 18px 20px;
    overflow: hidden;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.k-step.lesson .task-head {
    display: grid;
    grid-template-columns: min-content minmax(0, 2fr) min-content;
    grid-column-gap: 20px;
}

.k-step.lesson .task-head ul.pull-left {
    grid-column-gap: 0.8em;
}

.k-step.lesson .task-head ul.pull-left,
.k-step.lesson .task-head ul.pull-right {
    display: flex;
    align-items: center;
}

.k-step.task-holder .tsk-idx {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.k-step.task-holder .tsk-info div#i1 {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    grid-column-gap: 14px;
    margin-bottom: 21px;
    padding-bottom: 24px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.k-step.task-holder .tsk-info div#i1 div.svgicon,
.builder .task-head div.svgicon {
    display: flex;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
}

#unsavedCodeModal #cmlHolder div.svgicon {
    display: flex;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.k-step.task-holder .tsk-info div#i1 div.svgicon svg,
.builder .task-head .icon-holder.svgicon svg {
    width: 38px;
    height: 38px;
}

.k-step.task-holder .tsk-info div#i1 div.captionHolder {
    line-height: 20px;
}

.k-step.task-holder .tsk-info div#i2 {
    display: flex;
    column-gap: 20px;
    /* grid-template-columns: repeat(6, 1fr); */
    align-items: center;
}

.k-step.task-holder .tsk-info div#i2 div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.k-step.task-holder .tsk-info div#i2 div.icon {
    background-repeat: no-repeat;
    width: 19px;
    height: 14px;
    float: left;
}

.k-step.task-holder .tsk-info div#i2 section {
    display: flex;
    align-items: center;
}

.k-step.task-holder .tsk-info div#i2 div.verified {
    background-image: url("/statics/img/icons/light/task-header/task-verified.svg");
}

.k-step.task-holder .tsk-info div#i2 div.rejected {
    background-image: url("/statics/img/icons/light/task-header/task-rejected.svg");
}

.k-step.task-holder .tsk-info div#i2 div.submitted {
    background-image: url("/statics/img/icons/light/task-header/task-submitted.svg");
}

.k-step.task-holder .tsk-info div#i2 div.closed {
    background-image: url("/statics/img/icons/light/task-header/task.svg");
}

.home-text-box,
.home-links {
    font-size: 1.1em;
    /*padding: 15px 0 0;*/
}

.activity-items .item .activity-intro,
.course-items .item .course-intro {
    font-size: 1.1em;
    font-weight: 400;
    padding: 15px 24px 32px;
}

.activity-items .item .lessons,
.course-items .item .course-activities {
    overflow: hidden;
    font-size: 1.1em;
    padding: 0;
}

.activity-items .item .task-analysis,
.course-items .item .course-map,
.course-items .item .task-analysis {
    overflow: hidden;
    font-size: 1.1em;
    background-color: var(--blue);
    margin: 0;
    padding: 15px;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.course-items .item .course-map a.render-course-map {
    color: var(--gray-100);
}

.course-items .item .course-map a.render-course-map:hover {
    text-decoration: underline;
}

.k-step .code-summary .next-step {
    margin-top: 10px;
}

.k-step .code-summary > p:first-child {
    margin-bottom: 0;
}

.k-step .task-problem,
.k-step .task-intro {
    overflow: hidden;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 400;
    word-break: break-word;
}

.k-problem-body.task-problem p img,
.k-problem-body.task-problem ol li img,
.k-step .task-problem p img,
.k-step .task-intro p img {
    max-width: 100%;
    max-height: 480px;
    margin: 10px auto;
    display: flex;
}

.k-step .task-intro {
    margin: 0;
}

.k-step .task-analysis .panel-menu-item {
    color: #fff;
}

.k-step.builder .task-intro,
.k-step.builder .task-problem {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 400;
    word-break: break-word;
}

.k-step.builder .metadata .task-intro,
.k-step.builder .metadata .task-problem {
    padding: 10px 0 !important;
    word-break: break-word;
}


.k-step .task-intro h3 {
    margin: 0;
}

.text-box {
    font-size: 1.1em;
    padding: 15px 0;
}

.text-box-border {
    font-size: 1.1em;
    padding: 10px 10px;
    margin: 10px 0;
    border-right: 10px solid #eaeaea;
    border-left: 10px solid #eaeaea;
}

.builder .editable-container {
    overflow: hidden;
    font-size: 1.1em;
    padding: 35px 10px 10px 10px !important;
    margin: 15px;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius);
    position: relative;
}

.builder .editable-container.task-hints {
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23cecce1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");*/
    background-color: var(--yellow-light);
    border: 1px solid var(--yellow);
    border-radius: var(--border-radius);
    position: relative;
    padding: 35px 10px 10px;
}

.builder .editable-container h5.editable-trigger {
    color: #8693a3;
    width: 100%;
    padding-left: 10px;
    margin-top: 13px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 20px;
}

/* hints  */
.k-step.builder .task-hints {
    margin: 0 15px;
}

.k-step .task-hints {
    overflow: hidden;
    font-size: 1.1em;
    display: flex;
    box-sizing: border-box;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
}

.k-step .task-hints .hint-icon {
    width: 49px;
    padding: 12px;
    display: flex;
    align-items: center;
}

.k-step .task-hints p {
    font-style: italic;
    margin: 0 !important;
}

.k-step .task-hints .h {
    padding: 15px;
}

.k-step .code-task-hints {
    overflow: hidden;
    font-size: 1.1em;
    padding: 1rem;
}

.k-step .code-task-hints p.hint-msg {
    color: var(--light);
}

.k-step .code-task-hints code {
    color: var(--blue) !important;
    padding: 5px 10px;
}

.k-step .code-task-hints p.hint-msg span.icon {
    margin: 0 5px 0 0;
}

.k-step .code-task-hints button.btn-get-hints,
.k-step .code-task-hints button.btn-get-answer {
    background-color: #3f3f3f;
    color: var(--primary);
    border-radius: 1rem;
    border: 2px solid #515151;
    box-shadow: 0 0 3px 1px #00000012;
}

.k-step .code-task-hints button.btn-get-hints:hover,
.k-step .code-task-hints button.btn-get-answer:hover {
    color: var(--yellow);
}

.k-step div.hintItems.light button.btn-get-hints,
.k-step div.hintItems.light button.btn-get-answer {
    color: inherit;
    border: 0;
    box-shadow: none;
    border-radius: 8px !important;
    padding: 10px 20px;
    font-size: 14px;
    margin: 7px 0;
}

.k-step .code-task-hints div.hintItems.light button.btn-get-hints:hover,
.k-step .code-task-hints div.hintItems.light button.btn-get-answer:hover {
    box-shadow: none;
    transition-duration: 0.1s;
}

.k-step .code-task-hints button.btn-get-hints:focus, .k-step .code-task-hints button.btn-get-answer:focus {
    outline: none !important;
}

.k-step .code-task-hints div.hintItems dl {
    min-width: 100%;
    margin-bottom: 0.5em;
}

.k-step .code-task-hints div.hintItems.light dl {
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
}

.k-step .code-task-hints div.hintItems dt {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    font-weight: 400;
}

.k-step .code-task-hints div.hintItems dt div.hint-icon {
    display: flex;
    align-items: center;
    min-width: 55px;
    justify-content: center;
}

.k-step .code-task-hints div.hintItems dt div.hint-count {
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 7px;
    justify-content: space-between;
}

.k-step .code-task-hints div.hintItems:not(.light) dt {
    color: var(--yellow);
}

.k-step .code-task-hints div.hintItems.light dt {
    color: var(--dark);
}

.k-step .code-task-hints div.hintItems.light dd {
    padding: 15px;
    border-top-width: 1px;
    border-top-style: solid;
}

.k-step .code-task-hints div.hintItems.light dd:not(:last-child) {
    padding-bottom: 1rem;
}

.k-step .code-task-hints div.hintItems dd {
    padding-top: 0.5rem;
    border-top: 1px solid #4b4b4b;
}

.k-step .code-task-hints div.hintItems:not(.light) .icon-light-bulb {
    color: var(--yellow);
}

.k-step .code-task-hints div.hintItems.light .icon-light-bulb {
    color: var(--dark);
}

.k-step .code-task-hints div.hintItems .answer-box {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    align-items: baseline;
    border-radius: 5px;
}

.k-step .code-task-hints div.hintItems .answer-box {
    padding: 0 7px;
}

.k-step .code-task-hints div.hintItems .answer-box .xp-badge {
    justify-self: self-start;
    align-self: center;
}

.k-step .code-task-hints div.hintItems:not(.light) .answer-box {
    background-color: #2e2f2f;
    color: #e4e4e4;
}

.k-step .code-task-hints div.hintItems.light .answer-box {
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
    margin-top: 15px;
}

.k-step .code-task-hints div.hintItems dd p {
    margin: 0;
}

.k-step .code-task-hints div.hintItems:not(.light) dd p {
    color: var(--primary);
}

.k-step .code-task-hints div.hintItems.light dd p {
    color: var(--black-0);
}

/* hints end  */

.xp-badge-danger {
    background-color: #ee3734;
}

.xp-badge-success {
    background-color: var(--green);
}

.xp-badge-warning {
    background-color: var(--yellow);
}

.k-step .code-task-hints div.hintItems.light .xp-badge-danger {
    color: var(--black-0);
}

.xp-badge {
    font-size: 0.8em;
    display: inline-block;
    border-radius: 0.5rem;
    color: #222;
    padding: 1px 5px;
    font-weight: 600;
    line-height: 20px;
    position: relative;
    top: -1px;
}

.xp-badge.ans {
    font-size: 16px;
}

.k-step .code-task-hints div.hintItems .hint-text-muted {
    color: #b7b7b7;
    display: none;
}

.k-step .code-editor-left button.fullscreen {
    padding: 2px 5px;
    margin: 4px 4px 0 0;
    border: 0 !important;
    font-size: 1em;
}

button.fullscreen:focus {
    outline: none !important;
}

.code-editor-left .toolbar.code-toolbar,
.task-code-editor-container .toolbar.code-toolbar {
    border-radius: 0;
    padding: 0.6rem;
}

.code-editor-left.dark .toolbar.code-toolbar {
    background-color: #1d1e1e !important;
    border: 0;
}

.code-editor-left.light .toolbar.code-toolbar,
.task-code-editor-container.light .toolbar.code-toolbar {
    border-top-width: 1px;
    border-top-style: solid;
}

.k-step .task-code-editor-container {
    /*background-color: var(--gray-100);*/
    border-width: 1px;
    border-style: solid;
    border-bottom: 0;
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.k-step:not(.builder) .task-code-editor-container {
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

.k-step .kstudio .task-code-editor-container {
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.k-step .kstudio .task-code-editor-container:not(.builder) {
    grid-template-columns: 1fr 1fr;
}

.k-step .kstudio .task-code-editor-container.builder {
    margin-top: 0 !important;
    grid-template-columns: 1fr 1fr;
}

.k-step:not(.builder) .task-code-editor-container {
    margin: 15px 0;
}

.k-step.builder .task-code-editor-container {
    margin: 15px;
}

.kstudio .task-code-editor-container {
    margin: 0;
}

.code-editor-left,
.code-editor-right {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content minmax(0, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 0;
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

.k-step .task-after-video > .task-code-editor-container .code-editor-left {
    height: 100%;
    width: 50%;
    float: left;
    position: absolute;
    right: 50%;
    left: 0;
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.k-step .task-after-video > .task-code-editor-container .code-editor-right {
    width: 50%;
    height: 100%;
    left: 50%;
    position: relative;
    right: 0 !important;
    overflow: hidden;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.code-editor-right {
    border-bottom-right-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

.code-editor-right.light .tab-content.edh {
    border-right: 1px solid var(--border-gray);
}

.code-editor-right.dark .tab-content.edh {
    border-right: 1px solid #4a4a4a;
}

.code-editor-left.light,
.code-editor-right.light {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.code-editor-left.light {
    border-right-width: 1px;
    border-right-style: solid;
    border-radius: 0 0 0 10px;
}

.code-editor-left.dark {
    border-right: 1px solid var(--dark);
    border-radius: 0;
}

.code-editor-left.dark,
.code-editor-right.dark {
    background-color: var(--dark);
}

/*.code-editor-left.dark .codeEventsTabs-holder {*/
/*    border-bottom: 1px solid #4a4a4a;*/
/*    border-right: 1px solid #4a4a4a;*/
/*}*/

.code-editor-left .codeEventsTabs-holder {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-radius: var(--border-radius) 0 0 0;
    display: flex;
    justify-content: space-between;
    height: 32px;
}

.code-editor-left .codeEventsTabs-holder ul:nth-child(2) {
    min-width: 40px;
}

.code-editor-left .codeEventsTabs-holder .codeEventsTabs {
    width: 100%;
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    overflow-y: hidden;
}

.code-editor-left .codeEventsTabs-holder .codeEventsTabs {
    max-width: 500px;
}

@media (min-width: 768px) {
    .code-editor-left .codeEventsTabs-holder .codeEventsTabs {
        max-width: 310px;
    }
}

.code-editor-left .codeEventsTabs-holder button.scroll span.fa {
    font-size: 0.8em;
}

.code-editor-left .codeEventsTabs-holder button.scroll,
.code-editor-right .codeViewsTabs-holder button.scroll {
    padding: 1px 6px;
    margin: 4px 0px 0 0;
    border: 0 !important;
    font-size: 1em;
}

.code-editor-left .tab-content .blocklyEditor {
    height: 50%;
}

.code-editor-left .tab-content .ks-blocklyEditor {
    height: 76%;
}

.code-editor-left .tab-content .blocklyEditor > div:first-child,
.code-editor-left .tab-content .ks-blocklyEditor > div:first-child {
    background-color: #333333;
    height: 100%;
    /*height: 524px*/
}

.code-editor-right .codeViewsTabs-holder {
    display: grid;
    border-radius: 0;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    grid-template-columns: minmax(0, calc(100% - 27px)) minmax(0, min-content);
}

.code-editor-right ul.nav {
    border-bottom: 0 !important;
}

.code-toolbar ul li:last-child button:hover {
    color: var(--light);
}

.code-editor-left .code-toolbar ul li button.submit {
    color: var(--color-btn-primary-bg);
    font-weight: bolder;
}

.code-editor-left.dark .code-toolbar ul li button.submit {
    color: var(--black-0);
}

.code-editor-left.light .code-toolbar ul li button.submit {
    font-weight: 700;
    padding: 10px;
    border-radius: 8px !important;
    box-shadow: none;
    font-size: 14px;
    border-width: 2px;
}

.code-editor-left.dark .code-toolbar ul li button:not(.submit) {
    color: var(--primary);
    border: 2px solid #454545;
}

.code-editor-left.light .code-toolbar ul li button:not(.submit) {
    color: var(--gray-900);
    background-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 10px;
    border-radius: 8px !important;
    font-size: 14px;
}

.code-editor-left .code-toolbar ul li button.openFile {
    margin-left: 5px;
    line-height: 21px;
}


.code-toolbar ul li button:hover {
    color: var(--green);
}

.code-toolbar ul li button:focus {
    outline: 0 !important;
    color: #ffffff;
}

.htmltask {
    max-height: 480px;
    overflow-y: auto;
    border-radius: 0 0 1rem 1rem;
}

.htmltask .chat-cnt {
    min-height: 146px;
    max-height: 480px;
}

.metadata {
    padding: 0 15px;
}

.metadata .task-video video {
    height: 100%;
}

.k-step:not(.builder) .after-metadata {
    padding: 15px;
}

.task-asset-viw {
    border-radius: 10px;
    margin: 0 15px 15px;
    padding: 0;
}

span.hint-bulb {
    float: left;
    margin-right: 5px;
}

.k-step .task-hints ul.hints-list img, .k-step .task-hints ul.hints-list vidoe {
    width: 256px;
}

.task-problem.k-problem-body p:last-child {
    margin: 0;
}

.k-step .border-left-yellow {
    border-left: 10px solid #f5ce13;
}

.k-step .border-left-red {
    border-left: 10px solid #ee3734
}

.k-step .border-left-green {
    border-left: 10px solid #2BB148;
}

.k-step .task-code-viewer {
    padding: 0;
    border: none;
    border-radius: 0;
    border-left: 10px solid #f5ce13;
}

.k-step .task-code-viewer > code {
    font-size: 1.1em;
}

.k-step .task-code-snapshot {
    background-color: #333;
    padding: 0;
    border: none;
    border-radius: 0;
    border-left: 10px solid #F1641E;
}

.k-step.item .course-activities h5.title,
.k-step.item .steps-list h5.title {
    font-size: 1.429em;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px;
}

.k-step.item .course-intro h5,
.k-step.item .activity-intro h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 20px
}

.k-step.item .course-intro p.desc,
.k-step.item .activity-intro p.desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #666666;
}

.k-step.item .course-intro p.desc,
.k-step.item .activity-intro p.desc {
    color: #F9F9F9;
}

.k-step .post-item {
    border-top: 0;
    overflow: hidden;
    padding: 24px 15px;
}

.k-step .post-item.item-holder {
    display: grid;
    grid-template-columns: min-content min-content 2fr min-content;
    grid-column-gap: 20px;
}

.post-item.item-holder:not(.cannot-start),
.list-group-item.course-item .course-div-body {
    cursor: pointer;
}

.k-step .post-item.item-holder div.post-item-idx {
    border-right: 1px solid #666666;
    padding-right: 20px;
    font-size: 2em;
    font-weight: 700;
    max-width: 55px;
}

.k-step .post-item.item-holder div.post-item-comp-icon {
    display: flex;
    align-items: center;
    font-size: 22px;
}

.k-step .post-item.item-holder div.post-item-status {
    border-radius: 60px;
    width: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-step .post-item.item-holder div.post-item-details h5.cap {
    font-size: 16px;
    font-weight: 700;
}

body:not(.dark-mode) .k-step .post-item.item-holder div.post-item-status.open,
body:not(.dark-mode) .k-step .post-item.item-holder div.post-item-status.open a {
    font-weight: 700;
}

.k-step .post-item.item-holder div.post-item-details div.cap-details p:first-child {
    min-width: 90px;
}

.k-step .post-item.item-holder div.post-item-details .cap-details span {
    min-width: 64px;
}

.k-step .post-item a.go h5:hover {
    text-decoration: underline;
}

.post-item li a.text-inherit span:not(#myStudentCount):not(.fa) {
    font-size: 0.9em;
    text-transform: capitalize;
    font-weight: var(--font-weight);
}

/*.k-step .task-leaderboard a:hover,*/
/*.k-step .task-leaderboard a.text-inherit h5:hover,*/
/*.k-step .task-leaderboard a.text-inherit span:hover,*/
/*.k-step .task-leaderboard .panel-menu-item:hover,*/
/*.k-step .task-leaderboard .panel-menu-item h5:hover,*/
.list-table .post-item a:hover,
.list-table .post-item a.text-inherit h5:hover,
.list-table .post-item a.text-inherit span:hover,
.list-table .post-item .panel-menu-item:hover,
.list-table .post-item .panel-menu-item h5:hover {
    text-decoration: none;
    cursor: default;
    color: inherit;
}

.leaderboard-cnt .leaderboard-holder .no-data-holder {
    margin: 15px;
}

/*.media-body .task-leaderboard.ld {*/
/*    height: 56vh;*/
/*}*/

/*@media screen and (max-width: 1024px) {*/
/*.media-body .task-leaderboard.ld {*/
/*    height: 85vh;*/
/*}*/

/*}*/
.media-body .task-leaderboard select.switch {
    width: 180px
}

.task-leaderboard .leaditems {
    /*height: 92%;*/
    /*overflow-y: auto;*/
    /*padding-bottom: 10px;*/
    height: 50.45rem;
    overflow-y: auto;
    padding-bottom: 2.2rem;
}

.task-leaderboard a.text-inherit span {
    text-decoration: none;
    cursor: default;
}

.task-leaderboard a.text-inherit h5 {
    text-decoration: none;
    cursor: default;
    /*color: inherit;*/
}

.task-leaderboard a.text-inherit h5:hover {
    text-decoration: none !important;
}

.task-leaderboard .item {
    display: grid;
    grid-template-columns: min-content 1fr min-content;
    grid-column-gap: 20px;
    align-items: center;
    padding: 15px;
}

.task-leaderboard .item.anly {
    grid-template-columns: min-content 1fr 1fr;
}

.task-leaderboard div.lead-info {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-leaderboard div.lead-info select.leaderboard-switch {
    width: 180px;
}

.task-leaderboard .item div.user-info {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column-gap: 10px;
}

.task-leaderboard .item .rank-txt {
    border-right-width: 1px;
    border-right-style: solid;
}

.task-leaderboard .item .rank-txt h5 {
    padding: 0.16em 0.76em;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
}

.task-leaderboard .item .value h5 {
    min-width: 60px;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
}

.task-leaderboard .item div.user-info img.avatar {
    border-width: 2px;
    border-style: solid;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.table.pfaDetails > tbody > tr > td,
.table.pfaDetails > tbody > tr > th,
.table.pfaDetails > tfoot > tr > td,
.table.pfaDetails > tfoot > tr > th,
.table.pfaDetails > thead > tr > td,
.table.pfaDetails > thead > tr > th {
    border: 0;
}

#leaderboardItemDiv .post-item:hover {
    background-color: inherit !important;
}

.panel-link-list a {
    margin-right: 5px;
    margin-left: 0;
    text-decoration: underline;
}

.task-video {
    /*height: 434px;*/
    display: flex;
    justify-content: center;
    position: relative;
}

.task-video.k-problem-video.embed-responsive.embed-responsive-16by9 {
    height: 434px;
}

.task-video iframe {
    padding: 15px;
}

.after-metadata {
    padding: 1rem 1.5rem;
}

.task-video i.playVideo {
    position: absolute;
    font-size: 5rem;
    color: #fff;
    width: 64px;
    height: 64px;
    top: 50% !important;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1024px) {
    .task-video i.playVideo {
        font-size: calc(5rem / 1.5);
        width: calc(64px / 2);
        height: calc(64px / 2);

    }
}

.task-video i.playVideo:not(.code):not(.cb) {
    top: calc(50% - 10px);
}

.task-video i.playVideo.code {
    top: calc(20% - 10px);
}

.task-video i.playVideo.cb:not(.code) {
    top: calc(50% - 10px);
}

.k-step:not([data-task-type="code"]) iframe.embed-responsive-item {
    height: 100% !important;
    padding: 15px;
}

.task-video > div {
    height: 100%;
}

.k-step[data-task-type="code"] .task-video.html5 {
    /*height: 100%;*/
    border-bottom: none;
}

.k-step:not(.builder)[data-task-type="code"] .task-body:not(.code-kstudio) .task-editor {
    height: 340px;
}

.k-step:not(.builder)[data-task-type="code"] .task-body.code-kstudio .task-editor {
    height: calc(100% - 228px) !important;
}

.k-step:not(.builder)[data-task-type="code"] .task-body.code-kstudio .task-after-video,
.k-step:not(.builder)[data-task-type="code"] .task-body.code-kstudio .task-after-video .code-editor-right .editor-canvas-holder {
    height: calc(100% - 50px);
}

.video-lecture-cnt {
    height: 100%;
}

/* KSTUDIO */
.teacher-kstudio,
.code-kstudio {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
}

.teacher-kstudio {
    padding: 60px 15px;
    overflow: auto;
}

.teacher-kstudio .ace_content {
    height: 100% !important;
}

.code-kstudio {
    overflow-y: auto;
    padding: 60px 15px 0;
}

.teacher-kstudio .task-after-video,
.teacher-kstudio .task-code-editor-container {
    height: 100% !important;
}

.teacher-kstudio .task-editor.teacher {
    height: calc(100% - 227px) !important;;
}

.task-kstudio {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    padding-top: 60px;
}

.task-kstudio.light {
    background-color: var(--gray-100);
}

.task-kstudio.dark {
    background-color: #333;
}

.task-kstudio .kstudio-toolbar {
    padding: 10px 10px 0;
    height: 50px;
    background-color: var(--blue);
}

.task-kstudio .container-fluid {
    position: relative;
    height: 100%;
}

.task-kstudio .screen {
    position: absolute;
    top: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

.task-kstudio .code-editor-right.dark .view {
    border-left-width: 1px;
    border-left-style: solid;
}

.task-kstudio .screen > div {
    height: 100%;
    width: 100%;
}

.task-kstudio .code-editor-right .kstudio-canvas,
.task-kstudio .code-editor-right .kstudio-comments {
    height: 100%;
}

.task-kstudio .code-editor-right.dark .kstudio-canvas,
.task-kstudio .code-editor-right.dark .kstudio-comments {
    background-color: #222222;
}

/*div.kstudio-comments.code-cmt {*/
/*    padding: 10px 0 0;*/
/*}*/

.task-kstudio .kstudio-editor {
    /*position: absolute;*/
    top: 35px;
    left: 0;
    right: 0;
    bottom: 170px;
    /*height: calc(100% - 450px);*/
    height: calc(100% - 217px);
    width: 100%;
    border-right-width: 1px;
    border-right-style: solid;
}

.task-kstudio .kstudio-editor > div {
    height: 100%;
}

.task-kstudio .kstudio-output {
    /*position: absolute;*/
    left: 18px;
    right: 0;
    bottom: 0;
    background-color: #111;
    color: lime;
    margin: 0;
    border-radius: 0;
    border: none;
    padding: 5px 10px;
}

.task-kstudio .toolbar.code-toolbar-kstudio {
    width: 100%;
    /*position: absolute;*/
    /*left: 0 !important;*/
    /*right: 0;*/
    bottom: 169px;
    padding: 0.7rem;
    border-right: 1px solid var(--border-gray);
}

.task-kstudio .kstudio-canvas {
    width: 100%;
    height: 100%;
}

.task-kstudio .kstudio-ntifications {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0 15px;
}

.task-kstudio .kstudio-editor .ace_gutter {
    height: 100%;
}

.k-btn-white-blue {
    outline: none;
    font-size: 1.1em;
    color: var(--blue);
    background-color: #fff;
    border-radius: 0;
    margin: 0 10px;
    line-height: 24px;
}

.k-step .alert > p {
    /*padding-top: 4px;*/
}

.readonly-highlight {
    background-color: var(--blue);
    position: absolute;
    z-index: 100000;
    opacity: 0.7;
    border-radius: 0 !important;
    border-bottom: 1px solid #000;
}

.readonly-highlight.read {
    background-color: #d94017;
    border-top: 3px solid #f88431;
}

.readonly-highlight:before {
    content: "";
    border-right: 9px solid #31c0f8;
    position: relative;
    top: 0px;
}

.readonly-highlight:after {
    content: " ";
    border-left: 9px solid #31c0f8;
    position: absolute;
    right: -10px;
    top: 0px;
    height: 20px;
}

.readonly-highlight.first-token:before {
    border-right: 2px solid #31c0f8;
}

video::-internal-media-controls-download-button {
    display: none;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

.k-step .help-list .help-container {
    height: 100%;
    overflow-y: auto;
}

.k-step .htmltask .help-list .help-container {
    height: 100%;
    max-height: 368px;
    min-height: 60px;
}

.k-step .help-list {
    max-height: 480px;
}

.k-step .help-list {
    display: grid;
    align-content: space-between;
    height: 100%;
    min-height: 100%;
}

.k-step .help-list ul.helps-ul {
    height: 100%;
}

.k-step .help-list textarea {
    border-radius: 0;
    min-height: 100px;
}

.k-step .help-list .help-box {
    display: grid;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 0 10px 10px;
    padding: 0 5px !important;
}

.k-step .help-list .help-box .media-holder {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.help-media-item {
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.help-media-item span.nm {
    font-size: 16px;
    font-weight: 400;
    align-items: center;
}

.help-media-item:not(:last-child) {
    margin-bottom: 10px;
}

.help-list .file_items {
    margin-bottom: 10px;
}

.help-box .file_items {
    list-style: none;
}

.k-step .help-list .help-box .media-holder .fileUpload .media-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

.k-step .help-list .help-box .media-holder .fileUpload .files input + label {
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0;
    width: 41px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.k-step .help-list .help-items {
    box-shadow: none !important;
    display: flex;
    overflow: auto;
    padding: 0 !important;
    border: 0;
}

.k-step .help-list .help-items .help-msg {
    width: 60%;
    /* word-break: break-all;
    overflow-wrap: anywhere; */
}

.k-step .help-list .help-items.sent {
    justify-content: end;
}

.k-step .help-list .help-items.received {
    justify-content: start;
}

.k-step .help-list .help-items:not(:last-child) {
    margin-bottom: 8px;
}

.k-step .help-list .help-items textarea {
    font-size: 1.1em;
    background-color: #f7f7f7;
    border: none;
}

.k-step .help-list .help-items .help-msg {
    padding: 16px;
    margin: 0;
    cursor: default;
}

.k-step .help-list .help-items div.help-msg div.files {
    border-radius: 10px;
    padding: 8px;
    margin-top: 3px;
}

.k-step .help-list .help-items .help-msg div.files div.fileSvg.w {
    background-image: url("/statics/img/icons/light/file-w-24.svg");
}

.k-step .help-list .help-items .help-msg div.files div.fileSvg.b {
    background-image: url("/statics/img/icons/light/file-b-24.svg");
}

.k-step .help-list .help-items .help-message-received {
    border-radius: 20px 20px 20px 0px !important;
}

.k-step .help-list .help-items .help-message-sent {
    border-radius: 20px 20px 0px 20px !important;
}

.k-step .help-list .help-items div.help-msg .comment-text {
    font-weight: 400;
    font-size: 16px;
}

.k-step .help-list .help-items div.help-msg span.chatTime {
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    display: flex;
    justify-content: flex-end;
}

.k-step .help-list .help-items .media-body {
    position: relative;
}

.k-step .help-list .help-items .media-body .reply-bar {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}

.k-step .help-list .help-items .media-body .reply-bar button.reply {
    padding: 1px;
    border: 0;
    color: var(--royal-blue);
}

.k-step .help-list .help-items .media-body .replyTo {
    border-radius: 10px;
    padding: 8px 10px;
}

.k-step .help-list .help-message-sent,
.k-step .help-list .help-message-received,
.k-step .help-list .help-media-holder {
    border: 0;
}

.k-step .help-list .help-media-holder {
    padding-top: 0 !important;
    font-size: 0.9em;
}

.k-step .help-list .help-media-holder .reply-bar {
    float: right;
}

.k-step .help-list .help-items img.img-circle {
    width: 28px;
    height: 28px;
    border-width: 2px;
    border-style: solid;
}

.k-step .help-list .btn.reply {
    padding: 0;
    color: #ffffff;
    text-decoration: underline;
    float: right;
    font-weight: 100;
    font-size: 0.9em;
}

.k-step .help-list .reply-to-box:before {
    content: "Reply to: ";
    font-style: initial;
    font-weight: 600;
}

.k-step .code-editor-left .help-list .btn-send-comment.code {
    border-radius: var(--border-radius);
}

.k-step .help-list.light-bg {
    background-color: transparent;
}

/*.k-step .code-editor-right.light .chat-cnt {*/
/*    background-color: var(--white);*/
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23cecce1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");*/
/*}*/

.k-step .help-list .btn-send-comment {
    /*align-self: center;*/
    /*font-weight: 700;*/
    border-radius: 8px !important;
    border: 0;
    width: 41px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.k-step .code-editor-left .help-list textarea.text-comment.code {
    resize: none;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: none;
}

.k-step .code-editor-left.dark .help-list textarea.text-comment.code {
    background-color: var(--black-0);
    color: #fff;
}

.k-step .code-editor-left.light .help-list textarea.text-comment.code {
    background-color: var(--color-bg-primary);
}

.k-step .help-list textarea.text-comment {
    border: 0;
    /*border-width: 1px;*/
    /*border-style: solid;*/
    box-sizing: border-box;
    border-radius: 10px;
    resize: none;
    box-shadow: none;
}

.k-step .help-list textarea.text-comment:focus {
    background-color: #ffffff;
}

.k-step .help-list .reply-to-box {
    width: 100%;
    background-color: #f5ce13;
    color: #333;
    border-radius: 5px 5px 0 0;
    padding: 4px 10px;
}

.k-step .help-list .chatSender {
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 3px;
}

.chat-container .chatSender {
    color: var(--color-text-secondary);
    font-weight: 200;
    font-size: 0.85em;
}

iframe:focus, .task-canvas:focus {
    outline: none !important;
}

#notifications {
    position: fixed;
    right: 0;
    width: 340px;
    top: 50px;
    bottom: 0;
    background-color: #3e3e3e;
    padding: 33px 21px 20px 20px;
    box-shadow: -1px 0 6px rgba(0, 0, 0, 0.5);
    z-index: 1000000;
    overflow-y: auto;
}

.notification-bell span.icon {
    font-size: 34px;
}

.notification-bell a {
    padding: 5px 17px !important;
}

.notification-bell.notified {
    color: #EE3734
}

.starrr {
    font-size: 5em;
    color: var(--green);
    cursor: pointer;
}

ul.feedback-items li.question-item li.question-text {
    width: 320px;
    text-align: right
}

ul.feedback-items li.question-item li.question-text p,
ul.feedback-items li.question-item.rate-text p {
    margin: 0;
    display: inline;
}

.html-task-panel,
.feedback-panel {
    margin-top: 20px;
}

.quiz-holder .metadata .task-hints {
    margin-top: 15px;
}

.quiz-panel {
    padding: 0 15px 15px;
}

.quiz-item {
    margin-bottom: 0 !important;
}

.quiz-item-answer:last-child {
    margin-bottom: 0 !important;
}

.quiz-item-answer {
    cursor: pointer;
    padding: 3px 14px;
    margin-bottom: 7px !important;
    position: relative;
    font-size: 1.5rem;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.quiz-item-answer div.qsvg {
    cursor: pointer;
    width: 28px;
    height: 24px;
    background-repeat: no-repeat;
}

.quiz-item-answer.selected div.qsvg {
    background-image: url("/statics/img/icons/quiz/selected.svg");
}

.quiz-item-answer.selected.wrong div.qsvg {
    background-image: url("/statics/img/icons/quiz/wrong.svg");
}

.quiz-item-answer.selected.correct div.qsvg {
    background-image: url("/statics/img/icons/quiz/correct.svg");
}

.quiz-item-answer.selected:not(.wrong):not(.correct) div.qsvg,
.quiz-item-answer:not(.wrong):not(.correct):hover div.qsvg {
    background-image: url("/statics/img/icons/quiz/selected.svg") !important;
}

.quiz-item-answer a {
    font-size: 1.5rem;
}

/*.quiz-item-answer img {*/
/*    width: 256px;*/
/*    height: auto;*/
/*}*/
.quiz-item-answer .btn-answer p img {
    width: auto !important;
    height: auto;
    display: inline-block;
}

.quiz-item-answer.quiz-input {
    border: 0 !important;
    padding: 0;
}

.quiz-item-answer input[type=text] {
    box-shadow: none;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-blue-light);
}

.quiz-item-answer > span:first-child {
    display: inline-block;
    padding: 2px 16px;
    border-radius: 1px;
    position: absolute;
    top: 0px;
    left: 0;
    bottom: 0;
    line-height: 32px;
    /*background-color: var(--blue);*/
    /*color: #fff;*/
}

.quiz-item-answer.selected.correct {
    border-color: #50BF59 !important;
    box-shadow: 0px 4px 0px #50BF59 !important;
}

.quiz-item-answer.selected:not(.correct) {
    border-color: #0057FA;
    box-shadow: 0px 4px 0px #0057FA;
}

.quiz-item-answer a:hover {
    text-decoration: none;
}

.quiz-item-answer:hover:not(.selected),
.quiz-item-answer:hover:not(.selected):not(.wrong) {
    border-color: #0057FA;
    box-shadow: 0px 4px 0px #0057FA;
}

/*.quiz-item-answer:hover:not(.selected) div.qsvg,*/
/*.quiz-item-answer:hover:not(.selected):not(.wrong) div.qsvg {*/
/*    background-image: url("/statics/img/icons/quiz/selected.svg");*/
/*    background-repeat: no-repeat;*/
/*}*/

.quiz-item-answer.wrong {
    border-color: #E7403C !important;
    box-shadow: 0px 4px 0px #E7403C !important;
}

.quiz-item-answer .btn-answer code {
    white-space: break-spaces;
    padding: 3px 0;
}

.quiz-item-answer .btn-answer pre {
    background-color: transparent !important;
    padding: 0;
    margin: 0;
}

.quiz-item-answer .btn-answer pre code {
    background-color: transparent !important;
}

.quiz-item-answer .btn-answer {
    text-align: left;
    font-size: 1.5rem;
    margin-left: 6px;
}

.quiz-item-answer .btn-answer:hover {
    color: #222222;
}

.quiz-item-answer .btn-answer:hover,
.quiz-item-answer .btn-answer:focus {
    text-decoration: none;
}

.builder .quiz-item-text {
    padding: 10px 0 !important;
}

.quiz-item-text {
    padding: 3px 0;
    font-weight: 400;
    margin-bottom: 0 !important;
}

.quiz-item:not(:last-child) {
    margin-bottom: 20px !important;
}

.quiz-item .quiz-stickers > div {
    border-radius: 0;
    margin-bottom: 0;
    overflow: hidden;
    padding: 10px 12px;
    font-weight: 400;

}

.quiz-item .quiz-stickers .quiz-hint {
    padding: 12px;
    border: 1px solid var(--yellow);
    color: #222222;
}

.quiz-item .quiz-stickers .quiz-answer {
    margin-bottom: 7px !important;
    position: relative;
    font-size: 1.5rem;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px 14px;
}

.quiz-item .quiz-stickers .quiz-answer p {
    margin: 0;
}

.quiz-item .quiz-stickers .quiz-answer p code {
    white-space: break-spaces;
    padding: 0;
}

.quiz-item .quiz-failed {
    border-radius: 0;
    margin-bottom: 0;
    background-color: #EE3734;
    border: none;
    color: #fff;
    overflow: hidden;
    padding: 10px 12px;
}

.panel-body.no-padding {
    padding: 0;
}

.panel-body.no-padding ul.media-list {
    margin-bottom: 0;
    padding-bottom: 0;
}

.btn-success-outline {
    color: #2BB148;
    background-color: transparent;
    border-color: #2BB148;
    outline-color: #2BB148;

}

.btn-success-outline:focus,
.btn-success-outline.focus,
.btn-success-outline:hover,
.btn-success-outline:active,
.btn-success-outline.active,
.open > .dropdown-toggle.btn-success-outline {
    color: #ffffff;
    background-color: var(--green);
    box-shadow: none;
}

.list-group-item {
    border-width: 2px;
    border-style: solid;
}

.list-group-item:last-child {
    /*border-top: 0;*/
}

.panel-profile .panel-body {
    padding: 0;
}

.panel:not(.panel-profile) .panel-menu.scoreboard {
    font-size: 0.8em;
}

.left-bar-floating {
    display: block !important;
    position: fixed;
    left: 0;
    width: 302px;
    z-index: 10000;
    background-color: #f6f8fa;
    bottom: 0;
    top: 51px;
    padding-top: 31px;
    box-shadow: 2px 0px 3px -3px rgba(0, 0, 0, 0.51);
}

.left-bar-trigger:focus,
.left-bar-trigger:active {
    outline: none;
}

.left-bar-trigger {
    outline: none;
    font-size: 2em;
    position: absolute;
    line-height: 0;
    border: none;
    padding-top: 9px;
    padding-left: 17px;
    padding-bottom: 13px;
    border-radius: 0;

}

.left-bar-floating .panel {
    border: none;
}

.left-bar-trigger:hover {
    color: #000;
    background-color: #fff;
}

.panel-default > .panel-heading {
    color: #1e3948;
    background-color: var(--blue);
    border-color: #f1641e;
}

.panel-fit p {
    margin-bottom: 1px;
}

.panel-green .panel-body {
    background-color: #2bb148;
    color: #fff;
}

.panel-kido .panel-body a {
    cursor: pointer;
    text-decoration: underline;
}

.panel-kido .panel-body a {
    color: #fdd022
}

.panel-yellow .panel-body a {
    color: #333
}

.panel-orange .panel-body {
    background-color: #f1641e;
    color: #fff;
}

.panel-blue .panel-body {
    background-color: #0b74b7;
    color: #fff;
}

.panel-blue .panel-body a {
    color: #fdd022
}

.panel-red .panel-body {
    background-color: #EE3734;
    color: #fff;
}

.panel-yellow .panel-body {
    background-color: #fdd022;
    color: #333;
    font-weight: 400;
}

.panel-dark .panel-body {
    background-color: #333;
    color: #fff;
}

.panel-no-border {
    border: none;
}

.selected-item-type {
    color: var(--black-0);
    font-size: 1.5rem;
    font-weight: 500
}

/* builder editor tab */
.nav-editor-builder {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border: 1px solid var(--border-gray);
}

.editor-tab-content {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border: 1px solid var(--border-gray);
}

.nav.nav-editor-builder > li > a {
    color: #222222;
}

.nav.nav-editor-builder > li > a:hover,
.nav.nav-editor-builder > li > a:focus {
    text-decoration: none;
    background-color: unset;
}

.nav-pills.nav-editor-builder > li.active > a,
.nav-pills.nav-editor-builder > li.active > a:hover,
.nav-pills.nav-editor-builder > li.active > a:focus {
    color: var(--color-underlinenav-border-active);
    border-radius: 0;
    background-color: transparent;
}

.nav.nav-editor-builder li.active:after {
    content: none;
}

.nav.nav-editor-builder > li > a {
    padding: 5px 14px;
    font-weight: 400;
}

.code-editor-left.dark ul.nav-tasktoolbar-tabs.nav-code {
    background-color: #222222;
}

.code-editor-left.light ul.nav-tasktoolbar-tabs.nav-code {
    background-color: transparent;
    position: relative;
    top: -1px;
}

.nav-tasktoolbar-tabs.nav-code {
    width: 100%;
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    overflow-y: hidden;
    padding: 0.01em 0;
}

.codeViewsTabs-holder .nav-scroll {
    position: absolute;
    right: 0;
    display: none;
}

@media only screen and (max-width: 1440px) {
    .codeViewsTabs-holder .nav-scroll {
        display: block;
    }
}

.nav.nav-tasktoolbar-tabs > li.active > a,
.nav.nav-tasktoolbar-tabs > li.active > a:focus,
.nav.nav-tasktoolbar-tabs > li.active > a:hover {
    border-width: 0;
}

.nav.nav-tasktoolbar-tabs > li > a {
    border: none;
    font-weight: 400;
    color: var(--color-underlinenav-text) !important;
    padding: 5px 15px;
}

.nav.nav-tasktoolbar-tabs.nav-code > li > a {
    border: none;
    padding: 5px 15px;
}

.code-editor-right .nav.nav-tasktoolbar-tabs.code > li.active > a,
.code-editor-right .nav.nav-tasktoolbar-tabs.code > li > a:hover {
    border: none;
    background: transparent;
}

.code-editor-right.light .nav.nav-tasktoolbar-tabs.code > li.active > a,
.code-editor-right.light .nav.nav-tasktoolbar-tabs.code > li > a:hover {
    font-weight: 600;
}

/*.nav li:not(.active) a {*/
/*    font-weight: bold;*/
/*}*/

.nav.nav-tasktoolbar-tabs > li.active > a,
.nav.nav-tasktoolbar-tabs > li > a:hover {
    cursor: pointer;
    border: none;
    color: var(--color-underlinenav-text) !important;
    background: transparent;
}

.nav.nav-tasktoolbar-tabs > li > a::after {
    content: "";
    color: var(--color-underlinenav-text-active) !important;
    background: var(--color-underlinenav-border-active) !important;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after,
.nav.nav-tasktoolbar-tabs > li.active > a::after,
.nav.nav-tasktoolbar-tabs > li:hover > a::after {
    transform: scale(1);
}

.nav.nav-tasktoolbar-tabs > li.active > a::after,
.nav.nav-tasktoolbar-tabs > li:hover > a::after {
    height: 3px;
}

/* editor tab */
.code-editor-left.dark .nav-editor {
    background-color: #222222;
}

.code-editor-left.light .nav-editor {
    background-color: transparent;
}

.nav.nav-editor > li > a:hover,
.nav.nav-editor > li > a:focus {
    text-decoration: none;
    background-color: unset;
}

.nav-pills.nav-editor > li.active > a,
.nav-pills.nav-editor > li.active > a:hover,
.nav-pills.nav-editor > li.active > a:focus {
    background-color: unset;
}

.code-editor-left .nav-pills.nav-editor > li.active > a,
.code-editor-left .nav-pills.nav-editor > li.active > a:hover,
.code-editor-left .nav-pills.nav-editor > li.active > a:focus {
    color: var(--green);
}

.code-editor-left .nav-pills.nav-editor > li.active > a,
.code-editor-left .nav-pills.nav-editor > li.active > a:hover,
.code-editor-left .nav-pills.nav-editor > li.active > a:focus,
.code-editor-left .nav-pills.nav-editor > li:hover > a::after {
    color: var(--color-underlinenav-text-active);
    font-weight: 600;
}

.code-editor-left .nav-pills.nav-editor > li.active > a::after,
.code-editor-left .nav-pills.nav-editor > li:hover > a::after {
    content: "";
    background: var(--color-underlinenav-border-active);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(1);
    height: 2px;
}

.nav.nav-editor li.active:after {
    content: none;
}

.nav.nav-editor > li > a {
    cursor: pointer;
    padding: 5px 10px;
    font-weight: 400;
    border-radius: 0;
}

.nav.nav-editor > li:hover > a {
    font-weight: 600;
}

/* code view switch */
.material-switch {
    position: relative;
    top: 7px;
}

.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0;
    position: relative;
    width: 20px;
}

.material-switch > label::before {
    background-color: #919090;
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 7px;
    margin-top: -8px;
    position: absolute;
    transition: all 0.4s ease-in-out;
    width: 17px;
}

.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 12px;
    left: -4px;
    margin-top: -6px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 12px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 9px;
}

.bonusBar,
.builder-faqbar,
.builder-quizbar,
.builder-feedbackbar,
.jump-item,
.builder-hintsBar,
.record-bar {
    padding: 15px;
    border: 1px solid #ddd;
    background-color: #f6f6f6;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 15px 15px;
}

.builder-faqbar, .builder-hintsBar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
}

.builder-faqbar .faq-item,
.builder-hintsBar .hint-item {
    display: grid;
    grid-template-rows: max-content;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
    margin: 0 0 15px;
}

.builder-faqbar .faq-item {
    grid-template-columns: 1fr 1fr max-content;
}

.builder-hintsBar .hint-item {
    grid-template-columns: 1fr max-content;
}

.builder-faqbar .head,
.builder-hintsBar .head {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-template-rows: max-content;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
}

.bonusBar-metadata {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 25px;
    grid-row-gap: 0;
}

.bonusBar-metadata .checkbox {
    display: grid;
    grid-template-columns: 1fr max-content min-content;
    align-items: center;
}

.bonusBar-metadata span.fa-info-circle {
    cursor: pointer;
    margin: 0 0 0 20px;
    position: relative;
    top: 5px;
    font-size: 13px;
    color: #5bc0de;
}

.builder-uploadBar {
    border: 1px solid #ddd;
    background-color: #f6f6f6;
    padding: 15px;
    border-radius: 10px;
    margin: 0 15px 15px;
    overflow: hidden;
}

.editor-toolbar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23cecce1' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
    border: 2px solid var(--border-gray);
    padding: 15px;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
}

/*.editor-toolbar:last-child {*/
/*    border-bottom: 1px solid #ddd;*/
/*}*/

.askBar, .darkBar {
    padding: 15px;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    background-color: #3d4245;
    color: #fff;
    overflow: hidden;
}

.questionTextarea {
    width: 100%;
    color: black;
    border: 0;
    border-radius: 4px;
    padding: 5px;
    resize: none;
    margin-top: 10px;
}

.closeQuestionBtn {
    padding: 0;
    font-size: 16px;
    margin: 0 5px;
    background-color: unset;

}

.skipped.collapsed {
    opacity: 0.5;
    height: 50px;
    padding-top: 5px !important;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.3) inset;
    overflow: hidden;
}

/* recording button */
button.recording {
    width: 35px;
    height: 35px;
    font-size: 0;
    background-color: #ee3f36;
    border: 0;
    border-radius: 35px;
    margin: 18px;
    outline: none;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.not-rec {
    background-color: darkred;
}

.rec {
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes pulse {
    0% {
        box-shadow: 0px 0px 5px 0px rgba(173, 0, 0, .3);
    }
    65% {
        box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, .3);
    }
    90% {
        box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, 0);
    }
}

mstyle {
    color: black !important;
}

.sendQuestionBtn {
    background-color: #0088CC;
    color: #fff;
    border: 0;
    margin: 0 10px;
}

.blocklyTreeLabel {
    color: black !important;
}

textarea.build-textarea {
    resize: none;
}

textarea.essay-textarea {
    height: 100%;
    border-radius: var(--border-radius);
    box-shadow: none;
    color: var(--black-0);
    border: 1px solid var(--border-gray);
}

.file_select {
    color: #ffffff;
    padding: 10px;
    position: relative;
    top: 4px;
}

.file_select:focus {
    color: #ffffff;
}

.br-0 {
    border: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.pfa-chart-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
    margin: 0;
}

.chart-wrapper {
    display: flex;
    flex-direction: column;
}

.chart-wrapper div.anys-details {
    padding: 0 27px;
}

.chart-wrapper div.anys-details h4 {
    margin-top: 0;
    margin-bottom: 36px;
}

.chart-wrapper div.anys-details h5 {
    margin-bottom: 0;
    margin-top: 27px;
}

.chart-wrapper div.anys-details h5.subh5 {
    margin-top: 36px;
}

.chart-wrapper .canvas_holder {
    width: 100%;
}

.chart-canvas {
    width: 100% !important;
    height: 100% !important;
}

.code-editor-right .editor-canvas-holder {
    height: 568px;
}

.game-bg {
    background-color: #ffffff;
}

.code-editor-right .task-canvas .game {
    background-color: #ffffff;
}

.kstudio-iframe {
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    border: 0;
}

.code-diff-img {
    /*width: 543px;*/
    width: 100%;
    position: absolute;
    pointer-events: none;
    /*left: -60px;*/
    top: 32.39px;
    z-index: 2;
}

.kstudio-diff-img {
    z-index: 2;
    position: absolute;
    pointer-events: none;
    left: 49.99%;
    top: 33px;
}

.display-inline {
    display: inline;
}

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

.task-img-thumb, .task-vid-thumb {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.code-editor-right .task-canvas {
    height: 100%;
}

.code-editor-right.light .task-canvas.py {
    position: relative;
}

.code-editor-right .task-canvas canvas {
    /*width: 100% !important;*/
    height: 100% !important;
}

.builder .code-editor-right .task-canvas canvas {
    width: unset !important;
    height: unset !important;
}

.code-editor-right .task-canvas.answer-canvas {
    position: relative;
    pointer-events: none;
    /*left: -60px;*/
}

.code-editor-right.dark .task-canvas {
    background-color: var(--dark);
}

.code-editor-right .task-canvas iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.code-editor-right.dark .task-canvas iframe {
    background-color: #222222;
}

.code-editor-right.light .task-canvas iframe {
    background-color: #ffffff;
}

.task-feed-icon {
    color: #666565;
    font-size: 2.3rem !important;
}

.full-height {
    height: 100%;
}

.nav-tabs:not(.htmlcode) {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.builder .task-settings .nav.nav-tabs {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.nav-tabs.htmlcode.pre {
    max-height: 41px;
}

.nav-tabs.htmlcode:not(.pre) {
    border: 0;
}

.nav-tabs:not(.nav-code),
.nav-tabs:not(.nav-analysis),
.nav-tabs:not(.nav-tr),
.nav-tabs:not(.nav-tr-side),
.nav-tabs:not(.nav-st),
.nav-tabs:not(.htmltask-nav),
.nav-tabs:not(.codeEventsTabs-kstudio),
.nav-tabs:not(.code) {
    max-height: 40px;
    border-radius: 10px 10px 0 0;
}

.nav-tabs.htmltask-nav {
    border-radius: 1rem 1rem 0 0;
}

.nav-tabs.nav-analysis {
    max-height: 32px;
    border-width: 1px;
}

.nav-tabs.nav-analysis li {
    max-height: 32px;
    min-width: 64px;
    text-align: center;
}

.nav-tabs.nav-analysis li a {
    padding: 5px;
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
}

.nav-tabs.htmltask-nav,
.nav-tabs.codeEventsTabs-kstudio,
.nav-tabs.code {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-width: 0;
    font-weight: bold;
}

.nav-tabs > li > a {
    border: none;
    font-weight: 400;
}

.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
    border: none;
    color: var(--color-underlinenav-text) !important;
    background-color: transparent !important;
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;

}

.nav-tabs > li > a::after {
    content: "";
    height: 0;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs.nav-analysis > li > a::after,
.ctgWall .nav-tabs.nav-tr > li > a::after,
.todos-panel .nav-tabs > li > a::after {
    height: 2px;
    bottom: 0;
    background-color: var(--blue);
}

.todos-panel .nav-tabs > li > a::after {
    bottom: -1px;
}

.nav-tabs.prchart > li > a::after {
    height: 2px;
    bottom: 5px;
    background-color: var(--blue);
}

#studentsDiv .student-details-body .nav-tr > li > a::after,
#studentsDiv .student-details-body .nav-tr > li:hover > a::after {
    background-color: var(--royal-blue);
    height: 2px;
    bottom: 3px;
}

.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}

.builder-question-dl {
    padding-bottom: 2rem;
    margin-bottom: 10px;
}

.builder-question-dl:last-child {
    border-bottom: 0;

}

.k-green-badge {
    position: relative;
    top: -2px;
    font-size: 0.7em !important;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 14px;
}

.bell-notification {
    position: absolute;
    top: 21px;
    right: 17px;
    border-width: 2px;
    border-style: solid;
    font-size: 0.7em;
    border-radius: 50%;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
}

.chat-notification,
.feeds-notification {
    position: absolute;
    top: 2px;
    right: 0;
    border-width: 2px;
    border-style: solid;
    font-size: 0.7em;
    border-radius: 50%;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
}

.help-nav-btn {
    font-size: 2rem !important;
}

.help-nav-btn.mobile {
    font-size: 2rem !important;
}

.todos-panel .tab-content .tab-pane.rt-tab-content {
    position: relative;
    overflow-y: hidden;
    /*bottom: -11px;*/
    /*border-radius: 10px;*/
}

.todos-panel .tab-content .tab-pane.rt-tab-content .see-all {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 5px;
    border-top-width: 2px;
    border-top-style: solid;
    border-radius: 0 0 10px 10px;
}

.feeds-holder {
    height: 95%;
    overflow-y: auto;
}

.feeds-holder .clear-feed {
    display: grid;
    justify-content: center;
    justify-items: center;
    margin: 26px 0 0;
}

.feeds-holder .clear-feed div.svgIcon {
    width: 100%;
    height: 115px;
    background-repeat: no-repeat;
    position: relative;
    left: 20px;
    margin-bottom: 20px;
}

.feeds-holder .clear-feed h5 {
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #767676;
    margin-bottom: 7px;
}

.feeds-holder .clear-feed h6 {
    color: #C4C4C4;
    font-size: 14px;
    line-height: 17px;
    margin: 0;
}

.feeds-holder span.clear {
    padding: 10px;
    position: relative;
    top: 10px;
}

.rt-tab-content {
    overflow-y: auto;
    height: calc(100% - 40px);
}

.feed-div {
    margin-bottom: 0;
    border-radius: 0;
    font-weight: 400;
    display: grid;
    padding: 16px
}

.feed-div .feed-info {
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-column-gap: 10px;
    margin-bottom: 10px
}

.feed-div .feed-info img {
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    object-fit: cover;
}

.feed-div .feed-details {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-column-gap: 10px;
}

.feed-div .feed-details #feednotif {
    background-color: var(--blue);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    top: 6px;
}

.feed-div:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.feed-div a {
    text-decoration: underline;
}

.feed-div:not(:first-child) {
    border-top: 0;
}

/* upload bar */
.uploadBodyDiv {
    border: 0;
    overflow: hidden;
}

.uploadBodyDiv .btn-upload {
    position: absolute;
    right: 10px;
    top: 10px;
}

.uploadBodyDiv a.removeFile {
    width: 100%;
    color: #fff;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
}

.uploadBodyDiv a.removeFile span {
    color: #fff;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
}

.uploadBodyDiv form input[type='file']:focus {
    outline: none !important;
}

.uploadBodyDiv form input[type='file'] {
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 15px 10px;
    text-align: center !important;
    margin: 0;
    width: 100% !important;
    color: #757575;
    font-size: 1.1rem;
    border: 1px solid #e2e2e2;
    border-radius: var(--border-radius);
    background-color: #ffffff;
}

/*.uploadBodyDiv form input[type='file']:after {*/
/*    !*pointer-events: none;*!*/
/*    !*position: absolute;*!*/
/*    !*top: 17px;*!*/
/*    !*left: 0;*!*/
/*    !*width: 64px;*!*/
/*    !*right: 0;*!*/
/*    !*height: 64px;*!*/
/*    !*content: "";*!*/
/*    !*background-image: url(/statics/img/uploading_b.png);*!*/
/*    !*display: block;*!*/
/*    !*margin: 0 auto;*!*/
/*    !*background-size: 100%;*!*/
/*    !*background-repeat: no-repeat;*!*/
/*}*/

/*.uploadBodyDiv form input[type='file']:before {*/
/*    !*position: absolute;*!*/
/*    !*bottom: 0;*!*/
/*    !*left: 0;*!*/
/*    !*pointer-events: none;*!*/
/*    !*width: 100%;*!*/
/*    !*right: 0;*!*/
/*    !*height: 34px;*!*/
/*    !*content: "Or drag it here.";*!*/
/*    !*display: block;*!*/
/*    !*margin: 0 auto;*!*/
/*    !*color: #d3d3d3;*!*/
/*    !*text-align: center;*!*/
/*    !*font-weight: 200;*!*/
/*    !*font-size: 1.4rem;*!*/
/*}*/

.txtcp {
    width: max-content;
    text-align: left;
    float: left;
    padding: 4px 10px !important;
    font-size: 1rem;
    font-weight: 600;
    top: 1px;
    position: relative;
}

.uploadBodyDiv .files_list .fileList .list-group > div.list-group-item {
    padding: 10px;
    width: 128px;
    display: grid;
    grid-row-gap: 5px;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    margin-bottom: 0;
}

.uploadBodyDiv .files_list .fileList .list-group > div.list-group-item .gallery_product img {
    width: 100%;
}

.bg-dark {
    background-color: #222222;
}

.uploaded-items-holder {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
}

.file-card {
    width: 128px !important;
    display: grid !important;
    grid-row-gap: 5px !important;
    margin-right: 15px;
}

.uploaded-items-holder-md {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.uploaded-items-holder-md .k-card {
    width: 24%;
    margin: 0;
    margin-right: 1%;
    margin-bottom: 1%;
}

#uploaderAssetsModal .asset-item {
    width: 24%;
    margin: 0;
    margin-right: 1%;
    margin-bottom: 1%;
}

.uploaded-items-holder-md video,
.uploaded-items-holder-md audio {
    width: 100%;
    height: 64px;
}

.uploaded-items-holder-md img {
    width: 64px;
    height: 64px;
}

.uploaded-items-holder .action-btns {
    grid-template-rows: 1fr 1fr;
    align-items: center;
}

.uploaded-items-holder input.asset-tag {
    border: none;
    box-shadow: 0px 0 3px 1px rgba(0, 0, 0, 0.08)
}


/* builder */
.builder-uploadBar form input[type='file']:focus {
    outline: none !important;
}

.builder-uploadBar .files_list .fileList .list-group > div.list-group-item {
    padding: 10px;
    width: 100%;
    display: inline-table;
    border: 0;
}

.builder-uploadBar .files_list .fileList .list-group > div.list-group-item {
    margin-bottom: 0;
    box-shadow: none;
}

.builder-uploadBar .files_list .fileList .list-group > div.list-group-item .hdpe img {
    width: 64px;
}

.builder-uploadBar form.fileGeneralUpload input[type='file'] {
    padding: 5px;
    /*text-align: center !important;*/
    margin: 0;
    color: #757575;
    font-size: 1.1rem;
    border: 1px solid #dddddd;
    border-radius: var(--border-radius);
}

.builder-uploadBar form:not(.fileGeneralUpload) input[type='file'] {
    outline-offset: -10px;
    -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
    padding: 5px;
    /*text-align: center !important;*/
    margin: 0;
    width: 100% !important;
    color: #757575;
    font-size: 1.1rem;
    border: 1px solid #dddddd;
    border-radius: var(--border-radius);
}

/*.builder-uploadBar form:not(.fileGeneralUpload) input[type='file']:after {*/
/*    pointer-events: none;*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    left: 0;*/
/*    width: 64px;*/
/*    right: 0;*/
/*    height: 64px;*/
/*    content: "";*/
/*    background-image: url(/statics/img/uploading_b.png);*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*    background-size: 64%;*/
/*    background-repeat: no-repeat;*/
/*}*/

/*.builder-uploadBar form:not(.fileGeneralUpload) input[type='file']:before {*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    pointer-events: none;*/
/*    width: 100%;*/
/*    right: 0;*/
/*    height: 25px;*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*    color: #000000;*/
/*    text-align: center;*/
/*    font-weight: 200;*/
/*    font-size: 1.3rem;*/
/*}*/

.builder-uploadBar form:not(.fileGeneralUpload) input[name='generalAsset']:before {
    content: "Upload a file";
}

/*.builder-uploadBar form:not(.fileGeneralUpload) input[name='video']:before {*/
/*    content: "Upload a video";*/
/*}*/

/*.builder-uploadBar form:not(.fileGeneralUpload) input[name='image']:before {*/
/*    content: "Upload an image";*/
/*}*/

.chat-list {
    padding: 15px;
}

.chat-box {
    box-shadow: none !important;
    background-color: transparent;
    border-radius: 0 !important;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 0;
    padding: 0;
    border: 0 !important;
    margin-bottom: 15px !important;
}

.chat-box textarea {
    resize: none;
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius);
    box-shadow: none;
    background-color: var(--gray-000);
    color: #000;
}

.chat-box .btn-send-chat {
    color: var(--black-0);
    font-weight: 700;
    border-radius: var(--border-radius);
}

.hidden-overflow {
    overflow: hidden;
}

.chat-items li a {
    box-shadow: none !important;
    margin: 0 !important;
}

.chat-items li {
    box-shadow: none !important;
    border: 1px solid var(--border-gray);
    border-bottom: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.chat-items li:first-child {
    border-bottom: 0 !important;
    border-radius: 5px 5px 0 0 !important;
}

.chat-items li:last-child {
    border-bottom: 1px solid var(--border-gray) !important;
    border-radius: 0 0 5px 5px !important;
}

.chat-items {
    max-height: 75vh;
    height: 100%;
    overflow-y: auto;
    border: 0;
    border-radius: 0 !important;
}

.chat-items img.img-circle {
    width: 26px;
    margin: 0;
}

.chat-items .chat-message-sent,
.chat-items .chat-message-received {
    background-color: var(--white);
    border-radius: var(--border-radius);
    color: var(--black-0);
    margin-bottom: 5px;
    padding: 10px;
}

.chat-items .chat-message-sent:hover,
.chat-items .chat-message-received:hover {
    background-color: #ffffff;
}

.chat-items .reply-bar button.reply {
    color: var(--blue);
}

.chat-items .comment-text {
    font-weight: 400;
}

.chat-container li a.chat-message-sent,
.chat-container li a.chat-message-received {
    border: 0 !important;
}

.analysis-small-text {
    font-size: 60%;
}

.not-resizable {
    resize: none;
}

.v-resizable {
    resize: vertical;
}

.upload-btn-div {
    margin: 5px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.myMarker {
    position: absolute;
    background: var(--yellow);
    z-index: 20;
}

.myOutputMarker {
    position: absolute;
    background: var(--yellow-light);
    z-index: 20
}

.student-info-sidebar span.icon {
    font-size: 2rem;
}

.student-info-sidebar span.t {
    font-size: 0.8em;
}

.student-info-sidebar {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: max-content;
    grid-column-gap: 0;
    grid-row-gap: 0;
    justify-items: start;
}

.student-info-sidebar:not(:last-child) {
    margin-bottom: 15px;
}

.student-info-sidebar div.num {
    display: grid;
    justify-items: start;
}

.student-info-sidebar a {
    align-self: center;
    justify-self: baseline;
}

.student-info-sidebar span.icon, .student-info-sidebar span.fas, .student-info-sidebar span.fa, .skill-icon-sidebar {
    align-self: center;
    justify-self: start;
}

.skill-icon-sidebar {
    font-size: 1.3em;
    font-weight: 600;
    margin-right: 2px;
}

.student-info-sidebar a {
    cursor: default;
}

.student-info-sidebar span.text-inherit {
    align-self: center;
    justify-self: baseline;
}

.student-info-sidebar a:hover {
    color: inherit;
}

pre.hljs {
    margin: 0;
    border-radius: 0;
}

.blank-precode pre.hljs {
    font-size: 1.5rem;
    border-radius: var(--border-radius);
}

.blank-precode pre {
    padding: 0;
}

.blank-precode code {
    display: block;
    padding: 5px 15px 5px;
}

.code-blank-precode code.notxt {
    padding: 15px;
}

.blank-precode {
    border-radius: 0;
    box-shadow: none;
    color: #000;
}

.blank-precode textarea {
    position: relative;
    top: 5px;
    display: inline;
    box-shadow: none;
    background-color: var(--blue-light);
    border: 1px solid var(--border-blue-light);
    border-radius: var(--border-radius);
    line-height: 20px;
    margin: 0 2px;
}

.blank-precode textarea:focus {
    background-color: #ffffff;
    outline: 0 !important;
    padding: 2px !important;
}

.blankcnt .editor-tabs-holder {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-radius: var(--border-radius) 0 0 0;
    display: flex;
    justify-content: space-between;
}

.blankcnt .editor-tabs-holder ul:nth-child(2) {
    min-width: 40px;
}

.blankcnt ul.editor-tab {
    width: 100%;
    overflow-x: auto;
    display: flex;
    white-space: nowrap;
    overflow-y: hidden;
}

.blankcnt .blank-editor-holder {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
    overflow-y: auto;
    height: calc(var(--blank-task-height) - 300px);
}

.blankcnt .outputBar .runcode {
    width: 100%;
    border-radius: 8px !important;
}

/* lesser that 768 */
@media (max-width: 1450px) {
    .blankcnt ul.editor-tab {
        max-width: 300px;
    }
}

@media (min-width: 1450px) {
    .blankcnt ul.editor-tab {
        max-width: 400px;
    }
}

.blankcnt ul.editor-tabs-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blankcnt button.scroll span.fa {
    font-size: 0.8em;
}

.blankcnt button.scroll {
    padding: 1px 6px;
    margin: 4px 0px 0 0;
    border: 0 !important;
    font-size: 1em;
}

.blankcnt {
    display: grid;
    grid-template-rows: max-content;
    min-height: var(--blank-task-height);
}

.blankcnt:not(.preview) {
    border-right-width: 1px;
    border-right-style: solid;
}

#code_blank_detail {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--border-radius);
    padding: 0;
    min-height: var(--blank-task-height);
    max-width: 95.875em;
}

#code_blank_detail .preview {
    min-height: var(--blank-task-height);
    width: 50%;
    border-left: 0;
    /*border-left-style: solid;*/
}

#code_blank_detail .preview .tab-content {
    height: 100%;
}

#code_blank_detail .preview .tab-content .tab-pane {
    height: inherit;
}

#code_blank_detail .drawing-cnt .task-canvas {
    height: 100%;
}

#code_blank_detail .drawing-cnt iframe {
    height: 100%;
    width: 100%;
    border: 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

#code_blank_detail .video-lecture-cnt video {
    height: unset;
}

.video-lecture-cnt img {
    max-width: 400px;
    height: auto;
}

.code-drag-options {
    padding: 6px 15px 15px !important;
    margin: 0 15px 15px !important;
    border-radius: 10px;
}

.blank-options {
    margin: 15px 0;
}

.blank-options label.chose {
    background-color: var(--blue-light);
    color: transparent !important;
}

.blank-options label {
    cursor: pointer;
    margin: 5px;
    padding: 0.6rem 1.2rem;
    display: inline-block;
    min-width: 10px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    text-align: center;
    border-radius: 10px;
    background-color: transparent;
    border: 2px solid #0057FA;
    box-sizing: border-box;
    box-shadow: 0px 4px 0px #0057FA;
}

.blank-precode span.blank_opt {
    cursor: pointer;
    background-color: #ffffff;
    margin: 0 3px;
    line-height: 35px;
    border-radius: 5px;
    border: 1px solid var(--quiz-border-blue);
}

.order-task-container.stickers pre {
    padding: 0;
}

.order-task-container.stickers pre,
.order-task-container.stickers pre code {
    background-color: var(--quiz-blue);
}

.order-task-container li,
.order-task-container div.item {
    cursor: pointer;
    margin: 0 0 17px;
    position: relative;
    font-size: 1.5rem;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px;
}

.order-task-container .order-icon {
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.order-task-container li pre,
.order-task-container div.item pre {
    border: 0;
    padding: 4px 15px;
}

.order-task-container .order-icon {
    background-image: url("/statics/img/icons/quiz/draghandle-24.svg");
}

.order-task-container div.item:hover .order-icon,
.order-task-container div.item.done .order-icon {
    background-image: url("/statics/img/icons/quiz/draghandle-24-blue.svg");
}

.btn-answer p {
    margin: 0 !important;
}

.quiz-items-holder #nextBtn:focus,
.quiz-items-holder #prevBtn:focus {
    outline: 0 !important;
}

.quiz-items-holder .step {
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbbbbb;
    border: none;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.5;
}

.quiz-items-holder .step.active {
    opacity: 1;
}

/* Mark the steps that are finished and valid: */
.quiz-items-holder .step.finish {
    background-color: #4CAF50;
}

.pfaquiz-answer {
    border-top: 2px dashed #2bb148;
    margin: 1.5rem 0 0 0;
    padding: 1rem;
    color: #eee;
}

.k-problem-body code,
.task-hints code,
.task-intro code,
.quiz-item-text code {
    background-color: var(--gray-100);
    white-space: break-spaces;
}

.task-intro pre code,
.k-problem-body pre code {
    display: block;
}

/*.quiz-item-text code {*/
.quiz-item-text pre {
    margin: 5px 0 0;
}

.task-hints code,
.task-intro code {
    margin: 5px 0 5px;
}

.task-after-video .k-problem-body code {
    margin: 10px 0;
}

/*.quiz-item-text code,*/
.metadata .k-problem-body code,
.metadata .task-hints code,
.metadata .task-intro code {
    margin: 5px 0 5px;
}

.qai {
    padding: 0 10px 0 0;
    vertical-align: middle;
}

.v-middle-align {
    vertical-align: middle;
}

.task-diff-icon {
    font-size: 1.5rem;
    margin-right: 6px;
}

.course_map {
    margin-top: 20px;
    display: none
}

.ai {
    position: relative;
    top: -2px;
}

.inline-flex {
    display: inline-flex
}

ul.modules-status li:first-child, ul.lessons-status li:first-child {
    width: 72px;
    /*width: 80px;*/
}

ul.modules-info li,
ul.lessons-info li {
    width: 85px;
}

ul.modules-info li:first-child,
ul.lessons-info li:first-child {
    width: 85px;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #dddddd !important;
    border-radius: 10px !important;
    min-height: 39px !important;
}

.input-group .form-control:first-child {
    border-width: 1px;
    border-style: solid;
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;
    min-height: 39px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--multiple .select2-selection__arrow {
    top: 6px !important;
    white-space: break-spaces !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    line-height: 33px !important;
    height: 100% !important;
    white-space: break-spaces !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    height: 28px;
    line-height: 25px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid var(--border-blue-light) !important;
    color: var(--blue) !important;
    border-radius: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent !important;
    color: var(--gray-500) !important;
    outline: none;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--blue-light) !important;;
    color: var(--blue) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    outline: none !important;

}

.select2-results__option--selectable {
    text-transform: capitalize;
}

.select2-container--default .select2-results__option--selected {
    background-color: #c8e1ff;
}

.list-table .post-item img.avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    position: relative;
    top: 4px;
}

.html-task-holder {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: max-content 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0;
}

.lb-u-title {
    font-weight: 700 !important;
    color: var(--black-0) !important;
    text-transform: uppercase;
}

#stepSummary .lesson-summary {
    display: flex;
    flex-direction: column;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 18px;
}

#stepSummary .lesson-summary div.summary-footer,
#stepSummary .lesson-summary div.title {
    padding: 30px 26px;
}

#stepSummary .lesson-summary div.scores {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#stepSummary .lesson-summary div.bits,
#stepSummary .lesson-summary div.tasks {
    display: flex;
    flex-direction: column;
    padding: 0 0 0 26px;
    font-weight: 700;
    font-size: 18px;
}

#stepSummary .lesson-summary div.bits {
    border-right-width: 1px;
    border-right-style: solid;
}

#stepSummary .lesson-summary div.bits #oh,
#stepSummary .lesson-summary div.bits #ea {
    display: grid;
    width: 100%;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
}

#stepSummary .lesson-summary div.bits #oh,
#stepSummary .lesson-summary div.tasks #ts {
    margin-bottom: 26px;
}

#stepSummary .lesson-summary div.tasks #ts,
#stepSummary .lesson-summary div.tasks #tm {
    display: grid;
    width: 100%;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 15px;
}

#stepSummary .ave-footer div.bits #ea,
#stepSummary .ave-footer div.tasks #tm {
    display: grid;
    width: 100%;
    align-items: center;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 15px;
}


#stepSummary .lesson-summary div.summary-footer {
    display: flex;
    /*margin-top: 15px;*/
}

#stepSummary .lesson-summary .ave-footer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
#stepSummary .lesson-summary div.tasks #tm div.display-flex {
   gap:5px
}
.flex-1 {
   flex: 1;
}
.flex-3{
   flex: 3;
}

.card {
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    border-radius: 10px;
}

.faqsBar {
    padding: 15px;
}

.code-editor-right .faqsBar .faq-item {
    padding: 15px;
    border-style: solid;
    border-width: 1px;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
}

.faqsBar .faq-item .faq-answer {
    margin-top: 5px;
}

.faqsBar .faq-item .faq-answer p {
    margin: 0;
}

.faqsBar .faq-item .faq-answer img {
    width: 256px;
    height: 256px;
}

#onboarding .content {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: end;
    grid-template-rows: max-content;
}

#onboarding .img-loading {
    width: 200px;
    margin: 0 auto;
}

.profilepage .edit-profile {
    grid-template-columns: 1fr min-content;
    grid-column-gap: 2em;
    padding: 15px 15px 15px 0
}

.profilepage .settings-box {
    grid-template-columns: 1fr 5fr;
    grid-column-gap: 2em;
    padding: 0;
    box-shadow: none;
    border-width: 2px;
    border-style: solid;
    margin: 20px !important;
}

.edit_avatar div.upload-state {
    font-weight: 400;
}

.btn-edit-avatar {
    font-size: 12px;
    width: 32%;
    border: 1px solid var(--border-gray);
    position: relative;
    bottom: 28px;
    left: 0;
    border-radius: var(--border-radius);
    padding: 2px 10px 2px 5px;
    background-color: var(--color-bg-tertiary);
}

.btn-edit-avatar:hover {
    background-color: #f3f4f6;
    transition-duration: 0.1s;
    color: #24292e;
}

.avatar_box img {
    width: 200px;
    height: 200px;
    border: 2px solid var(--border-gray);
    object-fit: cover;
}

@media (max-width: 1024px) {
    .avatar_box img {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 1143px) {
    .code-kstudio {
        overflow-y: auto;
        padding: 88px 12px 0;
    }
}

.menu {
    list-style: none;
    background-color: var(--color-bg-primary);
    border-right: 2px solid var(--border-gray);
    border-radius: 10px 0 0 10px;
    margin: 0;
}

.menu .menu-heading {
    display: block;
    padding: 8px 16px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: inherit;
    font-weight: 600;
    color: var(--color-menu-heading-text);
    border-bottom: 1px solid var(--color-border-secondary);
}

.menu .menu-item {
    position: relative;
    display: block;
    padding: 8px 16px;
    color: var(--secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

.menu .menu-item:hover {
    text-decoration: none;
    background-color: var(--color-state-hover-secondary-bg);
    outline: none;
}

.menu-item.selected:before,
.menu-item[aria-current]:not([aria-current=false]):before,
.menu-item[aria-selected=true]:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    content: "";
    background-color: var(--color-menu-border-active);
}

.output-holder div.loading-code {
    display: grid;
    justify-content: center;
    height: 100%;
    align-items: center;
}

.unittest-cnt .unittest-item {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-column-gap: 1em;
    align-items: center;
    background-color: var(--color-bg-canvas-inset);
    color: var(--black-0);
    border: 1px solid var(--border-gray);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-bottom: 10px
}

.unittest-cnt .unittest-item p {
    font-family: monospace;
}

.unittest-cnt .unittest-item label.test-status {
    align-self: start;
    margin-bottom: 0;
}

/* PROGRESS PAGE STARTS */

.trrep {
    width: 100%;
    height: 600px
}

.progress-page #stdReport,
.progress-page #stdReportCharts {
    margin: 21px;
}

.progress-page .progress-toolbar {
    border: 2px solid;
}

.progress-page .progress-toolbar .summary {
    display: flex;
    padding: 15px 24px;
    min-height: 92px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    cursor: default;
}

.progress-page .progress-toolbar .summary.tr{
    display: flex;
    flex-direction: column;
    padding: 15px 24px;
    min-height: 92px;
    flex-wrap: wrap;
    cursor: default;
    align-items: unset;
    justify-content: unset;
}

.progress-page .progress-toolbar .summary div:not(.overall) {
    justify-self: center;
}

.progress-page .progress-toolbar .summary .overall h5 {
    font-size: 20px;
    margin: 0;
    margin-bottom: 5px;
    font-weight: bold;
}

@media (max-width: 1024px) {
    .progress-page .progress-toolbar .summary .overall h5 {
        font-size: 18px;
    }

    .k-step .resultsBar .xpcoin_value,
    .k-step .successBar .xpcoin_value,
    .k-step .reviewingBar .xpcoin_value {
        font-size: 14px;
        font-weight: 600;
    }

    .k-step .successBar {
        grid-template-columns: 5fr .75fr;
        grid-column-gap: 20px;
    }

    .k-step .successBar .btn-next.grid-style {
        grid-column-gap: 0;
        align-self: center;
    }
    .k-step .successBar .bitSubtitle{
        display: none;
    }
}

@media (max-width: 768px) {
    .task-footer.successBar .task-summary.grid-style.align-self-center {
        margin-right: 5px;
    }
    .k-step .successBar button.next-step{
        min-width: 100px;
    }


    .k-step .successBar {
        grid-template-columns: 5fr .75fr;
        grid-column-gap: 20px;
    }

    .k-step .successBar .btn-next.grid-style {
        grid-column-gap: 0;
        align-self: center;
    }

    .k-step .successBar .xpcoin_value,
    .k-step .reviewingBar .xpcoin_value {
        font-size: 14px;
    }

    .k-step .successBar div.bitSvg {
        margin: 0 5px 0 0;

    }
}

.progress-page .prTblHolder {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    display: grid;
    cursor: default;
}

.progress-page .prTblHolder .progress-selector .head {
    padding: 15px 15px 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 19px;
}

.progress-page .prTblHolder .progress-selector .items {
    padding: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;
}

.progress-page div#logsTblHolder ,.progress-page div#activitiesLogsTblHolder {
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
}

.progress-table {
    border: 0;
    border-radius: 0;
}

.progress-table.progress-report div#table {
    height: 100%;
    max-height: 500px;
    overflow-y: auto;
}

.progress-table.logs {
    margin-top: 15px;
}

.progress-table.logs th {
    border: 0;
}

.sys-reports-selector {
    border: 0;
    padding: 15px 15px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.progress-selector {
    border: 0;
    padding: 15px 0;
    display: grid;
    flex-wrap: nowrap;
    flex-direction: row;
}

.progress-selector div.srch button,
.category-toolbar div.srch button,
#addCourseModal div.srch button {
    height: 39px;
    font-size: 20px;
    border: 0;
    border-radius: 0 10px 10px 0 !important;;
}

.progress-selector ul {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.progress-selector ul li {
    width: 33%;
}

.progress-toolbar #c1,
.progress-toolbar #c2 {
    display: grid;
    justify-content: start;
    border-radius: var(--border-radius);
}

.progress-toolbar #c1 {
    grid-template-columns: 2fr 1fr;
    border-radius: 10px 10px 0 0;
}

.progress-toolbar #c2 {
    grid-template-columns: 1fr 1fr;
    border-radius: 0 0 10px 10px;
}

.progress-table .table > thead > tr > th,
.progress-table .table > tbody > tr > th,
.progress-table .table > tfoot > tr > th,
.progress-table .table > thead > tr > td,
.progress-table .table > tbody > tr > td,
.progress-table .table > tfoot > tr > td {
    padding: 15px 8px;
    border: 0;
    max-width: 150px;
}

.progress-table:not(.tr) .table > thead > tr > th,
.progress-table:not(.tr) .table > tbody > tr > th,
.progress-table:not(.tr) .table > tfoot > tr > th,
.progress-table:not(.tr) .table > thead > tr > td,
.progress-table:not(.tr) .table > tbody > tr > td,
.progress-table:not(.tr) .table > tfoot > tr > td {
    font-size: 1.1em;
}

.progress-table.tr .table > thead > tr > th,
.progress-table.tr .table > tbody > tr > th,
.progress-table.tr .table > tfoot > tr > th,
.progress-table.tr .table > thead > tr > td,
.progress-table.tr .table > tbody > tr > td,
.progress-table.tr .table > tfoot > tr > td {
    font-size: 1em;
}

@media (max-width: 1024px) {
    .progress-table .table > thead > tr > th,
    .progress-table .table > tbody > tr > th,
    .progress-table .table > tfoot > tr > th,
    .progress-table .table > thead > tr > td,
    .progress-table .table > tbody > tr > td,
    .progress-table .table > tfoot > tr > td {
        font-size: 1em;
    }
}

.progress-table .table > thead:first-child > tr:first-child > th:first-child,
.progress-table .table > tbody > tr > td:first-child {
    padding-left: 28px;
    max-width: 200px;
}

.progress-table .table > thead:first-child > tr:first-child > th:last-child,
.progress-table .table > tbody > tr > td:last-child {
    padding-right: 28px;
}

.progress-table .table > thead:first-child > tr:first-child > th {
    border-top-style: solid !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    vertical-align: middle;
}

.progress-table:not(.tb) .table > thead:first-child > tr:first-child > th {
    border-top-width: 1px !important;
}

.progress-table.tb .table > thead:first-child > tr:first-child > th {
    border-top-width: 0 !important;
}

.progress-table span.sk {
    font-size: 1.5em;
    position: relative;
    top: 1px;
}

/* PROGRESS PAGE END */

.scoreboard .badges {
    display: grid;
    grid-template-rows: max-content;
}

.scoreboard .badges .more-badges {
    justify-self: start;
    font-size: 16px;
    margin-top: 10px;
}

.scoreboard .badges .badge-holder {
    display: flex;
    flex-wrap: wrap;
    grid-column-gap: 0.6em;
    height: 60px;
    overflow-y: auto;
}

.scoreboard .badges .badge-holder > div {
    margin-bottom: 10px;
}

.scoreboard .badges .badge-holder > div:not(.badge-owned) img {
    opacity: 0.3;
}

.scoreboard .badges .badge-holder > div.badge-owned img {
    opacity: 1;
}

.scoreboard .badges .badge-holder img {
    width: 24px;
}

@media (min-width: 768px) {
    #moreBadgesModal .modal-dialog {
        width: 750px;
    }
}

.badge-card {
    position: relative;
    display: inline-block;
    border-width: var(--border-w);
    border-style: solid;
    border-radius: var(--border-radius);
    transition: box-shadow 0.25s;
    margin: 0 5px 5px 0;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.badge-card.badge-owned {
    -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(0);
}

.badge-card.medium {
    flex: 0 0 auto;
    width: 24%;
}

.badge-card .badge-contents {
    display: flex;
    justify-content: center;
    min-height: 120px;
    height: 100%;
    padding: 0 10px;
}

.badge-card .badge-contents .badge-icon {
    display: flex;
    flex: 0 0 auto;
    width: 37px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
}

.badge-card .badge-contents .badge-icon img {
    width: 45px;
}

.badge-card .badge-contents .badge-info {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
}

.badge-card .badge-contents .badge-summary abbr {
    text-decoration: underline dotted;
    font-weight: 400;
    cursor: default;
}

.badge-students section {
    display: grid;
    margin-bottom: 0;
    grid-template-columns: max-content max-content;
    grid-column-gap: 0;
    justify-items: center;
    align-items: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding-bottom: 15px;
}

.badge-students section img {
    width: 64px;
    margin-right: 15px
}

.badge-students ul .std {
    display: flex;
}

.badge-students ul .std:not(:last-child) {
    margin-bottom: 15px;
}

.badge-students ul .std img {
    max-width: 52px;
    margin-right: 15px;
    margin-bottom: 0;
}

.badge-students .list-table ul.item-details li.panel-menu-item {
    min-width: 82px;
}

.task-reports .student-details-body {
    padding: 0 !important;
}

.brli {
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

.caption-icon {
    font-size: 14px;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

.media-holder {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.media-holder .fileUpload {
    justify-self: flex-start;
    width: 100%;
}

.media-holder .fileUpload .media-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.media-holder .fileUpload .files input {
    height: 0;
    overflow: hidden;
    width: 0;
}

.media-holder .fileUpload .files input + label {
    cursor: pointer;
    display: inline-block;
    font-family: "Rubik", sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    margin-bottom: 0 !important;
    outline: none;
    padding: 5px 10px;
    position: relative;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    vertical-align: middle;
}

.todos-panel #msgCnt.msgCnt {
    position: absolute;
    background-color: var(--badge-red);
    color: #ffffff;
    border-radius: 50%;
    padding: 1px 5px;
    z-index: 1;
    font-size: 1.1rem;
    top: 3px;
    right: 17px;
    cursor: default;
    width: 20px;
    text-align: center;
}

.todos-panel .trMsgCnt #msgCnt.msgCnt {
    top: 5px;
    right: 0;
}

.page-link-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.page-link-enabled {
    opacity: 1;
    pointer-events: auto;
}

#time_canvas_holder div.table-responsive,
#score_canvas_holder div.table-responsive,
.task-leaderboard #toptenDiv,
.task-leaderboard #leaderboardDiv,
.progress-table.progress-report div#table {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none;
    max-height: 500px;
    overflow-y: auto;
}

.task-canvas .plot-figure {
    width: 80% !important;
}

.task-canvas .plot-figure {
    display: none;
}

.task-canvas .plot-figure:last-child {
    display: block;
}

.task-canvas .plot-figure > div:nth-child(1) {
    /* display: none !important; */
    font-weight: 400;
    padding: 5px 10px
}

.task-canvas .plot-figure > div:nth-child(2) canvas {
    width: 100% !important;
    height: auto !important;

}

.task-canvas .plot-figure > div:nth-child(3) {
    /* display: none !important; */
}

.task-canvas button.matplotlib-toolbar-button {
    font-size: 10px !important;
    padding: 9px 11px !important;
}

.k-step .media-body span.zoomIcon {
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    position: relative;
    background-size: contain;
    top: 4px;
}

/* mit app code from
======================================*/
.mit-code__clipboard {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
}

.mit-code__clipboard:hover {
    color: #bfc1bf;
}

.mit-code__clipboard:active {
    color: #23c323;
    transform: scale(0.95);
}

.mit-code__from {
    flex: 1;
    flex-direction: column;
    min-width: 200px;
}

.mit-code__input {
    max-width: 300px;
}

.mit-code__text {
    margin: 0;
    margin-bottom: 11px;
}

.student-profile-body {
    gap: 1rem;
}

.student-profile-body .info-box {
    flex-wrap: wrap;
    flex: 2;
}

.student-profile-body .info-box div {
    flex: 2;
}

.student-profile-body .info-box div.mit-code__from {
    flex: 4;
}

@media (max-width: 1399px) {
    /* CSS styles here */
    .info-box ul.list-unstyled {
        width: 150px;
    }

    /*    .student-profile-body{*/
    /*    grid-template-columns: 80px 1fr;*/
    /*}*/
    .student-profile-body .info-box {
        display: flex;
        gap: 1rem !important;
    }

    .student-profile-body .info-box li.timegrid .rb-icon {
        width: 24px !important;
        margin-right: 5px !important;
    }

    .mit-code__text {
        font-size: 16px;
        font-weight: normal;
    }

    .mit-code__from {
        grid-column: none;
    }
}

@media (max-width: 1024px) {
    .mit-code__from {
        display: none;
    }

}

li.panel-menu-item.reports img {
    content: url("../img/icons/light/navbar/report.svg");
}

/*trainer modal styling*/
.tr-report-checkbox {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 6px
}

.trainer-report-checkbox label {
    margin: 0;
    padding: 0;
}

.trainer-report-checkbox input {
    margin: 0;
    padding: 0;
}

.flex-33 {
    flex: 33%
}

.flex-gap-10 {
    gap: 10px;
}

.flex-gap-3em {
    gap: 3em;
}