:root {
  --mtl-container-width-unit: min(25px, 1vw);
  --mtlm-button-container-padding-bottom: 1.28rem;
  --mtlm-r-buttons-gap: 1.36rem;
  --mtlm-tc-gap: 0.89rem;
}

body div#content {
  background-color: transparent;
}
body div#portal-column-content {
  padding-left: 0;
  width: 100%;
}
body div#viewlet-above-content {
  padding: 0;
}

div#g-recaptcha {
  height: 100px;
  display: block;
  width: 40%;
  float: left;
}
div#actionsView {
  display: block;
  float: right;
  padding: 20px 0 20px 20px;
}
body div#ccflexible-wrapper {
  background-image: none;
}
div#portal-breadcrumbs, div#portal-searchbox {
  display: none;
}
div#pending_header {
  background-color: transparent;
  color: #666;
}

#login-carousel-wrapper {
  background-color: rgba(0,0,0, 0.66);
  background-repeat: no-repeat;
  background-image: url("https://s3.amazonaws.com/mt-webpages/mt37/mtp/login-dev/MohawkToday_LoginPage_Background_Image-web.jpg");
	background-size: 100%;
  min-height: 80vh;
  min-height: min(80vh, 850px);
  padding-bottom: 4.39rem;
}

#registration_choice {
  height: 100%;
}

#login-form-wrapper {
  margin-top: 2rem;
  width: 100%;
  height: 100%;
  padding-inline: calc(6 * var(--mtl-container-width-unit));
}

.mtl-checkbox-label {
	margin-bottom: 0;
  cursor: pointer;
}
.mtl-checkbox-label-text {
	font-size: 0.78rem;
	vertical-align: top;
}

.mtl-checkmark {
  position: absolute;
  left: 50%;
  top: 50%;
	height: 72%;
	transform: translate(-50%, -50%)
}

.mtl-checkbox-indicator {
  display: inline-block;
  height: 0.94rem;
  width: 0.94rem;
  background: #fff;
  /* border: 1px solid var(--mt-color-primary-red); */
  border: 0.5px solid transparent;
	border-radius: 4px;
  transform: translateY(1.5px);
  position: relative;
  cursor: pointer;
	margin-right: 0.39rem;
	transition: background-color 0.3s ease-out;
}

.red-emph {
	color: var(--mt-color-primary-red);
	font-weight: 600;

}
.red-emph a {
  color: #fff;
}
.mtl-checkbox-input:checked + .mtl-checkbox-indicator {
	background-color: var(--mt-color-primary-red);
}

.mtl-checkbox .mtl-checkbox-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mtl-form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mtl-footer-text {
  color: white;
  text-align: center;
  padding-inline: 1rem;
  padding-top: calc(6 * var(--mtl-container-width-unit));
  font-size: 1.39rem;
  line-height: 1.36;
  font-weight: bold;
}
.mtl-footer-text a {
  text-decoration: underline;
  color: var(--mt-color-primary-red);
}

.mtl-main {
  width: calc(75.6 * var(--mtl-container-width-unit));
  margin-inline: auto;
  background-color:rgba(0,0,0, 0.51);
  border-radius: 0 0 0.66rem 0.66rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 2.8rem;
}

.mtlm-button, a.mtlm-button, #content .mtlm-button, #content a.mtlm-button {
  min-width: 16.11rem;
  font-size: 1.22rem;
  font-weight: 500;
  height: 2.5rem;
  padding-block: 0;
  padding-inline: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mtlm-button-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: var(--mtlm-button-container-padding-bottom);
}

.mtlm-bc-prompt {
  padding-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.36;
  padding-bottom: 1rem;
  color: white;
}

.mtlm-description {
  color: white;
  margin-top: 2.42rem;
  font-size: 1rem;
  line-height: 1.33;
  padding-bottom: 1.33rem;
  max-width: 21.5rem;
  text-align: center;
}

.mtlm-form-group {
  padding-bottom: 0.55rem;
  margin-bottom: 0;
}
.mtlm-fg-label {
  color: white;
  font-size: 1.11rem;
  font-weight: 500;
  padding-bottom: 0.33rem;
}
.mtlm-fg-input, input.mtlm-fg-input, #content input.mtlm-fg-input {
  font-size: 0.88rem;
  font-weight: 400;
  margin-bottom: 0.88rem;
  color: #b1b1b1;
  border-radius: 0.66rem;
  height: 2.55rem;
  padding-inline: 1rem;
}

.mtlm-fgo-label {
  color: #b1b1b1;
  font-size: 0.78rem;
}

