/*
 *
 * Common rules
 *
 */

body {
  direction: ltr;
  padding: 0;
  margin: 0;
}

/* gr-gr, gr-wc, and their help */
.main-content {
  margin-right: 20px;
  margin-left: 20px;
}

/* Somehow without this, the font reduces in input, selct 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;
}

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

a:focus, .gr-login input :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;
}

.white-text {
  color: white;
}

.orange-text {
  color: orange;
}

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

.blue-text {
  color: blue;
}

.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 student interface
 *
 */

.gr-stud .fixedfont {
  font-size: 14px;
}

html body.gr-stud {
  direction: ltr;
  color: black;
  background-color: black;
  background: black;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  overflow-y: auto;
}

html[dir="rtl"] body.gr-stud {
  direction: rtl;
}

.stud-main-content {
  width: calc(95% - 80px);
  background-image: url("/Images/StudImages/back3.gif");
  margin: auto;
  padding: 20px 40px;
  border: 3px solid #005AFF;
  color: white;
}

/* Second level tabs */
.stud-main-content .stud-main-content {
  width: 95%;
  background-image: url("/Images/StudImages/back1.gif");
  margin: auto;
  padding: 20px 20px;
  border: 3px solid #005AFF;
  color: white;
}

.stud-grades-course {
  text-align: center;
  color: white;
  margin: 10px;
  padding: 7px;
}

.stud-hw-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0px 5px;
}


.stud-hw-table > tbody > tr > td {
  border-top: 1px solid #005AFF;
  padding: 0px 7px;
}
.stud-hw-table > tbody > tr:first-child > td {
  border-top: none;
}
.stud-hw-table > thead {
  border-top: 15px solid #005AFF;
  border-bottom: 15px solid #005AFF;
}

.stud-news-table {
  width: 100%;
  border-collapse: collapse;
  padding: 0px 5px;
}

.stud-news-table > tbody > tr > td {
  padding: 0px 7px;
}

.stud-news-table > thead {
  border-top: 15px solid #005AFF;
  border-bottom: 15px solid #005AFF;
}


.gr-stud a:link.mail {
  color: blue;
}
.gr-stud a:link {
  color: blue;
}
.gr-stud td.text a:link {
  color: blue;
}
.gr-stud a:visited.mail {
  color: blue;
}
.gr-stud a:visited {
  color: blue;
}
.gr-stud td.text a:visited {
  color: blue;
}
.gr-stud a:active.mail {
  color: blue;
}
.gr-stud a:active {
  color: white;
}
.gr-stud td.text a:active {
  color: blue;
}

.gr-stud input, .gr-stud textarea {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}

.gr-stud a.tab:link {
  text-decoration: none;
  color: white;
}
.gr-stud a.tab:active {
  text-decoration: none;
  color: white;
}
.gr-stud a.tab:visited {
  text-decoration: none;
  color: white;
}

.gr-stud a.tab:hover, .gr-stud a.tab:active, .gr-stud a.tab:focus {
  color: yellow;
  background-color: transparent;
}

.gr-stud a.distab:link {
  text-decoration: none;
  color: #333333;
}
.gr-stud a.distab:active {
  text-decoration: none;
  color: #333333;
}
.gr-stud a.distab:visited {
  text-decoration: none;
  color: #333333;
}

.gr-stud td {
  font-size: 14px;
/*  color: white; */
}

.gr-stud td.setting {
  color: black;
  font-size: 14px;
  background-color: white;
  background: white;
}

