:root{
  --bg:#f4faf7;
  --card:#ffffff;
  --text:#163229;
  --muted:#5f7a6f;
  --line:#d5e6dc;
  --ok:#2e7d32;
  --danger:#b33a3a;
  --sidebar-left-width:260px;
  --sidebar-right-width:320px;
  --sidebar-gap:16px;
  --topbar-offset:60px;
  --sidebar-audio-reserve:360px;

  /* opsional: polishing */
  --panel:#edf7f1;
  --panel2:#f8fcfa;
  --radius:12px;
  --radius-sm:10px;
  --shadow:0 10px 24px rgba(28,139,142,.10);
  --focus:rgba(59,167,118,.24);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
}

/* links */
a{color:inherit}
a.btn{text-decoration:none}

/* topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  background:#ffffff;
  border-bottom:1px solid #d8e9df;
  box-shadow:0 1px 12px rgba(12,70,52,.08);
  position:sticky;
  top:0;
  z-index:10;
}
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  color:#163229;
}
.brand-logo{
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid #cfe4d9;
  background:#fff;
}
.nav a{
  margin-left:12px;
  text-decoration:none;
  color:#315d4c;
}
.nav a:hover{color:#1c8b8e}

/* layout container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:14px;
}
body.modal-open{
  overflow:hidden;
}
body.has-sidebars .container{
  max-width:none;
  width:100%;
  min-width:0;
  padding-left:calc(14px + var(--sidebar-left-width) + var(--sidebar-gap));
  padding-right:calc(14px + var(--sidebar-right-width) + var(--sidebar-gap));
  overflow-x:hidden;
}
body.has-left-sidebar .container{
  max-width:none;
  width:100%;
  padding-left:calc(14px + var(--sidebar-left-width) + var(--sidebar-gap));
  padding-right:14px;
}
body.embed-modal{
  background:transparent;
}
body.embed-modal .container{
  max-width:none;
  padding:10px;
}

/* header section used by new views */
.pageHead{
  margin:2px 0 12px;
}
.pageHead h1{
  font-size:22px;
  letter-spacing:.2px;
}
.pageHead p{
  max-width:70ch;
}

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow);
}

/* grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:260px 1fr 320px;gap:12px}
.sidebarCol{display:flex;flex-direction:column;gap:12px}
.dashboard-center{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  min-width:0;
}
.dashboard-center-with-sidebars{
  max-width:none;
  width:100%;
  margin:0;
  padding-left:0;
  padding-right:0;
  min-width:0;
}

/* settings layout */
.settingsLayout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:14px;
  align-items:start;
}
.settingsNav{
  position:sticky;
  top:12px;
  align-self:start;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  background:var(--panel2);
}
.settingsNavTitle{
  font-weight:700;
  margin:2px 2px 8px;
  color:var(--text);
}
.settingsNavLink{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  border:1px solid transparent;
}
.settingsNavLink:hover{
  background:rgba(59,167,118,.08);
  border-color:var(--line);
}
.settingsContent .settingsSection{
  scroll-margin-top:80px;
}

