* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #ff931ecf;
    --secondary: #000333fc;
    --tertiary: #01b3b2;
    --success: rgb(5 255 138);

}

body {
    font-family: 'Poppins', sans-serif;
}

.logo-img {
    width: 100px;
}

.btn-custom {
    background-color: var(--secondary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}

a.btn {
    width: max-content;
    border-radius: 25px;
}

.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85vh;
    background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)),
        url('../img/bg.png') no-repeat center center/cover;
}

.cam-div {
    height: 65vh;
    border-radius: 10px;
}

.knownface {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 2px solid black;
    object-fit: cover;
    border-radius: 25px;
}

.data-box {
    background: #01b3b23d;
    padding: 10px 5px;
    margin: 20px;
    color: white;
    border: 2px solid var(--tertiary);
    font-weight: bold;
}

.rounded {
    border: 3px solid var(--tertiary);
    padding: 15px;
}

img.animate-img {
    width: 165px;
    height: 165px;
    object-fit: contain;
    background: #ffffff;
    padding: 20px;
    border-radius: 100%;
    border: 15px dashed #01b3b2;
    animation: flip 6s infinite linear;
    position: absolute;
    left: 75px;
    top: 125px;
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.bg-blue {
    background: var(--secondary);
}

.main-wrapper-camera {
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.text-success {
    --bs-text-opacity: 1;
    color: var(--success) !important;
}

.hr-main-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 85vh;
    background: #01b3b2;
}

.border-custom {
    border: 2px solid var(--tertiary);
}



.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes blinker {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.0;
    }
}




/* *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",sans-serif;
    overflow:hidden;
} */

.login-container{
    width:100%;
    height:100vh;
    display:flex;
}

/* LEFT SIDE */
.left-panel{
    flex:1;
    background:url("../img/login_bg.png");
    background-size:cover;
    background-position:center;
    position:relative;
}

/* DARK OVERLAY */
.left-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.35);
}

/* RIGHT SIDE */
.right-panel{
    width:360px;
    background:#efefef;
    padding:40px 25px;
}

/* LOGIN BOX */
.login-box{
    width:100%;
}

/* LOGO */
.logo{
    width:180px;
}
.hrms-logo{
    width: 50px;
    margin-top: 10px;
}

/* INPUT */
.form-control{
    height:44px;
    border:none;
    background:#dfe6ef;
}

.form-control:focus{
    box-shadow:none;
    border:1px solid #377688;
}

/* BUTTON */
.signIn{
    background:#377688;
    color:white;
    border:none;
    height:42px;
}

.signIn:hover{
    background:#2e6473;
    color:white;
}

/* MOBILE */
@media(max-width:768px){

    .left-panel{
        display:none;
    }

    .right-panel{
        width:100%;
    }

}