@charset "UTF-8";

/**
 * Custom CSS for the FingerPrint Web App
 * @authors Dahir Muhammad Dahir (dahirmuhammad3@gmail.com)
 * @date    2020-04-12 21:33:47
 * @version 1.0.0
 */

@font-face {
    font-family: philosopher;
    src: url('/res/webfonts/philosopher-regular.woff2') format('woff2'),
        url('/res/webfonts/philosopher-regular.woff') format('woff');
    font-weight: normal;
}

@font-face {
    font-family: philosopher;
    src: url('/res/webfonts/philosopher-bold.woff2') format('woff2'),
        url('/res/webfonts/philosopher-bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: philosopher;
    src: url('/res/webfonts/philosopher-italic.woff2') format('woff2'),
        url('/res/webfonts/philosopher-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: philosopher;
    src: url('/res/webfonts/philosopher-bolditalic.woff2') format('woff2'),
        url('/res/webfonts/philosopher-bolditalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

body {
    background: #f4f4f4;
}

#controls {
    margin-top: 100px;
}

.my-text {
    font-family: philosopher, serif !important;
}

.my-text0 {
    font-family: philosopher, serif;
    color: #ffffff;
    font-size: 70px;
}

.my-text1 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 49px;
}

.my-text2 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 45px;
}

.my-text3 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 38px;
}

.my-text4 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 34px;
}

.my-text5 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 32px;
}

.my-text6 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 28px;
}

.my-pri-text6 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #1A237E;
    font-size: 22px;
}

.my-text7 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 22px;
}

.my-text8 {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 18px;
}

.my-text-button {
    font-family: philosopher, serif;
    color: #ffffff;
    font-size: 20px;
}

.button-text {
    font-family: philosopher, serif;
    /*font-weight: bold;*/
    color: #ffffff;
    font-size: 28px;
}

.my-pri-color {
    color: #0069D9;
}

.my-sec-color {
    color: #3949AB;
}

.my-border {
    border-color: #3949AB !important;
}

.icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    background-size: cover;
}

.icon-indexfinger-not-enrolled{
    background-image: url("/res/svg/indexfinger_not_enrolled.svg");
}

.icon-indexfinger-enrolled{
    background-image: url("/res/svg/indexfinger_enrolled.svg");
}

.icon-middlefinger-not-enrolled{
    background-image: url("/res/svg/middlefinger_not_enrolled.svg");
}

.icon-middlefinger-enrolled{
    background-image: url("/res/svg/middlefinger_enrolled.svg");
}

.capture-indexfinger{
    animation-duration: 500ms;
    animation-name: blink-index-finger;
    animation-iteration-count: infinite;
}

.capture-middlefinger{
    animation-duration: 500ms;
    animation-name: blink-middle-finger;
    animation-iteration-count: infinite;
}

@keyframes blink-index-finger{
    from{
        background-image: url("/res/svg/indexfinger_not_enrolled.svg");
    }

    to{
        background-image: url("/res/svg/indexfinger-anim.svg");
    }
}

@keyframes blink-middle-finger{
    from{
        background-image: url("/res/svg/middlefinger_not_enrolled.svg");
    }

    to{
        background-image: url("/res/svg/middlefinger-anim.svg");
    }
}