.mtlm-fgo-forgot-link {
  float: right;
  line-height: 1;
}
.mtlm-fgo-forgot-link a:hover {
  font-weight: 400;
  cursor: pointer;
}

.mtlm-left, .mtlm-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 1rem;
}

.mtlm-left {
  border-right: 1px solid #707070;
}

.mtlm-logo {
  max-width: 13.44rem;
  margin-top: 2rem;
}

.mtlm-register {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mtlm-r-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mtlm-r-buttons-gap);
  padding-inline: 10%;
}

.mtlm-r-button-container {
  margin-top: 1.86rem;
  position: relative;
  padding-bottom: 2.69rem;
  width: calc(49.9% - var(--mtlm-r-buttons-gap) / 2)
}
.mtlm-r-button-container.mtlm-r-button-container-last-row {
  padding-bottom: var(--mtlm-button-container-padding-bottom);
}
.mtlm-rbc-button, a.mtlm-rbc-button, #content a.mtlm-rbc-button {
  font-size: 0.83rem;
  min-width: 0;
}

.mtlm-rbc-description {
  position: absolute;
  width: 100%;
  text-align: center;
  color: #b1b1b1;
  font-size: 0.67rem;
  line-height: 1.33;
  top: 3.2rem;
  left: 0;
}
.mtlm-r-header {
  color: white;
  font-size: 1.11rem;
  font-weight: 500;
  line-height: 1.35;
}

.mtl-show-mobile, .mtl-show-mobile-flex {
  display: none;
}

.mtl-show-reg,
.mtl-show-reg-flex {
  display: none;
}
.show_reg .mtl-show-reg {
  display: block;
}
.show_reg .mtl-show-reg-flex {
  display: flex;
}

.show_reg .mtl-show-signup,
.show_reg .mtl-show-signup-flex {
  display: none;
}
.mtl-show-signup {
  display: block;
}
.mtl-show-signup-flex {
  display: flex;
}

.mtlm-divider {
  border-top: 1px solid #707070;
  width: 16.6rem;
}

.mtlm-signup-switch-mobile {
  width: 100%;
}

.mtlm-signup-switch-mobile .mtlm-button-container {
  padding-top: 0;
  padding-bottom: 0;
}
.mtlm-signup-switch-mobile .mtlm-bc-prompt {
  font-size: 0.78rem;
  line-height: 1.36;
  font-weight: normal;
  padding-top: 2.1rem;
  padding-bottom: 1.55rem;
}

.mtlm-tiles-container {
  height: calc(11.15 * var(--mtl-container-width-unit));
  width: 90.2%;
  display: flex;
  gap: var(--mtlm-tc-gap);
}

.mtlm-tc-tile {
  width: 25%;
  border-radius: 0.889rem;
  /* border-radius: 1.15rem; */
  overflow: hidden;
  position: relative;
  height: fit-content;
}

a.mtlm-tc-tile:hover {
  font-weight: normal;
}

