/* ========= IJIE COLOR PALETTE =========
   Primary brand: #000df0
   Action/button: #0057b8
   Action hover:  #003e85
   Light accent:  #e8eaff
   ====================================== */

body {
  font-family: Arial, Helvetica, sans-serif !important;
}

body {
  background: url("https://img.freepik.com/free-photo/white-paper-background_1154-683.jpg") !important;
}

#container {
  max-width: 1250px !important;
}

.block#issn {
  display: none !important;
}

.tocPages {
  text-align: right !important;
}

.tocTitle {
    text-align: left;
}

#issueCoverImage img {
  max-width: 225px !important;
  width: 35% !important;
  height: 35% !important
}

.issueCoverImage img {
  max-width: 225px !important;
}

/* ========= User Home and Login/Logout Buttons ========= */
#headerRight {
  z-index: 1 !important;
  position: absolute !important;
  right: 0 !important;
  margin-top: 10px !important;
  padding: 0 1.5em !important;
  float: right !important;
  text-align: right !important;
}

#headerRight a {
  display: inline-block !important;
  background-color: #ffffff !important;
  color: #000df0 !important; /* Warna utama */
  border: 1px solid #000df0  !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  margin-left: 10px !important;
  line-height: normal !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}


#headerRight a:hover,
#headerRight a:focus,
#headerRight a:active {
  background-color: #0057b8 !important;
  border-color: #0057b8 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ========= TOMBOL & TAUTAN AKSI ========= */
input.button,
input[type="submit"],
input[type="button"],
button,
a.action {
    background-color: #0057b8 !important;
    color: #ffffff !important;
    border: 1px solid #004a99 !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none !important;
    display: inline-block;
}

input.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
a.action:hover {
    background-color: #003e85 !important;
    border-color: #003e85 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

input.button:focus,
input.button:active,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:focus,
input[type="button"]:active,
button:focus,
button:active,
a.action:focus,
a.action:active {
    background-color: #003e85 !important;
    border-color: #003e85 !important;
    color: #ffffff !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 87, 184, 0.22);
}

/* ========= BLOK SAMPING / blockTitle ========= */
.blockTitle {
    background-color: #000df0;
    color: white;
    padding: 6px 12px;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 4px;
    margin-bottom: 6px;
}

/* ========= LINK ========= */
a {
    color: #0008b8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #000df0;
}

/* ========= TABEL ========= */
table {
    border-collapse: collapse;
}

table th {
    background-color: #000df0;
    color: #ffffff;
    padding: 8px;
    text-align: left;
}

table td {
    padding: 8px;
    border-bottom: 1px solid #cfd2ff;
}

/* ========= FORM FIELD ========= */
input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea, 
select {
    border: 1px solid #0008b8;
    border-radius: 4px;
    padding: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: #000df0;
    outline: none;
}

/* ========= HILANGKAN OUTLINE BIRU ========= */
a:focus,
input:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

/* ====== FOOTER CONTAINER ====== */
#standardFooter {
  background-color: #000df0 !important;
  color: #ffffff !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  padding: 20px 30px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 20px;
  font-size: 14px;
  line-height: 1.6;
}

/* ====== KOLOM-KOLOM FOOTER ====== */
#standardFooter #left,
#standardFooter #center,
#standardFooter #right {
  flex: 1 1 30%;
  min-width: 200px;
}

/* ====== INFO PUBLISHER IJIE (KOLOM KANAN) ====== */
#right * {
  display: none !important;
}

#right::before {
  content: "Informatics Education Department, Faculty of Teacher Training and Education";
  white-space: pre-wrap;
  display: inline;
  font-weight: bold;
  font-style: normal;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
}

#right::after {
  content: "\A Universitas Sebelas Maret, Surakarta, Indonesia";
  white-space: pre-wrap;
  display: inline;
  font-style: italic;
  font-weight: normal;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #ffffff;
  line-height: 1.6;
}

#right {
  padding: 0 !important;
  margin: 0 !important;
}

/* ====== LISENSI CC (KOLOM TENGAH) ====== */
#standardFooter #center .license-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#standardFooter #center .license-info img {
  margin-bottom: 8px;
  border: 0;
}

#standardFooter #center .license-info p {
  margin: 0;
}

#standardFooter #center .license-info a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-size: 14px;
}


/* ====== LOGO UNS (KOLOM KIRI) ====== */
#standardFooter #left img {
  height: auto !important;
  filter: brightness(0) invert(1) !important;
}

/* ====== TULISAN UMUM FOOTER ====== */
#standardFooter p,
#standardFooter font {
  color: #ffffff !important;
  margin: 0 0 6px 0;
}

/* ====== TAUTAN UMUM FOOTER ====== */
#standardFooter a {
  color: #ffffff !important;
  text-decoration: underline !important;
}

#standardFooter a:hover {
  color: #e7e8ff !important;
}

/* ====== GAMBAR LISENSI ====== */
#standardFooter img[alt="Creative Commons License"] {
  margin-top: 10px;
}

