/* La stiloj de la publika retejo de Kursaro.
   Ĉi tiu dosiero anstataŭigas modern-normalize.css kaj wb_v1.css (de ekilio.com) kaj la malnovan css/style.css:
   ĝi enhavas nur la regulojn, kiujn la paĝoj uzas, kun la samaj valoroj, por ke la paĝoj aspektu same.
   La administrado (/Admin/) havas siajn proprajn stilojn (Admin/admin.css). */

/*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*, ::before, ::after { box-sizing: border-box; }
:root { -moz-tab-size: 4; tab-size: 4; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; }
hr { height: 0; color: inherit; }
abbr[title] { text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
::-moz-focus-inner { border-style: none; padding: 0; }
:-moz-focusring { outline: 1px dotted ButtonText; }
:-moz-ui-invalid { box-shadow: none; }
legend { padding: 0; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }

/* ================= Bazo ================= */
:root {
  --navbar-height: 45px;
  --navbar-item-padding: 30px;
  --color-grey-light: #f8f9fa;
  --color-grey-dark: #ced4da;
  --color-white: #ffffff;
  --main-width: 1500px;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  box-sizing: border-box;
  background-color: var(--color-grey-dark);
}
a { color: #0068d6; text-decoration: none; background-color: transparent; }
a:hover { text-decoration: underline; }
abbr.required { text-decoration: none; }
.main { display: flow-root; max-width: var(--main-width); margin-left: auto; margin-right: auto; background-color: var(--color-white); min-height: 100vh; }
img.responsive { max-width: 100%; height: auto; }
.centerparent { margin-left: auto; margin-right: auto; }

/* ================= Menuo (fiksita supre; js/kursaro.js kaŝas ĝin, dum oni rulumas malsupren) ================= */
.navbar { background-color: var(--color-grey-light); position: fixed; top: 0; width: 100%; max-width: var(--main-width); display: flex; border-bottom: 1px solid var(--color-grey-dark); z-index: 10; }
.navbar + * { margin-top: var(--navbar-height); }
.navbar a { color: black; text-decoration: none; }
.navbar-hamburger { display: none; cursor: pointer; }
.navbar-item, .navbar-hamburger, .navbar-dropdown-header { line-height: var(--navbar-height); padding-left: var(--navbar-item-padding); padding-right: var(--navbar-item-padding); background-color: var(--color-grey-light); }
.navbar-dropdown-header { cursor: pointer; }
.navbar-item:hover, .navbar-dropdown-header:hover { background: var(--color-grey-dark); }
.navbar-dropdown-items { display: none; position: absolute; top: var(--navbar-height); border: 1px solid var(--color-grey-dark); }
@media (hover: hover) {
  .navbar-dropdown:hover > .navbar-dropdown-items { display: flex; flex-direction: column; }
}
@media only screen and (max-width: 960px) {
  .navbar { flex-direction: column; }
  .navbar-hamburger:not(.clicked) ~ div { display: none; }
  .navbar-hamburger { display: block; font-size: 35px; }
  .navbar-dropdown-header.clicked + .navbar-dropdown-items { display: flex; flex-direction: column; }
  .navbar-dropdown-items { position: static; }
  .navbar-dropdown-items > .navbar-item { padding-left: calc(var(--navbar-item-padding) * 2); padding-right: 0; }
}

/* ================= La standardo ================= */
.header-text { position: absolute; left: 3%; font-weight: 600; top: 50%; transform: translateY(-50%); }
.header-text1, .header-text2, .header-text3 { display: block; }
.header-text1 { font-size: 30px; }
.header-text2 { font-size: 30px; margin-top: 13px; }
.header-text3 { font-size: 18px; margin-top: 20px; }
@media only screen and (max-width: 1000px) {
  .header-text1 { font-size: 23px; }
  .header-text2 { font-size: 23px; margin-top: 13px; }
  .header-text3 { font-size: 15px; margin-top: 15px; }
}
@media only screen and (max-width: 850px) {
  .header-text1 { font-size: 21px; }
  .header-text2 { font-size: 21px; margin-top: 13px; }
  .header-text3 { display: none; }
}
@media only screen and (max-width: 600px) {
  .header-text1 { font-size: 15px; }
  .header-text2 { font-size: 15px; margin-top: 10px; }
}
@media only screen and (max-width: 500px) {
  .header-text1 { font-size: 15px; }
  .header-text2 { font-size: 13px; margin-top: 10px; }
}

/* ================= Linioj kaj ĉeloj ================= */
.row-header { padding-left: 20px; padding-right: 20px; margin-bottom: 15px; }
.row-text { line-height: 1.7; padding-left: 20px; padding-right: 20px; margin-bottom: 20px; }
.row-flex { display: flex; margin-bottom: 20px; }
.row-flex.flex-center { justify-content: center; }
.cell { display: flex; flex-direction: column; }
.cell-header { min-height: 25px; }
.flex-grow-1 { flex-grow: 1; }
.iframe-16by9 { position: relative; padding-top: 56.25%; }
.iframe-16by9 > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ================= Formularoj ================= */
form { padding-top: 15px; padding-left: 15px; padding-right: 15px; background-color: var(--color-grey-light); border: 1px solid var(--color-grey-dark); border-radius: .25rem; }
.form-container { padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.cell label:not(.font-weight-normal) { font-weight: bold; }
.cell select { height: calc(2.25rem + 2px); }
.cell textarea { height: 100%; }
.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select, .cell-body button { padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; border-style: solid; border-width: 1px; border-radius: .25rem; outline: none; }
.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select { color: #495057; border-color: var(--color-grey-dark); }
.cell-body input:not([type="image"]), .cell-body textarea, .cell-body select:not(.fit-content) { width: 100%; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); border: 1px solid rgba(81, 203, 238, 1); }
.btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; }
.btn:hover { cursor: pointer; filter: brightness(1.2); }
.btn:disabled { border: 1px solid #999999; background-color: #cccccc; color: #666666; }
.btn:disabled:hover { cursor: default; filter: none; }
.color-primary, .color-primary a { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }

/* ================= Tabeloj ================= */
table { border-collapse: collapse; padding: .3rem; line-height: 1.5; table-layout: fixed; margin-left: auto; margin-right: auto; }
th, td { padding: .3rem; }
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-bordered td, .table-bordered th { border: 1px solid #dee2e6; }
.table-striped tr:nth-child(odd) { background-color: rgba(0, 0, 0, .05); }
.table-hover tbody tr:hover { background-color: var(--color-grey-dark); }
.table-hover tbody td:hover { filter: brightness(1.2); border-color: white; }

/* ================= Teksto ================= */
.h3 { font-size: 1.75rem; font-weight: 500; }
.h4 { font-size: 1.5rem; font-weight: 500; }
.h5 { font-size: 1.25rem; font-weight: 500; }
.h6 { font-size: 1rem; font-weight: 500; }
.text-small { font-size: 80%; }
.text-small-90 { font-size: 90%; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-bold { font-weight: bold; }
.text-italic { font-style: italic; }
.text-underline { text-decoration: underline; }
.text-highlight { background-color: #FFFF00; }
.text-color-primary { color: #0d6efd; }
.text-color-danger { color: #dc3545; }
.text-color-histo, .text-color-histo a { color: #848687; }

/* La koloroj de la kurstipoj (Kurstipo.Koloro) en la tabelo de la klasoj */
.color-success, .color-success a { color: #007bff; background-color: #c3e6cb; border-color: #c3e6cb; }
.color-warning, .color-warning a { color: #007bff; background-color: #ffeeba; border-color: #ffeeba; }
.color-info, .color-info a { color: #007bff; background-color: #bee5eb; border-color: #bee5eb; }
.color-danger, .color-danger a { color: #007bff; background-color: #f5c6cb; border-color: #f5c6cb; }

/* ================= Grandecoj kaj spacoj ================= */
.w-80 { width: 80px; }
.w-100 { width: 100px; }
.w-120 { width: 120px; }
.h-220 { height: 220px; }
.maxw-700 { max-width: 700px; }
.maxw-800 { max-width: 800px; }
.maxw-1000 { max-width: 1000px; }
.maxw-12p { max-width: 12%; }
.maxw-20p { max-width: 20%; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-60 { margin-bottom: 60px; }
.ml-30 { margin-left: 30px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }

/* ================= Telefono (ĝis 699 px) kaj komputilo (ekde 700 px) ================= */
@media only screen and (max-width: 699px) {
  .row-flex { flex-direction: column; }
  .row-flex.flex-center { flex-direction: row; }
  .row-flex.flex-center .cell:not(:last-child) { margin-right: 10px; }
  .cell:not(:last-child) { margin-bottom: 20px; }
  .form-container { max-width: 540px; }
  .ss-hide { display: none; }
}
@media only screen and (min-width: 700px) {
  .cell:not(:last-child) { margin-right: 10px; }
  .ls-flex-grow-1 { flex-grow: 1; }
  .ls-flex-1200 { flex-basis: 1200px; }
  .ls-maxw-500 { max-width: 500px; }
  .ls-maxw-650 { max-width: 650px; }
}
@media print {
  body { font-size: 9pt; filter: grayscale(100%); }
}

/* ================= Ikonoj (anstataŭ FontAwesome) ================= */
.ikono { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; fill: currentColor; overflow: visible; }
.ikono-sageto { width: .625em; }
.spinner { text-align: center; padding-top: 5px; padding-bottom: 5px; }
.spinner .ikono { width: 5em; height: 5em; animation: ikono-turni 2s linear infinite; }
@keyframes ikono-turni { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner .ikono { animation-duration: 6s; } }

/* ================= La tabelo de la klasoj (js/klasoj.js) ================= */
.klasolisto td { white-space: normal; position: relative; }
/* Sub la muso la tuta vico heliĝas, ne nur la ĉelo (memtaksiloj.html gardas la ĝeneralan regulon: unu ĉelo = unu ligilo) */
.klasolisto.table-hover tbody tr:hover td { filter: brightness(1.2); border-color: white; }
/* "Etendita ligilo": la ligilo de ĉiu ĉelo kovras la tutan ĉelon, ankaŭ kiam alia ĉelo de la vico havas du liniojn */
.klasolisto td > a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.klasolisto .nowrap { white-space: nowrap; }
.klasolisto .w-tempo { width: 175px; }
.klasolisto .tg-m { display: none; }
.atendo-ikono { width: 13px; height: 13px; vertical-align: -1px; margin-left: 5px; color: #5c636a; }
.atendo-ikono.atendo-komence { margin: 0 4px 0 0; }
select.tz-elekto { height: auto; width: auto; max-width: 170px; padding: 1px 2px; font-size: 13px; font-weight: normal; color: #000; border: 1px solid var(--color-grey-dark); border-radius: .2rem; background: #fff; }
.klasolisto select.tz-elekto { margin-top: 2px; }
.sxargo-teksto { margin: 0 0 5px; }
/* En komputilo: la titolo de ĉiu kurso sur unu linio (sub 900 px la tabelo superus la ekranon en kelkaj lingvoj) */
@media only screen and (min-width: 900px) {
  .klasolisto td:first-child { white-space: nowrap; }
}
/* Sub 900 px la kolumno de la instrulingvo malaperas, alie la tabelo superus la ekranon je kelkaj pikseloj */
@media only screen and (max-width: 899px) {
  .klasolisto .ms-hide { display: none; }
}
/* En telefono: mallongaj tagoj kaj iom pli malgranda teksto, por ke la tabelo ne superu la ekranon */
@media only screen and (max-width: 699px) {
  .klasolisto { font-size: 14px; }
  .klasolisto .tg-l { display: none; }
  .klasolisto .tg-m { display: inline; }
  .klasolisto select.tz-elekto { max-width: 88px; }
  .klasolisto th, .klasolisto td { padding: .3rem .2rem; }
}

/* ================= La aliĝpaĝo (js/class.js) ================= */
select.tz-elekto.kiam-tz { font-size: 15px; max-width: 100%; margin-left: 2px; vertical-align: 1px; }
/* La nomo kaj la foto de la instruisto: butono, kiu montras aŭ kaŝas la biografion */
.linkbtn { border: 0; background: none; padding: 0; font: inherit; line-height: inherit; color: #0068d6; text-align: left; cursor: pointer; }
.linkbtn:hover .instr-nomo, .linkbtn:focus-visible .instr-nomo { text-decoration: underline; }
.linkbtn:hover .instr-foto { border-color: #0068d6; }
.instr-foto { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin: -4px 6px 0 2px; border: 1px solid var(--color-grey-dark); }
.bio { display: flow-root; margin: 4px 0 0; padding: 8px 12px; background: #fff; border: 1px solid var(--color-grey-dark); border-radius: .25rem; line-height: 1.5; }
.bio-foto { float: left; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 2px 12px 6px 0; border: 1px solid var(--color-grey-dark); }
hr.apartigilo { width: 60%; }

/* ================= Turnstile (kontraŭ robotoj) ================= */
.turnstile-loko { display: flex; justify-content: center; min-height: 65px; }

/* ================= Kaŝita (lasta, por superi ĉiujn "display" supre, ekz. de .row-flex kaj .navbar) ================= */
.hide { display: none !important; }