/* fixed sidebars */
.lab-sidebar{
  position:fixed;
  top:var(--topbar-offset);
  bottom:0;
  padding:12px;
  width:var(--sidebar-left-width);
  background:linear-gradient(180deg,#e8f5e8 0%, #e0f2f1 55%, #d8eeea 100%);
  color:var(--text);
  border-right:1px solid #cbe2d7;
  z-index:20;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.lab-sidebar-right{
  right:0;
  left:auto;
  width:var(--sidebar-right-width);
  border-right:none;
  border-left:1px solid #cbe2d7;
}
.lab-sidebar-left{left:0}
.lab-sidebar-inner{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-right:6px;
}
.lab-sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lab-sidebar-link{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  color:inherit;
}
.lab-sidebar-link:hover{
  background:rgba(59,167,118,.12);
  border-color:rgba(28,139,142,.28);
}
.lab-sidebar-link.active{
  background:rgba(59,167,118,.2);
  border-color:rgba(28,139,142,.4);
  font-weight:600;
}

.btnGroup{
  display:inline-flex;
  align-items:center;
}
.btnGroup .btn{
  border-radius:0;
}
.materialActionGroup .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  box-sizing:border-box;
  padding-top:0;
  padding-bottom:0;
}
.materialActionGroup .materialSwitchBtn{
  padding-left:12px;
  padding-right:12px;
  white-space:nowrap;
}
.materialActionGroup .materialRefreshBtn{
  min-width:38px;
  width:38px;
  padding:0;
  font-size:17px;
  line-height:1;
  font-weight:700;
}
.btnGroup .btn:first-child{
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
.btnGroup .btn:last-child{
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  margin-left:-1px;
}

/* settings modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(9,36,28,.42);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:16px;
}
.modal.open{display:flex;}
.modal-dialog{
  position:relative;
  width:min(1100px,96vw);
  height:min(90vh,820px);
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(10,63,49,.20);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal-preview{
  height:min(92vh,900px);
}
.modal-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 48px 10px 12px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.modal-title{
  font-weight:600;
}
.modal-close{
  position:absolute;
  top:10px;
  right:12px;
  background:rgba(59,167,118,.12);
  border:1px solid #b8d9c9;
  color:var(--text);
  border-radius:8px;
  width:34px;
  height:34px;
  font-size:20px;
  line-height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.modal-close:hover{
  background:rgba(59,167,118,.22);
}
.modal iframe{
  border:0;
  width:100%;
  height:100%;
  background:transparent;
}

.settingsTabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 12px;
}
.settingsTab{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
}
.settingsTab.active{
  background:var(--panel2);
  border-color:rgba(28,139,142,.35);
  font-weight:600;
}
.brandingPreview{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.brandingPreviewCard{
  flex:1;
  min-width:170px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  padding:10px;
}
.brandingPreviewTitle{
  font-size:12px;
  color:var(--muted);
  margin:0 0 8px;
}
.brandingPreviewImage{
  width:56px;
  height:56px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid var(--line);
  background:#fff;
}
.brandingPreviewImageSmall{
  width:32px;
  height:32px;
  border-radius:8px;
}
.brandingHint{
  margin:8px 0 0;
}

.fileTitle{
  font-weight:600;
  font-size:14px;
}
.mediaBlock{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mediaCover{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--line);
  background:#101515;
}
.docPreview{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--panel);
}
.docPreviewHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:rgba(59,167,118,.08);
}
.docPreviewHeader .fileTitle{
  flex:1;
  min-width:200px;
}
.docPreviewBody{
  padding:8px;
  background:rgba(28,139,142,.07);
}
.docFrame{
  width:100%;
  height:520px;
  border:0;
  background:#ffffff;
}
.docFrame.small{
  height:220px;
}
.docFrame.simple{
  height:480px;
}
.docSimple{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:var(--panel2);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.teacherTextItem + .teacherTextItem{
  margin-top:8px;
}
.lab-sidebar-head{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  border:1px solid #cce4d8;
}
.lab-sidebar-title{font-weight:700;letter-spacing:.2px}
.lab-sidebar-sub{font-size:12px;color:var(--muted)}
.lab-sidebar-user{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.74);
  border:1px solid #cce4d8;
}
.lab-sidebar-user .name{font-weight:700}
.lab-sidebar-user .meta{font-size:12px;color:var(--muted)}
.lab-sidebar-spacer{flex:1}
.lab-sidebar-audio{
  padding:10px;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  border:1px solid #cce4d8;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lab-sidebar-with-audio .lab-sidebar-audio{
  margin-top:12px;
  flex-shrink:0;
  z-index:3;
  box-shadow:0 8px 20px rgba(16,64,48,.12);
}
.lab-sidebar-audio-title{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.6px;
}
.lab-audio-sliders{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.lab-audio-slider-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.lab-audio-slider-head{
  margin:0;
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.lab-audio-slider-row input[type="range"]{
  width:100%;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.lab-audio-slider-row input[type="range"]:focus{
  box-shadow:none;
}
.lab-audio-group{
  display:flex;
  align-items:stretch;
}
.lab-audio-btn{
  flex:1;
  white-space:nowrap;
  padding:7px 10px;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.lab-audio-dd{
  position:relative;
  width:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:none;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  cursor:pointer;
}
.lab-audio-caret{
  font-size:12px;
  color:var(--muted);
}
.lab-audio-dd select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}
.lab-audio-status{
  font-size:12px;
  margin-bottom:6px;
}

@media (max-width: 1024px){
  body.has-sidebars .container{
    padding-left:12px;
    padding-right:12px;
  }
  body.has-left-sidebar .container{
    padding-left:12px;
    padding-right:12px;
  }
  .lab-sidebar{
    position:static;
    width:auto;
    height:auto;
    margin:0 0 12px 0;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--panel2);
  }
  .lab-sidebar-right{
    border-left:1px solid var(--line);
  }
  .lab-sidebar-inner{
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .lab-sidebar-spacer{display:none}
  .lab-sidebar-with-audio .lab-sidebar-audio{
    position:static;
    right:auto;
    bottom:auto;
    box-shadow:none;
  }
  .dashboard-center-with-sidebars{
    padding-left:0;
    padding-right:0;
  }
}

/* responsive */
@media (max-width: 980px){
  .grid3{grid-template-columns:1fr;}
  .grid2{grid-template-columns:1fr;}
  .settingsLayout{grid-template-columns:1fr;}
  .settingsNav{position:static;}
  .container{padding:12px}
  .topbar{padding:10px 12px}
}

/* utilities */
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap{gap:8px}

/* typography */
h1{margin:0 0 10px}
h2{margin:0 0 8px;font-size:16px}
label{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.tiny{font-size:12px;line-height:1.35}

/* form controls */
input,select,textarea{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
textarea{resize:vertical}
input::placeholder, textarea::placeholder{color:rgba(147,164,184,.65)}
input:focus, select:focus, textarea:focus{
  border-color:rgba(147,164,184,.55);
  box-shadow:0 0 0 3px var(--focus);
}

/* buttons */
button,.btn{
  font:inherit;
  line-height:1.2;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align:middle;
  user-select:none;
  transition:filter .12s ease, transform .04s ease, border-color .12s ease;
}
button:hover,.btn:hover{filter:brightness(1.12)}
button:active,.btn:active{transform:translateY(1px)}
button:disabled,.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  filter:none;
  transform:none;
}

/* focus for keyboard users */
button:focus-visible,.btn:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--focus);
}

/* variants */
button.ok, .btn.ok{
  background:rgba(29,127,77,.25);
  border-color:rgba(29,127,77,.55);
  color:#163229;
}
button.danger, .btn.danger{
  background:rgba(179,58,58,.22);
  border-color:rgba(179,58,58,.55);
  color:#4b1f1f;
}

/* separators */
hr{border:none;border-top:1px solid var(--line);margin:12px 0}

/* alerts */
.alert{
  padding:10px;
  border-radius:12px;
  margin:10px 0;
  border:1px solid var(--line);
}
.alert-error{background:rgba(179,58,58,.20)}
.alert-ok{background:rgba(29,127,77,.18)}

/* extra color helpers (opsional, dipakai di noscript message) */
.danger{color:#ffb4b4}
.ok{color:#8fe0b5}

/* participant grid */
.gridCards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;
}
.pcard{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px;
  background:var(--panel);
  min-width:0;
}
.pcard .top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
}
.participantMeta{
  min-width:0;
}
.participantDevice{
  margin-bottom:6px;
  font-weight:700;
  line-height:1.25;
  word-break:break-word;
}
.participantIdentity,
.participantState{
  margin-top:4px;
  max-width:100%;
  overflow-wrap:anywhere;
}
.participantPresence{
  margin-top:8px;
  max-width:100%;
  overflow-wrap:anywhere;
  line-height:1.35;
}
.participantActions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.participantPrimaryActions,
.participantQuickActions{
  justify-content:flex-end;
  align-items:center;
}
.participantPrimaryActions button,
.participantQuickActions button{
  width:42px;
  min-width:42px;
  height:36px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.participantPrimaryActions .btnMic,
.participantPrimaryActions .btnSpk{
  font-size:15px;
}
.participantIconBtn{
  font-size:17px;
}

/* badges */
.badge{
  font-size:12px;
  color:var(--muted);
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(147,164,184,.25);
  background:rgba(255,255,255,.03);
}
.badge.online{color:#8fe0b5;border-color:rgba(143,224,181,.35)}
.badge.offline{color:#ffb4b4;border-color:rgba(255,180,180,.35)}
.badge.ok{color:#8fe0b5;border-color:rgba(143,224,181,.35);background:rgba(29,127,77,.14)}
.badge.danger{color:#ffb4b4;border-color:rgba(255,180,180,.35);background:rgba(179,58,58,.12)}

/* chat */
.chatLog{
  height:260px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  background:var(--panel2);
  margin:8px 0;
}
.msg{margin:8px 0;padding-bottom:8px;border-bottom:1px solid rgba(30,42,59,.55)}
.msg:last-child{border-bottom:none;padding-bottom:0}
.msg .meta{font-size:12px;color:var(--muted)}
.msg .meta.emphasis{font-weight:700}
.msg .meta.danger{color:#ef4444}
.msg .body{white-space:pre-wrap}
.msg .body.emphasis{font-weight:700}
.msg .body.danger{color:#ef4444}

/* materials */
.materialBox,.materialViewer{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:var(--panel2);
  min-height:84px;
}
.materialPreviewCard,.materialManageCard{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:var(--panel);
}
.materialText{
  border:1px dashed rgba(255,255,255,.2);
  border-radius:10px;
  padding:8px;
  white-space:pre-wrap;
  background:rgba(255,255,255,.03);
}
.materialFileName{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.materialList{
  list-style:none;
  padding:0;
  margin:6px 0 0;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.materialItem{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-bottom:1px solid var(--line);
  cursor:move;
}
.materialItem:last-child{border-bottom:none}
.materialItem.active{
  background:rgba(125,178,255,.16);
  color:var(--text);
  font-weight:600;
}
.materialItem.active .muted{color:var(--text)}
.materialItem .label{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.35;
}
.materialItem.dragging{opacity:.6}
.materialList.sortable{user-select:none}
button.tiny,.btn.tiny{
  padding:4px 8px;
  font-size:12px;
}
.iconBtn{
  min-width:32px;
  width:32px;
  padding:4px 0 !important;
  font-size:14px !important;
  font-weight:700;
  line-height:1;
  text-align:center;
}
.materialActionBtn{
  justify-self:end;
}
.mediaLocked{pointer-events:none}
.mediaUnlock{
  margin-top:8px;
  padding:8px;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}

/* broadcast */
.broadcastBox{
  border:1px dashed rgba(255,255,255,.25);
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,.04);
  min-height:66px;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.teacherTextActive{
  color:#2563eb;
  font-weight:700;
}

/* lists */
.list{list-style:none;padding:0;margin:0}
.list li{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
}
.list li:last-child{border-bottom:none}

/* centered column */
.centerCol{display:flex;flex-direction:column;align-items:center;gap:8px}

/* tables */
.tableWrap{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  border-bottom:1px solid var(--line);
  padding:8px;
  text-align:left;
  font-size:13px;
}
.table th{color:var(--muted);font-weight:700}

/* WEBRTC audio */
.audioEl{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.audioIndicator{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.audioIndicator .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--muted);
  box-shadow:0 0 0 2px rgba(147,164,184,.18);
}
.audioIndicator.active{color:var(--text)}
.audioIndicator.active .dot{
  background:var(--ok);
  box-shadow:0 0 0 2px rgba(29,127,77,.22);
}
.audioIndicator.off{color:var(--danger)}
.audioIndicator.off .dot{
  background:var(--danger);
  box-shadow:0 0 0 2px rgba(179,58,58,.22);
}
.callBar{margin:8px 0}

/* small polish for audio/video elements */
audio,video{
  border-radius:12px;
  outline:none;
}

/* choose role page */
.auth-choose{
  max-width:960px;
  margin:32px auto;
  padding:24px 16px;
  background:#e8f5e8;
  border:1px solid #cfe6d8;
  border-radius:16px;
  color:#163229;
}
.auth-hidden-title{
  display:none;
}
.auth-grid{
  display:grid;
  gap:36px;
  align-items:stretch;
}
@media(min-width:900px){
  .auth-grid{
    grid-template-columns:1fr 1fr;
    max-width:800px;
    margin:32px auto;
  }
}
.auth-choose .auth-card{
  padding:32px 26px;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(28,139,142,.10);
  text-align:left;
  min-width:0;
  background:#ffffff;
  border:1px solid #d4e8dd;
  display:flex;
  flex-direction:column;
}
.auth-avatar{
  width:112px;
  height:112px;
  border-radius:0;
  border:none;
  background:transparent;
  display:flex;
  margin:0 auto 14px;
  align-items:center;
  justify-content:center;
}
.auth-avatar-admin{
  border:none;
  background:transparent;
}
.auth-avatar svg{
  display:block;
  margin:auto;
}
.auth-avatar-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.auth-title{
  text-align:center;
  font-size:20px;
  margin:6px 0 18px;
  font-weight:700;
  color:#163229;
}
.auth-choose .form-row{
  margin-bottom:14px;
}
.auth-choose .auth-login-form{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.auth-choose .auth-form-box{
  border:1px solid #d7e8de;
  background:#f7fbf9;
  border-radius:12px;
  padding:14px 14px 10px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.auth-choose .auth-form-actions{
  margin-top:auto;
  padding-top:16px;
  text-align:center;
}
.auth-choose .form-row label{
  display:block;
  font-size:13px;
  color:#2e7d32;
  margin-bottom:6px;
}
.auth-choose .form-input{
  width:100%;
  padding:14px 16px;
  border:1px solid #cfe4d9;
  border-radius:10px;
  background:#ffffff;
  color:#163229;
  box-sizing:border-box;
}
.auth-choose .muted.tiny{
  font-size:12px;
  color:#5d6a64;
  margin-top:6px;
}
.auth-choose .btn-green{
  display:block;
  margin:0 auto;
  background:#3ba776;
  color:#113126;
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
}
.auth-choose .auth-form-actions .btn-green{
  margin:0 auto;
}
.auth-choose .hint-muted{
  text-align:center;
  color:#5f7a6f;
  font-size:13px;
  margin-top:10px;
}
.auth-choose .auth-form-box .hint-muted{
  margin-top:auto;
  padding-top:10px;
}