@font-face {
   font-family: Roboto;
   src: url(https://fonts.googleapis.com/css?family=Roboto);
}

/* Sticky footer: keep content flow unchanged but push the footer to the viewport bottom when content is short. */
#div_main {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

#div_main .topAndBottomSpacer {
   margin: 0;
}

#div_main>footer {
   margin-top: auto;
}

#header_row {
   display: flex;
   align-items: flex-end;
   background: #FFFFFFD9;
}

#header-image {
   border-top-left-radius: 24px;
   border-bottom-left-radius: 24px;
   margin-bottom: 0;
   height: 80px;
}

#app_name {
   width: 100%;
   height: 80px;
   padding-left: 16px;

   font-family: Roboto;
   font-weight: 400;
   font-style: Normal;
   font-size: 18px;
   white-space: nowrap;
   line-height: 25.6px;
   letter-spacing: 0%;
   display: flex;
   align-items: center;
   border-top-right-radius: 24px;
   border-bottom-right-radius: 24px;
   margin-bottom: 0;
}

.forgot-password-data-div {
   display: flex;
   flex-direction: column;
   align-items: center;

}

.frosted-glass {
   box-shadow:
      0 8px 12px -6px rgba(0, 0, 0, 0.04),
      0 6px 4px -1px rgba(0, 0, 0, 0.04),
      0 4px 6px -2px rgba(0, 0, 0, 0.08);
}

.topAndBottomSpacer {
   height: 96px;
   margin: auto 0;
   padding: 0;
}

/* Keep content aligned with the same left gutter as #header_row across breakpoints. */
#cancelLink {
   display: inline-block;
   margin-top: 24px !important;
   cursor: pointer;
   color: #06748c;
}

.headline-text {
   font-family: Roboto;
   font-style: Normal;
   font-weight: 300;
   font-size: 40px;
   line-height: 48px;
   letter-spacing: 0%;
   text-align: center;
   color: #343741;
}

.headline-text-margin-large {
   margin: 0px auto 32px auto;
}

.headline-text-margin-small {
   margin: 0px auto 8px auto;
}


#error-messages {
   display: flex;
   flex-direction: column;
   width: 141;
   height: 40;
   gap: 8px;
   opacity: 1;

   font-family: Roboto;
   font-weight: 400;
   font-style: Normal;
   font-size: 12px;
   line-height: 14.4px;
   letter-spacing: 0%;
   color: var(--Semantic-Semantic-Red-80, #D32F2F);
   margin-bottom: 8px;
}

.error-alert {
   width: 16px;
   height: 16px;
   margin-right: 7px;

}

#center-div {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.centered-text {
   display: flex;
   align-items: center;
}

#username-required {
   display: none;
}


#password-required {
   display: none;
}

.errored-field {
   border-bottom-color: var(--Semantic-Semantic-Red-80, #D32F2F) !important;
   border-width: 2px !important;

   background: var(--Semantic-Semantic-Red-10, #FFF4F5);
}

#username-div {
   margin-bottom: 16px;
   width: 100%;
}

#password-div {
   margin-bottom: 32px;
   width: 100%;
}

input {
   height: 50px;
   box-sizing: border-box;
   width: 100%;

   display: flex;
   align-items: center;

   padding-right: 12px;
   padding-left: 12px;
   border-radius: 6px;

   border-style: solid !important;
   border-width: 1px, 1px, 0px, 10px !important;
   border-color: var(--Gray-Gray-10, #E6E6E6) var(--Gray-Gray-10, #E6E6E6) #707070 !important;
}

.remember {
   height: 20px;
   padding-top: 6px;
   margin: auto;
   margin-right: 8px;
   display: inline-block;
   vertical-align: middle;
   font-size: 12px;
}

#tr_resetcreds1 {
   height: 26px !important;
   padding: 0;
   font-size: 12px;
   line-height: 14.4px;
}

.text-16 {
   font-family: Roboto;
   font-weight: 300;
   font-style: Normal;
   font-size: 16px;
   line-height: 22.4px;
   letter-spacing: 0%;
}

#recoverUsernameLink:hover,
#forgotPasswordLink:hover {
      cursor: pointer;
}

#signInButton,
#sendRequestButton,
#sendUsernameButton {
   height: 50px;
   width: 100%;
   padding-top: 12px;
   padding-bottom: 12px;
   box-sizing: border-box;
   margin-bottom: 32px;
   background: var(--Teal-Teal-Dark, #06748C);
   border: 0px;
   color: #FFFFFF;
   font-weight: bold;
   text-align: center;
   padding-right: 12px;
   padding-left: 12px;
   border-radius: 6px;
}

#signInButton:hover,
#sendRequestButton:hover,
#sendUsernameButton:hover {
   background: var(--Teal-Teal-Darker, #055A6D);
   cursor: pointer;
}

#forgot-password {
   width: 122px;
   margin: 0;
   height: 100%;
}

#vertical-bar {
   margin: 0px 8px;
}

#forgot-username {
   margin-left: 8px;
   width: 122px;
}

.info-div {
   min-height: 26px;
   margin-bottom: 8px;
}

