/* Tokens de design MeuRanking.
   Valores medidos nas telas exportadas do Figma do app (rankingdetenis-app)
   e iguais aos de Content/meuranking/style.css. */
:root {
    /* Laranja: cabeçalho, aba ativa, posição no ranking, títulos de seção. */
    --mr-primary: #e18335;
    --mr-primary-strong: #c8702a;
    --mr-primary-bright: #f5872c;
    --mr-primary-soft: #f3b98c;
    --mr-primary-tint: #fdf1e7;
    /* Verde: variante de marca, menu e rodapé. */
    --mr-secondary: #025f3a;
    --mr-secondary-strong: #014626;
    /* Verde-quadra da barra superior e do rodapé; amarelo-bola marca o item ativo do menu. */
    --mr-court: #014626;
    --mr-ball: #d9e84f;
    /* Ação principal: laranja da marca. */
    --mr-action: #e18335;
    --mr-action-strong: #c8702a;
    --mr-link: #c8702a;

    --mr-text: #17211c;
    --mr-text-muted: #666666;
    --mr-text-subtle: #979797;
    --mr-border: #e6e6e6;
    --mr-surface: #ffffff;
    --mr-bg: #f3f5f4;

    --mr-success: #91dc5a;
    --mr-danger: #e51d1d;
    --mr-warning: #f9aa18;
    --mr-info: #1e91d6;
    --mr-neutral: #aaaaaa;

    --mr-radius-sm: 4px;
    --mr-radius: 8px;
    --mr-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06);
    --mr-focus: 0 0 0 3px rgba(225, 131, 53, .3);

    --mr-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    /* Títulos e números: condensada, como placar. */
    --mr-font-display: "Barlow Condensed", "DM Sans", Arial, sans-serif;
}

/*   
 * Template Name: Velocity - Responsive Website Template for Products
 * Version: 1.5.4
 * Author: Xiaoying Riley at 3rd Wave Media
 * Website: http://themes.3rdwavemedia.com/
 * Twitter: @3rdwave_themes
*/
/* ======= Base ======= */

body {
  font-family: var(--mr-font);
  color: #444444;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p {
  margin-bottom: 15px;
  line-height: 1.5;
}
a {
  color: var(--mr-link);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}
