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

.login-left {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
}

.login-right {
    flex: 0 0 60%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, #f6f8f8 30%, rgba(6, 177, 175, 0.6) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-primary {
    background-color: #386860 !important;
}

.company-logo {
    height: 63px;
    width: 158px;
    margin-bottom: 10px;
}

.login-form-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    border-radius: 10px;
    width: 400px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.powered-font {
    text-align: center;
    margin-bottom: -24px;
    color: gray;
    font-weight: 300;
}

.password-input-container {
    position: relative;
    width: 100%;
}

.password-input-container input {
    width: 100%;
    padding-right: 40px;
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }
    .login-left {
        flex: 0 0 40%;
        height: 40vh;
    }
    .login-right {
        flex: 1;
        height: 60vh;
    }
}

.lottie-container {
    width: 70%;
    display: flex;
}

.form-group input {
    width: 100%;
    padding: 8px 31px !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s;
}

.form-group input:focus, 
.form-group input:active {
    border-color: #0e7b83;
    box-shadow: 0px 0px 5px rgba(10, 132, 145, 0.3);
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrapper .input-icon {
    position: absolute;
    left: 12px;
    color: #999;
    font-size: 16px;
}

.input-icon-wrapper input {
    padding-left: 40px;
}

.button-container button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #047f71;
    color: #fff;
    font-size: 16px;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}

.button-container button:hover, 
.button-container button:active {
    background: #0f7a77;
}

.button-container .button-icon {
    left: 15px;
    position: absolute;
}

.forgot-password-container {
    text-align: right;
    margin-top: 5px;
}

.forgot-password-container .forgot-password-link {
    color: #09898e;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password-container .forgot-password-link:hover {
    text-decoration: underline;
}

.alert-danger {
    display: block !important;
    text-align: center !important;
}

.red{
    background-color: rgb(3, 120, 120);
}
.blue{
    background-color: rgb(30, 120, 145);
}
/* 
To remove choose user option from login page */
.o_user_switch_btn {
    display: none !important;
}
/* Hide the Odoo logo image inside the kiosk mode footer */
.o_hr_kiosk_mode_bottom img {
    display: none !important;  /* This hides the image */
}

/* Add Pearl text instead of the image */
.o_hr_kiosk_mode_bottom::after {
    content: "Pearlsoft Technologies" !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #4a4a4a !important;
    margin-left: 5px !important;
}

.o_hr_kiosk_mode_bottom.d-flex.flex-column.flex-md-row.gap-2.align-items-center.justify-content-between.my-5::after {
    display: none; /* This hides the ::after content */
}

.o_hr_kiosk_mode_bottom span::after {
    content: " Pearlsoft Technologies";
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #4a4a4a !important;
    margin-left: 5px !important;
}

.o_hr_kiosk_mode_bottom.d-flex.flex-column.flex-md-row.gap-2.align-items-center.justify-content-between.my-5 .btn span::after {
    display: none; /* This hides the ::after content */
}

img[src="/hr_attendance/static/img/mock-tablet.png"] {
    content: url('/peopleconnect_theme/static/src/img/tablet.png');
}

.o_hr_attendance_kiosk_company_image{
    content: url('/peopleconnect_theme/static/src/img/logo.png');
}

.o_hr_attendance_install_btn{
    display: none !important;
}

.o_mobile_barcode{
    top: -95px !important;
}

.fa-question-circle{
    display: none !important;
}

.o_enterprise_label{
    display: none !important;
}

.o_doc_link{
    display: none !important;
}

.mt16 div a{
    display: none !important;
}

.o_field_widget > a > span {
     display: none !important;
}

.oe_view_nocontent_attendance_mobile .or-separator,
.oe_view_nocontent_attendance_mobile .px-2 {
    display: none !important;
}

/* to make form-check-input border visible */
.form-check .form-check-input:not(:disabled){
    border: 1px solid gray;
}