.gr-stud .big {
  font-size: 15px;
}
.gr-stud .small {
  font-size: 11px;
}
.gr-stud .bsmall {
  font-size: 11px;
  color: black;
}
.gr-stud .quitesmall {
  font-size: 13px;
}
.gr-stud td.errorheader {
  font-size: 14px;
  color: white;
  font-weight: bold;
  background-image: url("/Images/StudImages/gr_error_back.gif");
  text-align: left;
}
.gr-stud td.msg {
  font-size: 14px;
  color: black;
  background-color: white;
  background: white;
  text-align: center;
}
.gr-stud td.text {
  font-size: 14px;
  color: black;
  background-color: white;
  background: white;
  text-align: left;
}
html[dir="rtl"] .gr-stud td.text {
  text-align: right;
}
.gr-stud td.dtext {
  font-size: 14px;
  color: black;
  background-color: #CCCCCC;
  background: #CCCCCC;
  text-align: left;
}
html[dir="rtl"] .gr-stud td.dtext {
  text-align: right;
}
.gr-stud td.cdtext {
  font-size: 14px;
  color: black;
  background-color: #CCCCCC;
  background: #CCCCCC;
  text-align: center;
}
.gr-stud span.link, .gr-stud a.link:not(:hover):not(:active):not(:focus) {
  color: blue;
  text-decoration: underline;
  /* Next line ensure that bi-di does not break the link in two parts with another in between */
  display: inline-block;
}
.gr-stud td.rtext {
  font-size: 14px;
  color: black;
  background-color: white;
  background: white;
  text-align: right;
}
html[dir="rtl"] .gr-stud td.rtext {
  text-align: left;
}
.gr-stud td.ctext {
  font-size: 14px;
  color: black;
  background-color: white;
  background: white;
  text-align: center;
}
.gr-stud th, .gr-stud th.header {
  text-align: center;
  background-image: url("/Images/StudImages/border.gif");
  color: white;
  font-weight: bold;
  font-size: 14px;
}
.gr-stud td.sortheader {
  background-color: #66AAFF;
  background: #66AAFF;
  color: white;
  font-weight: bold;
  font-size: 14px;
}
.gr-stud td.headerback {
  background-image: url("/Images/StudImages/border.gif");
  color: white;
  font-size: 14px;
}
.gr-stud td.grade {
  text-align: center;
  background-color: white;
  background: white;
  color: black;
  font-size: 16px;
}
.gr-stud td.gradeh, .gr-stud th.gradeh {
  text-align: left;
  background-color: #444444;
  background: #444444;
  color: white;
  font-size: 16px;
}
html[dir="rtl"] .gr-stud td.gradeh, html[dir="rtl"] .gr-stud th.gradeh {
  text-align: right;
}
.gr-stud td.gradehw, .gr-stud th.gradehw {
  text-align: left;
  background-color: #BBBBBB;
  background: #BBBBBB;
  color: black;
  font-size: 16px;
}
html[dir="rtl"] .gr-stud td.gradehw, html[dir="rtl"] .gr-stud th.gradehw {
  text-align: right;
}
.gr-stud span.date {
  color: white;
  font-weight: bold;
}
.gr-stud span.semester {
  color: white;
  font-weight: bold;
  width: 8em;
  display: inline-block;
  text-align: center;
}
.gr-stud span.highlighttab {
  color: white;
  font-weight: bold;
}
.gr-stud span.greeting {
  color: white;
}
.gr-stud td.greeting {
  white-space: nowrap;
}

.gr-stud span.highlight {
  color: #003399;
}
.gr-stud tr {
  font-size: 14px;
  color: white;
}

/* cal */

.gr-stud .cal-months {
  font-size: 16px;
  color: white;
}

.gr-stud .cal-daysinmonth {
  font-size: 10px;
  color: black;
}

/* ics support under auto_update */

.gr-stud div.ics {
  margin-top: 30px;
  padding: 5px 16px;
  text-align: center;
}

.gr-stud span.ics {
  background-color: #e8e8ff;
  border: 1px solid black;
  border-radius: 13px;
  color: blue;
  padding: 7px 26px;
  text-align: center;
}

.gr-stud a.ics {
  text-align: left;
  direction: ltr;
}

.gr-stud button.ics {
  border: 1px solid black;
  border-radius: 15px;
  margin-top: 20px;
  padding: 2px 15px;
  font-weight: bold;
  background-color: #e8e8ff;
}

.gr-stud button.ics:hover {
  background-color: yellow;
}

body.gr-stud a.menu-button, body.gr-stud input.menu-button {
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  color: black;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}

body.gr-stud a.menu-button {
  padding: 1px 9px;
}

body.gr-stud input.menu-button {
  padding: 0px 9px;
}

body.gr-stud input.menu-button.current-lang {
  background-color: #dddddd;
}

body.gr-stud input.menu-button.logout {
  color: white;
  background-color: #0080d3;
}

body.gr-stud a.menu-button:hover, body.gr-stud input.menu-button:hover {
  color: black;
  background-color: yellow;
}
body.gr-stud input.menu-button.current-lang:hover {
  background-color: #dddddd;
}

/* Align input tags */

body.gr-stud input.valign {
  vertical-align: middle;
}

body.gr-stud td.center {
  text-align: center;
}

/* Login screen */

body.gr-stud.gr-stud-login {
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  background-color: white;
}

body.gr-stud.gr-stud-login div.top-div {
  text-align: center;
}

body.gr-stud.gr-stud-login div.top-div > form {
  width: 693px;
  height: 100%;
  display: inline-block;
}

body.gr-stud.gr-stud-login div.main {
  text-align: center;
}

body.gr-stud.gr-stud-login div.taub {
}

body.gr-stud.gr-stud-login div.taub-top-img img {
  display: block;
}

