/*
 * sheq-auth.css: the login, password-reset and password-change pages.
 *
 * FE-1.2 (2026-09): moved verbatim out of three ~700-line templates that carried the same <style>
 * blocks and had drifted apart. Selectors are deliberately unchanged; this file is de-duplication,
 * not a redesign. The one per-deployment rule (the .intro-2 background image) stays inline in
 * frontend/templates/auth/_shell_open.php.
 *
 * FE-1.4: the pages now load ONLY this file (headers/auth_header_tpl.php), so it also carries
 * the base rules and utility classes they used to inherit from Bootstrap, Metronic, main.css and
 * style.css. Values are the COMPUTED ones measured on the live login page at 51785d803.
 */

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: #212529;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { vertical-align: middle; }
button, input { font-family: inherit; margin: 0; }
button { cursor: pointer; }
a { text-decoration: none; }

/* Utilities used by the auth markup. Declared BEFORE the page rules below, as their original
   stylesheets were, so the max-width:576px padding override on .wrap-login100 still wins. */
.mt-2 { margin-top: 6px !important; }
.m-b-23 { margin-bottom: 23px; }
.m-t-30 { margin-top: 30px; }
.m-t-50 { margin-top: 50px; }
.p-t-20 { padding-top: 20px; }
.p-b-20 { padding-bottom: 20px; }
.p-l-55 { padding-left: 55px; }
.p-r-55 { padding-right: 55px; }
.d-flex { display: flex !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.text-center { text-align: center !important; }
.float-end { float: right !important; }
.shadow { box-shadow: 0 6px 12px rgba(0, 0, 0, .15) !important; }

.content-login {

  position: fixed;
  left: 0;
  right: 0;
  z-index: 2;
}
        .intro-2 {
          /* FE-1.2: the image is per-deployment (tbl_master_styles may override it), so the
             `background` shorthand is emitted inline by frontend/templates/auth/_shell_open.php. */
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-position: center;
          height: 100%;

        }
        .top-nav-collapse {
            background-color: #3f51b5 !important;
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: #3f51b5 !important;
            }
        }

        .card {
            background-color: rgba(229, 228, 255, 0.2);
            background-color: #fff;
        }
        /*.md-form label {
            color: #ffffff;
        }*/
        h6 {
            line-height: 1.7;
        }
        html,
        body,
        .view {
            background:#fff !important;
            height: 100%;
        }

        @media (min-width: 560px) and (max-width: 740px) {
            html,
            body,
            .view {
                height: 650px;
            }
        }

        @media (min-width: 800px) and (max-width: 850px) {
            html,
            body,
            .view  {
                height: 650px;
            }
        }

        .card {
            margin-top: 30px;
            /*margin-bottom: -45px;*/

        }
        /* Hide the app-wide copyright footer on the login page.
           custom.css forces `footer.footer { display:block !important }`, so we
           need matching specificity + !important here to keep the login screen
           free of the white footer banner. */
        footer.footer {
            display: none !important;
        }
        .container {
            height: 100vh;
            margin-bottom: 0 !important;

        }


        .navbar.navbar-dark form .md-form input:focus:not([readonly]) {
            border-color: #8EDEF8;
        }

        @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #3f51b5!important;
            }
        }
        .notice_board p{
            font-size:13px;
        }
        .c-custom-body {
            padding: 2.25rem !important;
        }
        .btn {
            padding: 8px 0px 8px 0;
            border-radius: 5px 5px 5px 5px !important;
            -moz-border-radius: 5px 5px 5px 5px !important;
            -webkit-border-radius: 5px 5px 5px 5px !important;
            border: 0px solid #000000;
        }
        .rounded-border {
            border-radius: 8px 8px 8px 8px !important;
            -moz-border-radius: 8px 8px 8px 8px !important;
            -webkit-border-radius: 8px 8px 8px 8px !important;

        }
        .c-label {
            top: 10px !important;
            left: 2px !important;
        }
        .c-formcontrol {
            padding-left: 8px !important;
            min-height: 35px;
        }
        a {

	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
	outline: none !important;
}

a:hover {
	text-decoration: none;
  color: #3680a7;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
	margin: 0px;
}

p {

	font-size: 14px;
	line-height: 1.7;
	color: #666666;
	margin: 0px;
}

ul, li {
	margin: 0px;
	list-style-type: none;
}


/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}
        input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #868686;}