a:hover {
  text-decoration: underline;
  color: var(--mr-primary-strong);
}
a:focus {
  text-decoration: none;
}
.btn,
a.btn {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  font-weight: bold;
}
.btn .fa,
a.btn .fa {
  color: #fff;
  margin-right: 5px;
}
a.btn-cta,
.btn-cta {
  padding: 8px 30px;
}
a.btn-cta-primary,
.btn-cta-primary {
  background: var(--mr-primary);
  border: 2px solid var(--mr-primary);
  color: #fff;
}
a.btn-cta-primary:hover,
.btn-cta-primary:hover {
  background: var(--mr-primary-strong);
  border: 2px solid var(--mr-primary-strong);
  color: #fff;
}
a.btn-cta-secondary,
.btn-cta-secondary {
  background: none;
  border: 2px solid var(--mr-primary);
  color: var(--mr-primary);
}
a.btn-cta-secondary:hover,
.btn-cta-secondary:hover {
  background: var(--mr-primary);
  border: 2px solid var(--mr-primary);
  color: #fff;
}
a.btn-ghost,
.btn-ghost {
  background: none;
  border: 1px solid #fff;
  color: #fff !important;
  padding: 8px 20px;
  vertical-align: middle;
}
a.btn-ghost:hover,
.btn-ghost:hover {
  background: #4a6781;
  border: 1px solid #4a6781;
  color: #fff;
}
a.btn-ghost .fa,
.btn-ghost .fa {
  margin-right: 10px;
  font-size: 22px;
}
a.btn-ghost .text,
.btn-ghost .text {
  position: relative;
  top: -2px;
}
.highlight {
  color: var(--mr-primary);
}
.form-control {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  height: 40px;
  border-color: #eeeeee;
}
.form-control::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #a6a6a6;
}
.form-control:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #a6a6a6;
}
.form-control::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #a6a6a6;
}
.form-control:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #a6a6a6;
}
.form-control:focus {
  border-color: #e1e1e1;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.text-highlight {
  color: #952410;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"],
input[type="button"],
textarea {
    appearance: none;
}

select {
    /* appearance: none; */
    /* for mobile safari */
}

.video-container iframe {
  max-width: 100%;
}
/* ======= Header ======= */
.header {
  color: #fff;
  width: 100%;
  position: relative;
  z-index: 40;
  height: 80px;
}
.header.scrolled {
  height: 80px;
  top: 0;
}
.header.scrolled .main-nav .nav .nav-item a {
  color: #666666;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  background: var(--mr-primary);
  border-color: var(--mr-primary);
}
.header.scrolled .main-nav .nav .dropdown-menu a {
  color: #fff;
}
.header h1.logo {
  font-family: var(--mr-font);
  margin-top: 0;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 15px;
  float: left;
}
.header h1.logo a {
  color: #fff;
  padding: 15px 15px;
  display: inline-block;
  text-align: center;
  line-height: 1.4;
  max-width: 350px;
  background: var(--mr-primary);
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-transition: color 0.4s ease-in-out;
  -moz-transition: color 0.4s ease-in-out;
  -ms-transition: color 0.4s ease-in-out;
  -o-transition: color 0.4s ease-in-out;
  position: relative;
  font-size: 20px;
}
.header h1.logo a:hover {
  text-decoration: none;
}
.header h1.logo .logo-title {
  vertical-align: middle;
  line-height: 1.6;
}
.header .main-nav {
  margin-top: 15px;
}
.header .main-nav .navbar-toggle {
  margin-right: 0;
  margin-top: 0;
  background: none;
  position: absolute;
  right: 10px;
  top: 10px;
}
.header .main-nav .navbar-toggle:focus {
  outline: none;
}
.header .main-nav .navbar-toggle .icon-bar {
  background-color: rgba(255, 255, 255, 0.6);
  height: 3px;
}
.header .main-nav .navbar-toggle:hover .icon-bar {
  background-color: #fff;
}
.header .main-nav .nav .nav-item {
  font-weight: normal;
  text-transform: uppercase;
  font-size: 13px;
  margin-right: 15px;
}
.header .main-nav .nav .nav-item.active a {
  color: var(--mr-primary);
  background: none;
  font-weight: bold;
}
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 10px;
  margin-top: 5px;
  font-size: 13px;
}
.header .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary:hover {
  border: 1px solid var(--mr-primary);
  background: var(--mr-primary);
}
.header .main-nav .nav .nav-item a {
  color: #fff;
}
.header .main-nav .nav .nav-item a:hover {
  color: var(--mr-primary);
  background: none;
}
.header .main-nav .nav .nav-item a:focus {
  outline: none;
  background: none;
}
.header .main-nav .nav .nav-item a:active {
  outline: none;
  background: none;
}
.header .main-nav .nav .nav-item.active {
  color: var(--mr-primary);
}
.header .main-nav .nav .nav-item.last {
  margin-right: 0;
}
.header .main-nav .nav.active {
  position: relative;
}
.header .main-nav .nav.active > a {
  background: var(--mr-primary-strong);
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
}
.header .main-nav .nav.active > a:before {
  content: "\f0d8";
  position: absolute;
  bottom: -8px;
  left: 0;
  text-align: center;
  font-family: FontAwesome;
  display: block;
  font-size: 12px;
  width: 100%;
}
.header .main-nav .nav.active > a.dropdown-toggle:before {
  display: none;
}
.header .main-nav .nav.open a {
  background: none;
}
.header .main-nav .nav .dropdown-menu {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0;
  border: none;
  text-transform: none;
  min-width: 180px;
  background: var(--mr-secondary);
}
.header .main-nav .nav .dropdown-menu:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--mr-secondary);
  position: absolute;
  right: 30px;
  top: -10px;
}
.header .main-nav .nav .dropdown-menu a {
  border-bottom: 1px solid #212e3a;
  padding: 8px 20px;
  color: #fff;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.header .main-nav .nav .dropdown-menu a:hover {
  background: #2e4050;
  color: #fff;
}
/* Override bootstrap default */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background: none;
}
/* ======= Headline Background & Slideshow ======= */
.bg-slider-wrapper {
  content: "";
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 780px;
  background: #373737;
}
.bg-slider-wrapper .flexslider {
  margin: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.bg-slider-wrapper .flexslider .slide {
  display: block;
  height: 780px;
}
.bg-slider-wrapper .flexslider .slide.slide-1 {
  background: var(--mr-secondary) url('../images/background/bg-header-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-2 {
  background: var(--mr-secondary) url('../images/background/bg-header-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .slide.slide-3 {
  background: var(--mr-secondary) url('../images/background/bg-header-3.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.bg-slider-wrapper .flexslider .flex-control-nav {
  z-index: 30;
  bottom: 30px;
  position: relative;
}
.bg-slider-wrapper .flexslider .flex-control-nav li a {
  background: #999999;
}
.bg-slider-wrapper .flexslider .flex-control-nav li a.flex-active {
  background: #bfbfbf;
}
.headline-bg {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 500px;
  background: var(--mr-secondary) url('../images/background/bg-header-small-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.headline-bg-beach {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 500px;
    background: var(--mr-secondary) url('../images/background/bg-header-tenis.jpg') no-repeat 50% top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.headline-bg.pricing-headline-bg {
  background-image: url('../images/background/bg-header-small-2.jpg');
}
.headline-bg.contact-headline-bg {
  background-image: url('../images/background/bg-header-small-3.jpg');
}
.headline-bg.about-headline-bg {
  background-image: url('../images/background/bg-header-small-4.jpg');
}
/* ======= Promo ======= */
.promo {
  padding-top: 120px;
  position: relative;
  color: #fff;
  margin-bottom: 80px;
  height: 620px;
  z-index: 10;
}
.promo .title {
  font-size: 46px;
  margin-bottom: 20px;
  margin-top: 0;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
.promo.section .intro {
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.promo .btn-cta {
  font-size: 18px;
}
.promo .btn-link {
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  -webkit-opacity: 0.7;
  -moz-opacity: 0.7;
  opacity: 0.7;
  text-decoration: none;
}
.promo .btn-link:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  text-decoration: none;
}
.promo .btn-link:focus {
  outline: none;
}
.promo .btn-link .fa {
  margin-right: 5px;
  font-size: 18px;
  position: relative;
  top: 2px;
}
/* ======= sections-wrapper ======= */
.sections-wrapper {
  background: #fff;
  z-index: 20;
  position: relative;
}
.section .intro {
  max-width: 700px;
  margin: 0 auto;
  margin-bottom: 60px;
  text-align: center;
  color: #999999;
  font-size: 18px;
}
.section-on-bg .title {
  color: #fff;
}
.section-on-bg .intro {
  color: #fff;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
/* ======= Why ======= */
.why {
  padding-top: 80px;
  padding-bottom: 80px;
}
.why .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
}
.why .intro {
  color: #999999;
  margin-bottom: 30px;
  font-size: 18px;
}
.why .item {
  padding: 90px 0;
  border-bottom: 1px solid #eeeeee;
}
.why .item.last-item {
  border-bottom: none;
}
.why .item .title {
  font-size: 26px;
  color: #4a6781;
  margin-top: 0;
  margin-bottom: 15px;
}
.why .item .desc {
  margin-bottom: 60px;
}
.why .item .desc .fa {
  margin-right: 5px;
}
.why .item .quote {
  position: relative;
}
.why .item .quote .quote-profile {
  position: absolute;
  left: 0;
}
.why .item .quote .quote-content {
  margin-left: 90px;
  background: #f5f5f5;
  border-left: 4px solid #e8e8e8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  font-size: 14px;
  padding: 15px;
}
.why .item .quote .quote-content:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #e8e8e8;
  position: absolute;
  left: 80px;
  top: 25px;
}
.why .item .quote blockquote {
  border-left: none;
  font-style: italic;
  color: #666666;
  font-size: 16px;
  padding: 0;
  margin-bottom: 10px;
}
.why .item .quote .source {
  color: #999999;
  font-size: 13px;
  margin-bottom: 0;
}
.why .item .quote .source a {
  color: #999999;
}
.why .item .quote .source a:hover {
  color: #808080;
}
.why .figure {
  position: relative;
  text-align: center;
}
.why .figure .figure-caption {
  color: #b3b3b3;
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
.why .figure .figure-caption a {
  color: #b3b3b3;
}
.why .figure .figure-caption a:hover {
  color: var(--mr-primary);
}
.why .figure img {
  margin-left: auto;
  margin-right: auto;
}
.why .control {
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -65px;
}
.why .control .play-trigger {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  width: 60px;
  height: 60px;
  border: 4px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0 auto;
  text-align: center;
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}
.why .control .play-trigger:active,
.why .control .play-trigger:focus {
  outline: none;
}
.why .control .play-trigger:hover {
  color: #fff;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  background: rgba(0, 0, 0, 0.6);
}
.why .control .play-trigger:hover .fa {
  cursor: pointer;
}
.why .control .play-trigger .fa {
  font-size: 26px;
  position: relative;
  left: 2px;
}
.why .feature-lead .title {
  font-weight: 300;
  font-size: 16px;
  margin-bottom: 15px;
}
/* ======= Testimonials ======= */
.testimonials {
  background: url('../images/background/bg-header-2.jpg') no-repeat 50% top;
  padding-top: 60px;
  padding-bottom: 120px;
}
.testimonials .carousel-indicators {
  bottom: -60px;
  z-index: auto;
}
.testimonials .carousel-indicators li {
  background: #cccccc;
  border: none;
  margin: 1px;
}
.testimonials .carousel-indicators li.active {
  background: var(--mr-primary-soft);
  border: none;
  width: 10px;
  height: 10px;
  margin: 1px;
}
.testimonials .title {
  font-size: 46px;
  margin-bottom: 20px;
  margin-top: 0;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  color: #fff
}
.testimonials .item .profile {
  position: absolute;
  left: 0;
}
.testimonials .item .content {
  padding-left: 210px;
}
.testimonials .item blockquote {
  font-size: 20px;
  font-weight: 300;
  border-left: 0;
  padding: 0;
  position: relative;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  color: #fff
}
.testimonials .item blockquote .fa {
  position: absolute;
  color: var(--mr-primary-soft);
  font-size: 22px;
  left: -45px;
}
.testimonials .item .source {
  color: var(--mr-primary);
}
.testimonials .item .source .title {
  font-size: 16px;
  color: #fff;
}
/* ======= Press ======= */
.press {
  padding-top: 80px;
  padding-bottom: 80px;
}
.press .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.press .press-list {
  margin-bottom: 15px;
  text-align: center;
}
.press .press-list.last {
  margin-bottom: 60px;
}
.press .press-list li {
  display: block;
  height: 80px;
}
.press .press-list li img {
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.press .press-list li:hover img {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.press .press-lead .title {
  font-size: 18px;
  margin-bottom: 15px;
}
/* ======= cta-section ======= */
.cta-section {
  background: var(--mr-secondary) url('../images/background/bg-footer-5.jpg') no-repeat left top;
  background-size: cover;
  min-height: 420px;
  color: #fff;
  padding-top: 80px;
  border: none;
}
.cta-section.pricing-cta-section {
  background-image: url('../images/background/bg-footer-5.jpg');
}
.cta-section.contact-cta-section {
  background-image: url('../images/background/bg-footer-3.jpg');
}
.cta-section .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.cta-section .btn-cta {
  font-size: 20px;
}
.cta-section .intro {
  margin-bottom: 15px;
  color: #fff;
}
.cta-section .counting {
  color: var(--mr-primary);
  font-weight: bold;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
/* ======= Features video ======= */
.features-video {
  padding-top: 170px;
  position: relative;
  z-index: 10;
}
.features-video .title {
  font-size: 36px;
  margin-bottom: 60px;
  margin-top: 0;
  color: #fff;
  font-weight: 300;
}
.features-video .video-container {
  max-width: 800px;
  margin: 0 auto;
}
.features-video iframe {
  background: #fff;
  padding: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #eeeeee;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
}
/* ======= Features tabs ======= */
.features-tabbed {
  padding-top: 80px;
  padding-bottom: 80px;
}
.features-tabbed .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.features-tabbed .tab-content {
  padding: 60px 30px;
}
.features-tabbed .tab-content .title {
  font-size: 16px;
  color: var(--mr-primary-soft);
  font-weight: bold;
  margin-bottom: 30px;
}
.features-tabbed .tab-content .desc {
  margin-bottom: 30px;
  color: #666666;
}
.features-tabbed .tab-content .desc ul {
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.features-tabbed .tab-content .desc ul li {
  margin-bottom: 10px;
}
.features-tabbed .tab-content .desc ul .fa {
  color: var(--mr-primary);
  margin-right: 5px;
}
.features-tabbed .tab-content .desc blockquote {
  font-style: italic;
  color: #808080;
}
.features-tabbed .tab-content .desc .table {
  font-size: 14px;
  padding: 15px 0;
}
.features-tabbed .tab-content .desc .box {
  background: #f5f5f5;
  padding: 30px;
  font-size: 14px;
}
.features-tabbed .tab-content .figure {
  margin-bottom: 60px;
}
.features-tabbed .tab-content .figure img {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
  margin: 0 auto;
}
.features-tabbed .tab-content .figure .figure-caption {
  color: #b3b3b3;
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
}
.features-tabbed .tab-content .figure .figure-caption a {
  color: #b3b3b3;
}
.features-tabbed .tab-content .figure .figure-caption a:hover {
  color: var(--mr-primary);
}
.nav-tabs {
  border: none;
  margin: 0 auto;
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-align: center;
  position: relative;
}
.nav-tabs:before {
  content: "";
  display: block;
  border-bottom: 1px solid #eeeeee;
  position: absolute;
  bottom: 0;
}
.nav-tabs > li {
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid #eeeeee;
  border-right: none;
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  width: 20%;
  /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
}
.nav-tabs > li > a {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin-right: 0px;
  color: #999999;
  padding: 15px 30px;
  font-size: 14px;
  background: #fafafa;
  border: none;
}
.nav-tabs > li > a .fa {
  font-size: 20px;
}
.nav-tabs > li > a:hover {
  background: #f5f5f5;
}
.nav-tabs > li.active {
  border-top-color: var(--mr-primary);
  border-bottom-color: #fff;
}
.nav-tabs > li.active > a {
  color: var(--mr-primary);
  background: #fff;
  -webkit-box-shadow: inset 0 3px 0 var(--mr-primary);
  -moz-box-shadow: inset 0 3px 0 var(--mr-primary);
  box-shadow: inset 0 3px 0 var(--mr-primary);
  border: none;
}
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: none;
}
.nav-tabs > li.active:hover > a {
  border-top: 0;
  border: none;
  color: var(--mr-primary);
}
.nav-tabs > li.last {
  border-right: 1px solid #eeeeee;
}
/* ======= Steps ======= */
.steps {
  background: #f5f5f5;
  padding-top: 80px;
  padding-bottom: 120px;
}
.steps .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.steps .step {
  padding: 30px 60px;
  color: #666666;
}
.steps .step .title {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
}
.steps .step .title .number {
  width: 90px;
  height: 90px;
  display: block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: center;
  background: var(--mr-primary);
  border: 5px solid var(--mr-primary-soft);
  color: #fff;
  margin: 0 auto;
  padding-top: 25px;
  font-size: 26px;
  font-weight: bold;
  font-family: arial, sans-serif;
  margin-bottom: 30px;
}
.steps .step .title .text {
  color: var(--mr-primary-soft);
  font-weight: bold;
  font-size: 16px;
}
.steps .btn-cta-primary {
  margin: 0 auto;
  margin-top: 60px;
  font-size: 20px;
}
/* ======= Pricing ======= */
.pricing {
  padding: 80px 0;
  padding-top: 170px;
  position: relative;
  z-index: 10;
}
.pricing .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 30px;
  color: #fff;
}
.pricing .intro {
  color: #fff;
  margin-bottom: 80px;
}
.pricing .item {
  padding: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}
.pricing .item.best-buy {
  top: -15px;
  z-index: 11;
  position: relative;
}
.pricing .item.best-buy .item-inner {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.pricing .item.best-buy .item-inner:hover {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
}
.pricing .item.best-buy .heading {
  padding-top: 45px;
}
.pricing .item.best-buy .content {
  padding-bottom: 45px;
}
.pricing .item .item-inner {
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  border: 1px solid #eeeeee;
}
.pricing .item .item-inner:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.pricing .item .heading {
  margin-top: 0;
  padding: 30px 15px;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.pricing .item .heading .title {
  margin-bottom: 30px;
  padding-bottom: 30px;
  font-weight: 400;
  font-size: 18px;
  border-bottom: 1px dashed #eeeeee;
  color: #444444;
}
.pricing .item .content {
  padding: 30px 15px;
  padding-top: 0;
  font-size: 14px;
}
.pricing .item .price-figure {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0 auto;
}
.pricing .item .price-figure .number {
  font-size: 42px;
  font-weight: bold;
}
.pricing .item .price-figure .unit {
  font-weight: 400;
  color: #b3b3b3;
}
.pricing .item .price-figure .currency {
  top: -12px;
  right: 2px;
  position: relative;
  font-family: arial, sans-serif;
  color: #666666;
  font-size: 18px;
}
.pricing .item .ribbon {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 110px;
  height: 110px;
  overflow: hidden;
}
.pricing .item .ribbon .text {
  position: relative;
  left: -8px;
  top: 18px;
  width: 158px;
  padding: 10px 10px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background-color: #5d80a1;
  -webkit-transform: rotate(45deg) translate3d(0, 0, 0);
  -moz-transform: rotate(45deg) translate3d(0, 0, 0);
  -ms-transform: rotate(45deg) translate3d(0, 0, 0);
  -o-transform: rotate(45deg) translate3d(0, 0, 0);
}
.pricing .item .ribbon .text:before,
.pricing .item .ribbon .text:after {
  content: '';
  position: absolute;
  bottom: -5px;
  border-top: 5px solid #2e4050;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.pricing .item .ribbon .text:before {
  left: 0;
}
.pricing .item .ribbon .text:after {
  right: 0;
}
.pricing .item .feature-list {
  margin-bottom: 30px;
}
.pricing .item .feature-list li {
  border-bottom: 1px solid #f3f3f3;
  padding: 10px;
}
.pricing .item .feature-list li .fa {
  margin-right: 5px;
  color: #4a6781;
}
.pricing .item .feature-list li.disabled {
  color: #999999;
}
.pricing .item .feature-list li.disabled .fa {
  color: #999999;
}
/* ======= Download Apps ======= */
.download-page .headline-bg {
  height: 1200px;
  background: var(--mr-secondary) url('../images/background/bg-mobile-headline.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.apps-section {
  min-height: 900px;
  padding-top: 160px;
}
.apps-section .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 15px;
  color: #fff;
}
.apps-section .intro {
  text-align: left;
  margin-bottom: 60px;
}
.apps-section .phone-holder {
  width: 324px;
  height: 651px;
  display: block;
  background: url('../images/mobile/iphone.png') no-repeat left top;
  position: relative;
}
.apps-section .phone-holder .screenshot {
  position: absolute;
  left: 21px;
  top: 75px;
}
.apps-section .content-area .download-list li {
  margin-bottom: 15px;
}
.apps-section .content-area .download-list li .btn {
  width: 220px;
  text-align: left;
}
.apps-section .content-area .info {
  margin-top: 60px;
  margin-bottom: 60px;
  background: rgba(31, 51, 64, 0.8);
  padding: 30px;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.apps-section .content-area .info .title {
  margin-top: 15px;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: normal;
}
/* ======= FAQ Section ======= */
.faq {
  background: #f5f5f5;
  padding-top: 80px;
  padding-bottom: 120px;
}
.faq .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 60px;
}
.faq .panel {
  background: #fff;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
}
.faq .panel:hover {
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);
}
.faq .panel .panel-heading {
  padding: 15px 30px;
}
.faq .panel .panel-body {
  padding: 30px;
  padding-top: 0;
  color: #666666;
}
.faq .panel .panel-title {
  font-weight: normal;
  color: #666666;
}
.faq .panel .panel-title a {
  text-decoration: none;
}
.faq .panel .panel-title .active {
  color: var(--mr-primary);
}
.faq .panel .panel-title .panel-toggle .fa {
  margin-right: 10px;
  color: var(--mr-primary-soft);
}
.faq .panel .panel-title:hover .fa {
  color: var(--mr-primary);
}
.faq .contact-lead {
  margin-top: 60px;
}
.faq .contact-lead .title {
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 15px;
  color: #999999;
}
/* ======= Contact section ======= */
.contact-section {
  padding: 80px 0;
  padding-top: 90px;
  position: relative;
  z-index: 10;
}
.contact-section .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 30px;
}
.contact-section .intro {
  margin-bottom: 60px;
}
.contact-section .contact-form {
  margin-left: 15px;
  margin-right: 15px;
}
.contact-section .contact-form .contact-form-inner {
  background: #fff;
  padding: 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #eeeeee;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
}
.contact-section .contact-form .error {
  color: var(--mr-primary);
  font-family: arial, sans-serif;
  display: block;
  font-size: 14px;
  text-align: left;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: 300;
}
/* ======= Contact-other section ======= */
.contact-other-section .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 30px;
}
.contact-other-section .other-info li {
  margin-bottom: 15px;
  padding: 15px;
  position: relative;
  color: #666666;
  text-align: left;
  padding-left: 90px;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  border: 1px solid #eeeeee;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.contact-other-section .other-info li a {
  color: #666666;
}
.contact-other-section .other-info li a:hover {
  color: var(--mr-primary);
}
.contact-other-section .other-info li .fa {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--mr-primary);
  color: #fff;
  width: 60px;
  height: 100%;
  font-size: 20px;
  padding-top: 15px;
  text-align: center;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.contact-other-section .other-info li .fa.fa-twitter {
  font-size: 22px;
}
.contact-other-section .other-info li .fa.fa-phone {
  font-size: 22px;
}
.contact-other-section .other-info li .fa.fa-map-marker {
  font-size: 22px;
  padding-top: 45px;
}
/* ======= Map section ======= */
.map-section {
  padding-top: 80px;
  padding-bottom: 80px;
}
.map-section .title {
  font-size: 36px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 30px;
}
.map-section .gmap-wrapper {
  padding: 10px;
  border: 1px solid #eeeeee;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.map-section .gmap {
  height: 400px;
  text-align: left;
  font-weight: normal;
}
.map-section .gmap,
.map-section .gmap *,
.map-section .gmap *:before,
.map-section .gmap *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.map-section .gmap .title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 15px;
  margin-top: 5px;
}
.map-section .gmap .gm-style-iw {
  width: 150px;
}
/* ======= Blog Slideshow ======= */
.blog-slider {
  margin-bottom: 60px;
  margin-top: 80px;
  border: none;
  height: 400px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.blog-slider .slide {
  display: block;
  height: 400px;
  background-color: var(--mr-secondary);
}
.blog-slider .slide:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10;
}
.blog-slider .slide.slide-1 {
  background: var(--mr-secondary) url('../../images/blog/post-1.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.blog-slider .slide.slide-2 {
  background: var(--mr-secondary) url('../../images/blog/post-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.blog-slider .slide.slide-3 {
  background: var(--mr-secondary) url('../../images/blog/post-3.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.blog-slider .slide.slide-4 {
  background: var(--mr-secondary) url('../../images/blog/post-4.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.blog-slider .flex-control-nav {
  bottom: 15px;
  z-index: 10;
}
.blog-slider .flex-control-nav li a {
  background: #5e5e5e;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.blog-slider .flex-control-nav li a.flex-active {
  background: #fff;
}
.blog-slider .flex-direction-nav a {
  text-shadow: none;
  color: #fff;
  position: absolute;
  width: 30px;
  height: 50px;
  display: block;
}
.blog-slider .flex-direction-nav a.flex-prev {
  left: 5%!important;
}
.blog-slider .flex-direction-nav a.flex-prev:before {
  content: "";
  text-indent: -9999px;
  background: url('../../images/flexslider/carousel-arrow-prev.png') no-repeat left top;
  display: block;
  width: 30px;
  height: 50px;
}
.blog-slider .flex-direction-nav a.flex-next {
  right: 5%!important;
}
.blog-slider .flex-direction-nav a.flex-next:before {
  content: "";
  text-indent: -9999px;
  background: url('../../images/flexslider/carousel-arrow-next.png') no-repeat right top;
  display: block;
  width: 30px;
  height: 50px;
}
.blog-slider:hover .flex-prev {
  left: 5%!important;
}
.blog-slider:hover .flex-next {
  right: 5%!important;
}
.blog-slider .flex-caption {
  padding-top: 90px;
  position: relative;
  z-index: 20;
  text-align: center;
  color: #fff;
}
.blog-slider .flex-caption a {
  color: #fff;
}
.blog-slider .flex-caption .title {
  font-size: 42px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 15px;
  margin-top: 0;
}
.blog-slider .flex-caption .title a:hover {
  text-decoration: none;
}
.blog-slider .flex-caption .meta {
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  margin-bottom: 30px;
}
.blog-slider .flex-caption a.more-link {
  color: #fff;
}
.blog-slider .flex-caption a.more-link:hover {
  color: var(--mr-primary);
}
/* Blog homepage */
.blog-list .post {
  padding: 0 15px;
  margin-bottom: 30px;
}
.blog-list .post .post-inner {
  padding: 0px;
  position: relative;
  border: 1px solid #eeeeee;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
}
.blog-list .post .post-thumb {
  background: var(--mr-secondary);
  overflow: hidden;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.blog-list .post .post-thumb img {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  margin: 0 auto;
  text-align: center;
}
.blog-list .post .post-thumb img:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}
.blog-list .post .content {
  padding: 30px;
  padding-bottom: 15px;
  color: #666666;
}
.blog-list .post .content .post-title {
  margin-top: 0;
  font-size: 18px;
}
.blog-list .post .content .post-title a {
  color: var(--mr-primary);
}
.blog-list .post .content .post-entry {
  margin-bottom: 15px;
}
.blog-list .post .content .meta {
  font-size: 13px;
  color: #999999;
  margin-bottom: 0;
}
.blog-list .post .content .meta ul {
  margin-left: 0;
  border-top: 1px solid #eeeeee;
  padding-top: 15px;
}
.blog-list .post .content .meta li:first-child {
  padding-left: 0;
}
.blog-list .post .content .meta li .fa {
  margin-right: 5px;
}
.blog-list .post .content .meta li a {
  color: #999999;
}
.blog-list .post .content .meta li a:hover {
  color: var(--mr-primary);
}
/* Single blog post */
.blog-entry-wrapper {
  padding-bottom: 80px;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading {
  margin-bottom: 60px;
  position: relative;
  height: 500px;
  background: var(--mr-secondary) url('../images/blog/post-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .container {
  position: relative;
  z-index: 11;
  max-width: 700px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 120px;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .title {
  margin-bottom: 30px;
  font-size: 42px;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta {
  font-size: 18px;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta a {
  color: #fff;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta a:hover {
  color: #fff;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .meta .fa {
  margin-right: 5px;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top {
  position: absolute;
  z-index: 11;
  width: 100%;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 30px;
  margin-bottom: 0;
  font-size: 14px;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top a {
  color: #fff;
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
}
.blog-entry-wrapper .blog-entry .blog-entry-heading .post-nav-top a:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.blog-entry-wrapper .blog-entry .blog-entry-content {
  font-size: 18px;
  line-height: 1.6;
  color: #666666;
}
.blog-entry-wrapper .blog-entry .blog-entry-content h1,
.blog-entry-wrapper .blog-entry .blog-entry-content h2,
.blog-entry-wrapper .blog-entry .blog-entry-content h3,
.blog-entry-wrapper .blog-entry .blog-entry-content h4,
.blog-entry-wrapper .blog-entry .blog-entry-content h5,
.blog-entry-wrapper .blog-entry .blog-entry-content h6 {
  color: #4a6781;
}
.blog-entry-wrapper .blog-entry .blog-entry-content h1.section-heading,
.blog-entry-wrapper .blog-entry .blog-entry-content h2.section-heading,
.blog-entry-wrapper .blog-entry .blog-entry-content h3.section-heading,
.blog-entry-wrapper .blog-entry .blog-entry-content h4.section-heading,
.blog-entry-wrapper .blog-entry .blog-entry-content h5.section-heading,
.blog-entry-wrapper .blog-entry .blog-entry-content h6.section-heading {
  margin-top: 60px;
  margin-bottom: 30px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content p {
  margin-bottom: 30px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content ul,
.blog-entry-wrapper .blog-entry .blog-entry-content ol {
  margin-bottom: 30px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content ul li,
.blog-entry-wrapper .blog-entry .blog-entry-content ol li {
  margin-bottom: 15px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure {
  margin-bottom: 30px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption {
  font-size: 16px;
  color: #999999;
  margin-top: 10px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption a {
  color: #999999;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .figure .figure-caption a:hover {
  color: var(--mr-primary);
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style {
  margin-bottom: 30px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style li {
  list-style: none;
  margin-bottom: 5px;
}
.blog-entry-wrapper .blog-entry .blog-entry-content .custom-list-style li .fa {
  margin-right: 10px;
  color: var(--mr-primary);
}
.blog-entry-wrapper .blog-entry .post-nav {
  margin-bottom: 60px;
  margin-top: 60px;
}
.blog-entry-wrapper .blog-entry .post-nav .nav-next {
  float: right;
}
.blog-entry-wrapper .blog-entry .post-nav .nav-next .fa {
  margin-left: 5px;
}
.blog-entry-wrapper .blog-entry .post-nav .nav-previous .fa {
  margin-right: 5px;
}
.blog-entry-wrapper .custom-quote {
  border: none;
  padding: 60px 30px;
  font-family: var(--mr-font);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
}
.blog-entry-wrapper .custom-quote p {
  color: #666666;
  line-height: 1.6;
}
.blog-entry-wrapper .custom-quote .fa {
  color: var(--mr-primary);
  margin-right: 10px;
}
.blog-entry-wrapper .custom-quote .source {
  font-family: var(--mr-font);
  font-style: normal;
  font-weight: normal;
  margin-bottom: 0 !important;
  font-size: 16px;
  text-align: right;
}
.blog-entry-wrapper .custom-quote .source .fa {
  margin-right: 5px;
}
.blog-entry-wrapper .custom-quote .source .name {
  color: #444444;
}
.blog-entry-wrapper .custom-quote .source .title {
  font-size: 16px;
  color: #999999;
}
.blog-entry-wrapper .box {
  padding: 30px;
  background: #f5f5f5;
}
.blog-page .header-blog {
  position: fixed;
  top: 0;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  background: #fff;
  height: 80px;
}
.blog-page .header-blog .main-nav .nav .nav-item a {
  color: #666666;
}
.blog-page .header-blog .main-nav .nav .nav-item a:hover {
  color: var(--mr-primary);
}
.blog-page .header-blog .main-nav .nav .dropdown-menu a {
  color: #fff;
}
.blog-page .header-blog h1.logo a {
  max-width: inherit;
  background: none;
  color: var(--mr-primary);
  padding-left: 0;
  padding-top: 25px;
}
.blog-page .header-blog h1.logo a .sub {
  font-family: var(--mr-font);
  color: var(--mr-primary);
  font-weight: 300;
}
.blog-page .header-blog .main-nav .nav .nav-item.last {
  margin-right: 40px;
}
.blog-page .header-blog .main-nav .nav .nav-item.last .fa {
  font-size: 16px;
  margin-right: 5px;
}
/* Blog category page */
.blog-category {
  margin-top: 160px;
}
.blog-category .page-title {
  margin-top: 0;
  margin-bottom: 60px;
  font-weight: 300;
  font-size: 36px;
  padding-top: 80px;
}
.blog-category .page-title .fa {
  color: #384d60;
  margin-right: 10px;
  font-size: 30px;
}
.blog-category .blog-list .post .content .post-title {
  font-size: 24px;
}
.blog-category .blog-list .post .content .meta ul {
  border-top: none;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
  padding-top: 5px;
}
.blog-category .blog-category-list .post {
  margin-bottom: 60px;
}
/* Blog archive page */
.blog-archive .blog-list .post .content {
  padding-left: 80px;
}
.blog-archive .post {
  position: relative;
}
.blog-archive .post .date-label {
  background: #f5f5f5;
  display: inline-block;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 13px;
  position: absolute;
  left: 15px;
  top: 30px;
  color: #fff;
}
.blog-archive .post .date-label .month {
  background: var(--mr-primary);
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  padding: 2px 0;
}
.blog-archive .post .date-label .date-number {
  clear: left;
  display: block;
  padding-top: 5px;
  font-size: 18px;
  font-family: var(--mr-font);
  font-weight: 500;
  color: var(--mr-primary);
}
/* ======= About Page ======= */
.story-section {
  padding-top: 90px;
  position: relative;
  z-index: 10;
}
.story-section .title {
  font-size: 36px;
  margin-bottom: 60px;
  margin-top: 0;
  color: #fff;
  font-weight: 300;
}
.story-section .story-container-inner {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  text-align: left;
}
.story-section .about {
  padding: 30px;
}
.story-section .belife {
  border-color: var(--mr-primary-soft);
  padding: 15px 30px;
  font-family: var(--mr-font);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  margin: 60px 30px;
  color: #666666;
}
.story-section .press-kit {
  padding-top: 60px;
  padding-bottom: 60px;
}
.story-section .press-kit .title {
  color: #444444;
  font-size: 28px;
}
.story-section .press-kit .btn {
  margin: 30px 0;
}
.story-section .team {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  text-align: center;
}
.story-section .team .title {
  color: #444444;
  font-size: 28px;
}
.story-section .team .member {
  margin-bottom: 30px;
}
.story-section .team .member .member-inner {
  background: var(--mr-secondary);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  text-align: center;
}
.story-section .team .member .member-inner img {
  margin: 0 auto;
}
.story-section .team .member .member-inner:hover img {
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
}
.story-section .team .member .member-inner:hover .social {
  visibility: visible;
}
.story-section .team .member .profile {
  background: var(--mr-secondary);
  color: #fff;
  text-align: center;
}
.story-section .team .member .profile .info {
  padding: 15px 0;
}
.story-section .team .member .profile .name {
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  font-size: 18px;
}
.story-section .team .member .profile .job-title {
  color: #fff;
  font-size: 14px;
}
.story-section .team .member .social {
  width: 100%;
  top: 50%;
  position: absolute;
  visibility: hidden;
}
.story-section .team .member .social-list {
  display: inline-block;
  margin: 0 auto;
}
.story-section .team .member .social-list a {
  color: #fff;
  background: var(--mr-primary);
  display: inline-block;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.story-section .team .member .social-list a .fa {
  padding-top: 10px;
  font-size: 18px;
}
.story-section .team .member .social-list a:hover {
  background: var(--mr-primary);
}
/* ======= Modal ======= */
.modal.modal-video .modal-dialog {
  width: 760px;
  margin-top: 90px;
}
.modal.modal-video .modal-body {
  padding: 0;
  padding-top: 0;
}
.modal.modal-video .modal-header {
  border: none;
  padding: 0;
  position: relative;
}
.modal.modal-video .modal-content {
  background: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.modal.modal-video button.close {
  font-size: 36px;
  font-weight: 300;
  text-shadow: none;
  color: #fff;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  background: none;
  position: absolute;
  right: 0px;
  bottom: 5px;
  z-index: 10;
}
.modal.modal-video button.close:hover {
  color: var(--mr-primary);
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.modal-backdrop.in {
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}
/* ======= Login Page ======= */
.has-full-screen-bg .upper-wrapper {
  background: var(--mr-secondary) url('../images/background/bg-screen-1.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.has-full-screen-bg.signup-page .upper-wrapper {
  background: var(--mr-secondary) url('../images/background/bg-header-2.jpg') no-repeat 50% top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.has-full-screen-bg .header h1.logo {
  float: none;
  text-align: center;
}
.has-full-screen-bg .header h1.logo a {
  margin: 0 auto;
}
.access-section {
  padding-bottom: 200px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.access-section .form-box .form-box-inner {
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  padding: 10px;
}
.access-section .form-box .title {
  font-weight: 300;
  margin-bottom: 60px;
  margin-top: 0;
}
.access-section.signup-section .title {
  margin-bottom: 15px;
}
.access-section.signup-section .intro {
  margin-bottom: 60px;
}
.access-section .form-group {
  position: relative;
}
.access-section .form-group.email:before {
  content: "\f007";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 10px;
  top: 12px;
  color: #999999;
}
.access-section .form-group.password:before {
  content: "\f023";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 10px;
  top: 12px;
  color: #999999;
}
.access-section .form-control {
  font-size: 16px;
  padding-left: 10px;
  font-size: 14px;
}
.access-section .form-control::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999999;
}
.access-section .form-control:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999999;
}
.access-section .form-control::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999999;
}
.access-section .form-control:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999999;
}
.access-section .social-btns {
  padding-left: 60px;
  min-height: 250px;
  margin-bottom: 15px;
}
.access-section .social-btns li {
  margin-bottom: 10px;
}
.access-section .social-btns li .btn {
  color: #fff;
  min-width: 220px;
  text-align: left;
}
.access-section .social-btns li .btn:hover {
  color: #fff;
}
.access-section .social-btns li .btn .fa {
  font-size: 18px;
  position: relative;
  top: 2px;
  margin-right: 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  padding-right: 10px;
  width: 30px;
}
.access-section .twitter-btn {
  background: #55acee;
}
.access-section .twitter-btn:hover {
  background: #2795e9;
}
.access-section .facebook-btn {
  background: #3b5998;
}
.access-section .facebook-btn:hover {
  background: #2d4373;
}
.access-section .google-btn {
  background: #dd4b39;
}
.access-section .google-btn:hover {
  background: #c23321;
}
.access-section .github-btn {
  background: #444444;
}
.access-section .github-btn:hover {
  background: #2b2b2b;
}
.access-section .forgot-password {
  font-size: 13px;
  margin-top: 10px;
}
.access-section .forgot-password a {
  color: #999999;
}
.access-section .forgot-password a:hover {
  text-decoration: underline;
  color: var(--mr-primary);
}
.access-section .divider {
  border-left: none;
  margin-bottom: 30px;
  position: static;
}
.access-section .divider span {
  background: #fff;
  display: inline-block;
  padding: 0 10px;
  position: relative;
  top: inherit;
  text-transform: uppercase;
  color: #999999;
}
.access-section .divider:before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  background: #e5e5e5;
  height: 1px;
  width: 100%;
}
.access-section .social-btns {
  padding-left: 0;
  text-align: center;
}
.access-section .social-btns .btn {
  min-width: 100%;
}
.access-section .social-btns .social-login {
  display: inline-block;
  margin: 0 auto;
}
.access-section .note {
  color: #999999;
  font-size: 13px;
  margin-bottom: 15px;
  margin-top: 15px;
}
.access-section .btn + .note {
  margin: 15px 0;
}
.access-section .remember label {
  font-size: 14px;
  color: #666666;
}
.access-section .lead {
  font-size: 14px;
  color: #999999;
  margin-top: 30px;
}
/* ======= Reset Password Page ======= */
.resetpass-section .form-box .title {
  margin-bottom: 30px;
}
.resetpass-section .intro {
  font-size: 16px;
  margin-bottom: 30px;
}
/* ======= Footer ======= */
.footer {
  background: var(--mr-secondary);
  color: #fff;
  padding-top: 40px;
  font-size: 14px;
  position: relative;
  z-index: 20;
}
.footer p {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.footer .btn-cta,
.footer a.btn-cta {
  padding: 9px 10px;
}
.footer .footer-col.links .fa {
  margin-right: 5px;
}
.footer .footer-col.links li {
  margin-bottom: 10px;
}
.footer .footer-col.connect .social {
  margin-bottom: 15px;
  overflow: hidden;
}
.footer .footer-col.connect .social li {
  margin-right: 10px;
}
.footer .footer-col.connect .social li a .fa {
  color: #b3b3b3;
  font-size: 22px;
}
.footer .footer-col.connect .social li a:hover .fa {
  color: var(--mr-primary);
}
.footer .footer-col.connect .btn-cta-primary {
  background: #5d80a1;
  border-color: #5d80a1;
}
.footer .footer-col.connect .btn-cta-primary:hover {
  background: #4a6781;
  border-color: #4a6781;
}
.footer .footer-col .title {
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 20px;
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.footer .footer-col p {
  color: #fff;
}
.footer .footer-col a {
  color: #6d8dab;
}
.footer .footer-col a:hover {
  color: #8da6bd;
}
.footer .footer-col .navbar-form {
  padding-left: 0;
  padding-right: 0;
}
.footer .footer-col .navbar-form .form-control {
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
}
.footer .footer-col .navbar-form .form-control:focus {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.footer .has-divider {
  border-top: 1px solid #2b3b4a;
  padding-top: 30px;
  padding-bottom: 30px;
}
.footer .download .download-list li {
  margin-bottom: 15px;
}
.footer .download .download-list li .btn-ghost {
  text-align: left;
  -webkit-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;
  width: 230px;
}
.footer .download .download-list li .btn-ghost:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.footer .contact p {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
}
.footer .contact p a {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}
.footer .contact .fa {
  margin-right: 10px;
  font-size: 20px;
}
.footer .contact .email .fa {
  font-size: 16px;
}
.footer .bottom-bar {
  background: #1e1e1e;
  color: #b3b3b3;
  font-size: 14px;
  padding: 10px 0;
}
.footer .bottom-bar .copyright {
  line-height: 1.6;
}
/* ======= Pagination ======= */
.pagination {
  margin-bottom: 60px;
  font-size: 14px;
  font-family: arial, sans-serif;
  margin-left: auto;
  margin-right: auto;
}
.pagination li a {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: none;
  margin-right: 5px;
  color: var(--mr-primary);
}
.pagination li a:hover {
  color: #da3518;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--mr-primary);
  border: none;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: var(--mr-primary-tint);
  border: none;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  background: none;
}
/* ======= Search Form ======= */
.searchbox-icon,
.searchbox-submit {
  width: 38px;
  height: 38px;
  display: block;
  position: absolute;
  top: 0;
  font-size: 16px;
  right: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  line-height: 2.4;
  text-align: center;
  cursor: pointer;
  color: var(--mr-primary-soft);
  background: #fff;
}
.searchbox-icon:hover {
  color: var(--mr-primary-strong);
}
.searchbox-submit {
  font-size: 14px;
  font-family: arial, sans-serif;
}
.searchbox-container {
  width: 100%;
}
.searchbox-container .searchbox {
  position: relative;
  display: inline-block;
  height: 38px;
  width: 100%;
  float: right;
  top: -50px;
  right: 0;
  /* new */
  min-width: 38px;
  width: 0%;
  overflow: hidden;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -ms-transition: width 0.3s;
  -o-transition: width 0.3s;
}
.searchbox-container .searchbox.searchbox-open {
  width: 100%;
}
.searchbox-container .searchbox.searchbox-open .searchbox-icon,
.searchbox-container .searchbox.searchbox-open .searchbox-submit {
  background: var(--mr-primary);
  color: #fff;
  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.searchbox-container .searchbox .searchbox-input {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  outline: none;
  background: #f5f5f5;
  border: 1px solid #eeeeee;
  width: 100%;
  height: 38px;
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
}
.searchbox-container .searchbox .searchbox-input::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #a6a6a6;
}
.searchbox-container .searchbox .searchbox-input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #a6a6a6;
}
.searchbox-container .searchbox .searchbox-input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #a6a6a6;
}
.searchbox-container .searchbox .searchbox-input:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #a6a6a6;
}
/* ======= IE9 Fix ======= */
.ie9 .pricing .item .ribbon,
.ie8 .pricing .item .ribbon {
  top: 0px;
  right: 0px;
  height: 60px;
}
.ie9 .pricing .item .ribbon .text,
.ie8 .pricing .item .ribbon .text {
  position: static;
  font-size: 13px;
  width: auto;
  padding: 5px;
}
.ie9 .pricing .item .ribbon .text:before,
.ie8 .pricing .item .ribbon .text:before,
.ie9 .pricing .item .ribbon .text:after,
.ie8 .pricing .item .ribbon .text:after {
  display: none;
}
/* ======= Configure Style (Remove in production) ======= */
.config-wrapper {
  position: absolute;
  top: 100px;
  right: 0;
  z-index: 100;
}
.config-wrapper-inner {
  position: relative;
}
.config-trigger {
  display: block;
  position: absolute;
  left: -36px;
  width: 36px;
  height: 36px;
  background: #f5f5f5;
  color: #fff;
  text-align: center;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.config-trigger:hover {
  text-decoration: none;
}
.config-trigger:hover .fa {
  color: var(--mr-primary);
}
.config-trigger .fa {
  font-size: 22px;
  padding-top: 8px;
  display: block;
  color: #2b2b2b;
}
.config-panel {
  width: 170px;
  display: none;
  background: #f5f5f5;
  padding: 15px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 4px;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 4px;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.config-panel h5 {
  margin-bottom: 15px;
}
.config-panel #color-options {
  margin-bottom: 10px;
}
.config-panel #color-options li {
  padding-right: 0;
}
.config-panel #color-options li a {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid transparent;
}
.config-panel #color-options li a:hover {
  -webkit-opacity: 0.9;
  -moz-opacity: 0.9;
  opacity: 0.9;
  border: 2px solid rgba(0, 0, 0, 0.8);
}
.config-panel #color-options li.active a {
  border: 2px solid #000;
}
.config-panel #color-options li.theme-1 a {
  background: var(--mr-primary);
}
.config-panel #color-options li.theme-2 a {
  background-color: #28a5a8;
}
.config-panel #color-options li.theme-3 a {
  background-color: #497cb1;
}
.config-panel #color-options li.theme-4 a {
  background-color: #f89d29;
}
.config-panel #color-options li.theme-5 a {
  background-color: var(--mr-primary);
}
.config-panel #color-options li.theme-6 a {
  background-color: #47c9af;
}
.config-panel #color-options li.theme-7 a {
  background-color: #a06081;
}
.config-panel #color-options li.theme-8 a {
  background-color: #96a94b;
}
.config-panel #color-options li.theme-9 a {
  background-color: #f06060;
}
.config-panel #color-options li.theme-10 a {
  background-color: #737f97;
}
.config-panel .close {
  position: absolute;
  right: 5px;
  top: 5px;
  color: #fff;
}
.config-panel .close .fa {
  color: var(--mr-primary);
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 1219px) {
  .config-wrapper {
    display: none;
  }
  #topcontrol {
    display: none !important;
  }
  .header h1.logo {
    float: none;
    margin: inherit;
  }
  .header h1.logo a {
    margin: 0 auto;
  }
  .header.header-fixed {
    position: relative;
  }
  .header.navbar-fixed-top {
    position: relative;
  }
  .navbar-collapse {
    border-top: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    left: 0;
    top: 90px;
    position: absolute;
    background: var(--mr-secondary);
    z-index: 45;
  }
  .navbar-collapse .nav {
    margin: 0;
  }
  .header .main-nav .nav .dropdown-menu:before {
    display: none;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    max-height: inherit;
  }
  .has-full-screen-bg.access-page .upper-wrapper {
    background: #384d60;
  }
  
  .headline-bg + .section,
  .bg-slider-wrapper + .section {
    padding-top: 1px;
  }
  .pricing .intro {
    margin-bottom: 45px;
  }
  .features-video iframe {
    padding: 5px;
  }
  .features-tabbed {
    padding-top: 160px;
  }
  .access-section {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 60px;
    padding-top: 0;
  }
  .signup-page .form-box .intro {
    margin-bottom: 45px;
  }
  .login-page .form-box .title {
    margin-bottom: 45px;
  }
  .section .title {
    font-size: 32px;
  }
  .section .intro {
    font-size: 16px;
  }
  .promo {
    height: 420px;
  }
  .why .item .content {
    margin-bottom: 60px;
  }
  .why .control {
    top: 58px;
    margin-left: -30px;
  }
  .why .item .title {
    margin-bottom: 30px;
    text-align: center;
  }
  .testimonials .item .profile {
    position: static;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
  }
  .testimonials .item .content {
    padding-left: 60px;
  }
  .testimonials .item blockquote {
    font-size: 18px;
  }
  .pricing .item.best-buy {
    position: static;
    z-index: inherit;
  }
  .nav-tabs > li > a {
    padding: 10px 5px;
  }
  .apps-section .phone-holder {
    -webkit-background-size: 280px auto;
    -moz-background-size: 280px auto;
    -o-background-size: 280px auto;
    background-size: 280px auto;
  }
  .apps-section .phone-holder .screenshot {
    width: 242px;
    top: 66px;
  }
  .searchbox-container .searchbox {
    width: 100%;
    top: inherit;
    float: none;
    margin-bottom: 30px;
  }
  .searchbox-icon {
    display: none;
  }
  .searchbox-icon,
  .searchbox-submit {
    background: var(--mr-primary);
    color: #fff;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-topleft: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
  }
  .searchbox-icon:hover,
  .searchbox-submit:hover {
    color: #fff;
  }
  .main-nav .navbar-collapse .navbar-nav {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .blog-page .header-blog {
    position: relative;
  }
  .blog-page .header-blog .main-nav .nav .nav-item a {
    color: #fff;
  }
  .blog-page .header h1.logo {
    float: left;
    margin: inherit;
  }
  .blog-page .header .main-nav .navbar-toggle {
    margin-bottom: 0;
    top: 20px;
  }
  .blog-page .header .main-nav .navbar-toggle .icon-bar {
    background-color: #384d60;
  }
  .blog-page .header .main-nav .navbar-toggle:hover .icon-bar {
    background-color: var(--mr-primary);
  }
  .blog-page .flexslider {
    margin-top: 0;
  }
  .blog-category {
    margin-top: 0;
  }
  .blog-page .navbar-collapse {
    top: 80px;
  }
  .blog-page .header.navbar-fixed-top .main-nav .nav .nav-item a {
    color: #fff;
  }
  .blog-slider .flex-caption .title {
    font-size: 36px;
  }
  .searchbox-container .searchbox .searchbox-input {
    position: static;
  }
  .footer-col {
    margin-bottom: 30px;
  }
  .footer-col .form-control {
    width: auto;
  }
  .footer .footer-col .navbar-form {
    padding-left: 15px;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .footer .footer-col .navbar-form .form-control {
    display: inline-block;
  }
  .modal.modal-video .modal-dialog {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .download-page .headline-bg {
    height: 1600px;
  }
  .story-section .about {
    padding: 0;
  }
  .story-section .belife {
    margin-left: 0;
    margin-right: 0;
  }
  .story-section .team {
    padding: 0;
  }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 1220px) {
  .config-wrapper {
    display: none;
  }
  .header {
    height: inherit;
  }
  .header.scrolled {
    height: auto;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .header.scrolled .main-nav .nav .nav-item a {
    color: #fff;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  .header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
    background: inherit;
    border-color: inherit;
  }
  .header.scrolled .main-nav .nav .dropdown-menu a {
    color: #fff;
  }
  .header.navbar-fixed-top {
    position: relative;
  }
  .blog-slider {
    margin-top: 0;
  }
  .blog {
    margin-top: 0;
  }
  .header h1.logo {
    float: none;
    text-align: center;
  }
  .header h1.logo a {
    margin: 0 auto;
  }
  .header .main-nav .nav .nav-item {
    margin-right: 10px;
  }
  .main-nav.navbar-right {
    float: none !important;
  }
  .blog-page .main-nav.navbar-right {
    float: right !important;
  }
  .navbar-collapse.collapse {
    text-align: center;
  }
  .navbar-collapse.collapse .navbar-nav {
    float: none;
    margin: 0 auto;
    display: inline-block;
  }
  .blog-page .header-blog {
    position: relative;
  }
  .blog-page .header h1.logo {
    float: left;
    margin: inherit;
  }
  .promo {
    height: 420px;
    padding-top: 80px;
  }
  .promo.section .intro {
    margin-bottom: 30px;
  }
  .promo .btn-link {
    margin-top: 15px;
  }
  .why .item .content {
    margin-bottom: 60px;
  }
  .why .control {
    top: 128px;
    margin-left: -45px;
  }
  .why .item .title {
    margin-bottom: 30px;
    text-align: center;
  }
  .apps-section .phone-holder {
    -webkit-background-size: 280px auto;
    -moz-background-size: 280px auto;
    -o-background-size: 280px auto;
    background-size: 280px auto;
  }
  .apps-section .phone-holder .screenshot {
    width: 242px;
    top: 66px;
  }
  .footer-col {
    margin-bottom: 30px;
  }
  .modal.modal-video .modal-dialog {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .access-page .navbar-collapse.collapse .navbar-nav {
    display: none;
  }
  .features-video {
    padding-top: 90px;
  }
  .pricing {
    padding-top: 90px;
  }
  .apps-section {
    padding-top: 80px;
  }
  .story-section {
    padding-top: 90px;
  }
  .contact-section {
    padding-top: 45px;
  }
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 1220px) {
  .config-wrapper {
    display: block;
  }
  .header {
    height: 80px;
  }
  .header.navbar-fixed-top {
    position: fixed;
  }
  .header.scrolled {
    background: #fff;
    z-index: 1000;
    height: 80px;
    top: 0;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  }
  .header.scrolled h1.logo a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    color: var(--mr-primary);
    background: #fff;
    
  }
  .header.scrolled .main-nav .nav .nav-item a {
    color: #666666;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  .header.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn-cta-secondary {
    background: var(--mr-primary);
    border-color: var(--mr-primary);
  }
  .header.scrolled .main-nav .nav .dropdown-menu a {
    color: #fff;
  }
  .main-nav {
    float: right !important;
  }
  .navbar-form .form-control {
    width: 280px;
  }
  .header h1.logo {
    float: left;
    margin: inherit;
  }
  .header .main-nav .nav .nav-item {
    margin-right: -12px;
  }
  .main-nav.navbar-right {
    float: right !important;
  }
  .promo {
    height: 620px;
    padding-top: 200px;
  }
  .promo.section .intro {
    margin-bottom: 45px;
  }
  .promo .btn-link {
    margin-top: 15px;
  }
  .why .item .content {
    margin-bottom: inherit;
  }
  .why .control {
    top: 128px;
    margin-left: -28px;
  }
  .modal.modal-video .modal-dialog {
    width: 760px;
    padding-left: 0;
    padding-right: 0;
  }
  .access-page .navbar-collapse.collapse .navbar-nav {
    display: none;
  }
  .access-section .divider {
    text-align: center;
    margin-bottom: 30px;
    color: #999999;
    text-transform: uppercase;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
  .access-section .divider span {
    background: #fff;
    display: inline-block;
    padding: 10px 0;
    position: relative;
    top: 80px;
    margin-left: -10px;
  }
  .access-section .divider:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #e5e5e5;
    height: 100%;
    width: 1px;
  }
  .access-section .social-btns {
    padding-left: 65px;
  }
  .access-section .social-btns .note {
    text-align: left;
  }
  .blog-slider {
    margin-top: 80px;
  }
  .why .item .title {
    margin-bottom: 15px;
    text-align: left;
  }
  .why .figure {
    text-align: left;
  }
  .blog-page .header-blog {
    position: fixed;
  }
  .blog-page .blog-category,
  .blog-page .blog-archive {
    margin-top: 80px;
  }
  .blog-entry-wrapper {
    margin-top: 80px;
  }
  /* Only show QR code for desktop */
  .download-area {
    overflow: hidden;
  }
  .download-area .download-list {
    float: left;
  }
  .download-area .qrcode-holder {
    float: left;
    margin-left: 45px;
    text-align: center;
  }
  .download-area .qrcode-holder .qrcode {
    max-width: 140px;
    margin: 0 auto;
  }
  .download-area .qrcode-holder .qrcode .caption {
    font-size: 12px;
    background: #fff;
    padding: 0 15px;
    padding-bottom: 15px;
    color: var(--mr-primary);
    font-family: arial, sans-serif;
  }
  .navbar-fixed-top .navbar-collapse {
    padding-left: 15px;
    padding-right: 15px;
  }
  .features-video {
    padding-top: 80px;
  }
  .pricing {
    padding-top: 170px;
  }
  .apps-section {
    padding-top: 160px;
  }
  .story-section {
    padding-top: 170px;
  }
  .contact-section {
    padding-top: 125px;
  }
  .bg-slider-wrapper {
    position: fixed;
  }


  .list-group-item-checked {
    color: #3c763d;
    background-color: #dff0d8 !important;
}

.list-group-item-close {
    margin-right: 5px;
}

.list-group-item-close:hover {
    color: #ff0000;
    cursor: hand;
    cursor: pointer;
}

.form-group .button-file-select {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}

.form-group .button-file-select:hover {
    color: #fff;
    background-color: #3276b1;
    border-color: #285e8e;
}

.form-group .button-file-select, .form-group .input {
    position: relative;
    display: block;
    font-weight: 400;
}


.form-group .input input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-group .input input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}


.form-group .input-file input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.form-group .input-file .button-file-select {
    position: absolute;
    top: 6px;
    right: 4px;
    float: none;
    height: 22px;
    margin: 0;
    padding: 0 14px;
    font-size: 13px;
    line-height: 20px;
    border-radius: 4px;
}

.form-group .input-file .button-file-select:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-group .input-file .button-file-select input {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    font-size: 30px;
    cursor: pointer;
    opacity: 0;
}

.title {
  font-weight: 300;
  margin-bottom: 20px;
  margin-top: 0;
}

.placar{
    font-size: 13px;
}

.intro {
  margin-bottom: 30px;
}

}
/* Large devices (large desktops, 1200px and up) */



/*Barragem cerrado - dashboard*/

.container-dashboard {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 5px;
  margin:8px;
  position: relative;
  border: 1px solid #eeeeee;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -webkit-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 1px rgba(0, 0, 0, 0.05);
}

div#placar {
    padding-bottom: 10px;
}

.imgFotoJogo {
    margin: auto;
    border: 1px solid silver;
    padding: 6px;
}

p#versus {
    padding-top: 70px;
    text-align: center;
}

p#jogo {
    font-size: 13px;
}

p#set {
    font-size: 12px;
    padding: 0px;
    margin: 0px;
    float: right;
}

#divClasse {
    border: 1px solid #eee;
    width: 242px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 5px;
}

#sortable1, #sortable2, #sortable3, #sortable4, #sortable5 {
    width: 160px;
    height: 800px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 5px;
    border: 1px solid #eee;
}

#sortable5 {
    width: 160px;
    height: 800px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 5px;
    border: 1px solid #eee;
}

#sortable1 li, #sortable2 li, #sortable3 li, #sortable4 li, #sortable5 li{
    border-radius: 3px;
    margin: 0 5px 5px 5px;
    padding: 3px;
    font-size: 12px;
    width: 150px;
}

#sortable5 li{
    border-radius: 3px;
    margin: 0 5px 5px 5px;
    padding: 3px;
    font-size: 12px;
    width: 150px;
}

.sortable-title {
    font-size: 14px;
    color: #444;
    display: block;
    padding: 5px;
    position: relative;
}

.ui-state-classe1 {
    background: #f6e560;
    color: #999999;
    border-left: 5px solid #f5d330;
    font-size: 5px;
}

.ui-state-classe2 {
    background: #eeeeee;
    color: #999999;
    border-left: 5px solid #a6a6a6;
    font-size: 16px;
}

.ui-state-classe3 {
    background: #f39c12;
    color: #666666;
    border-left: 5px solid #a74818;
    font-size: 7px;
}
.ui-state-classe4 {
    background: #55acee;
    color: #666666;
    border-left: 5px solid #5d80a1;
    font-size: 7px;
}
.ui-state-classe5 {
    background: #f39c12;
    color: #666666;
    border-left: 5px solid #a74818;
    font-size: 7px;
}

.boxPadrao {
    position: relative;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    padding: 10px;
}

.exibir-imagem {
        display: block;
        border:5px;
    }

.exibir-dadosbancarios{
  overflow:hidden;
  max-height: 0px;
  transition: max-height 1s ease-in-out;
}

.exibir-dadosbancarios.show {
  max-height: 500px;
  pointer-events: none;
}

.exibir-inserirResultados {
    overflow: hidden;
    max-height: 0px;
    pointer-events: none;
    transition: max-height 1s ease-in-out;
}

.exibir-inserirResultados.show {
    max-height: 550px;
    pointer-events: auto;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-right: 5px;
    margin: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    position: relative;
 }
.exibir-pix {
    overflow: hidden;
    max-height: 0px;
    pointer-events: none;
    transition: max-height 1s ease-in-out;
}

    .exibir-pix.show {
        max-height: 800px;
        pointer-events: auto;
        margin-bottom: 7px;
    }
.exibir-headtohead {
    overflow: hidden;
    max-height: 0px;
    pointer-events: none;
    transition: max-height 1s ease-in-out;
}

.exibir-headtohead.show {
	max-height: 800px;
	pointer-events: auto;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 20px;
	padding-right: 5px;
	margin: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	position: relative;
}

.container-dashboard.hide {
    overflow: hidden;
    max-height: 0px;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.formato-mobile {
    display: none;
}

.col-mobile {
    padding-right: 5px;
    padding-left: 5px;
}

@media (max-width: 767px) {
    #set {
        float: none !important;
    }

    .exibir-imagem {
        display: none;
    }

    .formato-desktop {
        display: none;
    }

    .formato-mobile {
        display: block;
    }
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

#imgPerfilScrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: #e3e0d6;
    border-radius: 10px;
}

#imgPerfilScrollbar::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 10px;
}

#imgPerfilScrollbar::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #8b8778;
}

.centralizar.row {
    text-align: center;
}

@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Casca MeuRanking: barra superior, navegação, área de conteúdo e rodapé.
   Usada por _LayoutShell tanto nas páginas Bootstrap 3 quanto nas Bootstrap 5, por isso não depende
   de nenhum dos dois e evita seletores de tag (nav, footer) que os CSS antigos já estilizam. */

.mr-body {
    margin: 0;
    /* !important: o adminlte.js das páginas antigas grava min-height inline no body. */
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
    background-color: var(--mr-bg);
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.mr-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ======= Barra superior ======= */
.mr-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-topbar__inner {
    display: flex;
    align-items: stretch;
    gap: 24px;
    min-height: 64px;
}

.mr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 0;
    color: #fff;
    text-decoration: none;
}

.mr-brand:hover,
.mr-brand:focus {
    color: #fff;
    text-decoration: none;
}

.mr-brand__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background-color: #fff;
}

.mr-brand__mark {
    height: 34px;
    width: auto;
}

.mr-brand__name {
    overflow: hidden;
    font-family: var(--mr-font-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-nav {
    display: flex;
    flex: 1;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
}

.mr-nav__list {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-nav__list > li {
    position: relative;
    display: flex;
}

.mr-nav__list > li > a,
.mr-dd__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-top: 3px solid transparent;
    background: none;
    color: rgba(255, 255, 255, .82);
    font-family: var(--mr-font);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.mr-nav__list > li > a:hover,
.mr-nav__list > li > a:focus,
.mr-dd__btn:hover,
.mr-dd__btn:focus,
.mr-dd.is-open > .mr-dd__btn {
    color: #fff;
    border-bottom-color: var(--mr-ball);
    text-decoration: none;
    outline: 0;
}

.mr-nav__list > li > a:focus-visible,
.mr-dd__btn:focus-visible,
.mr-topbar__toggle:focus-visible {
    outline: 2px solid var(--mr-ball);
    outline-offset: -4px;
}

.mr-dd__btn::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.mr-dd {
    position: relative;
    display: flex;
}

.mr-dd__menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1040;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    background-color: var(--mr-surface);
    box-shadow: 0 12px 32px rgba(1, 70, 38, .16);
    list-style: none;
}

.mr-dd.is-open > .mr-dd__menu {
    display: block;
}

.mr-dd__menu > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--mr-text);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.mr-dd__menu > li > a:hover,
.mr-dd__menu > li > a:focus {
    background-color: var(--mr-primary-tint);
    color: var(--mr-text);
    text-decoration: none;
}

.mr-dd__sep {
    height: 1px;
    margin: 6px 4px;
    background-color: var(--mr-border);
}

.mr-user {
    display: flex;
    align-items: stretch;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.mr-user__photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: rgba(255, 255, 255, .2);
}

.mr-user__name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-user__login {
    align-self: center;
    padding: 8px 18px;
    border-radius: 6px;
    background-color: var(--mr-primary);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}

.mr-user__login:hover,
.mr-user__login:focus {
    background-color: var(--mr-primary-strong);
    color: #fff;
    text-decoration: none;
}

.mr-topbar__toggle {
    display: none;
    align-self: center;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: none;
    cursor: pointer;
}

.mr-topbar__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px 0;
    background-color: #fff;
}

/* ======= Conteúdo ======= */
.mr-main {
    flex: 1;
    padding: 32px 0 64px;
}

.mr-surface {
    padding: 28px;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
    background-color: var(--mr-surface);
}

.mr-surface--estreita {
    max-width: 440px;
    margin: 24px auto 0;
}

/* Títulos que as views antigas já emitem no topo do conteúdo. */
.mr-surface > h1,
.mr-surface > h2,
.mr-surface > h3,
.mr-surface > h4:first-of-type,
.mr-surface legend,
.mr-page-head__title {
    margin-top: 0;
    border: 0;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .005em;
}

/* ======= Rodapé ======= */
.mr-footer {
    padding: 22px 0;
    background-color: var(--mr-court);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}

.mr-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mr-footer__logo {
    height: 34px;
    width: auto;
}

@media (max-width: 991px) {
    .mr-topbar__inner {
        flex-wrap: wrap;
        gap: 0;
    }

    .mr-brand__name {
        font-size: 20px;
    }

    .mr-topbar__toggle {
        display: block;
    }

    .mr-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        gap: 0;
        padding: 8px 0 16px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .mr-nav.is-open {
        display: flex;
    }

    .mr-nav__list,
    .mr-nav__list > li,
    .mr-dd {
        flex-direction: column;
    }

    .mr-nav__list > li > a,
    .mr-dd__btn {
        justify-content: space-between;
        width: 100%;
        padding: 12px 4px;
        border-top: 0;
        border-bottom: 0;
        font-size: 16px;
    }

    .mr-dd__menu {
        position: static;
        min-width: 0;
        margin: 0 0 8px;
        box-shadow: none;
    }

    .mr-user {
        margin: 8px 0 0;
        padding: 8px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .mr-user .mr-dd {
        width: 100%;
    }

    .mr-user__login {
        align-self: stretch;
        text-align: center;
    }

    .mr-main {
        padding: 16px 0 40px;
    }

    .mr-container {
        padding: 0 14px;
    }

    .mr-surface {
        padding: 18px 14px;
        border-radius: 10px;
    }

    .mr-surface > h1,
    .mr-surface > h2,
    .mr-surface > h3,
    .mr-surface > h4:first-of-type,
    .mr-surface legend,
    .mr-page-head__title {
        font-size: 25px;
    }

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

.mr-user--vazio {
    display: none;
}

/* Conteúdo de largura total (páginas institucionais): as seções cuidam do próprio espaçamento. */
.mr-main--total {
    padding: 0;
}

/* Tema MeuRanking sobre Bootstrap 3 + legacy.css.
   Carregado por último: só sobrescreve aparência, não estrutura. */

/* ======= Base ======= */
body {
    font-family: var(--mr-font);
    color: var(--mr-text);
    background-color: var(--mr-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mr-font);
    font-weight: 700;
    color: var(--mr-text);
}

p, li, td, label {
    color: inherit;
}

a {
    color: var(--mr-link);
}

a:hover,
a:focus {
    color: var(--mr-primary-strong);
}

.text-muted {
    color: var(--mr-text-muted);
}

/* ======= Botões ======= */
.btn,
a.btn {
    font-family: var(--mr-font);
    font-weight: 500;
    border-radius: var(--mr-radius-sm);
    background-image: none;
    text-shadow: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: var(--mr-focus);
}

/* Ação principal: laranja da marca (token --mr-action). */
.btn-primary,
.btn-primary:focus {
    background-color: var(--mr-action);
    border-color: var(--mr-action);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--mr-action-strong);
    border-color: var(--mr-action-strong);
    color: #fff;
}

a.btn-cta-primary,
.btn-cta-primary {
    background-color: var(--mr-primary);
    border-color: var(--mr-primary);
    color: #fff;
}

a.btn-cta-primary:hover,
.btn-cta-primary:hover {
    background-color: var(--mr-primary-strong);
    border-color: var(--mr-primary-strong);
    color: #fff;
}

.btn-success,
.btn-success:focus {
    background-color: var(--mr-secondary);
    border-color: var(--mr-secondary);
    color: #fff;
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success {
    background-color: var(--mr-secondary-strong);
    border-color: var(--mr-secondary-strong);
    color: #fff;
}

.btn-default,
.btn-default:focus {
    background-color: var(--mr-surface);
    border-color: var(--mr-border);
    color: var(--mr-text);
}

.btn-default:hover,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-color: var(--mr-primary-tint);
    border-color: var(--mr-primary-soft);
    color: var(--mr-text);
}

.btn-danger,
.btn-danger:focus {
    background-color: var(--mr-danger);
    border-color: var(--mr-danger);
}

.btn-warning,
.btn-warning:focus {
    background-color: var(--mr-warning);
    border-color: var(--mr-warning);
}

.btn-info,
.btn-info:focus {
    background-color: var(--mr-info);
    border-color: var(--mr-info);
}

.btn-link {
    color: var(--mr-link);
}

/* ======= Formulários ======= */
.form-control {
    font-family: var(--mr-font);
    height: 40px;
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius-sm);
    box-shadow: none;
    color: var(--mr-text);
}

textarea.form-control,
select[multiple].form-control {
    height: auto;
}

.form-control:focus {
    border-color: var(--mr-primary);
    box-shadow: var(--mr-focus);
}

.input-sm {
    height: 34px;
}

.input-lg {
    height: 48px;
}

label,
.control-label {
    font-weight: 500;
    color: var(--mr-text);
}

.input-group-addon {
    background-color: var(--mr-bg);
    border-color: var(--mr-border);
    color: var(--mr-text-muted);
}

.has-error .form-control {
    border-color: var(--mr-danger);
}

.has-error .help-block,
.field-validation-error,
.validation-summary-errors {
    color: var(--mr-danger);
}

/* ======= Tabelas ======= */
.table {
    background-color: var(--mr-surface);
}

.table > thead > tr > th {
    border-bottom: 1px solid var(--mr-border);
    color: var(--mr-text-muted);
    font-family: var(--mr-font-display);
    font-size: 16px;
    letter-spacing: .02em;
    font-weight: 500;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid var(--mr-border);
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--mr-bg);
}

.table-hover > tbody > tr:hover {
    background-color: var(--mr-primary-tint);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border-color: var(--mr-border);
}

/* ======= Painéis, cards, alerts ======= */
.panel,
.well,
.box,
.thumbnail {
    background-image: none;
    background-color: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius);
    box-shadow: none;
}

.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-info > .panel-heading {
    background-image: none;
    background-color: var(--mr-surface);
    border-bottom: 1px solid var(--mr-border);
    border-radius: var(--mr-radius) var(--mr-radius) 0 0;
    color: var(--mr-text);
    font-weight: 700;
}

.panel-primary,
.panel-success,
.panel-info {
    border-color: var(--mr-border);
}

.panel-footer {
    background-color: var(--mr-bg);
    border-top: 1px solid var(--mr-border);
}

.alert {
    background-image: none;
    border-radius: var(--mr-radius);
    box-shadow: none;
    text-shadow: none;
}

.access-section .form-box .form-box-inner,
.form-box .form-box-inner {
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

/* ======= Navegação ======= */
/* Abas como no app: sem caixa, sublinhado laranja na ativa. */
.nav-tabs {
    border-bottom: 1px solid var(--mr-border);
}

.nav-tabs > li,
.nav-tabs > li.active {
    border-top-color: transparent;
}

.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--mr-text-subtle);
    font-weight: 500;
    box-shadow: none;
}

.nav-tabs > li > a:hover {
    color: var(--mr-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 3px solid var(--mr-primary);
    background-color: transparent;
    color: var(--mr-primary);
    box-shadow: none;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--mr-primary);
}

.dropdown-menu {
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-image: none;
    background-color: var(--mr-primary-tint);
    color: var(--mr-text);
}

.header .main-nav .nav .dropdown-menu > li > a:hover,
.header .main-nav .nav .dropdown-menu > li > a:focus {
    background-color: var(--mr-secondary-strong);
    color: #fff;
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--mr-border);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:hover {
    background-color: var(--mr-primary);
    border-color: var(--mr-primary);
    color: #fff;
}

.label,
.badge {
    border-radius: 999px;
    font-weight: 500;
}

.label-primary,
.badge {
    background-color: var(--mr-primary);
}

.label-success {
    background-color: var(--mr-secondary);
}

.progress-bar {
    background-image: none;
    background-color: var(--mr-primary);
}

/* ======= Modais ======= */
.modal-content {
    border: 0;
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
}

.modal-header,
.modal-footer {
    border-color: var(--mr-border);
}

/* ======= Cabeçalho e faixa de topo ======= */
.header h1.logo {
    font-family: var(--mr-font);
}

.header h1.logo a {
    border-radius: 0 0 var(--mr-radius) var(--mr-radius);
}

/* Faixa laranja do cabeçalho do app no lugar da foto por modalidade. */
.headline-bg,
.headline-bg-beach {
    height: 300px;
    background: var(--mr-primary);
}

.label-danger {
    background-color: var(--mr-danger);
}

.label-default {
    background-color: var(--mr-neutral);
}

.footer {
    background: var(--mr-secondary);
}

/* ======= Plugins ======= */
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
    background-image: none;
    background-color: var(--mr-surface);
    border: 1px solid var(--mr-border);
    border-radius: var(--mr-radius-sm);
    box-shadow: none;
}

