/* =========================================================
   929 AUTO CARE
   929 EMPLOYEE SYSTEM
   FINAL APP.CSS
   ========================================================= */


* {
  box-sizing: border-box;
}


:root {

  --green: #009846;

  --green-bright: #00b956;

  --red: #ed1c24;

  --black: #101214;

  --dark: #0c1012;

  --grey: #687078;

  --border: #dfe3e5;

  --white: #ffffff;

}


html,
body {

  margin: 0;

  padding: 0;

  width: 100%;

  min-height: 100%;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: var(--black);

  color: #111;

}


button,
input {

  font-family: inherit;

}


.hidden {

  display: none !important;

}



/* =========================================================
   LOGIN
   ========================================================= */


.login {

  min-height: 100vh;

  width: 100%;

  display: grid;

  place-items: center;

  padding: 24px;

  background: #101416;

}


.login-card {

  position: relative;

  width: 100%;

  max-width: 455px;

  padding:
    34px
    35px
    30px;

  overflow: hidden;

  background: #fff;

  border-radius: 17px;

  text-align: center;

}



/* LOGIN STRIPE */


.login-stripe {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 6px;

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

}


.login-stripe i:nth-child(1) {

  background: var(--green);

}


.login-stripe i:nth-child(2) {

  background: #222;

}


.login-stripe i:nth-child(3) {

  background: var(--red);

}



/* LOGIN LOGO */


.login-logo {

  display: block;

  width: 100%;

  max-width: 310px;

  height: 150px;

  margin:
    0
    auto
    16px;

  padding: 10px;

  object-fit: contain;

  background: #272b2d;

  border-radius: 12px;

}



/* LOGIN TEXT */


.login-card h1 {

  margin:
    5px
    0
    8px;

  color: #000;

  font-size: 25px;

  line-height: 1.2;

}


.login-subtitle {

  margin: 0;

  color: var(--grey);

  font-size: 13px;

}


.login-subtitle b {

  color: var(--red);

}



/* LOGIN MESSAGE */


.msg {

  width: 100%;

  margin:
    16px
    auto
    0;

  padding:
    10px
    12px;

  background: #f2f4f5;

  color: #111;

  border-radius: 8px;

  font-size: 12px;

  text-align: center;

}


.msg.error {

  background: #fff0f0;

  color: #a11;

}



/* =========================================================
   GOOGLE SIGN-IN
   ========================================================= */


#googleButton {

  width: 100%;

  min-height: 44px;

  margin:
    18px
    auto
    8px;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

}


#googleButton > div {

  margin-left: auto !important;

  margin-right: auto !important;

  max-width: 100% !important;

}


#googleButton iframe {

  display: block !important;

  margin:
    0
    auto !important;

  max-width: 100% !important;

}


.login-authorized {

  display: block;

  margin-top: 10px;

  color: var(--grey);

  font-size: 11px;

}


.back-website {

  display: block;

  margin-top: 16px;

  color: #777;

  font-size: 10px;

  text-decoration: none;

}


.back-website:hover {

  color: #111;

}



/* =========================================================
   PORTAL
   ========================================================= */


.portal {

  min-height: 100vh;

  width: 100%;

  background: var(--black);

}



/* =========================================================
   HEADER
   SAME STYLE AS MAIN WEBSITE
   ========================================================= */


.portal-header {

  width: 100%;

  height: 88px;

  background: #fff;

  border-top:
    4px
    solid
    var(--green);

}


.portal-header-inner {

  width: calc(100% - 36px);

  max-width: 1335px;

  height: 100%;

  margin:
    0
    auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.portal-brand {

  display: flex;

  align-items: center;

  text-decoration: none;

}


.portal-header-logo {

  display: block;

  width: 135px;

  height: 72px;

  object-fit: contain;

  object-position:
    left
    center;

}



/* HEADER NAVIGATION */


.portal-nav {

  display: flex;

  align-items: center;

  gap: 38px;

}


.portal-nav a {

  color: #111;

  text-decoration: none;

  font-size: 14px;

  font-weight: 700;

}


.portal-nav a:hover {

  color: var(--red);

}



/* =========================================================
   HEADER STRIPE
   ========================================================= */


.portal-top-stripe {

  width: 100%;

  height: 4px;

  display: grid;

  grid-template-columns:
    1fr
    0.75fr
    1fr;

}


.portal-top-stripe i:nth-child(1) {

  background: var(--green);

}


.portal-top-stripe i:nth-child(2) {

  background: #101314;

}


.portal-top-stripe i:nth-child(3) {

  background: var(--red);

}



/* =========================================================
   MAIN
   ========================================================= */


.portal-main {

  width: calc(100% - 36px);

  max-width: 1335px;

  margin:
    0
    auto;

  padding:
    34px
    0
    45px;

}



/* =========================================================
   WELCOME
   ========================================================= */


.welcome {

  width: 100%;

  padding:
    31px
    30px
    27px;

  background: #fff;

  border-radius: 14px;

  border-left:
    5px
    solid
    var(--green);

}


.online {

  display: block;

  color: var(--green);

  font-size: 13px;

  font-weight: 800;

}


.welcome-top {

  width: 100%;

}


.welcome h2 {

  margin:
    21px
    0
    11px;

  color: #000;

  font-size: 30px;

  line-height: 1.2;

}


.welcome h2 b {

  font-weight: 700;

}


.welcome-top p {

  margin: 0;

  color: #686e72;

  font-size: 17px;

  line-height: 1.5;

}



/* =========================================================
   USER PROFILE
   ========================================================= */


.profile-panel {

  width: 100%;

  margin-top: 25px;

  padding-top: 24px;

  border-top:
    1px
    solid
    #e5e5e5;

  display: grid;

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

  gap: 24px;

  align-items: center;

}



/* PROFILE PHOTO */


.profile-photo-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

}


