html, body {
    height: 100%; /* Растягиваем базовые контейнеры на всю высоту */
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* Элементы внутри body идут друг за другом сверху вниз */
    font-size: 18px;
    background-color: #CBC6AE;
}

p {
    text-indent: 1.2em; 
}

/* Основной контейнер-обертка, если он используется в HTML (например, body > div) */
body > .page {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Шапка занимает столько места, сколько ей нужно */
header {
    flex: 0 0 auto;
}

/* Контейнер .row занимает все оставшееся пространство до низа экрана */
.row {
    display: flex;
    flex: 1 1 auto; 
    overflow: hidden; /* Предотвращает появление общей полосы прокрутки у всего окна */
}

/* Боковое меню */
.row aside {
    flex: 0 0 220px; /* Фиксированная ширина меню */
    min-width: 190px;
    background-color: #fff8f8bb;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;    
    padding: 0px 8px 8px 0px;
    overflow-y: auto; /* Прокрутка появится только внутри aside, если контента много */
}

/* Главный контент */
.row main {
    flex: 1 1 auto; /* Занимает все оставшееся место по ширине */
    overflow-x: hidden;
    overflow-y: auto; /* Прокрутка появится только внутри main, если контента много */
    box-sizing: border-box;
}

@media screen and (max-width: 1099px) {
    .row aside {
        padding: 1px;
    }

}
@media screen and (min-width: 1100px) and (max-width: 1199px) {
    .row aside {
        padding: 0.7em;
        min-width: 330px;
        width: 330px;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1299px) {
    .row aside {
        padding: 0.7em;
        min-width: 370px;
        width: 370px;
    }
}

@media screen and (min-width: 1300px) and (max-width: 1399px) {
    .row aside {
        padding: 0.7em;
        min-width: 410px;
        width: 410px;
    }
}

@media screen and (min-width: 1400px) {
    .row aside {
        padding: 0.7em;
        min-width: 450px;
        width: 450px;
    }
}

.row aside ol, .row aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
}

p {
    margin: 2px 0 2px 0;
    padding:2px;
    max-width:900px;
}

ul {
    max-width:900px;
}

aside li {
    padding: 3px 0 0 0;
    max-width:870px;
}

aside li>a {
    width:90%;
    margin:0 2px;
}

h1,h2 {
    text-align: center;
}

div.page {
    height: 96%;
    /* width: 99.8%; */
    /* max-width: 1480px; */
    position: relative;
    border-spacing: 1px;
    border-collapse: separate;
    border: solid 2px #795d21c9;
    background-color: #ffffffa0;
}

header {
    margin-top:4px;    
    background: linear-gradient(0.02turn, #ffffffff, #ffffffd0, #ffffff60);
    min-height:45px;
    height:70px;
}

header>div {
    width:100%;
    height:100%;
    text-align: center;
    background-image: url(/images/background.jpg);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left;
    display: flex;
    justify-content: center;
    align-items: center;
}

header h1, header a, header img {
    display:inline-block;
    text-wrap: auto;
    text-wrap-mode: wrap;
    text-wrap-style: balance;    
}

@media screen and (max-width: 1040px) {
    header img {
        display:none;
    }
}

a.printer {
    cursor: copy,context-menu,pointer;
}

aside, main {
    border: solid 1px #75611edb;
    margin:2px;
}

main {
    
    background: linear-gradient(0.25turn, #ffffffa8, #ffffff40);
    width:100%;
}

@media screen and (max-width: 1199px) {
    main {
        padding-left: 7px;
        padding-right: 4px;
    }
}

@media screen and (min-width: 1200px) {
    main {
        padding-left: 12px;
        padding-right: 10px;
    }
}

aside ol,  aside ul {
    padding-inline-start: 0px;
}
aside p {
    margin-top: 10px;
    text-align: center;
}
aside li {
    display: block;
    border-bottom: 1px solid #ddd;    
}
aside li a {
    text-decoration: none;
    display: block;
    color: #000;
    padding: 3px 3px;
}
@media screen and (min-width: 1100px) {
    aside li a {
        padding: 5px 16px 2px 10px;
    }
}
@media screen and (min-width: 1450px) {
    main scrollable {
        padding: 0 12px 10px 12px;
    }
}

aside li a:hover {
    background : #5092DB url(/images/linkarrow.gif) no-repeat right center;/* #4688D1 #3574BA*/
    color: #fff;
    text-decoration: none;
}

li.selected {
    background-color:#FFE5CC; 
}

.scrollable {
  height: 96%;
  overflow: auto;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  flex: 1;
}

.flexRow {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-align: center;
}

a.printer {
    cursor: copy,context-menu,pointer;
}
.content {
  font-family:Tahoma, Verdana, Arial, system-ui; 
  max-width: 1150px;
}
.restoreLink:hover {
    background-color:blue;
}
li.selected {
    background-color:#FFE5CC; 
}
.questions div {
    height: 130px;
}

.header {
    text-align:center;
    max-height:42px;
}

.header table {
    width:100%;  
}


/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted brown; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #87d;
  color: #fff;
  text-align: center;
  padding: 4px;
  border-radius: 6px;
  font-size:1.2em;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 125%;
  left: 25%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 1.8s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #555 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 0.96;
}

.theoryContent {
  height: 97%;
  overflow:auto;
  padding:8px
}

.flexRow {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-align: center;
}

/*                 Master wallpaper     */

#balloon {
    width: 200px;
    height: 25px;
    background-color: #ffcc00;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 4px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: move;
  }
  #menu {
    display: none;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 10px;
    position: absolute;
  }
  .image-option {
    display: flex;
    align-items: center;
    margin: 5px 0;
  }

  .ui-widget-overlay{opacity:unset; background:unset; transition: backdrop-filter 3s;}
  

  .biglinks a {
      display: block; width: 100%; height: 100%;
  }

  .biglinks a:hover {
      filter: sepia(1);      
      border: solid 1px orange;
  }

  .example {
      background:#ccddff; 
      border:1px solid #cccccc; 
      padding:5px 10px;
      margin:12px 0;
      width:900px;
  }

 .img_background {
      background:#adb9ca; 
      border:1px solid #5b9bd5; 
      padding:5px 5px;
      margin:12px 0;
      width:900px;
      text-align:center;
  }

  .code {
      white-space: pre;
      font-family: monospace;
  }
  .lastModified  
  {
    float: right;
    padding: 4px;
    color: chocolate;
  }  
  .lastModified .value
  {
    color: #ba4;
  }

