/* max-width: 480px */
.s-mob-hide {
  display: none !important;
}

.only-small-mob {
  display: inherit;
}

.only-mob {
  display: none;
}

.s-mob-clear {
  clear: both;
}

.s-mob-nofloat {
  float: none;
}

body > header.unsigned {
  height: 200px;
}

body > header.home-page {
  height: inherit;
}

header .logo {
  width: 140px;
  margin-top: 49px;
}

header.home-page.unsigned ul {
  visibility: hidden;
  height: 0;
}

header.home-page h1, .home-page .home-welcome h1 {
  font-size: 45px;
  line-height: 55px;
}

header.home-page p, .home-page .home-welcome p {
  font-size: 24px;
  line-height: 34px;
}

header.home-page .home-header-buttons a i.fa {
  display: none;
}

header nav a {
  letter-spacing: 0;
}

header nav a.nav-link {
  margin-top: -2px;
  margin-right: 18px;
}

header nav a.nav-link i.fa {
  font-size: 23px;
  letter-spacing: 0;
}

header nav ul {
  margin-top: 95px;
  width: 100%;
  float: none;
  display: flex;
  justify-content: space-around;
}

header nav li.logout {
  position: absolute;
  top: 90px;
  right: 10px;
  height: 30px;
}

header nav li.logout a {
  font-size: 19px;
}
header nav li.logout i.fa {
  display: inline-block;
}

.view-all-divs .mail-preview {
  padding: 5% 5% 5% 10%;
}

.mail-preview.has-checkbox {
  padding-left: 2.5rem;
}

.mail-info i.fa-comment {
  margin-left: 0;
}

.mail-info i.fa-arrow-circle-left {
  margin-left: 25px;
}

.mail-preview.unread .new-msg {
  top: 0;
  right: 0;
  padding: 0 5px;
  line-height: 20px;
  font-size: 14px;
}

.mail-preview > a {
  margin-left: 15px;
}

.select-all {
  padding-left: 15px;
  padding-bottom: 5px;
}

.has-checkbox .select-mail {
  position: absolute;
  left: 15px;
}

.mail-preview.has-checkbox .mail-info {
  padding-left: 0;
}

.ceifdialog, .ceifdialogcenter iframe {
  width: 100% !important;
  left: 0 !important;
}

.ceifdialogcenter {
  width: 95% !important;
}

.courses-container .course-box {
  width: 100%;
  margin-right: 0;
  margin-bottom: 20px !important;
}

.static figure img, figure.logos-flex img {
  max-width: 95%;
}

nav.lesson {
  width: 95%;
}

section.lesson .s-mob-bottom-0, section.lesson figure.s-mob-bottom-0 {
  margin-bottom: 0;
}

section.lesson p.s-mob-top-0, section.lesson .activity.s-mob-top-0, section.lesson .s-mob-top-0 {
  margin-top: revert;
}

section.lesson .s-mob-left-0 {
  margin-left: 0;
}

ol.numered-exercises {
  padding-left: 40px;
}

ol li::before {
  left: -41px;
}

.activity.exercise input[type="text"] {
  margin: 0;
}

section.lesson ul.ul-right-to-img {
  padding-left: 0;
}

section.lesson ul.dwo-columns {
  column-count: 1;
  width: auto;
}

section.lesson .s-mob-center {
  float: none;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 29px 0 0 0;
}

section.lesson .s-mob-center img{
  max-width: 100%;
}

section.lesson .flex-cols {
  flex-wrap: wrap;
}

section.lesson .flex-cols > *:first-child {
  width: 100%;
  justify-content: flex-start;
}

.lessons .activity textarea.medium-txt-area2 { 
  margin-top: 15px;
  width: 100%;
}

.s-mob-max-img img{
  max-width: 100%;
}

.activity.radio-smiles {
  width: 100%;
}

.checkbox-container, .radio-container {
  padding: 0;
}

.activity input.short-text-input.len-1 {
  width: 80%;
}

section#sm-lesson-survey .shorter-text-input {
  width: inherit;
}

.activity.sketch .canvas-stacked-wood {
  max-width: 306px;
  height: 275px;
  background: url("../img/stacked_wood_mobile_small.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-stacked-wood.crowd {
  background: url("../img/crowd_mobile_small.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-stacked-wood.peas {
  background: url("../img/peas_mobile_small.png") no-repeat center center #dedede;
}

/* pop up */
.pop-up.narrow {
  width: 90%;
  left: 5% !important; 
}

.pop-up.narrow .buttons button.button-blue {
  font-size: 18px;
  padding-left: 0px;
  padding-right: 0px;
  max-width: 49%;
}

/* course 2 lesson 3 */
.lesson .overwrite-answ .overwrite-line {
  margin-top: 29px;
}

.activity.calculate-total input:first-child, 
.activity.calculate-total-big input.shorter-text-input {
  margin-left: 0;
}

.activity.calculate-total-big p.exercise > *, 
.activity.calculate-total-big p.tbl-caption > * {
  margin: 0;
}

.activity.calculate-total-big p.exercise label {
  padding-right: 5px;
}

.lesson .calculate-total .shorter-text-input {
  width: 50%;
}

.activity.calculate-total .result-line {
  justify-content: end;
}

.activity.calculate-total label {
  white-space: nowrap;
}

.activity.calculate-total p > * {
  margin: 0;
}

.width-360, div.activity.width-360, .width-400, .width-425 {
  width: 100%;
}

.figure-w-400 {
  margin-left: 0;
  width: 100%;
}

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

.activity.multiple-in-column p {
  display: flex;
  align-items: center;
  line-height: initial;
  justify-content: space-between;
}

.lesson .activity.multiple-in-column p > * {
  float: none;
  line-height: initial;
}

.activity.multiple-in-column label {
  white-space: nowrap;
}

.activity.sortable {
  margin: 0 auto;
  width: 96%;
}

.s-mob-flex-in-column {
  flex-direction: column;
}

/*---------course 2 lesson 4---------------*/
.activity.button-like-radio {
  width: 100%;
  min-width: 100%;
}

.str-with-buttons {
  height: unset;
}

.str-with-buttons > span {
  width: 90%;
  max-width: unset;
  line-height: inherit;
}

.str-with-buttons label {
  float: none;
}

#sm-lesson-41-2 .button-like-radio .lock-img {
  max-width: 27px;
  margin-right: 2%;
}

#sm-lesson-41-2 .button-like-radio label,
#sm-lesson-41-3 .button-like-radio label {
  margin-left: 2%;
}