.chosen-container .chosen-results li.highlighted {
    background-image: none;
    background-color: var(--mr-primary);
}

.datepicker td.active,
.datepicker td.active:hover,
.datepicker td span.active {
    background-image: none;
    background-color: var(--mr-primary);
    text-shadow: none;
}

/* ======= Componentes AdminLTE usados nas telas de gestão (box, info-box, content) ======= */
/* O AdminLTE pinta a área de conteúdo de cinza e dá altura mínima; dentro da casca isso não se aplica. */
.mr-surface .content,
.mr-surface .content-wrapper,
.mr-surface .content-header {
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    background: transparent;
}

.mr-surface .content-header > h1,
.mr-surface .box-title {
    font-family: var(--mr-font-display);
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--mr-text);
}

.mr-surface .content-header > h1 {
    margin: 0 0 16px;
    font-size: 30px;
}

/* Caixa: sem faixa colorida no topo nem sombra; borda fina e cantos arredondados. */
/* Respiro fica na caixa, não nas partes: várias telas põem botões e filtros direto em .box, sem .box-body. */
.mr-surface .box {
    margin-bottom: 20px;
    padding: 4px 18px 16px;
    border: 1px solid var(--mr-border);
    border-top: 1px solid var(--mr-border);
    border-radius: 10px;
    box-shadow: none;
    background-color: var(--mr-surface);
}

.mr-surface .box-header {
    padding: 14px 0 4px;
}

.mr-surface .box-header.with-border {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mr-border);
}

.mr-surface .box-header .box-title {
    font-size: 22px;
    line-height: 1.2;
}

.mr-surface .box-body {
    padding: 12px 0 0;
}

.mr-surface .box-footer {
    padding: 14px 0 0;
    margin-top: 14px;
    border-top: 1px solid var(--mr-border);
    border-radius: 0 0 10px 10px;
    background-color: transparent;
}

/* Indicadores do painel do ranking. */
.mr-surface .info-box {
    min-height: 84px;
    margin-bottom: 16px;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.mr-surface .info-box-icon {
    width: 84px;
    height: 84px;
    border-radius: 0;
    font-size: 36px;
    line-height: 84px;
}

.mr-surface .info-box-content {
    margin-left: 84px;
    padding: 10px 14px;
}

.mr-surface .info-box-text {
    font-weight: 500;
    color: var(--mr-text);
    white-space: normal;
}

.mr-surface .bg-aqua,
.mr-surface .bg-green {
    background-color: var(--mr-secondary) !important;
}

.mr-surface .bg-yellow {
    background-color: var(--mr-primary) !important;
}

.mr-surface .bg-red {
    background-color: var(--mr-danger) !important;
}

/* Botões pequenos de ação em tabelas. */
.mr-surface .btn-xs {
    padding: 4px 8px;
    border-radius: var(--mr-radius-sm);
}

.mr-surface .table-condensed > tbody > tr > td {
    padding: 8px 10px;
}

/* Componentes MeuRanking, espelhando as telas do app (Classificação, Jogos da Rodada).
   Independentes do Bootstrap: usam só os tokens de tokens.css. */

/* ======= Cabeçalho de página ======= */
.mr-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.mr-page-head__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mr-text);
}

.mr-page-head__sub {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--mr-text-subtle);
}

.mr-page-head__aside {
    flex-shrink: 0;
    font-size: 14px;
}

/* ======= Jogador (foto + nome + papel) ======= */
.mr-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.mr-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--mr-border);
}

.mr-player__text {
    min-width: 0;
}

.mr-player__name {
    display: block;
    overflow: hidden;
    font-size: 16px;
    color: var(--mr-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.mr-player__name:hover,
a.mr-player__name:focus {
    color: var(--mr-primary);
    text-decoration: none;
}

.mr-player__role {
    display: block;
    font-size: 13px;
    color: var(--mr-text-subtle);
}

/* ======= Selos ======= */
.mr-pos,
.mr-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--mr-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.mr-pos {
    background-color: var(--mr-primary);
}

.mr-result {
    background-color: var(--mr-neutral);
}

.mr-result--win {
    background-color: var(--mr-success);
}

.mr-result--loss {
    background-color: var(--mr-danger);
}

/* ======= Lista com divisória tracejada ======= */
.mr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-list > li {
    padding: 14px 0;
    border-bottom: 1px dashed #cfcfcf;
}

/* ======= Linha de classificação ======= */
.mr-rank {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mr-rank .mr-player {
    flex: 1;
}

.mr-stat {
    min-width: 72px;
    text-align: right;
}

.mr-stat__label {
    display: block;
    font-size: 12px;
    color: var(--mr-text-subtle);
}

.mr-stat__value {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--mr-text);
}

.mr-stat--muted .mr-stat__value {
    font-weight: 400;
    color: var(--mr-text-muted);
}

.mr-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--mr-text);
}

.mr-chevron:hover,
.mr-chevron:focus {
    background-color: var(--mr-primary-tint);
    color: var(--mr-primary);
    text-decoration: none;
}

/* ======= Jogo (dois jogadores, placar e situação) ======= */
.mr-match {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mr-match__players {
    flex: 1;
    min-width: 0;
}

.mr-match__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mr-match__row + .mr-match__row {
    margin-top: 10px;
}

.mr-match__row .mr-player {
    flex: 1;
}

.mr-sets {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mr-sets__game {
    width: 26px;
    font-size: 18px;
    text-align: center;
    color: var(--mr-neutral);
}

.mr-sets__game--won {
    color: var(--mr-text);
}

.mr-match__info {
    width: 150px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--mr-text-subtle);
}

.mr-match__info strong {
    display: block;
    font-weight: 500;
    color: var(--mr-secondary);
}

.mr-match__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .mr-page-head {
        flex-direction: column;
        gap: 8px;
    }

    .mr-page-head__title {
        font-size: 22px;
    }

    .mr-avatar {
        width: 36px;
        height: 36px;
    }

    .mr-stat {
        min-width: 52px;
    }

    .mr-stat--muted {
        display: none;
    }

    .mr-match {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mr-match__players {
        flex-basis: 100%;
    }

    .mr-match__info {
        width: auto;
        flex: 1;
        text-align: left;
    }

    .mr-match__info strong {
        display: inline;
    }

    .mr-match__actions {
        flex-direction: row;
    }
}

/* ======= Dupla: fotos sobrepostas ======= */
.mr-avatars {
    display: flex;
    flex-shrink: 0;
}

.mr-avatars .mr-avatar + .mr-avatar {
    margin-left: -14px;
    border: 2px solid var(--mr-surface);
}

/* Valor textual (ex.: classe) no lugar de número. */
.mr-stat--text {
    min-width: 0;
    max-width: 45%;
}

.mr-stat--text .mr-stat__value {
    font-size: 15px;
}

/* ======= Formulário curto (login, confirmação) ======= */
.mr-form {
    display: flex;
    flex-direction: column;
}

.mr-form__title {
    margin: 0 0 4px;
}

.mr-form__lead {
    margin: 0 0 20px;
    color: var(--mr-text-muted);
}

.mr-form__label {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mr-text);
}

.mr-form .form-control {
    height: 46px;
    margin-bottom: 16px;
    font-size: 16px;
}

/* ======= Botões próprios ======= */
.mr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    font-family: var(--mr-font);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.mr-btn + .mr-btn {
    margin-top: 8px;
}

.mr-btn:focus-visible {
    outline: 0;
    box-shadow: var(--mr-focus);
}

.mr-btn--primary {
    background-color: var(--mr-action);
    color: #fff;
}

.mr-btn--primary:hover,
.mr-btn--primary:focus {
    background-color: var(--mr-action-strong);
    color: #fff;
}

.mr-btn--ghost {
    color: var(--mr-link);
}

.mr-btn--ghost:hover,
.mr-btn--ghost:focus {
    background-color: var(--mr-primary-tint);
    color: var(--mr-primary-strong);
}

.mr-btn[disabled] {
    opacity: .6;
    cursor: default;
}

.mr-form__title {
    font-family: var(--mr-font-display);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--mr-text);
}

@media (max-width: 767px) {
    .mr-stat--text {
        max-width: 38%;
    }

    .mr-stat--text .mr-stat__value {
        font-size: 13px;
    }
}

/* ======= Cabeçalho das telas de gestão (torneio) ======= */
.mr-gestao-head {
    margin-bottom: 16px;
}

.mr-voltar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--mr-text-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.mr-voltar img {
    width: 16px;
    height: 16px;
}

.mr-voltar:hover,
.mr-voltar:focus {
    color: var(--mr-primary-strong);
    text-decoration: none;
}

.mr-gestao-head__titulo {
    margin: 0;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .005em;
}

/* Abas em uma linha só; quando não cabem, rolam na horizontal em vez de quebrar. */
.nav-tabs.mr-abas {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    /* Sem barra visível: a aba cortada na borda já indica que há mais. */
    scrollbar-width: none;
}

.nav-tabs.mr-abas::-webkit-scrollbar {
    display: none;
}

.nav-tabs.mr-abas > li {
    float: none;
    flex-shrink: 0;
    margin-bottom: 0;
}

.nav-tabs.mr-abas > li > a {
    padding: 10px 12px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mr-gestao-head__titulo {
        font-size: 26px;
    }
}

/* ======= Formulário longo de cadastro (seções, grade de campos, opções) ======= */
.mr-form-secao {
    padding: 24px 0;
    border-top: 1px solid var(--mr-border);
}

.mr-form-secao__titulo {
    margin: 0 0 16px;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.mr-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
}

.mr-campo--largo {
    grid-column: 1 / -1;
}

.mr-campo > label {
    display: block;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mr-text);
}

.mr-campo .form-control {
    height: 44px;
    font-size: 15px;
}

.mr-campo .input-group {
    width: 100%;
}

.mr-campo .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: 13px;
}

.mr-opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 24px;
}

/* Com .mr-campo > label acima: a opção é um label em linha, com a caixa ao lado do texto. */
.mr-opcao,
.mr-campo > label.mr-opcao {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--mr-text);
    cursor: pointer;
}

.mr-opcao input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--mr-primary);
}

.mr-campo .mr-opcao__select {
    width: auto;
    height: 38px;
}

.mr-form-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--mr-border);
}

.mr-form-acoes .mr-btn + .mr-btn {
    margin-top: 0;
}