section {
  background-color:#d6dce5
}


/* learn words */


html, body {overflow:auto;}
body {background-color:rgb(239, 239, 210);}
h1 { margin: 12px 0;}
aside h2 {font-size:112%; margin:5px}
header {height:unset}
header>div {display:flex;flex-direction:column;}
.subtitleRight {align-self:flex-end;margin-right:16px;font-size:0.9em;z-index:1;margin-bottom:2px;}
.header>table span {margin:4px;}
h2 {margin-bottom:1px;}
.leftMenu {width:250px;background:#f3f3f3;}
.listItem {padding:10px;cursor:pointer;}
.listItem.active {background:#cdcbcb99;}
.modeSwitch {display:flex;margin-bottom:30px}
.modeBtn {flex:1;padding:15px;text-align:center;cursor:pointer;background:#dddddd99;}
.modeBtn.active {background:#cdcbcb99;}
.card {border:1px solid #ccc;padding:20px;margin:10px;}
.learnWordsContainer { display:flex;align-items:center;justify-content:center;max-width:900px;margin:auto;}
.arrow { width:128px; text-align:center; cursor:pointer;}
.wordCardArea {flex:1;text-align:center;position:relative;}
.wordCard,.wordTest {display:none;}
.wordCard.active, .wordTest.active {display:block;}
.optionsGrid {display:grid;grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap:10px; justify-items:center;}
.option { padding:10px; margin:5px; background:#fff; cursor:pointer; border-radius:20px; border: 2px dashed gray; width:250px; font-size:130%;} 
.option.correct { background:#a8e6a1;}
.option.incorrect { background:#f5a1a1;}
.option.disabled { background:none; cursor:default; border:none}
.wordPic { height:240px;}
.wordRow { padding:10px; border-bottom:1px solid #ddd; cursor:pointer;}
.wordRow:hover { background:#f5f5f5;}
.wordDetails { margin-top:15px;}
.audioButtons button { margin:5px; padding:10px; cursor:pointer; } 
.wordRow > b { min-width:180px; display: inline-block; } 
.transcription { color:gray; } 
.examples { color:blue; } 
.learnWordsContainer { display: flex; align-items: center; } 
.arrowsRow { display: contents;} .leftArrow { order: 1; } 
.wordCardArea { flex: 1; } 
.rightArrow { order: 3; } 
.wordEng {font-size: 170%;}

@media (max-width: 900px) { 
  .learnWordsContainer { flex-direction: column; }
  .arrowsRow { display: flex; justify-content: space-between; width: 100%; margin-top: 10px; } 
  .arrow { width: 48%; text-align: center; } 
} 
@media (min-width: 901px) { 
  .wordCardArea { order: 3; } 
}
.selectLabel, .typeLabel {margin-bottom:20px; color:gray; display:block}
.learnAgain {cursor:pointer;text-decoration:underline dashed blue;}

#answer, #checkBtn {font-size:135%}
h2.question {font-size:200%}

.cardsSettingsBtn{margin-left:10px;cursor:pointer;user-select:none;font-size:18px;opacity:0.8;}
.cardsSettingsBtn:hover{opacity:1;}
.settingsGroup{padding:10px 0;}
.settingsOption{display:block;margin-bottom:10px;cursor:pointer;}

.learnProgressWrap{width:100%;height:14px;background:#ddd;border-radius:999px;overflow:hidden;margin-bottom:16px;position:relative;}
.learnProgressBar{height:100%;width:0%;transition:width .25s ease;background:linear-gradient(90deg,#79d96b,#4caf50)}
.learnSettingsBtn{margin-left:8px;cursor:pointer;opacity:.8;}
.learnSettingsBtn:hover{opacity:1;}

.ui-accordion .ui-accordion-header {padding:0; border:0; font-size:96%; font-weight: 600;}

.ui-accordion .ui-accordion-content { padding: 0; max-height: 450px;}
.listItem { padding: 3px; font-size:95%}


.bookAccordion,
.editionAccordion {
    margin-left: 12px;
}

.bookAccordion h4,
.editionAccordion h4 {
    background: none !important;
    border: none !important;
    box-shadow: none !important;

    color: #4d6aa5 !important;
    font-size: 15px;
    font-style: italic;
    font-weight: normal;

    padding: 6px 8px;
    margin: 0;

    cursor: pointer;
}

.bookAccordion .ui-accordion-content,
.editionAccordion .ui-accordion-content {
    border: none !important;
    background: transparent !important;
    padding: 4px 0 4px 12px;
}

.bookAccordion h4,
.editionAccordion h4 {
    font-family: Georgia, serif;
    color: #7a5a2b;
}


/* english tutor */


body, div.scrollable {padding:0}
div.row {font-size: clamp(16px, 0.7vw + 1vh, 24px); padding:0}
.header {max-height:none}
main {padding-top:clamp(5px, 0.2vw + 0.6vh, 40px);}
button {font-size:20px}


/* english manage-list */



html, body {
  background-color:#EDEEF0;
  overflow:auto;
}
#sortMode,
#selectedFilter,
#wordPrefixFilter {
    margin-top:5px;
    width:114px;
}
#selectedWordsLink{
    display:inline-block;
    border-bottom:1px dashed #666;
    text-decoration:none;
    cursor:pointer;
    color:inherit;
    line-height:1.35;
}
#selectedWordsLink:hover{
    opacity:0.8;
}
button:disabled{
	color:lightgray;
}
#wordCounter {
    margin:2px 0 0 2px;
    font-weight:bold;
}
.cpanel {
    border:dashed 1px brown;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    padding:0 10px;
    margin:4px 0 0 4px;
    background-color:#FFFFFFA0;
    position:sticky;
    top:0;
    gap:4px 7px;
}
.cpanel > div {
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.cpanel > div:has(.chosen-container) {
    justify-content:flex-start;
}
.cpanel > * {
    width:fit-content;
}
.cpanel .actions {
    display:flex;
    flex-direction:row;
    gap:4px;
    align-self:center;
}
.cpanel button {
    padding:6px 12px;
    cursor:pointer;
}
.wordBox:has(input[type="checkbox"]:checked)  {
  border:1px dashed brown;
  background-color:#FFE099;
}
#levels {
    margin-top:10px;
}

#levels label {
    margin-right:10px;
}

#words {
    margin-top:20px;
}

.wordBox {
    display:inline-block;
    width:400px;
    margin:10px;
    border:1px solid #ccc;
    padding:5px;
    vertical-align:top;
    cursor:pointer;
    font-size:20px;
}

.wordBox:hover {
    background:#f5f5f5;
}

.wordBox input {
    margin-right:5px;
}

.wordText {
    font-weight:bold;
}

.wordPart {
    color:#999;
    margin-left:4px;
    font-size:16px;
    white-space:nowrap;
}

.part-noun {color:#000;}
.part-verb {color:#1976d2;}
.part-adj  {color:#2e7d32;}
.part-adv  {color:#6a1b9a;}
.part-collocation {color:#00897b;}
.part-phrase      {color:#795548;}
.part-phrasal     {color:#5d4037;}
.part-idiom       {color:#c62828;}
.part-noun {color:black;}

.select2-container, .chosen-container {
    margin-top:5px;
    margin-bottom:10px;
}
.select2-container .select2-selection--multiple {
    height:22px;
    min-height:22px;
}
.select2-container .select2-search--inline .select2-search__field {
    font-size:unset;
    margin-top:0;
    margin-left:0;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    font-size:small;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top:0;
    top:-2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    left:-14px;
    top:-5px;
}

.modalOverlay {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.4);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
}
.modalOverlay.active {
    display:flex;
}

.modal {
    background:#ffffffc0;
    padding:20px;
    width:400px;
    max-width:600px;
    border-radius:6px;
    position:relative;
}

.modal h3 {cursor:move;user-select:none;margin-block-start:0;}

.modalFooter {
    margin-top:20px;
    display:flex;
    justify-content:space-between;
}

.modalFooter .right {
    margin-left:auto;
}