/*
 *
 * Common rules
 *
 */

body {
  direction: ltr;
  padding: 0;
  margin: 0;
}
html[dir="rtl"] body {
  direction: rtl;
}

/* gr-gr, gr-wc, and their help */
.main-content {
  margin-right: 20px;
  margin-left: 20px;
}
/* gr-wc main-content must be ltr in wc, otherwise no need to change direction here */
body.gr-wc .main-content.ltr {
  direction: ltr;
}

/* Somehow without this, the font reduces in input, select by a factor of about 2 4/11/2022 */
input, select {
  font-size: inherit;
}

/* miscellenous */

.ltr, .gr-gr .ltr, .gr-wc .ltr, .gr-gr th.header.ltr {
  text-align: left;
  direction: ltr;
}
.rtl, .gr-gr .rtl, .gr-wc .rtl, .gr-gr th.header.rtl {
  text-align: right;
  direction: rtl;
}
.doc-direction {
  text-align: left;
  direction: ltr;
}
html[dir="rtl"] .doc-direction {
  text-align: right;
  direction: rtl;
}
/* direction without text-align: */
.dir-ltr {
  direction: ltr;
}
.dir-rtl {
  direction: rtl;
}
/* text-align without direction: */
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.align-center {
  text-align: center;
}
.align-end {
  text-align: right;
}
html[dir="rtl"] .align-end {
  text-align: left;
}

.bold {
  font-weight: bold;
}

a {
  border: 1px transparent solid;
  transition: 0.3s;
}

a:active, a:focus, a:hover {
  color: blue;
  background-color: yellow;
  transition: 0.3s;
}

a:focus {
  border: 1px yellow solid;
}

/* Larger checkboxes and radio buttons */
/* Find out how to apply it only for touch screens */
/*
input[type="checkbox"], input[type="radio"] {
  transform: scale(1.67);
  margin: 8px 8px 3px 4px;
  cursor: pointer;
  appearance: none;
}
*/

/* common - colors */

/* !important affects logins log presetation in students_admin */
.red-text {
  color: red !important;
}

.yellow-text {
  color: yellow !important;
}

.white-text {
  color: white;
}

.orange-text {
  color: orange;
}

.black-text {
  color: black !important;
}
/* Override ".gr-stud td" */
.gr-stud td.black-text {
  color: black;
}

.blue-text {
  color: blue !important;
}

.light-green-text {
  /* note that "green" is #008000 */
  color: #00ff00;
}

/* !important affects logins log presetation in students_admin */
.green-text {
  /* note that "green" is #008000 */
  color: green !important;
}

.gray-text {
  color: gray;
}

.color-999999-text {
  color: #999999;
}

.color-999900-text {
  color: #999900;
}

.color-ffcc55-text {
  color: #ffcc55;
}

.color-ffbb00-text {
  color: #ffbb00;
}

/* Various rules for td, mainly for wc and the course generated pages */

td.align-end {
  text-align: right;
}
html[dir="rtl"] td.align-end {
  text-align: left;
}

tr.height1p {
  height: 1%;
}
tr.height5 {
    height: 5px;
}
/*
tr.height7 {
    height: 7px;
}
*/
tr.height10 {
    height: 10px;
}

td.height1 {
  height: 1px;
}
td.height1p {
  height: 1%;
}
td.width1p {
  width: 20px;
}
td.width100p {
  width: 100%;
}
/*
td.width32 {
  width: 32px;
}
td.width5 {
  width: 5px;
}
td.width7 {
  width: 7px;
  / * For some usages, width: is not enough, need min-width: * /
  min-width: 7px;
}
*/
td.width10 {
  width: 10px;
  /* For some usages, width: is not enough, need min-width: */
  min-width: 10px;
}
td.width20 {
  width: 20px;
}

/* Multi-lingual handling                                                   */
/* Use empty span, and add arrtibutes per each language.                    */
/* It will show the one related to the language defined in the html tag.    */
/* Alternatively, in non-empty span, it adds these texts before the content */
span[data-lang-en]::before, html[lang="en"] span[data-lang-en]::before {
  content: attr(data-lang-en);
  direction: ltr;
  text-align: left;
}
html[lang="he"] span[data-lang-he]::before {
  content: attr(data-lang-he);
  direction: rtl;
  text-align: right;
}
html[lang="ru"] span[data-lang-ru]::before {
  content: attr(data-lang-ru);
  direction: ltr;
  text-align: left;
}
html[lang="ar"] span[data-lang-ar]::before {
  content: attr(data-lang-ar);
  direction: rtl;
  text-align: right;
}
span[data-lang-en], html[lang="en"] span[data-lang-en] {
  direction: ltr;
  text-align: left;
}
html[lang="he"] span[data-lang-he] {
  direction: rtl;
  text-align: right;
}
html[lang="ru"] span[data-lang-ru] {
  direction: ltr;
  text-align: left;
}
html[lang="ar"] span[data-lang-ar] {
  direction: rtl;
  text-align: right;
}

.lang-he {
  display: none;
  visibility: hidden;
  direction: rtl;
  text-align: right;
}
.lang-en {
  display: none;
  visibility: hidden;
  direction: ltr;
  text-align: left;
}
.lang-ru {
  display: none;
  visibility: hidden;
  direction: ltr;
  text-align: left;
}
.lang-ar {
  display: none;
  visibility: hidden;
  direction: rtl;
  text-align: right;
}

html[lang="he"] .lang-he {
  display: inline;
  visibility: visible;
}
html[lang="en"] .lang-en {
  display: inline;
  visibility: visible;
}
html[lang="ar"] .lang-ar {
  display: inline;
  visibility: visible;
}
html[lang="ru"] .lang-ru {
  display: inline;
  visibility: visible;
}

/*
 *
 * css rules for the generated course pages (and others)
 *
 * wc class - 
 *    used in the generated course pages, as well as jump_sem iframe pages,
 *    main webcourse page, accessibility page, help pages, and in the student
 *    interface under courses
 *
 */

html {
  margin: 0;
}