/* ====== RESPONSIF FOOTER ====== */
@media (max-width: 768px) {
  #standardFooter {
    flex-direction: column !important;
    text-align: left !important;
  }

  #standardFooter #left,
  #standardFooter #center,
  #standardFooter #right {
    flex: 1 1 100%;
  }

  #standardFooter #left img {
    margin-bottom: 15px;
  }
}

/* ========= QUICK-LINK SIDEBAR ========= */
#customblock-Quick-Link {
    margin: 0;
    padding: 0;
}

#customblock-Quick-Link .sidemenu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid #cfd2ff;
    border-radius: 4px;
    overflow: hidden;
}

#customblock-Quick-Link .sidemenu li {
    border-bottom: 1px solid #cfd2ff;
}

#customblock-Quick-Link .sidemenu li:last-child {
    border-bottom: none;
}

#customblock-Quick-Link .sidemenu li a,
#customblock-Quick-Link .sidemenu li a:visited {
    display: block;
    padding: 10px 15px;
    color: #0008b8 !important;
    background-color: #ffffff;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#customblock-Quick-Link .sidemenu li a:hover,
#customblock-Quick-Link .sidemenu li a:focus {
    background-color: #e8eaff;
    color: #0008b8 !important;
    text-decoration: none;
}

/* ========= LINK TAMBAHAN UNTUK a:visited ========= */
a:visited {
    color: #0008b8;
    text-decoration: none;
}

a:visited:hover {
    color: #000df0;
    text-decoration: underline;
}

/* ========= NAVIGASI UTAMA ========= */
#fullNav .navMenu li:hover {
  background-color: #0008b8;
  border-right: 2px solid #D1D3D5;
}

#fullNav {
    background-color: #000df0 !important;
    color: white !important;
    font-weight: bold;
}

#fullNav a {
    color: white !important;
}

#fullNav a:hover {
    color: #ffffff !important;
}


/* ========= TOMBOL FULLTEXT PDF ========= */
a.file,
a.file:visited {
  display: inline-block;
  background-color: #0057b8 !important;
  color: #ffffff !important;
  padding: 6px 12px !important;
  border: 1px solid #004a99 !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  font-size: 14px;
}

a.file:hover,
a.file:focus,
a.file:active {
  background-color: #003e85 !important;
  border-color: #003e85 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ========= Journal Info ========= */ .journal-info-wrapper { display: flex; width: 100%; align-items: center; gap: 20px; box-sizing: border-box; } .cover-container { display: flex; flex: 0 0 170px; width: 170px; align-items: center; justify-content: center; } .journal-cover { display: block; width: 160px; max-width: 100%; height: auto; max-height: 260px; object-fit: contain; } .journal-info-table { flex: 1 1 0; width: auto; min-width: 0; height: auto; background-color: #f0f0f0; border-collapse: collapse; } .journal-info-table td { padding: 8px 12px; vertical-align: top; border-bottom: 1px solid #d9d9d9; } .journal-info-table td:first-child { width: 25%; font-weight: bold; } .journal-info-table a { color: #0008b8; font-weight: bold; text-decoration: none; } .journal-info-table a:hover { text-decoration: underline; } /* Responsive fallback */ @media (max-width: 768px) { .journal-info-wrapper { flex-direction: column; align-items: center; gap: 15px; } .cover-container { width: 100%; flex: 0 0 auto; } .journal-cover { width: 160px; max-width: 100%; height: auto; max-height: none; } .journal-info-table { width: 100%; } }

/* ========= CONTENT MENU ITEMS AS BUTTONS =========
   The main navbar uses both .navMenu and .menu, so it is excluded here.
*/
ul.menu:not(.navMenu) li {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

ul.menu:not(.navMenu) li a,
ul.menu:not(.navMenu) li a:link,
ul.menu:not(.navMenu) li a:visited {
  display: inline-block !important;
  padding: 8px 16px !important;
  border: 1px solid #004a99 !important;
  border-radius: 4px !important;
  background-color: #0057b8 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  line-height: normal !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

ul.menu:not(.navMenu) li a:hover,
ul.menu:not(.navMenu) li a:focus,
ul.menu:not(.navMenu) li a:active {
  background-color: #003e85 !important;
  border-color: #003e85 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 87, 184, 0.22);
}

/* ========= COLORED-BACKGROUND LINK SAFEGUARDS ========= */
.blockTitle a,
.blockTitle a:link,
.blockTitle a:visited,
table th a,
table th a:link,
table th a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}

.blockTitle a:hover,
.blockTitle a:focus,
table th a:hover,
table th a:focus {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Preserve the primary blue navbar and white navbar text. */
#fullNav .navMenu li,
#fullNav .navMenu li a,
#fullNav .navMenu li a:link,
#fullNav .navMenu li a:visited {
  color: #ffffff !important;
}

#fullNav .navMenu li a:hover,
#fullNav .navMenu li a:focus,
#fullNav .navMenu li a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}