.profile-photo {

  display: block;

  width: 115px;

  height: 115px;

  border-radius: 50%;

  border:
    5px
    solid
    var(--green);

  object-fit: cover;

  object-position: center;

  background: #f2f2f2;

}



/* PROFILE DETAILS */


.profile-details {

  min-width: 0;

  text-align: left;

}


.profile-details > strong {

  display: block;

  margin:
    0
    0
    7px;

  color: #000;

  font-size: 19px;

  line-height: 1.25;

  font-weight: 700;

}


.profile-details div {

  margin:
    2px
    0;

  color: #333;

  font-size: 14px;

  line-height: 1.55;

}


.profile-details div span {

  color: #555;

}


.profile-details div b {

  color: #111;

  font-weight: 400;

}



/* =========================================================
   LOGOUT
   ========================================================= */


#logoutButton {

  min-width: 130px;

  padding:
    13px
    22px;

  border: 0;

  border-radius: 9px;

  background: var(--red);

  color: #000;

  font-size: 14px;

  font-weight: 400;

  cursor: pointer;

}


#logoutButton:hover {

  filter:
    brightness(0.95);

}


#logoutButton:active {

  transform:
    translateY(1px);

}



/* =========================================================
   STATS
   ========================================================= */


.stats {

  width: 100%;

  display: grid;

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

  gap: 15px;

  margin-top: 18px;

}


.stats article {

  min-width: 0;

  padding:
    18px
    19px;

  background: #fff;

  border-radius: 13px;

  border-top:
    4px
    solid
    var(--green);

}


.stats article:nth-child(2) {

  border-top-color:
    var(--red);

}


.stats article:nth-child(3) {

  border-top-color:
    #333;

}


.stats small {

  display: block;

  margin-bottom: 4px;

  color: #777;

  font-size: 11px;

}


.stats b {

  display: block;

  color: #111;

  font-size: 18px;

  line-height: 1.25;

  word-break: break-word;

}



/* =========================================================
   MODULE HEADING
   ========================================================= */


.module-heading {

  margin:
    16px
    0
    12px;

  color: #fff;

  font-size: 13px;

  line-height: 1.2;

  letter-spacing: 0.6px;

}



/* =========================================================
   MODULE GRID
   ========================================================= */


.grid {

  width: 100%;

  display: grid;

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

  gap: 14px;

}


.module {

  position: relative;

  width: 100%;

  min-height: 108px;

  padding:
    22px
    24px;

  display: grid;

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

  grid-template-rows:
    auto
    auto;

  gap:
    3px
    15px;

  text-align: left;

  background: #fff;

  color: #111;

  border:
    1px
    solid
    #ddd;

  border-radius: 12px;

  cursor: pointer;

}


.module:hover {

  border-color:
    var(--green);

  transform:
    translateY(-1px);

}


.module b {

  grid-column: 1;

  grid-row: 1;

  font-size: 15px;

  line-height: 1.3;

}


.module small {

  grid-column: 1;

  grid-row: 2;

  display: block;

  margin-top: 5px;

  color: #777;

  font-size: 11px;

  line-height: 1.4;

}


.module i {

  grid-column: 2;

  grid-row:
    1
    /
    3;

  align-self: center;

  color: #999;

  font-size: 25px;

  font-style: normal;

}


.empty {

  grid-column:
    1
    /
    -1;

  padding: 22px;

  background: #fff;

  border-radius: 12px;

  color: var(--grey);

  font-size: 13px;

}



/* =========================================================
   FOOTER
   SAME STYLE AS MAIN WEBSITE
   ========================================================= */


.portal-footer {

  width: 100%;

  background: #020303;

}



/* FOOTER STRIPE */


.footer-stripe {

  width: 100%;

  height: 4px;

  display: grid;

  grid-template-columns:
    1fr
    0.75fr
    1fr;

}


.footer-stripe i:nth-child(1) {

  background: var(--green);

}