body.wc {
  /* The next three lines break long words in Chrome, e.g., long URLs, yet works also in FF, not in IE */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

body.wc {
  direction: ltr;
  color: black; 
  background-color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-y:    auto;
  padding: 0;
  margin: 0;
}
html[data-style="accessible"] body.wc {
  font-size: 18px;
}
html[dir="rtl"] body.wc {
  direction: rtl;
}

div.external {
  display: flex;
  flex-direction: row;
  background-color: black;
}
div.height-100vh {
  flex-basis: 0;
  flex-grow: 0;
  height: 100vh;
}

div.all-parts {
  display: flex;
  flex-direction: column;
  margin-left:   15px;
  margin-right:  15px;
  margin-bottom: 5px;
  flex-grow: 1;
}
div.top-part {
}
div.menu-and-content {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  position: relative;
  background-color: #CCCCCC;
}
html[data-style="accessible"] div.menu-and-content {
  background-color: white;
}
div.menu-part {
  display: flex;
  flex-direction: column;
  flex-basis: 147px;
  background: linear-gradient(to left, #CCCCCC, #3366cc 10%);
  background-position: left;
  width: 127px;
  max-width: 127px;
  text-align: center;
  vertical-align: top;
  padding-top: 6px;
}
html[data-style="accessible"] div.menu-part {
  background: linear-gradient(to left, white, #3366cc 10%);
}
html[dir="rtl"] div.menu-part {
  background: linear-gradient(to right, #CCCCCC, #3366cc 10%);
  background-position: right;
}
html[data-style="accessible"][dir="rtl"] div.menu-part {
  background: linear-gradient(to right, white, #3366cc 10%);
}

div.menu-part nav > a {
  display: inline-block;
  padding-bottom: 5px;
}
div.menu-part-bottom {
  display: block;
  text-align: left; 
  margin-top: 15px;
}
html[dir="rtl"] div.menu-part-bottom {
  text-align: right;
}
.menu-part-flex {
  flex-grow: 1;
}

div.content-part {
  display: block;
  padding: 0 20px 0 20px;
  width: 100%;
  flex-grow: 1;
}
div.bottom-part {
}

div.text-content {
  padding: 10px 0px 16px 0px;
  color: black;
}


table.wcenv a:link {
  color: blue;
}
html[data-style="accessible"] table.wcenv a:link {
  color: blue;
}
table.wcenv a:visited {
  color: blue;
}
html[data-style="accessible"] table.wcenv a:visited {
  color: blue;
}

a.main-page-link, div.main-page-link {
  font-size: 10px;
  color: white;
  text-align: left;
}
html[data-style="accessible"] a.main-page-link, html[data-style="accessible"] div.main-page-link {
  font-size: 12px;
}
html[dir="rtl"] a.main-page-link, html[dir="rtl"] div.main-page-link {
  text-align: right;
}
/* Repeating class to increate priority */
a.main-page-link.main-page-link.main-page-link:active, a.main-page-link.main-page-link.main-page-link:focus, a.main-page-link.main-page-link.main-page-link:hover {
  color: black;
  background-color: yellow;
}


.wc h1 {
  color: #003399;
  font-size: 18px;
  font-weight: bold;
  margin: 0px;
}
html[data-style="accessible"] .wc h1 {
  font-size: 20px;
}
.wc .barback h1 {
  color: white;
}



.wc h2 {
  color: #003399;
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
}
html[data-style="accessible"] .wc h2 {
  font-size: 18px;
}

div.menuentry {
  width: 127px;
  height: 22px;
  background: #0033CC url("/Images/StudImages/Buttons/fg7.png");
  border-radius: 11px;
  color: white;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center; 
  vertical-align: middle; 
  white-space: nowrap;
  border: 1px solid transparent;
  border-spacing: 0px;
  text-shadow: 1px 1px 1px black;
}
html[data-style="accessible"] div.menuentry {
  font-size: 16px;
}

a.menuentry {
  text-decoration: none;
}

a.menuentry:active, a.menuentry:focus, a.menuentry:hover {
    background-color: transparent;
    border: 0px;
}

a:active > div.menuentry, a:focus > div.menuentry, a:hover > div.menuentry {
  background: #3366D3 url("/Images/StudImages/Buttons/fg7.png");
  border: yellow solid 1px;
  text-decoration: none;
}

span.menuentry {
  position: relative;
  top: 5px;
  width: 127px;
  height: 22px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center; 
  white-space: nowrap;
  text-shadow: 1px 1px 1px black;
}
html[data-style="accessible"] span.menuentry {
  font-size: 16px;
}

a.menuentry:hover span.menuentry {
	color: yellow;
}

a.menuentry, a.menuentry:link {
  vertical-align: middle; 
  text-decoration: none;
}

a.lang {
  border: 0 none;
  outline: none;
  font-weight: bold;
  text-decoration: none;
}

span.lang {
  position: relative;
  top: -2px;
  left: 0px;
  background-color: white;
  border: 1px solid black;
  border-radius: 9px;
  padding: 2px 7px 2px 7px;
  height: 12px;
  text-align: center;
  color: black;
  display: inline-block;
  margin-left: 1px;
  margin-right: 1px;
  line-height: normal;
  font-style: italic;
  font-weight: bold;
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
}
html[data-style="accessible"] span.lang {
  font-size: 13px;
}

a:active span.lang, a:focus span.lang, a:hover span.lang {
  background-color: yellow;
  color: black;
}

a.lang:active, a.lang:focus, a.lang:hover {
    background-color: transparent;
}

input.wc {
  font-size: 16px;
  height: 18px;
  width: 100px;
}
html[data-style="accessible"] input.wc {
  font-size: 18px;
}

.small-quoted-url {
  font-size: 12px;
  color: black;
}
html[data-style="accessible"] .small-quoted-url {
  font-size: 14px;
}

.titlebarname {
  font-size: 20px;
  font-weight: bold;
  color: white;
}
html[data-style="accessible"] .titlebarname {
  font-size: 22px;
}
.semname {
  font-size: 16px;
  font-weight: bold;
  color: white;
}
html[data-style="accessible"] .semname {
  font-size: 18px;
}
.titlebarinstname {
  font-size: 12px;
  color: white;
}
html[data-style="accessible"] .titlebarinstname {
  font-size: 14px;
}
.titlebartext {
  font-size: 16px;
  color: white;
}
html[data-style="accessible"] .titlebartext {
  font-size: 18px;
}
.wctext {
  color: black;
}

.wcenv {
  color: black;
}

table.wcenv p, table.wcenv td, table.wcenv tr {
  color: black;
}

/* Notice that .wclink-email is generated on <span>, and a javascript 
 * adds <a> with the same class
 */
.wclink, .wclink-email, .gr-gr a.wclink-email:not(:hover):not(:active):not(:focus):not(.gr-submit-button), a.wclink-email:active, a.wclink-email:focus, a.wclink-email:hover, .wclink:not(:hover):not(:active):not(:focus):not(.gr-submit-button), .gr-gr a.wclink:not(:hover):not(:active):not(:focus):not(.gr-submit-button) {
  color: blue;
  transition: 0.3s;
}
html[data-style="accessible"] .wclink, html[data-style="accessible"] .wclink-email, html[data-style="accessible"] a.wclink-email:active, html[data-style="accessible"] a.wclink-email:focus, html[data-style="accessible"] a.wclink-email:hover {
  color: blue;
}
.wclink-email {
    direction: ltr;
}
a.wclink:hover {
  scale: 1.1;
  transition: 0.3s;
}
.wctimestr {
  color: black;
  font-size: 12px;
}
html[data-style="accessible"] .wctimestr {
  font-size: 14px;
}

div.tickets {
}
div.ticket {
  vertical-align: top;
  margin: 0px 10px;
  padding: 5px 10px;
}
div.ticket:nth-child(odd), tr.ticket:nth-child(odd) {
  background-color: #CCCCCC;
  background: #CCCCCC;
}
html[data-style="accessible"] div.ticket:nth-child(odd), html[data-style="accessible"] tr.ticket:nth-child(odd) {
  background-color: white;
  background: white;
  border: 2px black solid;
  margin: 3px 0px;
}
div.ticket:nth-child(even), tr.ticket:nth-child(even) {
  background-color: #F0F0F0;
  background: #F0F0F0;
}
html[data-style="accessible"] div.ticket:nth-child(even), html[data-style="accessible"] tr.ticket:nth-child(even) {
  background-color: white;
  background: white;
  border: 2px black solid;
  margin: 3px 0px;
}

div.display-ticket {
  display: flex;
  flex-direction: row;
  width: 100%;
}

div.display-ticket-image {
    flex-grow: 0;
    width: 32px;
}

div.display-ticket-ticket {
  width: inherit;
  flex-grow: 1;
  margin-left: 10px;
  margin-right: 0px;
}
html[dir="rtl"] div.display-ticket-ticket {
  margin-right: 10px;
  margin-left: 0px;
}

div.line {
  background: #003399 none repeat scroll 0 0;
  height: 1px;
  margin-bottom: 1px;
}

td.ticketline {
  background-color: black;
  background: black;
}

td.invshadowback {
  background-color: #3366CC;
  background: #3366CC;
  height: 5px;
  padding: 0px;
}
td.shadowback {
  background-color: #3366CC;
  background: #3366CC;
  height: 5px;
  padding: 0px;
}

td.menubackup {
  background-color: #3366CC;
  background: #3366CC;
  height: 5px;
  width: 147px;
}
td.menubackdown {
  background-color: #3366CC;
  background: #3366CC;
  height: 5px;
  width: 147px;
}

td.square_bullet {
  height: 8px;
  width: 8px;
  background-color: #003399;
  background: #003399;
}

td.barback {
  background-color: #003399;
  background: #003399;
  height: 22px;
  padding: 0px;
}
td.bottombarback {
  background-color: #003399;
  background: #003399;
  height: 8px;
}
td.verybottom {
  height: 10px;
}
td.coursenameback {
  background-color: #3366CC;
  background: #3366CC;
  padding: 0px;
  height: 36px;
}
td.coursenameback1 {
  border-radius: 36px 0 0 0;
  width: 20%;
  min-width: 36px;
}
html[dir="rtl"] td.coursenameback1 {
  border-radius: 0 36px 0 0;
}
td.coursenameback3 {
  border-radius: 0 36px 0 0;
  min-width: 36px;
  width: 36px;
}
html[dir="rtl"] td.coursenameback3 {
  border-radius: 36px 0 0 0;
}
td.bottomnameback {
  background-color: #3366CC;
  background: #3366CC;
  padding: 0px;
  height: 12px;
}
td.bodyback {
  background-color: #CCCCCC;
  background: #CCCCCC;
}
html[data-style="accessible"] td.bodyback {
  background-color: white;
  background: white;
}
td.wcheader,  tr.wcheader {
  background-color: #3366CC;
  background: #3366CC;
  color: white;
  font-weight: bold;
  text-align: center;
}
/* Override ".gr-stud th" */
tr.wcheader > th {
  text-align: inherit;
  background-image: inherit;
  color: inherit;
  font-size: inherit;
}

img.block {
  display: block;
}
img.inline-img {
  display: inline;
}
img.border0 {
  border: 0;
}

td.align-left {
  text-align: left;
}
td.align-right {
  text-align: right;
}
td.align-center {
  text-align: center;
}
td.valign-middle {
  vertical-align: middle;
}
td.valign-top {
  vertical-align: top;
}
td.valign-bottom {
  vertical-align: bottom;
}
td.nowrap {
  white-space: nowrap;
}

/*
img.width1 {
  width: 1px;
}
*/

/* Obsolete: rm */
/*
.wc iframe.jump_sem_iframe {
  border: 0;
  height: 18px;
  width: 138px;
}
*/

/* Language selection */

select.top-selections {
/* Remove the arrow of the popup */
/*
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
*/
  background-color: white;
  border-radius: 7px;
  border-width: 0;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: bold;
  height: 18px;
  margin: 0 5px 2px 5px;
  text-align: center;
  width: 150px;
  cursor: context-menu;
}
html[data-style="accessible"] select.top-selections {
  font-size: 13px;
}

/* Remove the arrow of the popup */
select.top-selections {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}
/* Remove the arrow of the popup */  /* for IE 11 */
/*
select.top-selections::-ms-expand {
    display: none;
}
*/

select.top-selections:hover, select.top-selections:active, select.top-selections:focus {
  background-color: yellow;
}
select.top-selections option {
  background-color: #000099;
  color: white;
}
select.top-selections option.top-selections-title-entry {
  display: none;
  color: red;
  background-color: yellow;
}
select.top-selections option.top-selections-title-entry:hover {
  display: none;
  color: red;
}

/* Errors in tags */

/* This ::before is in the content of the tag, so better to clear all side effects that tag may create */
[data-error-msg]::before {
/*  color: purple !important; */
  content: attr(data-error-msg);
/*   font-weight: bold; */
  font-weight: normal;
  font-size: 16px;
  color: red;
  border-radius: 10px;
  background: yellow;
  padding: 0px 10px;
  text-decoration: none;
  direction: ltr;
}
[data-error-msg=""]::before {
  border-radius: 10px;
  background: yellow;
  padding: 0px 10px;
  text-decoration: none;
}
[data-error-closing-msg]::after {
/*  color: purple !important; */
  content: attr(data-error-closing-msg);
/*   font-weight: bold; */
  font-weight: normal;
  font-size: 16px;
  color: red;
  border-radius: 10px;
  background: yellow;
  padding: 0px 10px;
  text-decoration: none;
  direction: ltr;
}

span.tag-error, span.tag-comment, span.tag-error-missing, span.tag-error-extra {
  color: red;
  border-radius: 0.5em;
  background-color: yellow;
  border: solid 1px black;
  padding: 0px 10px;
  white-space: nowrap;
  direction: ltr;
}

span.tag-comment, span.tag-error-missing, span.tag-error-extra {
  direction: ltr;
  margin: 0px 10px;
}

span.file-not-found, span.file-not-image {
  color: black;
  border-radius: 0.5em;
  background-color: white;
  border: solid 1px black;
  padding: 0px 10px;
  white-space: nowrap;
  direction: ltr;
  margin: 0px 3px;
}

/* Etc */

table.login_form_from_course {
  border: 2px #003399 solid;
}

button.white-button {
  background-color: white;
  border: 1px solid black;
  border-radius: 13px;
  height: 22px;
}

/* jump_sem.cgi */

body.jump_sem {
  background-color: transparent;
}

/*
 *
 * language handling - common to wc and generated pages
 *
 */
/*
.wctimestr_created::before, html[lang="en"] .wctimestr_created::before {
  content: "Created on ";
}
html[lang="he"] .wctimestr_created::before {
  content: "פורסם ב-";
}
html[lang="ar"] .wctimestr_created::before {
  content: "تم النشر ب-";
}
html[lang="ru"] .wctimestr_created::before {
  content: "Создано ";
}

.wctimestr_updated::before, html[lang="en"] .wctimestr_updated::before {
  content: "Last updated on ";
}
html[lang="he"] .wctimestr_updated::before {
  content: "עדכון אחרון ב-";
}
html[lang="ar"] .wctimestr_updated::before {
  content: "تمت الحتلنة الأخيرة ب-";
}
html[lang="ru"] .wctimestr_updated::before {
  content: "Последняя модификация ";
}
*/

/* Other common to wc and generated pages */

table.wcdefault, table.wcdefault5pad {
  border: 0;
  border-spacing: 0px;
}

table.wcdefault100w {
  border: 0;
  border-spacing: 0px;
  width: 100%;
}

table.wcdefault100w th, table.wcdefault100w td, table.wcdefault th, table.wcdefault td {
  padding: 0px;
}

table.wcdefault5pad th, table.wcdefault5pad td {
  padding: 5px;
}

/* Obsolete: */
/*
.gr-gr td.titlebar, .gr-wc td.titlebar {
  color: white;
  text-align: center;
  font-weight: bold;
  background-image: url("/Images/menu/menu_back.gif");
  border: 1px solid white;
  border-radius: 15px;
  padding: 3px 16px 3px 16px;
  font-size: 22px;
}
*/

div.gr-wc-titlebar {
  padding: 5px;
}
div.gr-wc-titlebar > img {
  vertical-align: bottom;
  bottom: 11px;
  position: relative;
}

div.gr-wc-titlebar h1.gr-wc-titlebar {
  display: inline;
  color: white;
  text-align: center;
  font-weight: bold;
  background-image: url("/Images/menu/menu_back.gif");
  border: 1px solid white;
  border-radius: 15px;
  padding: 3px 16px 3px 16px;
  font-size: 22px;
}


.gr-gr td.titlerightbar {
  color: white;
  text-align: left;
  background-image: url("/Images/TitleBar/right_bar.gif");
}
html[dir="rtl"] .gr-gr td.titlerightbar {
  text-align: right;
}

.gr-gr th, .gr-gr th.header {
  color: white;
  font-weight: bold;
  background-color: blue;
  text-align: center;
}

.gr-gr td.sideheader {
  color: white;
  font-weight: bold;
  background-color: darkblue;
}


.gr-gr td.errorheader, .gr-gr div.errorheader, .gr-wc div.errorheader {
  color: white;
  font-weight: bold;
  background-image: url("/Images/gr_error_back.gif");
  text-align: left;
}
html[dir="rtl"] .gr-gr td.errorheader, html[dir="rtl"] .gr-gr div.errorheader, html[dir="rtl"] .gr-wc div.errorheader {
  text-align: right;
}
.gr-gr td.notifyheader, .gr-gr div.notifyheader, .gr-wc div.notifyheader {
  color: white;
  font-weight: bold;
  background-image: url("/Images/gr_notify_back.gif");
  text-align: left;
}
html[dir="rtl"] .gr-gr td.notifyheader, html[dir="rtl"] .gr-gr div.notifyheader, html[dir="rtl"] .gr-wc div.notifyheader {
  text-align: right;
}


.gr-gr td.msg, .gr-gr div.msg, .gr-wc div.msg {
  color: black;
  background-color: white;
  text-align: center !important;
  padding: 25px;
}
.gr-gr div.msg-and-error-outer, .gr-wc div.msg-and-error-outer {
  width: 70%;
  padding: 10px;
  margin: 10px;
}


.gr-gr .Styling-table td.num, .gr-gr .Styling-table td.data {
  background-color: white;
  color: black;
}

.gr-gr table.Table > tbody > tr:nth-child(even) > td.num, .gr-gr table.Table > tbody > tr:nth-child(even) > td.data {
/*   background-color: #BBBBEE; */
/*   color: black; */
}

.gr-gr td.num, html[dir="rtl"] .gr-gr td.num {
  text-align: right;
  direction: ltr;
}

.gr-gr td.data, html[dir="rtl"] .gr-gr td.data {
  text-align: center;
}

.gr-gr td.data.ltr, html[dir="rtl"] .gr-gr td.data.ltr {
  text-align: left;
  direction: ltr;
}

.gr-gr td.data.ltr-center, html[dir="rtl"] .gr-gr td.data.ltr-center {
  text-align: center;
  direction: ltr;
}

.gr-gr td.data.rtl, html[dir="ltr"] .gr-gr td.data.rtl {
  text-align: right;
  direction: rtl;
}

.gr-gr td.data.doc-direction, html[dir="ltr"] .gr-gr td.data.doc-direction {
  text-align: left;
  direction: ltr;
}

html[dir="rtl"] .gr-gr td.data.doc-direction {
  text-align: right;
  direction: rtl;
}

.gr-gr td.formula, .gr-gr td.num.formula, .gr-gr td.data.formula, .gr-gr table.Table > tbody > tr:nth-child(even) > td.formula, .gr-gr table.Table > tbody > tr:nth-child(even) > td.num.formula, .gr-gr table.Table > tbody > tr:nth-child(even) > td.data.formula {
  background-color: yellow;
}

.gr-gr td.data a:not(:hover):not(:active):not(:focus) {
  color: black;
}

.gr-gr td.text {
/*   color: black; */
/*   background-color: white; */
  text-align: left;
}
html[dir="rtl"] .gr-gr td.text {
  text-align: right;
}

.gr-gr td.text_rtl {
/*   color: black; */
/*   background-color: white; */
  text-align: right;
  direction: rtl;
}
html[dir="rtl"] .gr-gr td.text_rtl {
  text-align: right;
}

.gr-gr td.text_ltr {
/*   color: black; */
/*   background-color: white; */
  text-align: left;
  direction: ltr;
}
html[dir="rtl"] .gr-gr td.text_ltr {
  text-align: left;
}

.gr-gr th.show {
  background-color: #7799BB;
}

.gr-gr td.show {
  background-color: #7799BB;
  color: black;
}

.gr-gr TD.border {
  background-color: black;
}

.gr-gr TD.index {
  background-color: #446699;
  color: yellow;
}

.gr-gr TD.disabled {
  background-color: #999999;
  color: black;
}


.gr-gr .directly-encoded-table a:not(:hover):not(:active):not(:focus) {
  color: yellow;
}

.gr-gr a:not(:hover):not(:active):not(:focus):not(.gr-submit-button) {
  color: yellow;
}
.gr-gr a.black:not(:hover):not(:active):not(:focus) {
  color: black;
}

/* .gr-gr td.text a:not(:hover):not(:active):not(:focus), .gr-gr td.text a:not(:hover):not(:active):not(:focus), .gr-gr td.text a:not(:hover):not(:active):not(:focus) { */
/*   color: blue; */
/* } */

.gr-gr p.highlighted {
  color: yellow;
}


.gr-gr .list-prev-sem-grades-num-stud {
  color: yellow;
}
.gr-gr .list-prev-sem-grades-90plus {
  color: #88ff88;
}

button.red-button, a.red-button, .gr-wc a.red-button:not(:hover):not(:active):not(:focus), .gr-wc .wcdefault100w .wctext a.red-button:not(:hover):not(:active):not(:focus) {
  -moz-appearance: button;
  -webkit-appearance: button;
  appearance: button;
  height: 24px;
  text-align: center;
  color: white;
  text-decoration: none;
  background: #a62200 url("/Images/wc/red_button_back.png") repeat-x;
  background-size: 1px 23px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0px 3px;
  padding: 0px 12px 7px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  vertical-align: top;
  transition: 0.3s;
}
a.red-button, .gr-wc a.red-button:not(:hover):not(:active):not(:focus), .gr-wc .wcdefault100w .wctext a.red-button:not(:hover):not(:active):not(:focus) {
  padding: 0px 12px 0px 12px;
}
button.red-button.red {
}
button.red-button.green {
  filter: hue-rotate(120deg);
}
button.red-button.blue {
  filter: hue-rotate(240deg);
}
button.red-button.proceed-blue {
  filter: hue-rotate(220deg) brightness(180%);
}
button.red-button.purple {
  filter: hue-rotate(300deg);
}
button.red-button:hover, a.red-button:hover {
  height: 28px;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
  border-radius: 12px;
  margin: -2px 1px -2px 1px;
  padding: 2px 14px 6px 14px;
  background-size: 1px 27px;
  color: yellow;
  transition: 0.3s;
}
a.red-button, .gr-wc a.red-button:not(:hover):not(:active):not(:focus) {
  padding: 2px 14px 0px 14px;
}

button.pick-button {
  background: transparent;
  border: 2px transparent solid;
  border-radius: 12px;
  display: inline-block;
  height: 23px;
  vertical-align: central;
}
button.pick-button:hover {
  filter: sepia(0.5) saturate(700%) brightness(1);
  transition: 0.3s;
  scale: 1.2;
}

a.pick-button {
  border: 2px transparent solid;
  border-radius: 12px;
  display: inline-block;
  height: 23px;
}
a.pick-button:hover {
  filter: brightness(1.2);
  border: 2px yellow solid;
  border-radius: 12px;
  background-color: transparent;
  filter: sepia(0.5) saturate(700%) brightness(1);
  transition: 0.3s;
  scale: 1.2;
}
a.set-recommended-button {
  border: 2px transparent solid;
  display: inline-block;
}
a.set-recommended-button:hover {
  filter: brightness(1.2);
  border: 2px yellow solid;
  background-color: transparent;
}


a.blue-button {
  border: 2px transparent solid;
  border-radius: 12px;
  display: inline-block;
  height: 21px;
}
a.blue-button:hover {
  filter: brightness(1.2) hue-rotate(300deg);
/*  border: 2px yellow solid; */
  border-radius: 12px;
  background-color: transparent;
}
input.blue-button {
  border: 2px transparent solid;
  border-radius: 12px;
  display: inline-block;
  height: 21px;
}
input.blue-button:hover {
  filter: brightness(1.2) hue-rotate(300deg);
/*   border: 2px yellow solid;*/
  border-radius: 12px;
  background-color: transparent;
}

/* create_course_password page - adding users to courses */

.show-user-info {
  display: inline-block;
  background-color: #60C06060;
  border-radius: 7px;
  padding: 3px 6px;
  margin: 2px;
  border: 1px gray solid;
}

.show-user-info-by-staff {
  display: inline-block;
  background-color: #70908060;
  border-radius: 7px;
  padding: 3px 6px;
  margin: 2px;
  border: 1px gray solid;
}

.show-user-info-suggest {
  display: inline-block;
  background-color: #C0C00060;
  border-radius: 7px;
  padding: 3px 6px;
  margin: 2px;
  border: 1px gray solid;
}

.show-user-info.id-missing, .show-user-info-by-staff.id-missing, .show-user-info-suggest.id-missing {
  background-color: #ff000060;
}
.show-user-info.id-missing::after, .show-user-info-by-staff.id-missing::after, .show-user-info-suggest.id-missing::after {
/*  content: " Missing ID"; */
  color: RED;
}

.show-user-info > div, .show-user-info-by-staff > div, .show-user-info-suggest > div {
  display: inline-block;
  vertical-align: middle;
}

.username-not-exists {
  border: 1px red solid;
  color: red;
}
.show-user-info.username-not-exists::after, .show-user-info-by-staff.username-not-exists::after, .show-user-info-suggest.username-not-exists::after {
/*  content: " Unknown USER"; */
  color: red;
}

.gr-gr .show-user-info a:not(:hover):not(:active):not(:focus):not(.gr-submit-button), .gr-gr .show-user-info-by-staff a:not(:hover):not(:active):not(:focus):not(.gr-submit-button), .gr-gr .show-user-info-suggest a:not(:hover):not(:active):not(:focus):not(.gr-submit-button) {
  color: blue;
}

.gr-gr table.Table col.comb0, .gr-gr table.directly-encoded-table col.comb0 {
  background-color: white;
  color: black;
}

/* Do even-odd background color changes only for tables with colgroups>col */
/* (usually created with "Table->new") */
/* Meaning for those that called _col_classes or default_col_classes */
/* and to GR::Lib::Show (feed_auto_mode_table - done elsewhere) */
/* (tables are also used for non-tabular forms ("Table->new_styling_table"), */
/* so don't do for them) '*/
.gr-gr table.Table:not(.pairs-of-rows) > colgroup ~ tbody > tr:nth-child(even), .gr-gr table.Table.pairs-of-rows > colgroup ~ tbody > tr:nth-child(4n), .gr-gr table.Table.pairs-of-rows > colgroup ~ tbody > tr:nth-child(4n-1) {
  background-color: #6666BB28;
}

.gr-gr input.gr-submit-button, .gr-wc input.gr-submit-button, .gr-gr button.gr-submit-button, .gr-wc button.gr-submit-button {
  background-color: #0060f8;
  border: 1px solid #8FBFFC;
  color: white;
  border-radius: 12px;
  margin: 2px;
  padding: 1px 7px 2px 7px;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: "Lucida Console", "Courier New", monospace;
/*  font-family: Arial, Helvetica, sans-serif; */
  white-space: nowrap;
  background: #00c9f9 url("/Images/menu/submenu_back.png") repeat-x;
  background-size: auto 25px;
  transition: 0.3s;
}
.gr-gr input.gr-submit-button.red-submit-button, .gr-wc input.gr-submit-button.red-submit-button, .gr-gr button.gr-submit-button.red-submit-button, .gr-wc button.gr-submit-button.red-submit-button {
  /* background-color does not work here */
  background: red !important;
}
.gr-gr input.gr-submit-button:hover, .gr-wc input.gr-submit-button:hover, .gr-gr button.gr-submit-button:hover, .gr-wc button.gr-submit-button:hover {
  color: yellow;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
  transition: 0.3s;
}

a.gr-submit-button {
  background-color: #0060f8;
  border: 1px solid #8FBFFC;
  color: white;
  border-radius: 12px;
  text-decoration: none;
  margin: 2px;
  padding: 1px 7px 2px 7px;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: "Lucida Console", "Courier New", monospace;
/*  font-family: Arial, Helvetica, sans-serif; */
  white-space: nowrap;
  background: #00c9f9 url("/Images/menu/submenu_back.png") repeat-x;
  background-size: auto 25px;
  transition: 0.3s;
}
.gr-stud a.gr-submit-button {
  background: white;
  color: black;
}
a.gr-submit-button.red-submit-button {
  filter: hue-rotate(150deg);
}
a.gr-submit-button:hover {
  color: yellow;
  background-size: auto 25px;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
  transition: 0.3s;
}

/* gr-wc and generated pages - Ticket images */
.display-ticket-image1 img {
  transition: 0.5s;
}

.display-ticket-image1:hover img {
  transform: scale(2.0);
}

/* switch-others */

a.switch-others-link {
  width: 2em;
  border: 2px solid transparent;
  border-radius: 2em;
  transition: 0.3s;
}

a.switch-others-link:hover, a.switch-others-link:active, a.switch-others-link:focus {
  background-color: transparent;
  -webkit-filter: brightness(1.3) hue-rotate(300deg);
  filter:         brightness(1.3) hue-rotate(300deg);
  transition: 0.3s;
}

img.switch-others-link {
  width: 2em;
  border: 2px solid transparent;
  border-radius: 2em;
}

img.switch-others-link:hover {
}


/* common - font sizes */

.font-size-minus-1 {
  font-size: 90%;
}

.font-size-minus-2 {
  font-size: 75%;
}

.font-size-minus-3 {
  font-size: 80%;
}

/* common - other */

table.wcdefault tr.wc_ticket > td {
  padding: 7px;
  border-top: 1px solid white;
}

div.spacer-width5 {
  width: 5px;
  display: inline-block;
}

/*
 * gr-no-menu (for extzip.cgi)
 */

html body.gr-no-menu {
  direction: ltr;
  color: white;
  background-image: url("/Images/gr_back8.gif");
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

html[dir="rtl"] body.gr-no-menu {
  direction: rtl;
  font-size: 14px;
}


/*
 * webcourse main page
 */

 .gr-webcourse-index h2 {

 margin-top:15px; 
}


.gr-webcourse-index table, .gr-webcourse-index tr, .gr-webcourse-index td, .gr-webcourse-index th {
  border-width: 0px;
  border-spacing: 0px;
/*  spacing: 0px; */
  padding: 0px;
  /* cell-spacing: 0px; */
  /* cell-padding: 0px; */
  margin: 0px;
}

.gr-webcourse-index td.line {
  display: block;
  height: 1px;
  max-height: 1px;
  padding: 0px;
  border-spacing: 0px;
}

.gr-webcourse-index td.line0 {
  display: block;
  background-color: transparent;
  height: 1px;
  max-height: 1px;
  padding: 0px;
  border-spacing: 0px;
}

.gr-webcourse-index td.line10 {
  display: block;
  background-color: transparent;
  height: 10px;
  padding: 0px;
  border-spacing: 0px;
}

/* wc palette.cgi */

body.wc-palette {
    background-color: white;
    margin: 0px;
}

.wc-palette .palette-color {
    width: 20px;
    height: 20px;
    border: 1px solid gray;
}

.wc-palette .palette-color:hover {
    border: 1px dotted white;
}

/*
 *
 * css rules for 404.cgi
 *
 */

body.gr-404 {
  color: black;
  background-color: white;
  font-family: Arial, Verdana;
  font-size: 14px;
}
.gr-404 a, .gr-404 a:link, .gr-404 a:visited {
  color: black;
}

.gr-404 div.grey-lines-top-bottom {
    border-top: 16px #666666 solid;
    border-bottom: 16px #666666 solid;
    padding-bottom: 10px;
}

/*
 *
 * Table.pm
 *
 */

table.Table {
  /* Notice that <col> does not accept "color: ...;" property, so add it here */
  color: black;
}

table.Styling-table {
}

table.directly-encoded-table {
}

table.framed {
  padding: 5px;
  border: 2px white solid;
}
table.fancy {
  padding: 2px;
  background-color: black;
  border: 1px white solid;
}

table.double-frame {
  border: 3px double white;
}

table.border0 {
  border: 0px;
}

table.cellpadding-cellspacing {
  border-collapse: separate;
  border-spacing: 2px;
}

table.cellpadding-cellspacing > tbody > tr > td, table.cellpadding-cellspacing > tbody > tr > th, table.cellpadding-cellspacing > thead > tr > td, table.cellpadding-cellspacing > thead > tr > th {
  padding: 4px;
}

table.nocellpadding-nocellspacing {
  border-spacing: 0px;
}

table.nocellpadding-nocellspacing > tbody > tr > td, table.nocellpadding-nocellspacing > tbody > tr > th, table.nocellpadding-nocellspacing > thead > tr > td, table.nocellpadding-nocellspacing > thead > tr > th {
  padding: 0px;
}

table.cellpadding2-cellspacing1 {
  border-spacing: 1px;
  border-collapse: separate;
}

table.cellpadding2-cellspacing1 > tbody > tr > td, table.cellpadding2-nocellspacing1 > tbody > tr > th, table.cellpadding2-nocellspacing1 > thead > tr > td, table.cellpadding2-nocellspacing1 > thead > tr > th {
  padding: 2px;
}

table.cellspacing0 {
  border-spacing: 0px;
  border-collapse: separate;
}

table.cellspacing1 {
  border-spacing: 1px;
  border-collapse: separate;
}

table.cellspacing8 {
  border-spacing: 8px;
  border-collapse: separate;
}

table.cellpadding0 > tbody > tr > td, table.cellpadding0-nocellspacing1 > tbody > tr > th, table.cellpadding0-nocellspacing1 > thead > tr > td, table.cellpadding0-nocellspacing1 > thead > tr > th {
  padding: 0px;
}

table.cellpadding1 > tbody > tr > td, table.cellpadding1-nocellspacing1 > tbody > tr > th, table.cellpadding1-nocellspacing1 > thead > tr > td, table.cellpadding1-nocellspacing1 > thead > tr > th {
  padding: 1px;
}

table.cellpadding2 > tbody > tr > td, table.cellpadding2-nocellspacing1 > tbody > tr > th, table.cellpadding2-nocellspacing1 > thead > tr > td, table.cellpadding2-nocellspacing1 > thead > tr > th {
  padding: 2px;
}

table.cellpadding3 > tbody > tr > td, table.cellpadding3-nocellspacing1 > tbody > tr > th, table.cellpadding3-nocellspacing1 > thead > tr > td, table.cellpadding3-nocellspacing1 > thead > tr > th {
  padding: 3px;
}

table.cellpadding5 > tbody > tr > td, table.cellpadding5-nocellspacing1 > tbody > tr > th, table.cellpadding5-nocellspacing1 > thead > tr > td, table.cellpadding5-nocellspacing1 > thead > tr > th {
  padding: 5px;
}

table.width100percent {
  width: 100%;
}

table.width90percent {
  width: 90%;
}

table.width80percent {
  width: 80%;
}

/* gr_confirm and gr_alert dialogs */

dialog.gr-confirm-dialog, dialog.gr-alert-dialog {
  background: red;
  min-width: 45%;
  max-width: 75%;
}

dialog.gr-confirm-dialog::backdrop, dialog.gr-alert-dialog::backdrop {
  backdrop-filter: blur(2px);
  background: rgb(0 0 0 / 40%);
}

dialog.gr-confirm-dialog h2, dialog.gr-alert-dialog h2#gr-alert-title {
  all: revert;
  color: yellow;
  font-size: 30px;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] dialog.gr-confirm-dialog h2, html[dir="rtl"] dialog.gr-alert-dialog h2#gr-alert-title {
  direction: rtl;
  text-align: right;
}

dialog.gr-confirm-dialog div.gr-confirm-main-div, dialog.gr-alert-dialog div.gr-alert-main-div {
  color: yellow;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 50px;
}

/* popovers */

div.popover {
  color: black;
  font-size: 16px;
  background-color: #CCCCCC;
  vertical-align: middle;
  padding: 20px;
  margin: auto;
  z-index: 888;
  border-radius: 12px;
  border: double white 5px;
/*  max-height: 80%;*/
  max-width: 80%;
  max-height: 80vh;
  overflow-y: clip;
}

/* blur the backgroud behind/around the popover */
div.popover::backdrop {
  backdrop-filter: blur(2px);
  background: rgb(0 0 0 / 40%);
}

div.popover.popover-blue-background {
  color: white;
  background-color: blue;
}

.gr-wc div.popover h2 {
  color: blue;
}

.gr-wc div.popover .wctext {
  color: black;
}

.gr-wc div.popover .wctimestr {
  color: black;
}

div.stickey-popup {
  display: none;
  position: fixed;
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  color: white;
  font-size: 16px;
  background-color: blue;
  vertical-align: middle;
  padding: 20px;
  margin: auto;
  z-index: 888;
  border-radius: 12px;
  border: double white 5px;
}
div.stickey-popup-internal {
  height: 80%;
  padding: 5px;
  margin: auto;
  z-index: 889;
  border-radius: 12px;
  border: white 2px;
  overflow-y: scroll;
}

/* td.line is used only in webcourse/index.cgi */
div.line {
  background: #003399;
  border-spacing: 0px;
  height:1px;
  margin-bottom: 1px;
}

.screen-reader-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute; 
}

.wpa-hide-rtl#skiplinks a, .wpa-hide-rtl#skiplinks a:hover, .wpa-hide-rtl#skiplinks a:visited,
.wpa-hide-rtl.skiplinks a, .wpa-hide-rtl.skiplinks a:hover, .wpa-hide-rtl.skiplinks a:visited {
  position: absolute !important;
  right:220px !important; width: 230px !important;
  color:transparent !important;
  background: transparent !important;
}

.wpa-hide-ltr#skiplinks a, .wpa-hide-ltr#skiplinks a:hover, .wpa-hide-ltr#skiplinks a:visited,
.wpa-hide-ltr.skiplinks a, .wpa-hide-ltr.skiplinks a:hover, .wpa-hide-ltr.skiplinks a:visited {
  position: absolute !important;
  left:300px !important; width: 230px !important;
  color:transparent !important;
  background: transparent !important;
}

.wpa-hide-rtl#skiplinks a:focus,.wpa-hide-ltr#skiplinks a:focus,
.wpa-hide-rtl.skiplinks a:focus,.wpa-hide-ltr.skiplinks a:focus {
color:#0000FF !important;
background: white !important;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.form-block {
    display: flex;
    margin-top: 5px;
}

.form-block > div:first-child {
    min-width:100px;
}

.form-block > input.wc {
    height: 20px;
}

.submit-div {
    text-align: center;
    width: 100px;
}

html[lang="ru"] .form-block > div:first-child  {
    min-width:160px;
}

/* For _popup_over */
/* for popup */

.popup_caller {
  color: purple;
}

.hiddenstudent .popup_caller {
  color: #c5acc6;
}

/* Initial settings - change by javascript */
span.popup {
  display: none;
  position: absolute;
  visibility: hidden;
  z-index:2010;
  border-radius: 1em;
  box-shadow: 0px 0px 4px #222;  
  background-image: linear-gradient(to top, #4078ef, #2860da);
  color: #ffff00;
  padding: 4px 8px;
}

/* For drag and drop of files to stud and wc */

label.stud-file-drop-area {
  background: #a52100;
  border-radius: 14px;
  font-weight: bold;
  cursor: pointer;
  color: white;
  vertical-align: middle;
  margin: 4px;
  padding: 6px 20px;
}

label.stud-file-drop-area:hover {
  border: 4px yellow solid;
  border-radius: 16px;
  color: yellow;
  margin: 0px;
}

div.file-drop-highlight, input.file-drop-highlight, label.stud-file-drop-area.file-drop-highlight {
  background-color: #80808050;
}

/* gr/column edit style */

/* <DIALOG>: blur the backgroud behind/around the popover */
dialog::backdrop {
  backdrop-filter: blur(2px);
  background: rgb(0 0 0 / 40%);
}

.gr-gr dialog.column, .gr-gr dialog.column form {
  background: burlywood;
  color: black;
  min-width: 45vw;
  min-height: 45vh;
}

div.flex-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 800px;
}

div.flex-layout > div {
  display: flex;
  gap: 10px;
}

div.flex-layout > div > div {
  flex: 1;
  padding: 6px;
  text-align: left;
}

html[dir="rtl"] div.flex-layout > div > div {
  text-align: right;
}