@media (max-width: 767px) {
    .mr-campos,
    .mr-opcoes {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-form-acoes {
        flex-direction: column-reverse;
    }
}

/* ======= Formulário longo: complementos (aba Informações do torneio) ======= */
.mr-form-secao__sub {
    margin: 24px 0 12px;
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 15px;
    font-weight: 700;
}

.mr-campos--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mr-campo .mr-campo__curto {
    max-width: 320px;
}

.mr-campo textarea {
    width: 100%;
}

.mr-ajuda {
    margin: 0 0 12px;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-ajuda--erro {
    color: var(--mr-danger);
}

/* Linha de desconto: para quem + valor, com nota opcional embaixo. */
.mr-desconto {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 160px);
    gap: 4px 16px;
    margin-bottom: 14px;
}

.mr-desconto__nota {
    grid-column: 1 / -1;
    margin: 0;
}

.mr-desconto .mr-opcao {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.mr-opcao--bloco {
    margin: 0 0 12px;
    font-weight: 500;
}

/* Bloco que aparece quando a opção acima é marcada. */
.mr-subpainel {
    margin: 0 0 20px;
    padding: 4px 18px 18px;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
    background-color: var(--mr-bg);
}

.mr-subpainel .mr-form-secao__sub {
    margin-top: 14px;
}

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

.mr-pontuacao {
    margin-top: 20px;
}

.mr-tabela-pontos {
    max-width: 640px;
}

.mr-tabela-pontos th.cabecalhoTabelaPontos {
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    font-weight: 500;
}

.mr-tabela-pontos td {
    font-family: var(--mr-font-display);
    font-size: 20px;
    font-weight: 600;
}

@media (max-width: 767px) {
    .mr-campos--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mr-desconto {
        grid-template-columns: minmax(0, 1fr) 110px;
    }

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

/* Opção com controle na mesma linha (ex.: "Tem desconto para [lista]"). */
.mr-opcao:has(select) {
    align-items: center;
}

/* ======= Telas de gestão: barra de ações, filtros e tabela com edição em linha ======= */
.mr-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mr-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.mr-filtros > .form-control {
    flex: 1 1 180px;
    width: auto;
}

.mr-filtros__ordenacao {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    white-space: nowrap;
}

.mr-filtros__ordenacao .form-control {
    width: auto;
}

.mr-tabela-edicao > tbody > tr > td {
    vertical-align: middle;
}

.mr-tabela-edicao .form-control {
    height: 36px;
    padding: 4px 8px;
}

.mr-tabela-edicao__ordem {
    width: 96px;
    white-space: nowrap;
}

.mr-tabela-edicao__select {
    width: 68px;
}

.mr-tabela-edicao__categoria {
    min-width: 220px;
}

/* Colunas de caixa de seleção. */
.mr-tabela-edicao__marca {
    width: 1%;
    text-align: center;
    white-space: nowrap;
}

.mr-tabela-edicao__marca input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mr-primary);
    vertical-align: middle;
}

.mr-tabela-edicao__acoes {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.mr-tabela-edicao__acoes .form {
    margin: 0;
}

.mr-dica {
    margin-left: 2px;
    color: var(--mr-info);
    cursor: help;
}

.mr-limite {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mr-limite .form-control {
    max-width: 130px;
}

/* Sinal de vagas da categoria. */
.mr-ponto {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: 50%;
}

.mr-ponto--esgotada {
    background-color: var(--mr-danger);
}

.mr-ponto--parcial {
    background-color: var(--mr-warning);
}

.mr-ponto--vagas {
    background-color: var(--mr-success);
}

.mr-selo-sistema,
.mr-etiqueta {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

.mr-selo-sistema {
    background-color: var(--mr-secondary);
    color: #fff;
}

.mr-etiqueta--alerta {
    background-color: var(--mr-danger);
    color: #fff;
    cursor: help;
}

.mr-inscrito {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.mr-tabela-edicao input[type="text"].form-control {
    min-width: 220px;
}

.mr-etiqueta--ok {
    background-color: var(--mr-secondary);
    color: #fff;
}

.mr-tabela-edicao__cabeca {
    width: 200px;
}

/* Lista simples dentro das telas de gestão. */
.mr-lista-simples {
    margin-bottom: 24px;
}

.mr-lista-simples > li {
    padding: 8px 0;
}

/* ======= Telas de gestão: resumo em números, liberações, tabelas de apoio, patrocinadores ======= */
.mr-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.mr-resumo__item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
}

.mr-resumo__item dt {
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 400;
}

.mr-resumo__item dd {
    margin: 2px 0 0;
    white-space: nowrap;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
}

/* Dois controles na mesma linha de um campo (ex.: status + data). */
.mr-linha {
    display: flex;
    gap: 8px;
}

.mr-linha > .form-control {
    flex: 1;
    min-width: 0;
}

.mr-linha > .input-group {
    width: 170px;
    flex-shrink: 0;
}

.mr-campo__nota {
    margin: 6px 0 0;
}

.mr-liberacao {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.mr-liberacao label {
    margin: 0;
    font-weight: 400;
}

.mr-liberacao .switch {
    flex-shrink: 0;
}

/* Tabelas pequenas de apoio (sumário de camisetas, classificação dos grupos). */
.mr-tabela-resumo {
    max-width: 420px;
    margin-bottom: 24px;
}

.mr-tabela-resumo--larga {
    max-width: 640px;
}

.mr-tabela-resumo__total > td {
    font-weight: 700;
}

.mr-legenda-siglas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0 0 12px;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-legenda-siglas strong {
    color: var(--mr-text);
}

/* Formação dos grupos: linha mais forte a cada troca de grupo. */
.mr-tabela-grupos {
    max-width: 640px;
}

.mr-tabela-grupos > tbody > tr.mr-tabela-grupos__inicio > td {
    border-top: 2px solid var(--mr-court);
}

/* Patrocinadores: uma linha por formulário. */
.mr-patrocinadores {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mr-patrocinador {
    padding: 10px 12px;
    border: 1px solid var(--mr-border);
    border-radius: 10px;
}

.mr-patrocinador--novo {
    border-style: dashed;
}

.mr-patrocinador__form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.mr-patrocinador__form .form-control {
    flex: 1;
    min-width: 0;
}

.mr-patrocinador__logo {
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: contain;
    background-color: var(--mr-bg);
}

.mr-patrocinador .fileUpload {
    margin: 0;
    flex-shrink: 0;
}

.mr-pos--vazio {
    background-color: var(--mr-neutral);
}

@media (max-width: 767px) {
    .mr-patrocinador__form {
        flex-wrap: wrap;
    }

    .mr-patrocinador__form .form-control {
        flex-basis: 100%;
        order: 5;
    }

    .mr-linha {
        flex-wrap: wrap;
    }
}

/* Pergunta cadastrada pelo organizador: pode ser longa, então vai como texto e não como título. */
.mr-pergunta {
    max-width: 72ch;
    margin: 0 0 16px;
    padding-left: 12px;
    border-left: 3px solid var(--mr-primary);
    color: var(--mr-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

/* Botão de trocar imagem: o campo de arquivo fica invisível sobre o botão. */
.mr-patrocinador .fileUpload {
    position: relative;
    overflow: hidden;
}

.mr-patrocinador .fileUpload input.upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mr-patrocinador__logo {
    overflow: hidden;
}

/* Páginas institucionais dentro da casca nova (_LayoutSite).
   As views ainda usam o markup do template antigo (headline-bg + features-video + access-section);
   aqui esse markup vira "título de página + painel de texto", sem faixa colorida nem foto. */

/* Faixa de fundo antiga: some. */
.mr-main--total .headline-bg,
.mr-main--total .headline-bg-beach {
    display: none;
}

/* Título da página: faixa branca, alinhado à esquerda, em condensada. */
.mr-main--total .features-video.section-on-bg {
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--mr-border);
    background-color: var(--mr-surface);
}

.mr-main--total .features-video.section-on-bg .container {
    text-align: left;
}

.mr-main--total .features-video.section-on-bg .title {
    margin: 0;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 44px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: .005em;
}

.mr-main--total .features-video.section-on-bg .title:empty {
    display: none;
}

/* Painel de conteúdo. */
.mr-main--total .access-section {
    padding: 32px 0 72px;
}

.mr-main--total .access-section .form-box .form-box-inner {
    padding: 36px 40px;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
    box-shadow: none;
}

.mr-main--total .access-section .form-box .title {
    margin: 0 0 8px;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 30px;
    font-weight: 600;
    text-align: left;
}

.mr-main--total .access-section .form-box .title:empty,
.mr-main--total .access-section .form-box .intro:empty {
    display: none;
}

.mr-main--total .access-section .form-box .intro {
    margin: 0 0 24px;
    color: var(--mr-text-muted);
    font-size: 17px;
    text-align: left;
}

/* Texto corrido: linha legível, sem os <br> usados como espaçamento. */
.mr-main--total .access-section .desc {
    max-width: 72ch;
    color: var(--mr-text);
    font-size: 16px;
    line-height: 1.65;
}

.mr-main--total .access-section .desc br + br {
    display: none;
}

@media (max-width: 767px) {
    .mr-main--total .features-video.section-on-bg {
        padding: 24px 0 18px;
    }

    .mr-main--total .features-video.section-on-bg .title {
        font-size: 32px;
    }

    .mr-main--total .access-section {
        padding: 16px 0 40px;
    }

    .mr-main--total .access-section .form-box .form-box-inner {
        padding: 22px 18px;
    }
}

/* ======= Home: abertura ======= */
/* Continua o verde da barra superior, como se a página abrisse dentro da quadra.
   As linhas brancas ao fundo são as marcações da quadra (lateral, linha de saque e centro). */
.mr-hero {
    position: relative;
    overflow: hidden;
    padding: 64px 0 80px;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-hero::before,
.mr-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.mr-hero::before {
    top: -40px;
    bottom: -40px;
    left: 56%;
    width: 60%;
    border: 3px solid rgba(255, 255, 255, .13);
    border-right: 0;
}

.mr-hero::after {
    top: 46%;
    left: 56%;
    width: 60%;
    height: 0;
    border-top: 3px solid rgba(255, 255, 255, .13);
}

.mr-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: center;
    gap: 56px;
}

.mr-hero__titulo {
    margin: 0 0 16px;
    max-width: 14em;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.005em;
}

.mr-hero__sub {
    margin: 0 0 32px;
    max-width: 34em;
    color: rgba(255, 255, 255, .82);
    font-size: 19px;
    line-height: 1.5;
}

.mr-hero__form {
    padding: 22px 24px 24px;
    border-radius: 12px;
    background-color: var(--mr-surface);
    color: var(--mr-text);
}

.mr-hero__form-titulo {
    margin: 0;
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.15;
}

.mr-hero__form-sub {
    margin: 4px 0 16px;
    color: var(--mr-text-muted);
    font-size: 15px;
}

.mr-hero__campos {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
}

.mr-hero__campos .form-control {
    height: 46px;
    font-size: 16px;
}

.mr-hero__campos .mr-btn {
    white-space: nowrap;
}

.mr-hero__app {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 24px;
}

.mr-hero__app p {
    margin: 0;
    max-width: 22em;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
}

.mr-hero__lojas {
    display: flex;
    gap: 10px;
}

.mr-hero__lojas img {
    display: block;
    height: 42px;
    width: auto;
}

/* Ilustração: dois cartões com os componentes reais (classificação e jogo). */
.mr-hero__placar {
    position: relative;
    padding-bottom: 104px;
}

.mr-hero__cartao {
    padding: 22px 24px 8px;
    border-radius: 14px;
    background-color: var(--mr-surface);
    color: var(--mr-text);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}

.mr-hero__cartao-titulo {
    margin: 0;
    font-family: var(--mr-font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
}

.mr-hero__cartao-sub {
    margin: 2px 0 6px;
    color: var(--mr-text-subtle);
    font-size: 14px;
}

.mr-hero__cartao .mr-list > li:last-child {
    border-bottom: 0;
}

.mr-hero__nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mr-hero__pontos {
    font-family: var(--mr-font-display);
    font-size: 24px;
    font-weight: 600;
}

.mr-hero__cartao--jogo {
    position: absolute;
    right: -12px;
    bottom: 0;
    width: 78%;
    padding: 16px 20px 18px;
    border: 1px solid var(--mr-border);
}

.mr-hero__cartao--jogo .mr-sets__game {
    font-family: var(--mr-font-display);
    font-size: 22px;
    font-weight: 600;
}

/* ======= Home: vídeo ======= */
.mr-video {
    padding: 64px 0;
    background-color: var(--mr-surface);
}

.mr-video__titulo {
    margin: 0 0 24px;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.mr-video__quadro {
    position: relative;
    max-width: 920px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background-color: #000;
}

.mr-video__quadro iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
}

@media (max-width: 991px) {
    .mr-hero {
        padding: 40px 0 56px;
    }

    .mr-hero::before,
    .mr-hero::after {
        display: none;
    }

    .mr-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .mr-hero__titulo {
        font-size: 44px;
    }

    .mr-hero__sub {
        font-size: 17px;
    }

    .mr-hero__campos {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-hero__cartao--jogo {
        right: 0;
        width: 86%;
    }

    .mr-video {
        padding: 40px 0;
    }

    .mr-video__titulo {
        font-size: 32px;
    }
}

/* ======= Home: seções ======= */
.mr-secao {
    padding: 72px 0;
    background-color: var(--mr-surface);
}

.mr-secao--fundo {
    background-color: var(--mr-bg);
}

.mr-secao__titulo {
    margin: 0 0 36px;
    max-width: 18em;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

/* Recursos: grade de texto, cada item separado por uma linha no topo. */
.mr-recursos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 40px;
    margin-bottom: 40px;
}

.mr-recurso {
    padding-top: 18px;
    border-top: 2px solid var(--mr-court);
}

.mr-recurso h3 {
    margin: 0 0 8px;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.15;
}

.mr-recurso p {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

/* Depoimentos: três citações lado a lado, sem carrossel. */
.mr-depoimentos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.mr-depoimento {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    margin: 0;
    padding: 28px;
    border: 1px solid var(--mr-border);
    border-radius: 12px;
}

.mr-depoimento blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--mr-text);
    font-size: 17px;
    line-height: 1.55;
}

.mr-depoimento figcaption {
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-depoimento figcaption strong {
    display: block;
    color: var(--mr-text);
    font-size: 15px;
    font-weight: 500;
}

/* Clientes: logos em linha. */
.mr-clientes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-clientes li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--mr-text-muted);
    font-size: 14px;
    text-align: center;
}

.mr-clientes img {
    width: 84px;
    height: 84px;
    object-fit: contain;
}

/* Chamada final: volta ao verde da quadra. */
.mr-chamada {
    padding: 64px 0;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-chamada__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.mr-chamada__titulo {
    margin: 0;
    max-width: 16em;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
}

.mr-chamada__sub {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
}

.mr-chamada .mr-btn {
    flex-shrink: 0;
}

/* A chamada verde encosta no rodapé verde: uma linha separa os dois. */
.mr-main--total + .mr-footer {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

@media (max-width: 991px) {
    .mr-secao {
        padding: 44px 0;
    }

    .mr-secao__titulo,
    .mr-chamada__titulo {
        font-size: 32px;
    }

    .mr-secao__titulo {
        margin-bottom: 24px;
    }

    .mr-recursos,
    .mr-depoimentos {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

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

    .mr-chamada {
        padding: 44px 0;
    }

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

/* ======= Home do torneio ======= */
.mr-hero--torneio {
    padding: 56px 0 64px;
}

.mr-hero--torneio .mr-hero__titulo {
    max-width: 16em;
    margin-bottom: 28px;
}

/* Situação das inscrições; o ponto amarelo-bola só aparece quando estão abertas. */
.mr-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    font-weight: 500;
}

.mr-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .4);
}

.mr-status--aberto {
    color: #fff;
}

.mr-status--aberto::before {
    background-color: var(--mr-ball);
}

.mr-fatos {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 56px;
    margin: 0 0 32px;
}

.mr-fatos dt {
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
    font-weight: 400;
}

.mr-fatos dd {
    margin: 0;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
}

.mr-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mr-hero__acoes .mr-btn + .mr-btn {
    margin-top: 0;
}

.mr-btn--claro {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.mr-btn--claro:hover,
.mr-btn--claro:focus {
    border-color: #fff;
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.mr-btn--primary:hover,
.mr-btn--primary:focus {
    text-decoration: none;
}

.mr-patrocinio {
    padding: 22px 0;
    border-bottom: 1px solid var(--mr-border);
    background-color: var(--mr-surface);
}

.mr-patrocinio__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 32px;
}

.mr-patrocinio__titulo {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-patrocinio__lista {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-patrocinio__lista img {
    display: block;
    width: auto;
    max-width: 130px;
    height: 48px;
    object-fit: contain;
}

/* Premiação e contato vêm do cadastro do torneio e podem trazer quebras de linha próprias. */
#informacao .mr-recurso p {
    color: var(--mr-text);
}

@media (max-width: 991px) {
    .mr-hero--torneio {
        padding: 36px 0 44px;
    }

    .mr-fatos dd {
        font-size: 22px;
    }
}

/* PROPOSTA VISUAL V2 — camada única por cima do tema atual.
   Para comparar com a versão anterior basta tirar este arquivo dos bundles em BundleConfig.cs.

   Direção: superfícies claras e sem borda, controles em pílula e títulos em grotesca larga (Archivo),
   com o verde-quadra e o laranja da marca na barra superior, nos cabeçalhos e no item ativo, como no app.
   A gestão do torneio usa a largura da janela e tem menu lateral que pode voltar para o topo. */

:root {
    --mr-bg: #f4f6f5;
    --mr-border: #e6ebe8;
    --mr-text: #101814;
    --mr-text-muted: #5b6661;
    --mr-text-subtle: #8b9590;
    --mr-court-tint: #e8f1ec;
    --mr-radius-sm: 10px;
    --mr-radius: 16px;
    --mr-shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 16px 40px -18px rgba(16, 24, 20, .18);
    --mr-font-display: "Archivo", "DM Sans", system-ui, Arial, sans-serif;
}

/* ======= Tipografia de título: larga e fechada, em vez de condensada ======= */
.mr-brand__name,
.mr-page-head__title,
.mr-surface > h1,
.mr-surface > h2,
.mr-surface > h3,
.mr-surface > h4:first-of-type,
.mr-surface legend,
.mr-surface .box-title,
.mr-form__title,
.mr-gestao-head__titulo,
.mr-form-secao__titulo,
.mr-hero__titulo,
.mr-hero__form-titulo,
.mr-hero__cartao-titulo,
.mr-video__titulo,
.mr-secao__titulo,
.mr-recurso h3,
.mr-chamada__titulo,
.mr-painel .dashboard h3,
.mr-auth .chamada h1,
.mr-main--total .features-video.section-on-bg .title,
.mr-main--total .access-section .form-box .title {
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mr-brand__name { font-size: 18px; }
.mr-page-head__title,
.mr-surface > h1,
.mr-surface > h2,
.mr-surface > h3,
.mr-surface > h4:first-of-type,
.mr-surface legend,
.mr-form__title { font-size: 26px; }
.mr-gestao-head__titulo { font-size: 28px; }
.mr-form-secao__titulo,
.mr-surface .box-header .box-title,
.mr-painel .dashboard h3 { font-size: 19px; }
.mr-hero__titulo { font-size: 56px; line-height: 1.02; letter-spacing: -.035em; }
.mr-hero__form-titulo,
.mr-hero__cartao-titulo,
.mr-recurso h3 { font-size: 20px; }
.mr-video__titulo,
.mr-secao__titulo,
.mr-chamada__titulo,
.mr-main--total .features-video.section-on-bg .title { font-size: 36px; letter-spacing: -.03em; }
.mr-auth .chamada h1 { font-size: 32px; }

/* Números: mesma família, largura normal, algarismos alinhados. */
.mr-resumo__item dd,
.mr-tabela-pontos td,
.mr-hero__pontos,
.mr-fatos dd,
.mr-stat__value,
.mr-sets__game {
    font-family: var(--mr-font-display);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mr-resumo__item dd { font-size: 24px; }
.mr-fatos dd { font-size: 20px; font-weight: 600; }

.table > thead > tr > th,
.table > thead th,
.mr-tabela-edicao > tbody > tr > th {
    font-family: var(--mr-font);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--mr-text-subtle);
}

/* ======= Barra superior: verde-quadra da marca, com filete laranja ======= */
.mr-topbar {
    border-bottom: 3px solid var(--mr-primary);
}

.mr-topbar__inner {
    align-items: center;
}

.mr-nav,
.mr-nav__list {
    align-items: center;
}

/* Item de menu: pílula clara sobre o verde, no lugar da linha amarela. */
.mr-nav__list > li > a,
.mr-dd__btn {
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, .86);
}

.mr-nav__list > li > a:hover,
.mr-nav__list > li > a:focus,
.mr-dd__btn:hover,
.mr-dd__btn:focus,
.mr-dd.is-open > .mr-dd__btn {
    background-color: rgba(255, 255, 255, .14);
    color: #fff;
}

.mr-nav__list > li > a:focus-visible,
.mr-dd__btn:focus-visible,
.mr-topbar__toggle:focus-visible {
    outline: 2px solid var(--mr-ball);
    outline-offset: 2px;
}

.mr-dd__menu {
    top: calc(100% + 8px);
    padding: 6px;
    border-radius: 14px;
    box-shadow: var(--mr-shadow);
}

.mr-dd__menu > li > a {
    border-radius: 8px;
}

.mr-dd__menu > li > a:hover,
.mr-dd__menu > li > a:focus {
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
}

.mr-user {
    align-items: center;
}

.mr-user .mr-dd__btn {
    padding: 4px 12px 4px 4px;
    background-color: rgba(255, 255, 255, .12);
    color: #fff;
}

.mr-user__login {
    padding: 9px 20px;
    border-radius: 999px;
}

/* ======= Superfícies: sombra suave no lugar de borda ======= */
.mr-main {
    padding-top: 28px;
}

.mr-surface {
    padding: 32px;
    border: 0;
    border-radius: 24px;
    box-shadow: var(--mr-shadow);
}

.mr-surface .box,
.mr-painel .border.rounded,
.mr-painel .bg-light.rounded {
    border-color: var(--mr-border) !important;
    border-radius: var(--mr-radius) !important;
}

.mr-painel .bg-light.rounded {
    border: 0 !important;
    box-shadow: var(--mr-shadow) !important;
}

.mr-subpainel,
.mr-patrocinador,
.mr-depoimento,
.mr-painel .card-torneio {
    border-radius: var(--mr-radius);
}

.mr-resumo__item {
    border: 0;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.modal-content {
    border-radius: 20px;
}

/* ======= Controles ======= */
.btn,
a.btn,
.mr-btn,
.mr-painel .btn-orange,
.mr-painel .btn-success,
.mr-auth .btn-success,
.mr-auth .btn-primary {
    border-radius: 999px;
}

.btn {
    padding-left: 16px;
    padding-right: 16px;
}

.mr-surface .btn-xs,
.btn-xs {
    padding: 4px 12px;
    border-radius: 999px;
}

.form-control,
.mr-painel .form-control,
.mr-painel .form-select,
.mr-auth .form-control,
.mr-auth .form-select {
    border-color: #dde3e0;
    border-radius: var(--mr-radius-sm);
}

.input-group .form-control:first-child {
    border-radius: var(--mr-radius-sm) 0 0 var(--mr-radius-sm);
}

.input-group-addon:last-child {
    border-color: #dde3e0;
    border-radius: 0 var(--mr-radius-sm) var(--mr-radius-sm) 0;
}

/* Tabelas: sem zebra; divisórias finas e realce só na linha sob o ponteiro. */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > thead > tr > th {
    border-color: var(--mr-border);
}

.table > tbody > tr:hover > td {
    background-color: #f8faf9;
}

/* Selos e etiquetas mais leves: fundo claro, texto na cor. */
.mr-pos {
    border-radius: 10px;
    background-color: var(--mr-primary-tint);
    color: var(--mr-primary-strong);
    font-family: var(--mr-font-display);
    font-weight: 700;
}

.mr-pos--vazio {
    background-color: var(--mr-bg);
    color: var(--mr-text-subtle);
}

.mr-etiqueta,
.mr-selo-sistema {
    padding: 2px 9px;
    border-radius: 999px;
}

.mr-etiqueta--ok {
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
}

.mr-etiqueta--alerta {
    background-color: #fde9e9;
    color: #b51414;
}

.mr-list > li {
    border-bottom-style: solid;
    border-bottom-color: var(--mr-border);
}

/* Abas simples (fora da gestão do torneio): pílulas. */
.nav-tabs:not(.mr-abas) {
    border-bottom: 0;
}

.nav-tabs:not(.mr-abas) > li > a,
.nav-tabs:not(.mr-abas) > li > a:hover,
.nav-tabs:not(.mr-abas) > li > a:focus {
    margin-right: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
}

.nav-tabs:not(.mr-abas) > li.active > a,
.nav-tabs:not(.mr-abas) > li.active > a:hover,
.nav-tabs:not(.mr-abas) > li.active > a:focus {
    border: 0;
    background-color: var(--mr-court);
    color: #fff;
}

/* ======= Gestão do torneio: faixa verde com o nome e abas em menu lateral ======= */
.mr-gestao-head {
    margin-bottom: 20px;
    padding: 18px 24px 20px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-court);
    color: #fff;
}

.mr-gestao-head__titulo {
    color: #fff;
}

.mr-gestao-head .mr-voltar {
    color: rgba(255, 255, 255, .78);
}

.mr-gestao-head .mr-voltar:hover,
.mr-gestao-head .mr-voltar:focus {
    color: var(--mr-ball);
}

.mr-gestao-head .mr-voltar img {
    filter: brightness(0) invert(1);
    opacity: .78;
}

.nav-tabs.mr-abas {
    gap: 4px;
    border-bottom: 0;
}

.nav-tabs.mr-abas > li > a,
.nav-tabs.mr-abas > li > a:hover,
.nav-tabs.mr-abas > li > a:focus,
.mr-abas__recolher > button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    color: var(--mr-text-muted);
}

.nav-tabs.mr-abas > li > a > .fa,
.mr-abas__recolher > button > .fa {
    width: 18px;
    flex-shrink: 0;
    font-size: 15px;
    text-align: center;
}

.nav-tabs.mr-abas > li > a > .fa {
    color: var(--mr-secondary);
}

.nav-tabs.mr-abas > li > a:hover {
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
}

/* Aba ativa em laranja, como no app. */
.nav-tabs.mr-abas > li.active > a,
.nav-tabs.mr-abas > li.active > a:hover,
.nav-tabs.mr-abas > li.active > a:focus {
    border: 0;
    background-color: var(--mr-primary) !important;
    color: #fff;
    font-weight: 700;
}

.nav-tabs.mr-abas > li.active > a > .fa {
    color: #fff;
}

/* Botão de recolher: só existe onde o menu é lateral. */
.nav-tabs.mr-abas > li.mr-abas__recolher {
    display: none;
}

.mr-abas__recolher > button {
    width: 100%;
    background-color: transparent;
    color: var(--mr-text-subtle);
    font-size: 13px;
    text-align: left;
}

.mr-abas__recolher > button:hover,
.mr-abas__recolher > button:focus-visible {
    background-color: var(--mr-bg);
    color: var(--mr-text);
    outline: 0;
}

/* As telas de gestão usam a largura da janela: tabela de jogos e categorias precisam de espaço. */
.mr-container:has(.mr-abas) {
    max-width: 1720px;
}

@media (min-width: 1200px) {
    /* O cabeçalho ocupa a largura toda; o menu fica fixo à esquerda e o conteúdo da aba à direita.
       Funciona sem mudar as views: tudo que vem depois do menu cai na segunda coluna.
       Com a classe mr-abas-recolhido (botão no topo do menu) sobram só os ícones. */
    .mr-surface:has(> .mr-abas) {
        display: grid;
        grid-template-columns: 172px minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
        padding: 24px;
    }

    .mr-abas-recolhido .mr-surface:has(> .mr-abas) {
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 20px;
    }

    .mr-surface:has(> .mr-abas) > * {
        grid-column: 2;
    }

    .mr-surface:has(> .mr-abas) > .mr-gestao-head {
        grid-column: 1 / -1;
    }

    .mr-surface:has(> .mr-abas) > .mr-abas {
        grid-column: 1;
        grid-row: span 60;
        position: sticky;
        top: 96px;
        flex-direction: column;
        gap: 2px;
        margin: 0;
        overflow: visible;
    }

    .mr-surface:has(> .mr-abas) > .mr-abas > li.mr-abas__recolher {
        display: block;
        margin-bottom: 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--mr-border);
    }

    .mr-surface:has(> .mr-abas) > .mr-abas > li > a,
    .mr-surface:has(> .mr-abas) > .mr-abas > li > a:hover,
    .mr-surface:has(> .mr-abas) > .mr-abas > li > a:focus,
    .mr-surface:has(> .mr-abas) > .mr-abas > li > button {
        padding: 9px 12px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .mr-abas-recolhido .mr-abas .mr-abas__rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .mr-abas-recolhido .mr-surface:has(> .mr-abas) > .mr-abas > li > a,
    .mr-abas-recolhido .mr-surface:has(> .mr-abas) > .mr-abas > li > button {
        justify-content: center;
        padding: 11px 0;
    }

    .mr-abas-recolhido .mr-abas__recolher .fa {
        transform: rotate(180deg);
    }
}

/* ======= Páginas públicas ======= */
/* Abertura como cartão verde solto sobre o fundo claro, não mais faixa de ponta a ponta. */
.mr-hero {
    margin: 16px 16px 0;
    padding: 72px 0 84px;
    border-radius: 32px;
}

.mr-hero--torneio {
    padding: 56px 0 60px;
}

.mr-hero__form,
.mr-hero__cartao {
    border-radius: 20px;
}

.mr-status {
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .1);
    font-size: 14px;
}

.mr-btn--claro {
    border-color: rgba(255, 255, 255, .35);
}

.mr-recurso {
    padding: 22px;
    border-top: 0;
    border-radius: var(--mr-radius);
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-secao:not(.mr-secao--fundo) .mr-recurso {
    background-color: var(--mr-bg);
    box-shadow: none;
}

.mr-depoimento {
    border: 0;
    background-color: var(--mr-bg);
}

.mr-video__quadro {
    border-radius: 24px;
}

.mr-chamada {
    margin: 0 16px 16px;
    border-radius: 32px;
}

.mr-main--total .features-video.section-on-bg {
    border-bottom: 0;
    background-color: transparent;
    padding-bottom: 8px;
}

.mr-main--total .access-section .form-box .form-box-inner {
    border: 0;
    border-radius: 24px;
    box-shadow: var(--mr-shadow);
}

.mr-patrocinio {
    border-bottom: 0;
    background-color: transparent;
}

/* Rodapé claro; a marca volta ao verde só no texto. */
.mr-footer {
    border-top: 1px solid var(--mr-border) !important;
    background-color: transparent;
    color: var(--mr-text-subtle);
}

@media (max-width: 991px) {
    .mr-nav__list > li > a,
    .mr-dd__btn {
        border-radius: 10px;
        padding: 12px 10px;
    }

    .mr-surface {
        padding: 20px 16px;
        border-radius: 18px;
    }

    .mr-hero,
    .mr-chamada {
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 24px;
    }

    .mr-hero {
        padding: 40px 0 52px;
    }

    .mr-hero__titulo {
        font-size: 38px;
    }

    .mr-video__titulo,
    .mr-secao__titulo,
    .mr-chamada__titulo,
    .mr-main--total .features-video.section-on-bg .title {
        font-size: 28px;
    }

    .mr-gestao-head__titulo {
        font-size: 22px;
    }
}

/* Com o menu lateral sobra menos largura: a casca alarga um pouco e a tabela de jogos enxuga as colunas fixas. */
.mr-container {
    max-width: 1280px;
}

.jogos-tabela .escolhaJogador {
    min-width: 150px;
}

.jogos-tabela__data {
    width: 140px;
}

.jogos-tabela__hora {
    width: 72px;
}

.jogos-tabela select[id^="quadra"] {
    min-width: 92px;
}

.mr-stat--text .mr-stat__value {
    font-family: var(--mr-font);
    font-weight: 500;
    letter-spacing: 0;
}

/* ======= Identidade: verde e laranja da marca, como no app ======= */
/* Título de página em verde; título de seção com marca laranja à esquerda. */
.mr-page-head__title,
.mr-surface > h1,
.mr-surface > h2,
.mr-surface > h3,
.mr-form__title,
.mr-form-secao__titulo,
.mr-painel .dashboard h3 {
    color: var(--mr-court);
}

.mr-form-secao__titulo {
    padding-left: 12px;
    border-left: 4px solid var(--mr-primary);
}

/* Posição e número de ordem: selo laranja cheio, como a posição no ranking do app. */
.mr-pos {
    background-color: var(--mr-primary);
    color: #fff;
}

.mr-pos--vazio {
    background-color: var(--mr-bg);
    color: var(--mr-text-subtle);
}

/* Números do resumo sobre verde claro. */
.mr-resumo__item {
    background-color: var(--mr-court-tint);
}

.mr-resumo__item dd {
    color: var(--mr-court);
}

.table > thead > tr > th,
.table > thead th,
.mr-tabela-edicao > tbody > tr > th {
    color: var(--mr-secondary);
    font-weight: 700;
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--mr-court-tint);
}

@media (max-width: 991px) {
    .mr-gestao-head {
        padding: 14px 16px 16px;
    }
}

/* Título da página em faixa verde, igual ao cabeçalho da gestão do torneio (páginas do jogador e cadastros). */
.mr-page-head,
.mr-surface > h1:first-child,
.mr-surface > h2:first-child,
.mr-surface > h3:first-child,
.mr-surface > h4.info-box-text {
    margin: 0 0 20px;
    padding: 16px 22px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-court);
    color: #fff;
}

.mr-page-head {
    align-items: center;
}

.mr-page-head__title {
    color: #fff;
}

.mr-page-head__sub,
.mr-page-head__aside,
.mr-page-head__aside a {
    color: rgba(255, 255, 255, .8);
}

.mr-page-head__aside a:hover,
.mr-page-head__aside a:focus {
    color: var(--mr-ball);
}

/* Lista de jogadores: filete laranja na linha sob o ponteiro. */
.mr-list > li {
    box-shadow: inset 0 0 0 transparent;
}

.mr-list > li:hover {
    box-shadow: inset 3px 0 0 var(--mr-primary);
    background-color: var(--mr-primary-tint);
}

/* Painel do organizador: divisória do cartão em laranja e verde, linhas com filete verde. */
.mr-painel .dashboard .progress {
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--mr-primary) 0, var(--mr-primary) 56px, var(--mr-court-tint) 56px);
}

.mr-painel .card-torneio {
    border-left: 4px solid var(--mr-secondary);
}

.mr-painel .card-torneio:hover {
    border-color: var(--mr-primary-soft);
    border-left-color: var(--mr-primary);
    background-color: var(--mr-primary-tint);
}

.mr-painel .card-torneio .btn-white:hover,
.mr-painel .card-torneio .btn-white:focus {
    border-color: var(--mr-secondary);
    background-color: var(--mr-court-tint);
}

/* No celular os dois botões não cabem ao lado do nome: nome em cima, ações embaixo. */
@media (max-width: 575px) {
    .mr-painel .card-torneio > .col-6 {
        width: 100%;
    }

    .mr-painel .card-torneio > .col-6.text-end {
        justify-content: flex-start !important;
        gap: 8px;
        padding-top: 0 !important;
    }
}

/* ======= Modais ======= */
/* Fundo esverdeado; caixa centralizada na altura, sem borda, com cabeçalho claro e título em verde.
   Várias modais trazem padding/margin embutidos no HTML, por isso os !important. */
.modal-backdrop.in,
.modal-backdrop.show {
    background-color: #06150d;
    opacity: .55;
}

.modal-dialog {
    margin-top: 9vh;
}

.modal-content {
    margin: 0 !important;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(6, 21, 13, .5);
}

.modal-header {
    position: relative;
    border-radius: 20px 20px 0 0;
    padding: 16px 56px 14px 24px !important;
    border-bottom: 1px solid var(--mr-border);
    background-color: var(--mr-court-tint);
}

.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header .modal-title {
    margin: 0;
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 19px !important;
    font-stretch: 112%;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.modal-header h5 + h5 {
    margin-top: 6px;
    font-family: var(--mr-font);
    font-size: 15px !important;
    font-stretch: normal;
    letter-spacing: 0;
}

.modal-header .mr-modal-titulo--alerta,
.modal-header h5 a[style] {
    color: #b51414 !important;
}

.modal-header .close {
    position: absolute;
    top: 12px;
    right: 14px;
    float: none;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--mr-court);
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    text-shadow: none;
    opacity: .7;
    cursor: pointer;
}

.modal-header .close:hover,
.modal-header .close:focus {
    background-color: rgba(1, 70, 38, .12);
    color: var(--mr-court);
    text-decoration: none;
    opacity: 1;
}

.modal-body {
    padding: 22px 24px;
}

.modal-body > p:last-child {
    margin-bottom: 0;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px 18px;
    border-top: 1px solid var(--mr-border);
}

.modal-footer::before,
.modal-footer::after {
    display: none;
}

.modal-footer .btn,
.modal-footer .btn + .btn {
    float: none !important;
    margin: 0;
}

.modal-footer .btn[class*="col-"] {
    width: 100%;
}

/* Lançamento de placar: jogador 1 à esquerda (verde), jogador 2 à direita (laranja). */
.mr-placar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-placar__nomes,
.mr-placar__set {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.mr-placar__nome {
    font-weight: 700;
    line-height: 1.25;
}

.mr-placar__nome:empty {
    display: none;
}

.mr-placar__nome--a {
    color: var(--mr-secondary);
}

.mr-placar__nome--b {
    color: var(--mr-primary-strong);
}

.mr-placar__nomes .mr-placar__nome--a {
    grid-column: 1;
    text-align: right;
}

.mr-placar__nomes .mr-placar__nome--b {
    grid-column: 3;
}

.mr-placar__nome--wo {
    color: #b51414;
}

.mr-placar__versus,
.mr-placar__rotulo {
    color: var(--mr-text-subtle);
    font-size: 13px;
    text-align: center;
}

.mr-placar__nomes:not(:has(.mr-placar__nome:not(:empty))) {
    display: none;
}

.form-control.mr-placar__games {
    height: 46px;
    border-width: 2px;
    font-family: var(--mr-font-display);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.form-control.mr-placar__games--a {
    border-color: var(--mr-secondary);
}

.form-control.mr-placar__games--b {
    border-color: var(--mr-primary);
}

.mr-placar__situacao {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.mr-placar__situacao label {
    margin: 0;
    flex-shrink: 0;
}

.mr-placar__situacao .form-control {
    max-width: 220px;
}

#placar-modal .exibir-inserirResultados {
    display: none;
    margin-top: 14px;
}

#placar-modal .exibir-inserirResultados.show {
    display: block;
}

.mr-placar__escolha p {
    margin: 0 0 6px;
}

.mr-placar__escolha label {
    margin: 0 0 4px;
    font-weight: 500;
}

/* Diálogos de confirmação (jquery-confirm) no mesmo desenho das modais. */
.jconfirm .jconfirm-box {
    padding: 22px 24px 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px -20px rgba(6, 21, 13, .5) !important;
    font-family: var(--mr-font);
}

.jconfirm .jconfirm-box div.jconfirm-title-c {
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 19px !important;
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
}

.jconfirm .jconfirm-box .jconfirm-buttons button {
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.jconfirm.jconfirm-light .jconfirm-bg,
.jconfirm.jconfirm-white .jconfirm-bg {
    background-color: #06150d;
    opacity: .55;
}

@media (max-width: 767px) {
    .modal-dialog {
        margin: 16px 12px;
    }

    .modal-header {
        padding: 14px 52px 12px 18px !important;
    }

    .modal-body {
        padding: 18px;
    }

    .modal-footer {
        padding: 12px 18px 16px;
    }

    .mr-placar__nomes,
    .mr-placar__set {
        grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
    }
}

/* Texto de regra vindo do cadastro (HTML com fonte e tamanho embutidos): usa a tipografia do site
   e rola dentro da modal. O primeiro parágrafo repete o título da modal. */
.modal-body.mr-modal-regra {
    max-height: 62vh;
    overflow-y: auto;
}

.mr-modal-regra,
.mr-modal-regra * {
    font-family: var(--mr-font) !important;
    font-size: 15px !important;
    line-height: 1.5;
}

.mr-modal-regra > p:first-child[style*="center"] {
    display: none;
}

.mr-modal-regra ul,
.mr-modal-regra ol {
    padding-left: 22px;
}

/* Filtros da tabela pública: rótulo e seletor lado a lado, impressão no fim da linha. */
.mr-filtros--tabela {
    gap: 10px 16px;
    margin-bottom: 44px;
    padding: 12px 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-filtros--tabela .mr-filtros__ordenacao {
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-filtros--tabela #filtroClasse {
    min-width: 240px;
}

.mr-filtros--tabela #grupo {
    min-width: 80px;
}

.mr-filtros__fim {
    margin-left: auto;
}

@media (max-width: 767px) {
    .mr-filtros--tabela .mr-filtros__ordenacao {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .mr-filtros--tabela .mr-filtros__ordenacao .form-control {
        flex: 1;
        min-width: 0 !important;
        max-width: 240px;
    }

    .mr-filtros__fim {
        margin-left: 0;
    }
}

/* ======= Listagens (torneios, circuitos, histórico do jogador) ======= */
.mr-tabela-lista {
    margin-bottom: 0;
}

.mr-tabela-lista > thead > tr > th {
    white-space: nowrap;
}

.mr-tabela-lista > tbody > tr > td {
    padding: 12px 10px;
    vertical-align: middle;
}

.mr-tabela-lista__titulo,
a.mr-tabela-lista__titulo {
    color: var(--mr-text);
    font-weight: 700;
}

a.mr-tabela-lista__titulo:hover,
a.mr-tabela-lista__titulo:focus {
    color: var(--mr-primary-strong);
    text-decoration: none;
}

.mr-tabela-lista__data,
.mr-tabela-lista__numero {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mr-tabela-lista > thead > tr > th.mr-tabela-lista__numero,
.mr-tabela-lista > tbody > tr > td.mr-tabela-lista__numero {
    text-align: right;
}

.mr-tabela-lista > tbody > tr > td.mr-tabela-lista__acoes {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.mr-tabela-lista__acoes .btn + .btn {
    margin-left: 4px;
}

.btn.mr-btn-icone {
    padding-left: 8px;
    padding-right: 8px;
}

.mr-btn-icone img {
    display: block;
}

.mr-etiqueta--destaque {
    background-color: var(--mr-primary);
    color: #fff;
}

.mr-vazio {
    margin: 0;
    padding: 28px 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    text-align: center;
}

/* Botão dentro da faixa verde do título. */
.mr-page-head__aside a.btn {
    color: #fff;
}

/* ======= Perfil do jogador ======= */
.mr-perfil {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px 22px;
    margin-bottom: 22px;
    padding: 22px 24px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-court);
    color: #fff;
}

.mr-perfil__foto {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;
}

.mr-perfil__foto img,
.mr-perfil__foto canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mr-perfil__texto {
    flex: 1 1 220px;
    min-width: 0;
}

.mr-perfil__nome {
    margin: 0 0 6px;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 28px;
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.mr-perfil__situacao {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 500;
}

.mr-perfil__numeros {
    display: flex;
    gap: 10px;
    margin: 0;
}

.mr-perfil__numeros > div {
    min-width: 96px;
    padding: 10px 16px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, .1);
}

.mr-perfil__numeros dt {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 400;
}

.mr-perfil__numeros dd {
    margin: 2px 0 0;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.15;
}

.mr-perfil__numeros > div:nth-last-child(2) dd {
    color: var(--mr-ball);
}

.mr-perfil__abas {
    padding-top: 20px;
}

.mr-perfil__abas .mr-form-secao__titulo:not(:first-child) {
    margin-top: 28px;
}

/* Dados em grade: rótulo pequeno em cima, valor embaixo. */
.mr-dados {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    margin: 0;
}

.mr-dados__item {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background-color: var(--mr-bg);
}

.mr-dados__item dt {
    color: var(--mr-text-muted);
    font-size: 12px;
    font-weight: 400;
}

.mr-dados__item dd {
    margin: 2px 0 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.mr-dados__item dd img {
    margin-left: 4px;
    vertical-align: -3px;
}

@media (max-width: 767px) {
    .mr-perfil {
        padding: 18px 16px;
    }

    .mr-perfil__nome {
        font-size: 22px;
    }

    .mr-perfil__numeros {
        width: 100%;
    }

    .mr-perfil__numeros > div {
        flex: 1;
        min-width: 0;
    }

    .mr-page-head {
        flex-wrap: wrap;
    }
}

.mr-tabela-lista .mr-etiqueta {
    white-space: nowrap;
}

/* Texto só para leitor de tela (.sr-only) é absoluto: sem isto ele escapa da área rolável e cria rolagem na página. */
.table-responsive {
    position: relative;
}

/* ======= Assistente de criação de torneio (4 passos) =======
   O script da tela reescreve a classe dos <li> dos passos, então o estilo usa só a estrutura. */
.nav-tabs.mr-passos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 0;
    counter-reset: passo;
}

.nav-tabs.mr-passos > li {
    float: none;
    flex: 1 1 150px;
    margin: 0;
}

.nav-tabs.mr-passos > li > a,
.nav-tabs.mr-passos > li > a:hover,
.nav-tabs.mr-passos > li > a:focus {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 14px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    font-weight: 500;
    counter-increment: passo;
}

.nav-tabs.mr-passos > li > a::before {
    content: counter(passo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #fff;
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 13px;
    font-weight: 700;
}

.nav-tabs.mr-passos > li > a:hover {
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
}

.nav-tabs.mr-passos > li.active > a,
.nav-tabs.mr-passos > li.active > a:hover,
.nav-tabs.mr-passos > li.active > a:focus {
    background-color: var(--mr-primary);
    color: #fff;
    font-weight: 700;
}

.nav-tabs.mr-passos > li.active > a::before {
    color: var(--mr-primary-strong);
}

/* Título de cada passo. */
.mr-assistente .box-header {
    padding: 0;
    border: 0;
}

.mr-assistente .box-header .box-title {
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--mr-primary);
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 19px;
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
}

.mr-assistente .box-body {
    padding: 0;
}

/* Campos: rótulo em cima, à esquerda, e largura de leitura. */
.mr-assistente .box-body > .form-group:not([hidden]) {
    margin: 0 0 16px;
}

.mr-assistente .box-body > .form-group > label {
    float: none;
    display: block;
    width: auto;
    margin: 0;
    padding: 0 0 6px;
    text-align: left;
    font-weight: 500;
}

.mr-assistente .box-body > .form-group > .input-group,
.mr-assistente .box-body > .form-group > [class*="col-"]:not(label) {
    float: none;
    width: 100%;
    max-width: 320px;
    padding-left: 0;
    padding-right: 0;
}

.mr-assistente .box-body > .form-group > .col-sm-8:not(label),
.mr-assistente .box-body > .form-group > .col-md-6:not(label) {
    max-width: 680px;
}

.mr-assistente .box-body > .form-group > .input-group > .form-control:only-child {
    border-radius: var(--mr-radius-sm);
}

.mr-assistente .box-body > .form-group[style] {
    margin-left: 0 !important;
}

.mr-assistente .field-validation-error,
.mr-assistente .validation-summary-errors {
    color: #b51414;
    font-size: 13px;
}

/* Blocos de circuitos e categorias. */
.mr-assistente .panel {
    border: 0;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
    box-shadow: none;
    overflow: hidden;
}

.mr-assistente .panel-heading {
    padding: 14px 18px 10px;
    border: 0;
    background-color: transparent;
    color: var(--mr-court);
}

.mr-assistente .panel-heading small {
    color: var(--mr-text-muted);
    font-weight: 400;
}

.mr-assistente .panel-body {
    padding: 4px 18px 16px;
}

.mr-assistente .panel-body > .row {
    margin: 0;
    padding: 5px 8px !important;
    border-radius: 8px;
}

.mr-assistente .panel-body > .row:hover {
    background-color: #fff;
}

.mr-assistente .panel-body > .row input[type="checkbox"] {
    margin: 0 6px 0 0;
    vertical-align: -2px;
    accent-color: var(--mr-primary);
}

.mr-assistente .panel-body > .row > [class*="col-"] {
    display: inline-block;
    float: none;
    width: auto;
    min-height: 0;
    padding: 0;
    vertical-align: middle;
}

.mr-assistente .panel-body > .row .glyphicon-flag {
    margin-left: 6px;
    color: var(--mr-secondary);
}

/* Categorias em colunas, para a lista longa não virar uma tira estreita. */
.mr-assistente .panel-body:has(> [id^="divIdCategoria_"]) {
    column-width: 250px;
    column-gap: 20px;
}

.mr-assistente .panel-body > [id^="divIdCategoria_"] {
    break-inside: avoid;
}

.mr-assistente .pontuacao-circuito select {
    height: 30px;
    padding: 2px 8px;
    border: 1px solid #dde3e0;
    border-radius: 8px;
    background-color: #fff;
}

.mr-passos__avancar {
    display: block;
    width: fit-content;
    min-width: 140px;
    margin: 24px 0 0 auto;
    padding: 10px 22px;
    font-weight: 700;
}

@media (max-width: 767px) {
    .nav-tabs.mr-passos > li {
        flex: 1 1 40%;
    }

    .mr-passos__avancar {
        width: 100%;
    }
}

/* ======= Escolha de login (e-mail com mais de um usuário) ======= */
.mr-logins {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-logins__item,
.mr-logins__item:focus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background-color: var(--mr-bg);
    color: var(--mr-text);
    text-decoration: none;
}

.mr-logins__item:hover,
.mr-logins__item:focus-visible {
    background-color: var(--mr-primary-tint);
    color: var(--mr-text);
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--mr-primary-soft);
    outline: 0;
}

.mr-logins__item--destaque {
    background-color: var(--mr-court-tint);
}

.mr-logins__foto {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #fff;
    object-fit: cover;
}

.mr-logins__texto {
    flex: 1;
    min-width: 0;
}

.mr-logins__nome {
    display: block;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mr-logins__nota {
    display: block;
    margin-top: 2px;
    color: var(--mr-text-muted);
    font-size: 12px;
}

.mr-logins__seta {
    flex-shrink: 0;
    color: var(--mr-text-subtle);
    font-size: 12px;
}

.mr-logins__item:hover .mr-logins__seta {
    color: var(--mr-primary-strong);
}

/* ======= Telas antigas (sem redesenho próprio): ajustes gerais ======= */
/* Título em <legend> no topo da página: mesma faixa verde dos demais títulos. */
.mr-surface > legend:first-child,
.mr-surface > form:first-child > legend:first-child,
.mr-surface > .alert + legend {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 16px 22px;
    border: 0;
    border-radius: var(--mr-radius);
    background-color: var(--mr-court);
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* Tabelas com grade: ficam só com a divisória entre linhas, como as novas. */
.mr-surface .table-bordered,
.mr-surface .table-bordered > thead > tr > th,
.mr-surface .table-bordered > tbody > tr > th,
.mr-surface .table-bordered > tbody > tr > td,
.mr-surface .table-bordered > tfoot > tr > td {
    border-left: 0;
    border-right: 0;
}

.mr-surface .table-bordered {
    border-top: 0;
    border-bottom: 0;
}

.mr-surface .table-bordered > thead > tr > th,
.mr-surface .table-bordered > tbody > tr > th {
    background-color: transparent;
}

.mr-surface .table > tbody > tr.active > th,
.mr-surface .table > thead > tr.active > th {
    background-color: transparent;
}

/* Botão "info" azul do Bootstrap: verde da marca, como ação secundária. */
.mr-surface .btn-info,
.mr-surface .btn-info:focus {
    border-color: var(--mr-secondary);
    background-color: var(--mr-secondary);
    background-image: none;
    color: #fff;
}

.mr-surface .btn-info:hover,
.mr-surface .btn-info:active,
.mr-surface .btn-info:active:focus {
    border-color: var(--mr-court);
    background-color: var(--mr-court);
    color: #fff;
}

/* Campos de texto longo e editor não passam da largura do cartão. */
.mr-surface textarea {
    max-width: 100%;
}

.mr-surface .mce-tinymce {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .mr-surface .mce-tinymce,
    .mr-surface .mce-tinymce .mce-container-body,
    .mr-surface .mce-tinymce .mce-edit-area iframe {
        width: 100% !important;
    }

    .mr-surface .mce-tinymce .mce-container-body {
        overflow: hidden;
    }

    .mr-surface .mce-tinymce .mce-flow-layout {
        white-space: normal;
    }

    /* Tabela solta, fora de .table-responsive: rola dentro do cartão em vez de alargar a página. */
    .mr-surface :not(.table-responsive) > table.table,
    .mr-surface > table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Telas antigas no padrão AdminLTE (inscrição no torneio, detalhes): título em faixa verde,
   caixas em cinza claro sem borda e pares rótulo/valor mais legíveis. */
.mr-surface > .content-header {
    margin: 0 0 20px;
    padding: 16px 22px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-court);
}

.mr-surface > .content-header > h1 {
    margin: 0;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-stretch: 112%;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.mr-surface > .content {
    padding: 0;
}

.mr-surface .content .box {
    border: 0 !important;
    border-radius: var(--mr-radius) !important;
    background-color: var(--mr-bg);
    box-shadow: none;
}

.mr-surface .content .box > .box-header {
    padding: 18px 20px 6px;
    border: 0;
}

.mr-surface .content .box > .box-header .box-title {
    padding-left: 12px;
    border-left: 4px solid var(--mr-primary);
    color: var(--mr-court);
    font-size: 19px;
}

.mr-surface .content .box > .box-body {
    padding: 10px 20px 18px;
}

.mr-surface .content .box > .box-footer {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--mr-border);
    background-color: transparent;
}

.mr-surface .content .box .row {
    margin-bottom: 6px;
}

.mr-surface .content .box .row > label,
.mr-surface .content .box .control-label {
    color: var(--mr-text-muted);
    font-weight: 500;
}

.mr-surface .content .box .info-box-text {
    color: var(--mr-text);
    font-weight: 700;
    text-transform: none;
    white-space: normal;
}

.mr-surface .content .box .form-control {
    background-color: #fff;
}

.mr-surface .content .alert-danger:empty,
.mr-surface .field-validation-valid {
    display: none;
}

.mr-surface .content .field-validation-error {
    display: block;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: #b51414;
    font-size: 13px;
}

/* ======= Avisos ======= */
/* Um desenho só para as mensagens de retorno em todos os layouts (Bootstrap 3 e 5):
   fundo claro, texto escuro da mesma família, ícone à esquerda. O !important vence o
   AdminLTE, que pinta o fundo com cor cheia. */
.alert,
.validation-summary-errors {
    --mr-aviso-cor: #5c6661;
    --mr-aviso-fundo: #eef0ef;
    --mr-aviso-texto: #2c3531;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM9 9h2v6H9V9zm1-4.2a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E");
    position: relative;
    margin-bottom: 16px;
    padding: 14px 44px 14px 50px;
    border: 0 !important;
    border-radius: 14px;
    background-color: var(--mr-aviso-fundo) !important;
    background-image: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    color: var(--mr-aviso-texto) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-shadow: none;
}

.alert::before,
.validation-summary-errors::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 18px;
    width: 20px;
    height: 20px;
    background-color: var(--mr-aviso-cor);
    -webkit-mask: var(--mr-aviso-icone) center / contain no-repeat;
    mask: var(--mr-aviso-icone) center / contain no-repeat;
}

.alert:empty {
    display: none;
}

.alert-danger,
.alert-error,
.validation-summary-errors {
    --mr-aviso-cor: #c92a2a;
    --mr-aviso-fundo: #fdecec;
    --mr-aviso-texto: #7d1212;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM9 5h2v6H9V5zm1 7.6a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E");
}

.alert-success {
    --mr-aviso-cor: #1f8a4c;
    --mr-aviso-fundo: var(--mr-court-tint, #e8f1ec);
    --mr-aviso-texto: #014626;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zm4.3 6.6L9 13.4 5.9 10.3l1.3-1.3L9 10.8l4-4 1.3 1.3z'/%3E%3C/svg%3E");
}

.alert-info {
    --mr-aviso-cor: #1e73be;
    --mr-aviso-fundo: #e8f1fb;
    --mr-aviso-texto: #0f4c81;
}

.alert-warning {
    --mr-aviso-cor: #b97a00;
    --mr-aviso-fundo: #fdf3d7;
    --mr-aviso-texto: #6b4700;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.8c.5 0 .9.3 1.2.7l7.3 12.9c.5.9-.1 2.1-1.200 2.1H2.700c-1.100 0-1.700-1.200-1.200-2.100L8.800 2.500c.3-.4.7-.7 1.200-.7zM9 7h2v5H9V7zm1 6.300a1.200 1.200 0 110 2.400 1.200 1.200 0 010-2.400z'/%3E%3C/svg%3E");
}

.alert strong,
.alert b {
    font-weight: 700;
}

.alert a {
    color: inherit !important;
    font-weight: 500;
    text-decoration: underline;
}

.alert > :last-child,
.validation-summary-errors > :last-child {
    margin-bottom: 0;
}

/* Fechar: mesmo lugar no Bootstrap 3 (.close) e no 5 (.btn-close). */
.alert .close,
.alert .btn-close {
    position: absolute;
    top: 8px;
    right: 8px;
    float: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--mr-aviso-texto) !important;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    text-shadow: none;
    opacity: .65;
    cursor: pointer;
}

.alert .btn-close {
    background-size: 12px;
}

.alert .close:hover,
.alert .close:focus,
.alert .btn-close:hover,
.alert .btn-close:focus {
    background-color: rgba(0, 0, 0, .07);
    opacity: 1;
}

/* Lista de erros do formulário (Html.ValidationSummary). */
.validation-summary-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.validation-summary-errors li + li {
    margin-top: 4px;
}

.validation-summary-valid {
    display: none;
}

/* Erro de um campo: texto curto sob o campo e contorno vermelho no campo. */
.field-validation-error {
    display: block;
    margin-top: 4px;
    color: #b51414;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.input-validation-error,
.input-validation-error.form-control,
.has-error .form-control {
    border-color: #c92a2a !important;
    box-shadow: 0 0 0 3px rgba(201, 42, 42, .12) !important;
}

/* ======= Toastr ======= */
/* Cartão branco com faixa colorida, em vez do bloco de cor cheia com texto branco. */
body #toast-container > .toast {
    --mr-aviso-cor: #5c6661;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM9 9h2v6H9V9zm1-4.2a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E");
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 14px 40px 14px 52px;
    border-left: 4px solid var(--mr-aviso-cor);
    border-radius: 12px;
    background-color: #fff;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .16);
    color: var(--mr-text, #17211c);
    font-family: var(--mr-font, inherit);
    font-size: 15px;
    line-height: 1.4;
    opacity: 1;
}

body #toast-container > .toast:hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .22);
}

body #toast-container > .toast::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 22px;
    height: 22px;
    background-color: var(--mr-aviso-cor);
    -webkit-mask: var(--mr-aviso-icone) center / contain no-repeat;
    mask: var(--mr-aviso-icone) center / contain no-repeat;
}

body #toast-container > .toast-error {
    --mr-aviso-cor: #c92a2a;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zM9 5h2v6H9V5zm1 7.6a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z'/%3E%3C/svg%3E");
}

body #toast-container > .toast-success {
    --mr-aviso-cor: #1f8a4c;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.5a8.5 8.5 0 100 17 8.5 8.5 0 000-17zm4.3 6.6L9 13.4 5.9 10.3l1.3-1.3L9 10.8l4-4 1.3 1.3z'/%3E%3C/svg%3E");
}

body #toast-container > .toast-warning {
    --mr-aviso-cor: #b97a00;
    --mr-aviso-icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.8c.5 0 .9.3 1.2.7l7.3 12.9c.5.9-.1 2.1-1.200 2.1H2.700c-1.100 0-1.700-1.200-1.200-2.100L8.800 2.500c.3-.4.7-.7 1.200-.7zM9 7h2v5H9V7zm1 6.300a1.200 1.200 0 110 2.400 1.200 1.200 0 010-2.400z'/%3E%3C/svg%3E");
}

body #toast-container > .toast-info {
    --mr-aviso-cor: #1e73be;
}

body #toast-container .toast-title {
    margin-bottom: 2px;
    font-weight: 700;
}

body #toast-container .toast-message,
body #toast-container .toast-message a {
    color: var(--mr-text, #17211c);
    word-wrap: break-word;
}

body #toast-container .toast-close-button {
    position: absolute;
    top: 6px;
    right: 10px;
    color: var(--mr-text-muted, #666);
    font-weight: 400;
    text-shadow: none;
    opacity: .7;
}

body #toast-container .toast-progress {
    background-color: var(--mr-aviso-cor);
    opacity: .35;
}

/* ======= Página de erro ======= */
.mr-erro {
    max-width: 560px;
    margin: 48px auto;
    padding: 40px 32px;
    border-radius: 20px;
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
    text-align: center;
}

/* Dentro do cartão branco do layout não precisa de outro cartão. */
.mr-surface .mr-erro {
    margin: 24px auto;
    padding: 24px 16px;
    background-color: transparent;
    box-shadow: none;
}

.mr-erro__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background-color: #fdecec;
}

.mr-erro__icone::before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: #c92a2a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.8c.5 0 .9.3 1.2.7l7.3 12.9c.5.9-.1 2.1-1.200 2.1H2.700c-1.100 0-1.700-1.200-1.200-2.100L8.800 2.500c.3-.4.7-.7 1.200-.7zM9 7h2v5H9V7zm1 6.300a1.200 1.200 0 110 2.400 1.200 1.200 0 010-2.400z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1.8c.5 0 .9.3 1.2.7l7.3 12.9c.5.9-.1 2.1-1.200 2.1H2.700c-1.100 0-1.700-1.200-1.200-2.100L8.800 2.500c.3-.4.7-.7 1.200-.7zM9 7h2v5H9V7zm1 6.300a1.200 1.200 0 110 2.400 1.200 1.200 0 010-2.400z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mr-erro--sessao .mr-erro__icone {
    background-color: #fdf3d7;
}

