body {
  background     : #164054;
  color          : var(--default-white);
  font-family    : "Siemreap", Arial, sans-serif;
  margin         : 0;
  min-height     : 100vh;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
}

.logo img {
  box-shadow   : 0 8px 32px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  background   : var(--default-white);
  padding      : 16px;
  height       : 140px;
  max-width    : 90vw;
}

.error-code {
  font-size      : 5rem;
  font-weight    : bold;
  margin-bottom  : 8px;
  letter-spacing : 2px;
  color          : var(--default-white);
  text-shadow    : 0 4px 24px #164054, 0 1px 0 var(--default-white), 0 0px 16px #0ff;
  position       : relative;
  animation      : bounceIn 1s;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 12px;
}

.error-message {
  font-size    : 1.3rem;
  margin-bottom: 5px;
}

.error-message-kh {
  font-family  : "Siemreap", serif;
  font-size    : 25px;
  margin-bottom: 10px;
}

.error-message-kh-sm {
  font-family  : "Siemreap", serif;
  font-size    : 18px;
  margin-bottom: 8px;
}

.home-link {
  display   : inline-block;
  margin-top: 20px;
  padding   : 8px 36px;
  background: linear-gradient(#164054, #164054) padding-box,
    linear-gradient(120deg,
      #ffb300 10%,
      var(--default-white) 40%,
      #164054 60%,
      #ffb300 90%) border-box;
  color          : #ffb300;
  border         : 4px solid transparent;
  border-radius  : 24px;
  outline        : none;
  text-decoration: none;
  font-size      : 1.05rem;
  font-family    : "Roboto", "Siemreap", Arial, sans-serif;
  letter-spacing : 0.2px;
  min-width      : 320px;
  text-align     : center;
  box-shadow     : 0 2px 8px rgba(22, 64, 84, 0.07);
  position       : relative;
  z-index        : 1;
box-sizing     : border-box;
  overflow       : hidden;
  font-weight    : 600;
}

.home-link::before {
  content       : "";
  position      : absolute;
  top           : -4px;
  left          : -4px;
  right         : -4px;
  bottom        : -4px;
  border-radius : 28px;
  z-index       : 0;
  pointer-events: none;
  background    : conic-gradient(from var(--angle, 0deg),
      #ffb300 0deg 30deg,
      var(--default-white) 30deg 60deg,
      #164054 60deg 360deg);
  padding  : 0;
  opacity  : 0.9;
  animation: borderLightSpin 2s linear infinite;
  -webkit-mask: linear-gradient(var(--default-white) 0 0) content-box,
    linear-gradient(var(--default-white) 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite        : exclude;
  mask                  : linear-gradient(var(--default-white) 0 0) content-box,
    linear-gradient(var(--default-white) 0 0) border-box;
  border    : 4px solid transparent;
  box-sizing: border-box;
}

.home-link>* {
  position: relative;
  z-index : 1;
}

.error-message,
.error-message-kh {
  text-align: center;
}

.home-link span {
  display    : block;
  font-size  : 1rem;
  font-family: "Siemreap", Arial, sans-serif;
  margin-top : 2px;
}

.panel-404 {
  background     : rgba(255, 255, 255, 0.08);
  border-radius  : 32px;
  box-shadow     : 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(22, 64, 84, 0.1);
  padding        : 0;
  max-width      : 600px;
  width          : 99vw;
  margin         : 32px auto 80px auto;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  border         : 1.5px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(2px);
  overflow       : hidden;
}

.panel-header {
  width          : 100%;
  background     : rgba(22, 64, 84, 0.12);
  display        : flex;
  justify-content: center;
  align-items    : center;
  padding        : 32px 0 16px 0;
}

.panel-content {
  width         : 100%;
  padding       : 20px 20px 15px 20px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
}

.panel-footer {
  width     : 100%;
  background: rgba(22, 64, 84, 0.12);
  padding   : 0;
  margin    : 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bot-fixed {
  position  : fixed;
  left      : 0;
  bottom    : 0;
  width     : 100vw;
  background: #164054;
  z-index   : 100;
  margin    : 0;
  padding   : 8px 0;
  text-align: center;
  border-top: 2px solid #ffb300;
}

.footer-bot-fixed .container,
.footer-bot-fixed .row,
.footer-bot-fixed .col-md-12 {
  width     : 100%;
  text-align: center;
  margin    : 0;
  padding   : 0;
}

.footer-bot-fixed .text-white {
  color     : var(--default-white) !important;
  font-size : 1rem;
  text-align: center;
}

@media (max-width: 600px) {
  .logo img {
    height: 80px;
  }
}

@media (max-width: 600px) {
  .error-code {
    font-size: 2.5rem;
  }
}

@media (max-width: 600px) {
  .error-message {
    font-size: 1.2rem;
  }
}

@media (max-width: 600px) {
  .error-message-kh {
    font-size: 1rem;
  }
}

@media (max-width: 600px) {
  .panel-404 {
    max-width: 99vw;
    margin   : 8px auto 80px auto;
    padding  : 8px 2px 10px 2px;
  }
}

@media (max-width: 600px) {
  .error-code .exclam {
    font-size: 1.5rem;
  }
}

@media (max-width: 600px) {
  .panel-content {
    padding: 12px 4px 8px 4px;
  }
}

@media (max-width: 600px) {
  .footer-bot-fixed .text-white {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .home-link {
    min-width: 0;
    width    : 100%;
    font-size: 0.98rem;
    padding  : 8px 8px;
  }
}

.panel-cover-top {
  width : 100%;
  height: 18px;
  background: linear-gradient(90deg,
      #164054 0%,
      #ffb300 60%,
      var(--default-white) 100%);
  border-top-left-radius : 32px;
  border-top-right-radius: 32px;
}

.panel-cover-bottom {
  width : 100%;
  height: 18px;
  background: linear-gradient(90deg,
      #ffb300 0%,
      #164054 60%,
      var(--default-white) 100%);
  border-bottom-left-radius : 32px;
  border-bottom-right-radius: 32px;
  margin-top                : 16px;
}

.error-sub-message {
  margin-top: 20px;
  color     : #ccc;
}

.b-home {
  color          : var(--default-white);
  text-decoration: none;
}

#rl-countdown {
  text-align: center;
}

#retryClock {
  font-size: 30px;
  color    : #ffc107;
}