/* =============================================================================
   Police Report Procurement — eProcurement login skin
   Matches the 2026 marketing site (policereportpro.grok.me)

   Keep control IDs: txtUser, txtPassword, ButtonLogin, LoginMsg.
   Link AFTER or instead of cs/master2.css.
   ============================================================================= */

:root {
  --navy: #0e1c2f;
  --navy-mid: #17324a;
  --radiant-top: #050a12;
  --radiant-mid: #0a1628;
  --radiant-glow: #1b3c5e;
  --radiant-edge: #316ba6;
  --paper: #f3f0e8;
  --paper-2: #e7e1d4;
  --ink: #15202e;
  --muted: #3f4956;
  --steel: #2f6484;
  --ice: #b4cfe0;
  --line: #d5d0c6;
  --danger: #8f2f2f;
  --font-sans: "IBM Plex Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-mark: "Oswald", "Arial Narrow", Arial, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--paper-2) !important;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
}

#MainBodyDiv {
  position: static !important;
  overflow: visible !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
}

#TopBarWrapper {
  height: auto !important;
  background-color: var(--radiant-mid);
  background-image: linear-gradient(
    180deg,
    var(--radiant-top) 0%,
    var(--radiant-mid) 22%,
    var(--radiant-glow) 58%,
    var(--radiant-edge) 100%
  );
  color: var(--paper);
}

#LogoWrapper {
  display: flex;
  align-items: center;
  gap: 16px;
  float: none !important;
  width: auto !important;
  max-width: 72rem;
  margin: 0 auto;
  padding: 12px 24px 16px;
}

#divLogo img,
#Image1 {
  display: block;
  height: 88px;
  width: auto;
  object-fit: contain;
}

#logoText,
#logoText img,
#Image2 {
  display: none;
}

#LogoWrapper::after {
  content: "POLICE REPORT PROCUREMENT";
  font-family: var(--font-mark);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000;
  line-height: 1;
}

@media (max-width: 700px) {
  #LogoWrapper::after {
    font-size: 18px;
    max-width: 12rem;
  }
  #divLogo img,
  #Image1 {
    height: 64px;
  }
}

#MidBarWrapper {
  height: auto !important;
  padding-top: 0 !important;
  text-indent: 0 !important;
  background: #000;
  color: var(--paper);
  text-align: center;
}

#MidBarTextWrapper {
  font-family: var(--font-sans);
  font-style: normal !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 16px;
}

#MidBarTextWrapper i {
  font-style: normal;
}

#LoginBox {
  margin: 48px auto 16px !important;
  padding: 36px !important;
  width: calc(100% - 32px) !important;
  max-width: 440px !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 12px;
  background: var(--paper) !important;
  box-shadow:
    0 0 0 1px rgb(14 28 47 / 0.08),
    0 1px 2px -1px rgb(14 28 47 / 0.06),
    0 8px 24px -12px rgb(14 28 47 / 0.12);
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
}

#tblLogin,
#tblLogin tbody,
#tblLogin tr,
#tblLogin td {
  display: block;
  width: 100% !important;
  border: 0;
  box-sizing: border-box;
}

#tblLogin td {
  padding: 0 0 14px !important;
  font-family: var(--font-sans);
  color: var(--ink);
}

#tblLogin h3 {
  margin: 0 0 20px;
  font-family: "Newsreader", "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--navy);
}

#tblLogin b {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
}

#txtUser,
#txtPassword {
  width: 100% !important;
  box-sizing: border-box;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
}

#txtUser:focus,
#txtPassword:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgb(47 100 132 / 0.28);
}

#ButtonLogin {
  width: 100% !important;
  height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

#ButtonLogin:hover {
  background: var(--navy-mid);
}

#LoginMsg {
  color: var(--danger) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  min-height: 1.2em;
}

#LoginBox + p,
p[align="center"] {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
}

p[align="center"] a {
  color: var(--steel);
  font-weight: 600;
  text-decoration: none;
}

p[align="center"] a:hover {
  text-decoration: underline;
}

#Caption {
  position: static !important;
  width: 100% !important;
  margin-top: auto;
  background: var(--navy);
  color: rgb(243 240 232 / 0.55);
  padding: 20px 16px 28px;
  font-family: var(--font-sans);
  font-size: 12px;
}

