/*------------------------------------------------------------------
Project: laundry
Author: Webotix    
Last change: 05/19/2024  
-------------------------------------------------------------------*/
/************************ 1.Default CSS ***************************/
body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    height: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--primary-color);
    padding-right: 0 !important;
}

@font-face {
    font-family: "Satoshi";
    src: url('../font/Satoshi-Medium.ttf');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

ul {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
}

p {
    font-family: "Satoshi";
    font-weight: 500;
}

button {
    border: none;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: #FFF;
}
a.disabled {
    pointer-events: none;
    opacity: 0.65;
    cursor: default;
  }

:root {
    --primary-color: #FFF;
    --primary-blue:#0844A8;
    --text-color: #0F0F0F;
    --sub-text-color: #555;
    --border-colors: #00184214;
    --downarrowlight:url(../images/down-arrow-light.svg);
    --apple-icon: brightness(0) saturate(100%) invert(0%) sepia(99%) saturate(5%) hue-rotate(317deg) brightness(103%) contrast(103%);
    --sign-in-bg: #E4FFEE;
    --cal-icon: brightness(0) saturate(100%) invert(0%) sepia(23%) saturate(2539%) hue-rotate(118deg) brightness(92%) contrast(89%);
    --language-color: #FFF;
    --visa-color: #172B85;
    --box-color: #FFFFFF;
    --border-colors-second: #F5F5F5;
    --dots-img: brightness(0) saturate(100%) invert(100%) sepia(19%) saturate(5777%) hue-rotate(182deg) brightness(120%) contrast(88%);
    --order-number:#00112E;
    --brown:#6A4E07;
    --dark-green:#0E5B02;
    --indigo:#005B78;
    --violet:#610247;
    --maroon:#720000;
    --red:#FF0000;
    --yellow:#fff700;
    --green:#00ff5e;
    --blue:#1D63DB;
    --orange-bg:#FF7A00;
    --orange-text:#FF7A00;
    --orange:#FF8900;
    --green-text:#4BD136;
    --dark-green-text:#04461E;
    --green-bg:#4BD136;
    --pink-text:#EE1F76;
    --dark:#000;
    --dark-secondary:#1A1A1A;
    --dark-3rd:#1A1A1A;
    --dark-thrd:#252525;
    --light-black:#252525;
    --sky-blue:#00FFF0;
    --text-white:#ffff;
    --dark-light:#181818;
    --dark-primary:#303030;
    --blue-dark:#001842;
    --theme-blue:#029fd5;
    --bg-yellow:#FAEA25;
    --bg-red : #FE1F1F;
    --bg-white: #DFDFDF;
    --ash-color: #DFDFDF;
    --bg-green: #00E074;
    --bg-dark-green: #04461E;
    --bg-gray: #676767;
    --bg-dark-gray: #525252;
    --dark-custom:#383838;

    --bg-pink: #DD1B6C;
    --darkgey:#27425F;
    --bggray-badge:#DFDFDF;
    --bg-gray-text:#27425F;
    --bg-gray-light:#C4C4C4;
    --light-yellow:#DCCE21;
    --graylight:#A3A3A3;
    --dull-orange:#F8C566;
    --black-violet:#680099 

}

.radius-10{
    border-radius: 10px !important;
}


.dark-mode {
    --primary-color: #121212;
    --text-color: #FFF;
    --sub-text-color: #A0A0A0;
    --border-colors: #1D1D1D;
    --apple-icon: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(245deg) brightness(104%) contrast(104%);
    --sign-in-bg: #1D1D1D;
    --cal-icon: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(79deg) brightness(102%) contrast(104%);
    --language-color: #0F0F0F;
    --visa-color: #FFFF;
    --box-color: #1D1D1D;
    --border-colors-second: #121212;
    --dots-img: brightness(0) saturate(100%) invert(10%) sepia(0%) saturate(2679%) hue-rotate(249deg) brightness(96%) contrast(95%);
}

/************************ 2.Splash Screen CSS ***************************/
.splash-screen-logo {
    display: block;
    text-align: center;
}

.loader-mask,
.loader-mask1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
    z-index: 99999;
}

.dots_pattern_img1 {
    position: absolute;
    top: 0;
}

.hekko {
    filter: var(--dots-img);
}

.dots_pattern_img2 {
    position: absolute;
    bottom: 0;
}

#splash-screen-page {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boarding-title {
    margin-bottom: 40px;
}

.logo_img {
    max-width: 100%;
}

.laundryGPT {
    color: var(--text-color);
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    padding: 16px 0;
}

