/*
 * 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;
}

.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;
}