/*
* main-eservice.css
* File include item main-eservice only specific css only
******************************************************************************/

/*-------------------- Page --------------------*/

/*Announcement News*/
.card-head-back {
    display: block;
    width: clamp(10px, 30px, 50px);
    color: #74045F;
    animation: ease-in 2s;
    min-width: 30px;
    cursor: pointer;
}

/*Additional Service*/
.approve-quotation-icon-detail {
    display: -webkit-inline-box;
    width: 14px;
    height: 14px;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="18" height="18" viewBox="-1 0 18 18" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8.66732 2.13281H4.00065C3.35898 2.13281 2.83982 2.65781 2.83982 3.29948L2.83398 12.6328C2.83398 13.2745 3.35315 13.7995 3.99482 13.7995H11.0007C11.6423 13.7995 12.1673 13.2745 12.1673 12.6328V5.63281L8.66732 2.13281ZM11.0007 12.6328H4.00065V3.29948H8.08398V6.21615H11.0007V12.6328ZM5.64565 8.57865L4.81732 9.40115L6.88232 11.4661L10.184 8.16448L9.36148 7.34198L6.88815 9.81531L5.64565 8.57865Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

/*Appointment*/
.check-objective {
    border-radius: 26.6667px;
    width: 17px;
    height: 17px;
    border: 1.5px solid #74045F;
    text-align: center;
    color: #74045F;
}

.detail-icon {
    width: 33px;
    height: 33px;
    border: 1.5px solid #F6DEF2;
    border-radius: 60px;
    text-align: center;
    padding: 3px;
}

.contact-chanel {
    width: 33px !important;
    height: 33px !important;
    border: 1px solid #74045F;
    border-radius: 39px;
    text-align: center;
    color: #74045F;
    padding: 3px;
}

.appointment-type-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #74045F !important;
    padding: 0px 10px 0px 8px !important;
    background: #EFD7EB !important;
    border: 1px solid #74045F !important;
    border-radius: 40px !important;
}

.staff-lead-dot {
    width: 8px;
    height: 8px;
    background: #577CFF;
    border-radius: 14px;
}

/*Attorney*/
.attorney-status-default {
    border-radius: 40px;
    width: 34px;
    height: 34px;
    background: #74045F;
    border: 1px solid #74045F;
    text-align: center;
}

.attorney-status-active {
    border-radius: 40px;
    width: 34px;
    height: 34px;
    background: #ffff;
    border: 1px solid #ffff;
    text-align: center;
}

.attorney-step-default {
    border-right: 2px solid #74045F;
    height: 80px
}

.attorney-step-active {
    border-right: 2px solid #ffff;
    height: 80px
}

.card-company-list {
    background: #FFFFFF;
    border: 1px solid #E8EAEB !important;
    border-radius: 10px !important;
}

    .card-company-list .btn {
        color: #74045F;
        background: #FFFFFF;
        border: 1px solid #E8EAEB;
        border-radius: 40px;
        padding: 5px !important;
    }

    .card-company-list:hover {
        background: #FFFFFF;
        border: 1px solid #74045F !important;
        box-shadow: 0px 0px 0px 4px rgba(116, 4, 95, 0.1);
        border-radius: 10px;
    }

        .card-company-list:hover .text-customer-name {
            color: #74045F !important;
        }

        .card-company-list:hover .btn {
            color: #FFFFFF;
            background: #74045F;
            border: 1px solid rgba(116, 4, 95, 0.3);
            border-radius: 40px;
        }

.attorney-reject {
    font-size: 16px;
    font-weight: 400;
    color: #FD4B24;
    background: rgba(250, 234, 231, 0.7);
    border-radius: 6px;
    width: 448px !important;
    text-align: center;
    padding: 12px 12px 14px;
}

/*Compliant*/
.pea-column-complaint-customer {
    float: left !important;
    width: 20% !important;
    padding: 0 10px !important;
}

