html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#c2d0eb,#36c1c9, #1e3a5b);
}

.box {
  position: absolute;
  top: 50%;
  right: 20%;
  width: 800px;
  height: 600px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(3, 2, 20, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
  overflow: hidden;
}


/* SORIEL portal image grid */
.image-grid {
  --grid-image: url("../images/portal-visual.svg");
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.grid-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  background-image: var(--grid-image);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition:
    filter 1s cubic-bezier(.22, 1, .36, 1),
    opacity 1s cubic-bezier(.22, 1, .36, 1),
    transform 1s cubic-bezier(.22, 1, .36, 1);
  will-change: filter, opacity, transform;
}


.grid-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 48%);
  pointer-events: none;
}

.is-empty {
  background-image: none;
  background-color: rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}


.is-soft {
  filter: blur(5px);
  opacity: 0.76;
  transform: scale(1.018);
}

.tile-01 { background-position: 0% 0%; }
.tile-02 { background-position: 33.333% 0%; }
.tile-03 { background-position: 66.666% 0%; }
.tile-04 { background-position: 100% 0%; }
.tile-05 { background-position: 0% 33.333%; }
.tile-06 { background-position: 33.333% 33.333%; }
.tile-07 { background-position: 66.666% 33.333%; }
.tile-08 { background-position: 100% 33.333%; }
.tile-09 { background-position: 0% 66.666%; }
.tile-10 { background-position: 33.333% 66.666%; }
.tile-11 { background-position: 66.666% 66.666%; }
.tile-12 { background-position: 100% 66.666%; }
.tile-13 { background-position: 0% 100%; }
.tile-14 { background-position: 33.333% 100%; }
.tile-15 { background-position: 66.666% 100%; }
.tile-16 { background-position: 100% 100%; }


.login-box {
  position: absolute;
  top: 50%;
  left: 80%;
  width: 500px;
  height: 600px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(3, 2, 20, 0.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.text {
  margin-top: 50px;
  font-size: 7px;
  color: #fff;
  text-align: center;
}

.brand {
  margin-top: 30px;
  font-size: 6px;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 20px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 60px;
  border: none;
  border-bottom: 2px solid #fff;
  outline: none;
  background: transparent;
  
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -10px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 20px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}


/* Responsive SORIEL portal login layout */
body{min-height:100vh;box-sizing:border-box;overflow-x:hidden;background:linear-gradient(145deg,#d9e7f6 0%,#5bafc4 48%,#243f61 100%);padding:76px 24px 28px}
.portal-login-shell{width:min(1180px,100%);min-height:min(600px,calc(100vh - 110px));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:20px;align-items:stretch}
.portal-login-shell .box,.portal-login-shell .login-box{position:relative;inset:auto;width:auto;height:auto;min-height:560px;padding:32px;transform:none;margin:0}
.portal-login-shell .box{order:1;background:rgba(3,2,20,.48)}.portal-login-shell .login-box{order:2;background:rgba(3,2,20,.54);display:flex;flex-direction:column;justify-content:center}
.portal-back{position:fixed;top:22px;left:24px;z-index:20;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(22,42,66,.24);backdrop-filter:blur(12px);color:#fff;text-decoration:none;font-size:.78rem;letter-spacing:.03em;transition:.25s}
.portal-back:hover{background:rgba(255,255,255,.18);transform:translateX(-2px)}
.login-box .user-box input{margin-bottom:42px;padding:17px 0}.login-box form a{margin-top:10px}.text{margin-top:38px}.brand{margin-top:20px}.image-grid{gap:9px}
@media(max-width:980px){body{padding:72px 18px 22px}.portal-login-shell{grid-template-columns:1fr 1fr;min-height:540px}.portal-login-shell .box,.portal-login-shell .login-box{min-height:520px;padding:26px}.login-box .user-box input{margin-bottom:34px}.text{margin-top:28px}}
@media(max-width:760px){body{padding:68px 14px 18px}.portal-login-shell{grid-template-columns:1fr;gap:14px}.portal-login-shell .login-box{order:1;min-height:auto;padding:30px 24px}.portal-login-shell .box{order:2;min-height:360px;height:42vh;max-height:430px;padding:18px}.portal-back{top:16px;left:14px}.login-box h2{margin-bottom:24px}.login-box .user-box input{margin-bottom:28px}.text{margin-top:24px}.brand{margin-top:14px}.image-grid{gap:7px}}
@media(max-width:430px){.portal-login-shell .login-box{padding:26px 20px}.portal-login-shell .box{min-height:310px;height:38vh;padding:14px}.portal-back span{display:none}.portal-back{width:38px;height:38px;padding:0;justify-content:center}.login-box .user-box input{font-size:15px}.login-box form a{font-size:14px;letter-spacing:3px}.text{font-size:6px}.brand{font-size:5px}}


/* Center portal panels in the viewport */
@media(min-width:761px){
  body{display:flex;align-items:center;justify-content:center;padding:58px 24px 24px;min-height:100vh}
  .portal-login-shell{margin:0 auto;min-height:0;height:min(600px,calc(100vh - 90px));align-items:stretch}
  .portal-login-shell .box,.portal-login-shell .login-box{min-height:0;height:100%}
}

/* SORIEL bilingual portal controls */
.portal-lang{
  position:fixed;top:22px;right:28px;z-index:20;
  border:1px solid rgba(255,255,255,.35);background:rgba(3,2,20,.28);
  color:#fff;border-radius:999px;padding:8px 11px;cursor:pointer;
  font:600 11px/1 sans-serif;letter-spacing:.05em;backdrop-filter:blur(10px);
}
.portal-lang .is-active{color:#03e9f4}
html[dir="rtl"] .portal-lang{right:auto;left:28px}
html[dir="rtl"] .portal-back{left:auto;right:28px}
html[dir="rtl"] .login-box{text-align:right}
html[dir="rtl"] .login-box .user-box label{left:auto;right:0}
html[dir="rtl"] .login-box .user-box input:focus ~ label,
html[dir="rtl"] .login-box .user-box input:valid ~ label{left:auto;right:0}
html[dir="rtl"] .login-box form>a{letter-spacing:0}
html[dir="rtl"] .login-label{display:inline-block}
@media(max-width:700px){
  .portal-lang{top:16px;right:16px}
  html[dir="rtl"] .portal-lang{right:auto;left:16px}
  html[dir="rtl"] .portal-back{right:16px}
}
.login-box a .login-label{position:relative;display:inline-block;width:auto;height:auto;background:none;animation:none;color:inherit}

/* Portal temporarily locked until authentication is connected */
.portal-lock-message{
  margin:18px 0 0;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.78);
  font-size:.72rem;
  line-height:1.75;
}
html[dir="rtl"] .portal-lock-message{text-align:right}