@font-face {
  font-family: 'Sansita_Regular';
  src: url(/fonts/Sansita_Regular.ttf);
}
@font-face {
  font-family: 'Lato_Regular';
  src: url(/fonts/Lato_Regular.ttf);
}
@font-face {
  font-family: 'popins_light';
  src: url(/fonts/Poppins_Light.ttf);
}
@font-face {
  font-family: 'Roboto_Regular';
  src: url(/fonts/Roboto_Regular.ttf);
}
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-family: 'popins_light';
  width: 100%;
  height: 100vh;
  /* background: url(/images/7114.jpg); */
  background-image: url("");
  background-position: center;
  background-size: cover;
  /* background: no-repeat; */
  overscroll-behavior: none;  /* -- stop pull to refresh the page --*/
  user-select: none;
  -moz-user-select: none;
}
.matter {
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  /* background-image: url(/images/HappyNewYear2024.jpg);  This is shifted to index_wallpaper.css*/
  background-size: cover;
  background-repeat: no-repeat;
  animation: text-animate 1s;
}
.matter .credetis {
  font-family: 'Lato_Regular';
  font-size: 12px;
  letter-spacing: 1px;
  color: #d4d4d4;
  margin-bottom: 0.2em;
  width: 100%;
  text-align: center;
  background: #607d8b5e;
}
.matter .login--group {
  display: grid;
  row-gap: .8em;
  align-self: end;
  place-items: center;
  margin-bottom: 1em;
  animation: zoom 2s;
}
.matter .doLogin {
  display: grid;
  grid-template-columns: auto 1fr;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  place-items: center;
  width: 100%;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,.25);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
  -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
  transition: background-color .218s,border-color .218s,box-shadow .218s;
  white-space: nowrap;
  border-radius: 18px;
}
.matter .doLogin:hover {
  -webkit-box-shadow: rgba(96, 125, 139, 0.3) 0px 0px 3px 3px;
  box-shadow: rgba(96, 125, 139, 0.3) 0px 0px 3px 3px;
}
.matter .doLogin img {
  /* border: 1px solid rgb(96, 125, 139); */
  padding: .5em;
  background-color: #fff;
}
.matter .doLogin p {
  font-family: 'Roboto_Regular';
  font-size: 14px;
  letter-spacing: .21px;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgb(96, 125, 139);
  color: rgb(242, 242, 242);
}
/* Google Sign In Button small tweek */
.g_id_signin {
  /* background-color: #202124; */
  /* border-radius: 18px; */
  /* padding: 0px 5px; */
  /* padding-top: 5px; */
}
.g_id_signin > div {
  /* margin: 0 auto; */
  /* background-color: #202124; */
}
/*  */
#install {
    display: none;
    padding: 5px 20px;
    background: #009688;
    color: #f2f2f2;
    font-size: 1rem;
    letter-spacing: 1px;
    border: none;
    margin-bottom: 5px;
}
/* Nav header css override */
#SignIn i {
  color: #FF9800!important;
}
.fix__Nav {
  display: none!important;
}
  /*................................ Modal Login work............................... */
.login_modal { 
  justify-content: center;
  align-items: center; 
  display: none; 
  /* transition: .7s; */
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}
.login_modal_close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0 6px 2px 6px;
  color: #0067b8;
  font-size: 20px;
  border: 1px solid rgba(51, 50, 50, 0.549);
  border-radius: 50%;
  user-select: none;
  transition: .5s;
}
.login_modal_close:hover {
  color: #fff;
  border: 1px solid rgba(255, 0, 0, 0.549);
  transform: rotate(70deg);
  cursor: pointer;
}
  
/* Animations */
/* Open */
.login_modal.login--modal--show {
  animation: modal-open 0.3s;
}
@keyframes modal-open {
  0%    { opacity: 0; }
  100%  { opacity: 1; }
}
@keyframes text-animate {
  0%    { opacity: 0; }
  100%  { opacity: 1; }
}
/* Close */
.login_modal.login--modal--hide {
  animation: modal-close 0.3s;
  /* visibility: hidden; */
}
@keyframes modal-close {
  0%    { opacity: 1; }
  100%  { opacity: 0; }
}
/* Add Zoom Animation */
.animate {
  animation: zoom 0.3s
}
@keyframes zoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}
.login--modal--show,
.login--modal--hide {
  display: flex; 
} /* classes fired by js for animation control */
.login_box img {
  width: 35px;
  margin-bottom: -9px;
}
.login_box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  /* height: 420px; */
  padding: 40px;
  background: rgba(0, 0, 0, 0.8);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.5);
  border-radius: 200px 0px;
}
.login_box header {
  margin: 0 0 35px;
  padding: 0;
  color: #0067b8;
  /* text-align: center; */
  font-family: 'Sansita_Regular', sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: end;
}
.remember {
  margin-top: 20px;
}
.remember label {
  /* margin-top: -5px; */
  color: #fff;
  font-family: 'popins_light', sans-serif;
  font-size: 13px;
}
.remember input[type=checkbox] {
  margin: 0;
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.login_box footer {
  margin-top: 5px;
  color: #fff;
  font-family: 'popins_light', sans-serif;
  font-size: 13px;
  vertical-align: middle;
}
.login_box footer i {
  font-size: 18px;
  margin-left: -3px;
  padding-right: 5px;
  color: #0067b8;
}
#signup {
  color: #FBBC05;
  font-size: 12px;
}
#signup:hover {
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
}
.login_box .inputBox {
  position: relative;
}
.login_box .inputBox input {
  width: 100%;
  padding: 7px 10px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 25px;
  border: 1px solid rgba(204, 204, 204, 0.05);
  border-radius: 4px;
  outline: none;
  background: transparent;
  line-height: normal;
}
.login_box .inputBox .password {
  margin-bottom: 0;
}
.login_box .forgotbox {
  display: grid;
  place-items: flex-end;
}
#forgot-pass {
  font-family: 'Sansita_Regular', sans-serif;
  margin: 10px;
  letter-spacing: 1px;
  padding-bottom: 2px;
  background: transparent;
  border: none;
  color: #2196F3;
  outline: none;
  transition: .2s;
}
#forgot-pass:hover {
  border-bottom: 1px solid #03A9F4;
  color: #c5c5c5;
}
.login_box .inputBox label {
  font-family: 'Lato_Regular', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  padding: 6px;
  font-size: 14px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.350);
  pointer-events: none;
  transition: .5s;
}
/* This is the real animation when focus on Inputcell the label will move Top*/
.login_box .inputBox input:focus ~ label,
.login_box .inputBox input:valid ~ label {
  top: -25px;
  left: 0;
  color: #0067b8;
  font-size: 12px;
}
/* .login_box input[type="button"] { */
#login-livex {
  margin-top: 10px;
  background: transparent;
  border: 1px solid #0067b8;
  outline: none;
  color: #fff;
  padding: 7px;
  cursor: pointer;
  border-radius: 20px;
  width: 100%;
  font-family: 'Sansita_Regular', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  transition: .3s;
}
#login-livex:hover {
  box-shadow: 0px 0px 14px 3px #004050;
}
.tost-alert {
  color: #333;
}
.swal-notice-head {
  color: #333;
}
/* Media query for Normal Laptop/Desktop ..............*/
@media (min-width: 961px) {
  .matter {
    background-image: url(/images/_img_desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    animation: text-animate 1s;
  }

}