:root {
    --eis: #008FBF;
}
body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: black;
}

.eis-login > div, .approve1, .text1, .loader, .identity-check, .welcome-message, .approve2, .text2 {
    border: ridge 3px whitesmoke;
}

.eis-login {
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    display: flex;
    flex-direction: row;
    background: repeating-linear-gradient(
        0deg,
        #0E0D0E 25%,
        #0E0D0E 50%,
        #171819 50%,
        #171819 75%
        );
      background-size: 5px 5px;
}

.left-frame {
    height: 100%;
    width: 33%;
    border-right: solid 1px blue;
    display: flex;
    flex-direction: column;
}

.approve1 {
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 5vw;
}

.approve1-2 {
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    color: #2285AB;
    font-family: arial;
}

.fingerprint, .mugshot {
    height: 50%;
}

.red {
    color: red;
}

.green {
    color: green;
}
.coolblue {
    color: #2285AB;
}
.text1 {
    height: 50%;
    width: 100%;
    text-align: left;
    overflow: hidden;   
    color: green; 
}

.text1,
.text2  {
    font-size: 0.5vw;
    font-family: arial;
    color: #2285AB;
    
}

.middle-frame {
    height: 100%;
    width: 33%;
    display: flex;
    flex-direction: column;
}

.identity-check {
    height: 33%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.identity-check2 {
    height: 80%;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: arial;
    border: solid 0.5vw snow;
    font-weight: bold;
    font-size: 2vw;
    color: snow;
}

.identity-check3 {
	padding:3vw;
}

.blink {
	-webkit-animation: headline 1.5s both;
	        animation: headline 1.5s both;
			animation-iteration-count: infinite;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-11-21 13:6:9
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes headline {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes headline {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.loader {
    height: 33%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    height: 80%;
    max-width: 100%;
    display: none;
}

.loader2 {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #2285AB;
    width: 5vw;
    height: 5vw;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
  
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
  
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.welcome-message {
    height: 33%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.greeting {
    color: #2285AB;
    font-size: 2vw;
    font-family: arial;
}

.right-frame {
    height: 100%;
    width: 33%;
    border-left: solid 1px blue;
    display: flex;
    flex-direction: column;
}

.approve2 {
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: red;
    font-size: 5vw;
}

.text2 {
    height: 50%;
    width: 100%;
}

/* Credits to Royal 420 KE */ 

.scan{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;
    width: 100%;
    height: 100%;

}

.scan .fingerprint{

    position: relative;

    display: flex;

    justify-content: center;

    width: 5vw;

    background: url(..\\Images\\fingerprint.svg);

    background-size: 100%;

    background-repeat: no-repeat;

    

}

.scan .fingerprint::before{

    content: '';

    position: absolute;

    width: 100%;

    background-position: center;

    background: url(..\\Images\\fingerprint2.svg);

    background-size: 100%;

    background-repeat: no-repeat;

    

    animation: animate 3s ease-in-out 1;

}

@keyframes animate{

    0%,100%{

        height: 0%;

    }

    50%{

        height: 100%;

    }

}

.scan .fingerprint::after{

    content: '';

    position: absolute;



    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 3s ease-in-out 1;

}

@keyframes animate_line{

    0%,100%{

        top: 0%;

    }

    50%{

        top: 100%;
  
    }

}

.scan .mugshot{

    position: relative;

    display: flex;

    justify-content: center;

    width: 5vw;

    background: url(..\\Images\\mugshot.svg);

    background-size: 100%;

    background-repeat: no-repeat;

    

}

.scan .mugshot::before{

    content: '';

    position: absolute;

    width: 100%;

    background-position: center;

    background: url(..\\Images\\mugshot2.svg);

    background-size: 100%;

    background-repeat: no-repeat;

    

    animation: animate 3s ease-in-out 1;

}

@keyframes animate{

    0%,100%{

        height: 0%;

    }

    50%{

        height: 100%;

    }

}

.scan .mugshot::after{

    content: '';

    position: absolute;



    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 3s ease-in-out 1;

   

}

@keyframes animate_line{

    0%,100%{

        top: 0%;

    }

    50%{

        top: 100%;
        content: '';

    }

}

@media only screen and (max-width: 1024px) {

    .middle-frame {
        width: 70%;
    }

    .approve1,
    .approve2 {
        flex-direction: column;
        font-size: 8vw;

    }

    .greeting {
        font-size: 4vw;
    }

    .scan .mugshot,
    .scan .fingerprint{ 
        width: 12vw;
    }

    .loader2 {
        height: 10vw;
        width: 10vw;
    }

}