body.gr-stud.gr-stud-login div.taub-top {
  background: url(/Images/StudImages/Taub/panel_back.gif) repeat-x ;
  width: 693px;
  vertical-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

body.gr-stud.gr-stud-login div.taub-top > span {
  display: inline-block;
  height: 41px;
}

body.gr-stud.gr-stud-login div.taub-top > span > span {
  display: inline-block;
  padding: 7px 0px;
  width: 518px;
}
body.gr-stud.gr-stud-login div.taub-top > span > span > input {
  vertical-align: middle;
  background-color: white;
  border: 1px solid black;
  border-radius: 3px;
}

body.gr-stud.gr-stud-login div.taub-top > span > img {
  display: inline;
  vertical-align: top;
}

body.gr-stud.gr-stud-login div.taub > div {
}

body.gr-stud.gr-stud-login div.taub > div > img {
  vertical-align: top;
}

body.gr-stud.gr-stud-login div.taub-top > span > span > input.submit-button {
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  font-size: 11px;
  font-style: italic;
  font-weight: bold;
  height: 18px;
}

body.gr-stud.gr-stud-login div.taub-top > span > span > input.submit-button:hover {
  background-color: yellow;
  color: blue;
}


/*
 *
 * 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), a.wclink-email:active, a.wclink-email:focus, a.wclink-email:hover {
  color: blue;
}
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;
}
.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: white;
  background: white;
}
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;
}

.wc 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: 11px;
  font-style: italic;
  font-weight: bold;
  height: 15px;
  margin: 0 5px 2px 5px;
  text-align: center;
  width: 130px;
}
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 */

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 3px;
  white-space: nowrap;
  direction: ltr;
}

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

span.file-not-found, span.file-not-image {
  color: black;
  border-radius: 0.5em;
  background-color: white;
  border: solid 1px black;
  padding: 0px 3px;
  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;
}


/*
 *
 * css rules for the help pages
 *
 */

body.gr-gr-help.help .main-content{
  margin-right: 30px;
  margin-left: 30px;
  counter-reset: h2;
}

.gr-gr-help.help h1 {
  display: inline-block;
  color: white;
  background-color: #0070d8;
  border: 1px solid #8FBFFC;
  border-radius: 14px;
  text-align: center;
  margin: 5px 0px;
  padding: 1px 20px;
  font-size: 18px;
  font-weight: bold;
}

.gr-gr-help.help h2, .gr-gr-help.help h3, .gr-gr-help.help h4, .gr-gr-help.help h5, .gr-gr-help.help h6 {
  display: inline-block;
  color: white;
  background-color: #0062a5;
  border: 1px solid #8FBFFC;
  border-radius: 10px;
  text-align: right;
  margin: 5px 0px;
  padding: 1px 12px;
  font-size: 16px;
  font-weight: bold;
}

.gr-gr-help.help h2 {
  counter-reset: h3;
}
.gr-gr-help.help h3 {
  counter-reset: h4;
}
.gr-gr-help.help h4 {
  counter-reset: h5;
}
.gr-gr-help.help h5 {
  counter-reset: h6;
}

.gr-gr-help.help h2:before {
  counter-increment: h2;
  content: counter(h2) ". ";
}
.gr-gr-help.help h3:before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) ". ";
}
.gr-gr-help.help h4:before {
  counter-increment: h4;
  content: counter(h2) "." counter(h3) "." counter(h4) ". ";
}
.gr-gr-help.help h5:before {
  counter-increment: h5;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";
}
.gr-gr-help.help h6:before {
  counter-increment: h6;
  content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";
}

.gr-gr-help.help h2.nocount:before, .gr-gr-help.help h3.nocount:before, .gr-gr-help.help h4.nocount:before, .gr-gr-help.help h5.nocount:before, .gr-gr-help.help h6.nocount:before {
  content: "";
  counter-increment: none;
}

/*
 *
 * 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;
}

/*
 *
 * css rules for the staff interface
 *
 */

html body.gr-gr {
  direction: ltr;
  color: white;
  background-image: url("/Images/gr_back8.gif");
  background-position: 0 101px;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 101px 0 29px 0;
  overflow-y: scroll; /* Show vertical scrollbar */
}

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


.gr-gr .internaltitle {
  color: yellow;
  font-weight: bold;
}

.gr-gr form {
  color: white;
}

.gr-gr li, .gr-gr ul {
  color: white;
}

.gr-gr p, .gr-gr h1, .gr-gr h2, .gr-gr h3, .gr-gr h4, .gr-gr h5, .gr-gr h6 {
  color: white;
}

.gr-gr .Styling-table td, .gr-gr .directly-encoded-table td {
  color: white;
  text-align: left;
}
html[dir="rtl"] .gr-gr .Styling-table td, html[dir="rtl"] .gr-gr .directly-encoded-table td {
  text-align: right;
}

.gr-gr td.left {
  text-align: left;
}
/* Ensures priority over 'html[dir="rtl"] .gr-gr td' above: */
html[dir="rtl"] .gr-gr td.left {
  text-align: left;
}

.gr-gr td.centered {
  color: white;
  text-align: center;
}
/* Ensures priority over 'html[dir="rtl"] .gr-gr td' above: */
html[dir="rtl"] .gr-gr td.centered {
  text-align: center;
}

/* 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 {
  color: white;
  font-weight: bold;
  background-image: url("/Images/gr_error_back.gif");
  text-align: left;
}
html[dir="rtl"] .gr-gr td.errorheader {
  text-align: right;
}
.gr-gr td.notifyheader {
  color: white;
  font-weight: bold;
  background-image: url("/Images/gr_notify_back.gif");
  text-align: left;
}
html[dir="rtl"] .gr-gr td.notifyheader {
  text-align: right;
}


.gr-gr td.msg {
  color: black;
  background-color: white;
  text-align: center !important;
}

.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.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;
}
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: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;
}
a.red-button, .gr-wc a.red-button:not(:hover):not(:active):not(:focus) {
  padding: 2px 14px 0px 14px;
}

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;
}
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;
}

/* view - "show.ph" tables */