.meets {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/************************ 3.Onboarding Screen CSS ***************************/
.Image-unscreen {
    padding-bottom: 70px;
    padding-top: 71px;
    max-width: 100%;
}

.welcome_to_laundry_text {
    color: var(--text-color);
    text-align: center;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    padding-bottom: 15px;
}

.proin {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.Image-unscreen_main {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.skip_btn-onboading {
    color: #FFF;
    text-align: right;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding: 0 16px;
    padding-top: 30px;
}

.skip_btn-onboading a {
    color: red;
}

.Onboarding-Screen-1-full {
    position: relative;
    height: 100vh;
}

.carousel.onboarding-slider .Onboarding-Screen-1 img {
    width: 100% !important;
    height: 100% !important;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.custom-slider-dots {
    width: 8px !important;
    height: 8px !important;
    border-radius: 8px !important;
    border: none !important;
}

.custom-slider-btn .active {
    width: 28px !important;
    height: 8px !important;
}

.custom-slider-btn {
    position: absolute;
    right: 0;
    bottom: 140px;
    z-index: 2;
    padding: 0;
    margin: 0 !important;
    list-style: none;
    height: fit-content;
}

.onboarding-slider .carousel-indicators [data-bs-target] {
    background: var(--text-color) !important;
    margin-right: 5px;
    margin-left: 5px;
}

.boarding-title h1 {
    color: #FFF;
    text-align: center;
    font-family: Space Grotesk;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.bottom-fix-btn {
    max-width: 343px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
    border-radius: 12px;
    background: var(--4, #00D061);
    padding: 18px 0px;
    cursor: pointer;
}

.onboarding-next-btn {
    position: fixed;
    bottom: 20px;
}

.onboarding-next-btn-slider {
    position: fixed;
    bottom: 20px;
}

/************************ 4.All Screen Page loader CSS ***************************/
.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--primary-color);
}

.loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shapes {
    width: 44.8px;
    height: 44.8px;
    color: #2aeb84;
    position: relative;
    background: radial-gradient(11.2px, currentColor 94%, #0000);
}

.shapes:before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(10.08px at bottom right, #0000 94%, currentColor) top left,
        radial-gradient(10.08px at bottom left, #0000 94%, currentColor) top right,
        radial-gradient(10.08px at top right, #0000 94%, currentColor) bottom left,
        radial-gradient(10.08px at top left, #0000 94%, currentColor) bottom right;
    background-size: 22.4px 22.4px;
    background-repeat: no-repeat;
    animation: shapes-77ngqcmd 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes shapes-77ngqcmd {
    33% {
        inset: -11.2px;
        transform: rotate(0deg);
    }

    66% {
        inset: -11.2px;
        transform: rotate(90deg);
    }

    100% {
        inset: 0;
        transform: rotate(90deg);
    }
}

/************************ 5.Sticky Header CSS ***************************/
#top-header,
#top-navbar {
    max-width: 600px;
}

.fixed {
    position: fixed;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    top: 0%;
    -webkit-box-shadow: 0 0 22px -4px rgb(0 0 0 / 17%);
    box-shadow: 0 0 22px -4px rgb(0 0 0 / 17%);
    -webkit-animation: fixedheader 600ms ease 0ms 1 forwards;
    animation: fixedheader 600ms ease 0ms 1 forwards;
}

body::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

::-webkit-scrollbar {
    width: 0px;
}

@keyframes fixedheader {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

#top-navbar.fixed {
    background-color: #00D061;
    padding-top: 15px;
    padding-bottom: 15px;
}

/************************ 6.let-you-screen-in CSS ***************************/
.let-you-page-main {
    position: relative;
    background-color: var(--sign-in-bg);
    height: 100vh;
}

.let-you-screen-main {
    background-image: url('../images/let-you-screen-main-img.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    height: 375px;
    position: relative;
    background-color: #00D061;
}

body.dark-mode .let-you-screen-main {
    background-image: url('../images/let-you-screen-main-img-dark.jpg');
}

.laundry_img_main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.footer_box {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue);
}

.laundry_img {
    background-color: var(--theme-blue);
    padding: 16px;
    border-radius: 24px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
}

.back-btn {
    padding-top: 30px;
    display: flex;
    align-items: center;
}

.back-btn2 {
    padding-left: 12px;
    padding-right: 12px;
}
.head-color{
    font-weight: lighter;
}
.head-color .bold{
    font-weight: 800;
}
.back-btn h1 {
    color: var(--blue);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-left: 12px;
}

.lets_you_in_box {
    padding: 32px 16px;
    background-color: var(--primary-color);
    border-radius: 24px;
    z-index: 50;
    position: absolute;
    width: calc(100% - 24px);
    transform: translate(0%, 50%);
}

#mobile:focus {
    box-shadow: none !important;
}

.lets_you_in_box2 {
    top: 85px;
}

.lets_you_in_box3 {
    top: 45px;
}

.lets_you_in_box4 {
    top: 10px;
}

.lets_you_in_text {
    text-align: center;
    color: var(--text-color);
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    line-height: 36px;
}

.icons_main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px 0;
}

.icons_main2 {
    padding-bottom: 0;
}

.icons {
    border: 2px solid var(--border-colors);
    padding: 12px;
    border-radius: 8px;
}

.apple-main {
    border: 2px solid var(--border-colors);
    padding: 12px;
    border-radius: 8px;
}

.apple {
    filter: var(--apple-icon);
}

.or {
    text-align: center;
    position: relative;
}

.or p {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    display: inline-block;
    background-color: var(--primary-color);
    padding: 0 10px;
    position: relative;
    z-index: 1;
}

.or::before,
.or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 50%;
    height: 2px;
    background-color: var(--border-colors);
    z-index: 0;
}

.or::before {
    left: 0;
}

.or::after {
    right: 0;
}

.sign_with_pass_btn {
    padding: 16px 0;
    width: 100%;
    /*background-color: #00D061;*/
    border-radius: 12px;
    /*color: var(--1, #FFF);*/
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-top: 24px;
}

#let-you-footer {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 600px;
    bottom: 0;
    padding: 16px 0;
    z-index: 40;
}

.block-footer p {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    line-height: 24px;
    padding: 0 16px;
}
.block-footer img{
    width: 120px;
}

.block-footer a {
    color: var(--text-color);
    font-weight: 700;
}

/************************ 7.Sign in CSS ***************************/
#or-id {
    margin-top: 24px;
}

.form-control {
    /* border: var(--border-colors);
    background: var(--border-colors); */
    height: 48px;
    border-radius: 12px;
    outline: none;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.form-group {
    padding-top: 24px;
}

.form-group input::placeholder {
    color: var(--sub-text-color);
}

.selected-dial-code {
    display: none !important;
}

.intl-tel-input .selected-flag .iti-arrow {
    position: absolute;
    top: 0;
    margin-top: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 0px solid transparent;
    border-top: 0px solid #555;
}

.intl-tel-input .selected-flag .iti-arrow::before {
    content: url(../images/angle-down.svg) !important;
    position: absolute;
    left: -34px;
    top: 12px;
    filter: var(--apple-icon);
}

.form-group input:focus {
    outline: none;
    background-color: var(--border-colors);
    color: var(--text-color);
}

.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag {
    width: 70px;
    border-radius: 12px 0 0 12px;
    background: var(--border-colors);
    font-size: 18px;
}

.input-group>.intl-tel-input.allow-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}

.input-group>.intl-tel-input.allow-dropdown>.flag-container {
    z-index: 4;
}

.intl-tel-input.separate-dial-code .selected-dial-code {
    display: table-cell;
    vertical-align: middle;
    padding-left: 22px;
}

::placeholder {
    color: var(--sub-text-color);
}

.ri-arrow-down-s-line {
    display: none;
}

/************************ 8.Sign Up CSS ***************************/
.person_detail_main {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 0 16px 0;
}

input.person_name {
    width: 100%;
    background: var(--border-colors);
    height: 48px;
    border-radius: 0 12px 12px 0;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
input.password {
    width: 100%;
    background: var(--border-colors);
    height: 48px;
    border-radius: 0 12px 12px 0;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
input.order-number {
    width: 100%;
    background: var(--border-colors);
    height: 48px;
    border-radius: 0 12px 12px 0;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}
.ri-user-3-line {
    font-size: 25px;
    background: var(--border-colors);
    height: 48px;
    border-radius: 12px 0 0 12px;
    padding: 7px 15px 0;
    color: var(--text-color);
}
.ri-lock-password-line {
    font-size: 25px;
    background: var(--border-colors);
    height: 48px;
    border-radius: 12px 0 0 12px;
    padding: 7px 15px 0;
    color: var(--text-color);
}
.ri-lock-order-number-line {
    font-size: 25px;
    background: var(--border-colors);
    height: 48px;
    border-radius: 12px 0 0 12px;
    padding: 7px 15px 0;
    color: var(--text-color);
}
/************************ 9.Verify-section-main CSS ***************************/
.verification-main {
    background-image: url('../images/let-you-screen-main-img.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #eeeeee;
    .process-detail-card.wash-card
    /*height: 300px;*/
}

body.dark-mode .verification-main {
    background-image: url('../images/let-you-screen-main-img-dark.jpg');
}

.verify-section-main {
    background-color: var(--primary-color);
    /* padding: 4px 17px 85px 16px; */
    padding: 4px 17px 112px 16px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 1px;
    border-radius: 24px 24px 0 0;
    position: relative;
    /* height: calc(85vh - 36px); */
    /* overflow-y: scroll; */
    /* overflow-x: hidden;*/
}

.verify-img {
    max-width: 100%;
    padding-bottom: 16px;
}

.sub-text {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    line-height: 24px;
}

.otp-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 24px 0;
}

.otp-field input {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 10px;
    text-align: center;
    border: transparent;
    background: var(--sign-in-bg);
    outline: none;
    transition: all 0.1s;
    font-family: Satoshi;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--text-color);
}

.otp-field input:focus {
    border: 2px solid #00D061;
    background: transparent;
}

.resend-otp {
    padding-bottom: 35px;
}

/************************ 10.Notification Allow CSS ***************************/
.notified {
    padding-bottom: 20px;
}

.Allow_notification_btn {
    position: fixed;
    bottom: 20px;
}

/************************ 11.Forget Password CSS ***************************/
.forget-pass {
    padding-bottom: 24px;
}

.form {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.form-item {
    position: relative;
    margin-bottom: 15px
}

.form-item2 {
    margin-bottom: 15px;
}

.form-item input {
    display: block;
    width: 100%;
    height: 64px;
    background: transparent;
    border: solid 2px var(--border-colors);
    transition: all .3s ease;
    padding-left: 80px;
    border-radius: 30px;
    outline: none;
    padding-top: 5px;
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.form-item input:focus {
    border: 2px solid #00D061;
}

.form-item label {
    position: absolute;
    cursor: text;
    z-index: 2;
    top: 33%;
    left: 70px;
    padding: 0 10px;
    color: var(--sub-text-color);
    transition: all .3s ease;
    font-family: Satoshi;
    font-weight: 500;
    line-height: 20px;
    font-size: 16px;
}

.form-item input:focus+label,
.form-item input:valid+label {
    font-size: 14px;
    top: 3px;
    color: #00D061 !important;
}

.form-item input:focus+label {
    color: var(--sub-text-color);
}

.mobile-message-main {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 48px;
    height: 48px;
    background-color: var(--border-colors);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/************************ 12.Confirm OTP CSS ***************************/
#countdowntimer {
    font-weight: 700;
    color: var(--text-color);
}

#countdowntimer::after {
    content: ' Sec';
}

/************************ 13.Create New Password CSS ***************************/
.new_password_input label {
    margin-bottom: 15px;
    width: 100%;
}

.new_password_input {
    width: 100%;
}

.new_password_input .form-item input {
    font-size: 18px;
    color: var(--text-color);
    background: transparent;
    height: 64px;
    width: 100%;
    border-radius: 12px;
    outline: none;
    border: none;
    background-color: var(--border-colors);
    padding: 8px 50px 0px 16px;
}

.form-item .info-person {
    position: absolute;
    cursor: text;
    z-index: 2;
    top: 33%;
    left: 5px;
    padding: 0 10px;
    color: var(--sub-text-color);
    transition: all .3s ease;
    font-family: Satoshi;
    font-weight: 500;
    line-height: 20px;
    font-size: 16px;
}

.sign-in-custom-input {
    margin-bottom: 25px !important;
}

i#eye,
i#eye1 {
    font-size: 20px;
    color: var(--sub-text-color);
    position: absolute;
    right: 16px;
    top: 35%;
    cursor: pointer;
}

/************************ 14.Personal Information CSS ***************************/
.camera_main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ri-camera-line {
    position: absolute;
    right: 0;
    bottom: 22px;
}

.camera-bg {
    fill: var(--text-color);
    cursor: pointer;
}

.camera {
    stroke: var(--primary-color);
}

.profile-pic {
    width: 200px;
    max-height: 200px;
    display: inline-block;
    max-width: 200px;
    height: auto;
    width: 100%;
}

.file-upload {
    display: none;
}
.item-upload-button{
    position: relative;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    padding: 13px;
    text-align: center;
}
.ImagePreview{
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.item-upload-button .item-upload{
    position: absolute;
    overflow: hidden;
    opacity: 0;
    top: 0;
    margin: 0 auto;
    left: 0;
    width: 100%;
}
.trash-btn img{
    width: 30px !important;
}

.circle-img-girl {
    border-radius: 100%;
    overflow: hidden;
    width: 120px;
    height: 120px;
    margin-top: 10px;
    margin-bottom: 24px;
}

path.edit-info-calender {
    stroke: var(--text-color);
}

input[type="date"] {
    text-transform: uppercase;
    font-size: 16px;
}


input[type=date]::-webkit-datetime-edit-text {
    color: var(--sub-text-color);
    font-size: 16px;
}

input[type=date]::-webkit-datetime-edit-month-field {
    color: var(--sub-text-color);
    font-size: 16px;
}

input[type=date]::-webkit-datetime-edit-day-field {
    color: var(--sub-text-color);
    font-size: 16px;
}

input[type=date]::-webkit-datetime-edit-year-field {
    color: var(--sub-text-color);
    font-size: 16px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 20px;
    filter: var(--cal-icon);
    font-size: 25px;
}

/************************ 15.Personal Information Loader Screen CSS ***************************/
.sk-fading-circle {
    width: 40px;
    height: 40px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: var(--text-color);
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

@keyframes sk-circleFadeDelay {

    0%,
    39%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg);
}

.sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg);
}

.sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

.sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

.modal {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.24) 100%);
    backdrop-filter: blur(2px);
    --bs-modal-bg: var(--primary-color);
}

.modal-content {
    border-radius: 24px;
}

/* Photo deletee Modal */
.photo-delete-modal .heading{
    color: #0844A8 !important;
    font-weight: 600;
}
.photo-delete-modal .modal-body button{
    border-radius: 36px;
}

.loader2 {
    text-align: center;
    margin-top: 32px;
}

.finger-modal-content .modal-body {
    padding: 24px 16px;
}

.finger-img-sec {
    display: flex;
    align-items: center;
    justify-content: center;
}

.congratulations {
    color: var(--text-color);
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    padding: 15px 0;
}

.few-sec {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 16px;
    line-height: 24px;
}

/************************ 16.Finger Print Scanner Screen CSS ***************************/
.scan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(..//images/border-1.png);
    width: 220px;
    height: 220px;
    background-size: 300px;
    background-repeat: no-repeat;
    background-size: cover;
}

.scan .fingerprint {
    position: relative;
    width: 220px;
    height: 220px;
    background: url(../images/finger-print-img-black.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-size: cover;
}

body.dark-mode .scan .fingerprint {
    background: url(../images/finger-print-img-white.png);
}

.scan .fingerprint::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/finger-print-img-black.png);
    background-size: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    animation: animate 4s ease-in-out infinite;
    filter: brightness(0) saturate(100%) invert(76%) sepia(45%) saturate(5258%) hue-rotate(100deg) brightness(92%) contrast(100%);
}

/************************ 16.Finger Print Scanner Screen CSS ***************************/


@keyframes animate {

    0%,
    100% {
        height: 0%;
    }

    50% {
        height: 100%;
    }
}

.scan .fingerprint::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00D061;
    border-radius: 8px;
    filter: drop-shadow(0 0 20px #00D061) drop-shadow(0 0 60px #00D061);
    animation: animate_line 4s ease-in-out infinite;
}

@keyframes animate_line {

    0%,
    100% {
        top: 0%;
    }

    50% {
        top: 100%;
    }
}

.scanner_main {
    height: calc(100vh - 35vh);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 20px;
}

.secure {
    padding-top: 10px;
    padding-bottom: 20px;
}

.finger_print_button {
    max-width: 343px;
    position: fixed;
    width: 100%;
    bottom: 80px;
}

.onboarding-next-btn-skip {
    position: fixed;
    bottom: 20px;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
    border-radius: 12px;
}

