.elementor-165 .elementor-element.elementor-element-735be48{--display:flex;--min-height:70vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-165 .elementor-element.elementor-element-06970ef{--display:flex;}.elementor-165 .elementor-element.elementor-element-61b0320{--display:flex;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}@media(min-width:768px){.elementor-165 .elementor-element.elementor-element-06970ef{--width:25%;}.elementor-165 .elementor-element.elementor-element-61b0320{--width:74.979%;}}/* Start custom CSS for shortcode, class: .elementor-element-67bb382 */#lesslist-id {
   font-family: "Rutenia Arial";
}

.lesson-list i {
    font-size: 14px;
    padding-right: 3px;
}
.slide-toggle {
    cursor: pointer;
}
.less-title {
    display:inline-block;
    padding-right: 16px;
    font-weight: 500;
    position: relative;
}
.lessonlink i {
    color:var(--e-global-color-640ffbf);
    font-size: 14px;
    position: absolute;
    padding: 6px 1px 0 0;
    right: 0;
}
.lessonlink i:hover {
    color:#01A49F;
}
.access i {
    color: var(--e-global-color-d2c9d35);
}
.no-access i {
    color: #CCCCCC;
}
.learned i {
    color: var(--e-global-color-640ffbf);
}
.lesson-list .nochecked {
    color: #CCCCCC;
}
.lesson-list .checked {
    color: var(--e-global-color-d2c9d35);
}
.lesson-list .msg {
    font-size: 10px;
}
.lesson-plan ul {
    padding: 0 0 0 7px;
    margin-left: 6.5px;
    border-left: 1px solid #01A49F;
    font-size: 12px;
    list-style-type: none;
}
.lesson-plan ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400; 
    content: "\f054";
    font-size:10px;
    padding-right:5px;
    color:#286E87;
  }

.lesson-list i[data]:hover:after, .my-progress[data]:hover:after, .my-avr-res[data]:hover:after {
  content: attr(data);
  padding: 5px 8px;
  color: var(--e-global-color-4d69ffa);
  font-size: 10px;
  font-weight: 600!important;
  position: absolute;
  right: 10px;
  white-space: nowrap;
  z-index: 2;
  border-radius: 15px;
  box-shadow: 0 0 4px 0 var(--e-global-color-4d69ffa);;
  background: #fff;
  font-family: "Rutenia Arial";
}

/* Мій прогрес і середній бал*/
.my-progress, .my-avr-res {
    background-color: #f0f0f0;
    border-radius: 2px;
    box-shadow: 0 0 2px 0 #ada9a9;
    margin-bottom: 3px;
    font-size: 12px;
    text-align: center;
}
.progress-bar {
    background-color: var(--e-global-color-4d69ffa);
    border-radius: 2px;
}
.average-bar {
    background-color: #01A49F;
    border-radius: 2px;
}/* End custom CSS */
/* Start custom CSS for theme-post-content, class: .elementor-element-95a3427 */.success .fa-certificate {
    color:#FAB33D;
}
.save-draft {
    margin: 10px;
}
/* Styling nextprev lesson buttons */
.nextprevbtn .right {
    float:right;
}
.nextprevbtn .right, .nextprevbtn .left {
    display:inline-block;
    max-width: 49%;
    margin: 5px;
}
.nextprevbtn {
    overflow:auto;
    margin-top: 20px;
}
.nextprevbtn a {
    font-size: 12px!important;
    padding: 7px 20px 4px!important;
    color: var(--e-global-color-4d69ffa)!important;
    background-color: #FFFFFF!important;
}
.nextprevbtn a:hover {
    color: #FFFFFF!important;
    background-color: var(--e-global-color-4d69ffa)!important;
}
/* END Styling nextprev lesson buttons */


/* Checkboxes Styling*/

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 19px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
 position: absolute;
  opacity: 0;
  left: 0;
  top:10px;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #000;
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: var(--e-global-color-d2c9d35);
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: var(--e-global-color-640ffbf);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 1px;
  width: 8px;
  height: 15px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