input:-moz-placeholder { color: #868686;}
input::-moz-placeholder { color: #868686;}
input:-ms-input-placeholder { color: #868686;}

textarea::-webkit-input-placeholder { color: #868686;}
textarea:-moz-placeholder { color: #868686;}
textarea::-moz-placeholder { color: #868686;}
textarea:-ms-input-placeholder { color: #868686;}

/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {

  font-size: 14px;
  line-height: 1.5;
  color: #666666;
}

.txt2 {

  font-size: 14px;
  line-height: 1.5;
  color: #333333;
  text-transform: uppercase;
}

.bg1 {background-color: #3b5998}
.bg2 {background-color: #1da1f2}
.bg3 {background-color: #ea4335}


/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
  width: 100%;
  margin: 0 auto;
}

.container-login100 {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.wrap-login100 {
  width: 440px;
  background: #F8F9F9;
  border-radius: 10px;
  overflow: hidden;
}


/*------------------------------------------------------------------
[ Form ]*/

.login100-form {
  width: 100%;
}

.login100-form-title {
  display: block;

  font-size: 39px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
}



/*------------------------------------------------------------------
[ Input ]*/

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
}

.label-input100 {

  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  padding-left: 7px;
}

/* The field labels and the "I forgot / I remember my password" links carried these colours inline,
   marked !important, which no theme could override. They are classes now, with the same values,
   so the standard page looks exactly as it did. The :hover/:focus states are listed because the
   inline !important used to stop a:hover from turning the link teal. */
.label-input100--muted { color: #868686; }
.auth-aside-link,
.auth-aside-link:hover,
.auth-aside-link:focus { color: #007bff; }

.input100 {

  font-size: 16px;
  color: #333333;
  line-height: 1.2;

  display: block;
  width: 100%;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
}


/*---------------------------------------------*/
.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* FE-1.4: the two field icons were Font Awesome glyphs (content: attr(data-symbol)), which needs an
   icon font these pages no longer load. They are SVG masks painted in currentColor now, so the
   focus colour rules below apply unchanged. */
.focus-input100::after {
  content: "";
  color: #868686;
  background-color: currentColor;
  position: absolute;
  left: 13px;
  bottom: 0;
  width: 20px;
  height: calc(100% - 20px);
  -webkit-mask: var(--sheq-auth-icon) center / 18px 18px no-repeat;
          mask: var(--sheq-auth-icon) center / 18px 18px no-repeat;
}
.focus-input100--user { --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-9 2.2-9 5.5V22h18v-2.5C21 16.2 16.4 14 12 14z'/%3E%3C/svg%3E"); }
.focus-input100--lock { --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 10V7a6 6 0 0 1 12 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2.5 0h7V7a3.5 3.5 0 0 0-7 0z'/%3E%3C/svg%3E"); }

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7f7f7f;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}


.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

.input100:focus + .focus-input100::after {
  color: #3680a7;
}

.has-val.input100 + .focus-input100::after {
  color: #3680a7;
}


/*------------------------------------------------------------------
[ Button ]*/





.login100-form-btn {
border-radius: 25px;
  background: #3680a7;
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  border: none;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
}




/*------------------------------------------------------------------
[ Alert validate ]*/

.validate-input {
  position: relative;
}

.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  bottom: calc((100% - 20px) / 2);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
  right: 2px;
  pointer-events: none;


  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";

  display: block;
  position: absolute;
  color: #c80000;
  font-size: 16px;
  bottom: calc((100% - 20px) / 2);
  -webkit-transform: translateY(50%);
  -moz-transform: translateY(50%);
  -ms-transform: translateY(50%);
  -o-transform: translateY(50%);
  transform: translateY(50%);
  right: 8px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}
.sweet-alert {
    background-color: #ffffff;
    width: 478px;
    padding: 17px;
    border-radius: 5px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -239px;
    margin-top: -200px;
    overflow: hidden;
    display: none;
    z-index: 2000;
}

/*//////////////////////////////////////////////////////////////////
[ Social item ]*/
.login100-social-item {
  font-size: 25px;
  color: #fff;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 5px;
}

.login100-social-item:hover {
  color: #fff;
  background-color: #333333;
}

/*//////////////////////////////////////////////////////////////////
[ Responsive ]*/

@media (max-width: 576px) {
  .wrap-login100 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 600px) {
  #footer-image {
    visibility: hidden;
  }
}

.bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  margin-bottom: 20px;
}
.bottom p {
  text-align: center;
}
.version-box {
  /* Wave B/06 follow-up: the git-derived version (v0.YYYY.MMDD+hash) is longer
     than the old V.2.10 constant this 100px pill was sized for — shrink-wrap
     to content instead of clipping (wrap-login100 sets overflow:hidden). */
  padding: 5px 12px;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap;
  text-align: center;
  margin-right: 10px;
}

/* FE-1.4: the change-password rules hint (was a Font Awesome icon with a Bootstrap tooltip). */
.sheq-auth-hint { color: #868686; cursor: help; }
.sheq-auth-hint__icon { margin-top: -2px; }

/* FE-1.4: messages, rendered by footers/auth_footer_tpl.php. Sized and coloured as toastr rendered
   them on the live login page: fixed top-right, 300px, 15/50px padding, 0.8 opacity, bold title. */
.sheq-auth-toasts { position: fixed; top: 80px; right: 12px; z-index: 999999; width: 300px; max-width: calc(100vw - 24px); }
.sheq-auth-toast {
  position: relative;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  color: #fff;
  opacity: .8;
  font-size: 11.375px;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity .4s;
}
.sheq-auth-toast:hover { opacity: 1; }
.sheq-auth-toast.is-leaving { opacity: 0; }
.sheq-auth-toast::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background-color: #fff;
  -webkit-mask: var(--sheq-auth-icon) center / 24px 24px no-repeat;
          mask: var(--sheq-auth-icon) center / 24px 24px no-repeat;
}
.sheq-auth-toast--success { background-color: #51a351; --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 13.6-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E"); }
.sheq-auth-toast--info    { background-color: #2f96b4; --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E"); }
.sheq-auth-toast--warning { background-color: #f89406; --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 1 21h22zM11 9h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); }
.sheq-auth-toast--error   { background-color: #bd362f; --sheq-auth-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM8.5 7.1 12 10.6l3.5-3.5 1.4 1.4-3.5 3.5 3.5 3.5-1.4 1.4-3.5-3.5-3.5 3.5-1.4-1.4 3.5-3.5-3.5-3.5z'/%3E%3C/svg%3E"); }
.sheq-auth-toast__title { font-weight: 700; }
.sheq-auth-toast__close {
  position: relative;
  top: -6px;
  right: -6px;
  float: right;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  opacity: .8;
}