.mr-erro--sessao .mr-erro__icone::before {
    background-color: #b97a00;
}

.mr-erro__titulo {
    margin: 0 0 8px;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.mr-erro__texto {
    margin: 0 auto 24px;
    max-width: 34em;
    color: var(--mr-text-muted);
    font-size: 16px;
    line-height: 1.5;
}

.mr-erro__acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.mr-erro__tecnico {
    margin: 24px 0 0;
    color: var(--mr-text-subtle);
    font-size: 13px;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .mr-erro {
        margin: 24px auto;
        padding: 32px 20px;
    }

    .mr-erro__acoes .btn,
    .mr-erro__acoes .mr-btn {
        width: 100%;
    }

    body #toast-container > .toast {
        width: calc(100vw - 24px);
    }
}

/* Mensagem de validação marcada como aviso: só o texto em vermelho, sem bloco. */
.field-validation-error.alert-danger,
.field-validation-error.alert-danger span {
    display: block;
    margin-top: 4px;
    padding: 0;
    background: none !important;
    color: #b51414 !important;
    font-size: 13px;
}

.field-validation-valid.alert-danger {
    display: none;
}

/* A inscrição repete todas as mensagens no topo da caixa e de novo sob cada campo: fica só sob o campo. */
.mr-surface .content .box-body > div:first-child:not([class]) > .field-validation-error,
.mr-surface .content .box-body > div:first-child:not([class]) > .field-validation-valid {
    display: none !important;
}