.onboarding-next-btn-skip a {
    color: var(--text-color);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

/************************ 17.Preferred Language Screen CSS ***************************/
.main-text-group {
    display: flex;
    flex-direction: column;
}

.facilitate {
    text-align: left;
}

.select-lang-sec {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 32px;
}

.lang-sec input[type="radio"] {
    display: none;
}

.lang-sec input[type="radio"]:checked+label {
    background: var(--text-color);
    border-radius: 8px;
    color: var(--language-color);
    border: 2px solid transparent;
}

label.custom-radio-sel-lang {
    padding: 11px 16px;
    border: 2px solid var(--border-colors);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-color);
    text-align: center;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.hey-jessica {
    color: var(--text-color);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    padding: 10px 0 16px 0;
}

.lang-sec input[type="checkbox"] {
    display: none;
}

.lang-sec input[type="checkbox"]:checked+label {
    background: var(--text-color);
    border-radius: 8px;
    color: var(--language-color);
    border: 2px solid transparent;
}

.finger-print-sec-btn,
.finger-print-sec-btn2 {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    margin-bottom: 20px;
}

.finger-print-sec-btn-wrapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.defect-skip-btn a,
.defect-skip-btn button {
    width: 163px;
    /*height: 44px;*/
    border-radius: 51px;
    background: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.print-skip-btn a,
.print-skip-btn button {
    width: 163px;
    height: 48px;
    border-radius: 8px;
    background: var(--border-colors);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.print-next-btn a {
    width: 163px;
    /* height: 44px; */
    border-radius: 40px;
    background: #10DB79;
    /* background: #00D061; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.upload-btn a {
    width:100%;
    height: 48px;
    border-radius: 8px;
    background: var(--orange-bg);
    display: flex;
    margin-bottom: 13px;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.interested {
    padding-top: 10px;
    text-align: left;
}

/************************ 18.Reason Screen CSS ***************************/
.change-lan-sec,
.change-lan-sec-end {
    padding: 17px 0px !important;
    border-bottom: 2px solid var(--border-colors);
}

.change-lan-sec-start {
    border-top: 2px solid var(--border-colors);
    margin-top: 24px;
}

.form-check-input.custom-input {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    /* border: 2px solid #00D061; */
    border: 2px solid var(--blue);
    float: right !important;
    cursor: pointer;
}


.form-check-input.custom-input2 {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid #fff;
    float: right !important;
    cursor: pointer;
}
.form-check-container .form-check-input.custom-input2{
    width: 12px !important;
    height: 12px !important;
}
.form-check-input.custom-input2-lg {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid #fff;
    float: right !important;
    cursor: pointer;
}


.form-check-input.custom-input:focus,
.form-check-input.custom-input2:focus {
    box-shadow: none !important;
}

.form-check-label.custom-lable {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
}

.currency-svg {
    stroke: var(--sub-text-color);
}

.form-check-input:checked+.form-check-label .currency-svg {
    stroke: var(--text-color);
}

.form-check-label {
    color: var(--sub-text-color);
}
.input-viewonly{
    width: 100%;
    background: transparent;
    border: 0;
    color: #fff;
    text-align: center;
    margin-bottom: 0;
}
.form-check-container.viewonly{
    font-size: 12px !important;

}
.form-check-input:checked+.form-check-label {
    color: var(--text-color);
}

.form-check-input.custom-input:checked {
    background: var(--language-color);
    background-image: url(../images/lang-select.svg);
    background-size: cover;
    width: 20px !important;
    height: 20px !important;
    border: none;
}

.form-check-input.custom-input2:checked {
    background: transparent;
    background-image: url(../images/icons/check.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    width: 20px !important;
    height: 20px !important;
    /* border: none; */
}
.form-check-input.custom-input2-lg:checked {
    background: transparent;
    background-image: url(../images/icons/check.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    width: 20px !important;
    height: 20px !important;
    /* border: none; */
}
.form-check-container .form-check-input.custom-input2:checked{
    width: 12px !important;
    height: 12px !important;
    background-size: 90%;

}

/************************ 19.laundry GPT HOME Screen CSS ***************************/
.laundry-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.onboarding-next-btn-home {
    position: fixed;
    bottom: 20px;
}

.logo-home {
    width: 36px;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(245deg) brightness(104%) contrast(104%);
}

.notification-bell-main {
    display: flex;
    gap: 3px;
    position: relative;
}

.notification-bell {
    position: relative;
}

.total_notification {
    background-color: #FF484D;
    position: absolute;
    top: -5px;
    right: 30px;
    width: 15px;
    height: 15px;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    color: #FFF;
}

.hello-jessica {
    color: var(--language-color);
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    padding-top: 36px;
}

.wave {
    transform-origin: 70% 70%;
    display: inline-block;
    animation-name: wave-animation;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }

    10% {
        transform: rotate(14.0deg)
    }

    20% {
        transform: rotate(-8.0deg)
    }

    30% {
        transform: rotate(14.0deg)
    }

    40% {
        transform: rotate(-4.0deg)
    }

    50% {
        transform: rotate(10.0deg)
    }

    60% {
        transform: rotate(0.0deg)
    }

    100% {
        transform: rotate(0.0deg)
    }
}

.have-fun {
    color: var(--language-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 0;
}

.conversation {
    color: var(--language-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 12px;
}

.laundry-home-section-main {
    background-color: var(--primary-color);
    padding: 16px 16px 0 16px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-radius: 24px 24px 0 0;
    position: relative;
    height: calc(100vh - 240px);
}

.laundry-box-main {
    /* background-color: var(--order-number); */
    background-color: var(--blue-dark);

    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12px;
    /* margin-bottom: 8px; */
    padding-top: 5px;
}


.print-continue-btn-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.laundry-pluse-text {
    color: var(--box-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
}

.unlock {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.plus-box-text-main {
    padding: 0 10px ; 
}

.user-dashboard-box{
    background-color: var(--order-number);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    margin-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}
.unlock-user {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    line-height: normal;
}
.laundry-user-count-text {
    color: var(--box-color);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height:1.5;
    text-align: center;
}

.plus-robort {
    border-radius: 0 0 12px 0;
    max-width: 100%;
}

.upgrades-btn-main {
    padding: 12px 15px;
    background-color: var(--language-color);
    border-radius: 8px;
    color: #00D061;
    margin-top: 16px;
}

.plus-robort-main {
    height: 100%;
    display: flex;
}

.backgroundOverlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    opacity: .50;
    filter: alpha(opacity=50);
    -moz-opacity: .50;
    z-index: 101;
    display: none;
}

.delayedPopupWindow {
    display: none;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    z-index: 102;
    padding: 16px;
    margin: 0 auto;
    border-radius: 24px 24px 0 0;
}

#btnClose {
    width: 100%;
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: right;
    text-decoration: none;
    color: #00D061;
    font-size: 30px;
}

.formDescription {
    text-align: center;
}

.formDescription img {
    width: 100px;
    height: 100px;
}

.formDescription h3 {
    display: block;
    font-size: 25px;
    font-weight: 600;
    color: var(--text-color);
    padding: 16px 0;
}

.formDescription p {
    margin-bottom: 15px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    color: var(--sub-text-color);
    text-align: center;
}

.home-scrren-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-process {
    font-size: 18px;
    background-color: #00D061;
    padding: 14px 25px;
    border: none;
    outline: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.btn-ring {
    display: none;
}

.btn-ring:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: ring 1.2s linear infinite;
}

@keyframes ring {
    0% {
        transform: rotate(0deg);
    }

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

/************************ 20.laundry GPT Plus Subscription Screen CSS ***************************/
.premium-features-main {
    display: flex;
    gap: 16px;
    padding-bottom: 25px;
}

.gpt-plus {
    padding-bottom: 24px;
}

.premium-features-main h3 {
    color: var(--text-color);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 5px;
}

.access {
    text-align: left;
}

.until-canceled {
    padding-bottom: 24px;
    position: fixed;
    bottom: 80px;
}

.onboarding-next-btn-Subscribe {
    position: fixed;
    bottom: 20px;
}

/************************ 21.Payment Method screen ***************************/
.checkout-modal-lbl-payment {
    padding: 24px 0;
    display: flex;
    align-items: center;
    padding-right: 30px;
    cursor: pointer;
}

.bank-america-text {
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.america-card-number {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.payment-type {
    border: 1px solid var(--border-colors);
    padding: 8px 21px;
    border-radius: 4px;
}

.visa {
    fill: var(--visa-color);
}

.america-card-active {
    color: #00D061;
}

.america-card-inactive {
    color: #FF484D;
}

.card-text-america {
    padding-left: 16px;
}

.custom-radio {
    position: relative;
    margin-bottom: 0;
}

.border-bottom {
    border-bottom: 2px solid var(--border-colors) !important;
}

.form-check-input {
    margin-top: 0;
    background: transparent;
}

.form-check-input-radio:checked[type=radio] {
    outline: 2px solid #FF484D;
    outline-offset: 4px;
    background: #FF484D !important;
    width: 11px;
    height: 11px;
    margin-right: 5px;
    border: 1px solid #FF484D !important;
}

.form-check .form-check-input-radio {
    border: 2px solid #00D061;
    background-color: transparent;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
}

.custom-radio input {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.new-card-link-btn-main {
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-card-link-btn {
    background-color: var(--sign-in-bg);
    border: none;
    text-align: center;
    width: 100%;
    padding: 18px 0;
    color: #00D061;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-radius: 12px;
    margin: 18px 0;
}

.onboarding-next-btn-new-payment {
    position: fixed;
    bottom: 20px;
}

.payment_method_bottom {
    margin-bottom: 25px;
}

.apple-pay {
    fill: var(--text-color);
}

/************************ 22.Subscription Screen Css ***************************/
.subscription_payment-main {
    background-color: var(--primary-color);
    padding: 16px 16px 0 16px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-radius: 24px 24px 0 0;
    position: relative;
    height: calc(100vh - 85px);
}

.subscription-laundry-logo-main {
    display: flex;
    align-items: center;
    justify-content: center;
}

.subscription-laundry-logo {
    margin-top: 10px;
    margin-bottom: 24px;
}

.subscription-text {
    color: var(--text-color);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
}

.subscription-date {
    font-size: 14px;
    padding-top: 8px;
}

.bank-card {
    text-align: left;
    font-size: 14px;
}

.twinty-five {
    color: var(--text-color);
    text-align: center;
    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 48px;
    padding: 32px 0;
}

.choose-card-main {
    display: flex;
    width: 100%;
}

.down-arrow-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 24px;
}

.fa-angle-down {
    font-size: 24px;
    color: var(--text-color);
    float: right;
}

.promo-code {
    padding-bottom: 10px;
}

.enter_code {
    margin-bottom: 10px;
}

.pop-up-method {
    font-size: 20px;
    color: var(--text-color);
}

/************************ 23.Thank You For Subscripation Screen Css ***************************/
.thank-you-subscriptions {
    color: var(--text-color);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    padding-bottom: 12px;
}

.tellus {
    padding-bottom: 20px;
}

.try_again_button {
    max-width: 343px;
    position: fixed;
    width: 100%;
    bottom: 90px;
    z-index: 5;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    border-radius: 12px;
    background: var(--sign-in-bg);
    padding: 18px 0px;
    cursor: pointer;
}

.try_again_button a {
    color: #00D061;
}

.go-to-home {
    max-width: 343px;
    position: fixed;
    width: 100%;
    bottom: 20px;
    z-index: 5;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #FFF;
    border-radius: 12px;
    background: var(--4, #00D061);
    padding: 18px 0px;
    cursor: pointer;
}

.alert-main {
    background-color: var(--primary-color);
    padding: 16px 16px 0 16px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-radius: 24px 24px 0 0;
    position: relative;
    height: calc(100vh - 85px);
}

/************************ 24.laundry Chat Screen Css ***************************/
.laundry-chat-AI-main {
    background-color: var(--primary-color);
    padding: 16px 16px 0 16px;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border-radius: 24px 24px 0 0;
    position: relative;
    height: calc(100vh - 85px);
}

.chat {
    position: relative;
    width: 100%;
    height: 100vh;
    margin-bottom: 20px;
    z-index: 10;
    overflow: hidden;
    background: transparent;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.chat-title .avatar {
    width: 64px;
    height: 64px;
}

.chat-title .avatar img {
    width: 100%;
    height: auto;
}

.messages {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.messages .messages-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 101%;
    width: 100%;
}

.messages .message {
    clear: both;
    float: left;
    padding: 9px 12px;
    border-radius: 8px 8px 8px 0;
    background: #E4FFEE;
    position: relative;
    border: none;
    color: var(--2, #0F0F0F);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    margin: 15px 0 20px 0;
}

.messages .message .timestamp {
    position: absolute;
    bottom: -18px;
    color: var(--sub-text-color);
    right: 0;
    font-family: Satoshi;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    width: 50px;
}

.mCSB_inside>.mCSB_container {
    margin-right: 10px;
}

.messages .message .avatar {
    position: absolute;
    z-index: 1;
    bottom: -15px;
    left: -35px;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.messages .message .avatar img {
    width: 100%;
    height: auto;
}

.messages .message.message-personal {
    float: right;
    text-align: right;
    background: #00D061;
    border: none;
    border-radius: 8px 8px 0 8px;
    color: #FFF;
    text-align: right;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 20px;
}

.message-box .message-input:focus {
    outline: none !important;
    border: 1px solid #00D061;
    background-color: #E4FFEE;
    color: #0F0F0F;
    border-radius: 8px;
}

.messages .message.new {
    transform: scale(0);
    transform-origin: 0 0;
    -webkit-animation: bounce 500ms linear both;
    animation: bounce 500ms linear both;
}

.messages .message.loading span {
    display: inline-block;
    font-size: 0;
    width: 20px;
    height: 10px;
    position: relative;
}

.messages .message.loading::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #888;
    z-index: 2;
    margin-top: 4px;
    border: none;
    animation: wave 1.3s linear infinite;
}

.messages .message.loading span::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #888;
    z-index: 2;
    margin-top: 4px;
    margin-left: 4px;
    animation: wave 1.3s linear infinite;
    animation-delay: -1.1s;
}

.messages .message.loading span::after {
    position: relative;
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #888;
    border-radius: 50%;
    z-index: 2;
    margin-top: 4px;
    margin-left: 4px;
    animation: wave 1.3s linear infinite;
    animation-delay: -0.9s;
}

.message-box {
    border: none;
    position: relative;
    border-radius: 10px;
    width: 100%;
}

.specker {
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
    stroke: var(--sub-text-color);
}

.specker-file:focus {
    stroke: #121212;
}

.chat-input {
    display: flex;
    align-items: stretch;
    gap: 12px;
    justify-content: center;
}

.send-icons {
    stroke: white;
    stroke-width: 2px;
    stroke-linecap: round;
}

.message-box .message-input {
    background: none;
    border: 1px solid transparent;
    outline: none !important;
    resize: none;
    font-size: 16px;
    height: 48px;
    margin: 0;
    padding-right: 20px;
    width: 100%;
    color: var(--sub-text-color);
    background: var(--border-colors);
    border-radius: 8px;
    padding: 10px 12px;
}

.message-box textarea:focus:-webkit-placeholder {
    color: transparent;
}

.message-submit {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    padding: 0;
    background-color: var(--text-color);
}

.icon-send-message {
    stroke: var(--language-color);
}

.mCSB_scrollTools {
    margin: 1px -3px 1px 0;
    opacity: 0;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

@-webkit-keyframes bounce {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@keyframes bounce {
    0% {
        transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    4.7% {
        transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    9.41% {
        transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    14.11% {
        transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    18.72% {
        transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    24.32% {
        transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    29.93% {
        transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    35.54% {
        transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    41.04% {
        transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    52.15% {
        transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    63.26% {
        transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    85.49% {
        transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }

    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
}

@-webkit-keyframes wave {

    0%,
    60%,
    100% {
        transform: initial;
    }

    30% {
        transform: translateY(-15px);
    }
}

@keyframes wave {

    0%,
    60%,
    100% {
        transform: initial;
    }

    30% {
        transform: translateY(-15px);
    }
}

.chat-menu {
    display: flex;
}

/************************ 25.The Side Navigation Menu Chat Screen Css ***************************/
.chat-sidenav-icon {
    stroke: var(--text-color);
}

.chat-menu-svg {
    margin-right: 8px;
}

#offcanvasRight {
    height: 200px;
    width: 170px;
    margin-top: 70px;
    margin-right: 16px;
    padding: 0;
    background-color: var(--box-color);
    box-shadow: 0px 0px 23px -11px black;
    border-radius: 12px;
}

#offcanvasRight .offcanvas-backdrop {
    background: transparent;
    backdrop-filter: blur(0px);
    background-color: transparent;
}

#offcanvasRight .offcanvas-body {
    padding: 0 12px;
}

.sidenav .offcanvas-backdrop.show {
    opacity: 0;
}

.sidenav a {
    text-decoration: none;
    color: var(--text-color);
    display: block;
    transition: 0.3s;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding: 12px 0;
}

.space {
    border-bottom: 2px solid var(--border-colors-second);
}

.laundry-chat-menu-main {
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 12px;
    padding-right: 12px;
}

.laundry-chat-menu-main h1 {
    color: var(--1, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-left: 12px;
}

.chat-menu-img {
    cursor: pointer;
}

.end-session {
    padding: 18px 0;
    border: none;
    border-radius: 12px;
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.session-btn {
    background: #00D061;
    color: #fff;
    margin-bottom: 12px;
    margin-top: 32px;
}

.cancel-btn {
    background: var(--sign-in-bg);
    color: #00D061;
}

.session-btn-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/************************ 26.Notification Screen Css ***************************/
.security-main {
    margin-top: 12px;
}

.notification-security-box-sub {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-security-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.security-update-text {
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    padding-bottom: 5px;
}

.today-text {
    color: var(--sub-text-color);
    font-size: 14px;
    font-style: normal;
    line-height: 18px;
}

.new-btn {
    padding: 8px 12px;
    background: #FF484D;
    color: #FFFFFF;
    border-radius: 4px;
}

.factor {
    font-size: 12px;
    padding: 12px 0;
    border-bottom: 2px solid var(--border-colors);
}

/************************ 27.Setting Screen Css ***************************/
.settings-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-colors);
    margin-bottom: 24px;
}

.settings-main-sub {
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu-girl-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.smith {
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.smith-email {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.new-chat {
    font-weight: 500;
}

.setting-opestion-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.setting-opestion-space {
    padding: 8px 0;
    border-bottom: 2px solid var(--border-colors);
}

.setting-opestion-main-sub {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fa-angle-right {
    color: var(--text-color);
}

.offcanvas-body::-webkit-scrollbar {
    width: 4px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--sub-text-color);
    background-clip: content-box;
}

.offcanvas {
    background: var(--language-color);
}

.offcanvas-header .btn-close {
    margin-right: 0 !important;
}

/************************ 28.Switch Button Dark Light Mode Css ***************************/
.switch {
    position: relative;
    right: 45px;
}

.switch .slider {
    position: absolute;
    height: 26px;
    width: 45px;
    border-radius: 30px;
    background-color: transparent;
    border: 2px solid var(--border-colors);
    cursor: pointer;
    transition: 0.5s;
    z-index: 99;
}

.switch .slider:before {
    position: absolute;
    left: 2px;
    bottom: 0;
    height: 22px;
    width: 22px;
    content: "";
    border-radius: 50%;
    transition: 0.5s;
    border-radius: 22px;
    border: 0.5px solid var(--border-colors);
    background: #FFF;
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.05),
        0px 1px 1px 0px rgba(0, 0, 0, 0.08),
        0px 3px 8px 0px rgba(0, 0, 0, 0.08);
}

#toggle {
    opacity: 0;
    touch-action: none;
}

#toggle:checked~.slider {
    background-color: #00D061;
}

#toggle:checked~.slider:before {
    background-color: transparent;
    box-shadow: inset -7px -2px 0 0px #FFFF;
    transform: translate(16px, 0px);
    border: 2px solid transparent;
}

#toggle:checked~.slide-block {
    left: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.version {
    color: var(--sub-text-color);
    font-size: 16px;
    font-style: normal;
    line-height: 20px;
    padding-left: 56px;
}

/************************ 29.History Scrren Css ***************************/
.active-chats {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.history-menu-img {
    filter: var(--apple-icon);
}

.chat-history-text {
    font-size: 12px;
}

.chat-history-text-main {
    padding: 8px 0;
}

.ended-chats {
    padding: 24px 0 0 0;
}

.history-bottom-btn {
    position: fixed;
    right: 10px;
    bottom: 30px;
}

.history-bottom {
    margin-bottom: 20px;
}

/************************ 30.Add New Card Screen Css ***************************/
.onboarding-next-btn-plus {
    position: fixed;
    bottom: 20px;
}

.custom-radio .svg-edit {
    position: absolute;
    right: 16px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.visa-card-img {
    max-width: 100%;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.custom-input-home3-form::placeholder {
    color: white;
}

#ui-datepicker-div {
    display: none;
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
    margin-top: 0.25rem;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.ui-datepicker-calendar thead th {
    padding: 0.25rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 400;
    color: #78909C;
}

.ui-datepicker-calendar tbody td {
    width: 2.5rem;
    text-align: center;
    padding: 0;
}

div#ui-datepicker-div {
    z-index: 500 !important;
}

.ui-datepicker-calendar tbody td a {
    display: block;
    border-radius: 0.25rem;
    line-height: 2rem;
    transition: 0.3s all;
    color: #546E7A;
    font-size: 0.875rem;
    text-decoration: none;
}

.ui-datepicker-calendar tbody td a:hover {
    background: #00d06138;
}

.ui-datepicker-calendar tbody td a.ui-state-active {
    background-color: #00D061;
    color: white;
}

.ui-datepicker-header a.ui-corner-all {
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 2rem;
    margin: 0.5rem;
    border-radius: 0.25rem;
    transition: 0.3s all;
}

.ui-datepicker-title {
    text-align: center;
    line-height: 32px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 500;
}

#new-card-inputs {
    margin-top: 20px;
}

.date-number-cvv {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.form-check-input-radio:checked+.checkout-modal-lbl-payment .payment-type {
    border-color: #FF484D;
}

.payment-type2 {
    border: 1px solid var(--border-colors);
    padding: 13px 0;
    border-radius: 4px;
    max-width: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-radio .connect-text {
    position: absolute;
    right: 0;
    top: 40px;
    bottom: 0;
    margin: auto;
}

.connect-text {
    color: var(--4, #00D061);
    text-align: right;
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.not-connect {
    color: var(--4, #FF484D);
}

.edit-info {
    font-size: 19px;
    color: var(--sub-text-color);
    position: relative;
    right: 16px;
    top: 0;
    cursor: pointer;
}

.edit-info-svg {
    stroke: var(--text-color);
}

.demo-visa {
    background-image: url(../images/demo_visa_card.png);
    background-position: center;
    background-repeat: no-repeat;
    max-height: 200px;
    height: 100%;
    max-width: 343px;
    width: 100%;
    margin: 0 auto;
    border-radius: 24px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-hidden-number {
    color: #FFF;
    font-size: 25px;
    font-weight: 400;
    line-height: 30px;
    font-family: "Satoshi";
}

.card-name-jessica {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    font-family: "Satoshi";
    text-transform: uppercase;
    width: 100%;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-date-cvv {
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    font-family: "Satoshi";
}

.card-name-jessica-main {
    display: flex;
    justify-content: space-around;
    column-gap: 25px;
}

.card-name-jessica-main-sub {
    display: flex;
    justify-content: space-around;
    column-gap: 25px;
}

/************************ 31.Security Screen Css ***************************/
.remember {
    color: var(--text-color);
    font-size: 16px;
    line-height: 24px;
}

.check-box {
    display: flex;
}

.swiches-toggle input[type="checkbox"] {
    position: relative;
    appearance: none;
    width: 40px;
    height: 24px;
    background: var(--sign-in-bg);
    border-radius: 50px;
    cursor: pointer;
    border: 2px solid var(--border-colors);
    transition: 0.4s;
}

.swiches-toggle input:checked[type="checkbox"] {
    background: #00D061;
}

.swiches-toggle input[type="checkbox"]::after {
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    top: 1px;
    left: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
    transform: scale(1.1);
    transition: 0.4s;
}

.swiches-toggle input:checked[type="checkbox"]::after {
    left: 46%;
}

.swiches-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-colors);
}

.security-bottom-btns {
    margin-top: 24px;
    margin-bottom: 16px;
}

/************************ 32.Marketing Preferences Screen Css ***************************/
.relevant {
    color: var(--sub-text-color);
    font-family: Poppins;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-colors);
    padding-top: 16px;
}

.news-text {
    color: var(--text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding-top: 16px;
    padding-bottom: 8px;
}

.send-important {
    color: var(--sub-text-color);
}

.will-notify {
    color: var(--text-color);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.currency-icon {
    padding-right: 8px;
}

.email-me {
    margin-bottom: 20px !important;
}

/************************ 33.Faq Screen ***************************/
.boder-top1 {
    border-bottom: 1px solid var(--border-colors);
    padding-top: 24px;
}

.nested-accordion {
    cursor: pointer;
    position: relative;
    padding-bottom: .5rem !important;
}

.nested-accordion .comment {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 0;
}

.nested-accordion h3 {
    color: var(--text-white);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.nested-accordion h3:before {
    content: '\271B';
    position: absolute;
    right: 10px;
    color: var(--text-white);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.nested-accordion h3.selected {
    color: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}

.nested-accordion h3.selected:before {
    content: '\005F';
    line-height: 3px;
    font-size: 20px;
    color: #ffffff;
}

.faq-txt1.selected:before {
    content: url('../images/angle-up.svg') !important;
    filter:invert(1);
    -webkit-filter: invert(0);
    width: 25px;
}

.faq-txt1:before {
    content: url('../images/angle-down.svg') !important;
    filter:invert(1);
    -webkit-filter:invert(1);
}

.boder-top {
    border-bottom: 1px solid var(--border-colors);
    padding: 24px 0;
}

.faq-txt1 {
    color: var(--text-white) !important;
    font-family: Satoshi !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    padding: 8px 0;
}

.faq-txt1.selected {
    color: #ffffff !important;
    font-family: Satoshi !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

/************************ 34.Data & Privacy Screen CSS ***************************/
.privacy_manage {
    color: var(--text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.permission {
    font-size: 16px;
    padding-bottom: 8px;
    font-weight: 500;
}

.keep {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.permission-box {
    border: 2px solid var(--border-colors);
    padding: 16px;
    border-radius: 12px;
    background: var(--box-color);
    margin-top: 16px;
}

.data {
    padding-top: 24px;
}

.form-check-input-radio2 {
    border: 2px solid var(--text-color) !important;
}

/************************ 35.About Screen CSS ***************************/
.about_text_content {
    padding: 10px 0 18px 0;
    border-bottom: 2px solid var(--border-colors);
}

.about-content {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 8px;
}

.follow_us {
    color: var(--text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin: 16px 0;
}

.media-icon-main {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 35px;
}

.media-icon-name {
    color: var(--sub-text-color);
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    padding-top: 12px;
}

/************************ 36.Feedback Screen CSS ***************************/
.feedback-sec-txt {
    border-radius: 8px;
    background: var(--border-colors);
    padding: 16px;
    display: flex;
    border: none;
    margin-top: 8px;
    width: 100%;
    font-family: Satoshi;
    color: var(--sub-text-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    outline: none;
}
.feedback-sec .admin-icon{
    width: 30px;
    padding: 0 05px 0 0;
}

.feedback-sec .label-text-size{
    font-size: 14px;
}
label.form-label{
    font-size: 12px !important;
}
label.feedback-lbl {
    color: var(--text-color);
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.feedback-tp:focus-visible {
    outline-width: 0 !important;
}

.menupage1-form-custom {
    width: 100%;
    border: navajowhite;
    color: #707070;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    background: #F0F0F0;
    border-radius: 12px;
    margin-top: 8px;
}

.feedback-tp {
    margin-top: 8px;
    margin-bottom: 12px;
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    width: 100%;
    resize: none;
    height: 135px;
    border: none;
    padding: 16px;
    background: var(--border-colors);
    border-radius: 12px;
}

.select-dropdown {
    position: relative;
    width: 100%;
    background: var(--border-colors);
    padding: 16px;
    background: var(--border-colors);
    color: var(--sub-text-color);
    font-family: Satoshi;
    border: none;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border-radius: 12px;
    outline: none;
    margin-top: 8px;
}

.select-dropdown__button .zmdi-chevron-down {
    position: absolute;
    right: 10px;
    top: 12px;
}

.select-dropdown__list {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out 0.3s;
    z-index: 2;
}

.select-dropdown__list.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1, 1);
    border: 1px solid var(--border-colors);
    border-radius: 8px;
    box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 3px 8px 0px rgba(0, 0, 0, 0.08);
}

.select-dropdown__list-item {
    display: block;
    list-style-type: none;
    padding: 10px 15px;
    background: var(--box-color);
    border-top: 1px solid #FFF;
    font-size: 15px;
    line-height: 1.4;
    font-family: Satoshi;
    cursor: pointer;
    color: var(--sub-text-color);
    transition: all ease-in-out 0.3s;
}

.fa-angle-down {
    color: var(--text-color);
}

.feedback-text-spacer {
    padding-top: 20px;
}

#feedback-screen {
    margin-bottom: 20px;
}

/************************ 37.Contact Us Screen CSS ***************************/
.contact-us-img {
    max-width: 343px;
    margin: 0 auto;
    width: 100%;
}

.contact-us-text-main {
    color: var(--text-color);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    padding-bottom: 12px;
    padding-top: 24px;
}

.trouble {
    color: var(--sub-text-color);
    text-align: center;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-bottom: 24px;
}

.contact-us-text {
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: var(--sign-in-bg);
    padding: 12px;
    margin-bottom: 10px;
}

.contact-us-text a {
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.contact-icon {
    padding-right: 12px;
}

/************************ 38.Friend Invite Screen CSS ***************************/
.friend-name {
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.friend-no {
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    margin-top: 8px;
}

.friend-no a {
    color: var(--sub-text-color);
}

.invite-img img {
    border-radius: 50px;
}

.invite-friend-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.invite-img {
    margin-right: 16px;
}

.custom-radio-sel-friend {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 61px;
    height: 34px;
    border-radius: 4px;
    border: 2px solid var(--text-color);
    cursor: pointer;
    color: var(--text-color);
    text-align: center;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
}

.friend-select input[type="checkbox"]:checked+label {
    border-radius: 4px;
    background: var(--text-color);
    color: var(--language-color);
    border: 2px solid transparent;
}

.friend-select input {
    display: none;
}

.friend-invite {
    margin-left: auto;
}

/************************ 39.Delete or Deactivate Screen CSS ***************************/
.leave-text {
    color: var(--sub-text-color);
    text-align: center;
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-bottom: 24px;
    border-bottom: 2px solid var(--border-colors);
}

.permission-box2 {
    margin-top: 24px;
}

.deactivate_your_account {
    text-align: left;
    padding-top: 16px;
    padding-bottom: 12px;
    border-bottom: none;
}

.deactivate-list li {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.deactivate-list {
    margin-left: 20px;
}

.leaving-box {
    padding: 16px 0;
    border-bottom: 1px solid var(--border-colors);
}

.tapping {
    color: var(--sub-text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    padding-top: 25px;
    margin-bottom: 35px;
}

.jesssmi {
    color: var(--text-color);
}

.permission-box-bottom {
    margin-bottom: 20px;
}

.onboarding-next-btn-plus2 {
    position: fixed;
    bottom: 20px;
}

/************************ 40.Log Out Screen CSS ***************************/
.offcanvas-backdrop {
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.56) 0%, rgba(18, 18, 18, 0.24) 100%);
    backdrop-filter: blur(2px);
}

button.text-reset {
    background: transparent;
    font-size: 25px;
    color: var(--text-color) !important;
    padding: 0;
}

.offcanvas-title {
    color: var(--text-color);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.offcanvas.offcanvas-bottom {
    border-radius: 24px 24px 0 0;
    padding: 12px 16px 30px 16px;
    height: 270px;
}

.logout-text-pop {
    color: var(--text-color);
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 16px;
}

.offcanvas.offcanvas-bottom .offcanvas-header {
    padding: 0;
    cursor: pointer;
}

.offcanvas.offcanvas-bottom .offcanvas-body small {
    padding: 0;
}

.sure-logout {
    color: var(--sub-text-color);
    text-align: center;
    font-family: Satoshi;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 24px;
}

.logout-button-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.logout-cancel {
    color: var(--4, #00D061);
    text-align: center;
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    padding: 18px 30px;
    border-radius: 12px;
    background-color: var(--sign-in-bg);
}

.yes-logot {
    background-color: #00D061;
    color: #FFFFFF;
    padding: 18px 20px;
}
.call-action{
    padding: 5px 9px;
    background-color: #00112E;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.footer-fixed button,
.footer-fixed a{
    font-size: 18px !important;
    border-radius: 50rem !important;
    padding: 0.75rem !important;
    cursor:pointer;
}



/* xcuston font */
    .font-10{
    font-size: 10px !important;
    }
    .font-11{
     font-size: 11px !important;
    }
    .font-12{
    font-size: 12px !important;
    }
    .font-14{
    font-size: 14px !important;
    }
    .font-16{
    font-size: 16px !important;
    }
    .font-18{
        font-size: 18px !important;
    }

    /* custum text-color */
.text-grey{
    color: #A3A3A3 !important;
}
.text-ash{
    color: var(--ash-color) !important;;
}
.text-cyan{
    color: #00E0FF !important;
}
.text-dull-orange{
    color: var(--dull-orange) !important;
}
.text-green{
    color: var(--bg-green) !important;
}


.bg-brown{
    background-color: var(--brown) !important;
}
.bg-dark-primary{
    background-color: var(--dark-primary) !important;
}

.bg-dark-green{
    background-color: var(--dark-green) !important;
}
.bg-dark-custom{
    background-color: var(--dark-custom);
}
.bg-dark-custom.active{
    background-color: var(--blue);
}
.bg-maroon{
    background-color: var(--maroon) !important;
}

.bg-indigo{
    background-color: var(--indigo) !important;
}

.bg-violet{
    background-color: var(--violet) !important;
}
.bg-black-violet{
    background-color: var(--black-violet) !important;
}
.darkbg{
    background-color:#000000;
}
.bg-light-black{
     background-color:var(--light-black) !important;
}
.bg-yellow{
    background-color: var(--bg-yellow) !important;
}
.bg-blue{
    background-color: var(--blue) !important;
}
.bg-light-blue{
    background-color: var(--theme-blue);
}
.bg-dark-blue{
    background-color: var(--blue-dark);
}
.light-yellow{
    background-color: var(--light-yellow)!important;
}
.bg-red {
    background-color: var(--red) !important;
}
.bg-white{
    background-color: var(--bg-white);
}
.bg-ash{
    background-color: var(--ash-color) !important;

}
.bg-dull-orange{
    background-color: var(--dull-orange) !important;
}
.bg-green{
    background-color: var(--bg-green) !important;
}
.bg-dark-green{
    background-color: var(--bg-dark-green) !important;
}
.bg-gray{
    background-color: var(--bg-gray) !important;
}
.bg-dark-gray{
    background-color: var(--bg-dark-gray) !important;
}
.bg-blue-gray{
    background-color: var(--bg-gray-text) !important;
}
.bg-pink{
    background-color: var(--bg-pink) !important;
}
.bg-orange{
    background-color: #FF8900 !important;
}
.bg-grey{
    background-color: #A3A3A3  !important;
}
.bg-cyan{
    background-color: #00E0FF  !important;
}
.graylightbg{
    background-color: var(--graylight);
}
.grayligh-text{
    color: var(--graylight);
}

/*card yellow*/
.bg-yellow.theme-card-inner,.bg-yellow .card-header{
    background-color: var(--bg-yellow)!important;
}
/*end card yellow*/
.bg-light-dark{
    background-color: var(--dark-light)!important;
}
.red-text{
    color:var(--red) !important;
}
.gray-text{
    color:var(--bg-gray) !important;
}
.red-bg{
    background-color: var(--red) !important;
}
.blue-text{
    color:var(--blue) !important;
}
.blue-bg{
    background-color: var(--blue);
}
.orange-text{
    color:var(--orange-text);
}
.orange-bg{
    background-color: var(--orange-bg);
}
.green-text{
    color: var(--green-text);
}
.dark-green-text{
    color: var(--dark-green-text) !important;
}
.green-bg{
    background-color: var(--green-bg);
}
.pink-text{
    color: var(--pink-text) !important;
}
.sky-blue{
    color: var( --sky-blue);
}
.blue-text2{
    color: var( --theme-blue);;
}
.sky-blue-bg{
    background-color: var( --theme-blue);
}
.text-blue{
    color: var(--blue);
}
.text-primary-blue{
    color: var(--primary-blue);
}
.text-light-grey{
    color: var(--blue) !important;
}
.text-yellow{
    color: var(--bg-yellow);
}
.font-size-m{
    font-size: 13px;
}
.bg-gray-light{
    background-color: var(--bg-gray-light);
}
.color-gray-light{
    color: var(--bg-gray-light);
}
.dark-gray{
    color: var(--darkgey) !important;
}
.bgdark-gray{
    background-color:var(--darkgey)!important;
}

.rounded100{
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    -ms-border-radius: 100px;
    -o-border-radius: 100px;
}
.card-white{
    padding: 5px;
    border: 0;
    box-shadow: -1px 2px 19.700000762939453px rgb(0 0 0 / 18%);
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.font-size-small{
    font-size: 16px;
    font-weight: 500;
}
.box-customer-detail{
    display: flex;
    padding: 0 9px;
}
.crown{
    width: 26px;
    padding: 0 4px;
}
.icon-a i{
    font-size: 14px;
    padding: 0 6px;
}
.font-size-xsmall{
    font-size: 14px;
    font-weight: 500;
}
.box-white-shadow3{
    display: block;
    filter: drop-shadow(4px -1px 19.700000762939453px rgba(0, 0, 0, 0.05000000074505806));
    border-radius: 13px;
    box-shadow:-1px 2px 19.700000762939453px rgb(0 0 0 / 18%);
    padding: 8px;
    margin: 0 auto;
}
.box-white-shadow3 img{
    text-align: center;
    margin: 0 auto;
    width: 30px;
    display: block;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}
.font-size-xm{
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    display: block;
}
.img-radius{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin: 0 auto;
    display: block;
}
/*theme-card-inner*/
.theme-card-inner{
    position: relative;
    border:0;
    background-color: var(--dark-thrd);
    border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
}
.theme-card-inner2{
    margin-bottom: 3rem !important;
}
.theme-card-inner3{
    /*margin-bottom: 6.5rem !important;*/
}
.theme-card-inner .card-header{
    border-radius: 18px 18px 15px 15px;
    display: flex;
    border:0;
    padding-top: 0;
    align-items: flex-end;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var( --dark-secondary);
    -webkit-border-radius: 18px 18px 15px 15px;
    -moz-border-radius: 18px 18px 15px 15px;
    -ms-border-radius: 18px 18px 15px 15px;
    -o-border-radius: 18px 18px 15px 15px;
}
.sorting-detail-card {
    margin-bottom: 6rem !important;
}
.classification {
    display: flex;
    align-items: center;
}
.classification img{
    /* width: 20%; */
    width: 20px;
}
.fs-large{
    font-size: 14px;
    padding: 0 5px;
}
.fs-medium{
    font-size: 11px;
}
.label-text-size{
    font-size: 11px;
}
.label-text-sizexs{
    font-size: 10px;
}
.bg-gray-badge{
    background-color: var(--bggray-badge);
}
.bg-gray-text{
    color: var(--bg-gray-text);
}
.gradient1{
    background: linear-gradient(96.28deg, #00FFFF -13.13%, #CCFF00 119.38%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-gradient-fluorescent{
    background: linear-gradient(96.28deg, #00FFFF -13.13%, #CCFF00 119.38%);
}
/*gradient*/
.gradient2{
    background: rgb(221,27,108);
background: linear-gradient(345deg, rgba(221,27,108,1) 0%, rgba(240,162,64,1) 100%);
}
.gradient3,.bg-gradient-info{
    background: rgb(5,192,251);
background: linear-gradient(158deg, rgba(5,192,251,1) 0%, rgba(39,66,95,1) 100%);
}
.gradient4,.bg-gradient-primary{
    background: rgb(6,98,255);
background: linear-gradient(127deg, rgba(6,98,255,1) 0%, rgba(107,19,161,1) 100%);
}

.gradient5,.bg-gradient-purple{
   background: linear-gradient(310deg, #7928ca, #ff0080);
}
.gradient6, .bg-gradient-pink{
    background: linear-gradient(98.48deg, #F20284 40.49%, #FDBD1B 109.75%);
 }
 .gradient7, .bg-gradient-gray{
    background-image: linear-gradient(270deg, #bab6b6 0%, #525252 40.49%);
 }
 .gradient8, .bg-gradient-green{
    background: linear-gradient(98.48deg, #37B80A -3.51%, #04461E 109.75%);
}

/* buttons */
.printBarcode-btn{
    font-size: 11px !important;
    /* font-size: 6px !important;
    font-weight: 600; */
}

/*yellow card*/
.badge-top.bg-yellow{
    display: block;
    position: relative;
    width: 55%;
    margin: 0 15px;
    padding: 0 5px;
    text-align: center;
    border-radius: 0px 0px 17px 17px;
}
.badge-top.bg-yellow {
    background-color: var(--yellow);
	float: left;
	position: relative;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.badge-top.bg-yellow:before,
.badge-top.bg-yellow:after {
	content: "";
	position: absolute;

	height: 10px;
	width:24px;

	top: 0;
}
.badge-top.bg-yellow:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bg-yellow);
    box-shadow: -16px 0 0 0   var(--bg-yellow);
}

.badge-top.bg-yellow:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-yellow);
    box-shadow: 16px 0 0 0   var(--bg-yellow);
}
/*yellow card*/
/*gay card*/
.badge-top.bg-gray-badge{
    display: block;
    position: relative;
    width: 55%;
    margin: 0 15px;
    padding: 0 5px;
    text-align: center;
    border-radius: 0px 0px 17px 17px;
}
.badge-top.bg-gray-badge{
    background-color: var(--bggray-badge);
    float: left;
	float: left;
	position: relative;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.badge-top.bg-gray-badge:before,
.badge-top.bg-gray-badge:after {
	content: "";
	position: absolute;

	height: 10px;
	width:24px;

	top: 0;
}
.badge-top.bg-gray-badge:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bggray-badge) !important;
    box-shadow: -16px 0 0 0   var(--bggray-badge) !important;
}

.badge-top.bg-gray-badge:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bggray-badge) !important;
    box-shadow: 16px 0 0 0   var(--bggray-badge) !important;
}
/*gay card end*/

/*yellow card inverse*/
.bg-gray-inverse{
    background-color: var(--bggray-badge) !important;
    color:var(--dark-gray)
}
.badge-top.bg-gray-inverse-badge{
	border-radius: 16px;
	float: left;
	position: relative;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: var(--bg-gray-text) !important;
	padding: 0 15px;
	text-align: center;
}

.badge-top.bg-gray-inverse-badge:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bg-gray-text) !important;
    box-shadow: -16px 0 0 0   var(--bg-gray-text) !important;
}

.badge-top.bg-gray-inverse-badge:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-gray-text) !important;
    box-shadow: 16px 0 0 0  var(--bg-gray-text) !important;
}
.bg-gray-inverse .box-type{
        background-color: var( --bg-gray-light);
        
    border-left: 1px solid var( --bg-gray-light);
}
.badge-top{
    width: 55% !important;
	border-radius: 16px;
	float: left;
	position: relative;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: var(--bg-gray-text);
	padding: 0 15px;
	text-align: center;

}
.badge-top::before,
.badge-top::after{
    content: "";
	position: absolute;

	height: 10px;
	width:24px;

	top: 0;
}

.badge-top:before,
.badge-top:after {
	content: "";
	position: absolute;

	height: 10px;
	width:24px;

	top: 0;
}
.badge-top:before{
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-gray-text);
    box-shadow: 16px 0 0 0  var(--bg-gray-text);
}
.badge-top:after{
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bg-gray-text);
    box-shadow: -16px 0 0 0   var(--bg-gray-text);
}
 .badge-top.bg-pink-inverse,
 .badge-top.bg-red-inverse,
 .badge-top.bg-grey-inverse {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
}
 .badge-top.bg-pink-inverse:after,
 .badge-top.bg-red-inverse:after,
 .badge-top.bg-grey-inverse:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 #f8f9fa;
    box-shadow: -16px 0 0 0   #f8f9fa;
}

 .badge-top.bg-pink-inverse:before,
 .badge-top.bg-red-inverse:before ,
 .badge-top.bg-grey-inverse:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 #f8f9fa;
    box-shadow: 16px 0 0 0  #f8f9fa;
}

.badge-top.bg-green-inverse {
    background-color: var(--bg-dark-green) !important;
    border-color: var(--bg-dark-green) !important;
}

.badge-top.bg-green-inverse:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bg-dark-green) !important;
    box-shadow: -16px 0 0 0  var(--bg-dark-green) !important;
}
.badge-top.bg-green-inverse:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-dark-green) !important;
    box-shadow: 16px 0 0 0 var(--bg-dark-green) !important;
}


.badge-top.bg-green {
    background-color: var(--bg-green) !important;
    border-color: var(--bg-green) !important;
    color: var(--dark-green-text) !important;

}

.badge-top.bg-green:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--bg-green) !important;
    box-shadow: -16px 0 0 0  var(--bg-green) !important;
}
.badge-top.bg-green:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-green) !important;
    box-shadow: 16px 0 0 0 var(--bg-green) !important;
}

.badge-top.bg-pink{
    background-color:  var(--bg-pink) !important;
    border-color: var(--bg-pink) !important;
    color: #FFF I !important;
}

.badge-top.bg-pink:after{
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0  var(--bg-pink);
    box-shadow: -16px 0 0 0   var(--bg-pink);
}

.badge-top.bg-pink:before{
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-pink);
    box-shadow: 16px 0 0 0   var(--bg-pink);
}

.badge-top.bg-red{
    background-color:  var(--red) !important;
    border-color: var(--red) !important;
    color: #FFF I !important;
}

.badge-top.bg-red::after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0  var(--red);
    box-shadow: -16px 0 0 0   var(--red);
}

.badge-top.bg-red::before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--red);
    box-shadow: 16px 0 0 0   var(--red);
}

.badge-top.bg-black-violet{
    background-color: var(--black-violet) !important;
    border-color: var(--black-violet) !important;
    color: #FFF I !important;
}

.badge-top.bg-black-violet::after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0  var(--black-violet);
    box-shadow: -16px 0 0 0   var(--black-violet);
}

.badge-top.bg-black-violet::before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--black-violet);
    box-shadow: 16px 0 0 0   var(--black-violet);
}

.badge-top.bg-gray{
    background-color:  var(--bg-gray) !important;
    border-color: var(--bg-gray) !important;
    color: #fff I !important;
}

.badge-top.bg-gray::after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0  var(--bg-gray);
    box-shadow: -16px 0 0 0   var(--bg-gray);
}

.badge-top.bg-gray::before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0 var(--bg-gray);
    box-shadow: 16px 0 0 0   var(--bg-gray);
}

/* #quality-check h6{
    font-size: 12px !important;
} */
.main-text-white *{
    color: #fff ;
}
.bg-dark-shade{
    background-color: #0000001F !important;
}
.bg-dark-secondary{
    background-color: #1A1A1A !important;
}
/*yellow card inverse*/
.badge-top.bg-yellow-inverse{
    display: block;
    position: relative;
    width: 55%;
    margin: 0 15px;
    padding: 0 5px;
    text-align: center;
    border-radius: 0px 0px 17px 17px;
    background-color: var(--bg-white);
}
.badge-top.bg-yellow-inverse {
	float: left;
	position: relative;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
    background-color: var(--blue);
}

.badge-top.bg-yellow-inverse:before,
.badge-top.bg-yellow-inverse:after {
	content: "";
	position: absolute;

	height: 10px;
	width:24px;

	top: 0;
}
.badge-top.bg-yellow-inverse:after {
    right: -24px;
    border-top-right-radius: 9px;
    border-top-left-radius: 43px;
    -webkit-box-shadow: -16px 0 0 0 var(--blue);
    box-shadow: -16px 0 0 0   var(--blue);
}

.badge-top.bg-yellow-inverse:before {
    left: -24px;
    border-top-right-radius:18px;
    border-top-left-radius:8px;
    -webkit-box-shadow: 16px 0 0 0  var(--blue);
    box-shadow: 16px 0 0 0    var(--blue);
}

.badge-top.bg-yellow-inverse2{
    background-color: var(--orange) !important;
}

.badge-top.bg-yellow-inverse2:after{
    -webkit-box-shadow: -16px 0 0 0  var(--orange);
    box-shadow: -16px 0 0 0    var(--orange);
}
.badge-top.bg-yellow-inverse2:before {
   
    -webkit-box-shadow: 16px 0 0 0  var(--orange);
    box-shadow: 16px 0 0 0    var(--orange);
}

.badge-top.bg-yellow-inverse-gray{
    background-color: #717171 !important;
}

.badge-top.bg-yellow-inverse-gray:after{
    -webkit-box-shadow: -16px 0 0 0  #717171;
    box-shadow: -16px 0 0 0    #717171;
}
.badge-top.bg-yellow-inverse-gray:before {
   
    -webkit-box-shadow: 16px 0 0 0 #717171;
    box-shadow: 16px 0 0 0    #717171
}

/*end yellow card*/
#item-list  .card .card-body{
    display: none;
}
#item-list  .card .card-body.show {
    display: block;
    
}

.cards .card-header {
    /* padding: 0; */
    border: 0;
}
.cards .card .card-header.collapsed {
    border-radius: 0px;
    margin-bottom: 1.5rem;
}

.cards.approval-status-cards .card .card-header.collapsed {
    margin-bottom: 1rem;
}

.badge-top .maintext{
    display: block;
    font-size: 11px;
}

.badge-top .secondtext{
    display: block;
    font-size: 11px;
    font-weight: 600;
}
.c-items label{
    font-size: 10px;
    padding: 0;
}
.c-items .c-text{
    font-size: 12px;
    padding: 0;
}

.qc-container.detail-viewonly,
.AW-container.detail-viewonly{
    /* background-color: var(--dark-primary) !important; */
    color:#fff;
}
.qc-container.detail-viewonly label,
.AW-container.detail-viewonly label,
.qc-container.detail-viewonly input,
.AW-container.detail-viewonly input{
    color:#fff !important;
    opacity: 1 !important;

}

.flex-box{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.form-check-container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0 !important;
}
.form-check-container .form-check-label{
    font-weight: 500;
}

.grid-fill > .c-items {
    width: 33.33% !important;
}
.grid-fill > .c-items .box-type .col {
    width: 25% !important;
}
.grid-fill > .c-items .box-type .col-auto {
    width: 75% !important;
}
.grid-fill > .c-items .box-type img {
    width: auto !important;
}
.box-type {
    background-color: var( --dark-3rd);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 5px 4px;
    display: flex;
    align-items: center;
    border-left: 0px solid #000;
    justify-content: center;
    align-content: center;
}
.box-type .icon-box{
    padding: 6px;
    background-color: white;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.box-type span{
    font-size: 20px;
}
.box-type img{
    width: 100%;
    padding: 5px;
    background-color: var(--dark);
    border-radius: 20px;
    display: block;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin: 0 auto;
}
.bg-circle {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 20px;
    background-color: #f9f9f9;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.box-type .bg-icon-fill,
.bg-icon-fill,
.bg-icon-fill-inverse{
    width: 100%;
    padding: 5px;
    background-color: var(--primary-color);
    color: #000;
    /* border-radius: 20px !important; */
    display: block;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin: 0 auto;
}

.bg-icon-fill-inverse{

    background-color: #000 !important;
    color: #fff !important;
  
}


.box-type .icon2{
    width:30px;
    display: block;
}
.detail-card{
    /*margin-bottom: 55px !important;*/

}
.change-qc-sec{
    align-items: center;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    padding: 8px;
    margin-bottom: 10px;

}
.change-qc-sec .custom-input{
    width: 100%;
    margin-top: 2px;
}
.change-qc-sec .custom-lablel{
    width: 85%;
    color: var(--dark);
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}
.trash-image{
    position: relative;
}
.trash-image .trash-btn{
    position: absolute;
    background-color: transparent;
    width: 53px;
    top: 0;
    right: 0;
}
.status-mssg-box {
    display: flex;
    padding: .5rem 1.5rem;
    border-radius: 1rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.status-mssg-box span.fw-bold {
   font-weight: 600 !important;
}

.admin-comment{
    background-color: #303030;
    border-radius: 15px;
    /* padding: 7px; */
}
.admin-comment .comment{
    /* height: 300px; */
    max-height: 285px;
    overflow-y: scroll;
    overflow-x: hidden;
    /* padding: 13px; */
}

.admin-comment .comment::-webkit-scrollbar {
    width: 3px;
    background-color: #252525;
  }
   
  .admin-comment .comment::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  }
   
  .admin-comment .comment::-webkit-scrollbar-thumb {
    background-color: rgb(255, 255, 255);
    outline: 1px solid rgba(112, 128, 144, 0);
  }
.admin-comment .feedback-sec{
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.admin-comment .feedback-sec span.text-grey {
    color: #fff !important;
}

.admin-comment textarea{
    background-color: var(--dark-3rd);
}
/*menu*/
.laundry-menu {
    border: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    margin: 0px auto;
    display: block;
    z-index: 999999999;
    background: transparent;
    /*background: #fff;*/
}
    .laundry-menu ul {
        max-width: 600px;
        background-color: var(--blue-dark);
        color: var(--white);
        padding: 1px;
        width: 92%;
        margin: 0 auto;
        display: flex;
        border-radius: 11px;
        align-items: center;
        align-content: center;
        text-align: center;
        justify-content: space-around;
        -webkit-border-radius: 11px;
        -moz-border-radius: 11px;
        -ms-border-radius: 11px;
        -o-border-radius: 11px;
    }
.laundry-menu li{
    list-style: none;
    width: 33%;
}
.laundry-menu .large img{
    width: 43px;
}
.laundry-menu .large span{
    bottom: 11px;
    position: relative;
}
.laundry-menu  a{
  font-size: 11px;
}
.laundry-menu img{
    width: 20px;
    margin: 0 auto;
    display: block;
}
.cards{
        position: relative;
        margin-bottom: 2rem;

}
.cards li.card {
    list-style: none;
    overflow: hidden;
    list-style: none;
    overflow: hidden;
    border: 0 !important;;
    box-shadow: 0px -0.4rem .75rem 0px #00000040;
    /* box-shadow: 0px -56px 28.6px 0px #00000040; */
    border-radius: 1rem 1rem;
    margin-bottom: -25px;
}
.cards.approval-status-cards li.card {
   
    margin-bottom: -30px;
}
.cards li.card:after{
    content:'';
    position:absolute;
    width: 100%;
    bottom: 0;
    height: 0%;
    background-color:white;
    display:block;
    box-shadow: rgb(50 50 93 / 0%) 0px -20px 60px -12px, rgb(0 0 0 / 67%) 5px -2px 18px 3px;
}

/* .cards .card .card-header{
    border-radius: 0px;
    margin-bottom: 1.5rem;

} */
/* .cards.approval-status-cards .card .card-header{
   
    margin-bottom: 1rem;

} */

.cards .card .card-header.collapsed{
    border-radius: 0px;
    margin-bottom: 1.5rem;

}
.cards.approval-status-cards .card .card-header.collapsed{
   
    margin-bottom: 1rem;

}



.cards .card .card-body{
    margin-bottom: 25px;
}
.cards.approval-status-cards .card .card-body{
    margin-bottom: 30px;
}
.cards .card .feedback-sec .card-body {
    margin-bottom: 0 !important;
}
.card.deliv-type-card{
    margin-bottom: 0 !important;
}
#card {
    box-shadow:rgb(50 50 93 / 0%) 0px -20px 60px -12px, rgb(0 0 0 / 67%) 0px -20px 36px -18px;
    border: 0;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.card {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.footer-fixed-btns {
    position: sticky;
    bottom: 75px;
    width: 100%;
    display: flex;
    z-index: 99;
    left: 0;
    padding: 0px 15px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    transition: .7s;
}
.footer-fixed {
    /*position: fixed;*/
    position: sticky;
    bottom: 75px;
    width: 100%;
    display: flex;
    z-index: 99;
    left: 0;
    padding: 0px 15px;
    margin: 0 auto;
    justify-content: space-evenly;
    align-items: center;
    /* transform: translateY(100px); */
    transform: translateY(100%);
    transition: .7s;
}
.footer-fixed.active{
transform: translateY(0) !important;

}
.footer-fixed.two-row{
    transform: translateY(100%);

}
.footer-fixed-open {
transform: translateY(0) !important;
}
.footer-fixed-close {
transform: translateY(-100px);
}
/*card*/

/************************ Scan Barcode Screen CSS ***************************/

.scan-btn{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    background-color: #181818;
    color: #FFFFFF;
    box-shadow: 0 0 20px 1px #000000B0;
    border: 1px solid;
    border-image-source: linear-gradient(125.85deg, #2576FF 2.84%, #00FFA3 39.34%, #FFFFFF 80.43%);
    /* -moz-border-image:  linear-gradient(125.85deg, #2576FF 2.84%, #00FFA3 39.34%, #FFFFFF 80.43%);
    -webkit-border-image:  linear-gradient(125.85deg, #2576FF 2.84%, #00FFA3 39.34%, #FFFFFF 80.43%);
    -o-border-image:  linear-gradient(125.85deg, #2576FF 2.84%, #00FFA3 39.34%, #FFFFFF 80.43%); */
    font-family: Poppins;
    min-height: 32vh;
    line-height: 82.5px;
    text-align: center;


}
.scan-btn .label{
    font-size: 55px;
    font-weight: 600;
}
.scan-btn .scan-icon{

}
.count-notify-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.count-notify-box .label{
    font-weight: 500 !important;
    
}
.count-notify-box .count{
    font-size: 2rem !important;
    font-weight: 600 !important;
    
}

/************************ Orders collected Screen CSS ***************************/
/*.orders-row {
    overflow-y: auto;
    height: 60vh;
}*/
.orderNo-text {
    color: var(--box-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    /* line-height: 36px; */
}
.orders-cards .card.order-card{
    background-color: var(--dark-secondary) !important;
    margin-bottom: .5rem !important;
    box-shadow: none !important;
    opacity: 1;

}

.order-card .work-stage-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-black) !important;
    color: #fff;
    transition: all .25s ease;

}
.order-card .work-stage-box:hover,
.order-card .work-stage-box:focus{
    opacity: .8;

    /* background-color: var(--dark) !important; */

}
.order-card .work-stage-box .label{
    font-size: 11px;
    text-align: left;
}
.order-card .work-stage-box.sorting-box {
    border-color: var(--ash-color) !important;
}
.order-card .work-stage-box.sorting-box .count{
    color: var(--ash-color) !important;
}

.order-card .work-stage-box.sendForApproval-box {
    border-color: var(--bg-red) !important;

}
.order-card .work-stage-box.sendForApproval-box .count{
    color: var(--bg-red) !important;

}

.order-card .work-stage-box.approved-box {
    border-color: var(--bg-yellow) !important;

}
.order-card .work-stage-box.approved-box .count{
    color: var(--bg-yellow) !important;

}
.order-card .work-stage-box.passed-box {
    border-color: var(--bg-green) !important;
}
.order-card .work-stage-box.passed-box .count{
    color:  var(--bg-green)  !important;
}

.order-card .work-stage-box.return-box {
    border-color: var(--bg-pink) !important;
}
.order-card .work-stage-box.return-box .count{
    color:  var(--bg-pink) !important;
}

.order-card .work-stage-box.retunCompleted-box {
    border-color: var(--bg-gray) !important;
}
.order-card .work-stage-box.retunCompleted-box .count{
    color: var(--bg-gray) !important;
}

.order-card .work-stage-box.assigned-box {
    border-color: var(--graylight) !important;
}
.order-card .work-stage-box.assigned-box .count {
    color:  var(--bg-green) !important;

}

.order-card .work-stage-box.pckgSummary-box {
    border-color: #FFFEFE !important;
    background-color: var(--blue) !important;
}
.order-card .work-stage-box.pckgSummary-box .count {
    color:  #fff !important;

}

/************************In Process Proccess User Screen CSS ***************************/

/* .process-cards .card .badge-top .maintext{
   padding: .5rem 0 !important;
} */
.labelBox-row .labelBox,
.machineNo-row .machNo-box{
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-black);
    color: #fff;
    /* border-color: var(--bggray-badge) !important; */
}

.labelBox-row .labelBox:hover,
.machineNo-row .machNo-box.active{
    border-color: var(--bggray-badge) !important;
    box-shadow: 0 0 20px 1px var(--black-violet) !important;

}
.labelBox-row .labelBox .count,
.machineNo-row .machNo-box .count{
    color: var(--bggray-badge) !important;
}
.labelBox-row .labelBox .label,
.machineNo-row .machNo-box .label{
    font-size: 11px;
    text-align: left;
}

.notify-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    gap: 0.5rem;
    background-color: var(--dark-secondary);
    font-size: 14px;
    padding: .75rem !important;
}
.notify-bar .badge{

    font-size: 12px !important;
    font-weight: normal !important;
    /* white-space: normal !important; */

}
.notify-bar .count{
    padding: 3px 10px;
    border-radius: 50%;
    color: #000;
}
    .notify-bar .process-dateTime,
    .notify-bar .process-type{
        color: #fff !important
    }

    .process-cards .badge-top .maintext,
    .press-cards .badge-top .maintext,
    .process-detail-card .badge-top .maintext,
    .press-detail-card .badge-top .maintext,
    .sp-cards .badge-top .maintext,
    .sp-detail-card .badge-top .maintext {
        padding: .5rem 0 !important;
        font-weight: 600 !important;
    }

/*.process-detail-card.wash-card {
    margin-bottom: 6rem !important;

}
*/

/************************ Batch Wash Screen CSS ***************************/

.batchWash-cards .batchwash-card{
    background-color: var(--light-black);
}

/************************ Sort & packaging Screen CSS ***************************/
.labelBox {
    /* border-bottom-right-radius: 10px; */
    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-black);
    color: #fff;
    border-radius: 10px;
}





.wrapper {
    display: flex;
    align-items: center;
    min-height: 100vh;
     }
  
  .scroll-list {
    width: 100%;
    max-width: 100%;
    padding: 0px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
  }

  .scroll-list__wrp {
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 0px;
    margin-bottom: 0px;
    border-radius: 8px;
  }
  .scroll-list__wrp .scrollbar-track {
    display: none !important;
  }

  .scroll-list__item {
    width: 100%;
    height: 80px;
    display: block;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: all 0.35s ease-in-out;
    opacity: 0;
    transform: scale(0.7);
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
}
  .scroll-list__item.item-hide {
    opacity: 0;
    transform: scale(0.7);
  }
  .scroll-list__item.item-focus {
    opacity: 1;
    transform: scale(1);
  }
  .scroll-list__item.item-next {
    opacity: 1;
    transform: scale(1);
  }
  .scroll-list__item.item-next + .scroll-list__item {
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
  .scroll-list__item:last-child {
    margin-bottom: 15px;
  }

  .product-customer{
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    position: relative;
    color: var(--text-white);
  }
  .product-customer .count{
    background-color: var(--darkgey);
    color: var(--white);
    position: absolute;
    width: 15px;
    height: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 19px;
    border-radius: 34px;
  }
  .admin-default{

  }
  .admin-default label{
    font-size: 14px;
    color: gray;
  }
  .admin-default .feedback-sec{
    padding: 15px;
    
  }
  .admin-default .feedback-sec-txt{
    box-shadow: -1px 2px 19.700000762939453px rgb(0 0 0 / 18%);
    background-color: transparent;
    padding: 5px!important;
  }
  /*custom-selection*/
.custom-selection select:focus{
        box-shadow: none;
}
.custom-selection select{
    background-color: #000047;
    color:white;
    --downarrowlight:url(../images/down-arrow-light.svg);
    background-image: url(../images/down-arrow-light-01.svg);
}

.packageItem-container{
    background-color: var(--dark-custom);
    padding:0.75rem 1rem !important;
    font-size: 12px;
    font-weight: 500;

}
.packageItem-container.active{
    background-color: var(--blue);
}
.addMinus-container .btn{
    padding:0.75rem 1rem;
    font-size: 14px;

}

.driverDetails-row .text{
    margin-top: 0.125rem !important;
}
/*filter-box*/

/* custom dropdown */
.dropdown.dropdown-select .dropdown-toggle::after {
    content: none !important;
}

.filter-box .form-item input {
    display: block;
    width: 100%;
    height: auto;
    background: transparent;
    border: solid 2px var(--border-colors);
    transition: all .3s ease;
    padding: 6px 5px;
    padding-top: 6px!important;
    border-radius: 15px;
    outline: none;
    padding-top: 0;
    color: var(--text-color);
    font-family: Satoshi;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 1; */
}
.filter-box .form-item select{
    font-size: 15ps;
}

.filter-box  .form-item input:focus {
    border: 2px solid #00D061;
}

.filter-box .form-item label {
    position: relative;
    cursor: text;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 0 10px;
    color: var(--sub-text-color);
    transition: all .3s ease;
    font-family: Satoshi;
    font-weight: 500;
    line-height: 1;
    font-size: 16px;
}

.filter-box .form-item input:focus+label,
.filter-box .form-item input:valid+label {
    font-size: 14px;
    top: 3px;
    color: #00D061 !important;
}

.filter-box .form-item input:focus+label {
    color: var(--sub-text-color);
}


/*---------  Pagination  CSS Start--------- */
.pagination-nav {
    bottom: 69px !important;
    /*display: none;*/
}

.pagination-brand {
    --bs-pagination-padding-x: 1rem;
    --bs-pagination-padding-y: 0.5rem;
    --bs-pagination-font-size: 1rem;
    /* --bs-pagination-border-radius: var(--bs-border-radius-lg); */
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: #fff;
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}

.page-link {
    color: var(--blue-dark);
}
/*---------  Pagination  CSS End--------- */


/*---------------------- Camera CSS Start----------------------------------- */

.cam_footer,
.cam_header {
    max-width: 600px;
}

/*---------------------- Camera CSS End----------------------------------- */


/* Custom Alert */
.lobibox-notify .lobibox-notify-icon .icon-el{
    font-size: 20px !important;
}
.lobibox-notify-info{
    background-color: #f8f9fa !important;
    border-color: var(--graylight) !important;
}

/* custom btn */
.btn-brand{

    --bs-btn-color: #fff;
    --bs-btn-bg: #0F0139;
    --bs-btn-border-color: #0F0139;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0f0332;
    --bs-btn-hover-border-color: #0f0332;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0f0332;
    --bs-btn-active-border-color: #0f0332;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0F0139;
    --bs-btn-disabled-border-color: #0F0139;

}
.btn-purple{

        --bs-btn-color: #fff;
        --bs-btn-bg: #CE02F3;
        --bs-btn-border-color: #CE02F3;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #be03e0;
        --bs-btn-hover-border-color: #b806d7;
        --bs-btn-focus-shadow-rgb: 49, 132, 253;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #b806d7;
        --bs-btn-active-border-color: #a107bc;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #CE02F3;
        --bs-btn-disabled-border-color: #CE02F3;
    
}
.btn-orange{

    --bs-btn-color: #fff;
    --bs-btn-bg: #FF7A00;
    --bs-btn-border-color: #FF7A00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f57c0c;
    --bs-btn-hover-border-color: #ee780a;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f87c08;
    --bs-btn-active-border-color: #f87c08;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #FF7A00;
    --bs-btn-disabled-border-color: #FF7A00;

}

.btn-green{

    --bs-btn-color: #fff;
    --bs-btn-bg: #10DB79;
    --bs-btn-border-color: #10DB79;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0ebc68;
    --bs-btn-hover-border-color: #0ebc68;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0dbf69;
    --bs-btn-active-border-color: #0dbf69;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #10DB79;
    --bs-btn-disabled-border-color: #10DB79;

}
.btn-red{

    --bs-btn-color: #fff;
    --bs-btn-bg: var(--red);
    --bs-btn-border-color:#FF0000;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d10808;
    --bs-btn-hover-border-color: #d10808;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d10808;
    --bs-btn-active-border-color: #d10808;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #d10808;
    --bs-btn-disabled-border-color: #d10808;

}
.btn-dark-custom{
    --bs-btn-color: #fff;
    --bs-btn-bg: #383838;
    --bs-btn-border-color:#383838;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #393636;
    --bs-btn-hover-border-color: #393636;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--blue);
    --bs-btn-active-border-color: var(--blue);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #494848;
    --bs-btn-disabled-border-color: #494848;
}

.modal:not(.show) .modal-dialog.modal-dialog-fadeInUp{
    transition: transform .3s ease;
    transform: translate(0, 100%);
}
.confirm-modal h6::after{
    content:"?";
}

.scanner-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.scanner-content {
    position: relative;
    width: 90%;
    max-width: 600px;
    height: 40%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px #00ff99;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 32px;
    z-index: 999;
    cursor: pointer;
}
.laundry-menu a span{
    display:block !important;
}
/* Resoonsive */
@media(max-width:520px) {
    .printBarcode-btn{
        font-size: 6px !important;
        font-weight: 600 !important;
    }
    .notify-bar{
        font-size: 10px !important;

    }

    .grid-fill > .c-items .box-type .col-auto{
        width:33.33% !important;
    }
    .grid-fill > .c-items .box-type .col-auto {
        width: 66.67% !important;
    }
    .grid-fill > .c-items .c-text {
        font-size: 8px !important;
    }
}

/* Custom */

@media (min-width: 576px) {
    .machineNo-row.row-cols-sm-5>* {
        flex: 0 0 auto !important;
        width: 20% !important;
    }

   
}


@media (min-width: 520px) {
   /* .pagination-brand {
        --bs-pagination-padding-x: 1.5rem;
        --bs-pagination-padding-y: 0.75rem;
        --bs-pagination-font-size: 1.25rem;
        --bs-pagination-border-radius: var(--bs-border-radius-lg);
    }*/


}

@media (min-width: 375px) {
    .row-cols-xs-3>*{
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }
    .d-xs-grid {
        display: grid !important;
    }
}

@media (min-width: 320px) {
    .row-cols-xxs-2>*, 
    .machineNo-row.row-cols-xxs-2>* {
        flex: 0 0 auto;
        width: 50%;
    }
}
@media (max-width: 520px) {
    .footer-fixed button, .footer-fixed a {
        font-size: 14px !important;
        padding: 0.5rem !important;
    }
    .classification .fs-large{
        font-size:10px !important;
    }
    .c-items .c-text {
        font-size: 9px !important
    }
    .grid-fill > .c-items .box-type img {
        width: 26px !important;
        height: 26px !important;
    }
    .laundry-menu a span {
        font-size: 8px !important;
        margin-top: 2px;
    }
}

    @media (max-width: 375px) {
        .c-items .c-text {
            font-size: 9px !important
        }

        .c-items label {
            font-size: 9px !important;
        }

        .label-text-size {
            font-size: 10px !important;
        }

        .grid-fill > .c-items {
            width: 50% !important;
        }

        input.form-control.text-uppercase,
        input.form-control.text-uppercase {
            font-size: 13px !important;
            padding-left: 0.5rem !important;
            padding-right: 0.5rem !important;
        }

        .input-group-lg > .btn, .input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .input-group-text {
            font-size: 1rem !important;
        }
    }

    @media (max-width: 389px) {
        .laundry-home-header .head-color {
            font-size: 11px !important;
            padding-left: 8px !important;
        }
        .laundry-menu a {
            font-size: 9px !important;
        }

        span.badge {
            font-size: .6rem !important;
        }
        .deliv-type-card h6{
            font-size: 10px !important;
        }

        .laundry-pluse-text {
            font-size: 10px !important;
            line-height: 24px !important
        }

        .unlock {
            font-size: 8px !important;
        }
    }