*{
  box-sizing:border-box;
}

body{
  margin:0;

  min-height:100vh;

  background:
    #f5f8fc;

  color:#213653;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

button{
  font:inherit;
}

.rankingsShell{
  width:min(
    1180px,
    calc(100% - 32px)
  );

  margin:
    28px auto
    70px;
}

.rankingsHero{
  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(250px,.55fr);

  gap:32px;

  padding:
    52px
    50px;

  border-radius:24px;

  background:
    linear-gradient(
      125deg,
      #062c78 0%,
      #0646ae 50%,
      #1971d7 100%
    );

  color:#fff;

  box-shadow:
    0 24px 60px
    rgba(16,61,124,.20);
}

.rankingsHero::after{
  content:"";

  position:absolute;

  width:420px;
  height:420px;

  right:-170px;
  top:-220px;

  border-radius:50%;

  background:
    rgba(255,255,255,.08);
}

.rankingsHeroText{
  position:relative;
  z-index:2;
}

.rankingsBadge{
  display:inline-flex;

  margin-right:8px;

  padding:
    5px 9px;

  border:
    1px solid rgba(255,255,255,.36);

  border-radius:999px;

  background:
    rgba(255,255,255,.14);

  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.rankingsEyebrow{
  font-size:9px;
  font-weight:850;

  letter-spacing:.13em;

  opacity:.80;
}

.rankingsHero h1{
  margin:
    19px
    0
    7px;

  font-size:
    clamp(
      37px,
      6vw,
      64px
    );

  line-height:.98;

  letter-spacing:-.045em;
}

.rankingsSubtitle{
  max-width:600px;

  margin:
    15px
    0
    0;

  color:
    rgba(255,255,255,.88);

  font-size:15px;
  line-height:1.65;
}

.rankingsHeroActions{
  display:flex;
  flex-wrap:wrap;

  gap:9px;

  margin-top:26px;
}

.rankingsPrimary,
.rankingsSecondary{
  min-height:43px;

  padding:
    0 17px;

  border-radius:10px;

  font-size:11px;
  font-weight:850;

  cursor:pointer;
}

.rankingsPrimary{
  border:0;

  background:#fff;

  color:#09449d;
}

.rankingsSecondary{
  border:
    1px solid
    rgba(255,255,255,.35);

  background:
    rgba(255,255,255,.08);

  color:#fff;
}

.rankingsHeroCard{
  position:relative;
  z-index:2;

  align-self:center;

  display:flex;
  flex-direction:column;

  min-height:210px;

  padding:24px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:18px;

  background:
    rgba(255,255,255,.10);

  backdrop-filter:
    blur(9px);
}

.rankingsHeroCard span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;

  opacity:.8;
}

.rankingsHeroCard strong{
  margin:
    22px
    0;

  font-size:56px;
  line-height:1;
}

.rankingsHeroCard small{
  margin-top:auto;

  color:
    rgba(255,255,255,.76);

  line-height:1.5;
}

.rankingsIntro{
  display:flex;
  justify-content:space-between;

  gap:30px;

  padding:
    42px
    5px
    18px;
}

.rankingsSectionKicker{
  color:#1660bd;

  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.rankingsIntro h2,
.rankingsFoundation h2{
  margin:
    6px
    0;

  color:#203a5d;

  font-size:25px;
  letter-spacing:-.02em;
}

.rankingsIntro p{
  max-width:700px;

  margin:
    8px
    0;

  color:#6e7e93;

  font-size:12px;
  line-height:1.65;
}

.rankingsCards{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:13px;
}

.rankingCard{
  position:relative;

  min-height:220px;

  padding:22px;

  border:
    1px solid #dfe7f1;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 7px 24px
    rgba(24,58,99,.045);
}

.rankingCardIcon{
  width:38px;
  height:38px;

  display:grid;
  place-items:center;

  border-radius:11px;

  background:#eaf3ff;

  color:#155ab3;

  font-size:10px;
  font-weight:900;
}

.rankingCard h3{
  margin:
    18px
    0
    7px;

  color:#263d5b;

  font-size:15px;
}

.rankingCard p{
  margin:0;

  color:#738196;

  font-size:11px;
  line-height:1.65;
}

.rankingCardStatus{
  position:absolute;

  left:22px;
  bottom:20px;

  padding:
    4px
    7px;

  border-radius:999px;

  background:#f2f5f9;

  color:#738196;

  font-size:8px;
  font-weight:850;
}

.rankingsFoundation{
  display:grid;

  grid-template-columns:
    .72fr
    1.28fr;

  align-items:center;

  gap:28px;

  margin-top:17px;

  padding:
    27px;

  border:
    1px solid #dce6f1;

  border-radius:17px;

  background:#fff;
}

.rankingsFoundationGrid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:8px;
}

.rankingsFoundationGrid div{
  display:flex;
  flex-direction:column;

  min-height:92px;

  padding:15px;

  border-radius:12px;

  background:#f6f9fd;
}

.rankingsFoundationGrid b{
  color:#0d55b7;

  font-size:20px;
}

.rankingsFoundationGrid span{
  margin-top:auto;

  color:#728096;

  font-size:9px;
  line-height:1.4;
}

.rankingsToast{
  position:fixed;

  right:22px;
  bottom:22px;

  max-width:320px;

  padding:
    12px
    14px;

  border:
    1px solid #c9dcf5;

  border-radius:11px;

  background:#fff;

  color:#38587d;

  box-shadow:
    0 12px 35px
    rgba(19,51,90,.15);

  font-size:11px;
  font-weight:700;
}

@media(max-width:800px){

  .rankingsHero{
    grid-template-columns:1fr;

    padding:
      36px
      27px;
  }

  .rankingsHeroCard{
    min-height:170px;
  }

  .rankingsCards{
    grid-template-columns:1fr;
  }

  .rankingsFoundation{
    grid-template-columns:1fr;
  }

  .rankingsFoundationGrid{
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:480px){

  .rankingsShell{
    width:
      min(
        100% - 18px,
        1180px
      );

    margin-top:10px;
  }

  .rankingsHero{
    padding:
      28px
      20px;

    border-radius:18px;
  }

  .rankingsFoundationGrid{
    grid-template-columns:1fr;
  }

}
/* =========================================================
   V18-C6-B
   RANKINGS OMC - CRIAR RANKING
   ========================================================= */

.v18RankingsChecking body{
  visibility:hidden !important;
}

.rankingWizardShell{
  width:min(
    1160px,
    calc(100% - 32px)
  );

  margin:
    26px auto
    70px;
}

.rankingWizardTop{
  display:flex;
  align-items:flex-start;

  gap:25px;

  margin-bottom:17px;

  padding:22px 25px;

  border-radius:17px;

  background:
    linear-gradient(
      120deg,
      #073894,
      #1267ca
    );

  color:#fff;
}

.rankingWizardTop h1{
  margin:
    5px
    0;

  font-size:25px;
}

.rankingWizardTop p{
  margin:0;

  color:
    rgba(255,255,255,.78);

  font-size:11px;
}

.rankingWizardBack{
  margin-top:4px;

  color:#fff;

  text-decoration:none;

  font-size:10px;
  font-weight:800;
}

.rankingWizardBeta{
  margin:0 6px 0 0;
}

.rankingWizard{
  display:grid;

  grid-template-columns:
    235px
    minmax(0,1fr);

  gap:14px;
}

.rankingWizardSteps{
  align-self:start;

  display:flex;
  flex-direction:column;

  gap:6px;

  padding:10px;

  border:
    1px solid #dde6f0;

  border-radius:15px;

  background:#fff;
}

.rankingWizardSteps button{
  display:grid;

  grid-template-columns:
    34px
    1fr;

  align-items:center;

  gap:9px;

  width:100%;

  padding:10px;

  border:
    1px solid transparent;

  border-radius:10px;

  background:transparent;

  color:#68788d;

  text-align:left;

  cursor:pointer;
}

.rankingWizardSteps button > span{
  width:32px;
  height:32px;

  display:grid;
  place-items:center;

  border-radius:9px;

  background:#f1f5fa;

  font-size:9px;
  font-weight:900;
}

.rankingWizardSteps button div{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.rankingWizardSteps button b{
  font-size:10px;
}

.rankingWizardSteps button small{
  font-size:8px;
}

.rankingWizardSteps button.active{
  border-color:#c5daf7;

  background:#edf5ff;

  color:#175cb3;
}

.rankingWizardSteps button.active > span{
  background:#0b57ba;

  color:#fff;
}

.rankingWizardContent{
  min-height:620px;

  padding:
    27px
    29px
    20px;

  border:
    1px solid #dde6f0;

  border-radius:15px;

  background:#fff;
}

.rankingWizardPane[hidden]{
  display:none !important;
}

.rankingWizardPane h2{
  margin:
    6px
    0;

  color:#263e5e;

  font-size:23px;
}

.rankingWizardLead{
  margin:
    4px
    0
    24px;

  color:#748398;

  font-size:11px;
  line-height:1.6;
}

.rankingFormGrid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:13px;
}

.rankingField{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.rankingFieldFull{
  grid-column:1/-1;
}

.rankingField > span{
  color:#405a79;

  font-size:9px;
  font-weight:850;
}

.rankingField input,
.rankingField textarea,
.rankingField select{
  width:100%;

  padding:
    10px
    11px;

  border:
    1px solid #ccd9e8;

  border-radius:9px;

  outline:none;

  background:#fff;

  color:#2d415e;

  font:inherit;
  font-size:11px;
}

.rankingField input:focus,
.rankingField textarea:focus,
.rankingField select:focus{
  border-color:#4785d5;

  box-shadow:
    0 0 0 3px
    rgba(49,118,207,.10);
}

.rankingSubjects{
  display:flex;
  flex-direction:column;

  gap:8px;
}

.rankingSubject{
  display:grid;

  grid-template-columns:
    minmax(180px,1.4fr)
    90px
    110px
    110px
    34px;

  gap:7px;

  align-items:end;

  padding:10px;

  border:
    1px solid #e0e7f0;

  border-radius:11px;

  background:#fbfcfe;
}

.rankingSubject label{
  display:flex;
  flex-direction:column;

  gap:4px;

  color:#67778c;

  font-size:8px;
  font-weight:800;
}

.rankingSubject input{
  min-width:0;

  width:100%;

  padding:8px;

  border:
    1px solid #cedae7;

  border-radius:7px;

  font:inherit;
  font-size:10px;
}

.rankingSubjectRemove{
  width:32px;
  height:32px;

  border:
    1px solid #efd0d5;

  border-radius:8px;

  background:#fff;

  color:#a34453;

  cursor:pointer;
}

.rankingAddSubject{
  margin-top:10px;

  padding:
    9px
    12px;

  border:
    1px dashed #9dbce3;

  border-radius:9px;

  background:#f4f8fd;

  color:#195ba9;

  font-size:10px;
  font-weight:850;

  cursor:pointer;
}

.rankingFormulaHelp{
  padding:
    13px
    14px;

  border:
    1px solid #d7e6f9;

  border-radius:10px;

  background:#f3f8ff;
}

.rankingFormulaHelp b{
  color:#215c9f;

  font-size:11px;
}

.rankingFormulaHelp p{
  margin:
    4px
    0
    0;

  color:#617996;

  font-size:10px;
  line-height:1.5;
}

.rankingTieBlock{
  margin-top:25px;
}

.rankingTieBlock h3{
  margin:0;

  color:#314967;

  font-size:14px;
}

.rankingTieBlock > p{
  margin:
    5px
    0
    11px;

  color:#7a8799;

  font-size:9px;
}

.rankingTieList{
  display:flex;
  flex-direction:column;

  gap:6px;
}

.rankingTieItem{
  display:grid;

  grid-template-columns:
    28px
    1fr
    auto;

  align-items:center;

  gap:8px;

  padding:
    9px
    10px;

  border:
    1px solid #e0e7ef;

  border-radius:9px;
}

.rankingTieItem strong{
  width:25px;
  height:25px;

  display:grid;
  place-items:center;

  border-radius:7px;

  background:#edf4fd;

  color:#2868b7;

  font-size:8px;
}

.rankingTieItem span{
  font-size:10px;
}

.rankingTieActions{
  display:flex;

  gap:4px;
}

.rankingTieActions button{
  width:28px;
  height:28px;

  border:
    1px solid #d5e0eb;

  border-radius:7px;

  background:#fff;

  color:#4c617a;

  cursor:pointer;
}

.rankingPrivacyGrid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:9px;
}

.rankingPrivacyCard{
  display:flex;

  gap:10px;

  padding:14px;

  border:
    1px solid #dce5ef;

  border-radius:12px;

  cursor:pointer;
}

.rankingPrivacyCard:has(input:checked){
  border-color:#73a6e5;

  background:#f1f7ff;
}

.rankingPrivacyCard input{
  margin-top:3px;
}

.rankingPrivacyCard b{
  color:#344b69;

  font-size:11px;
}

.rankingPrivacyCard p{
  margin:
    5px
    0
    0;

  color:#748196;

  font-size:9px;
  line-height:1.5;
}

.rankingDeadlineGrid{
  margin-top:22px;
}

.rankingCheck{
  display:flex;
  align-items:center;

  gap:8px;

  color:#54677e;

  font-size:10px;
}

.rankingReview{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:9px;
}

.rankingReviewCard{
  padding:13px;

  border:
    1px solid #e0e7ef;

  border-radius:10px;

  background:#fbfcfe;
}

.rankingReviewCard.full{
  grid-column:1/-1;
}

.rankingReviewCard small{
  display:block;

  margin-bottom:5px;

  color:#74869c;

  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
}

.rankingReviewCard b{
  color:#324b6c;

  font-size:11px;
}

.rankingReviewSubjects{
  display:flex;
  flex-wrap:wrap;

  gap:5px;
}

.rankingReviewSubjects span{
  padding:5px 7px;

  border-radius:999px;

  background:#edf4fd;

  color:#32669f;

  font-size:8px;
  font-weight:800;
}

.rankingConfirm{
  display:flex;

  gap:8px;

  margin-top:19px;

  padding:12px;

  border:
    1px solid #d8e3ee;

  border-radius:9px;

  color:#596b82;

  font-size:10px;
}

.rankingWizardMessage{
  min-height:20px;

  margin-top:16px;

  color:#a14855;

  font-size:10px;
  font-weight:700;
}

.rankingWizardMessage.ok{
  color:#277149;
}

.rankingWizardFooter{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  margin-top:13px;

  padding-top:15px;

  border-top:
    1px solid #e8edf3;
}

.rankingWizardFooterRight{
  display:flex;
  align-items:center;

  gap:8px;
}

.rankingWizardFooterRight > span{
  margin-right:7px;

  color:#8b97a6;

  font-size:8px;
}

.rankingWizardPrevious,
.rankingWizardNext,
.rankingWizardCreate{
  min-height:38px;

  padding:
    0 14px;

  border-radius:8px;

  font-size:10px;
  font-weight:850;

  cursor:pointer;
}

.rankingWizardPrevious{
  border:
    1px solid #cfdae7;

  background:#fff;

  color:#556a84;
}

.rankingWizardPrevious:disabled{
  opacity:.45;

  cursor:not-allowed;
}

.rankingWizardNext,
.rankingWizardCreate{
  border:0;

  background:
    linear-gradient(
      120deg,
      #0849aa,
      #176cd0
    );

  color:#fff;
}

.rankingWizardCreate{
  box-shadow:
    0 8px 20px
    rgba(18,90,186,.18);
}

@media(max-width:850px){

  .rankingWizard{
    grid-template-columns:1fr;
  }

  .rankingWizardSteps{
    flex-direction:row;

    overflow-x:auto;
  }

  .rankingWizardSteps button{
    min-width:155px;
  }

  .rankingSubject{
    grid-template-columns:
      1fr
      1fr;

    align-items:end;
  }

  .rankingSubject label:first-child{
    grid-column:1/-1;
  }

  .rankingPrivacyGrid{
    grid-template-columns:1fr;
  }

}

@media(max-width:560px){

  .rankingWizardShell{
    width:
      calc(100% - 16px);

    margin-top:8px;
  }

  .rankingWizardTop{
    flex-direction:column;
  }

  .rankingWizardContent{
    padding:
      20px
      16px;
  }

  .rankingFormGrid,
  .rankingReview{
    grid-template-columns:1fr;
  }

  .rankingFieldFull,
  .rankingReviewCard.full{
    grid-column:auto;
  }

  .rankingSubject{
    grid-template-columns:1fr;
  }

  .rankingSubject label:first-child{
    grid-column:auto;
  }

  .rankingWizardFooter{
    align-items:stretch;
    flex-direction:column;
  }

  .rankingWizardFooterRight{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

}
/* =========================================================
   V18-C6-C
   PARTICIPAR + NOTAS + MOTOR DE CALCULO
   ========================================================= */

.rankingDetailShell{
  width:min(
    1160px,
    calc(100% - 32px)
  );

  margin:
    27px auto
    70px;
}

.rankingDetailHero{
  display:grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(235px,.55fr);

  gap:26px;

  padding:
    34px
    37px;

  border-radius:20px;

  background:
    linear-gradient(
      125deg,
      #07358c,
      #0752bc 55%,
      #1972d5
    );

  color:#fff;

  box-shadow:
    0 18px 45px
    rgba(16,61,124,.16);
}

.rankingDetailBack{
  display:inline-flex;

  margin-bottom:16px;

  color:
    rgba(255,255,255,.82);

  text-decoration:none;

  font-size:9px;
  font-weight:800;
}

.rankingDetailBadges{
  display:flex;
  align-items:center;

  gap:6px;
}

.rankingStatusBadge{
  display:inline-flex;

  padding:
    5px
    8px;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:999px;

  background:
    rgba(255,255,255,.11);

  font-size:8px;
  font-weight:850;
  text-transform:uppercase;
}

.rankingDetailHero h1{
  margin:
    14px
    0
    7px;

  font-size:
    clamp(
      28px,
      4vw,
      45px
    );

  line-height:1.05;
}

.rankingDetailHero > div > p{
  margin:0;
}

.rankingDetailMeta{
  color:
    rgba(255,255,255,.85);

  font-size:11px;
  font-weight:750;
}

.rankingDetailDescription{
  max-width:680px;

  margin-top:10px !important;

  color:
    rgba(255,255,255,.70);

  font-size:10px;
  line-height:1.6;
}

.rankingScoreHero{
  display:flex;
  flex-direction:column;

  min-height:180px;

  padding:21px;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius:15px;

  background:
    rgba(255,255,255,.10);
}

.rankingScoreHero span{
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
}

.rankingScoreHero strong{
  margin:
    20px
    0;

  font-size:46px;
}

.rankingScoreHero small{
  margin-top:auto;

  color:
    rgba(255,255,255,.74);

  font-size:9px;
}

.rankingParticipationLayout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    300px;

  gap:14px;

  margin-top:15px;
}

.rankingParticipationMain,
.rankingSummaryCard,
.rankingPreviewCard{
  border:
    1px solid #dde6f0;

  border-radius:15px;

  background:#fff;
}

.rankingParticipationMain{
  padding:
    26px
    28px;
}

.rankingParticipationHeading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;

  margin-bottom:20px;
}

.rankingParticipationHeading h2{
  margin:
    5px
    0;

  color:#263f5f;

  font-size:22px;
}

.rankingParticipationHeading p{
  max-width:650px;

  margin:0;

  color:#77869a;

  font-size:10px;
  line-height:1.6;
}

.rankingSaveState{
  flex:0 0 auto;

  padding:
    5px
    8px;

  border-radius:999px;

  background:#f2f5f8;

  color:#788698;

  font-size:8px;
  font-weight:850;
}

.rankingSaveState.saved{
  background:#e8f8ef;

  color:#267048;
}

.rankingAliasField{
  margin-bottom:17px;
}

.rankingScoreInputs{
  display:flex;
  flex-direction:column;

  gap:7px;
}

.rankingScoreInputCard{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    150px;

  align-items:center;

  gap:14px;

  padding:
    12px
    13px;

  border:
    1px solid #e0e7ef;

  border-radius:10px;

  background:#fbfcfe;
}

.rankingScoreInputInfo{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.rankingScoreInputInfo b{
  color:#334c6b;

  font-size:11px;
}

.rankingScoreInputInfo span{
  color:#8190a2;

  font-size:8px;
}

.rankingScoreInputControl{
  display:grid;

  grid-template-columns:
    1fr auto;

  align-items:center;

  gap:6px;
}

.rankingScoreInputControl input{
  width:100%;

  min-width:0;

  padding:
    9px
    10px;

  border:
    1px solid #cbd8e7;

  border-radius:8px;

  outline:none;

  font:inherit;
  font-size:11px;
  text-align:right;
}

.rankingScoreInputControl input:focus{
  border-color:#4b87d3;

  box-shadow:
    0 0 0 3px
    rgba(61,127,210,.10);
}

.rankingScoreInputControl small{
  color:#8b97a6;

  font-size:8px;
}

.rankingSubmitScores{
  min-height:41px;

  margin-top:13px;

  padding:
    0 17px;

  border:0;
  border-radius:9px;

  background:
    linear-gradient(
      120deg,
      #084aa9,
      #156bcd
    );

  color:#fff;

  font-size:10px;
  font-weight:850;

  cursor:pointer;
}

.rankingSubmitScores:disabled{
  opacity:.65;

  cursor:wait;
}

.rankingParticipationMessage{
  min-height:18px;

  margin-top:11px;

  color:#a24553;

  font-size:9px;
  font-weight:750;
}

.rankingParticipationMessage.ok{
  color:#287149;
}

.rankingParticipationSidebar{
  display:flex;
  flex-direction:column;

  gap:10px;
}

.rankingSummaryCard,
.rankingPreviewCard{
  padding:18px;
}

.rankingSummaryCard > span,
.rankingPreviewCard > span{
  color:#1b62b4;

  font-size:8px;
  font-weight:900;
  letter-spacing:.09em;
}

.rankingSummaryCard h3{
  margin:
    8px
    0
    5px;

  color:#304968;

  font-size:15px;
}

.rankingSummaryCard > p{
  margin:0;

  color:#78869a;

  font-size:9px;
  line-height:1.55;
}

.rankingRules{
  display:flex;
  flex-direction:column;

  gap:0;

  margin:
    11px
    0
    0;
}

.rankingRules div{
  display:flex;
  justify-content:space-between;

  gap:10px;

  padding:
    8px
    0;

  border-bottom:
    1px solid #edf1f5;
}

.rankingRules div:last-child{
  border-bottom:0;
}

.rankingRules dt{
  color:#788698;

  font-size:8px;
}

.rankingRules dd{
  margin:0;

  color:#3d5572;

  font-size:8px;
  font-weight:850;
  text-align:right;
}

.rankingPreviewCard{
  display:flex;
  flex-direction:column;

  min-height:150px;

  background:
    linear-gradient(
      145deg,
      #f4f8ff,
      #fff
    );
}

.rankingPreviewCard strong{
  margin:
    13px
    0;

  color:#0c56b9;

  font-size:34px;
}

.rankingPreviewCard small{
  margin-top:auto;

  color:#7f8c9d;

  font-size:8px;
  line-height:1.5;
}

.rankingDetailError{
  margin-top:15px;

  padding:24px;

  border:
    1px solid #ecd4d8;

  border-radius:12px;

  background:#fff;

  color:#7a4450;
}

.rankingDetailError b{
  display:block;

  margin-bottom:6px;
}

.rankingDetailError p{
  font-size:10px;
}

.rankingDetailError a{
  color:#165fb5;

  font-size:10px;
  font-weight:800;
}

@media(max-width:850px){

  .rankingDetailHero,
  .rankingParticipationLayout{
    grid-template-columns:1fr;
  }

  .rankingParticipationSidebar{
    display:grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .rankingPreviewCard{
    grid-column:1/-1;
  }

}

@media(max-width:560px){

  .rankingDetailShell{
    width:
      calc(100% - 16px);

    margin-top:8px;
  }

  .rankingDetailHero{
    padding:
      26px
      20px;
  }

  .rankingParticipationMain{
    padding:
      20px
      16px;
  }

  .rankingParticipationHeading{
    flex-direction:column;
  }

  .rankingScoreInputCard{
    grid-template-columns:1fr;
  }

  .rankingParticipationSidebar{
    grid-template-columns:1fr;
  }

  .rankingPreviewCard{
    grid-column:auto;
  }

}
/* =========================================================
   V18-C6-D
   CLASSIFICACAO / MINHA POSICAO / FILTROS
   ========================================================= */

.rankingClassification{
  margin-top:15px;

  padding:
    27px
    28px;

  border:
    1px solid #dde6f0;

  border-radius:15px;

  background:#fff;
}

.rankingClassificationHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:18px;
}

.rankingClassificationHeader h2{
  margin:
    5px
    0;

  color:#263f5f;

  font-size:22px;
}

.rankingClassificationHeader p{
  max-width:700px;

  margin:0;

  color:#79879a;

  font-size:10px;
  line-height:1.6;
}

.rankingLocalDemoBadge{
  flex:0 0 auto;

  padding:
    6px
    9px;

  border:
    1px solid #bcd5f3;

  border-radius:999px;

  background:#edf6ff;

  color:#2867ae;

  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
}

.rankingStatsGrid{
  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:8px;

  margin-bottom:16px;
}

.rankingStatsGrid article{
  min-height:88px;

  display:flex;
  flex-direction:column;

  padding:13px;

  border:
    1px solid #e0e7ef;

  border-radius:11px;

  background:#f8fafd;
}

.rankingStatsGrid span{
  color:#8290a2;

  font-size:7px;
  font-weight:900;
  letter-spacing:.06em;
}

.rankingStatsGrid strong{
  margin-top:auto;

  color:#145bb7;

  font-size:22px;
}

.rankingClassificationToolbar{
  display:grid;

  grid-template-columns:
    minmax(220px,1fr)
    180px
    auto;

  align-items:end;

  gap:8px;

  margin-bottom:12px;

  padding:11px;

  border:
    1px solid #e0e7ef;

  border-radius:10px;

  background:#fafcff;
}

.rankingClassificationToolbar label{
  display:flex;
  flex-direction:column;

  gap:5px;
}

.rankingClassificationToolbar label > span{
  color:#61758e;

  font-size:8px;
  font-weight:850;
}

.rankingClassificationToolbar input,
.rankingClassificationToolbar select{
  min-height:36px;

  padding:
    0 10px;

  border:
    1px solid #cbd8e6;

  border-radius:8px;

  outline:none;

  background:#fff;

  color:#3c526e;

  font:inherit;
  font-size:10px;
}

.rankingClassificationToolbar input:focus,
.rankingClassificationToolbar select:focus{
  border-color:#4d88d2;

  box-shadow:
    0 0 0 3px
    rgba(64,126,205,.09);
}

.rankingGoToMe{
  min-height:36px;

  padding:
    0 13px;

  border:
    1px solid #bad1ec;

  border-radius:8px;

  background:#edf5ff;

  color:#185cad;

  font-size:9px;
  font-weight:850;

  cursor:pointer;
}

.rankingMyPositionCard{
  display:grid;

  grid-template-columns:
    130px
    150px
    minmax(0,1fr);

  align-items:center;

  gap:16px;

  margin-bottom:12px;

  padding:
    13px
    15px;

  border:
    1px solid #a9c9ef;

  border-radius:11px;

  background:
    linear-gradient(
      120deg,
      #eef6ff,
      #f8fbff
    );
}

.rankingMyPositionCard > div{
  display:flex;
  flex-direction:column;

  gap:3px;
}

.rankingMyPositionCard span{
  color:#6681a1;

  font-size:7px;
  font-weight:900;
}

.rankingMyPositionCard strong{
  color:#0f58b4;

  font-size:20px;
}

.rankingMyPositionCard p{
  margin:0;

  color:#687c94;

  font-size:9px;
  line-height:1.5;
}

.rankingClassificationMessage{
  min-height:18px;

  color:#708197;

  font-size:9px;
}

.rankingTableWrap{
  overflow-x:auto;

  border:
    1px solid #e0e7ef;

  border-radius:11px;
}

.rankingTable{
  width:100%;

  border-collapse:collapse;

  min-width:750px;
}

.rankingTable th{
  padding:
    10px
    12px;

  border-bottom:
    1px solid #dce5ee;

  background:#f7f9fc;

  color:#75849a;

  font-size:7px;
  font-weight:900;
  letter-spacing:.05em;

  text-align:left;
  text-transform:uppercase;
}

.rankingTable td{
  padding:
    11px
    12px;

  border-bottom:
    1px solid #edf1f5;

  color:#40546e;

  font-size:9px;
}

.rankingTable tbody tr:last-child td{
  border-bottom:0;
}

.rankingTable tbody tr{
  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.rankingTable tbody tr:hover{
  background:#fafcff;
}

.rankingTableScore{
  text-align:right !important;
}

.rankingTableScore strong{
  color:#244e83;

  font-size:11px;
}

.rankingPosition{
  display:flex;
  align-items:center;

  gap:6px;
}

.rankingPosition span{
  font-size:15px;
}

.rankingPosition b{
  color:#304b6d;

  font-size:10px;
}

.rankingCandidateName{
  display:flex;
  align-items:center;

  gap:6px;
}

.rankingCandidateName b{
  color:#314967;

  font-size:10px;
}

.rankingCandidateName span{
  padding:
    3px
    5px;

  border-radius:999px;

  background:#dcecff;

  color:#135db5;

  font-size:6px;
  font-weight:900;
}

.rankingVerification{
  display:inline-flex;

  padding:
    4px
    6px;

  border-radius:999px;

  background:#f1f4f7;

  color:#728093;

  font-size:7px;
  font-weight:800;
}

.rankingVerification.verified{
  background:#e7f7ee;

  color:#24724a;
}

.rankingMiniScores{
  display:flex;
  flex-wrap:wrap;

  gap:4px;
}

.rankingMiniScore{
  display:inline-flex;
  align-items:center;

  gap:4px;

  padding:
    4px
    6px;

  border-radius:6px;

  background:#f2f6fa;

  color:#718198;

  font-size:7px;
}

.rankingMiniScore b{
  color:#3d5c82;
}

.rankingTableMe{
  background:#edf6ff !important;

  box-shadow:
    inset 3px 0 0
    #1768c9;
}

.rankingTableMe td{
  color:#285985;
}

.rankingTableMePulse{
  animation:
    rankingMePulse
    .7s ease
    2;
}

@keyframes rankingMePulse{

  0%{
    background:#edf6ff;
  }

  50%{
    background:#d5eaff;
  }

  100%{
    background:#edf6ff;
  }
}

.rankingTableEmpty{
  padding:30px !important;

  color:#8592a2 !important;

  text-align:center !important;
}

@media(max-width:900px){

  .rankingStatsGrid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

  .rankingClassificationToolbar{
    grid-template-columns:
      1fr
      1fr;
  }

  .rankingGoToMe{
    grid-column:1/-1;
  }

}

@media(max-width:600px){

  .rankingClassification{
    padding:
      20px
      15px;
  }

  .rankingClassificationHeader{
    flex-direction:column;
  }

  .rankingStatsGrid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .rankingClassificationToolbar{
    grid-template-columns:1fr;
  }

  .rankingGoToMe{
    grid-column:auto;
  }

  .rankingMyPositionCard{
    grid-template-columns:
      1fr
      1fr;
  }

  .rankingMyPositionCard p{
    grid-column:1/-1;
  }

}
/* =========================================================
   V18-C6-D-R1
   VAGAS DISPONIVEIS + AVISO DEMONSTRATIVO
   ========================================================= */

.rankingFieldHint{
  margin-top:1px;

  color:#8794a5;

  font-size:8px;
  line-height:1.4;
}

.rankingDemonstrativeNotice{
  display:flex;
  align-items:flex-start;

  gap:12px;

  margin-top:14px;

  padding:
    14px
    16px;

  border:
    1px solid #f0d59a;

  border-radius:12px;

  background:#fff9e9;

  color:#66532b;
}

.rankingDemonstrativeIcon{
  flex:0 0 auto;

  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#f4c95d;

  color:#604a12;

  font-size:13px;
  font-weight:950;
}

.rankingDemonstrativeNotice strong{
  display:block;

  margin-bottom:3px;

  color:#5d4919;

  font-size:10px;
}

.rankingDemonstrativeNotice p{
  margin:0;

  font-size:9px;
  line-height:1.55;
}

.rankingStatsGrid{
  grid-template-columns:
    repeat(
      6,
      minmax(0,1fr)
    );
}

.rankingVacancySituation{
  margin-bottom:12px;

  padding:
    10px
    13px;

  border-radius:9px;

  font-size:9px;
  font-weight:800;
  line-height:1.5;
}

.rankingVacancySituation.inside{
  border:
    1px solid #b8e0c9;

  background:#edf9f2;

  color:#277047;
}

.rankingVacancySituation.outside{
  border:
    1px solid #efd8aa;

  background:#fff9ec;

  color:#785d26;
}

.rankingVacancyBadge{
  display:inline-flex;

  padding:
    3px
    5px;

  border-radius:999px;

  background:#e5f7ec;

  color:#1e7447;

  font-size:6px;
  font-style:normal;
  font-weight:950;
  letter-spacing:.04em;
}

@media(max-width:1050px){

  .rankingStatsGrid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

}

@media(max-width:600px){

  .rankingStatsGrid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

}
/* =========================================================
   V18-C6-E
   GESTAO E MODERACAO DOS RANKINGS
   ========================================================= */

.rankingDetailActions{
  display:flex;

  gap:8px;

  margin-top:15px;
}

.rankingReportButton{
  min-height:33px;

  padding:
    0 11px;

  border:
    1px solid
    rgba(255,255,255,.34);

  border-radius:8px;

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font-size:8px;
  font-weight:800;

  cursor:pointer;
}

.rankingReportButton:hover{
  background:
    rgba(255,255,255,.15);
}

.rankingManagement{
  margin-top:15px;

  padding:
    27px
    28px;

  border:
    1px solid #dce5ef;

  border-radius:15px;

  background:#fff;
}

.rankingManagementHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:20px;

  margin-bottom:17px;
}

.rankingManagementHeader h2{
  margin:
    5px
    0;

  color:#263f5f;

  font-size:22px;
}

.rankingManagementHeader p{
  margin:0;

  color:#77879b;

  font-size:10px;
}

.rankingManagementOwnerBadge{
  padding:
    6px
    9px;

  border:
    1px solid #bcd6f5;

  border-radius:999px;

  background:#edf6ff;

  color:#2768b5;

  font-size:7px;
  font-weight:900;
  letter-spacing:.05em;
}

.rankingManagementStats{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:8px;

  margin-bottom:13px;
}

.rankingManagementStats article{
  min-height:86px;

  display:flex;
  flex-direction:column;

  padding:13px;

  border:
    1px solid #e0e7ef;

  border-radius:11px;

  background:#f8fafd;
}

.rankingManagementStats span{
  color:#8290a2;

  font-size:7px;
  font-weight:900;
}

.rankingManagementStats strong{
  margin-top:auto;

  color:#155bb5;

  font-size:19px;
}

.rankingManagementStatusBox{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    180px
    auto;

  align-items:center;

  gap:10px;

  padding:13px;

  border:
    1px solid #dce5ef;

  border-radius:11px;

  background:#fafcff;
}

.rankingManagementStatusBox b{
  color:#344d6c;

  font-size:10px;
}

.rankingManagementStatusBox p{
  margin:
    3px
    0
    0;

  color:#7e8c9f;

  font-size:8px;
}

.rankingManagementStatusBox select{
  min-height:36px;

  padding:
    0 10px;

  border:
    1px solid #cad7e6;

  border-radius:8px;

  background:#fff;

  color:#405570;

  font-size:9px;
}

.rankingManagementStatusBox button{
  min-height:36px;

  padding:
    0 13px;

  border:0;

  border-radius:8px;

  background:#0c5dc3;

  color:#fff;

  font-size:9px;
  font-weight:850;

  cursor:pointer;
}

.rankingManagementMessage{
  min-height:19px;

  padding-top:8px;

  color:#a44854;

  font-size:9px;
  font-weight:750;
}

.rankingManagementMessage.ok{
  color:#27714a;
}

.rankingManagementColumns{
  display:grid;

  grid-template-columns:
    1.2fr
    .8fr;

  gap:10px;

  margin-top:5px;
}

.rankingManagementBlock{
  padding:15px;

  border:
    1px solid #e0e7ef;

  border-radius:11px;

  background:#fff;
}

.rankingManagementBlockHeader{
  display:flex;
  justify-content:space-between;

  margin-bottom:10px;
}

.rankingManagementBlockHeader h3{
  margin:0;

  color:#324a69;

  font-size:13px;
}

.rankingManagementBlockHeader p{
  margin:
    4px
    0
    0;

  color:#8491a2;

  font-size:8px;
}

.rankingManagementTableWrap{
  overflow:auto;

  border:
    1px solid #e2e8ef;

  border-radius:9px;
}

.rankingManagementTable{
  width:100%;

  min-width:520px;

  border-collapse:collapse;
}

.rankingManagementTable th{
  padding:
    9px
    10px;

  border-bottom:
    1px solid #dde5ee;

  background:#f7f9fc;

  color:#7c899a;

  font-size:7px;
  text-align:left;
  text-transform:uppercase;
}

.rankingManagementTable td{
  padding:
    10px;

  border-bottom:
    1px solid #edf1f5;

  color:#465a73;

  font-size:8px;
}

.rankingManagementTable tbody tr:last-child td{
  border-bottom:0;
}

.rankingManagementCandidate{
  display:flex;
  align-items:center;

  gap:5px;
}

.rankingManagementCandidate b{
  color:#334a68;

  font-size:9px;
}

.rankingManagementCandidate span{
  padding:
    2px
    4px;

  border-radius:999px;

  background:#dcecff;

  color:#155caf;

  font-size:6px;
  font-weight:900;
}

.rankingManagementStatusPill{
  display:inline-flex;

  padding:
    4px
    6px;

  border-radius:999px;

  background:#e9f7ef;

  color:#277049;

  font-size:7px;
  font-weight:800;
}

.rankingManagementStatusPill.removed{
  background:#f5edef;

  color:#96505c;
}

.rankingParticipantRemoved{
  opacity:.62;
}

.rankingManagementRemove{
  padding:
    5px
    7px;

  border:
    1px solid #ebcdd2;

  border-radius:7px;

  background:#fff;

  color:#a34c59;

  font-size:7px;
  font-weight:800;

  cursor:pointer;
}

.rankingReportsList{
  display:flex;
  flex-direction:column;

  gap:7px;
}

.rankingReportItem{
  padding:11px;

  border:
    1px solid #e1e7ee;

  border-radius:9px;

  background:#fbfcfe;
}

.rankingReportItemTop{
  display:flex;
  justify-content:space-between;

  gap:8px;
}

.rankingReportItemTop > div{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.rankingReportItemTop b{
  color:#3c526d;

  font-size:9px;
}

.rankingReportItemTop span{
  color:#8a96a5;

  font-size:7px;
}

.rankingReportItem p{
  margin:
    8px
    0;

  color:#687a91;

  font-size:8px;
  line-height:1.5;
}

.rankingReportStatus{
  align-self:flex-start;

  padding:
    4px
    6px;

  border-radius:999px;

  background:#fff1d7;

  color:#87601e;

  font-size:6px;
  font-weight:900;
}

.rankingReportStatus.resolvida{
  background:#e6f7ed;

  color:#267049;
}

.rankingReportStatus.arquivada{
  background:#f0f2f5;

  color:#707b89;
}

.rankingReportActions{
  display:flex;
  flex-wrap:wrap;

  gap:4px;

  margin-top:8px;
}

.rankingReportActions button{
  padding:
    5px
    7px;

  border:
    1px solid #d5dfea;

  border-radius:6px;

  background:#fff;

  color:#506681;

  font-size:7px;
  font-weight:750;

  cursor:pointer;
}

.rankingHistoryBlock{
  margin-top:10px;
}

.rankingHistoryList{
  display:flex;
  flex-direction:column;

  gap:0;
}

.rankingHistoryItem{
  display:grid;

  grid-template-columns:
    10px
    minmax(0,1fr);

  gap:8px;

  padding:
    9px
    0;

  border-bottom:
    1px solid #edf1f5;
}

.rankingHistoryItem:last-child{
  border-bottom:0;
}

.rankingHistoryDot{
  width:7px;
  height:7px;

  margin-top:4px;

  border-radius:50%;

  background:#2e74c7;
}

.rankingHistoryItem > div{
  display:flex;
  flex-direction:column;

  gap:2px;
}

.rankingHistoryItem b{
  color:#3b526f;

  font-size:9px;
}

.rankingHistoryItem span{
  color:#8a96a5;

  font-size:7px;
}

.rankingHistoryItem small{
  margin-top:3px;

  color:#718095;

  font-size:7px;
  line-height:1.5;
}

.rankingManagementEmpty,
.rankingManagementEmptyCard{
  color:#8592a1;

  font-size:8px;
  text-align:center;
}

.rankingManagementEmpty{
  padding:24px !important;
}

.rankingManagementEmptyCard{
  padding:24px;
}

.rankingModalOpen{
  overflow:hidden;
}

.rankingModerationModal{
  position:fixed;

  inset:0;

  z-index:99999;

  display:grid;
  place-items:center;

  padding:20px;
}

.rankingModerationModal[hidden]{
  display:none !important;
}

.rankingModerationBackdrop{
  position:absolute;

  inset:0;

  background:
    rgba(10,27,50,.55);

  backdrop-filter:
    blur(3px);
}

.rankingModerationDialog{
  position:relative;

  z-index:2;

  width:min(
    500px,
    100%
  );

  padding:20px;

  border-radius:14px;

  background:#fff;

  box-shadow:
    0 24px 70px
    rgba(0,0,0,.24);
}

.rankingModerationDialogHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:15px;

  margin-bottom:16px;
}

.rankingModerationDialogHeader h2{
  margin:
    5px
    0
    0;

  color:#314967;

  font-size:18px;
}

.rankingModerationClose{
  width:31px;
  height:31px;

  border:
    1px solid #dbe3ec;

  border-radius:8px;

  background:#fff;

  color:#64758b;

  font-size:18px;

  cursor:pointer;
}

.rankingReportDetails{
  margin-top:11px;
}

.rankingModerationDialogFooter{
  display:flex;
  justify-content:flex-end;

  gap:7px;

  margin-top:14px;
}

.rankingModerationCancel,
.rankingModerationSubmit{
  min-height:36px;

  padding:
    0 12px;

  border-radius:8px;

  font-size:9px;
  font-weight:850;

  cursor:pointer;
}

.rankingModerationCancel{
  border:
    1px solid #d3deea;

  background:#fff;

  color:#586d86;
}

.rankingModerationSubmit{
  border:0;

  background:#0e60c5;

  color:#fff;
}

.rankingModerationModalMessage{
  min-height:18px;

  margin-top:8px;

  color:#a34a57;

  font-size:8px;
  font-weight:750;
}

.rankingModerationModalMessage.ok{
  color:#28704a;
}

@media(max-width:850px){

  .rankingManagementStats{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .rankingManagementColumns{
    grid-template-columns:1fr;
  }

  .rankingManagementStatusBox{
    grid-template-columns:1fr;
  }

}

@media(max-width:560px){

  .rankingManagement{
    padding:
      20px
      15px;
  }

  .rankingManagementHeader{
    flex-direction:column;
  }

  .rankingManagementStats{
    grid-template-columns:1fr 1fr;
  }

}
/* =========================================================
   V18-C6-E-R1
   CRIADOR ONLY + EXPIRACAO AUTOMATICA 25 DIAS
   ========================================================= */

.rankingExpiryWizardNotice,
.rankingExpiryNotice{
  display:flex;
  align-items:flex-start;

  gap:12px;

  border:
    1px solid #cbdcf3;

  border-radius:11px;

  background:
    linear-gradient(
      120deg,
      #f3f8ff,
      #fafcff
    );
}

.rankingExpiryWizardNotice{
  margin-top:18px;

  padding:
    13px
    14px;
}

.rankingExpiryNotice{
  margin-top:10px;

  padding:
    13px
    16px;
}

.rankingExpiryIcon{
  flex:0 0 auto;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#0e5fc4;

  color:#fff;

  font-size:9px;
  font-weight:950;
}

.rankingExpiryWizardNotice b,
.rankingExpiryNotice strong{
  display:block;

  color:#294d78;

  font-size:10px;
}

.rankingExpiryWizardNotice p,
.rankingExpiryNotice p{
  margin:
    4px
    0
    0;

  color:#657b95;

  font-size:8px;
  line-height:1.55;
}

.rankingExpiryNotice span{
  display:block;

  margin-top:6px;

  color:#708198;

  font-size:8px;
}

.rankingExpiryNotice span b{
  display:inline;

  color:#245d9f;

  font-size:8px;
}

.rankingManagementOwnerBadge{
  background:#e9f3ff;

  color:#0b5fc0;
}

@media(max-width:560px){

  .rankingExpiryWizardNotice,
  .rankingExpiryNotice{
    gap:9px;
  }

}
/* =========================================================
   V18-C6-F
   COMPARTILHAMENTO / CSV / QA
   ========================================================= */

.rankingUtilityBar{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  margin:
    12px
    0;

  padding:
    13px
    14px;

  border:
    1px solid #dbe5f0;

  border-radius:11px;

  background:
    linear-gradient(
      120deg,
      #f8fbff,
      #fff
    );
}

.rankingUtilityText{
  min-width:0;
}

.rankingUtilityText > b{
  display:block;

  margin-top:4px;

  color:#304d70;

  font-size:10px;
}

.rankingUtilityText p{
  margin:
    3px
    0
    0;

  color:#78899d;

  font-size:8px;
  line-height:1.5;
}

.rankingUtilityActions{
  flex:0 0 auto;

  display:flex;
  align-items:center;

  gap:6px;
}

.rankingUtilityButton{
  min-height:35px;

  padding:
    0 11px;

  border:
    1px solid #0e5fc3;

  border-radius:8px;

  background:#0d61c8;

  color:#fff;

  font-size:8px;
  font-weight:850;

  cursor:pointer;

  transition:
    transform .15s ease,
    opacity .15s ease,
    background .15s ease;
}

.rankingUtilityButton:hover:not(:disabled){
  transform:
    translateY(-1px);
}

.rankingUtilityButton.secondary{
  border-color:#c5d6e9;

  background:#fff;

  color:#34618f;
}

.rankingUtilityButton.export{
  border-color:#b7d9c6;

  background:#ebf8f1;

  color:#247049;
}

.rankingUtilityButton:disabled{
  opacity:.45;

  cursor:not-allowed;

  transform:none;
}

.rankingUtilityMessage{
  min-height:17px;

  margin:
    -4px
    0
    7px;

  color:#a44956;

  font-size:8px;
  font-weight:750;
}

.rankingUtilityMessage.ok{
  color:#24704a;
}

@media(max-width:700px){

  .rankingUtilityBar{
    align-items:flex-start;
    flex-direction:column;
  }

  .rankingUtilityActions{
    width:100%;

    flex-wrap:wrap;
  }

  .rankingUtilityButton{
    flex:
      1
      1
      120px;
  }

}