/* Formulário curto de cadastro (quadra): largura de leitura. */
.mr-form-quadra {
    max-width: 720px;
}

.mr-form-quadra .mr-form-acoes {
    margin-top: 24px;
}

/* Caixas antigas com colunas flutuantes: a caixa envolve o conteúdo e o botão final ganha respiro. */
.mr-surface .box > .box-body::after,
.mr-surface .box::after {
    content: "";
    display: table;
    clear: both;
}

.mr-surface .box > .btn,
.mr-surface .box > button.gerarTabela {
    margin: 4px 0 18px 18px;
}

/* ======= Ranking da liga: categorias na lateral, tabela ao lado ======= */
.mr-rkliga__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-rkliga__filtro {
    flex: 0 1 220px;
    min-width: 0;
}

.mr-rkliga__filtro--liga {
    flex: 1 1 320px;
}

.mr-rkliga__filtro label,
.mr-rkliga__rotulo {
    display: block;
    margin-bottom: 4px;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.mr-rkliga {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.mr-rkliga__categorias {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
}

.mr-rkliga__seletor {
    display: none;
}

.mr-rkliga__lista > li > a,
.mr-rkliga__lista > li > a:hover,
.mr-rkliga__lista > li > a:focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--mr-radius);
    background-color: transparent;
    color: var(--mr-text);
    font-size: 14px;
}

.mr-rkliga__lista > li > a:hover {
    background-color: var(--mr-bg);
}

.mr-rkliga__lista > li.active > a,
.mr-rkliga__lista > li.active > a:hover,
.mr-rkliga__lista > li.active > a:focus {
    background-color: var(--mr-secondary);
    color: #fff;
    font-weight: 700;
}

