*{ box-sizing:border-box; }
body{ margin:0; font-family: Open Sans; color:#0b0f14; background:#ffffff; }


.login{ background:#fff; }
.login-sec{
  background:#0e1724;
  position: relative;
}
.view-change{width:320px; height:100%; margin:0 auto;}
.brand-logo{width:320px; height:40px; margin:0 auto; position: relative; top:20px; background:url("/static/assets/d_logo_w.png"); background-repeat: no-repeat; background-size: 40%;}
.login-sec-pic{ background:url("/static/assets/login_bg.png"); background-repeat: no-repeat; background-size: 100% 100%; width:320px; height:240px; margin:30px auto 0;}

.login-wrap{ background:#fff; min-height: 54vh; padding-top:30px;}
.login-title{text-align:center; font-size: 36px; margin-top:0;}
.login-title span{ border-bottom: 3px solid #111; }

.login-form{ max-width: 460px; margin: 0 auto; display:flex; flex-direction:column; gap:16px; padding:0 20px;}

.input-wrap{
  display:flex; align-items:center; gap:12px;
  border: 1px solid #e7eaee;
  border-radius: 30px;
  padding: 14px 16px;
  box-shadow:0 2px 4px #0000001a inset, 0 0 0 #0000000f;
}
.input-icon{ width:17px; height:17px; text-align:center; background:url("/static/assets/user-icon.png"); background-repeat: no-repeat; background-size: 100% 100%; }
.input-wrap input{ border:0; outline:0; width:100%; font-size: 16px; background:none; }
.form-error{ color:#b00020; font-size: 14px; text-align:center; }

.btn-main{
  border:0; border-radius: 30px;
  padding: 16px 18px;
  font-size: 18px;
  background: #2fb335;
  color: #fff;
}

.alldomains-top{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: 14px 14px 8px;
}
.alldomains-welcome{ font-size: 16px; }
.btn-logout{
  border: 1px solid #d3d9e2;
  background:#fff;
  padding:6px 8px;
  border-radius:4px;
}


.scale-header{
  display:grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 10px;
  padding: 0 14px 6px;
  align-items:end;
}
.scale-group{ display:flex; flex-direction:column; gap:4px; }
.scale-title{
  font-size: 12px;
  color:#111;
  text-align:center;
}
.scale-numbers{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  color:#111;
  font-size: 12px;
  text-align:center;
  padding-right: 2px;
  font-weight:bold;
}


.alldomains{
  padding: 0 14px 30px;
  max-width: 740px;
  margin: 0 auto;
}
.section{ margin-top: 10px; }
.section-title{
  margin:0;
  font-size: 18px;
}
.card{
  background:#1f2a38;
  border-radius:6px;
  padding:5px;
}

.row{
  display:grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 10px;
  align-items:center;
  padding:5px 6px;
}
.row + .row{ border-top: 1px solid #ffffff0f; }

.row-left{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-right: 6px;
}
.row-label{
  color:#fff;
  font-size: 15px;
  line-height: 1.1;
}
.row-tag{
  background:#ffffff;
  color:#1b2430;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 6px;
}
.nv-btn{
  border: 0;
  background:#ffffff;
  color:#1b2430;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 6px;
  cursor: pointer;
}
.nv-btn:active{ transform: translateY(1px); }

.row.selected .row-label{ opacity: .55; }
.row.selected .nv-btn{ color:#ffffff; background:#787878; }

.row.selected .track{
  pointer-events: none; 
  opacity: .55;
}

.row.selected .track::after{
  content:"";
  position:absolute;
  inset:0;
  background:#000000; 
  opacity: 0.60;
}

.track{
  position: relative;
  height: 46px;
  background: #ffffff0a;
  overflow: hidden;
  touch-action: pan-y;
}
.grid-lines{
  position:absolute; inset: 0;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
}
.grid-lines span{ border-left: 2px solid #ffffff14; }
.grid-lines span:first-child{ border-left: 0; }


.circle{
  position:absolute;
  top: 50%;
  width:16px;
  height:16px;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 18px #00000059;
}
.circle-green{ background:#49b84a; }
.circle-blue{ background:#2f79ff; }

.hline{position:absolute; width:100%; height:1px; top:50%; background:#ffffff14;}

.legend{
  display:flex;
  gap: 14px;
  justify-content:center;
  align-items:center;
  margin: 16px 0 10px;
  color:#2b3642;
}
.legend-item{ display:flex; align-items:center; gap:8px; font-size: 13px; }
.legend-circle{
  width: 18px; height: 18px; border-radius: 30px; display:inline-block;
}
.legend-circle.green{ background:#49b84a; }
.legend-circle.blue{ background:#2f79ff; }
.legend-tag{
  background:#fff;
  border:1px solid #d9dfe8;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12px;
}

.btn-main{
  border:0; border-radius: 30px;
  padding: 16px 18px;
  font-size: 18px;
  background: #2fb335;
  color: #fff;
}
.btn-submit{ width:200px; display:block; margin:0 auto; border-radius:6px; }
.save-status{ text-align:center; color:#6b7785; font-size: 12px; margin-top: 8px; }