.gr-gr table#zxctab tr {
/*   background-color: white; */
}

.gr-gr table#zxctab tr:nth-child(even) {
/*   background-color: #dddddd; */
}
.gr-gr table#zxctab tr:nth-child(odd) {
/*   background-color: white; */
}

/* 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 show.ph (zxctab) */
/* (tables are also used for non-tabular forms ("Table->new_styling_table"), */
/* so don't do for them) */
.gr-gr table#zxctab > tbody > tr:nth-child(even), .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 table#zxctab tr > td {
/*   background-color: inherit; */
}
.gr-gr table#zxctab tr > TD.notregistered {
  text-align: right;
  background-color: cyan;
  color: black;
  direction: rtl;
}

.gr-gr table#zxctab tr > TD.notinfacfile {
  text-align: right;
  background-color: gray;
  color: black;
  direction: rtl;
}

.gr-gr table#zxctab tr > TD.infacfile {
  text-align: right;
/*   background-color: inherit; */
  color: black;
  direction: rtl;
}

.gr-gr table#zxctab tr > TD.hiddenstudent {
  text-align: right;
  background-color: black;
  color: white;
  direction: rtl;
}

.gr-gr table#zxctab tr > TD.graduate {
  text-align: right;
  background-color: red;
  color: black;
}

.gr-gr table#zxctab col.index {
  background-color: #446699;
  color: yellow;
}

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

.gr-gr table#zxctab col.comb1 {
  background-color: #FFFF00;
  color: black;
}

.gr-gr table#zxctab col.comb2 {
  background-color: #77FF77;
  color: black;
}

.gr-gr table#zxctab col.comb3 {
  background-color: #7777FF;
  color: black;
}

.gr-gr table#zxctab tr > td.show {
  background-color: #7799BB;
  color: black;
}
.gr-gr table#zxctab tr > TD.index {
/*   background-color: #446699; */
  color: yellow;
}
.gr-gr table#zxctab tr:nth-child(even) > TD.index {
/*   background-color: #224477; */
}

.gr-gr table#zxctab tr > TD.comb1 {
  text-align: right;
/*   background-color: #FFFF00; */
  color: black;
  direction: ltr;
}
.gr-gr table#zxctab tr:nth-child(even) > TD.comb1 {
/*   background-color: #dddd00; */
}

.gr-gr table#zxctab tr > TD.comb2 {
  text-align: right;
/*   background-color: #77FF77; */
  color: black;
  direction: ltr;
}
.gr-gr table#zxctab tr:nth-child(even) > TD.comb2 {
/*   background-color: #55dd55; */
}

.gr-gr table#zxctab tr > TD.comb3 {
  text-align: right;
/*   background-color: #7777FF; */
  color: black;
  direction: ltr;
}
.gr-gr table#zxctab tr:nth-child(even) > TD.comb3 {
/*   background-color: #5555dd; */
}

.gr-gr table#zxctab .not-transferred-elec {
  /* Should be same color as .gr-gr table#zxctab tr > TD.notinfacfile */
  background-color: gray;
}

.gr-gr table#zxctab .final-grade-0 {
  background-color: pink;
}

.gr-gr table#zxctab .final-grade-not-compatible {
  background-color: red !important;
}
/*
 * .gr-gr table#zxctab .final-grade-not-compatible:before {
 *   content: "*";
 *   color: red;
 * }
 */
.gr-gr table#zxctab .final-grade-not-compatible-no-data {
  background-color: #ffcccc !important;
}

.gr-gr form input.gr-submit-button, .gr-wc form input.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: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  background: #00c9f9 url("/Images/menu/submenu_back.png") repeat-x;
  background-size: auto 25px;
}
.gr-gr form input.gr-submit-button:hover, .gr-wc form input.gr-submit-button:hover {
  color: yellow;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
}

.gr-gr a.gr-submit-button, .gr-wc 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: Arial, Helvetica, sans-serif;
  white-space: nowrap;
  background: #00c9f9 url("/Images/menu/submenu_back.png") repeat-x;
  background-size: auto 25px;
}
.gr-gr a.gr-submit-button:hover, .gr-wc a.gr-submit-button:hover {
  color: yellow;
  background-size: auto 25px;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
}

.zxc {
  width: 41px;
  height: 48px;
  background: url(/Images/menu/mousie.gif);
  color: red;
  position: fixed;
  right: 110px;
  top: 41px;
  z-index: 9999;
}

html[dir="rtl"] .zxc {
  left: 110px;
  right: unset;
}

.zxc:hover {
  -webkit-filter: brightness(1.3) hue-rotate(60deg);
  filter:         brightness(1.3) hue-rotate(60deg);
}