#Caption p {
  margin: 8px 0;
  color: rgb(243 240 232 / 0.55);
}

#Caption a {
  color: var(--ice);
}

/* =============================================================================
   Registration / account sign-up (registration.aspx)
   Same cream page + light card. Keep ContentPlaceHolder1_* field IDs.
   ============================================================================= */

#divMenu {
  display: none;
}

#ContentPlaceHolder1_tblMain,
#ContentPlaceHolder1_tblSection1,
#ContentPlaceHolder1_tblSection2,
#ContentPlaceHolder1_tblUser,
#ContentPlaceHolder1_tblUserForm,
#ContentPlaceHolder1_Table1,
#ContentPlaceHolder1_Table2,
#ContentPlaceHolder1_Table3,
#ContentPlaceHolder1_Table4 {
  width: 100% !important;
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 0 !important;
  background: transparent !important;
}

#ContentPlaceHolder1_tblMain {
  margin: 40px auto 32px !important;
  padding: 36px !important;
  background: var(--paper) !important;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgb(14 28 47 / 0.08),
    0 1px 2px -1px rgb(14 28 47 / 0.06),
    0 8px 24px -12px rgb(14 28 47 / 0.12);
  display: block;
  box-sizing: border-box;
}

#ContentPlaceHolder1_tblMain td,
#ContentPlaceHolder1_tblSection1 td,
#ContentPlaceHolder1_tblSection2 td,
#ContentPlaceHolder1_tblUser td,
#ContentPlaceHolder1_tblUserForm td,
#ContentPlaceHolder1_Table1 td,
#ContentPlaceHolder1_Table2 td,
#ContentPlaceHolder1_Table3 td,
#ContentPlaceHolder1_Table4 td {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 15px;
  padding: 6px 4px;
  border: 0 !important;
  background: transparent !important;
}

#ContentPlaceHolder1_txtUserName,
#ContentPlaceHolder1_txtPassword,
#ContentPlaceHolder1_txtPassword2,
#ContentPlaceHolder1_txtCompanyName,
#ContentPlaceHolder1_txtCompanyType,
#ContentPlaceHolder1_txtYourName,
#ContentPlaceHolder1_txtTitle,
#ContentPlaceHolder1_txtPhoneNumber,
#ContentPlaceHolder1_txtFaxNumber,
#ContentPlaceHolder1_txtAddress,
#ContentPlaceHolder1_txtCity,
#ContentPlaceHolder1_txtState,
#ContentPlaceHolder1_txtZip,
#ContentPlaceHolder1_txtEmail,
#ContentPlaceHolder1_txtWebsite,
#ContentPlaceHolder1_txtAdditionalInfo {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
}

#ContentPlaceHolder1_txtAdditionalInfo {
  height: 120px;
  min-height: 120px;
  resize: vertical;
}

#ContentPlaceHolder1_txtUserName:focus,
#ContentPlaceHolder1_txtPassword:focus,
#ContentPlaceHolder1_txtPassword2:focus,
#ContentPlaceHolder1_txtCompanyName:focus,
#ContentPlaceHolder1_txtCompanyType:focus,
#ContentPlaceHolder1_txtYourName:focus,
#ContentPlaceHolder1_txtTitle:focus,
#ContentPlaceHolder1_txtPhoneNumber:focus,
#ContentPlaceHolder1_txtFaxNumber:focus,
#ContentPlaceHolder1_txtAddress:focus,
#ContentPlaceHolder1_txtCity:focus,
#ContentPlaceHolder1_txtState:focus,
#ContentPlaceHolder1_txtZip:focus,
#ContentPlaceHolder1_txtEmail:focus,
#ContentPlaceHolder1_txtWebsite:focus,
#ContentPlaceHolder1_txtAdditionalInfo:focus {
  outline: none;
  border-color: var(--steel);
  box-shadow: 0 0 0 3px rgb(47 100 132 / 0.28);
}

#ContentPlaceHolder1_buttonSubmit {
  height: 44px;
  padding: 0 28px;
  margin-top: 12px;
  border: 0;
  border-radius: 6px;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

#ContentPlaceHolder1_buttonSubmit:hover {
  background: var(--navy-mid);
}

#ContentPlaceHolder1_lblVal {
  color: var(--danger) !important;
  font-family: var(--font-sans);
  font-size: 13px;
}