/* Личная заметка о группе в карточке группы.
   Оформлена так же, как заметки об учениках в сводке: кнопка с точкой,
   когда заметка есть, и редактор, раскрывающийся прямо в карточке. */
.gnote-btn{display:inline-flex;align-items:center;gap:7px}
.gnote-btn[aria-expanded="true"]{border-color:#3f5a48;background:#eef3ec;color:#23382c}
.gnote-dot{width:5px;height:5px;border-radius:50%;background:#b09a62;flex:none}

.gnote-box{margin:14px 0 0;padding:16px 17px;background:#fbfdfa;
  border:1px solid #d7dfd1;border-radius:16px;box-shadow:0 8px 28px -22px #38523c}
.gnote-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:12px}
.gnote-head h4{margin:0;font:600 14px/1.45 var(--sans);color:#28442f}
.gnote-head p{margin:3px 0 0;font:500 11.5px/1.55 var(--sans);color:#8a8576}
.gnote-x{flex:none;border:0;background:none;cursor:pointer;width:28px;height:28px;
  font-size:20px;line-height:1;color:#8a8576;border-radius:8px}
.gnote-x:hover{background:#eef1e9;color:#23211c}

.gnote-box textarea{display:block;width:100%;box-sizing:border-box;min-height:96px;resize:vertical;
  padding:11px 13px;border:1px solid #d3ddcd;border-radius:12px;background:#fff;
  color:#23211c;font:500 13.5px/1.65 var(--sans)}
.gnote-box textarea:focus{outline:none;border-color:#7fa07f;box-shadow:0 0 0 3px rgba(47,107,70,.14)}

.gnote-acts{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:11px}
.gnote-status{flex:1;min-width:0;font:500 11.5px/1.5 var(--sans);color:#627154}
.gnote-acts .btn-add.is-off{opacity:.45}

@media(max-width:600px){
  .gnote-box{padding:14px}
  .gnote-status{flex-basis:100%}
  .gnote-acts button{flex:1}
}