.info-text {
   font-family: Roboto;
   font-weight: 400;
   font-style: Normal;
   font-size: 16px;
   line-height: 26px;
   letter-spacing: 0%;
   text-decoration-style: solid;
   text-decoration-thickness: 0%;
   color: var(--Teal-Teal-Dark, #06748C);
}

.forgot-password-info-text {
   font-family: Roboto;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 25.6px;
   /* 160% */
   margin-bottom: 32px;
}

.ping-input-container {
   height: 50px;
   margin-bottom: 32px;
}

.underline-link {
   text-decoration-line: underline !important;
   color: var(--Teal-Teal-Dark, #06748C);
}

#assistance-details,
#assistance,
#days-open,
#dot {
   text-decoration-line: none !important;
   color: var(--Gray-Dark-Gray, #343741);
}


#hr-line {
   height: 0px;
   border: 0.5px solid var(--Gray-Gray-25, #C0BFC0);
   margin-top: 24px;
   margin-bottom: 24px;
}

#other-portals {
   font-weight: 300;
   font-size: 24px;
   line-height: 28.8px;
   text-decoration-line: none !important;
   color: var(--Gray-Dark-Gray, #343741);
}

#personal-lines,
#middle-market,
#surety,
#state-auto {
   text-decoration: none !important;
   color: var(--Teal-Teal-Dark, #06748C);
}

#state-auto-div {
   margin-bottom: 0px !important;
}

.caret {
   width: 8px;
   height: 8px;
}

#LM-address-div {
   min-height: 74;
   padding-top: 24px;
   padding-right: 100px;
   padding-bottom: 24px;
   padding-left: 64px;
   gap: 10px;

   background: var(--Primary-Liberty-Blue, #1A1446);
}

#LM-address-text {
   min-height: 26px;

   font-family: Roboto;
   font-weight: 400;
   font-size: 16px;
   line-height: 25.6px;
   letter-spacing: 0%;
   color: #FFFFFF;
}

#policy-div {
   min-height: 148px;
   display: flex;
   padding-left: 64px;
   padding-right: 64px;
   gap: 49px;
   border-top-left-radius: 48px;
   border-top-right-radius: 48px;
   background: var(--Gray-Atmos-White, #F5F5F5);
}

#logo-medallion {
   margin-top: 24px;
   height: 84px;
   width: 65px;
}

#policy-links-div {
   margin-top: 32px;
   min-height: 68px;
}

#do-not-sell-info {
   white-space: nowrap;
}

@media only screen and (max-width: 675px) {
   #do-not-sell-info {
      white-space: normal;
   }
}

@media only screen and (min-width: 769px) {
   #header_row {
      height: 104px;
      padding-right: 64px;
      padding-left: 64px;
      padding-bottom: 0px;
   }

   #cancelLink {
      margin-left: 64px;
   }

   #data-div {
      max-width: 504px;
   }

   #app_name {
      padding-right: 32px;
   }
}

@media only screen and (min-width: 451px) {
   #lm-header-logo {
      display: block;
   }

   #lm-header-logo-mobile {
      display: none;
   }
}


@media only screen and (min-width: 451px) and (max-width: 768px) {
   #header_row {
      height: 104px;
      padding-left: 32px;
      max-width: calc(100% - 32px);
   }

   #cancelLink {
      margin-left: 32px;
   }

   #data-div {
      max-width: 504px;
      width: calc(100% - 64px);
   }

   #app-name {
      font-size: 16px;
      padding-right: 16px;
   }
}

@media only screen and (max-width: 450px) {
   #header_row {
      height: 104px;
      padding: 0px 16px;
   }

   #cancelLink {
      margin-left: 16px;
   }

   #header-image {
      height: 72px;
      width: 109px;
      object-fit: fill;
   }

   #lm-header-logo {
      display: none;
   }

   #lm-header-logo-mobile {
      display: block;
   }

   #app_name {
      height: 72px;
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      /* 116.667% */
   }

   .topAndBottomSpacer {
      height: 64px;
   }

   #center-div {
      padding: 0 16px;
   }

   #data-div {
      max-width: 100%;
   }

   .headline-text {
      font-size: 36px;
      line-height: 43.2px;
      letter-spacing: 0%;
   }

   #policy-links-bottom-row {
      margin-bottom: 4rem;
   }

   #policy-div {
      display: flex;
      flex-direction: column;
      padding-left: 16px;
      padding-right: 16px;
      gap: 0px;
   }

   #LM-address-div {
      font-size: 12px;
      padding-right: 16px;
      padding-left: 16px;
      gap: 12px;
   }

   #LM-address-text {
      font-size: 12px;
   }
}

#policy-links-bottom-row {
   margin-top: 16px;
   margin-left: 4px;
   margin-bottom: 2rem;
}

.policy-links {
   height: 26;
   padding-right: 4px;
   padding-left: 4px;
   gap: 8px;

   font-family: Roboto;
   font-weight: 400;
   font-size: 16px;
   line-height: 25.6px;
   letter-spacing: 0%;
   text-decoration: underline;
   text-decoration-style: solid;
   text-decoration-thickness: 0%;
   color: var(--Primary-Liberty-Blue, #1A1446);
}