.zxc2 {
  width: 100px;
  height: 48px;
  color: white;
  position: fixed;
  right: 0px;
  top: 45px;
  z-index: 9999;
}

html[dir="rtl"] .zxc2 {
  left: 0px;
  right: unset;
}

/* wc style */

body.gr-wc {
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  background-image: url("/Images/gr_back8.gif");
  background-position: 0 101px;
  margin: 101px 0 29px 0;
  padding: 0;
  overflow-y: scroll; /* Show vertical scrollbar */
}

.gr-wc a:hover img {
    background-color: transparent;
}

.ignore .gr-wc h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0px;
  background: blue url("/Images/menu/menu_back.gif") repeat scroll 0 0;
  border: 1px solid white;
  border-radius: 16px;
  padding: 3px 17px 3px 17px;
}

.gr-wc h2 {
  color: yellow;
  font-size: 16px;
  font-weight: bold;
  margin: 0px;
}

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

div.gr-wc-content-changed {
  margin: 15px 0px;
  color: yellow;
}
span.gr-wc-content-changed {
  color: yellow;
  font-weight: bold;
}
.gr-wc-site-not-visible {
  color: yellow;
}

.gr-wc td {
  font-size: 16px;
  color: white;
}
.gr-wc label {
  font-size: 16px;
  color: white;
}
/* called by "size$fontsize", though it does not appear in the code directly */
.gr-wc .input-label1 {
  font-size: 16px;
  color: white;
}
.gr-wc .input-label2 {
  font-size: 16px;
  color: white;
}
.gr-wc .input-label3 {
  font-size: 16px;
  color: white;
}
.gr-wc .input-label4 {
  font-size: 16px;
  color: white;
}
.gr-wc .input-value1 {
  font-size: 16px;
  color: white;
  vertical-align: top;
}
.gr-wc .input-value2 {
  font-size: 16px;
  color: white;
  vertical-align: top;
}
.gr-wc .input-value3 {
  font-size: 16px;
  color: white;
  vertical-align: top;
}
.gr-wc .input-value4 {
  font-size: 16px;
  color: white;
  vertical-align: top;
}

.default-wc-input-width {
  width: calc(0.8 * (100vw - 320px));
}

.attached-files {
  font-size: 14px;
  color: white;
}

.gr-wc tr.form-second > td {
  padding-bottom: 15px;
}

.gr-wc tr.form-second-title > td {
  font-size: 20px;
  color: white;

  font-weight: bold;
  padding: 18px 10px;
  border-bottom: 1px solid white;
  background: url("/Images/wc/Backgrounds/blue029.jpg");
}

.gr-wc tr.form-third > td {
  padding-bottom: 15px;
}

.gr-wc input {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  border: 1px;
}
.gr-wc input[type="file"] {
  color: yellow;
}
.gr-wc textarea {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
}
.gr-wc .wctext {
  color: white;
}
.gr-wc .wctext a:not(:hover):not(:active):not(:focus) {
  color: blue;
}
.gr-wc .wcdefault100w .wctext a:not(:hover):not(:active):not(:focus) {
  /* was: color: yellow; */
  color: blue;
}
.gr-wc .link {
  color: #FFFF00;
}
.gr-wc .wctimestr { 
  font-size: 14px ;
  color: white;
}

.gr-wc .btnImage {
  background-color: #EFEFEF;
  border: 1px solid #A0A0A0;
  cursor: pointer;
  margin-right: 1px;
  margin-bottom: 1px; 
}

.gr-wc input:required, .gr-wc textarea:required {
  background-color: #d8d8d8;
}

.gr-wc td.width1p {
  width: 1%;
}
.gr-wc td.width100p {
  width: 100%;
}
.gr-wc td.width32 {
  width: 32px;
}
.gr-wc td.align-left {
  text-align: left;
}
.gr-wc td.align-right {
  text-align: right;
}
.gr-wc td.align-center {
  text-align: center;
}
.gr-wc td.valign-middle {
  vertical-align: middle;
}
.gr-wc td.valign-top {
  vertical-align: top;
}
.gr-wc td.valign-bottom {
  vertical-align: bottom;
}
/* Alreday defined above without .gr-wc td
.gr-wc td.ltr {
  text-align: left;
  direction: ltr;
}
.gr-wc td.rtl {
  text-align: right;
  direction: rtl;
}
*/

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

.gr-wc div.display-ticket-image {
  flex-grow: 0;
}

.gr-wc div.display-ticket-ticket {
  width: inherit;
  flex-grow: 1;
  margin-left: 10px;
}

.gr-wc div.components-text {
  width: 50%;
  padding: 30px;
  background-color: #060644;
  border-radius: 20px;
  border: 3px #0033A0 solid;
  margin: 0 0 0 150px;
  color: white;
}

/* Alreday defined above without .gr-wc
.gr-wc .ltr {
  text-align: left;
  direction: ltr;
}
.gr-wc .rtl {
  text-align: right;
  direction: rtl;
}
*

/* Errors in tags */

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

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

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