.pea-column-complaint-other {
    float: left !important;
    width: 33.3% !important;
    padding: 0 10px !important;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 1000px) {
    .pea-column-complaint-customer {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    .pea-column-complaint-other {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }
}

.pea-card-complaint {
    font-size: 12px !important;
    color: #74045F !important;
    box-shadow: 0px 2px 4px rgba(138, 140, 151, 0.3) !important;
    border-radius: 8px !important;
}

    .pea-card-complaint:hover {
        font-size: 14px !important;
        color: #FFFFFF !important;
        background: linear-gradient(109.53deg, #E5A4F0 5.36%, #BD348F 81.78%) !important;
    }

/*Account Setting*/
.pea-image-edit-icon {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: #74045F;
    border: 1px solid rgba(79, 11, 105, 0.3);
    border-radius: 40px;
    width: 20px;
    height: 20px;
    color: white;
}

.pea-card-policy {
    background: #FFF4FF !important;
    border-radius: 6px !important;
}

/*Registration*/
.pea-building-icon {
    align-items: center;
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    border-radius: 4.8px;
    padding: 2.8px;
}

.pea-card-attorney {
    background: #FFFFFF;
    border: 1px solid #E8EAEB;
    box-shadow: 0px 0px 6px rgba(182, 182, 182, 0.3);
    border-radius: 10px;
}

.register-step-default {
    display: -webkit-inline-box;
    border: 2px solid #D3D6D8;
    width: 60px !important;
    height: 6px !important;
    background: #D3D6D8;
    border-radius: 16px;
}

.register-step-active {
    display: -webkit-inline-box;
    border: 2px solid #F8C148;
    width: 60px !important;
    height: 6px !important;
    background: #F8C148;
    border-radius: 16px;
}

/*Menu*/
.menu-color {
    background: linear-gradient(to right, #F9E0BC, #E098D3);
}

.pea-menu-radius {
    border-radius: 12px !important;
}

.pea-btn-call {
    position: fixed;
    width: 42px;
    height: 42px;
    right: 7.97px;
    bottom: 12px;
}

.mian-menu-megaphone {
    display: inline-block;
    width: 1rem;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="14" height="14" viewBox="-1 -1 18 14" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M15.1773 0.298933C14.9748 0.163933 14.7161 0.118933 14.4798 0.208933L5.10859 3.55018C5.10859 3.55018 5.07484 3.57268 5.06359 3.57268H2.01484C1.17109 3.57268 0.496094 4.25893 0.496094 5.09143V7.35268C0.496094 8.19643 1.18234 8.87143 2.01484 8.87143H5.06359C5.06359 8.87143 5.09734 8.89393 5.10859 8.89393L5.53609 9.05143L4.73734 10.6039C4.52359 11.0202 4.50109 11.5039 4.68109 11.9314C4.86109 12.3589 5.20984 12.6964 5.64859 12.8427L8.58484 13.8214C8.75359 13.8777 8.92234 13.9002 9.09109 13.9002C9.67609 13.9002 10.2498 13.5739 10.5198 13.0227L11.4536 11.1552L14.4798 12.2352C14.5586 12.2689 14.6486 12.2802 14.7386 12.2802C14.8961 12.2802 15.0423 12.2352 15.1773 12.1452C15.3798 11.9989 15.5036 11.7739 15.5036 11.5264V0.917683C15.5036 0.670183 15.3798 0.433933 15.1773 0.298933ZM2.01484 7.36393V5.09143H4.61359V7.36393H2.01484ZM9.06859 12.4039L6.08734 11.3239L6.97609 9.60268L6.82984 9.53518L10.0023 10.6714L9.06859 12.4152V12.4039ZM13.9848 10.4689L6.13234 7.66768V4.81018L13.9848 2.00893V10.4802V10.4689Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

    .mian-menu-megaphone::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

.mian-menu-headset-mic {
    display: inline-block;
    width: 1rem;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="14" height="18" viewBox="-4 0 18 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10.6667 9.33317V11.9998H9.33333V9.33317H10.6667ZM2.66667 9.33317V11.9998H2C1.63333 11.9998 1.33333 11.6998 1.33333 11.3332V9.33317H2.66667ZM6 0.666504C2.68667 0.666504 0 3.35317 0 6.6665V11.3332C0 12.4398 0.893333 13.3332 2 13.3332H4V7.99984H1.33333V6.6665C1.33333 4.0865 3.42 1.99984 6 1.99984C8.58 1.99984 10.6667 4.0865 10.6667 6.6665V7.99984H8V13.3332H10.6667V13.9998H6V15.3332H10C11.1067 15.3332 12 14.4398 12 13.3332V6.6665C12 3.35317 9.31333 0.666504 6 0.666504Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

    .mian-menu-headset-mic::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

.mian-menu-bolt {
    display: inline-block;
    width: 1rem;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="16" height="18" viewBox="-4 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.95167 7.28906L5.78518 2.28906H3.22341L2.11902 8.91406H6.13127V11.523L8.8533 7.28906H4.95167ZM4.44377 17.2682V10.6016H1.11043C0.989383 10.6015 0.869795 10.5751 0.759987 10.5242C0.650178 10.4732 0.552785 10.399 0.474584 10.3066C0.396383 10.2142 0.33925 10.1059 0.30716 9.98915C0.27507 9.87243 0.268793 9.75012 0.288766 9.63073L1.67793 1.2974C1.71046 1.10296 1.81086 0.92636 1.9613 0.798961C2.11174 0.671563 2.30247 0.601621 2.4996 0.601563H6.79293C6.91405 0.601477 7.03374 0.627795 7.14365 0.678683C7.25356 0.729571 7.35105 0.803807 7.42935 0.896219C7.50764 0.988632 7.56485 1.097 7.59698 1.21378C7.62912 1.33056 7.63542 1.45294 7.61543 1.5724L6.94377 5.60156H10.4171C10.5668 5.60142 10.7139 5.64162 10.8427 5.71795C10.9715 5.79428 11.0774 5.90391 11.1492 6.03532C11.221 6.16673 11.2561 6.31505 11.2507 6.4647C11.2454 6.61435 11.1998 6.75979 11.1188 6.88573L4.44377 17.2682Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

    .mian-menu-bolt::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

.mian-menu-voucher {
    display: inline-block;
    width: 1rem;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="26" height="23" viewBox="0 3 30 23" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M18.3327 8.6582V5.32487C18.3327 4.4082 17.5827 3.6582 16.666 3.6582H3.33268C2.41602 3.6582 1.67435 4.4082 1.67435 5.32487V8.6582C2.59102 8.6582 3.33268 9.4082 3.33268 10.3249C3.33268 11.2415 2.59102 11.9915 1.66602 11.9915V15.3249C1.66602 16.2415 2.41602 16.9915 3.33268 16.9915H16.666C17.5827 16.9915 18.3327 16.2415 18.3327 15.3249V11.9915C17.416 11.9915 16.666 11.2415 16.666 10.3249C16.666 9.4082 17.416 8.6582 18.3327 8.6582ZM16.666 7.44154C15.6743 8.01654 14.9993 9.09987 14.9993 10.3249C14.9993 11.5499 15.6743 12.6332 16.666 13.2082V15.3249H3.33268V13.2082C4.32435 12.6332 4.99935 11.5499 4.99935 10.3249C4.99935 9.09154 4.33268 8.01654 3.34102 7.44154L3.33268 5.32487H16.666V7.44154ZM7.55768 13.6582L9.99935 12.0915L12.441 13.6582L11.6993 10.8582L13.941 9.02487L11.0493 8.84987L9.99935 6.1582L8.94102 8.84154L6.04935 9.01654L8.29102 10.8499L7.55768 13.6582Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

    .mian-menu-voucher::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

@media (min-width: 1200px) {
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .menu-vertical .menu-inner > .menu-item > .menu-link .menu-svg,
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu.menu-vertical .menu-inner > .menu-item > .menu-link .menu-svg {
        margin-left: 0rem !important;
        width: 1.5rem !important;
        text-align: center !important;
        margin-right: 0 !important;
    }
}


/*Dashboards*/
.swiper-container .swiper-slide {
    text-align: start !important;
    background-color: transparent !important;
}

.pea-btn-swiiper {
    width: 28px !important;
    height: 28px !important;
    background: #FFFFFF !important;
    border-radius: 4px !important;
    padding: 0 !important;
}
/* 
.pea-assessment-box {
    background: linear-gradient(180deg, #FAF1FC 0%, #F6EDFB 100%) !important;
    border-radius: 8px !important;
} */

/* Responsive columns - one column layout (vertical) on small screens */
/*@media screen and (max-width: 1000px) {
    .pea-column-sum-report {
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }
}*/


/*-------------------- Font and Color Style --------------------*/

.menu-megaphone {
    display: inline-block;
}

    .menu-megaphone::before {
        content: url('data:image/svg+xml,%3Csvg width="20" height="16" viewBox="-2 0 20 14" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M15.1773 0.298933C14.9748 0.163933 14.7161 0.118933 14.4798 0.208933L5.10859 3.55018C5.10859 3.55018 5.07484 3.57268 5.06359 3.57268H2.01484C1.17109 3.57268 0.496094 4.25893 0.496094 5.09143V7.35268C0.496094 8.19643 1.18234 8.87143 2.01484 8.87143H5.06359C5.06359 8.87143 5.09734 8.89393 5.10859 8.89393L5.53609 9.05143L4.73734 10.6039C4.52359 11.0202 4.50109 11.5039 4.68109 11.9314C4.86109 12.3589 5.20984 12.6964 5.64859 12.8427L8.58484 13.8214C8.75359 13.8777 8.92234 13.9002 9.09109 13.9002C9.67609 13.9002 10.2498 13.5739 10.5198 13.0227L11.4536 11.1552L14.4798 12.2352C14.5586 12.2689 14.6486 12.2802 14.7386 12.2802C14.8961 12.2802 15.0423 12.2352 15.1773 12.1452C15.3798 11.9989 15.5036 11.7739 15.5036 11.5264V0.917683C15.5036 0.670183 15.3798 0.433933 15.1773 0.298933ZM2.01484 7.36393V5.09143H4.61359V7.36393H2.01484ZM9.06859 12.4039L6.08734 11.3239L6.97609 9.60268L6.82984 9.53518L10.0023 10.6714L9.06859 12.4152V12.4039ZM13.9848 10.4689L6.13234 7.66768V4.81018L13.9848 2.00893V10.4802V10.4689Z" /%3E%3C/svg%3E');
        display: block;
    }

.menu-headset-mic {
    display: inline-block;
}

    .menu-headset-mic::before {
        content: url('data:image/svg+xml,%3Csvg width="20" height="18" viewBox="0 0 12 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10.6667 9.33268V11.9993H9.33333V9.33268H10.6667ZM2.66667 9.33268V11.9993H2C1.63333 11.9993 1.33333 11.6993 1.33333 11.3327V9.33268H2.66667ZM6 0.666016C2.68667 0.666016 0 3.35268 0 6.66602V11.3327C0 12.4393 0.893333 13.3327 2 13.3327H4V7.99935H1.33333V6.66602C1.33333 4.08602 3.42 1.99935 6 1.99935C8.58 1.99935 10.6667 4.08602 10.6667 6.66602V7.99935H8V13.3327H10.6667V13.9993H6V15.3327H10C11.1067 15.3327 12 14.4393 12 13.3327V6.66602C12 3.35268 9.31333 0.666016 6 0.666016Z" /%3E%3C/svg%3E');
        display: block;
    }

.menu-bolt {
    display: inline-block;
    width: 1rem;
    -webkit-mask: url('data:image/svg+xml,%3Csvg width="14" height="16" viewBox="-4 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4.95167 7.28906L5.78518 2.28906H3.22341L2.11902 8.91406H6.13127V11.523L8.8533 7.28906H4.95167ZM4.44377 17.2682V10.6016H1.11043C0.989383 10.6015 0.869795 10.5751 0.759987 10.5242C0.650178 10.4732 0.552785 10.399 0.474584 10.3066C0.396383 10.2142 0.33925 10.1059 0.30716 9.98915C0.27507 9.87243 0.268793 9.75012 0.288766 9.63073L1.67793 1.2974C1.71046 1.10296 1.81086 0.92636 1.9613 0.798961C2.11174 0.671563 2.30247 0.601621 2.4996 0.601563H6.79293C6.91405 0.601477 7.03374 0.627795 7.14365 0.678683C7.25356 0.729571 7.35105 0.803807 7.42935 0.896219C7.50764 0.988632 7.56485 1.097 7.59698 1.21378C7.62912 1.33056 7.63542 1.45294 7.61543 1.5724L6.94377 5.60156H10.4171C10.5668 5.60142 10.7139 5.64162 10.8427 5.71795C10.9715 5.79428 11.0774 5.90391 11.1492 6.03532C11.221 6.16673 11.2561 6.31505 11.2507 6.4647C11.2454 6.61435 11.1998 6.75979 11.1188 6.88573L4.44377 17.2682Z" /%3E%3C/svg%3E') no-repeat;
    background: currentColor;
}

    .menu-bolt::before {
        content: "";
        display: block;
        padding-top: 100%;
    }

.pea-menu {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
}

/*font-size: 28px;*/
.pea-h1 {
    color: #292C2F !important;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
}

/*font-size: 20px;*/
.pea-h2 {
    color: #292C2F !important;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

/*font-size: 16px;*/
.pea-h3 {
    color: #292C2F !important;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
}

.pea-h3-line24 {
    color: #292C2F !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

/*font-size: 20px;*/
.pea-body-large {
    color: #292C2F !important;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
}

/*font-size: 18px;*/
.pea-body-alert {
    color: #292C2F !important;
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
}

/*font-size: 16px;*/
.pea-body {
    color: #292C2F !important;
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
}

.pea-body-line24 {
    color: #292C2F !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.pea-body-line28 {
    color: #292C2F !important;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
/*font-size: 14px;*/
.pea-body-small {
    color: #292C2F !important;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
}

.pea-body-small-line20 {
    color: #292C2F !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

/*font-size: 12px;*/
.pea-tag {
    color: #292C2F !important;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
}

.pea-tag-line16 {
    color: #292C2F !important;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

/*font-size: 10px;*/
.pea-a {
    color: #292C2F !important;
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
}

.pea-text {
    font-size: 16px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
    color: #646B73 !important;
}

.weight-400 {
    font-weight: 400 !important;
}

.weight-700 {
    font-weight: 700 !important;
}

.primary-20 {
    color: #74045F !important;
}

.primary-60 {
    color: #B777AC !important;
}

.primary-dark-50 {
    color: #4B024E !important;
}

.gray-50 {
    color: #A5ABB0 !important;
}

.gray-75 {
    color: #646B73 !important;
}

.gray-100 {
    color: #292C2F !important;
}

.color-pink {
    color: #D052AD !important;
}

.color-pink-2 {
    color: #BE6DAF !important;
}

.color-brand-100 {
    color: #75492C !important;
}

.color-gold {
    color: #AF7300 !important;
}

.color-notice-info {
    color: #577CFF !important;
}

.otp-verify {
    font-weight: 600 !important;
    font-size: 28px !important;
    color: #000000 !important;
}

.color-body-text {
    color: #212529 !important;
}

/*-------------------- badge Status And Dot Status --------------------*/

.pea-diamond-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #28347B !important;
    background: linear-gradient(90deg, #7A83B7 0%, #E7F0FC 100%) !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 5px !important;
}

.pea-gold-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #F7AC0A !important;
    background: linear-gradient(90deg, #FFC468 0%, #FCEED5 100%) !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 5px !important;
}

.pea-platinum-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #BB8C65 !important;
    background: linear-gradient(90deg, #D7C1AF 0%, #FFEEDF 100%) !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 5px !important;
}

.pea-silver-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #667085 !important;
    background: linear-gradient(90deg, #C5C7CA 0%, #EFEFEF 100%) !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 5px !important;
}

.pea-classic-badge {
    font-size: 12px !important;
    line-height: 20px !important;
    color: #D32FB4 !important;
    background: linear-gradient(90deg, #F4A6E6 0%, #F7E5F4 100%) !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 5px !important;
}



.pea-danger-dot {
    width: 14px;
    height: 14px;
    background: #F26B40;
    border-radius: 14px;
}

.pea-warning-dot {
    width: 14px;
    height: 14px;
    background: #F9B31B;
    border-radius: 14px;
}

.pea-info-dot {
    width: 14px;
    height: 14px;
    background: #73A5E1;
    border-radius: 14px;
}

.pea-primary-dot {
    width: 14px;
    height: 14px;
    background: #74045F;
    border-radius: 14px;
}

.pea-secondary-dot {
    width: 14px;
    height: 14px;
    background: #DCDCDC;
    border-radius: 14px;
}

.pea-success-dot {
    width: 14px;
    height: 14px;
    background: #2FB62D;
    border-radius: 14px;
}

.pea-pink-dot {
    width: 14px;
    height: 14px;
    background: #D052AD;
    border-radius: 14px;
}

.pea-success-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #2FB62D !important;
    background: #DDFADC !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}

.pea-primary-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #74045F !important;
    background: #EFD7EB !important;
    border-radius: 40px !important;
    padding: 1px 10px 0px 8px !important;
}

.pea-warning-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #C7911B !important;
    background: #FCEED5 !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}

.pea-danger-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #FD4B24 !important;
    background: #FAEAE7 !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}

.pea-secondary-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #A5ABB0 !important;
    background: #E8EAEB !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}

.pea-secondary-badge-f8f8f9 {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #A5ABB0 !important;
    background: #f8f8f9 !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}

.pea-info-badge {
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 20px !important;
    color: #5E92CF !important;
    background: #E7F0FC !important;
    border-radius: 40px !important;
    padding: 0px 10px 0px 8px !important;
}



/*-------------------- List Data Table --------------------*/

div.list-table-style .table {
    border: 1px solid #E8EAEB !important;
    border-radius: 6px 6px 6px 6px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.list-table-style .table th {
    color: #292C2F !important;
    font-weight: 600 !important;
    background-color: #F8F8F9 !important;
    border-top: medium none !important;
    border-bottom: none !important;
    white-space: nowrap;
    text-transform: capitalize !important;
}

.list-table-style .table td {
    font-weight: 400 !important;
    color: #646B73;
    white-space: nowrap;
}

.list-table-style .table th:first-child {
    border-radius: 6px 0 0 0 !important;
    -moz-border-radius: 6px 0 0 0 !important;
    -webkit-border-radius: 6px 0 0 0 !important;
}

.list-table-style .table th:last-child {
    border-radius: 0 6px 0 0 !important;
    -moz-border-radius: 0 6px 0 0 !important;
    -webkit-border-radius: 0 6px 0 0 !important;
}

/*.list-table-style .table td, .list-table-style .table th {
    border-left: 1px solid #E8EAEB !important;
    border-top: 1px solid #E8EAEB !important;
}*/

div.list-table-striped-style .table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.list-table-striped-style .table th {
    color: #292C2F !important;
    font-weight: 600 !important;
    background-color: #ffff !important;
    border-top: none !important;
    border-bottom: none !important;
    white-space: nowrap;
    text-transform: capitalize !important;
}

.list-table-striped-style .table td {
    font-weight: 400 !important;
    color: #646B73;
    white-space: nowrap;
    border-bottom: 1px solid #E8EAEB !important;
}

/* width */
::-webkit-scrollbar {
    height: 6.5px; /* height of horizontal scrollbar ← You're missing this */
    width: 6.5px; /* width of vertical scrollbar */
    border: 1px solid #EFD7EB;
}

/* Track */
::-webkit-scrollbar-track {
    background: #EFD7EB;
    /* Neutral/Grey20 */

    border-width: 0px 1px 1px 0px;
    border-style: solid;
    border-color: #E8EAEB;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #B777AC;
    height: 10px;
    border-radius: 20px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #B777AC;
        border-radius: 20px;
    }

/*-------------------- Perfect Scrollbar --------------------*/

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
    height: 5px;
    /* there must be 'bottom' or 'top' for ps__rail-x */
    bottom: 0px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__rail-y {
    width: 5px;
    /* there must be 'right' or 'left' for ps__rail-y */
    right: 0;
    /* please don't change 'position' */
    position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    display: block;
    background-color: #EFD7EB !important;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
    opacity: 0.9;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    background-color: #EFD7EB !important;
    opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
    background-color: #B777AC !important;
    border-radius: 8px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 0px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__thumb-y {
    background-color: #B777AC !important;
    border-radius: 8px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 6px;
    /* there must be 'right' for ps__thumb-y */
    right: 0px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #B777AC !important;
    height: 6px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #B777AC !important;
    width: 6px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
    .ps {
        overflow: auto !important;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ps {
        overflow: auto !important;
    }
}

/*-------------------- Componnent Style --------------------*/

/*Button Gold Color*/
.s-horizon-style {
    color: #FFFFFF !important;
    background: linear-gradient(90deg, #E0A931 0%, #F8C047 100%) !important;
    border-radius: 4px !important;
}

/*Button Gold Color*/
.pink-style {
    color: #FFFFFF !important;
    background: #B14894 !important;
    border-radius: 4px !important;
}

/*Button Back Arrow-left*/
.btn-back-left {
    border: 1px solid #74045F !important;
    border-radius: 40px !important;
    width: 24px !important;
    height: 24px !important;
}

.btn-chart-dashboard {
    background: #F6DEF2 !important;
    border-radius: 6px !important;
}

/*Style Modal*/
.pea-modal-style {
    background: #FFFFFF !important;
    box-shadow: 0px 0px 6px rgba(182, 182, 182, 0.3) !important;
    border-radius: 16px !important;
}

/*Size Text Button Alerts Modal*/
.pea-modal-button-alerts {
    font-size: 20px !important;
    line-height: 30px !important;
}

/*Icon Close Alerts Modal*/
.pea-modal-sm-close-icon {
    position: absolute;
    right: 2%;
    top: 2%;
}

.pea-modal-lg-close-icon {
    position: absolute;
    right: 0.60%;
    top: 1%;
}

.pea-modal-close-bill {
    border: 1px solid #FFFFFF !important;
    border-radius: 27px !important;
    background-image: url(../../CRMPlus/img/icons/close.png) !important;
    width: 28px;
    height: 28px;
    background-position: center;
    background-repeat: no-repeat;
    right: 35px;
    top: -10px;
    position: absolute;
    background-color: white;
    background-size: 13px;
    transform: translate(23px, -25px);
}

.pea-dropdown-bg {
    background: #EFD7EB !important;
    border-radius: 3.2px !important;
}

    .pea-dropdown-bg .filter-option-inner-inner {
        color: #74045F !important;
    }

.bootstrap-select .filter-option-inner-inner {
    color: #292C2F !important;
}

.select-year .dropdown-toggle {
    border: 1px solid #B777AC !important;
    border-radius: 4px !important;
}

.bootstrap-select .dropdown-toggle.show,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
    background: rgba(255, 255, 255, 1e-06);
    box-shadow: 0px 0px 0px 4px rgba(150, 61, 133, 0.25);
    border-radius: 4px;
}

/*.bootstrap-select .dropdown-menu {
    min-width: 100% !important;
}*/

/*.bootstrap-select .dropdown-toggle .filter-option {
    padding-right: 30px;
}*/

.btn-group .dropdown-toggle.show,
.btn-group .dropdown-toggle:hover,
.btn-group > .dropdown-toggle.dropdown-menu:hover {
    background: rgba(255, 255, 255, 1e-06);
    box-shadow: 0px 0px 0px 4px rgba(150, 61, 133, 0.25);
    border-radius: 4px;
}

.textbox-other-position {
    border-top: 0px none !important;
    border-left: 0px none !important;
    border-right: 0px none !important;
    border-bottom-color: #74045F !important;
    box-shadow: none !important;
    border-radius: 0px !important;
}
/*-------------------- Require warning --------------------*/

.warning-require-field {
    border-color: #ff3e1d !important;
}

.warning-email-format {
    border-color: #ff3e1d !important;
}

.warning-word {
    color: #ff3e1d !important;
}

.warning-phone-format {
    border-color: #ff3e1d !important;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid-pass {
    color: green !important;
}

    .valid-pass:after {
        position: relative;
        left: 10px;
        content: "✔";
    }

/* Add a red text color and an "x" when the requirements are wrong */
.invalid-pass {
    color: red !important;
}

    .invalid-pass:after {
        position: relative;
        left: 10px;
        content: "✖";
    }

/*-------------------- Div Disabled --------------------*/

.div-disabled {
    pointer-events: none;
    cursor: default;
}

/*-------------------- Text in placeholder -------------*/

input::placeholder {
    overflow: visible;
}

.bs-stepper-title {
    margin-bottom: 4px;
    margin-top: 4px;
}



/*-------------------- bg -------------*/

.bg-gray-10 {
    background-color: #F8F8F9 !important;
}

.bg-gray-20 {
    background-color: #E8EAEB !important;
}

.bg-gray-75 {
    background-color: #646B73 !important;
}

.bg-warning-faeae7 {
    background-color: #FAEAE7 !important;
}

/*-------------------- tooltip -------------*/

.tooltip-inner {
    /* footnote */

    font-family: 'Sarabun';
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    /* identical to box height, or 140% */

    display: flex;
    align-items: center;
    text-align: center;
    /* Neutral/Grey0 */

    color: #FFFFFF;
    /* Inside auto layout */

    flex: none;
    order: 0;
    flex-grow: 0;
}
/*-------------------- hover -------------*/

.radio-checked:hover + label::before {
    content: "\2714";
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background-color: #2FB62D;
    color: white;
    margin-right: 5px;
    position: absolute;
    top: 18px;
    right: 14px;
    transform: translate(50%, -50%);
}

.form-check.custom-option:hover {
    border: 1px solid #000;
    border-color: #74045F;
}

.dropdown-menu.list-appointment li:hover {
    background-color: #EFD7EB;
    color: #74045F;
}

/*-------------------- daterangepicker -------------*/

.daterangepicker.single .drp-selected {
    display: none;
}


/*-------------------- daterangepicker -------------*/

table.dataTable thead .sorting:before {
    top: 0.3rem;
}

table.dataTable thead .sorting:after {
    bottom: 1rem;
}

/*-------------------- Nav Pills -------------*/

.nav-pills .account-tab.active, .nav-pills .account-tab.active:hover, .nav-pills .account-tab.active:focus {
    color: #FFFFFF !important;
    background: #74045F;
    border: 1px solid rgba(79, 11, 105, 0.3);
    border-radius: 6px;
}

.nav-pills .account-tab:not(.active, .disabled) {
    color: #BE6DAF !important;
    background: #F6DEF2;
    border-radius: 6px;
}

/*-------------------- dairy calendar -------------*/
.dairy-bg-primary {
    background-color: rgba(150, 61, 133, 0.2) !important;
    border-left: 5px solid #74045F !important;
    border-radius: 5px !important;
}

.dairy-bg-warning {
    background-color: rgba(255, 171, 0, 0.2) !important;
    border-left: 5px solid #C7911B !important;
    border-radius: 5px !important;
}

.dairy-bg-info {
    background-color: rgba(20, 105, 233, 0.2) !important;
    border-left: 5px solid #1469E9 !important;
    border-radius: 5px !important;
}

.dairy-bg-success {
    background-color: rgba(113, 221, 55, 0.2) !important;
    border-left: 5px solid #2FB62D !important;
    border-radius: 5px !important;
}

.appointment-daily-border {
    border-left: 5px solid #000 !important;
    border-radius: 5px !important;
}

/*-------------------- full calendar -------------*/
.fc-toolbar-title {
    font-size: 20px !important;
    line-height: 30px;
    color: #292C2F !important;
}

.fc-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-date-selected {
    background-color: blue;
}

.fc .fc-daygrid-day-frame {
    position: relative;
    min-height: 100px !important;
    max-height: 110px !important;
    overflow: hidden;
}

/* key account */
.bg-pink-tel-md {
    padding: 8px 0px 6px 26px;
    width: 160px;
    height: 38px;
    background: #D052AD !important;
    border-radius: 100px !important;
    color: #fff !important;
}

.bg-pink-tel-xl {
    padding: 8px 0px 6px 26px;
    width: 210px;
    height: 38px;
    background: #D052AD !important;
    border-radius: 100px !important;
    color: #fff !important;
}

.fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button) {
    color: #74045F !important;
    border: 1px solid #000 !important;
    border-color: #74045F !important;
    /*background: transparent !important;*/
    background-color: #FFFFFF !important;
}

    .fc .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover {
        color: #ffffff !important;
    }

.light-style .fc .fc-day-today {
    background-color: #F6DEF2 !important;
    border-top: 2px solid #BE6DAF !important;
}

.fc-daygrid-more-link.fc-more-link {
    color: #577CFF !important;
}

.fc-day-past .light-style .fc-event-success:not(.fc-list-event) {
    background-color: gray;
}


/*-------------------- radio hover -------------*/

.rdo-register {
    color: #292C2F !important;
    font-size: 16px;
    font-weight: 400;
}

.rdo-label {
    padding: 1.6px 0px 0px 0px;
}

.img-cover {
    object-fit: cover;
    max-width: 100%;
    height: auto;
}

pre {
    font-family: 'Sarabun' !important;
}

.pre-detail {
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 300px !important;
}

/*-------------------- modal -------------*/

@media screen and (max-width: 767px) {
    .modal-dialog {
        width: 85% !important;
    }
}