.mr-rkliga__qtd {
    color: var(--mr-text-subtle);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mr-rkliga__lista > li.active .mr-rkliga__qtd {
    color: rgba(255, 255, 255, .75);
}

.mr-rkliga__barra {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 12px;
}

.mr-rkliga__titulo {
    margin: 0;
    color: var(--mr-secondary);
    font-size: 22px;
    font-weight: 700;
}

.mr-rkliga__resumo {
    margin: 2px 0 0;
    color: var(--mr-text-muted);
    font-size: 13px;
}

.mr-rkliga__busca {
    flex: 0 1 260px;
    min-width: 0;
}

.mr-rkliga__tabela > thead > tr > th.mr-rkliga__pos,
.mr-rkliga__tabela > tbody > tr > td.mr-rkliga__pos {
    width: 84px;
    text-align: center;
}

.mr-rkliga__tabela > tbody > tr > td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mr-rkliga__tabela > tbody > tr > td.mr-tabela-lista__numero {
    font-weight: 700;
}

.mr-rkliga__num {
    display: inline-block;
    min-width: 30px;
    padding: 0 6px;
    border-radius: 15px;
    color: var(--mr-text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 30px;
}

.mr-rkliga__num--1 {
    background-color: var(--mr-primary);
    color: #fff;
    font-weight: 700;
}

.mr-rkliga__num--2,
.mr-rkliga__num--3 {
    background-color: var(--mr-primary-tint);
    color: var(--mr-primary-strong);
    font-weight: 700;
}

@media (max-width: 991px) {
    .mr-rkliga {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .mr-rkliga__categorias {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .mr-rkliga__seletor {
        display: block;
    }

    .mr-rkliga__lista {
        display: none;
    }

    .mr-rkliga__busca {
        flex: 1 1 100%;
    }

    .mr-rkliga__tabela > thead > tr > th.mr-rkliga__pos,
    .mr-rkliga__tabela > tbody > tr > td.mr-rkliga__pos {
        width: 60px;
    }
}

/* Três colunas cabem no celular: sem a rolagem lateral que o Bootstrap impõe. */
.mr-rkliga .table-responsive {
    margin-bottom: 0;
    border: 0;
    overflow: visible;
}

.mr-rkliga .table-responsive > .table > tbody > tr > td.mr-tabela-lista__titulo {
    white-space: normal;
}

/* ======= Classes do circuito: formulário em linha e lista ======= */
.mr-classes__nova {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 18px 0 26px;
    padding: 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-classes__campo {
    flex: 1 1 240px;
    min-width: 0;
}

.mr-classes__campo label {
    display: block;
    margin-bottom: 4px;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.mr-classes__nota {
    flex: 1 1 100%;
    margin: 0;
}

.mr-classes__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mr-classes__titulo {
    margin: 0;
    color: var(--mr-secondary);
    font-size: 18px;
    font-weight: 700;
}

.mr-classes__total,
.mr-classes__categoria {
    color: var(--mr-text-muted);
}

.mr-classes__total {
    font-size: 13px;
}

.btn.mr-btn-excluir,
.btn.mr-btn-excluir:hover,
.btn.mr-btn-excluir:focus {
    color: var(--mr-danger);
}

@media (max-width: 575px) {
    .mr-classes__acao,
    .mr-classes__acao .btn {
        width: 100%;
    }
}

/* No celular os nomes quebram linha em vez de forçar rolagem lateral. */
@media (max-width: 767px) {
    #listaClasses > tbody > tr > td:not(.mr-tabela-lista__acoes) {
        white-space: normal;
    }
}

/* ======= Lista de jogadores ======= */
.mr-jogadores__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mr-page-head__aside.mr-jogadores__acoes .btn-default,
.mr-page-head__aside.mr-jogadores__acoes .btn-default:hover,
.mr-page-head__aside.mr-jogadores__acoes .btn-default:focus {
    border-color: rgba(255, 255, 255, .45);
    background-color: transparent;
    color: #fff;
}

.mr-page-head__aside.mr-jogadores__acoes .btn-default:hover {
    background-color: rgba(255, 255, 255, .12);
}

.mr-jogadores__filtros,
.mr-jogadores__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.mr-jogadores__filtros {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-jogadores__form {
    flex: 3 1 480px;
    margin: 0;
}

.mr-jogadores__filtro {
    flex: 1 1 170px;
    min-width: 0;
}

.mr-jogadores__filtro--busca {
    flex: 1 1 220px;
}

.mr-jogadores__filtro label {
    display: block;
    margin-bottom: 4px;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.mr-jogadores__tabela > thead > tr > th.mr-jogadores__ordem,
.mr-jogadores__tabela > tbody > tr > td.mr-jogadores__ordem {
    width: 44px;
    color: var(--mr-text-subtle);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mr-jogadores__tabela > tbody > tr > td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.mr-jogadores__email {
    display: block;
    color: var(--mr-text-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.mr-jogadores__tabela .mr-btn-icone + .mr-btn-icone {
    margin-left: 2px;
}

/* ======= Edição de jogador: resumo na lateral, campos em seções ======= */
.mr-editar {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 20px;
}

.mr-editar__lado {
    padding: 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
    text-align: center;
}

.mr-editar__foto img {
    display: block;
    width: 120px;
    height: 160px;
    margin: 0 auto 12px;
    border-radius: var(--mr-radius);
    background-color: #fff;
    object-fit: cover;
    cursor: pointer;
}

.mr-editar__nome {
    margin: 0 0 2px;
    color: var(--mr-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.mr-editar__info {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.mr-editar__conta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.mr-editar__conta:empty {
    display: none;
}

.mr-surface .mr-editar__aviso {
    margin: 12px 0 0;
    padding: 8px 10px;
    font-size: 13px;
    text-align: left;
}

.mr-editar__corpo {
    max-width: 720px;
}

.mr-editar__secao {
    margin: 28px 0 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mr-border);
    color: var(--mr-secondary);
    font-size: 16px;
    font-weight: 700;
}

.mr-editar__secao:first-child {
    margin-top: 0;
}

.mr-editar__fixo {
    margin: 0;
    padding: 11px 0;
    color: var(--mr-text);
    font-size: 15px;
}

.mr-editar__obrigatorio {
    color: var(--mr-danger);
}

.mr-editar .mr-campo .input-group-addon {
    border-color: var(--mr-border);
    background-color: var(--mr-bg);
}

.mr-editar__acoes {
    margin-top: 28px;
}

.mr-editar__excluir {
    margin-right: auto;
}

.mr-editar-foto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
}

.mr-editar-foto .mr-ajuda {
    margin: 0;
}

.mr-editar-foto__area {
    width: 318px;
    max-width: 100%;
    height: 413px;
    border: 2px dashed var(--mr-border);
    border-radius: var(--mr-radius);
    overflow: auto;
}

@media (max-width: 767px) {
    .mr-editar {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .mr-editar .mr-campos {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Botão de escolher foto: o campo de arquivo fica invisível sobre o botão. */
.mr-editar-foto .fileUpload {
    position: relative;
    margin: 0;
    overflow: hidden;
}

.mr-editar-foto .fileUpload input.upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ======= Home do torneio: foto do esporte na abertura ======= */
/* A foto fica sob um véu verde, mais fechado do lado do texto. Se a imagem
   não existir, sobra o cartão verde da marca. */
.mr-hero--foto {
    padding-top: 96px;
    padding-bottom: 104px;
    background-position: center 22%;
    background-size: cover;
    background-repeat: no-repeat;
}

.mr-hero--foto::before,
.mr-hero--foto::after {
    display: none;
}

.mr-hero--tenis {
    background-image: linear-gradient(90deg, rgba(1, 50, 28, .94) 0%, rgba(1, 50, 28, .78) 45%, rgba(1, 50, 28, .3) 100%), url('/images/background/bg-header-2.jpg');
}

.mr-hero--beach {
    background-image: linear-gradient(90deg, rgba(1, 50, 28, .94) 0%, rgba(1, 50, 28, .78) 45%, rgba(1, 50, 28, .3) 100%), url('/images/background/bg-header-3.jpg');
}

.mr-hero--padel {
    background-image: linear-gradient(90deg, rgba(1, 50, 28, .94) 0%, rgba(1, 50, 28, .78) 45%, rgba(1, 50, 28, .3) 100%), url('/images/background/padel/bg-header-2.jpg');
}

.mr-hero--pickleball {
    background-image: linear-gradient(90deg, rgba(1, 50, 28, .94) 0%, rgba(1, 50, 28, .78) 45%, rgba(1, 50, 28, .3) 100%), url('/images/background/pickleball/bg-header-2.jpg');
}

.mr-hero--foto .mr-hero__titulo,
.mr-hero--foto .mr-fatos dd {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.mr-hero--foto .mr-btn--claro {
    background-color: rgba(1, 50, 28, .45);
}

.mr-hero--foto .mr-status {
    background-color: rgba(1, 50, 28, .6);
}

@media (max-width: 767px) {
    .mr-hero--tenis,
    .mr-hero--beach,
    .mr-hero--padel,
    .mr-hero--pickleball {
        padding-top: 56px;
        padding-bottom: 60px;
        background-position: 70% center;
    }
}

/* Dados do torneio: destino do botão "Informações". */
.mr-info-torneio {
    scroll-margin-top: 96px;
}

.mr-info-torneio:focus {
    outline: none;
}

.mr-info-torneio .mr-secao__titulo {
    margin-bottom: 20px;
}

.mr-info-torneio .mr-recurso h3 .glyphicon {
    margin-right: 6px;
    color: var(--mr-primary);
    font-size: 16px;
}

.mr-info-torneio__vazio {
    color: var(--mr-text-subtle);
}

.mr-info-torneio--destaque .mr-recurso {
    animation: mr-info-destaque 1.6s ease-out 1;
}

@keyframes mr-info-destaque {
    0%, 35% { box-shadow: 0 0 0 3px var(--mr-primary), var(--mr-shadow); }
    100% { box-shadow: 0 0 0 3px rgba(225, 131, 53, 0), var(--mr-shadow); }
}

@media (prefers-reduced-motion: reduce) {
    .mr-info-torneio--destaque .mr-recurso {
        animation-duration: .01s;
    }
}

/* ======= Inscrição no torneio (Torneio/Detalhes e Account/RegisterTorneio) ======= */
.mr-page-head__aside a.btn.mr-btn-faixa,
.mr-page-head__aside a.btn.mr-btn-faixa:hover,
.mr-page-head__aside a.btn.mr-btn-faixa:focus {
    border-color: rgba(255, 255, 255, .45);
    background-color: transparent;
    color: #fff;
}

.mr-page-head__aside a.btn.mr-btn-faixa:hover {
    background-color: rgba(255, 255, 255, .12);
}

/* Formulário à esquerda e mais largo; resumo do torneio ao lado. */
.mr-inscricao__grade,
.mr-inscricao--cadastro > .row > form {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
    align-items: start;
    margin: 0;
}

.mr-inscricao--cadastro > .row {
    margin: 0;
}

.mr-inscricao--cadastro > .row > form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.mr-inscricao__grade::before,
.mr-inscricao__grade::after {
    display: none;
}

.mr-inscricao__grade > [class*="col-"],
.mr-inscricao--cadastro > .row > form > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}

.mr-inscricao__grade > .mr-inscricao__form {
    order: -1;
}

.mr-inscricao .box {
    margin-bottom: 0;
}

.mr-inscricao .mr-inscricao__form > .box {
    background-color: var(--mr-surface);
    box-shadow: inset 0 0 0 1px var(--mr-border);
}

/* Linhas de rótulo e valor: valores, descontos e respostas de sim ou não. */
.mr-inscricao .box-body > .row,
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--mr-border);
}

.mr-inscricao .box-body > .row::before,
.mr-inscricao .box-body > .row::after {
    display: none;
}

.mr-inscricao .box-body > .row > [class*="col-"],
.mr-inscricao .box-body > .row > label,
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] > [class*="col-"],
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] > label {
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.mr-inscricao .box-body > .row > .info-box-text {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mr-inscricao .box-body > .row:empty,
.mr-inscricao .box-body > .row:not(:has(*)) {
    display: none;
}

/* Linha de categoria: rótulo em cima, seletor na largura toda. */
.mr-inscricao .box-body > .row:has(select),
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"]:has(select) {
    display: block;
    border-bottom: 0;
}

.mr-inscricao .box-body > .row:has(> [id$="OpcaoClasse"]),
.mr-inscricao .box-body > .row:has(> .mr-inscricao__aviso),
.mr-inscricao .box-body > .row:has(> .col-xs-12 > .mr-etiqueta) {
    display: block;
    padding: 0;
    border-bottom: 0;
}

.mr-inscricao .box-body > .row:has(> .col-xs-12 > .mr-etiqueta) {
    padding: 12px 0 4px;
}

.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] {
    padding-top: 0;
}

.mr-inscricao .box-body > .row:has(select) > label,
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] > label {
    display: block;
    margin-bottom: 6px;
    color: var(--mr-text);
}

.mr-inscricao .box-body > .row:has(select) > .info-box-text,
.mr-inscricao .box-body > .row > [id$="OpcaoClasse"] > .info-box-text {
    text-align: left;
}

.mr-inscricao .box-body select.form-control,
.mr-inscricao .box-body input.form-control {
    height: 44px;
    font-size: 15px;
    font-weight: 400;
}

.mr-inscricao .box-body > .form-group,
.mr-inscricao .box-body > .row > .form-group {
    margin: 0;
    padding: 2px 0 6px;
}

.mr-inscricao .box-body .form-group > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}

.mr-inscricao .checkbox {
    margin: 0;
    padding: 0;
}

.mr-inscricao .checkbox label,
.mr-escolha {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    color: var(--mr-text);
    font-weight: 500;
    cursor: pointer;
}

.mr-inscricao .checkbox input[type="checkbox"],
.mr-escolha input[type="radio"] {
    position: static;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mr-primary);
}

.mr-escolha + .mr-escolha {
    margin-left: 16px;
}

.mr-inscricao__aviso {
    margin: 10px 0 4px;
    padding: 10px 12px !important;
    border-radius: var(--mr-radius);
    background-color: var(--mr-primary-tint);
    color: var(--mr-text);
    font-size: 14px;
}

.mr-inscricao__aviso a {
    color: var(--mr-primary-strong);
    font-weight: 700;
    text-decoration: underline;
}

/* Perguntas do organizador (camiseta, observação). */
.mr-inscricao .boxPadrao {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-inscricao .boxPadrao > .row {
    margin: 0;
}

.mr-inscricao .boxPadrao > .row > [class*="col-"] {
    float: none;
    width: auto;
    padding: 0;
}

.mr-inscricao .boxPadrao > .row.form-group {
    margin: 10px 0 0 !important;
}

.mr-inscricao .box-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.mr-inscricao__pagar,
.mr-inscricao__salvar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mr-inscricao__pagar:empty {
    display: none;
}

.mr-inscricao__pagar {
    margin-right: auto;
}

.mr-inscricao__encerrada {
    margin: 0;
    color: var(--mr-danger);
    font-weight: 700;
}

/* Resumo do torneio: rótulo estreito, texto alinhado à esquerda. */
.mr-inscricao__resumo .box-body > .row {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.mr-inscricao__resumo .box-body > .row > label {
    flex: 0 0 100px;
}

.mr-inscricao__resumo .box-body > .row > .info-box-text {
    text-align: left;
}

.mr-inscricao__resumo .box-body > .row:last-child {
    border-bottom: 0;
}

/* Dados para transferência: só aparecem depois do clique em "Transferência". */
.exibir-dadosbancarios {
    display: none;
    margin-top: 24px;
}

.exibir-dadosbancarios.show {
    display: block;
}

/* Cadastro de quem ainda não tem conta: campos empilhados em duas colunas. */
.mr-inscricao__pessoal .form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.mr-inscricao__pessoal .form > .row.form-group {
    margin: 0;
}

.mr-inscricao__pessoal .form > .row.form-group::before,
.mr-inscricao__pessoal .form > .row.form-group::after {
    display: none;
}

.mr-inscricao__pessoal .form > .row.form-group:nth-of-type(1),
.mr-inscricao__pessoal .form > .row.form-group:nth-of-type(4) {
    grid-column: 1 / -1;
}

.mr-inscricao__pessoal .form > .row.form-group > [class*="col-"],
.mr-inscricao__pessoal .form > .row.form-group > label {
    float: none;
    width: auto;
    padding: 0;
    text-align: left;
}

.mr-inscricao__pessoal .form > .row.form-group > label {
    display: inline-block;
    margin-bottom: 6px;
    color: var(--mr-text);
}

.mr-obrigatorio > label::after {
    content: " *";
    color: var(--mr-danger);
}

.mr-inscricao__pessoal .mr-inscricao__aviso {
    margin: 6px 0 0;
    padding: 0 !important;
    background-color: transparent;
    color: var(--mr-text-muted);
    font-size: 13px;
}

@media (max-width: 991px) {
    .mr-inscricao__grade,
    .mr-inscricao--cadastro > .row > form {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 575px) {
    .mr-inscricao__pessoal .form {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-inscricao .box-footer .btn {
        flex: 1 1 auto;
    }
}

/* Colunas fixas: o resumo de validação que o servidor insere no formulário
   ocupa uma linha inteira em vez de empurrar os dois quadros. */
.mr-inscricao--cadastro > .row > form > :not([class*="col-"]) {
    grid-column: 1 / -1;
}

.mr-inscricao--cadastro > .row > form > .validation-summary-valid,
.mr-inscricao--cadastro > .row > form > input[type="hidden"] {
    display: none;
}

.mr-inscricao--cadastro > .row > form > .mr-inscricao__pessoal {
    grid-column: 1;
}

.mr-inscricao--cadastro > .row > form > .mr-inscricao__form {
    grid-column: 2;
}

@media (max-width: 991px) {
    .mr-inscricao--cadastro > .row > form > .mr-inscricao__pessoal,
    .mr-inscricao--cadastro > .row > form > .mr-inscricao__form {
        grid-column: auto;
    }
}

/* ======= Confirmação da inscrição e pagamento ======= */
.mr-pagamento .box + .box,
.mr-pagamento .collapse > .box,
.mr-pagamento .mr-pagamento__cpf {
    margin-top: 16px;
}

.mr-pagamento .collapse:first-child > .box {
    margin-top: 0;
}

.mr-pagamento__valor {
    margin: 0 0 4px;
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mr-pagamento__texto {
    margin: 0 0 16px;
    color: var(--mr-text-muted);
}

.mr-pagamento__formas,
.mr-pagamento__copia,
.mr-pagamento__lojas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.mr-pagamento__copia {
    flex-wrap: nowrap;
    margin: 14px 0 10px;
}

.mr-pagamento__copia .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
}

.mr-pagamento__instrucao {
    color: var(--mr-text);
    line-height: 1.5;
}

.mr-pagamento #qrcode_img img {
    border-radius: var(--mr-radius);
}

.mr-pagamento__cpf p {
    margin: 0;
}

.mr-pagamento__extra .box-body > p {
    margin-bottom: 12px;
    color: var(--mr-text-muted);
}

.mr-pagamento__lojas img {
    display: block;
    height: 46px;
    width: auto;
}

.mr-pagamento__lojas img.mr-pagamento__loja--google {
    height: 68px;
    margin: -11px;
}

.mr-pagamento__grupo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--mr-text);
    font-weight: 700;
}

.mr-pagamento__grupo img {
    width: 36px;
    height: 36px;
}

@media (max-width: 479px) {
    .mr-pagamento__copia {
        flex-wrap: wrap;
    }

    .mr-pagamento__copia .btn {
        flex: 1 1 100%;
    }
}

/* ======= Classificação da fase de grupos ======= */
.mr-classificacao__caixa {
    max-width: 760px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.mr-classificacao > thead > tr > th:first-child,
.mr-classificacao > tbody > tr > td:first-child {
    width: 56px;
    color: var(--mr-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mr-classificacao > tbody > tr > td:nth-child(2) {
    font-weight: 700;
}

.mr-classificacao > thead > tr > th:nth-child(n+3),
.mr-classificacao > tbody > tr > td:nth-child(n+3) {
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

/* ======= Escolha de dupla ======= */
.mr-dupla {
    max-width: 760px;
}

.mr-dupla > .mr-ajuda,
.mr-dupla > .mr-inscricao__aviso {
    margin: 0 0 14px;
}

.mr-dupla__minha > td {
    background-color: var(--mr-primary-tint);
}

.mr-dupla__livre {
    color: var(--mr-text-subtle);
}

/* ======= Formulários curtos (senha, e-mail, seleção) ======= */
.mr-form-simples {
    max-width: 460px;
}

.mr-campos--coluna {
    grid-template-columns: minmax(0, 1fr);
}

.mr-form-simples .mr-form-acoes {
    margin-top: 20px;
}

.mr-form-simples .validation-summary-errors ul {
    margin: 0 0 14px;
    padding-left: 18px;
}

.mr-form-simples .validation-summary-valid {
    display: none;
}

.mr-aviso-acao {
    max-width: 560px;
    padding: 20px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-aviso-acao p {
    margin: 0 0 10px;
}

/* ======= Minha pontuação ======= */
.mr-page-head__aside.mr-pontuacao__total {
    text-align: right;
}

.mr-pontuacao__total span {
    display: block;
    font-size: 13px;
}

.mr-pontuacao__total strong {
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 28px;
    font-variant-numeric: tabular-nums;
}

.mr-pontuacao__tabela {
    max-width: 720px;
    margin: 12px 0;
}

.mr-pontuacao__atrasado > td {
    background-color: #fde9e9;
}

.mr-cadastro {
    max-width: 720px;
}

.mr-cadastro .validation-summary-valid {
    display: none;
}

/* ======= Ranking por rodada ======= */
.mr-ranking__tabela {
    max-width: 920px;
    margin-top: 14px;
}

.mr-ranking__tabela > .table > thead > tr > th.mr-ranking__pos,
.mr-ranking__tabela > .table > tbody > tr > td.mr-ranking__pos {
    width: 84px;
    text-align: center;
}

.mr-ranking__jogador {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mr-ranking__jogador img {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* ======= Regras de pontuação ======= */
.mr-regras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 920px;
}

.mr-regras__bloco {
    padding: 18px 20px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-regras__bloco h2 {
    margin: 0 0 10px;
    color: var(--mr-secondary);
    font-size: 17px;
    font-weight: 700;
}

.mr-regras__bloco p {
    margin: 0;
}

.mr-regras__bloco .table {
    background-color: transparent;
}

@media (max-width: 767px) {
    .mr-regras {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======= Painel de controle do ranking ======= */
.mr-rkpainel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mr-rkpainel__cartao {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-rkpainel__cartao--largo {
    grid-column: 1 / -1;
}

.mr-rkpainel__icone {
    display: flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--mr-secondary);
    color: #fff;
    font-size: 18px;
}

.mr-rkpainel__icone--alerta {
    background-color: var(--mr-danger);
}

.mr-rkpainel__icone--destaque {
    background-color: var(--mr-primary);
}

.mr-rkpainel__corpo {
    min-width: 0;
}

.mr-rkpainel__titulo {
    margin: 0 0 6px;
    color: var(--mr-text);
    font-size: 17px;
    font-weight: 700;
}

.mr-rkpainel__titulo .mr-etiqueta {
    margin-left: 6px;
    vertical-align: middle;
}

.mr-rkpainel__texto {
    margin: 0 0 4px;
    color: var(--mr-text-muted);
}

.mr-rkpainel__texto a {
    color: var(--mr-primary-strong);
}

.mr-rkpainel__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 991px) {
    .mr-rkpainel {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mr-liga-config {
    margin-top: 18px;
}

.mr-classes__campo--curto {
    flex: 0 1 240px;
}

.mr-categoria__escolha {
    display: flex;
    gap: 8px;
}

.mr-categoria__escolha .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.mr-categoria__escolha .btn {
    flex: 0 0 auto;
}

/* ======= Configuração do ranking (Barragens): formulário longo padronizado por estilos ======= */
.mr-barragem {
    max-width: 760px;
    padding-top: 18px;
}

.mr-barragem.mr-barragem--textos {
    max-width: 920px;
    padding-top: 0;
}

.mr-barragem .row {
    margin: 0 0 12px;
}

.mr-barragem .row .row {
    margin-bottom: 4px;
}

.mr-barragem .row > [class*="col-"],
.mr-barragem .form-group > [class*="col-"] {
    float: none;
    width: 100%;
    padding: 0;
}

.mr-barragem .form-group {
    margin: 0 0 12px;
}

.mr-barragem .input-group,
.mr-barragem .input-group[class*="col-"] {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
}

.mr-barragem label,
.mr-barragem .control-label,
.mr-barragem .editor-label label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--mr-text);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.mr-barragem label::first-letter {
    text-transform: uppercase;
}

.mr-barragem .form-control,
.mr-barragem input[type="text"]:not(.form-control),
.mr-barragem select:not(.form-control) {
    width: 100% !important;
    max-width: 100%;
    height: 44px;
    font-size: 15px;
}

/* Campos numéricos curtos que vêm lado a lado com o rótulo. */
.mr-barragem .row > .col-xs-2 > .form-control,
.mr-barragem .row > .col-xs-3 > .form-control {
    max-width: 180px;
}

.mr-barragem label:has(> input[type="checkbox"]),
.mr-barragem label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-weight: 400;
    cursor: pointer;
}

.mr-barragem input[type="checkbox"],
.mr-barragem input[type="radio"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mr-primary);
}

.mr-barragem .editor-label {
    margin-top: 22px;
}

.mr-barragem .editor-field {
    margin-bottom: 6px;
}

.mr-barragem .field-validation-error {
    display: block;
    margin-top: 4px;
    color: var(--mr-danger);
    font-size: 13px;
}

.mr-barragem input[type="submit"] {
    margin-top: 10px;
}

.mr-barragem__topo {
    align-items: center;
    margin: 18px 0 10px;
}

.mr-barragem__topo .mr-ajuda {
    margin: 0;
}

.btn.btn-pendente {
    border-color: var(--mr-primary) !important;
    background-color: var(--mr-primary) !important;
    color: #fff !important;
}

.mr-barragem label,
.mr-barragem .control-label {
    display: inline-block;
}

.mr-barragem .form-control + .form-control {
    margin-top: 8px;
}

/* Ranking no celular: nomes e títulos quebram linha, sem rolagem lateral. */
@media (max-width: 767px) {
    .mr-ranking__tabela.table-responsive {
        border: 0;
        overflow: visible;
    }

    .mr-ranking__tabela > .table > thead > tr > th,
    .mr-ranking__tabela > .table > tbody > tr > td {
        padding-left: 4px;
        padding-right: 4px;
        white-space: normal;
    }

    .mr-ranking__tabela > .table > thead > tr > th.mr-ranking__pos,
    .mr-ranking__tabela > .table > tbody > tr > td.mr-ranking__pos {
        width: 44px;
    }

    .mr-ranking__tabela > .table > tbody > tr > td.mr-tabela-lista__numero {
        white-space: nowrap;
    }
}

/* ======= Barragens/Edit: dados do ranking em seções ======= */
.mr-ranking-form {
    max-width: 760px;
    padding-top: 20px;
}

.mr-ranking-form .mr-campos + .mr-campos,
.mr-ranking-form__pontos {
    margin-top: 16px;
}

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

.mr-ranking-form__opcoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}

/* Opções que dependem do tipo de ranking: recuo com filete, para ligar ao campo de cima. */
.mr-ranking-form__bloco {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--mr-primary);
    border-radius: 0 var(--mr-radius) var(--mr-radius) 0;
    background-color: var(--mr-bg);
}

.mr-ranking-form__sub {
    margin-top: 14px;
}

.mr-ranking-form__texto {
    margin-bottom: 20px;
}

.mr-ranking-form__texto > label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.mr-ranking-form .field-validation-error {
    display: block;
    margin-top: 4px;
    color: var(--mr-danger);
    font-size: 13px;
}

@media (max-width: 767px) {
    .mr-ranking-form .mr-campos,
    .mr-ranking-form__opcoes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ======= Barragens/EditClasse: classes do ranking, edição por linha ======= */
.mr-barragem__topo .mr-classes__total {
    margin: 0 0 2px;
    color: var(--mr-text);
    font-size: 15px;
    font-weight: 700;
}

.mr-classes-rk {
    max-width: 920px;
}

.mr-classes-rk > .table > thead > tr > th.mr-classes-rk__ordem,
.mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ordem {
    width: 44px;
    color: var(--mr-text-subtle);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mr-classes-rk > .table > thead > tr > th.mr-classes-rk__ativa,
.mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ativa {
    width: 76px;
    text-align: center;
}

.mr-classes-rk > .table > thead > tr > th.mr-classes-rk__nivel,
.mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__nivel {
    width: 170px;
}

.mr-classes-rk input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--mr-primary);
    cursor: pointer;
}

.mr-classes-rk .mr-tabela-edicao input[type="text"].form-control {
    min-width: 0;
}

/* Classe desativada continua editável, só perde destaque. */
.mr-classes-rk__inativa input[type="text"].form-control,
.mr-classes-rk__inativa select.form-control {
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
}

@media (max-width: 767px) {
    .mr-classes-rk.table-responsive {
        border: 0;
        overflow: visible;
    }

    /* Cada classe vira um bloco: nome na linha de cima, controles embaixo. */
    .mr-classes-rk > .table > thead {
        display: none;
    }

    .mr-classes-rk > .table > tbody > tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--mr-border);
    }

    .mr-classes-rk > .table > tbody > tr > td {
        width: auto !important;
        padding: 0;
        border: 0;
        white-space: normal;
    }

    .mr-classes-rk > .table > tbody > tr > td:nth-child(2) {
        grid-column: 2 / -1;
    }

    .mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ativa {
        grid-column: 1;
    }

    .mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__nivel {
        grid-column: 2;
    }

    .mr-classes-rk > .table > tbody > tr > td.mr-tabela-lista__acoes {
        grid-column: 1 / -1;
        text-align: right;
    }
}

@media (max-width: 767px) {
    .mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ativa {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ativa::after {
        content: "Ativa";
        color: var(--mr-text-muted);
        font-size: 13px;
    }

    .mr-classes-rk > .table > tbody > tr > td.mr-classes-rk__ordem {
        text-align: left;
    }
}

/* ======= Gestão de jogos: passos de "Gerar tabela" e "Excluir tabela" ======= */
.mr-passo {
    margin: 18px 0;
}

.mr-surface .mr-passo .mr-passo__caixa,
.mr-passo__caixa {
    position: relative;
    margin: 0;
    padding: 18px 20px;
    border: 0 !important;
    border-left: 4px solid var(--mr-secondary) !important;
    border-radius: 0 var(--mr-radius) var(--mr-radius) 0 !important;
    background-color: var(--mr-bg);
    box-shadow: none;
    color: var(--mr-text);
}

.mr-surface .mr-passo .mr-passo__caixa--alerta,
.mr-passo__caixa--alerta {
    border-left-color: var(--mr-primary) !important;
    background-color: var(--mr-primary-tint);
}

.mr-surface .mr-passo .mr-passo__caixa--perigo,
.mr-passo__caixa--perigo {
    border-left-color: var(--mr-danger) !important;
    background-color: #fdf1f1;
}

.mr-passo__caixa > .close {
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--mr-text);
    opacity: .6;
}

.mr-passo .box-header {
    padding: 0 0 10px !important;
    border: 0 !important;
}

.mr-passo .box-header .box-title,
.mr-passo__titulo {
    margin: 0 0 10px;
    padding: 0 !important;
    border: 0 !important;
    color: var(--mr-court) !important;
    font-size: 17px !important;
    font-weight: 700;
}

.mr-passo .box-header .box-title.mr-passo__erro {
    color: var(--mr-danger) !important;
}

.mr-passo .box-body {
    padding: 0 !important;
}

.mr-passo__sub {
    margin: 14px 0 6px;
    color: var(--mr-text);
    font-size: 15px;
    font-weight: 700;
}

.mr-passo__caixa p {
    margin: 0 0 8px;
}

.mr-passo__opcoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 20px;
    margin-bottom: 4px;
}

.mr-passo__opcoes::before,
.mr-passo__opcoes::after {
    display: none;
}

.mr-passo__opcoes > form {
    display: contents;
}

.mr-passo hr {
    margin: 16px 0;
    border-color: var(--mr-border);
}

.mr-passo__categoria {
    margin: 12px 0 4px;
    color: var(--mr-court);
    font-weight: 700;
}

.mr-passo__escolhas {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.mr-passo__escolhas[style*="display: none"],
.mr-passo__escolhas[style*="display:none"] {
    display: none !important;
}

.mr-passo__pergunta {
    margin: 16px 0 8px !important;
    font-weight: 700;
}

.mr-passo__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
    margin-top: 14px;
}

.mr-passo__caixa .box-body > .btn {
    margin: 0 8px 0 0;
}

.mr-passo .layout_tabela_inscricoes {
    width: 100%;
    margin-bottom: 4px;
}

.mr-passo .layout_tabela_inscricoes .layout_th,
.mr-passo .layout_tabela_inscricoes .layout_td {
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    color: var(--mr-text);
    vertical-align: top;
}

.mr-passo .layout_tabela_inscricoes .layout_th {
    width: 220px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .mr-passo__opcoes {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-passo .layout_tabela_inscricoes .layout_th {
        width: auto;
        white-space: normal;
    }
}

/* ======= Painel do organizador: classes do circuito (Liga/Edit) ======= */
.mr-circuito__nova {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 20px 0 28px;
    padding: 16px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-bg);
}

.mr-circuito__nome {
    flex: 1 1 320px;
    min-width: 0;
}

.mr-circuito__nome label {
    display: block;
    margin-bottom: 4px;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.mr-circuito__dupla {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 0;
}

.mr-circuito__dupla .form-check-input {
    float: none;
    width: 18px;
    height: 18px;
    margin: 0;
}

.mr-circuito__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mr-border);
}

.mr-circuito__topo h4 {
    margin: 0;
    color: var(--mr-secondary);
    font-size: 18px;
    font-weight: 700;
}

.mr-circuito__topo span {
    color: var(--mr-text-muted);
    font-size: 13px;
}

.mr-circuito .mr-circuito__linha {
    gap: 12px;
    margin: 0 !important;
    padding: 8px 0;
    border-bottom: 1px solid var(--mr-border);
}

.mr-circuito .mr-circuito__linha h5 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.mr-circuito .mr-circuito__linha .input-edit {
    width: 100%;
    max-width: 420px;
    height: 40px;
    font-size: 15px;
    font-weight: 500;
}

.mr-circuito__selo {
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: var(--mr-court-tint, #e6f0eb);
    color: var(--mr-court);
    font-size: 11px;
    font-weight: 500;
}

.mr-circuito .wrapper__buttons {
    flex: 0 0 auto;
    gap: 6px;
}

.mr-circuito .wrapper__buttons .btn-white,
.mr-circuito .wrapper__buttons .btn-danger {
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 5px 14px;
    border: 1px solid var(--mr-border);
    border-radius: 999px;
    background-color: #fff;
    color: var(--mr-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.mr-circuito .wrapper__buttons .btn-danger {
    color: var(--mr-danger);
}

.mr-circuito .wrapper__buttons .btn-danger:hover {
    border-color: var(--mr-danger);
    background-color: #fdf1f1;
}

@media (max-width: 575px) {
    .mr-circuito__nova .btn {
        width: 100%;
    }

    .mr-circuito .mr-circuito__linha {
        flex-wrap: wrap;
    }
}

.mr-circuito .wrapper__buttons button.btn-white,
.mr-circuito .wrapper__buttons button.btn-danger {
    width: auto !important;
    height: auto !important;
    padding: 5px 14px !important;
    border: 1px solid var(--mr-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--mr-text) !important;
    font-size: 13px !important;
}

.mr-circuito .wrapper__buttons button.btn-danger {
    color: var(--mr-danger) !important;
}

.mr-circuito .wrapper__buttons button.btn-danger:hover {
    border-color: var(--mr-danger) !important;
    background: #fdf1f1 !important;
}

/* ======= Painel do organizador: integração com o PagSeguro em passos ======= */
.mr-pagseguro {
    max-width: 760px;
}

.mr-pagseguro .mr-pagseguro__ok {
    border: 0;
    border-left: 4px solid var(--mr-secondary);
    border-radius: 0 var(--mr-radius) var(--mr-radius) 0;
    background-color: var(--mr-bg);
    color: var(--mr-text);
}

.mr-pagseguro .avisos p,
.mr-pagseguro .avisos li {
    color: var(--mr-text);
    font-size: 15px;
    line-height: 1.55;
}

.mr-pagseguro .avisos h3 {
    margin: 28px 0 10px;
    padding-top: 20px;
    border-top: 1px solid var(--mr-border);
    color: var(--mr-court);
    font-size: 18px;
    font-weight: 700;
}

.mr-pagseguro .avisos a {
    color: var(--mr-primary-strong) !important;
    font-weight: 500;
}

.mr-pagseguro .form-input label {
    display: block;
    margin-bottom: 4px;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
}

.mr-pagseguro .form-input .btn {
    width: auto !important;
    min-width: 220px;
}

/* ======= Páginas institucionais (funcionalidades, quem somos, fale conosco, regulamento) ======= */
.mr-hero.mr-hero--curto {
    padding: 52px 0 56px;
}

.mr-hero--curto .mr-container {
    position: relative;
    z-index: 1;
}

.mr-hero__trilha {
    margin: 0 0 10px;
    color: var(--mr-ball);
    font-size: 15px;
    font-weight: 500;
}

.mr-hero--curto .mr-hero__titulo {
    max-width: 16em;
    margin-bottom: 12px;
    font-size: 46px;
}

.mr-hero--curto .mr-hero__sub {
    margin-bottom: 0;
}

.mr-secao.mr-inst {
    padding: 48px 0 64px;
    background-color: transparent;
}

.mr-inst-cartoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

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

.mr-inst-cartoes--1 {
    grid-template-columns: minmax(0, 640px);
}

.mr-inst-cartao {
    padding: 22px 24px;
    border-top: 4px solid var(--mr-primary);
    border-radius: var(--mr-radius);
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-surface .mr-inst-cartao {
    background-color: var(--mr-bg);
    box-shadow: none;
}

.mr-inst-cartao h2 {
    margin: 0 0 8px;
    color: var(--mr-court);
    font-family: var(--mr-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.mr-inst-cartao p {
    margin: 0;
    color: var(--mr-text);
    font-size: 16px;
    line-height: 1.55;
}

.mr-inst__nota {
    margin: -12px 0 32px;
    color: var(--mr-text-muted);
}

.mr-inst__nota a,
.mr-prosa a {
    color: var(--mr-primary-strong);
    font-weight: 500;
    text-decoration: underline;
}

.mr-inst-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 24px;
    border-top: 1px solid var(--mr-border);
}

.mr-inst-nav__titulo {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 15px;
}

.mr-inst-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-inst-nav a {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background-color: var(--mr-surface);
    box-shadow: inset 0 0 0 1px var(--mr-border);
    color: var(--mr-text);
    font-weight: 500;
}

.mr-inst-nav a:hover,
.mr-inst-nav a:focus {
    background-color: var(--mr-secondary);
    box-shadow: none;
    color: #fff;
    text-decoration: none;
}

.mr-inst-chamada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 32px;
    padding: 24px 28px;
    border-radius: 20px;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-inst-chamada__titulo {
    margin: 0;
    font-family: var(--mr-font-display);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.mr-inst-chamada__sub {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .82);
}

.mr-inst-fatos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.mr-inst-fatos > div {
    padding: 20px 24px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-inst-fatos strong {
    display: block;
    color: var(--mr-primary-strong);
    font-family: var(--mr-font-display);
    font-size: 38px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mr-inst-fatos span {
    color: var(--mr-text-muted);
}

a.mr-inst-contato,
a.mr-inst-contato:hover,
a.mr-inst-contato:focus {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--mr-text);
    text-decoration: none;
}

a.mr-inst-contato:hover,
a.mr-inst-contato:focus {
    box-shadow: 0 0 0 2px var(--mr-primary), var(--mr-shadow);
}

.mr-inst-contato__icone {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--mr-secondary);
    color: #fff;
    font-size: 18px;
}

.mr-inst-contato__rotulo {
    display: block;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-inst-contato strong {
    font-size: 18px;
    overflow-wrap: anywhere;
}

/* Texto corrido publicado pelo organizador ou pela plataforma. */
.mr-prosa {
    max-width: 760px;
    color: var(--mr-text);
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.mr-inst .mr-prosa {
    padding: 28px 32px;
    border-radius: var(--mr-radius);
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-inst .mr-prosa.mr-prosa--regulamento {
    max-width: 900px;
}

.mr-prosa p {
    margin: 0 0 14px;
}

.mr-prosa > :last-child {
    margin-bottom: 0;
}

.mr-prosa img,
.mr-prosa table {
    max-width: 100%;
    height: auto;
}

.mr-prosa--regulamento {
    font-size: 15px;
}

@media (max-width: 767px) {
    .mr-hero.mr-hero--curto {
        padding: 36px 0 40px;
    }

    .mr-hero--curto .mr-hero__titulo {
        font-size: 34px;
    }

    .mr-inst-cartoes,
    .mr-inst-cartoes--3,
    .mr-inst-fatos {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-inst .mr-prosa {
        padding: 20px;
    }

    .mr-inst-chamada .mr-btn {
        width: 100%;
        text-align: center;
    }
}

/* ======= Página pública do ranking: captação de jogadores ======= */
.mr-hero.mr-hero--ranking {
    padding: 88px 0 0;
}

.mr-hero--ranking .mr-hero__trilha {
    display: inline-block;
    margin-bottom: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: rgba(1, 50, 28, .6);
    box-shadow: inset 0 0 0 1px rgba(217, 232, 79, .45);
}

.mr-hero--ranking .mr-hero__titulo {
    font-size: 56px;
    max-width: 20em;
    text-wrap: balance;
}

.mr-hero--ranking .mr-hero__sub {
    font-size: 21px;
}

.mr-btn.mr-btn--grande {
    padding: 14px 28px;
    font-size: 18px;
}

.mr-captar__entrar {
    margin: 18px 0 0;
    color: rgba(255, 255, 255, .82);
}

.mr-captar__entrar a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Placar do ranking encostado na base da abertura. */
.mr-captar__placar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.mr-captar__placar > div {
    display: flex;
    flex-direction: column;
    padding: 22px 48px 26px 0;
}

.mr-captar__placar > div + div {
    padding-left: 48px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.mr-captar__placar dd {
    margin: 0;
    color: var(--mr-ball);
    font-family: var(--mr-font-display);
    font-size: 44px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.mr-captar__placar dt {
    margin-top: 6px;
    color: rgba(255, 255, 255, .86);
    font-size: 15px;
    font-weight: 400;
}

.mr-hero--ranking .mr-container > :last-child:not(.mr-captar__placar) {
    margin-bottom: 88px;
}

.mr-secao.mr-captar {
    padding: 72px 0;
}

.mr-secao.mr-captar.mr-secao--fundo {
    background-color: transparent;
}

.mr-captar .mr-secao__titulo {
    margin-bottom: 12px;
    text-wrap: balance;
}

.mr-captar__lead {
    margin: 0 0 24px;
    max-width: 30em;
    color: var(--mr-text-muted);
    font-size: 18px;
    line-height: 1.5;
}

/* Passos: sequência real, por isso numerada. A linha liga um passo ao seguinte. */
.mr-captar__passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.mr-captar__passos li {
    position: relative;
    padding-top: 64px;
    counter-increment: passo;
}

.mr-captar__passos li::before {
    content: counter(passo);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--mr-court);
    color: var(--mr-ball);
    font-family: var(--mr-font-display);
    font-size: 22px;
    font-weight: 700;
}

.mr-captar__passos li::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 56px;
    right: -12px;
    border-top: 2px dashed var(--mr-primary-soft);
}

.mr-captar__passos li:last-child::after {
    display: none;
}

.mr-captar__passos h3,
.mr-captar__motivos h3 {
    margin: 0 0 6px;
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

.mr-captar__passos p {
    margin: 0;
    max-width: 22em;
    color: var(--mr-text-muted);
    font-size: 16px;
    line-height: 1.5;
}

/* Motivos: chamada fixa à esquerda, lista à direita. */
.mr-captar__duas {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.mr-captar__chamada {
    position: sticky;
    top: 104px;
}

.mr-captar__motivos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-captar__motivos li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--mr-border);
}

.mr-captar__motivos li:first-child {
    padding-top: 0;
    border-top: 0;
}

.mr-captar__motivos li:last-child {
    padding-bottom: 0;
}

.mr-captar__motivos li > div {
    min-width: 0;
}

/* Seletor mais forte que o .fas do Font Awesome, carregado depois. */
.mr-captar__motivos .mr-captar__icone {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: var(--mr-primary-tint);
    color: var(--mr-primary-strong);
    font-size: 21px;
}

.mr-captar__texto,
.mr-captar__texto p {
    margin: 0 0 8px;
    color: var(--mr-text-muted);
    font-size: 16px;
    line-height: 1.55;
}

.mr-captar__texto > :last-child {
    margin-bottom: 0;
}

/* Aplicativo: o telefone sai pela base do cartão. */
.mr-captar__app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    align-items: center;
    overflow: hidden;
    padding: 0 56px;
    border-radius: 24px;
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-captar__app-texto {
    padding: 48px 0;
}

.mr-captar__app-foto {
    align-self: end;
    height: 340px;
}

.mr-captar__app-foto img {
    display: block;
    width: 100%;
    margin-top: 32px;
}

.mr-captar__lojas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mr-captar__lojas img {
    display: block;
    height: 48px;
    width: auto;
}

.mr-captar__fecho {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 32px;
    overflow: hidden;
    margin-top: 24px;
    padding: 48px 56px;
    border-radius: 24px;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-captar__fecho::before,
.mr-captar__fecho::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.mr-captar__fecho::before {
    top: -30px;
    bottom: -30px;
    left: 62%;
    width: 50%;
    border: 3px solid rgba(255, 255, 255, .12);
    border-right: 0;
}

.mr-captar__fecho::after {
    top: 50%;
    left: 62%;
    width: 50%;
    border-top: 3px solid rgba(255, 255, 255, .12);
}

.mr-captar__fecho > * {
    position: relative;
    z-index: 1;
}

.mr-captar__fecho-titulo {
    margin: 0;
    max-width: 16em;
    font-family: var(--mr-font-display);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
}

.mr-captar__fecho-sub {
    margin: 8px 0 0;
    color: var(--mr-ball);
}

@media (max-width: 991px) {
    .mr-captar__passos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 24px;
    }

    .mr-captar__passos li:nth-child(2)::after {
        display: none;
    }

    .mr-captar__duas {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .mr-captar__chamada {
        position: static;
    }
}

@media (max-width: 767px) {
    .mr-hero.mr-hero--ranking {
        padding: 48px 0 0;
        background-position: 70% center;
    }

    .mr-hero--ranking .mr-hero__titulo {
        font-size: 38px;
    }

    .mr-hero--ranking .mr-hero__sub {
        font-size: 18px;
    }

    .mr-hero--ranking .mr-hero__acoes .mr-btn {
        width: 100%;
        text-align: center;
    }

    .mr-hero--ranking .mr-container > :last-child:not(.mr-captar__placar) {
        margin-bottom: 48px;
    }

    .mr-captar__placar {
        margin-top: 40px;
    }

    .mr-captar__placar > div {
        flex: 1 1 0;
        padding: 18px 16px 22px 0;
    }

    .mr-captar__placar > div + div {
        padding-left: 16px;
    }

    .mr-captar__placar dd {
        font-size: 34px;
    }

    .mr-secao.mr-captar {
        padding: 48px 0;
    }

    /* No celular os passos descem em coluna, com a linha na vertical. */
    .mr-captar__passos {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .mr-captar__passos li {
        padding: 0 0 28px 64px;
    }

    .mr-captar__passos li::after,
    .mr-captar__passos li:nth-child(2)::after {
        display: block;
        top: 50px;
        bottom: 6px;
        left: 21px;
        right: auto;
        border-top: 0;
        border-left: 2px dashed var(--mr-primary-soft);
    }

    .mr-captar__passos li:last-child {
        padding-bottom: 0;
    }

    .mr-captar__passos li:last-child::after {
        display: none;
    }

    .mr-captar__icone {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .mr-captar__motivos li {
        gap: 16px;
    }

    .mr-captar__app {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 24px;
    }

    .mr-captar__app-texto {
        padding: 32px 0 0;
    }

    .mr-captar__app-foto {
        width: 220px;
        height: 240px;
        margin: 0 auto;
    }

    .mr-captar__fecho {
        padding: 32px 24px;
    }

    .mr-captar__fecho::before,
    .mr-captar__fecho::after {
        display: none;
    }

    .mr-captar__fecho-titulo {
        font-size: 28px;
    }

    .mr-captar__fecho .mr-btn {
        width: 100%;
        text-align: center;
    }
}

/* ======= Painel de Controle do organizador (Torneio/PainelControle) ======= */
/* O que pede ação fica no topo; torneios em andamento na coluna larga,
   listas de consulta (circuitos, conta) na coluna estreita. */
.mr-pc {
    display: grid;
    gap: 24px;
    color: var(--mr-text);
    font-size: 15px;
    line-height: 1.45;
}

.mr-pc > *,
.mr-pc-form > * {
    min-width: 0;
}

.mr-pc [hidden] {
    display: none !important;
}

.mr-pc__topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.mr-pc__sobre {
    margin: 0 0 4px;
    color: var(--mr-text-muted);
}

.mr-pc__titulo {
    margin: 0;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-stretch: 112%;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.mr-pc__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mr-pc-btn,
.mr-pc-btn:hover,
.mr-pc-btn:focus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border: 0;
    border-radius: 999px;
    background-color: var(--mr-surface);
    box-shadow: inset 0 0 0 1px var(--mr-border);
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.mr-pc-btn:hover,
.mr-pc-btn:focus {
    box-shadow: inset 0 0 0 1px var(--mr-text-subtle);
}

.mr-pc-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.mr-pc-btn--principal,
.mr-pc-btn--principal:hover,
.mr-pc-btn--principal:focus {
    background-color: var(--mr-primary);
    box-shadow: none;
    color: #fff;
    font-weight: 700;
}

.mr-pc-btn--principal:hover,
.mr-pc-btn--principal:focus {
    background-color: var(--mr-primary-strong);
}

.mr-pc-btn--verde,
.mr-pc-btn--verde:hover,
.mr-pc-btn--verde:focus {
    background-color: var(--mr-court);
    box-shadow: none;
    color: #fff;
}

.mr-pc-btn--verde:hover,
.mr-pc-btn--verde:focus {
    background-color: var(--mr-secondary);
}

.mr-pc-btn--pequeno,
.mr-pc-btn--pequeno:hover,
.mr-pc-btn--pequeno:focus {
    min-height: 34px;
    padding: 5px 14px;
    font-size: 14px;
}

.mr-pc-pendencias {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 14px 18px;
    border-radius: 16px;
    background-color: #fdf3d7;
    color: #6b4700;
}

.mr-pc-pendencias__titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 700;
}

.mr-pc-pendencias__titulo svg {
    width: 20px;
    height: 20px;
    color: #b97a00;
}

.mr-pc-pendencias ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-pc-pendencias li a,
.mr-pc-pendencias li a:hover,
.mr-pc-pendencias li a:focus {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .7);
    color: #6b4700;
    font-weight: 500;
    text-decoration: none;
}

.mr-pc-pendencias li a:hover,
.mr-pc-pendencias li a:focus {
    background-color: #fff;
}

.mr-pc__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.mr-pc__coluna {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.mr-pc-bloco {
    padding: 22px 24px 24px;
    border-radius: 20px;
    background-color: var(--mr-surface);
    box-shadow: var(--mr-shadow);
}

.mr-pc-bloco__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.mr-pc-bloco h2 {
    margin: 0;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-stretch: 108%;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.mr-pc-bloco h2 small {
    margin-left: 6px;
    color: var(--mr-text-subtle);
    font-family: var(--mr-font);
    font-size: 14px;
    font-weight: 500;
}

.mr-pc-ligacao,
.mr-pc-ligacao:hover,
.mr-pc-ligacao:focus {
    color: var(--mr-primary-strong);
    font-weight: 500;
    text-decoration: none;
}

.mr-pc-ligacao:hover,
.mr-pc-ligacao:focus {
    text-decoration: underline;
}

.mr-pc-torneios {
    display: grid;
    gap: 14px;
}

.mr-pc-torneio {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    background-color: var(--mr-bg);
}

/* Data como numa súmula: dia grande, mês abreviado. */
.mr-pc-torneio__data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: start;
    padding: 10px 0 9px;
    border-radius: 14px;
    background-color: var(--mr-court);
    color: #fff;
    line-height: 1;
}

.mr-pc-torneio__data strong {
    font-family: var(--mr-font-display);
    font-stretch: 80%;
    font-size: 34px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mr-pc-torneio__data span {
    margin-top: 4px;
    color: var(--mr-ball);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mr-pc-torneio__corpo {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.mr-pc-torneio__linha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mr-pc-torneio h3 {
    margin: 0 0 2px;
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mr-pc-torneio__quando {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-pc-selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.mr-pc-selo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #1f8a4c;
}

.mr-pc-selo--alerta {
    background-color: #fdf3d7;
    color: #6b4700;
}

.mr-pc-selo--alerta::before {
    background-color: #b97a00;
}

.mr-pc-selo--neutro {
    background-color: #e9edeb;
    color: var(--mr-text-muted);
}

.mr-pc-selo--neutro::before {
    background-color: var(--mr-text-subtle);
}

.mr-pc-torneio__numeros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.mr-pc-torneio__numeros a,
.mr-pc-torneio__numeros a:hover,
.mr-pc-torneio__numeros a:focus {
    display: flex;
    flex-direction: column;
    color: var(--mr-text);
    text-decoration: none;
}

.mr-pc-torneio__numeros strong {
    font-family: var(--mr-font-display);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.mr-pc-torneio__numeros span {
    color: var(--mr-text-muted);
    font-size: 13px;
}

.mr-pc-torneio__numeros a:hover strong,
.mr-pc-torneio__numeros a:focus strong {
    color: var(--mr-primary-strong);
}

.mr-pc-torneio__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mr-pc-vazio {
    margin: 0;
    padding: 28px 16px;
    border-radius: 16px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    text-align: center;
}

.mr-pc-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-pc-lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--mr-border);
}

.mr-pc-lista li:first-child {
    padding-top: 0;
    border-top: 0;
}

.mr-pc-lista li:last-child {
    padding-bottom: 0;
}

.mr-pc-lista__nome {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.mr-pc-lista__nome small {
    display: block;
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.mr-pc-lista__acoes {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.mr-pc-icone,
.mr-pc-icone:hover,
.mr-pc-icone:focus {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--mr-text-muted);
}

.mr-pc-icone:hover,
.mr-pc-icone:focus {
    background-color: var(--mr-bg);
    color: var(--mr-text);
}

.mr-pc-icone svg {
    width: 18px;
    height: 18px;
}

.mr-pc-situacao {
    flex: none;
    font-size: 13px;
    font-weight: 700;
}

.mr-pc-situacao--ok {
    color: #1f8a4c;
}

.mr-pc-situacao--falta {
    color: #b97a00;
}

.mr-pc-logo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background-color: var(--mr-bg);
    object-fit: contain;
}

.mr-pc-nome {
    display: grid;
    flex: 1;
    gap: 8px;
    min-width: 0;
}

.mr-pc-nome label {
    margin: 0;
    font-weight: 500;
}

.mr-pc-nome__acoes {
    display: flex;
    gap: 8px;
}

@media (max-width: 1100px) {
    .mr-pc__grade {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .mr-pc__titulo {
        font-size: 26px;
    }

    .mr-pc__acoes,
    .mr-pc__acoes .mr-pc-btn {
        width: 100%;
    }

    .mr-pc-bloco {
        padding: 18px 16px 20px;
    }

    .mr-pc-torneio {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .mr-pc-torneio__data {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        align-self: stretch;
        padding: 8px 14px;
    }

    .mr-pc-torneio__data strong {
        font-size: 24px;
    }

    .mr-pc-torneio__data span {
        margin-top: 0;
    }

    .mr-pc-torneio__linha {
        flex-direction: column;
        gap: 8px;
    }

    .mr-pc-torneio__acoes .mr-pc-btn {
        flex: 1 1 auto;
    }

    .mr-pc-lista--larga li {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .mr-pc-lista--larga .mr-pc-lista__nome {
        flex: 1 1 calc(100% - 60px);
    }
}

/* ======= Telas ligadas ao Painel de Controle: circuitos e filiações ======= */
.mr-pc--estreito {
    max-width: 860px;
}

.mr-pc__voltar,
.mr-pc__voltar:hover,
.mr-pc__voltar:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--mr-text-muted);
    font-weight: 500;
    text-decoration: none;
}

.mr-pc__voltar::before {
    content: "";
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.mr-pc__voltar:hover,
.mr-pc__voltar:focus {
    color: var(--mr-text);
}

.mr-pc-form {
    display: grid;
    gap: 24px;
}

.mr-pc-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.mr-pc-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mr-pc-campo--largo {
    grid-column: 1 / -1;
}

.mr-pc-campos .mr-pc-campo--nome {
    grid-column: span 1;
}

.mr-pc-campo label,
.mr-pc-faixa legend,
.mr-pc-opcao label {
    margin: 0;
    color: var(--mr-text);
    font-size: 14px;
    font-weight: 500;
}

.mr-pc-campo .text-danger:empty {
    display: none;
}

.mr-pc-form__ajuda {
    margin: -8px 0 16px;
    max-width: 60ch;
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-pc-form__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mr-pc-form__acoes .mr-pc-btn--principal {
    min-width: 160px;
}

.mr-pc-nota {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.mr-pc-nota strong {
    color: var(--mr-text);
}

.mr-pc-nota--alerta {
    margin-bottom: 12px;
    background-color: #fdf3d7;
    color: #6b4700;
}

.mr-pc-nota--alerta a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Faixas de valor: uma linha por faixa, com valor e período lado a lado. */
.mr-pc-faixas {
    display: grid;
    gap: 12px;
}

.mr-pc-faixa {
    display: grid;
    grid-template-columns: 72px repeat(3, minmax(0, 1fr));
    gap: 6px 16px;
    align-items: end;
    min-width: 0;
    margin: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 14px;
    background-color: var(--mr-bg);
}

.mr-pc-faixa legend {
    float: left;
    width: auto;
    padding: 0 0 10px;
    font-weight: 700;
}

.mr-pc-faixa__erro {
    grid-column: 2 / -1;
}

.mr-pc-faixa__erro:empty,
.mr-pc-faixa__erro .field-validation-valid {
    display: none;
}

.mr-pc-opcao {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.mr-pc-opcao input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--mr-court);
}

.mr-pc-subbloco {
    margin-top: 4px;
    padding: 18px;
    border-radius: 14px;
    background-color: var(--mr-bg);
}

.mr-pc-subbloco h3 {
    margin: 0 0 12px;
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 15px;
    font-weight: 700;
}

.mr-pc-subbloco .mr-pc-campos + h3 {
    margin-top: 22px;
}

.mr-pc-subbloco .mr-pc-form__ajuda {
    margin-top: -6px;
}

/* Filtros acima de uma tabela. */
.mr-pc-filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 18px;
}

.mr-pc-filtros:empty {
    display: none;
}

.mr-pc-filtros .mr-pc-campo {
    flex: 0 1 220px;
}

.mr-pc-filtros .mr-pc-campo--nome {
    flex: 1 1 260px;
}

.mr-pc-filtros__total {
    margin: 0 0 9px auto;
    color: var(--mr-text-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.mr-pc-tabela-rolo {
    overflow-x: auto;
}

.mr-pc-tabela {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.mr-pc-tabela th {
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--mr-border);
    color: var(--mr-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.mr-pc-tabela td {
    padding: 12px;
    border-bottom: 1px solid var(--mr-border);
    vertical-align: middle;
}

.mr-pc-tabela th:first-child,
.mr-pc-tabela td:first-child {
    padding-left: 0;
}

.mr-pc-tabela th:last-child,
.mr-pc-tabela td:last-child {
    padding-right: 0;
}

.mr-pc-tabela tbody tr:last-child td {
    border-bottom: 0;
}

.mr-pc-tabela .mr-pc-tabela__num {
    text-align: right;
}

.mr-pc-tabela .mr-pc-tabela__centro {
    text-align: center;
}

.mr-pc-tabela .mr-pc-tabela__pos {
    width: 90px;
    font-weight: 700;
}

.mr-pc-tabela tbody .mr-pc-tabela__pos {
    font-family: var(--mr-font-display);
    font-size: 17px;
}

/* Abas de categoria como pílulas que quebram de linha. */
.mr-pc-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    list-style: none;
}

.mr-pc-abas .nav-link,
.mr-pc-abas .nav-link:hover,
.mr-pc-abas .nav-link:focus {
    padding: 7px 16px;
    border: 0;
    border-radius: 999px;
    background-color: var(--mr-bg);
    color: var(--mr-text-muted);
    font-size: 14px;
    font-weight: 500;
}

.mr-pc-abas .nav-link:hover {
    color: var(--mr-text);
}

.mr-pc-abas .nav-link.active,
.mr-pc-abas .nav-link.active:hover,
.mr-pc-abas .nav-link.active:focus {
    background-color: var(--mr-court);
    color: #fff;
}

/* Filiados */
.mr-pc-filiado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 220px;
}

.mr-pc-filiado__dados {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mr-pc-filiado__dados small {
    color: var(--mr-text-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.mr-pc-filiado__dados small:empty {
    display: none;
}

.mr-pc-filiado__valor {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.mr-pc-filiado__valor .form-control {
    width: 96px;
    text-align: right;
}

/* O script da tela alterna estas duas classes para trocar o valor pelo campo de edição. */
.mr-pc-filiados .hidden-input,
.mr-pc-filiados .mr-pc-btn.hidden-input {
    display: none;
}

.mr-pc-filiados .hidden-input.input-active,
.mr-pc-filiados .mr-pc-btn.hidden-input.input-active {
    display: inline-flex;
}

@media (max-width: 640px) {
    .mr-pc-campos {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .mr-pc-faixa legend {
        grid-column: 1 / -1;
        padding-bottom: 4px;
    }

    .mr-pc-faixa > .mr-pc-campo:first-of-type,
    .mr-pc-faixa__erro {
        grid-column: 1 / -1;
    }

    .mr-pc-form__acoes .mr-pc-btn {
        flex: 1 1 auto;
    }

    .mr-pc-filtros .mr-pc-campo,
    .mr-pc-filtros .mr-pc-campo--nome,
    .mr-pc-filtros > .mr-pc-btn {
        flex: 1 1 100%;
    }

    .mr-pc-filtros__total {
        margin-left: 0;
    }

    .mr-pc-subbloco {
        padding: 14px;
    }
}

/* ======= Página inicial (Home/Index): os dois lados da quadra ======= */
/* O painel de quem organiza e o aplicativo de quem joga ficam lado a lado da abertura
   ao fecho. A linha tracejada entre eles é a rede. */
.mr-hero.mr-lados-hero {
    padding: 72px 0 168px;
}

.mr-lados-hero__foto,
.mr-lados-hero__veu {
    position: absolute;
    inset: 0;
}

.mr-lados-hero__foto {
    background: url('/images/meuranking/modalidades/tenis/bg-header-1.jpg') center 30% / cover no-repeat;
}

.mr-lados-hero__veu {
    background-image: linear-gradient(90deg, rgba(1, 50, 28, .95) 0%, rgba(1, 50, 28, .82) 44%, rgba(1, 50, 28, .35) 76%, rgba(1, 50, 28, .15) 100%);
}

.mr-lados-hero .mr-container {
    position: relative;
    z-index: 1;
}

.mr-lados-hero .mr-hero__titulo {
    max-width: 13.5em;
    text-wrap: balance;
}

.mr-lados-hero .mr-hero__sub {
    margin-bottom: 28px;
    font-size: 20px;
}

.mr-lados-hero .alert {
    max-width: 640px;
}

/* Os dois cartões sobem sobre a base da foto. */
.mr-lados-par {
    position: relative;
    z-index: 2;
    margin-top: -112px;
}

.mr-lados-par__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.mr-lado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
    align-items: start;
    padding: 28px;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--mr-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 18px 40px -18px rgba(16, 24, 20, .28);
    scroll-margin-top: 96px;
}

.mr-lado h2 {
    margin: 0 0 6px;
    color: var(--mr-court);
    font-family: var(--mr-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}

.mr-lado--joga h2 {
    color: var(--mr-primary-strong);
}

.mr-lado__resumo {
    margin: 0 0 16px;
    color: var(--mr-text);
    font-size: 17px;
    line-height: 1.4;
}

.mr-lado ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.mr-lado ul li {
    position: relative;
    padding-left: 18px;
}

.mr-lado ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--mr-primary);
}

.mr-lado__tela {
    padding: 14px 16px 6px;
    border-radius: 14px;
    background-color: var(--mr-bg);
}

.mr-lado__tela-titulo {
    margin: 0;
    font-family: var(--mr-font-display);
    font-size: 16px;
    font-weight: 700;
}

.mr-lado__tela-sub {
    margin: 0 0 6px;
    color: var(--mr-text-muted);
    font-size: 13px;
}

.mr-lado__tela ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mr-lado__tela li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--mr-border);
    font-size: 14px;
}

.mr-lado__tela b {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background-color: var(--mr-court-tint);
    color: var(--mr-court);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.mr-lado__tela li:first-child b {
    background-color: var(--mr-ball);
}

.mr-lado__tela span {
    flex: 1;
    min-width: 0;
}

.mr-lado__tela i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.mr-lado__lojas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.mr-lado__lojas img {
    display: block;
    height: 42px;
    width: auto;
}

/* Duas telas reais do aplicativo, saindo pela base do cartão. */
.mr-lado__app {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    margin: 0 0 -28px;
}

.mr-lado__app img {
    display: block;
    width: calc(50% - 5px);
    height: auto;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 8px 20px -8px rgba(16, 24, 20, .35);
}

.mr-lado__app img:last-child {
    margin-top: 22px;
}

/* A rodada contada em pares: painel à esquerda, aplicativo à direita, a rede no meio. */
.mr-lados-rodada {
    padding: 88px 0 72px;
}

.mr-lados-rodada .mr-secao__titulo,
.mr-lados-video .mr-secao__titulo,
.mr-lados-prova .mr-secao__titulo {
    margin-bottom: 10px;
    text-wrap: balance;
}

.mr-lados__lead {
    margin: 0 0 36px;
    max-width: 34em;
    color: var(--mr-text-muted);
    font-size: 18px;
    line-height: 1.5;
}

.mr-rede {
    position: relative;
}

.mr-rede::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed var(--mr-primary-soft);
}

.mr-rede__cabeca,
.mr-rede__par {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 96px;
}

.mr-rede__cabeca {
    margin-bottom: 8px;
    font-family: var(--mr-font-display);
    font-size: 17px;
    font-weight: 700;
}

.mr-rede__cabeca span:first-child {
    color: var(--mr-court);
    text-align: right;
}

.mr-rede__cabeca span:last-child {
    color: var(--mr-primary-strong);
}

.mr-rede__par {
    position: relative;
    padding: 22px 0;
}

/* A bola marca cada troca sobre a rede. */
.mr-rede__par::before {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(50% - 7px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--mr-ball);
    box-shadow: 0 0 0 5px var(--mr-bg);
}

.mr-rede__par > div:first-child {
    text-align: right;
}

.mr-rede__par h3 {
    margin: 0 0 4px;
    color: var(--mr-text);
    font-family: var(--mr-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.mr-rede__par p {
    margin: 0;
    color: var(--mr-text-muted);
    font-size: 16px;
    line-height: 1.5;
}

.mr-rede__par > div:first-child p {
    margin-left: auto;
}

.mr-rede__par p {
    max-width: 26em;
}

/* Entrada: cada lado chega do seu campo. Só vale com script; sem ele, tudo fica visível. */
.mr-lados-rodada--anima .mr-rede__par > div {
    opacity: 0;
    transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.mr-lados-rodada--anima .mr-rede__par > div:first-child {
    transform: translateX(-36px);
}

.mr-lados-rodada--anima .mr-rede__par > div:last-child {
    transform: translateX(36px);
    transition-delay: 160ms;
}

.mr-lados-rodada--anima .mr-rede__par::before {
    transform: scale(0);
    transition: transform 420ms cubic-bezier(.16, 1, .3, 1) 80ms;
}

.mr-lados-rodada--anima .mr-rede__par.is-in > div {
    opacity: 1;
    transform: none;
}

.mr-lados-rodada--anima .mr-rede__par.is-in::before {
    transform: none;
}

/* Vídeo */
.mr-lados-video {
    padding: 72px 0;
    background-color: var(--mr-surface);
}

.mr-lados-video__grade {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}

.mr-lados-video .mr-video__quadro {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--mr-shadow);
}

/* Prova: quem organiza de um lado, quem joga do outro. */
.mr-lados-prova {
    padding: 80px 0 72px;
}

.mr-lados-prova__frase {
    margin: 0 0 56px;
    max-width: 24em;
    color: var(--mr-text);
    font-family: var(--mr-font-display);
    font-size: 34px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-wrap: balance;
}

.mr-lados-prova__frase strong {
    color: var(--mr-court);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mr-lados-prova__grade {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
}

.mr-lados-clientes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.mr-lados-clientes li {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--mr-text-muted);
    font-size: 14px;
    text-align: center;
}

.mr-lados-clientes img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.mr-lados-falas {
    display: grid;
    gap: 0;
    margin-top: 16px;
}

.mr-lados-falas figure {
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid var(--mr-border);
}

.mr-lados-falas figure:first-child {
    border-top: 0;
    padding-top: 8px;
}

.mr-lados-falas blockquote {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: var(--mr-text);
    font-size: 17px;
    line-height: 1.5;
}

.mr-lados-falas figcaption {
    color: var(--mr-text-muted);
    font-size: 14px;
}

.mr-lados-falas figcaption strong {
    color: var(--mr-text);
}

/* Fecho: o formulário de quem organiza e o aplicativo de quem joga, com a rede entre eles. */
.mr-lados-fecho-secao {
    padding: 0 0 80px;
}

.mr-lados-fecho {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    overflow: hidden;
    border-radius: 28px;
    background-color: var(--mr-court);
    color: #fff;
}

.mr-lados-fecho__lado {
    position: relative;
    padding: 48px 56px;
}

.mr-lados-fecho__lado--joga {
    padding-right: 220px;
    border-left: 2px dashed rgba(255, 255, 255, .28);
}

.mr-lados-fecho h2 {
    margin: 0 0 8px;
    color: #fff;
    font-family: var(--mr-font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-wrap: balance;
}

.mr-lados-fecho p {
    margin: 0 0 24px;
    max-width: 30em;
    color: rgba(255, 255, 255, .86);
    font-size: 17px;
    line-height: 1.5;
}

.mr-lados-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    scroll-margin-top: 140px;
}

.mr-lados-form label {
    display: block;
    margin: 0 0 6px;
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    font-weight: 500;
}

.mr-lados-form .form-control {
    height: 48px;
    border: 0;
    background-color: #fff;
}

.mr-lados-form .mr-btn {
    grid-column: 1 / -1;
    justify-self: start;
}

.mr-lados-fecho__app {
    position: absolute;
    right: 40px;
    bottom: -56px;
    width: 160px;
    height: auto;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45);
}

.mr-lados-fecho .mr-lado__lojas {
    margin-top: 0;
}

/* Seleção de texto e foco seguem a paleta nesta página. */
.mr-lados-par ::selection,
.mr-lados-rodada ::selection,
.mr-lados-prova ::selection {
    background-color: var(--mr-ball);
    color: var(--mr-text);
}

@media (max-width: 1100px) {
    .mr-lado {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-lado__app {
        max-width: 260px;
    }

    .mr-lados-fecho {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-lados-fecho__lado--joga {
        border-left: 0;
        border-top: 2px dashed rgba(255, 255, 255, .28);
    }
}

@media (max-width: 767px) {
    .mr-hero.mr-lados-hero {
        padding: 44px 0 120px;
    }

    .mr-lados-hero__foto {
        background-position: 62% center;
    }

    .mr-lados-hero__veu {
        background-image: linear-gradient(180deg, rgba(1, 50, 28, .93) 0%, rgba(1, 50, 28, .84) 60%, rgba(1, 50, 28, .6) 100%);
    }

    .mr-lados-hero .mr-hero__titulo {
        font-size: 36px;
    }

    .mr-lados-hero .mr-hero__sub {
        font-size: 18px;
    }

    .mr-lados-hero .mr-hero__acoes .mr-btn {
        width: 100%;
        text-align: center;
    }

    .mr-lados-par {
        margin-top: -88px;
    }

    .mr-lados-par__grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .mr-lado {
        padding: 22px 20px;
    }

    .mr-lado__app {
        margin-bottom: -22px;
    }

    .mr-lados-rodada {
        padding: 56px 0 48px;
    }

    /* No celular a rede vai para a esquerda e os dois lados se empilham em cada troca. */
    .mr-rede::before {
        left: 7px;
    }

    .mr-rede__cabeca {
        display: none;
    }

    .mr-rede__par {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px 0 16px 34px;
    }

    .mr-rede__par::before {
        top: 22px;
        left: 0;
    }

    .mr-rede__par > div:first-child {
        text-align: left;
    }

    .mr-rede__par > div:first-child p {
        margin-left: 0;
    }

    .mr-rede__par h3 {
        font-size: 19px;
    }

    .mr-rede__par > div:last-child h3 {
        color: var(--mr-primary-strong);
    }

    .mr-lados-rodada--anima .mr-rede__par > div:first-child,
    .mr-lados-rodada--anima .mr-rede__par > div:last-child {
        transform: translateY(16px);
    }

    .mr-lados-video {
        padding: 48px 0;
    }

    .mr-lados-video__grade,
    .mr-lados-prova__grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .mr-lados-prova {
        padding: 56px 0 48px;
    }

    .mr-lados-prova__frase {
        margin-bottom: 40px;
        font-size: 26px;
    }

    .mr-lados-fecho-secao {
        padding-bottom: 48px;
    }

    .mr-lados-fecho {
        border-radius: 22px;
    }

    .mr-lados-fecho__lado {
        padding: 32px 22px;
    }

    .mr-lados-fecho__lado--joga {
        padding-right: 150px;
    }

    .mr-lados-fecho h2 {
        font-size: 26px;
    }

    .mr-lados-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-lados-form .mr-btn {
        justify-self: stretch;
        text-align: center;
    }

    .mr-lados-fecho__app {
        right: 18px;
        width: 116px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mr-lados-rodada--anima .mr-rede__par > div,
    .mr-lados-rodada--anima .mr-rede__par::before {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* As telas do aplicativo encostam na base do cartão; textos da rede quebram equilibrados. */
.mr-lado__app {
    align-self: end;
}

.mr-rede__par p,
.mr-rede__par h3 {
    text-wrap: balance;
}

/* ---- Home/Index: correções da revisão de acabamento ---- */
/* Títulos da página com a voz de título do site (Archivo largo). */
.mr-lado h2,
.mr-lados-fecho h2,
.mr-lados-prova__frase,
.mr-rede__par h3,
.mr-rede__cabeca {
    font-family: var(--mr-font-display);
    font-stretch: 112%;
}

.mr-rede__par h3 {
    font-size: 20px;
    letter-spacing: -.015em;
}

/* O laranja fica só na ação: os dois lados se distinguem pela posição e pelo rótulo. */
.mr-lado--joga h2 {
    color: var(--mr-court);
}

.mr-rede__cabeca span:first-child,
.mr-rede__cabeca span:last-child {
    color: var(--mr-text);
}

/* A abertura encolhe para os dois cartões caberem na primeira tela. */
.mr-hero.mr-lados-hero {
    padding: 52px 0 150px;
}

.mr-lado {
    grid-template-columns: minmax(0, 1fr) 248px;
    padding: 26px 28px;
}

/* Telas reais dos aplicativos: ocupam a altura do cartão e saem pela base. */
.mr-lado__app {
    align-self: stretch;
    align-items: stretch;
    margin: -6px 0 -26px;
}

.mr-lado__app img {
    width: calc(50% - 5px);
    height: calc(100% + 6px);
    min-height: 268px;
    object-fit: cover;
    object-position: top center;
    border-radius: 12px 12px 0 0;
}

.mr-lado__app img:last-child {
    margin-top: 26px;
    height: calc(100% - 20px);
}

/* A rede aparece também entre os dois cartões da abertura e entre as duas provas. */
.mr-lados-par__grade,
.mr-lados-prova__grade {
    position: relative;
}

.mr-lados-prova__grade::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 0;
    left: calc(41.667% - 4px);
    border-left: 2px dashed var(--mr-primary-soft);
}

.mr-lados-prova__grade > div:last-child {
    padding-left: 8px;
}

/* A bola sobre a rede ganha contorno para se destacar do fundo claro. */
.mr-rede__par::before {
    border: 2px solid var(--mr-court);
}

/* A rodada entra de uma vez, com as trocas em sequência curta. */
.mr-lados-rodada--anima .mr-rede__par > div:first-child {
    transform: translateX(-20px);
}

.mr-lados-rodada--anima .mr-rede__par > div:last-child {
    transform: translateX(20px);
}

.mr-lados-rodada--anima .mr-rede.is-in .mr-rede__par > div {
    opacity: 1;
    transform: none;
}

.mr-lados-rodada--anima .mr-rede.is-in .mr-rede__par::before {
    transform: none;
}

.mr-lados-rodada--anima .mr-rede__par:nth-child(3) > div,
.mr-lados-rodada--anima .mr-rede__par:nth-child(3)::before { transition-delay: 120ms; }
.mr-lados-rodada--anima .mr-rede__par:nth-child(4) > div,
.mr-lados-rodada--anima .mr-rede__par:nth-child(4)::before { transition-delay: 240ms; }
.mr-lados-rodada--anima .mr-rede__par:nth-child(5) > div,
.mr-lados-rodada--anima .mr-rede__par:nth-child(5)::before { transition-delay: 360ms; }

/* Logos dos clientes sobre a mesma placa branca. */
.mr-lados-clientes img {
    width: 88px;
    height: 88px;
    padding: 10px;
    border-radius: 16px;
    background-color: var(--mr-surface);
}

.mr-lados-clientes li span {
    min-height: 2.8em;
}

/* Campo do formulário: texto de exemplo legível e foco visível na paleta. */
.mr-lados-form .form-control::placeholder {
    color: #5b6661;
    opacity: 1;
}

.mr-lados-form .form-control:focus-visible,
.mr-lados-fecho .mr-btn:focus-visible,
.mr-lados-fecho a:focus-visible {
    outline: 3px solid var(--mr-ball);
    outline-offset: 3px;
}

.mr-lados-hero .mr-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.mr-lados-par a:focus-visible,
.mr-lados-video .mr-btn:focus-visible {
    outline: 3px solid var(--mr-court);
    outline-offset: 3px;
}

@media (max-width: 1100px) {
    .mr-lado {
        grid-template-columns: minmax(0, 1fr);
    }

    .mr-lado__app {
        max-width: 280px;
        height: 240px;
        margin-top: 4px;
    }

    .mr-lado__app img {
        min-height: 0;
    }

    .mr-lados-prova__grade::before {
        display: none;
    }

    .mr-lados-prova__grade > div:last-child {
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    .mr-hero.mr-lados-hero {
        padding: 40px 0 116px;
    }

    /* No celular o véu abre para a foto aparecer abaixo do texto. */
    .mr-lados-hero__foto {
        background-position: 68% 30%;
    }

    .mr-lados-hero__veu {
        background-image: linear-gradient(180deg, rgba(1, 50, 28, .9) 0%, rgba(1, 50, 28, .78) 46%, rgba(1, 50, 28, .34) 100%);
    }

    /* Os cartões usam o mesmo recuo lateral da foto. */
    .mr-lados-par .mr-container {
        padding: 0 10px;
    }

    .mr-rede__par > div:last-child h3 {
        color: var(--mr-text);
    }

    .mr-lados-rodada--anima .mr-rede__par > div:first-child,
    .mr-lados-rodada--anima .mr-rede__par > div:last-child {
        transform: translateY(14px);
    }

    .mr-lados-clientes img {
        width: 76px;
        height: 76px;
    }
}

/* Telas em tamanho legível: duas capturas sobrepostas, cortadas só pela base do cartão. */
@media (min-width: 1101px) {
    .mr-lado {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .mr-lado__app {
        position: relative;
        display: block;
        margin: -6px 0 -26px;
    }

    .mr-lado__app img,
    .mr-lado__app img:last-child {
        position: absolute;
        top: 0;
        left: 0;
        width: 76%;
        height: auto;
        min-height: 0;
        margin: 0;
        object-fit: fill;
    }

    .mr-lado__app img:last-child {
        top: 108px;
        left: auto;
        right: 0;
    }
}

/* Segunda rodada de correções: o par cabe na primeira tela e as capturas não são cortadas nos lados. */
.mr-hero.mr-lados-hero {
    padding: 40px 0 146px;
}

.mr-lados-hero .mr-hero__titulo {
    font-size: 50px;
}

.mr-lados-hero .mr-hero__sub {
    margin-bottom: 22px;
}

.mr-lado {
    padding: 22px 26px;
}

.mr-lado h2 {
    font-size: 23px;
    white-space: nowrap;
}

.mr-lado__resumo {
    margin-bottom: 12px;
    font-size: 16px;
}

.mr-lado ul {
    gap: 6px;
    font-size: 15px;
}

.mr-lado__lojas {
    margin-top: 14px;
}

.mr-lado__lojas img {
    height: 38px;
}

/* Em cada troca o lado do organizador entra primeiro e o do jogador responde logo depois. */
.mr-lados-rodada--anima .mr-rede__par:nth-child(2) > div:last-child { transition-delay: 120ms; }
.mr-lados-rodada--anima .mr-rede__par:nth-child(3) > div:last-child { transition-delay: 240ms; }
.mr-lados-rodada--anima .mr-rede__par:nth-child(4) > div:last-child { transition-delay: 360ms; }
.mr-lados-rodada--anima .mr-rede__par:nth-child(5) > div:last-child { transition-delay: 480ms; }

@media (min-width: 1101px) {
    .mr-lado {
        grid-template-columns: minmax(0, 1fr) 236px;
    }

    .mr-lado__app {
        margin: -4px 0 -22px;
    }

    .mr-lado__app img:last-child {
        top: 96px;
    }
}

@media (max-width: 1100px) {
    .mr-lado__app {
        height: 250px;
        overflow: hidden;
        align-items: flex-start;
    }

    .mr-lado__app img,
    .mr-lado__app img:last-child {
        height: auto;
        object-fit: fill;
    }
}

@media (max-width: 767px) {
    .mr-hero.mr-lados-hero {
        padding: 36px 0 112px;
    }

    .mr-lados-hero .mr-hero__titulo {
        font-size: 34px;
    }

    .mr-lado h2 {
        font-size: 24px;
    }

    .mr-lado ul {
        font-size: 16px;
    }
}