.gr-wc .extra_operations-notice {
  margin: 15px 0px;
}

.gr-wc-extzip-incorrect-passwd {
  font-weight: bold;
  color: red;
}
.gr-wc-extzip-div {
  width: 50%;
  margin: 0 auto;
  margin-top: 20%;
  text-align: center;
  padding: 20px;
  border: 1px solid white;
}

/* menu(s) */

div.gr-menu {
  height: 101px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  direction: ltr;
  margin: 0px;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 101px;
  z-index: 1000;
}
div.gr-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/Images/menu/menu_back.gif");
  z-index: -1;
}
html[dir="rtl"] div.gr-menu {
  direction: rtl;
}

div.menu-main-img > div.menu-submenu {
  z-index: 1001;
  visibility: hidden;
  display: none;
  position: relative;
  right: calc( 50% - 22px );
  top: -7px;
  margin: -2px 0px;
  padding: 3.5px 0px;
  border: none;
  background: #80808050;
  border-radius: 9px;
}
html[dir="rtl"] div.menu-main-img > div.menu-submenu {
  right: unset;
  left: calc( 50% - 22px );
}

div.menu-main-img > div.subtitle {
  position: relative;
  left: -3px;
  font-size: 9px;
  width: 51px;
  height: 10px;
  text-align: center;
  z-index: 999;
}

div.menu-main-img:hover > div.subtitle {
  /* visibility: hidden; */
  /* opacity: 0.4; */
  margin-top: 2px;
  color: yellow;
}

body[data-changed="1"] div.menu-main-img > div.subtitle.table_modified {
  color: #FF8080;
}
body[data-changed="1"] div.menu-main-img:hover > div.subtitle.table_modified {
  color: #FFC080;
}

html[dir="rtl"] div.menu-main-img > div.subtitle {
  left: unset;
  right: -3px;
}


/* Notice that filter: causes a box around the tag, so the menu will not work */
/* well with it. So the filer: is enetered here in a ::before to bypass it.   */
/* The rest of the elements in the ::before are for catching the full size.   */
div.gr-menu.future-sem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: hue-rotate(64deg);
  filter: hue-rotate(64deg);
}
div.gr-menu.past-sem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: hue-rotate(-64deg);
  filter: hue-rotate(-64deg);
}
div.gr-menu.devel-system::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-filter: hue-rotate(120deg);
  filter: hue-rotate(120deg);
}
.gr-wc-menu-site-changed-notice {
  display: none;
}
.gr-wc-menu-site-not-visible-notice {
  display: block;
}
body[data-changed="1"] .gr-wc-menu-site-changed-notice {
  display: block;
}
/*
body[data-changed="1"] .gr-wc-menu-site-not-visible-notice {
  display: none;
}
*/
div.gr-menu > div.future-semester-div,div.gr-menu > div.past-semester-div, .gr-wc-menu-site-changed-notice, .gr-wc-menu-site-not-visible-notice {
  float: right;
  padding: 10px;
  color: white;
}
html[dir="rtl"] div.gr-menu > div.future-semester-div, html[dir="rtl"] div.gr-menu > div.past-semester-div, html[dir="rtl"] .gr-wc-menu-site-changed-notice, html[dir="rtl"] .gr-wc-menu-site-not-visible-notice {
  float: left;
}

/* without the next rule, we get a yellow background on the menu on hover */
.gr-menu a:active, .gr-menu a:focus, .gr-menu a:hover {
  color: blue;
  background-color: transparent;
}

body[data-changed="1"] div.menu-main-img#generate:not(:hover) > img.menu-main-img, body[data-changed="1"] div.menu-main-img#generate:not(:hover) > a > img.menu-main-img {
  -webkit-filter: hue-rotate(115deg);
  filter:         hue-rotate(115deg);
}

div.menu-main-img:hover > img.menu-main-img, div.menu-main-img:hover > a > img.menu-main-img {
  height: 48px;
  margin: -4px;
  z-index: 1002;
  -webkit-filter: brightness(1.3) hue-rotate(300deg);
  filter:         brightness(1.3) hue-rotate(300deg);
}

/*
.develsystem {
  color: yellow;
  font-weight: bold;
  font-size: 14px;
}
*/

.grsystem {
  position: absolute;
  left: 290px;
  top: 4px;
  color: white;
  font-weight: bold;
  font-size: 14px;
}
html[dir="rtl"] .grsystem {
  right: 290px;
  left: unset;
}


/*
// Submenus:
*/

div.submenu {
  display: block;
  background-color: #0060f8;
  border: 1px solid #8FBFFC;
  border-radius: 9px;
  height: 25px;
  text-align: center;
  color: white;
  text-decoration: none;
  z-index: 1000;
  background: #00c9f9 url("/Images/menu/submenu_back.png") repeat-x;
  background-size: auto 25px;
}
div.submenu:hover {
  padding: 2.5px 2px;
  margin: -5px -2px;
  border-radius: 11px;
  background-size: auto 25px;
  -webkit-filter: brightness(1.3);
  filter:         brightness(1.3);
}