.footer-stripe i:nth-child(2) {

  background: #101314;

}


.footer-stripe i:nth-child(3) {

  background: var(--red);

}



/* FOOTER CONTENT */


.portal-footer-inner {

  width: calc(100% - 36px);

  max-width: 1335px;

  min-height: 90px;

  margin:
    0
    auto;

  display: grid;

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

  align-items: center;

  gap: 30px;

}


.portal-copyright {

  color: #e0e2e3;

  font-size: 12px;

}


.footer-brand {

  display: block;

}


.portal-footer-logo {

  display: block;

  width: 130px;

  max-height: 70px;

  object-fit: contain;

  margin:
    0
    auto;

}


.portal-footer-links {

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 10px;

}


.portal-footer-links a {

  color: #e2e4e5;

  text-decoration: none;

  font-size: 12px;

}


.portal-footer-links a:hover {

  color: #fff;

}


.portal-footer-links span {

  color: #526066;

}



/* =========================================================
   TABLET
   ========================================================= */


@media (max-width: 900px) {


  .portal-header-inner {

    width: calc(100% - 26px);

  }


  .portal-main {

    width: calc(100% - 26px);

  }


  .portal-footer-inner {

    width: calc(100% - 26px);

  }


  .welcome h2 {

    font-size: 27px;

  }


  .profile-panel {

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

  }


}



/* =========================================================
   MOBILE
   ========================================================= */


@media (max-width: 700px) {


  /* LOGIN */


  .login {

    padding: 18px;

  }


  .login-card {

    padding:
      30px
      20px
      26px;

  }


  .login-logo {

    max-width: 310px;

    height: 145px;

  }



  /* HEADER */


  .portal-header {

    height: auto;

    min-height: 78px;

  }


  .portal-header-inner {

    width: 100%;

    padding:
      7px
      16px;

  }


  .portal-header-logo {

    width: 105px;

    height: 60px;

  }


  .portal-nav {

    gap: 12px;

  }


  .portal-nav a {

    font-size: 10px;

    white-space: nowrap;

  }



  /* MAIN */


  .portal-main {

    width: calc(100% - 20px);

    padding:
      24px
      0
      35px;

  }



  /* WELCOME */


  .welcome {

    padding:
      26px
      24px
      24px;

  }


  .online {

    font-size: 11px;

  }


  .welcome h2 {

    margin-top: 18px;

    font-size: 26px;

    line-height: 1.25;

  }


  .welcome-top p {

    font-size: 15px;

    line-height: 1.5;

  }



  /* PROFILE */


  .profile-panel {

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

    gap: 16px;

  }


  .profile-photo {

    width: 110px;

    height: 110px;

  }


  .profile-details > strong {

    font-size: 17px;

  }


  .profile-details div {

    font-size: 12px;

  }


  #logoutButton {

    grid-column:
      1
      /
      -1;

    width: 100%;

    margin-top: 6px;

  }



  /* STATS */


  .stats {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  /* MODULES */


  .grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  /* FOOTER */


  .portal-footer-inner {

    width: 100%;

    padding:
      22px
      16px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 14px;

  }


  .portal-footer-logo {

    width: 150px;

    height: auto;

    margin:
      5px
      auto;

  }


  .portal-footer-links {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 8px;

  }


  .portal-footer-links span {

    display: none;

  }


}



/* =========================================================
   SMALL MOBILE
   ========================================================= */


@media (max-width: 430px) {


  /* LOGIN */


  .login {

    padding: 12px;

  }


  .login-card {

    padding-left: 17px;

    padding-right: 17px;

  }


  .login-logo {

    height: 135px;

  }


  .login-card h1 {

    font-size: 23px;

  }



  /* HEADER */


  .portal-header-inner {

    padding:
      6px
      12px;

  }


  .portal-header-logo {

    width: 90px;

    height: 58px;

  }


  .portal-nav {

    gap: 8px;

  }


  .portal-nav a {

    font-size: 9px;

  }



  /* WELCOME */


  .welcome {

    padding:
      23px
      19px;

  }


  .welcome h2 {

    font-size: 23px;

  }


  .welcome-top p {

    font-size: 14px;

  }



  /* PROFILE */


  .profile-panel {

    grid-template-columns: 1fr;

    text-align: center;

  }


  .profile-photo-wrap {

    width: 100%;

  }


  .profile-photo {

    width: 130px;

    height: 130px;

    margin:
      0
      auto;

    border-width: 5px;

  }


  .profile-details {

    width: 100%;

    text-align: center;

  }


  .profile-details > strong {

    font-size: 18px;

  }


  .profile-details div {

    font-size: 13px;

  }


  #logoutButton {

    width: 100%;

  }



  /* STATS */


  .stats article {

    padding: 16px;

  }



  /* MODULES */


  .module {

    padding: 19px;

  }


}