body
{
   background-color: #4F4F4F;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #00BFFF;
   text-decoration: underline;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
#wb_LayoutGrid10
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid10
{
   box-sizing: border-box;
   padding: 10px 10px 25px 10px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid10 > .row
{
   margin-right: -10px;
   margin-left: -10px;
}
#LayoutGrid10 > .row > .col-1, #LayoutGrid10 > .row > .col-2, #LayoutGrid10 > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 10px;
   padding-left: 10px;
   position: relative;
}
#LayoutGrid10 > .row > .col-1, #LayoutGrid10 > .row > .col-2, #LayoutGrid10 > .row > .col-3
{
   float: left;
}
#LayoutGrid10 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 8.33333333%;
   text-align: center;
}
#LayoutGrid10 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 83.33333333%;
   text-align: center;
}
#LayoutGrid10 > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 8.33333333%;
   text-align: left;
}
#LayoutGrid10:before,
#LayoutGrid10:after,
#LayoutGrid10 .row:before,
#LayoutGrid10 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid10:after,
#LayoutGrid10 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid10 > .row > .col-1, #LayoutGrid10 > .row > .col-2, #LayoutGrid10 > .row > .col-3
{
   float: none;
   width: 100% !important;
}
}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

@media (max-width:768px){
  #loginBox{margin-top:18px!important;}
}

/* Login card */
#loginBox{
  max-width:560px;
  margin:32px auto;
  padding:30px 28px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(180deg,rgba(18,18,18,0.62),rgba(12,12,12,0.48));
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  backdrop-filter:blur(8px);
  color:#fff;
  line-height:1.5;
}

/* Input + button same width */
#codeInput,#enterButton{
  width:200px;
  box-sizing:border-box;
}

/* Code entry */
#codeInput{
  padding:12px;
  font-size:16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.08);
  color:#fff;
  display:block;
  margin:14px auto 10px auto; /* centred */
  text-align:center;
  outline:none;
}
#codeInput::placeholder{color:rgba(255,255,255,0.70);}

/* Button */
#enterButton{
  padding:12px;
  font-size:16px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.22);
  cursor:pointer;
  background:rgba(255,255,255,0.14);
  color:#fff;
  display:block;
  margin:0 auto;
}
#enterButton:hover{background:rgba(255,255,255,0.18);}

/* Quick Start box */
#quickStart{
  max-width:1000px;
  margin:20px auto;
  padding:22px 24px;
  border-radius:14px;
  border:1px solid #d8d8d8;
  background:#eef3f8;
  color:#1c2a39;

  font-size:18px;
  line-height:1.65;

  display:none;
  opacity:1;
  transition:opacity .6s;
  position:relative;
}

/* Title */
#quickStartTitle{
  font-size:21px;
  font-weight:700;
  text-align:center;
  margin:0 0 10px 0;
}

/* Intro line */
#quickStartIntro{
  text-align:center;
  margin:0 0 12px 0;
}

/* Make examples readable: box centred, text left */
#quickStartExamples{
  display:inline-block;
  text-align:left;
  margin:0 auto;
  padding-left:0;
  list-style:none;
}
#quickStartExamples li{
  margin:8px 0;
  padding-left:22px;
  position:relative;
}
#quickStartExamples li:before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
}

/* Close button */
#quickStartClose{
  position:absolute;
  right:10px;
  top:10px;
  border:1px solid rgba(0,0,0,0.18);
  background:#ffffff;
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:14px;
}

/* Wrapper that centers the inline-block list */
#quickStartListWrap{
  text-align:center;
}