a.submenu:hover > div.submenu {
  /* border: 1px solid yellow; */
  color: yellow;
}

a.submenu {
  text-decoration: none;
  border: 0 none;
  outline: none;
  z-index: 1000;
}

span.submenu {
  display: inline-block;
  vertical-align: -4px;
  margin-left: 12px;
  margin-right: 12px;
  line-height: normal;
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

div.menu-submenu > img {
  vertical-align: bottom;
  bottom: 4px;
  position: relative;
  margin: 0 auto -13px auto;
  display: block;
  z-index: -1;
}

div.menu-main-img:hover > div.menu-submenu {
  visibility: visible;
  display: block;
}

div.menu-main-img > div.menu-submenu > a {
  display: block;
  border: none;
  margin: 0px 0px;
  padding: 0px 0px;
}
div.menu-main-img > div.menu-submenu > a:hover {
  margin: -2px 0px;
  padding: 3.5px 0px;
  
}

/* switch-others */

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

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);
}

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

img.switch-others-link:hover {
}

/* footer */

div.gr-footer {
  display: flex;
  flex-direction: row;
  font-family: Arial, Helvetica, sans-serif;
  direction: ltr;
  margin: 0px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 25px;
  background: url("/Images/Footer/footer_back.gif");
  z-index: 100;
  text-align: center;
}
html[dir="rtl"] div.gr-footer {
  direction: rtl;
  text-align: center;
}

div.gr-footer img {
  vertical-align: middle;
}
div.gr-footer div {
  padding: auto;
  margin: auto;
}

div.gr-footer td {
  text-align: center;
}

div.gr-footer .footer-time {
  text-align: left;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 0;
  flex-shrink: 0;
}

div.gr-footer .footer-tip {
  text-align: center;
  direction: rtl;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 2;
  flex-shrink: 1;
}

div.gr-footer .footer-helpdesk {
  text-align: center;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 1;
  flex-shrink: 0;
}

div.gr-footer .progress {
  text-align: right;
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  flex-grow: 0;
  flex-shrink: 0;
}
html[dir="rtl"] div.gr-footer .progress {
  text-align: left;
}

/* common - font sizes */

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

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

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

/* common - other */

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

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


/* Fountain css effect */

#fountainG {
  position: relative;
  width: 240px;
  height: 29px;
  margin: auto;
}

.fountainG {
  position: absolute;
  top: 0;
  background-color: red;
  width: 29px;
  height: 29px;
  animation-name: bounce_fountainG;
  -o-animation-name: bounce_fountainG;
  -ms-animation-name: bounce_fountainG;
  -webkit-animation-name: bounce_fountainG;
  -moz-animation-name: bounce_fountainG;
  animation-duration: 1.3s;
  -o-animation-duration: 1.3s;
  -ms-animation-duration: 1.3s;
  -webkit-animation-duration: 1.3s;
  -moz-animation-duration: 1.3s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  transform: scale(.3);
  -o-transform: scale(.3);
  -ms-transform: scale(.3);
  -webkit-transform: scale(.3);
  -moz-transform: scale(.3);
  border-radius: 19px;
  -o-border-radius: 19px;
  -ms-border-radius: 19px;
  -webkit-border-radius: 19px;
  -moz-border-radius: 19px;
}

#fountainG_1 {
  left: 0;
  animation-delay: 0.52s;
  -o-animation-delay: 0.52s;
  -ms-animation-delay: 0.52s;
  -webkit-animation-delay: 0.52s;
  -moz-animation-delay: 0.52s;
}

#fountainG_2 {
  left: 30px;
  animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
}

#fountainG_3 {
  left: 60px;
  animation-delay: 0.78s;
  -o-animation-delay: 0.78s;
  -ms-animation-delay: 0.78s;
  -webkit-animation-delay: 0.78s;
  -moz-animation-delay: 0.78s;
}

#fountainG_4 {
  left: 90px;
  animation-delay: 0.91s;
  -o-animation-delay: 0.91s;
  -ms-animation-delay: 0.91s;
  -webkit-animation-delay: 0.91s;
  -moz-animation-delay: 0.91s;
}

#fountainG_5 {
  left: 120px;
  animation-delay: 1.04s;
  -o-animation-delay: 1.04s;
  -ms-animation-delay: 1.04s;
  -webkit-animation-delay: 1.04s;
  -moz-animation-delay: 1.04s;
}

#fountainG_6 {
  left: 150px;
  animation-delay: 1.17s;
  -o-animation-delay: 1.17s;
  -ms-animation-delay: 1.17s;
  -webkit-animation-delay: 1.17s;
  -moz-animation-delay: 1.17s;
}

#fountainG_7 {
  left: 180px;
  animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  -ms-animation-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
}

#fountainG_8 {
  left: 210px;
  animation-delay: 1.43s;
  -o-animation-delay: 1.43s;
  -ms-animation-delay: 1.43s;
  -webkit-animation-delay: 1.43s;
  -moz-animation-delay: 1.43s;
}