input[type="checkbox"]:required:invalid + .checkmark { border: 1px solid var(--e-global-color-d2c9d35); }

/* END Checkboxes Styling*/

#tasks-form{
    padding: 10px 5px 0;
    font-size: 19px;
}

.s-txt {
  padding-top:20px;
}

textarea:disabled{
	border-color:#e9e9e9;
	background-color:#f4f4f4;
}

/* WP Pro Quiz Styling*/
.wpProQuiz_box, .wpProQuiz_reviewQuestion {
    border: none;
    background-color: #01a49f;
}
.wpProQuiz_checkPage li, .wpProQuiz_reviewQuestion li {
    border: 2px solid #01a49f;
    border-radius: 50%;
    font-size: 11px;
}
.wpProQuiz_reviewQuestionTarget {
    border-color:var(--e-global-color-4d69ffa)!important;
    box-shadow:none;
}

.wpProQuiz_reviewLegend {
    font-size: 12px;
}

.wpProQuiz_button2 {
    font-size: 13px!important;
    box-shadow: 0 0 1px #ccc!important;
    border: none!important;
    background: var(--e-global-color-640ffbf)!important;
    color: #fff!important;
    border-radius: 3px!important;
    padding: 5px 10px!important;
}
.wpProQuiz_button2:hover {
    background: #02a19d!important;
}

.wpProQuiz_button {
    padding: 5px 10px!important;
    background: var(--e-global-color-4d69ffa)!important;
    border-radius: 3px!important;
    font-weight: 500!important;
    border: none!important;
    box-shadow: 0 0 1px #ccc!important;
}
.wpProQuiz_button:hover {
    background: #01a49f!important;
    padding: 5px 10px!important;
    border-radius: 3px!important;
    font-weight: 500!important;
    border: none!important;
    box-shadow: 0 0 1px #ccc!important;
}
.wpProQuiz_toplistTable th {
    background: #01a49f!important;
}
.wpProQuiz_questionList {
    background: #f4f4f4!important;
    border: 1px solid var(--e-global-color-640ffbf)!important;
}
.wpProQuiz_resultValue div{
    background-color: var(--e-global-color-640ffbf)!important;
}

.wpProQuiz_resultName {
    width: 110px!important;
    padding: 1px 3px!important;
}

.wpProQuiz_cloze input[type=text] {
    height: 22px!important;
}

/* Checked task Styling */
.task-checked {
    background: var(--e-global-color-4d69ffa);
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    border-radius: 3px;
}
.task-checked .inner {
    background: #F4F4F4;
    padding: 5px;
    margin-top: 5px;
    border-radius: 3px;
}
.task-checked .first {
    color: #FFF;
}

/* Save-load-clear btns styling */
.save-load-btns .wpProQuiz_button {
    background-color:var(--e-global-color-640ffbf)!important;
    font-size:13px;
    box-shadow: 0 0 1px #ccc!important;
}
.save-load-btns .wpProQuiz_button:hover {
    background: #01a49f!important;
}

/**/

.quiz-user-results {
    margin-top: 20px;
    font-weight: 500;
}
.quiz-user-results .average-bar {
    background-color: #fdb640;
}
#cblsl {
    margin-top: 40px;
}

.umsg {
  padding:20px;
  border:2px solid red;
  margin-top: 15px;
}

.umsg .tg {
    background-color: #0088CC;
}
.umsg .tg:hover {
    background-color: var( --e-global-color-1d9c36ce );
}

/*  Load answers */

#content-t table li span:nth-child(even) {
    display:none;
}
#content-t table {
    text-align: left;
    max-width: 900px;
}
/*  END Load answers */

@media only screen and (max-width: 767px) { 
    .save-draft {
    margin: 10px 0;
}
}/* End custom CSS */