.mtlm-tct-header {
  position: absolute;
  background-color: var(--mt-color-primary-red);
  color: white;
  font-size: 1.22rem;
  line-height: 1.36;
  padding-top: 0.72rem;
  padding-bottom: 0.33rem;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.mtlm-tiles-description {
  max-width: 41.2rem;
  margin-inline: auto;
  padding-top: 2.9rem;
  padding-bottom: 2.4rem;
  color: white;
  text-align: center;
}



@media (max-width: 2000px) {
  .mtlm-r-buttons {
    padding-inline: 6%;
  }
}
@media (max-width: 1780px) {
  .mtlm-r-buttons {
    padding-inline: 4%;
  }
}
@media (max-width: 1690px) {
  .mtlm-r-buttons {
    padding-inline: 2%;
  }
}

@media (max-width: 1620px) {
  .mtlm-r-buttons {
    padding-inline: 4%;
  }
  .mtl-footer-text {
    padding-top: calc(9 * var(--mtl-container-width-unit));
  }

  .mtl-main {
    width: calc(87.8 * var(--mtl-container-width-unit));
  }
}

@media (max-width: 1380px) {
  .mtlm-tct-header {
    font-size: 1rem;
    line-height: 1.33;
    padding-top: 0.72rem;
    padding-bottom: 0.66rem;
    font-weight: bold;
  }
  a.mtlm-tc-tile:hover {
    font-weight: bold;
  }
}

@media (max-width: 1200px) {
  #login-carousel-wrapper {
    background-image: url("https://s3.amazonaws.com/mt-webpages/mt37/mtp/login-dev/MohawkToday_LoginPage_Background_Image-mobile.jpg");
    background-position-y: calc(-1 * (33.3 * 1vw));
    background-color: transparent;
    padding-bottom: 0;
    padding-inline: 0;
  }

  #login-form-wrapper {
    margin-top: 0;
    padding-inline: 19.1%;
  }

  .mtl-footer-text {
    font-size: 0.78rem;
    line-height: 1.36;
    padding-bottom: 3.22rem;
    padding-top: 1.11rem;
    width: 100%;
  }

  .mtl-main {
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0, 0.66);
    border-radius: 0;
    padding-bottom: 3.72rem;
    padding-top: 2.42rem;
  }

  .mtlm-button, a.mtlm-button, #content .mtlm-button, #content a.mtlm-button {
    min-width: 11.72rem;
    font-size: 0.83rem;
    font-weight: 400;
    height: 2.38rem;
  }

  .mtlm-button-container {
    padding-top: 2rem;
    padding-bottom: 2.3rem;
  }

  .mtlm-description {
    font-size: 0.78rem;
    line-height: 1.36;
    margin-top: 1.6rem;
    max-width: 16.4rem;
    padding-bottom: 3.4rem;
  }

  .mtlm-form-group {
    padding-bottom: 0;
  }
  .mtlm-fg-label {
    font-size: 0.78rem;
    line-height: 1.36;
    padding-bottom: 0.38rem;
  }
  .mtlm-fg-input, input.mtlm-fg-input, #content input.mtlm-fg-input {
    font-size: 0.78rem;
    margin-bottom: 1.11rem;
    padding-inline: 1rem;
  }

  .mtlm-fg-options {
    padding-top: 1rem;
  }

  .mtlm-left, .mtlm-right {
    width: 100%;
    padding-inline: 0;
  }

  .mtlm-left {
    border-right: none;
  }

  .mtlm-logo {
    max-width: 11.19rem;
    margin-top: 0;
  }

  .mtlm-register {
    padding-top: 1.61rem;
  }

  .mtlm-r-buttons {
    padding-top: 2.61rem;
    padding-inline: 20.1%;
    justify-content: center;
  }

  .formControls button.btn {
      padding: 0.4rem 4rem;
      margin: 0px auto;
      display: block;
      font-weight: 400;
      font-size: 0.9rem;
  }

  .mtlm-r-button-container {
    margin-top: 0;
    padding-bottom: 0.33rem;
  }
  .mtlm-r-button-container.mtlm-r-button-container-last-row {
    padding-bottom: 0.33rem;
  }
  .mtlm-rbc-button, a.mtlm-rbc-button, #content a.mtlm-rbc-button {
    font-size: 0.83rem;
    min-width: 0;
  }
  
  .mtlm-rbc-description {
    position: relative;
    top: 0;
    font-size: 0.67rem;
    line-height: 1.33;
    padding-top: 0.64rem;
  }

  .mtlm-r-header {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.33;
  }

  .mtlm-tiles-container {
    height: auto;
    flex-wrap: wrap;
    width: 61.8%;
    justify-content: center;
  }

  .mtlm-tc-tile {
    width: calc(50% - var(--mtlm-tc-gap) / 2);
  }

  .mtlm-tiles-description {
    font-size: 0.78rem;
    line-height: 1.36;
    padding-top: 3.69rem;
    padding-bottom: 1.83rem;
    max-width: 16.4rem;
  }

  .mtl-hide-mobile {
    display: none;
  }
  .mtl-show-mobile {
    display: block;
  }
  .mtl-show-mobile-flex {
    display: flex;
  }

}

@media (max-width: 950px) {
  #login-carousel-wrapper {
    background-position-y: calc(-1 * (18.8 * 1vw));
  }

  .mtlm-r-button-container {
    margin-top: 0;
    padding-bottom: 0.33rem;
    width: min(100%, 16.8rem);
  }
  .mtlm-rbc-description {
    text-align: left;
  }
  .mtlm-tc-tile {
    width: min(100%, 23rem);
  }
  .mtlm-tiles-container {
    width: 83.6%;
  }

}

@media (max-width: 620px) {
  #login-carousel-wrapper {
    background-position-y: calc(-1 * (9.8 * 1vw));
  }

  #login-form-wrapper {
    margin-top: 0;
    padding-inline: 5.6%;
  }
  .mtlm-r-buttons {
    padding-inline: 11.2%;
  }
}
@media (max-width: 460px) {
  #login-carousel-wrapper {
    background-position-y: 0;
  }
}