@keyframes bounce_fountainG {
	0%{
	  transform: scale(1);
	  background-color: red;
	}

	100%{
	  transform: scale(.3);
	  background-color: white;
	}
}

@-o-keyframes bounce_fountainG {
	0%{
	  -o-transform: scale(1);
	  background-color: red;
	}

	100%{
	  -o-transform: scale(.3);
	  background-color: white;
	}
}

@-ms-keyframes bounce_fountainG {
	0%{
	  -ms-transform: scale(1);
	  background-color: red;
	}

	100%{
	  -ms-transform: scale(.3);
	  background-color: white;
	}
}

@-webkit-keyframes bounce_fountainG {
	0%{
	  -webkit-transform: scale(1);
	  background-color: red;
	}

	100%{
	  -webkit-transform: scale(.3);
	  background-color: white;
	}
}

@-moz-keyframes bounce_fountainG {
	0%{
	  -moz-transform: scale(1);
	  background-color: red;
	}

	100%{
	  -moz-transform: scale(.3);
	  background-color: white;
	}
}

/*
 * 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;
}

/* login page */

.gr-login img {
  display: block;
}

.gr-login a:hover {
  background-color: transparent;
}

body.gr-login {
  direction: ltr;
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  text-align: center;
  background-color: black;
}
html[dir="rtl"] body.gr-login {
  direction: rtl;
}
.gr-login h1 {
  color: white;
  text-align: center;
}
.gr-login .class12 {
  display: inline-block;
  padding: 54px 0 0 90px;
}
html[dir="rtl"] .gr-login .class12 {
  padding: 54px 90px 0 0;
}
.gr-login .class13 {
  display: inline-block;
  height: 284px;
  width: 800px;
  background: url("/Images/login-gr/login_padding.gif") repeat;
  text-align: left;
  vertical-align: top;
}
html[dir="rtl"] .gr-login .class13 {
  text-align: right;
}
.gr-login .class14 {
  display: inline-block;
  text-align: left;
  direction: ltr;
}
.gr-login .class15 {
  height: 19px;
  text-align: left;
}
.gr-login .class16 {
  text-align: left;
  vertical-align: top;
}
html[dir="rtl"] .gr-login .class16 {
  text-align: right;
}
.gr-login .class17 {
  height: 98%;
}
.gr-login .class18 {
  padding-bottom: 15px;
}
.gr-login .class19 {
  border: none;
  vertical-align: top;
}
.gr-login .class19img {
  display: inline-block;
  margin-top: 45px;
  vertical-align: top;
  float: left;
}
.gr-login .class20 {
    position: relative;
    left: 0px;
    top: 0px;
    border: none;
    width: 68px;
}
.gr-login .class21 {
    vertical-align: bottom;
    text-align: center;
}
.gr-login .gr-login-form {
    width: 100%;
    height: 100%;
    text-align: center;
}
.gr-login .main-div {
    width: 800px;
    display: inline-block;
}

.gr-login .yhlogo, .gr-login .cs-logo {
    text-align: center;
    display: inline-block;
}
.gr-login .gr-login-msg {
    text-align: right;
    direction: rtl;
}

.gr-login-faculty {
    color: white;
}

.gr-login .wclink-email, .gr-login .wclink-email:visited {
  color: white;  
}

/* 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%;
}

table.width70percent {
  width: 70%;
}

/* Error messages */

.error-message-external-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: yellow;
  background-color: white;
  opacity: 0.4;
  vertical-align: middle;
  padding: auto;
  margin: auto;
  z-index: 2001;
}

.error-message-internal-div {
  position: fixed;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  color: yellow;
  background-color: red;
  vertical-align: middle;
  padding: 20px;
  margin: auto;
  z-index: 2002;
  direction: ltr;
  text-align: left;
}

.error-message-buttons {
  text-align: center;
}
.error-message-close-button {
  display: inline-block;
  border: 1px solid black;
  padding: 1px 10px;
  margin: 50px 10px 20px 10px;
  border-radius: 15px;
  text-align: center;
  color: blue;
  background-color: white;
}
.error-message-close-button:hover {
  color: blue;
  background-color: yellow;
}


/* gr dean_report.cgi  */

.elec-submission-submitted-no-exam-date {
  background-color: green;
}

.elec-submission-submitted-on-time {
  background-color: green;
}

.elec-submission-submitted-late {
  background-color: red;
}

.elec-submission-no-registered-students {
}

.elec-submission-not-submitted-no-exam-date{
}

.elec-submission-before-exam {
}

.elec-submission-not-yet-late {
}

.elec-submission-almost-late {
  background-color: orange;
}

.elec-submission-already-late {
  background-color: red;
}



UL.wc-courses-list LI {
  float:left;
  padding-left: 5px;
  list-style-type: none;

}

/* 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;
}

/* Initial settings - change by javascript */
span.popup {
  display: none;
  position: absolute;
  visibility: hidden;
  z-index:100;
  border-radius: 1em;
  xxx-background-color: maroon;
  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 */

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