:root {
  --000000: black;
  --555555: #555;
  --00a7d5: #00a7d5;
  --f2f2f2: #f2f2f2;
  --0db8e7: #0db8e7;
  --ffffff: white;
  --e3f9ff: #e3f9ff;
  --666666: #666;
  --333333: #333;
  --28c3ed: #28c3ed;
  --999999: #999;
  --cccccc: #ccc;
  --f9fafb: #f9fafb;
  --777777: #777;
  --eeeeee: #eee;
  --ff5a5a: #ff5a5a;
  --fef0f0: #fef0f0;
  --06c12d: #06c12d;
  --222222: #222;
  --444444: #444;
  --888888: #888;
  --dddddd: #ddd;
  --e9fbed: #e9fbed;
  --ffa115: #ffa115;
  --ffddab: #ffddab;
  --fff8ed: #fff8ed;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

h1 {
  color: var(--000000);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.3;
}

h2 {
  color: var(--000000);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.3;
}

p {
  color: var(--555555);
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.6;
}

a {
  color: var(--000000);
  text-decoration: none;
  -webkit-text-decoration-color: var(--000000);
  text-decoration-color: var(--000000);
}

a:hover {
  color: var(--00a7d5);
}

.navbar {
  z-index: 999;
  border-bottom: 1px solid var(--f2f2f2);
  background-color: #fff;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  height: 68px;
  display: flex;
  position: sticky;
  inset: 0% 0% auto;
}

.toplogo {
  width: 40px;
  height: 34px;
}

.navs {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row-reverse;
  align-items: center;
  display: flex;
}

.navcontent {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1240px;
  height: 68px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.user-popup {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 228px;
  display: none;
  position: absolute;
  inset: 60px 20px auto auto;
  box-shadow: 0 0 12px #0000001a;
}

.more-navi {
  color: #333;
  justify-content: flex-start;
  align-items: center;
  height: 36px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  display: flex;
}

.more-navi:hover {
  background-color: #f2f2f2;
}

.mainbtn {
  background-color: var(--0db8e7);
  text-align: center;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 400;
}

.mainbtn:hover {
  color: var(--ffffff);
}

.mainbtn.btnhero {
  margin-top: 24px;
}

.navcontainer {
  border-bottom: 1px solid var(--f2f2f2);
  width: 100%;
  max-width: 100%;
  height: 68px;
  position: sticky;
  top: 0;
}

.thirdbtn {
  border: 1px solid var(--00a7d5);
  background-color: var(--e3f9ff);
  color: var(--00a7d5);
  cursor: pointer;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

.herocontainer {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1240px;
  padding: 80px 20px 48px;
  display: flex;
}

.herocontent {
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  font-size: 20px;
}

.stepscontainer {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 1240px;
  padding: 80px 20px 100px;
  display: flex;
}

.stepsimg {
  border-radius: 12px;
  flex-flow: column;
  align-items: center;
  max-width: 560px;
  overflow: clip;
}

.stepscontent {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.stepsitem {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--666666);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 16px;
  display: flex;
}

.stepstop {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--333333);
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.featurescontainer {
  max-width: 1240px;
  padding-bottom: 36px;
  padding-left: 20px;
  padding-right: 20px;
}

.grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.featureitem {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border: 1px solid var(--f2f2f2);
  background-color: #fff;
  border-radius: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  font-size: 20px;
  font-weight: 500;
  transition: margin .2s;
  display: flex;
}

.featureitem:hover {
  border-color: var(--28c3ed);
  background-color: var(--e3f9ff);
  color: var(--00a7d5);
  margin-top: -12px;
  margin-bottom: -12px;
  box-shadow: 0 0 12px #0000001a;
}

.datadrivencontainer {
  background-color: var(--e3f9ff);
  border-radius: 12px;
  flex-flow: column;
  align-items: center;
  max-width: 1200px;
  padding: 64px 36px;
  display: flex;
}

.dataimg {
  flex-flow: column;
  align-items: center;
  max-width: 520px;
  margin-top: 64px;
}

.datacontent {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 32px;
  margin-bottom: 32px;
  display: flex;
}

.dataitem {
  background-color: var(--ffffff);
  text-align: center;
  border-radius: 6px;
  padding: 12px 32px;
  font-size: 20px;
  font-weight: 700;
}

.container {
  border-top: 1px solid var(--f2f2f2);
  color: var(--999999);
  flex-flow: column;
  align-items: center;
  max-width: 1200px;
  margin-top: 80px;
  padding-top: 36px;
  padding-bottom: 36px;
  font-size: 12px;
  display: flex;
}

.menubtn {
  display: none;
}

.featureicon {
  max-width: 48px;
}

.t-user-popup {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 228px;
  display: none;
  position: absolute;
  inset: 60px 20px auto auto;
  box-shadow: 0 0 12px #0000001a;
}

.t-profilepic {
  border: 1px solid #eee;
  border-radius: 100px;
  width: 36px;
  height: 36px;
}

.t-user-info {
  color: #000;
  padding: 16px;
  font-weight: 700;
}

.t-navcontent {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 68px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.t-toplogo {
  width: 40px;
  height: 34px;
}

.t-navcontainer {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  max-width: 100%;
  height: 68px;
  position: sticky;
  top: 0;
}

.t-navbar {
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 68px;
  display: flex;
  position: sticky;
  inset: 0% 0% auto;
}

.t-user-status {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #999;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.t-image {
  border-radius: 100px;
}

.t-more-navi {
  color: #333;
  justify-content: flex-start;
  align-items: center;
  height: 36px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  display: flex;
}

.t-more-navi:hover {
  background-color: #f2f2f2;
}

.t-maintopcontainer {
  flex-flow: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 36px;
  margin-top: 24px;
  display: flex;
}

.t-maintopfunction {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 36px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.t-stepitem {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: stretch;
  width: 100%;
  display: flex;
}

.t-mainbtn {
  text-align: center;
  background-color: #0db8e7;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 400;
}

.t-mainbtn:hover {
  color: #fff;
}

.t-formbtns {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  margin-top: 24px;
  display: flex;
}

.t-sectionforml {
  width: 50%;
}

.t-field-label {
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

.t-content {
  width: 100%;
  min-width: 680px;
  margin-bottom: 48px;
}

.t-select-field {
  color: #000;
  min-width: 328px;
  margin-bottom: 12px;
  font-size: 14px;
}

.t-stepwrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.t-sectionform {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 16px;
  display: flex;
}

.t-stepbarblue {
  background-color: #00a7d5;
  border-radius: 100px;
  height: 6px;
}

.t-maincontentwraper {
  width: 100%;
  min-width: 680px;
  max-width: 880px;
  margin-left: 32px;
  margin-right: 32px;
  padding-top: 32px;
  display: flex;
}

.t-stepbargrey {
  background-color: #eee;
  border-radius: 100px;
  height: 6px;
}

.t-sectiontitle24 {
  color: #000;
  font-size: 24px;
  font-weight: 600;
}

.t-settingtopl {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #999;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.t-stepcontent {
  text-align: left;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 48px;
}

.t-settingtoparea {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-stepitemtypebold {
  color: #000;
  font-weight: 500;
}

.t-stepitemtype {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: #666;
  align-items: center;
  font-size: 15px;
  display: flex;
}

.t-maincontainer {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1420px;
  display: flex;
}

.t-thirdbtn {
  color: #00a7d5;
  cursor: pointer;
  background-color: #e3f9ff;
  border: 1px solid #00a7d5;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

.t-text-field {
  color: #000;
  min-width: 328px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}

.t-sectionformr {
  width: 50%;
}

.t-interviewsetup {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 24px;
  display: flex;
}

.t-aistatus {
  color: #00a7d5;
  text-underline-offset: 3px;
  margin-top: 12px;
  font-weight: 500;
  text-decoration: underline;
}

.t-videowrapper {
  width: 100%;
}

.t-sectiontitle28 {
  color: #000;
  font-size: 28px;
  font-weight: 600;
}

.t-bluenumber {
  color: #00a7d5;
  font-size: 18px;
  font-weight: 500;
}

.t-btnarea {
  margin-top: 36px;
}

.t-preptopinfo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-prepinfol {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #666;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.t-image-2 {
  border-radius: 4px;
}

.t-fullmaskblack {
  background-color: #222;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.t-interviewing {
  width: 80%;
}

.t-interviewingfunction {
  color: #ccc;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  margin-top: 24px;
  display: flex;
}

.t-redbtn {
  color: #fff;
  text-align: center;
  background-color: #ff5a5a;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 400;
}

.t-redbtn:hover {
  color: #fff;
}

.t-inteviewtopinfo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-interview {
  border-top: 1px solid #f2f2f2;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

.t-interview:hover {
  opacity: .7;
}

.t-topinfor {
  color: #666;
  font-size: 12px;
}

.t-interviewtypeinfo {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: #333;
  display: flex;
}

.t-greystatus {
  color: #666;
  text-align: center;
  background-color: #f2f2f2;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.t-titletext {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}

.t-interviewitems {
  margin-top: 24px;
}

.t-sidetabs {
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 208px;
  margin-top: 12px;
  display: flex;
}

.t-companylogo {
  border: 1px solid #eee;
  border-radius: 4px;
  width: 48px;
  height: 48px;
}

.t-redstatus {
  color: #ff5a5a;
  text-align: center;
  background-color: #fef0f0;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.t-topinfol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.t-interviewotherinfo {
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  display: flex;
}

.t-topfunctions {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-greenstatus {
  color: #06c12d;
  text-align: center;
  background-color: #e9fbed;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.t-otherinfol {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.t-newsnumber {
  color: #fff;
  background-color: #ff5a5a;
  border-radius: 100px;
  flex-flow: row-reverse;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.t-sidewrapper {
  border-right: 1px solid #f2f2f2;
  width: 100%;
  max-width: 208px;
  height: 100vh;
  position: fixed;
}

.t-tabitem {
  align-items: center;
  width: 100%;
  height: 56px;
  padding-left: 20px;
  font-size: 15px;
  display: flex;
}

.t-statusarea {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row-reverse;
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.t-tabl {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  width: 100%;
  height: 28px;
  display: flex;
}

.t-tabl.w--current {
  color: #00a7d5;
  border-right: 4px solid #00a7d5;
  font-weight: 700;
}

.t-companymaininfo {
  color: #666;
  font-size: 15px;
}

.t-contentcontainer {
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
  max-width: 1212px;
  margin-left: 208px;
  display: flex;
}

.t-companyinfo {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #999;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.t-secbtn {
  color: #666;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 400;
}

.t-popuptitle {
  color: #000;
  font-size: 24px;
  font-weight: 500;
}

.t-maskclose {
  position: absolute;
  inset: 36px 36px auto auto;
}

.t-fullmask {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  display: flex;
}

.t-popupcontent {
  margin-top: 24px;
}

.t-popupcontainer {
  flex-flow: column;
  align-self: auto;
  align-items: flex-start;
  display: flex;
}

.t-topfunctionr {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.t-jdsection {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 36px;
  margin-bottom: -24px;
  display: flex;
}

.t-sectiontitle20 {
  color: #000;
  font-size: 20px;
  font-weight: 600;
}

.t-jdarea {
  border-top: 1px solid #eee;
  margin-top: 36px;
  margin-bottom: 48px;
  font-size: 15px;
}

.t-companywrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.t-companyname {
  color: #000;
  font-size: 18px;
  font-weight: 600;
}

.t-fourthbtn {
  color: #666;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
  display: none;
}

.t-contenttabwrapper {
  justify-content: space-between;
  align-items: center;
  height: 48px;
  display: flex;
}

.t-reportmaininfo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-contenttabl {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.t-reportcontentr {
  text-align: right;
}

.t-reportnumberbig {
  color: #00a7d5;
  font-size: 32px;
  font-weight: 700;
}

.t-contenttab {
  color: #777;
  line-height: 48px;
}

.t-reporttitle {
  color: #000;
  font-weight: 600;
}

.t-reportinfor {
  color: #888;
  text-align: right;
  font-size: 12px;
}

.t-reportnumbermedium {
  color: #00a7d5;
  font-size: 24px;
  font-weight: 700;
}

.t-reportsummary {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 16px;
  display: flex;
}

.t-reportsection {
  margin-top: 48px;
}

.t-reportwrapper {
  margin-top: 24px;
}

.t-reportinfol {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.t-report-p {
  margin-bottom: 0;
}

.t-reportcontentl {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.t-contenttabactve {
  border-bottom: 3px solid #00a7d5;
  font-weight: 500;
  line-height: 48px;
}

.t-reportcontent {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-transcriptcontent {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 15px;
  display: flex;
}

.t-answer {
  color: #666;
  margin-top: 12px;
  line-height: 1.6;
}

.t-qestion {
  font-weight: 500;
  line-height: 1.6;
}

.transcriptwrapper {
  margin-top: 24px;
}

.t-transcripttime {
  color: #777;
  width: 56px;
}

.t-transcriptsection {
  margin-top: 48px;
}

.t-toptitles {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #666;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.t-contactstatus {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  margin-top: 16px;
  display: flex;
}

.t-bluestatus {
  color: #00a7d5;
  background-color: #e3f9ff;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

.t-resumetoparea {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.t-resumeformrow {
  width: 100%;
}

.t-sectionfunction {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #00a7d5;
  justify-content: flex-start;
  align-items: center;
  width: 80px;
  display: flex;
}

.t-resumesection {
  flex-flow: column;
  align-items: stretch;
  margin-top: 48px;
}

.t-textarea {
  color: #000;
  font-size: 14px;
}

.t-contenttabr {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.t-resumecontenttext {
  color: #666;
  width: 100%;
  font-size: 15px;
}

.t-resumecontentrow {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.t-resumecontent {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top: 1px solid #ddd;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 16px;
  line-height: 1.5;
  display: flex;
}

.t-resumecontentblock {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  margin-bottom: 8px;
  display: flex;
}

.t-settingitemwrapper {
  margin-top: 24px;
}

.t-settingiteml {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #666;
  flex-flow: column;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.t-settingtopr {
  color: #333;
  font-size: 17px;
  font-weight: 500;
}

.t-settingsection {
  margin-top: 24px;
  margin-bottom: 48px;
}

.t-sectiontitle18 {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.t-settingitem {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.t-accountpicwrapper {
  margin-top: 24px;
}

.t-accountpic {
  border: 1px solid #eee;
  border-radius: 100px;
  width: 80px;
  height: 80px;
  overflow: clip;
}

.r-toplogo {
  width: 40px;
  height: 34px;
}

.r-navcontainer {
  border-bottom: 1px solid #f2f2f2;
  width: 100%;
  max-width: 100%;
  height: 68px;
  position: sticky;
  top: 0;
}

.r-profilepic {
  border: 1px solid #eee;
  border-radius: 100px;
  width: 36px;
  height: 36px;
}

.r-image {
  border-radius: 100px;
}

.r-user-popup {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 228px;
  display: none;
  position: absolute;
  inset: 60px 20px auto auto;
  box-shadow: 0 0 12px #0000001a;
}

.r-user-status {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #999;
  justify-content: flex-start;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  display: flex;
}

.r-navbar {
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #f2f2f2;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 68px;
  display: flex;
  position: sticky;
  inset: 0% 0% auto;
}

.r-user-info {
  color: #000;
  padding: 16px;
  font-weight: 700;
}

.r-more-navi {
  color: #333;
  justify-content: flex-start;
  align-items: center;
  height: 36px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 14px;
  display: flex;
}

.r-more-navi:hover {
  background-color: #f2f2f2;
}

.r-navcontent {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 68px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.r-companyinfo {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #999;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.r-sidewrapper {
  border-right: 1px solid #f2f2f2;
  width: 100%;
  max-width: 208px;
  height: 100vh;
  position: fixed;
}

.r-content {
  width: 100%;
  min-width: 680px;
  margin-bottom: 48px;
}

.r-titletext {
  color: #000;
  font-size: 20px;
  font-weight: 700;
}

.r-otherinfol {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.r-inteviewtopinfo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-maincontentwraper {
  width: 100%;
  min-width: 680px;
  max-width: 880px;
  margin-left: 32px;
  margin-right: 32px;
  padding-top: 32px;
  display: flex;
}

.r-topfunctions {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-maincontainer {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  max-width: 1420px;
  display: flex;
}

.r-bluenumber {
  color: #00a7d5;
  font-size: 18px;
  font-weight: 500;
}

.r-contentcontainer {
  justify-content: space-around;
  align-items: stretch;
  width: 100%;
  max-width: 1212px;
  margin-left: 208px;
  display: flex;
}

.r-tabl {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  width: 100%;
  height: 28px;
  display: flex;
}

.r-tabl.w--current {
  color: #00a7d5;
  border-right: 4px solid #00a7d5;
  font-weight: 700;
}

.r-mainbtn {
  text-align: center;
  background-color: #0db8e7;
  border-radius: 100px;
  padding: 12px 36px;
  font-weight: 400;
}

.r-mainbtn:hover {
  color: #fff;
}

.r-interviewtypeinfo {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: #333;
  display: flex;
}

.r-greenstatus {
  color: #06c12d;
  text-align: center;
  background-color: #e9fbed;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.r-newsnumber {
  color: #fff;
  background-color: #ff5a5a;
  border-radius: 100px;
  flex-flow: row-reverse;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.r-sidetabs {
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 208px;
  margin-top: 12px;
  display: flex;
}

.r-interviewotherinfo {
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  display: flex;
}

.r-interview {
  border-top: 1px solid #f2f2f2;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
}

.r-interview:hover {
  opacity: .7;
}

.r-tabitem {
  align-items: center;
  width: 100%;
  height: 56px;
  padding-left: 20px;
  font-size: 15px;
  display: flex;
}

.r-toptexttab {
  color: #777;
}

.r-greystatus {
  color: #666;
  text-align: center;
  background-color: #f2f2f2;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.r-topinfol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.r-toptexttabon {
  font-weight: 500;
}

.r-topfunctionr {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row-reverse;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  display: flex;
}

.r-topinfor {
  color: #999;
  text-align: right;
  font-size: 12px;
}

.r-interviewitems {
  margin-top: 24px;
}

.r-maintopcontainer {
  flex-flow: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 36px;
  margin-top: 24px;
  display: flex;
}

.r-maintopfunction {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1420px;
  height: 36px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.r-sectionform {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 16px;
  display: flex;
}

.r-generalfocused {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: block;
}

.r-link-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}

.r-customizeunfocus {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: block;
}

.r-settingsection {
  margin-top: 24px;
  margin-bottom: 48px;
}

.r-settingtopl {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #999;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.r-sectionformr {
  width: 50%;
}

.r-form-block {
  margin-bottom: 0;
}

.r-settingtoparea {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-customizequestions {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-top: 24px;
  display: flex;
}

.r-settingselection {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  align-items: center;
  margin-top: 24px;
  display: flex;
}

.r-questionitem {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.r-textarea {
  color: #000;
  font-size: 14px;
}

.r-select-field {
  color: #000;
  min-width: 328px;
  margin-bottom: 16px;
  font-size: 14px;
}

.r-sectionforml {
  width: 50%;
}

.r-field-label {
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

.r-textareaclean {
  margin-bottom: 0;
}

.r-btnarea {
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  display: flex;
}

.r-text-field {
  color: #000;
  min-width: 328px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

.r-sectionformrow {
  width: 100%;
}

.r-customizefocused {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: none;
}

.r-sectiontitle24 {
  color: #000;
  font-size: 24px;
  font-weight: 600;
}

.r-generalunfocus {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: none;
}

.r-customizecontent {
  display: none;
}

.r-yellowtips {
  color: #ffa115;
  background-color: #fff8ed;
  margin-top: 12px;
  padding: 16px;
  font-size: 14px;
}

.r-thirdbtn {
  color: #00a7d5;
  background-color: #e3f9ff;
  border: 1px solid #00a7d5;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

.r-settingtopr {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #333;
  flex-flow: row-reverse;
  align-items: center;
  font-size: 17px;
  font-weight: 500;
  display: flex;
}

.r-redtextlink {
  color: #ff5a5a;
  font-weight: 500;
}

.r-redtextlink:hover {
  color: #ff5a5a;
}

.r-talentitem {
  border-top: 1px solid #f2f2f2;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
}

.r-talentitem:hover {
  opacity: .7;
  color: #000;
}

.r-talentinfotop {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--999999);
  align-items: center;
  font-size: 16px;
  display: flex;
}

.r-talentinfo {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.r-talentitems {
  margin-top: 24px;
}

.r-icon {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  position: static;
}

.r-talentitemr {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.r-dropdown-list {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-top: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  display: none;
  box-shadow: 0 0 12px #0000001a;
}

.r-talentinfobottom {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--333333);
  align-items: center;
  display: flex;
}

.r-dropdown-toggle {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #666;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  font-size: 14px;
  display: flex;
  position: relative;
}

.r-talentiteml {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: center;
  display: flex;
}

.r-filterswrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.r-yellowstatus {
  color: #ffa115;
  background-color: #fff8ed;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.r-talentavatar {
  background-color: var(--cccccc);
  border: 1px solid #eee;
  border-radius: 100px;
  width: 48px;
  height: 48px;
  position: static;
  overflow: clip;
}

.r-report-p {
  margin-bottom: 0;
}

.r-reportsection {
  margin-top: 48px;
}

.r-reportinfor {
  color: #888;
  text-align: right;
  font-size: 12px;
}

.r-reportnumbermedium {
  color: #00a7d5;
  font-size: 24px;
  font-weight: 700;
}

.r-contenttabl {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.r-reporttitle {
  color: #000;
  font-weight: 600;
}

.r-reportcontent {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-reportcontentr {
  text-align: right;
}

.r-reportcontentl {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.r-contenttabwrapper {
  justify-content: space-between;
  align-items: center;
  height: 48px;
  display: flex;
}

.r-bluestatus {
  color: #00a7d5;
  background-color: #e3f9ff;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

.r-image-2 {
  border-radius: 4px;
}

.r-reportnumberbig {
  color: #00a7d5;
  font-size: 32px;
  font-weight: 700;
}

.r-contactarea {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.r-reportwrapper {
  margin-top: 24px;
}

.r-contenttabactve {
  border-bottom: 3px solid #00a7d5;
  font-weight: 500;
  line-height: 48px;
}

.r-reportsummary {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 16px;
  display: flex;
}

.r-videowrapper {
  width: 100%;
}

.r-contenttab {
  color: #777;
  line-height: 48px;
}

.r-reportmaininfo {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-reportinfol {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.r-transcripttime {
  color: #777;
  width: 56px;
}

.r-transcriptsection {
  margin-top: 48px;
}

.r-transcriptcontent {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 15px;
  display: flex;
}

.r-qestion {
  font-weight: 500;
  line-height: 1.6;
}

.r-answer {
  color: #666;
  margin-top: 12px;
  line-height: 1.6;
}

.r-image-3 {
  border-radius: 4px;
}

.r-resumecontentblock {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  margin-bottom: 8px;
  display: flex;
}

.r-resumecontentrow {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-weight: 400;
  display: flex;
}

.r-resumesection {
  flex-flow: column;
  align-items: stretch;
  margin-top: 48px;
}

.r-sectiontitle20 {
  color: #000;
  font-size: 20px;
  font-weight: 600;
}

.r-resumecontenttext {
  color: #666;
  width: 100%;
  font-size: 15px;
}

.r-resumetoparea {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-sectiontitle28 {
  color: #000;
  font-size: 28px;
  font-weight: 600;
}

.r-resumecontent {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  border-top: 1px solid #ddd;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 16px;
  line-height: 1.5;
  display: flex;
}

.r-accountpicwrapper {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: #666;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 24px;
  font-size: 14px;
  display: flex;
}

.r-companylogobig {
  background-color: #f2f2f2;
  border: 1px solid #eee;
  border-radius: 8px;
  width: 80px;
  height: 80px;
  overflow: clip;
}

.r-settingiteml {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #666;
  flex-flow: column;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.r-settingitem {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.r-accountpic {
  border: 1px solid #eee;
  border-radius: 100px;
  width: 80px;
  height: 80px;
  overflow: clip;
}

.r-sectiontitle18 {
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.r-settingitemwrapper {
  margin-top: 24px;
}

.jobscontainer {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: column;
  align-items: stretch;
  max-width: 1240px;
  padding: 48px 20px;
  display: flex;
}

.jobgrid {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.jobitem {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid var(--f2f2f2);
  background-color: var(--f9fafb);
  text-align: left;
  border-radius: 6px;
  flex-flow: column;
  justify-content: flex-start;
  padding: 20px;
  transition: box-shadow .2s;
  display: flex;
}

.jobitem:hover {
  background-color: var(--ffffff);
  box-shadow: 0 4px 24px #0000001a;
}

.jobtopinfo {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.jobotherinfo {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--777777);
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  display: flex;
}

.jobtopinfol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--666666);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  display: flex;
}

.jobtopinfor {
  text-align: right;
}

.jobtitle {
  color: var(--333333);
  font-size: 17px;
  font-weight: 500;
}

.jobbluenumber {
  color: var(--00a7d5);
  font-size: 16px;
  font-weight: 500;
}

.jobotherinfol {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  align-items: center;
  display: flex;
}

.jobotherinfor {
  text-align: right;
}

.companylogo {
  border-radius: 4px;
  width: 24px;
  height: 24px;
  overflow: clip;
}

.jobssubtitle {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 500;
}

.jobssubinfo {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.jobstabwrapper {
  justify-content: space-between;
  align-items: center;
  height: 48px;
  display: flex;
}

.jobstabl {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.jobstabactive {
  border-bottom: 3px solid var(--00a7d5);
  font-weight: 500;
  line-height: 48px;
}

.jobstab {
  color: var(--777777);
  line-height: 48px;
}

.jobstabr {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--00a7d5);
  flex-flow: row-reverse;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.practicecontainer {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  text-align: center;
  flex-flow: column;
  max-width: 1240px;
  padding: 48px 20px;
  display: flex;
  overflow: hidden;
}

.practicesubtitle {
  font-size: 20px;
  font-weight: 500;
}

.practicebox {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  max-width: 1240px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  overflow: auto;
}

.practiceitem {
  border: 1px solid var(--f2f2f2);
  background-color: var(--ffffff);
  text-align: left;
  border-radius: 8px;
  flex: none;
  width: 25%;
  padding: 6px;
}

.practiceitem:hover {
  border-color: var(--00a7d5);
}

.practicetitle {
  background-color: var(--eeeeee);
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 16px;
  font-size: 22px;
  font-weight: 600;
}

.text-block {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
}

.practiceinfo {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  text-align: left;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px 16px 16px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.practicenumber {
  color: var(--666666);
  font-size: 14px;
  font-weight: 400;
}

.t-practicebox {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  max-width: 1240px;
  margin-bottom: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
  overflow: auto;
}

.t-categorybox {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
}

.t-practicecontent {
  flex-flow: column;
  margin-top: 24px;
  display: flex;
}

.t-widerwraper {
  flex-flow: column;
  width: 100%;
  min-width: 680px;
  max-width: 1420px;
  padding-top: 32px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.t-categoryitem {
  padding: 8px 16px;
  font-size: 15px;
}

.t-categoryitemactive {
  background-color: var(--eeeeee);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 15px;
}

.grid-2 {
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.t-practicegriditem {
  border: 1px solid var(--f2f2f2);
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 4px;
  transition: border-color .2s;
}

.t-practicegriditem:hover {
  border-color: var(--28c3ed);
}

.t-practicegridtitle {
  background-color: var(--f2f2f2);
  padding: 24px 16px;
  font-size: 20px;
  font-weight: 600;
}

.t-practicegridother {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: var(--666666);
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
  font-size: 14px;
  transition: all .3s;
  display: flex;
}

.t-practicegridother:hover {
  justify-content: flex-start;
}

.practiceinfol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.t-practiceitem {
  border: 1px solid var(--f2f2f2);
  background-color: var(--ffffff);
  text-align: left;
  border-radius: 8px;
  flex: none;
  width: 25%;
  padding: 6px;
}

.t-practiceitem:hover {
  border-color: var(--00a7d5);
}

.t-practicetitle {
  background-color: var(--eeeeee);
  padding-top: 32px;
  padding-bottom: 32px;
  padding-left: 16px;
  font-size: 22px;
  font-weight: 600;
}

.t-practiceinfo {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  text-align: left;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px 16px 16px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
}

.t-practiceinfol {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.t-practicenumber {
  color: var(--666666);
  font-size: 14px;
  font-weight: 400;
}

.t-reportselectionbox {
  grid-column-gap: 36px;
  grid-row-gap: 36px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 36px;
  display: block;
}

.t-link-block {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--333333);
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  display: flex;
}

.t-reportselectiont {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--000000);
  text-align: left;
  flex-flow: column;
  align-items: flex-start;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

.t-alternativebox {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border-top: 1px solid var(--eeeeee);
  flex-flow: column;
  align-items: flex-start;
  margin-top: 36px;
  padding-top: 36px;
  display: flex;
}

.link {
  color: var(--00a7d5);
}

.t-yellowstatus {
  color: #ffa115;
  background-color: #fff8ed;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.t-resumecontactinfo {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
}

.t-fifthbtn, .r-fifthbtn {
  color: #666;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
  display: block;
}

.r-reddot {
  background-color: var(--ff5a5a);
  border-radius: 20px;
  width: 12px;
  height: 12px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.r-talentavatabox {
  position: relative;
}

.r-statusbox {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.r-statusitemactive {
  background-color: var(--eeeeee);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 15px;
}

.r-statusitem {
  padding: 8px 16px;
  font-size: 15px;
}

.r-redstatus {
  color: #ff5a5a;
  text-align: center;
  background-color: #fef0f0;
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 12px;
}

.div-block {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.r-contactareabox {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.r-contactareal {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  align-items: center;
  display: flex;
}

.r-contactarear {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row-reverse;
  align-items: center;
  display: flex;
}

.r-redbtn {
  border: 1px solid var(--ff5a5a);
  background-color: var(--fef0f0);
  color: var(--ff5a5a);
  border-radius: 100px;
  padding: 8px 20px;
  font-size: 14px;
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 42px;
  }

  h2 {
    font-size: 32px;
  }

  .user-popup {
    display: none;
  }

  .more-navi {
    justify-content: flex-start;
    height: 54px;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 16px;
    font-weight: 600;
  }

  .thirdbtn {
    display: none;
  }

  .herocontainer {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .herocontent {
    font-size: 18px;
  }

  .stepscontainer {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .stepscontent {
    margin-top: 32px;
  }

  .featureitem {
    font-size: 18px;
  }

  .datadrivencontainer {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .dataimg {
    max-width: 480px;
  }

  .dataitem {
    font-size: 18px;
  }

  .container {
    margin-top: 64px;
  }

  .menubtn {
    display: block;
  }

  .featureicon {
    max-width: 48px;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    line-height: 1.2;
  }

  .mainbtn.btnhero {
    margin-top: 16px;
  }

  .herocontainer {
    padding-left: 36px;
    padding-right: 36px;
  }

  .herocontent {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
    align-items: center;
    font-size: 16px;
    display: flex;
  }

  .stepscontainer {
    padding-left: 32px;
    padding-right: 32px;
  }

  .stepscontent, .stepsitem {
    align-items: center;
  }

  .grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .featureitem {
    text-align: center;
  }

  .dataimg {
    max-width: 360px;
  }

  .datacontent {
    flex-flow: column;
  }

  .featureicon {
    max-width: 42px;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 26px;
  }

  .stepscontent {
    text-align: center;
    align-items: center;
  }

  .stepsitem {
    align-items: center;
    font-size: 15px;
  }

  .stepstop {
    flex-flow: column;
    font-size: 16px;
  }

  .grid {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .datadrivencontainer {
    text-align: center;
    font-size: 16px;
  }

  .dataitem {
    font-size: 16px;
  }

  .featureicon {
    max-width: 42px;
  }
}