:root{
  --blue: #000;
  --dark: #424242;
  --gold: #EC4E4F;
  --gray: rgb(150, 152, 154);
  --sysBg: #293846;
}

.loginscreen.middle-box {
  width: 300px;
  margin-top: 70px;
}
.centeredContent{
  margin: 0 auto;
  max-width: 1000px;
  height: 100px;
  z-index:1;
 }

 .login-card {
 
  /* background:  linear-gradient(to bottom, #ffffff, rgb(170, 167, 167)); */
  background:  #fff;
  /* background: linear-gradient(to bottom, #fff, #fff); */

  padding: 20px;
  /* margin-bottom: 25px; */
  border: 1px solid #e7eaec;
  border-radius: 15px;
  -webkit-box-shadow: 0 10px 6px -6px #777;
  -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

label.al-heading{
  /* text-transform: uppercase; */
  font-size: 12px;
  margin-top: 2%;
  color: #000;
}

label.al-subtitle{
  font-size: 11px;
  font-weight: 600;
  color: #263238;
  margin-bottom: 0;
  padding-bottom: 0;
}

.asterisks{
  color: red;
}

.outline-error{
  border: 1px solid red;
}
/** SELECT RADIO BUTTON ON ALL LISTING PAGE*/
.myradio-button,
.mycheckbox {
  position: relative;
  margin: 0px 0px;
  cursor: pointer;
}
.mycheckbox { display: block; }

.myradio-button input,
.mycheckbox input {
  position: absolute;
  margin: 5px;
  padding: 0;
  /* for mobile accessibility (iOS Label Bug) */
  visibility: hidden;
}
.myradio-button .label-visible,
.mycheckbox .label-visible {
  margin-left: 2em;
  margin-bottom: 0;
}


.myfake-radiobutton,
.myfake-checkbox{
  position: absolute;
  display: block;
  top: 0;
  left: 3px;
  width: 20px;
  height: 20px;
  border: 1px solid slategray;
  background-color: white;
}
.myfake-radiobutton:after,
.myfake-checkbox:after {
  content: "";
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: rgb(35, 52, 106);
  transform: translateX(-50%) translateY(-50%);
}

.myfake-radiobutton { border-radius: 50%; }
.myfake-radiobutton:after { border-radius: 50%; }


input[type="radio"]:checked + span .myfake-radiobutton:after,
input[type="checkbox"]:checked + span .myfake-checkbox:after { display: block; }


/* EYE ICON LOGIC */
.p-change-viewer{
  float: right;
  margin-top: -30px;
  position: relative;
  right: 20px;
  z-index: 1;
  cursor: pointer;
}

.p-viewer{
  float: right;
  margin-top: -30px;
  position: relative;
  right: 20px;
  z-index: 1;
  cursor: pointer;
}

.fa-eye{
  color: #000;
}

.slogan h2{
  font-size: 14px;
  font-weight:900;
  margin-bottom: 15px;
  color: #000;
}


.btn-primary{
  background-color: #EC4E4F;/*var(--gold);*/
  color: var(--dark);
  font-weight: bold;
}

.btn-primary:hover{
  background-color: var(--dark);
  color: #EC4E4F;/*var(--gold);*/
  font-weight: bold;
}

/* SCANNING FINGER */
.finger-print{
  height:25vmin;/*OMG its even responsive*/
  width:15vmin;
  border:2px solid black;
  border-radius:20vmin;
  overflow:hidden;
  cursor: pointer;
}

.scan
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}
.scan .fingerprint 
{
    position: relative;
    width: 150px;
    height: 190px;
    background: url(../img/fingerPrint_01.png);
    background-size: 150px;
}
.scan .fingerprint::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/fingerPrint_02.png);
    background-size: 150px;
    animation: animate 4s ease-in-out infinite;
}
@keyframes animate
{
    0%, 100%
    {
        height: 0%;
    }
    50%
    {
        height: 100%;
    }
}
.scan .fingerprint::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: #3fefef;
    border-radius: 8px;
    filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
    animation: animate_line 4s ease-in-out infinite;
}
@keyframes animate_line
{
    0%, 100% 
    {
        top: 0%;
    }
    50%
    {
        top: 100%;
    }
}
.scan h3
{
    text-transform: uppercase;
    font-size: 2em;
    letter-spacing: 2px;
    margin-top: 20px;
    color: #3fefef;
    filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
    animation: animate_text 0.5s steps(1) infinite;
}
@keyframes animate_text
{
    0%, 100% 
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
}


.auth-bg{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* UPLODED IMAGE */
.box img {
  border: 4px solid #209e91;
  padding: 2px;
  /* border-radius: 50%; */
  border-radius: 5%;
  border-top-color: var(--gold);
  border-left-color: var(--gold);
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.radiusCard {
  border-radius: 8px;
  box-shadow: 0 6px 6px -3px gray;
}

input.list-text-area, select.list-text-area{
  border: 1px solid #bfbfc4;
  box-shadow: none;
  /* margin-top: 10px; */
  margin-bottom: 5px;
  padding: 0px 20px;
  font-size: 12px;
  font-weight:500;
  line-height: 16px;
  border-radius: 15px;
  color: #4e4e4e;
  /* background-color: rgb(201, 166, 166) */
}

textarea.list-text-area{
  border: 1px solid #bfbfc4;
  box-shadow: none;
  /* margin-top: 10px; */
  margin-bottom: 5px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight:500;
  line-height: 16px;
  border-radius: 15px;
  color: #4e4e4e;
}


/* SKELETON LOAD STYLE */
.c-skeleton-square {
  background-color: #ebebeb;
  display: inline-flex;
  line-height: 1;
  position: relative;
  overflow: hidden;
  z-index: 1;
}