/*------------course 4 lesson 4 -----------------*/
.activity.multiple-in-column.course-les-44 p {
  display: block;
}

.lesson .activity.multiple-in-column.course-les-44 .col-1 {
  float: left;
}

.lesson .activity.multiple-in-column.course-les-44 .col-2 {
  float: right;
  padding-left: 0;
  padding-right: 0;
}

/*----------course 5 lesson 5 -------------------*/
.lesson .steps figure {
  float: none;
  margin-top: 29px;
  margin-bottom: 0;
  text-align: center; 
}

.steps h3 {
  margin-top: 0;
}

/*---------------course 5 lesson 8 ----------------------*/
.big-cols > div {
  float: none;
}

.big-cols .col-20 , .big-cols .col-80 {
  width: 100%;
}

/*---------------course 13 lesson 5 ----------------------*/

.activity.multiple-in-column.course-les-44 p.container-flex-vcenter {
  display: flex;
}

/*--------course 29 --------------*/
.course-les-29-3 .str-with-buttons {
  white-space: normal;
}

.course-les-29-3 .str-with-buttons > span {
  max-width: none;
}

/*--------------course 34 ----------------------*/
.multiple-in-column.course-les-34-4 .col-2 {
  padding-left: 10px;
}

/*--------------- course 38 ------------------*/
.devices-38-2 {
  column-gap: 10px;
}

/*-------------course 43---------------------*/
#sm-lesson-43-3 .big-cols .col-20,
#sm-lesson-43-3 .big-cols .col-80 {
  width: 100%;
}

/*--------------- pattern styles ----------------------*/
/*----------------- course 48 ---------------------------*/
@media screen and (max-width: 375px) {
  #canvas-colours-pattern {
    width: 300px;
    height: 700px;
  }
}

#canvas-tiles-pattern {
  width: 306px;
  height: 480px;
}

.dots-pattern-imgs {
  justify-content: flex-start;
  flex-wrap: wrap;
  width: min-content;
  row-gap: 30px;
}

.dots-pattern-imgs > picture:last-child {
  margin-top: -45px;
}

/*-------- course 58 lesson 3 --------------------*/
.multiple-in-column.course-les-583 {
  width: 290px;
}

@media screen and (max-width: 350px) {
  .multiple-in-column.course-les-583 .total-line.input {
    max-width: 315px;
    flex-wrap: wrap;
    row-gap: 15px;
  }
}

/*--------- course 60 lesson 9 --------------*/
.canvas-drag-balloon {
  height: 570px;
}

/*------------ course 61 ---------------------*/
.activity canvas.canvas-probability-grid {
  width: 303px;
  height: 670px;
}

#canvas-flip-coin.canvas-probability-grid {
  height: 645px;
}

#canvas-flip-coins.canvas-probability-grid {
  height: 690px;
}

.table-scroll {
  overflow-x: auto;
}

/* ----------------- Drag and Drpp matching activity ---------------*/
.activity.drag-and-drop-match .match-column {
    row-gap: 10px;
}

.term-slot {
    height: 120px;
}

.draggable-item, .definition-item, .droppable-target,
.drag-and-drop-match-parent .draggable-item,
.drag-and-drop-match-parent .activity.drag-and-drop-match .definition-item,
.drag-and-drop-match-parent .droppable-target {
    height: 120px;
    line-height: 1.02em;
    padding: 7px;
}

.fillable-table-dialog {
  padding: 58px 20px 30px;
}

.fillable-table-form-row {
  grid-template-columns: 1fr;
}

.fillable-table-close {
  top: 14px;
  right: 14px;
}

/* ------------------ Cookie consent banner ------------------- */
.cookie-consent-mask {
  padding: 16px;
}
.cookie-consent-dialog {
  padding: 22px 20px;
}

.cookie-consent-btn {
  width: 100%;
}

/* ------------------ Cookie consent banner ------------------- */
.cookie-consent-mask {
  padding: 16px;
}
.cookie-consent-dialog {
  padding: 22px 20px;
}

.cookie-consent-btn {
  width: 100%;
}

@media (max-width: 400px) {
    .activity.drag-and-drop-match .definition-item .smth {
        display: none;
    }

    .drag-and-drop-match-parent .activity.drag-and-drop-match .draggable-item {
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        overflow-wrap: break-word;
    }
}

@media screen and (max-width: 350px) {
  ol .canvas-probability-grid {
    margin-left: -31px;
  }

  ol .random-img {
    margin-left: -31px;
  }

  header nav a.nav-link {
    margin-right: 8px;
  }

  .drag-and-drop-match-parent .activity.drag-and-drop-match .definition-item {
    line-height: 1em;
    padding: 0px;
  }
}