.DTtable-search {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -37px;
    right: 116px;
    height: 37px;
    padding: 0 8px;
    background: #fff;
    color: #007BFF;
    z-index: 9;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid rgba(0, 123, 255, 0.5);
    border-right: 1px solid rgba(0, 123, 255, 0.5);
    border-bottom: 1px solid rgba(0, 123, 255, 0.5);
    opacity: 0;
    visibility: hidden;
    animation: ignielDelay .75s 2s forwards;
    -moz-animation: ignielDelay .75s 2s forwards;
    -webkit-animation: ignielDelay .75s 2s forwards;
    -o-animation: ignielDelay .75s 2s forwards;
}

.DTtable-search2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -37px;
    right: 8px;
    height: 37px;
    padding: 0 8px;
    background: #fff;
    color: #007BFF;
    z-index: 9;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: 1px solid rgba(0, 123, 255, 0.5);
    border-right: 1px solid rgba(0, 123, 255, 0.5);
    border-bottom: 1px solid rgba(0, 123, 255, 0.5);
    opacity: 0;
    visibility: hidden;
    animation: ignielDelay .75s 2s forwards;
    -moz-animation: ignielDelay .75s 2s forwards;
    -webkit-animation: ignielDelay .75s 2s forwards;
    -o-animation: ignielDelay .75s 2s forwards;
}

#mySearchText {
    display: none;
}


#SearchButton {
    position: absolute;
    right: 24px;
    top: 16px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-size: 22px;
    color: #fff;
    border-radius: 5px;
    border: none;
    height: 37px;
    width: 45px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    animation: ignielDelay .75s 3s forwards;
    -moz-animation: ignielDelay .75s 3s forwards;
    -webkit-animation: ignielDelay .75s 3s forwards;
    -o-animation: ignielDelay .75s 3s forwards;
}

#mySearchButton {
    position: absolute;
    right: 32px;
    top: 40px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-size: 20px;
    color: #fff;
    border-radius: 5px;
    border: none;
    height: 31px;
    width: 40px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    animation: ignielDelay .75s 2s forwards;
    -moz-animation: ignielDelay .75s 2s forwards;
    -webkit-animation: ignielDelay .75s 2s forwards;
    -o-animation: ignielDelay .75s 2s forwards;
}


@keyframes ignielDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-webkit-keyframes ignielDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-moz-keyframes ignielDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

.containerSearch {
    position: relative;
    width: 250px;
    /* width: 100%; */
}

.containerSearch .srch {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #bbb;
    width: 22px;
    text-align: right;
    background: #fff;
}

.content-wrapper {
    background-color: #FAFBFC;
    /* background-color: #f7f7f7; */
}

@media screen and (max-width: 600px) {
    .containerSearch {
        width: 100%;
    }

    .widthDateRange,
    .widthDateRange2 {
        width: 100% !important;
    }
}

@media screen and (max-width: 400px) {
    .login-username {
        font-size: 12px;
    }
}

/* =========== NAVBAR COLLAPSED =========== */

.NavbarCollapse {
    position: relative;
    top: 0;
    left: -.6rem;
    margin-top: .1rem;
}

.NavbarCollapse span {
    display: block;
    background-color: #68717A;
    height: 3px;
    width: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
    position: relative;
    left: 0;
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

.NavbarCollapse .nav1 {
    transform: translate(15%, -33%) rotate(45deg);
}

.NavbarCollapse .nav2 {
    opacity: 0;
}

.NavbarCollapse .nav3 {
    transform: translate(15%, 33%) rotate(-45deg);
}

.sidebar-collapse .nav1 {
    transform: translate(0%, 0%) rotate(0deg);
}

.sidebar-collapse .nav2 {
    opacity: 1;
}

.sidebar-collapse .nav3 {
    transform: translate(0%, 0%) rotate(0deg);
}

.containerCaret {
    position: absolute;
    top: 22px;
    right: -20px;
    width: 20px;
    height: 35px;
    z-index: 9999;
}

.containerCaret .caretBar {
    padding: 7px 5px 5px 5px;
    background: #0069D9;
    border-radius: 0px 8px 8px 0px;
}

.containerCaret .caretBar i {
    color: #fff;
    font-size: 20px;
    transition: .4s;
}

.caretBar.active i {
    transform: rotate(180deg);
    transition: .4s;
}

@media screen and (min-width: 990px) {
    .main-sidebar {
        overflow-y: auto !important;
    }

    .containerCaret {
        display: none;
    }
}

@media screen and (max-width: 990px) {
    .NavbarCollapse {
        display: none;
    }

}

/* =========== NAVBAR COLLAPSED =========== */

/* MENU BAR 3 */


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

.navigations {
    position: relative;
    width: 500px;
    height: 85px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    box-shadow: 2px 2px 8px #dddddd;
}

.navigations ul {
    display: flex;
    width: 440px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navigations ul li {
    position: relative;
    list-style: none;
    width: 300px;
    height: 70px;
    z-index: 1;
    /* background-color: #00DB76 */
}

.navigations ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
    font-weight: 500;
    margin-top: -8px;
}

.navigations ul li a .icon {
    position: relative;
    display: block;
    line-height: 44px;
    font-size: 1.6em;
    text-align: center;
    transition: 0.5s;
    color: #888;
}

.navigations ul li.active a .icon {
    transform: translateY(-28px);
    color: #fff;
}

.navigations ul li a .text {
    position: absolute;
    font-weight: 600;
    font-size: 0.8em;
    letter-spacing: 0.05em;
    transition: 0.5s;
    transform: translateY(30px);
    color: #666;
}

.navigations ul li.active a .text {
    transform: translateY(25px);
    font-size: 0.9em;
}

.indicators,
.indicators2 {
    position: absolute;
    top: -35px;
    width: 70px;
    height: 70px;
    background: #007bff;
    border-radius: 50%;
    border: 8px solid #f1f1f1;
    transition: 0.4s;
}

.indicators:before,
.indicators2:before {
    content: "";
    position: absolute;
    top: 51%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 0px -10px 0 0 #f1f1f1;
}

.indicators:after,
.indicators2:after {
    content: "";
    position: absolute;
    top: 51%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: 0px -10px 0 0 #f1f1f1;
}

.navigations ul li:nth-child(1).active~.indicators {
    transform: translateX(calc(39px * 1));
}

.navigations ul li:nth-child(2).active~.indicators {
    transform: translateX(calc(93px * 2));
}

.navigations ul li:nth-child(3).active~.indicators {
    transform: translateX(calc(111px * 3));
}

.navigations ul li:nth-child(1).active~.indicators2 {
    transform: translateX(calc(75px * 1));
}

.navigations ul li:nth-child(2).active~.indicators2 {
    transform: translateX(calc(147px * 2));
}

@media screen and (max-width: 480px) {
    .navigations {
        width: 330px;
    }

    .navigations ul {
        width: 300px;
    }

    .navigations ul li {
        width: 300px;
    }

    .navigations ul li a .text {
        font-size: 0.7em;
    }

    .navigations ul li.active a .text {
        font-size: 0.8em;
    }

    .navigations ul li:nth-child(1).active~.indicator2 {
        transform: translateX(calc(15px * 1));
    }

    .navigations ul li:nth-child(2).active~.indicator2 {
        transform: translateX(calc(58px * 2));
    }

    .navigations ul li:nth-child(3).active~.indicator2 {
        transform: translateX(calc(72px * 3));
    }

    .navigations ul li:nth-child(1).active~.indicators2 {
        transform: translateX(calc(41px * 1));
    }

    .navigations ul li:nth-child(2).active~.indicators2 {
        transform: translateX(calc(95px * 2));
    }
}

/* END MENU BAR 3 */

a:hover {
    outline: none;
    text-decoration: none;
}

* {
    font-family: 'poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.f-poppins {
    font-family: Poppins;
}

.w-405 {
    max-width: 405px;
}

.w-5-percent {
    width: 5% !important;
}

.w-10-percent {
    width: 10% !important;
}

.w-15-percent {
    width: 15% !important;
}

.w-20-percent {
    width: 20% !important;
}

.w-25-percent {
    width: 25% !important;
}

.w-30-percent {
    width: 30% !important;
}

.w-35-percent {
    width: 35% !important;
}

.w-40-percent {
    width: 40% !important;
}

.w-45-percent {
    width: 45% !important;
}

.w-50-percent {
    width: 50% !important;
}

.w-55-percent {
    width: 55% !important;
}

.w-60-percent {
    width: 60% !important;
}

.w-50 {
    width: 50% !important;
}

.wh-10 {
    width: 10px !important;
    height: 10px !important;
}

.wh-26 {
    width: 26px !important;
    height: 26px !important;
}

.wh-35 {
    width: 35px !important;
    height: 35px !important;
}

.wh-37 {
    width: 37px !important;
    height: 37px !important;
}

.w-22 {
    width: 22px !important;
}

.w-35 {
    width: 35px !important;
}

.w-65 {
    width: 65px !important;
}

.w-72 {
    width: 72px !important;
}

.w-85 {
    width: 85px !important;
}

.w-95 {
    width: 95px !important;
}

.w-105 {
    width: 105px !important;
}

.w-120 {
    width: 120px !important;
}

.w-130 {
    width: 130px !important;
}

.w-140 {
    width: 140px !important;
}

.w-150 {
    width: 150px !important;
}

.w-200 {
    width: 200px !important;
}

.minw-200 {
    width: 200px !important;
}

@media screen and (max-width: 490px) {

    .w-200,
    .w-130 {
        width: 100% !important;
    }
}

.h-416 {
    height: 416px;
}

.mh-530 {
    max-height: 530px;
}

.mh-530 {
    max-height: 530px;
}

.no-wrap {
    white-space: nowrap
}

.scroll-y {
    overflow-y: scroll;
}

.ml-min7 {
    margin-left: -7px;
}

.ml-min14 {
    margin-left: -14px;
}

.decor-none {
    text-decoration: none;
}

.noted-text {
    font-weight: 400;
    font-size: 11px;
    line-height: 15px;
    color: #FB5B5B;
}

.title-10 {
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
}

.title-10-grey {
    font-weight: 400;
    font-size: 10px;
    line-height: 16px;
    color: #68717A;
}

.title-12-blue {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #0073ee;
}

.title-12-grey {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #68717A;
}

.title-12-grey2 {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #68717A;
}

.title-12-grey3 {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #455A64;
}

.title-12-grey4 {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #455A64;
}

.title-12-dark {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #2b2b2b;
}

.title-12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #000;
}

.title-12B {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: #000;
}

.title-13 {
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    color: #68717A;
}

.sub-title-14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #545454;
}

.title-14-dark {
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #68717A;
}

.title-14-dark-500 {
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: #68717A;
}

.title-14-dark2 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #2b2b2b;
}

.title-14-dark3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #2b2b2b;
}

.title-14-dark4 {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #4B575E;
}

.title-14-dark5 {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #4B575E;
}

.title-14 {
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    color: #000000;
}

.title-14-grey {
    font-weight: 500;
    font-size: 14px;
    line-height: 26px;
    color: #545454;
}

.title-14-light {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #D3D3D3;
}

.title-14-darkblue {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #3A5BA0;
}

.title-14vw {
    font-weight: 400;
    font-size: 1vw;
    line-height: 21px;
    color: #000;
}

.title-15 {
    font-weight: 500;
    font-size: 15px;
    line-height: 21px;
    color: #000000;
}

.title-16 {
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
}

.title-16-400 {
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
}

.title-16-500 {
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #000000;
}

.title-16-blue {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #007BFF;
}

.title-16-blue-400 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #007BFF;
}

.title-16-grey {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #68717A;
}

.title-16-grey2 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #68717A;
}

.title-16-dark {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #2B2B2B;
}

.title-16-dark2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #2B2B2B;
}

.title-16-dark3 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #455A64;
}

.title-16-dark-blue {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #3F6A99;
}

.title-16-dark-blue2 {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #455A64;
}

.title-18 {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
}

.title-18vw {
    font-weight: 500;
    font-size: 1.4vw;
    line-height: 27px;
    color: #000000;
}

.title-18-dark {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #263238;
}

.title-18-dark2 {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    color: #263238;
}

.title-inner {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #444;
}

.title-24 {
    font-weight: 500;
    font-size: 24px;
    line-height: 27px;
    color: #000000;
}

.title-26 {
    font-weight: 500;
    font-size: 26px;
    line-height: 30px;
    color: #565656;
}

.title-28 {
    font-weight: 500;
    font-size: 28px;
    line-height: 27px;
    color: #000000;
}

.title-28-grey {
    font-weight: 500;
    font-size: 28px;
    line-height: 27px;
    color: #2b2b2b;
}

.title-28-grey2 {
    font-weight: 600;
    font-size: 28px;
    line-height: 27px;
    color: #2b2b2b;
}

.title-28-dark-blue {
    font-weight: 500;
    font-size: 28px;
    line-height: 27px;
    color: #263238;
}

.title-30 {
    font-weight: 500;
    font-size: 30px;
    line-height: 27px;
    color: #000000;
}

.title-30-grey {
    font-weight: 500;
    font-size: 30px;
    line-height: 27px;
    color: #2b2b2b;
}

.title-32-grey {
    font-weight: 500;
    font-size: 32px;
    line-height: 27px;
    color: #455A64;
}

.title-32-400 {
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    color: #2B2B2B;
}

.title-32 {
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
}

.title-20-blue {
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    color: #007bff;
}

.title-20-grey {
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    color: #2B2B2B;
}

.title-20-dark {
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    color: #797979;
}

.title-20G {
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    color: #797979;
}

.title-20-dark2 {
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    color: #263238;
}

.title-20-dark-blue {
    font-weight: 500;
    font-size: 20px;
    line-height: 27px;
    color: #3F6A99;
}

.title-20-dark-blue2 {
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: #455A64;
}

.title-24-grey {
    font-weight: 500;
    font-size: 24px;
    line-height: 27px;
    color: #5A5A5A;
}

.title-24-dark {
    font-weight: 500;
    font-size: 24px;
    line-height: 27px;
    color: #2b2b2b;
}

.title-24-dark2 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #455A64;
}

.title-24-dark3 {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #263238;
}

.title-24-blue {
    font-weight: 500;
    font-size: 24px;
    line-height: 27px;
    color: #007bff;
}

.title-24-600-dark {
    font-weight: 600;
    font-size: 24px;
    line-height: 27px;
    color: #2b2b2b;
}

.titleAbsolute {
    position: absolute;
}

.main-title {
    font-weight: 500;
    font-size: 24px;
    margin-left: -8px;
    color: #000000;
}

.pdt-tbl {
    padding-top: 2rem !important;
}

.pdt-tbl2 {
    padding-top: 2.8rem !important;
}

.pdb-tbl {
    padding-bottom: 2rem !important;
}

.bg-thead {
    background: #f9fafc !important;
}

.bg-thead2 {
    background: #f9fcff !important;
}

.bg-thead3 {
    background: #FFFCF4 !important;
}

.bg-main {
    background: #fff;
    color: #007BFF;
}

.bg-main:hover {
    color: #fff;
}

.h-240 {
    height: 240px;
}

.h-220 {
    height: 220px !important;
}

.h-190 {
    height: 190px;
}

.h-185 {
    height: 185px;
}

.h-170 {
    height: 170px;
}

.h-160 {
    height: 160px;
}

.h-155 {
    height: 155px;
}

.h-150 {
    height: 150px;
}

.h-148 {
    height: 148px;
}

.h-134 {
    height: 134px;
}

.h-115 {
    height: 115px;
}

.h-109 {
    height: 109px;
}

.h-72 {
    height: 72px !important;
}

.h-68 {
    height: 68px !important;
}

.h-64 {
    height: 64px !important;
}

.h-73vh {
    height: 73vh !important;
}

.mh-58vh {
    max-height: 58vh !important;
}

.mh-70vh {
    max-height: 70vh !important;
}

.mh-73vh {
    max-height: 73vh !important;
}

.pd-main {
    padding: 30px;
}

.main-icon {
    font-size: 40px;
}

.o-hidden {
    overflow: hidden;
}

.main-col-3 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 10px;
}

@media screen and (max-width: 1070px) {
    .main-col-3 {
        position: relative;
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 765px) {
    .main-col-3 {
        position: relative;
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 520px) {
    .main-col-3 {
        position: relative;
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}


.main-icon-dot {
    position: relative;
    top: -3px;
    padding: 0 10px;
    font-size: 5px;
}

.main-name {
    margin-top: 12px;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
}

.main-desc {
    margin-top: 10px;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    color: #8f99a1;
}

.main-cards {
    position: relative;
    margin-bottom: 18px;
    border: 0px;
    border-radius: 20px;
    /* box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15); */
    background: #fff;
    transition : all ease-in-out .3s;
    height: 200px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.main-cards .col-12{
    overflow: hidden;
    height: 135px;
}

.main-cards:hover  {
    transition : all ease-in-out .3s;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.15) 0px 50px 100px -20px, rgba(0, 0, 0, 0.2) 0px 30px 60px -30px;;
    color: #0073EE;
    transform: scale(1);
    border: 1px solid #0073EE;
    /* content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    filter: blur(40px);
    border-radius: 50%; */
    /* background: #0073EE; */
    /* transition: width .7s, height .7s; */
}

.main-cards:hover .main-desc{
    color: #007BFF;
}

/* .main-cards:hover::before {
    width: 500px;
    height: 500px;
} */

.border-bottom {
    border-bottom: 1px solid #D5D5D5;
}

.border-55 {
    width: 55px;
    height: 1px;
    border-bottom: 2px solid #007BFF;
}

.border-100 {
    width: 100px;
    height: 1px;
    border-bottom: 2px solid #007BFF;
}

.flat-card {
    position: relative;
    border: 0;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 15px;
    overflow: hidden;
}

.card-flat {
    position: relative;
    border: 0;
    border-radius: 20px;
    background: #fff;
    margin-bottom: 18px;
    overflow: hidden;
}

.cardFlat {
    position: relative;
    background: #fff;
    border: 1px solid #f2f2f2;
    margin-bottom: 18px;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.2);
    transition: .6s ease-in-out;
}

.cardFlat.hover:hover {
    border: 1px solid #007bff !important;
    transition: .6s ease-in-out;
}

.cardFlat.active {
    border: 1px solid #007bff !important;
    transition: .6s ease-in-out;
}

.border-bottom-blue {
    border-bottom: 2px solid #007bff !important;
}

.pd-flat-card {
    padding: 20px 25px;
}

.cards {
    margin-bottom: 18px;
    border: 0px;
    border-radius: 10px;
    /* box-shadow: 0px 20px 20px #F0F4FF; */
    background: #fff;
}

.cards.hoverOrange {
    border: 1px solid transparent;
    transition: .4s;
}

.cards.hoverOrange:hover {
    border: 1px solid #FFAE00;
    transition: .4s;
}

.cards2 {
    margin-bottom: 10px;
    border: 0px;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.cards3 {
    position: relative;
    margin-bottom: 16px;
    border: 0px;
    background: #fff;
    z-index: 99;
    box-shadow: 0px 0px 20px rgba(240, 240, 240, 0.2);
}

.cards4 {
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
    border-radius: 20px;
    margin-bottom: 16px;
}

.cards-20 {
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
    border-radius: 20px;
}

.cardTransparent {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    border: 1px solid transparent;
    transition: .4s;
    width: 100%;
}

.cardTransparent:hover {
    border: 1px solid #FFAE00;
    transition: .4s;
}

.round-20 {
    border-radius: 20px !important;
}

.round-20-head {
    border-radius: 20px 20px 0 0 !important;
}

.round-20-body {
    border-radius: 0 0 20px 20px !important;
}

.cards-part {
    border: 1px solid #f2f2f2;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
    margin-bottom: 16px;
}

.cards-part.border-light {
    border: 1px solid #fafbfc !important;
}

.cards-head {
    position: relative;
    padding: 1rem;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    box-shadow: 0px 5px 20px rgba(242, 242, 242, 0.7);
}

.cards-head.border-head {
    border-bottom: 1px solid #fafbfc !important;
}

.cards-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: transparent;
    box-shadow: 0px 5px 20px rgba(223, 223, 223, 0.7);
}

.cards-body {
    padding: 0 1rem 1rem 1rem;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
}

.cards-apar {
    margin-bottom: 10px;
    border: 0px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
}

.cards-scan {
    margin-bottom: 10px;
    border: 0px;
    background: #dadada;
    height: 500px;
}

.cards-controll {
    height: 200px;
    background: linear-gradient(141.04deg, #FB5B5B 25.2%, #EE0000 104.68%);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    text-align: center;
}

.cards-controll2 {
    height: 200px;
    background: #007BFF;
    border-radius: 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.cards-scroll {
    border: 0px;
    width: 100%;
    /* background: #0cae63; */
}

/* CARD CLODE */

.card-close-orange {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    position: relative;
    background: #FFF9EE;
}

.card-close-orange .txt-orange {
    font-size: 13px;
    color: #F9B935;
}

.card-close-orange .close-icon {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #F9B935;
    margin-left: .5rem;
}

.card-close-pink {
    /* display: inline-flex;
    justify-content: start;
    align-items: center; */
    position: relative;
    background: #FFEFEF;
}

.card-close-pink .txt-pink {
    font-size: 13px;
    color: #fb5b5b;
}

.card-close-pink .close-icon {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #fb5b5b;
    width: 50px;
    text-align: right;
}

/* END CARD CLODE */

.borderlight {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #c5c5c5;
}

.borderTbl {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #777;
}

.borderlight2 {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #ddd;
}

.borderlight3 {
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #F0F0F0;
}

.dotSpace {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.dotSpace .dot1,
.dotSpace .dot2,
.dotSpace .dot3,
.dotSpace .dot4 {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #949EAE;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top-position {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
        z-index: 1020;
    }
}

.stickyHeader {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
}

.stickyHeader2 {
    background: #fff;
    position: sticky;
    top: -1px;
    z-index: 9;
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f3f3f3;
}

.hoverBlue:hover {
    background-color: #e3f0ff;

}

.relative {
    position: relative;
}

.zIndex {
    z-index: 9;
}

.opacity-0 {
    opacity: 0;
}

.br-0 {
    border-radius: 0 !important;
}

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

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

.br-8 {
    border-radius: 8px !important;
}

.br-20 {
    border-radius: 20px !important;
}

.br-20-top {
    border-radius: 20px 20px 0 0 !important;
}

.br-20-bot {
    border-radius: 0 0 20px 20px !important;
}

/* ================  BLUE NAV TABS  ================== */

.blue-md-tabs {
    position: relative;
    left: -6px;
    width: 100%;
}

.blue-md-tabs .nav-item-show {
    width: calc(100% / 6);
    text-align: center;
}

.blue-md-tabs .nav-item-show .nav-link {
    color: #68717a;
    font-size: 16px;
    font-weight: 500;
    border: none;
}

.blue-md-tabs .nav-item-show .nav-link.active~.blue-slide {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs .nav-item-show .nav-link~.blue-slide {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs .nav-item-show a {
    padding: 10px 0 !important;
    color: #474747;
}

.blue-md-tabs .nav-item.open .nav-link,
.blue-md-tabs .nav-item.open .nav-link:focus,
.blue-md-tabs .nav-item.open .nav-link:hover,
.blue-md-tabs .nav-link.active,
.blue-md-tabs .nav-link.active:focus,
.blue-md-tabs .nav-link:hover {
    background-color: transparent;
    color: #222;
    border: none;
}

.nav-tabs .blue-slide {
    background: #007bff;
    width: calc(100% / 6);
    height: 3px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

/* ================ END BLUE NAV TABS  ================== */

/* ================  BLUE NAV TABS 2  ================== */

.blue-md-tabs2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.blue-md-tabs2 .nav-item-show {
    width: calc(100% / 7);
    text-align: center;
    border: 1px solid #ECECEC;
}

.blue-md-tabs2 .nav-item-show .nav-link {
    color: #68717a;
    font-size: 15px;
    font-weight: 400;
    border: none;
}

.blue-md-tabs2 .nav-item-show .nav-link.active~.blue-slide2 {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs2 .nav-item-show .nav-link~.blue-slide2 {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs2 .nav-item-show a {
    padding: 12px 0 !important;
    color: #474747;
}

.blue-md-tabs2 .nav-item.open .nav-link,
.blue-md-tabs2 .nav-item.open .nav-link:focus,
.blue-md-tabs2 .nav-item.open .nav-link:hover,
.blue-md-tabs2 .nav-link.active,
.blue-md-tabs2 .nav-link.active:focus,
.blue-md-tabs2 .nav-link:hover {
    /* background-color: #f2f9ff; */
    background-color: #f7f7f7;
    color: #007bff;
    border: none;
}

.nav-tabs .blue-slide2 {
    background: #007bff;
    width: calc(100% / 7);
    height: 2px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    top: 0;
}

@media screen and (max-width: 900px) {

    .blue-md-tabs2 .nav-item-show {
        width: calc(100% / 5);
    }

    .nav-tabs .blue-slide2 {
        width: calc(100% / 5);
    }
}

@media screen and (max-width: 600px) {

    .blue-md-tabs2 .nav-item.open .nav-link,
    .blue-md-tabs2 .nav-item.open .nav-link:focus,
    .blue-md-tabs2 .nav-item.open .nav-link:hover,
    .blue-md-tabs2 .nav-link.active,
    .blue-md-tabs2 .nav-link.active:focus,
    .blue-md-tabs2 .nav-link:hover {
        background-color: #d3eaff;
        color: #007bff;
        border: none;
    }

    .blue-md-tabs2 .nav-item-show {
        width: calc(100% / 1);
    }

    .nav-tabs .blue-slide2 {
        background: transparent;
        width: calc(100% / 1);
        height: 0;
    }
}

/* ================ END BLUE NAV TABS 2  ================== */

/* ================  BLUE NAV TABS 3 LG  ================== */

.blue-md-tabs3 {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    width: 100%;
}

.blue-md-tabs3 .nav-item-show {
    background: #fff;
    width: calc(100% / 5);
    text-align: center;
    border: 1px solid #ECECEC;
}

.blue-md-tabs3 .nav-item-show .nav-link {
    color: #68717a;
    font-size: 15px;
    font-weight: 400;
    border: none;
}

.blue-md-tabs3 .nav-item-show .nav-link.active~.blue-slide3 {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs3 .nav-item-show .nav-link~.blue-slide3 {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-md-tabs3 .nav-item-show a {
    padding: 12px 0 !important;
    color: #474747;
}

.blue-md-tabs3 .nav-item.open .nav-link,
.blue-md-tabs3 .nav-item.open .nav-link:focus,
.blue-md-tabs3 .nav-item.open .nav-link:hover,
.blue-md-tabs3 .nav-link.active,
.blue-md-tabs3 .nav-link.active:focus,
.blue-md-tabs3 .nav-link:hover {
    /* background-color: #f2f9ff; */
    background-color: #f7f7f7;
    color: #007bff;
    border: none;
}

.nav-tabs .blue-slide3 {
    background: #007bff;
    width: calc(100% / 5);
    height: 2px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    top: 0;
}

@media screen and (max-width: 1115px) {

    .blue-md-tabs3 .nav-item-show {
        width: calc(100% / 4);
    }

    .nav-tabs .blue-slide3 {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 850px) {

    .blue-md-tabs3 .nav-item-show {
        width: calc(100% / 2);
    }

    .nav-tabs .blue-slide3 {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 600px) {

    .blue-md-tabs3 .nav-item.open .nav-link,
    .blue-md-tabs3 .nav-item.open .nav-link:focus,
    .blue-md-tabs3 .nav-item.open .nav-link:hover,
    .blue-md-tabs3 .nav-link.active,
    .blue-md-tabs3 .nav-link.active:focus,
    .blue-md-tabs3 .nav-link:hover {
        background-color: #d3eaff;
        color: #007bff;
        border: none;
    }

    .blue-md-tabs3 .nav-item-show {
        width: calc(100% / 1);
    }

    .nav-tabs .blue-slide3 {
        background: transparent;
        width: calc(100% / 1);
        height: 0;
    }
}

/* ================ END BLUE NAV TABS 3  ================== */


/* ================  BLUE NAV TABS 3 SM  ================== */

.blue-sm-tabs3 {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    width: 100%;
}

.blue-sm-tabs3 .nav-item-show {
    background: #fff;
    width: calc(100% / 7);
    text-align: center;
    border: 1px solid #ECECEC;
}

.blue-sm-tabs3 .nav-item-show .nav-link {
    color: #68717a;
    font-size: 15px;
    font-weight: 400;
    border: none;
}

.blue-sm-tabs3 .nav-item-show .nav-link.active~.blue-sm-slide3 {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-sm-tabs3 .nav-item-show .nav-link~.blue-sm-slide3 {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.blue-sm-tabs3 .nav-item-show a {
    padding: 12px 0 !important;
    color: #474747;
}

.blue-sm-tabs3 .nav-item.open .nav-link,
.blue-sm-tabs3 .nav-item.open .nav-link:focus,
.blue-sm-tabs3 .nav-item.open .nav-link:hover,
.blue-sm-tabs3 .nav-link.active,
.blue-sm-tabs3 .nav-link.active:focus,
.blue-sm-tabs3 .nav-link:hover {
    /* background-color: #f2f9ff; */
    background-color: #f7f7f7;
    color: #007bff;
    border: none;
}

.nav-tabs .blue-sm-slide3 {
    background: #007bff;
    width: calc(100% / 7);
    height: 2px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    top: 0;
}

@media screen and (max-width: 1115px) {

    .blue-sm-tabs3 .nav-item-show {
        width: calc(100% / 4);
    }

    .nav-tabs .blue-sm-slide3 {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 850px) {

    .blue-sm-tabs3 .nav-item-show {
        width: calc(100% / 2);
    }

    .nav-tabs .blue-sm-slide3 {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 600px) {

    .blue-sm-tabs3 .nav-item.open .nav-link,
    .blue-sm-tabs3 .nav-item.open .nav-link:focus,
    .blue-sm-tabs3 .nav-item.open .nav-link:hover,
    .blue-sm-tabs3 .nav-link.active,
    .blue-sm-tabs3 .nav-link.active:focus,
    .blue-sm-tabs3 .nav-link:hover {
        background-color: #d3eaff;
        color: #007bff;
        border: none;
    }

    .blue-sm-tabs3 .nav-item-show {
        width: calc(100% / 1);
    }

    .nav-tabs .blue-sm-slide3 {
        background: transparent;
        width: calc(100% / 1);
        height: 0;
    }
}

/* ================ END BLUE NAV TABS 3 SM  ================== */

/* ================  ROUNDED NAV TABS  ================== */

.round-tabs {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: #ffffff;
    padding-top: 1rem;
    width: 100%;
    z-index: 99;
}

.round-tabs.BoxShadow {
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.08)
}

.round-tabs .nav-item-show {
    display: inline-block;
    background: transparent;
    /* width: calc(100% / 9); */
    min-width: 150px;
    text-align: center;
}

.round-tabs .nav-item-show .nav-link {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    color: #68717A;
    border: none;
    transition: .4s;
}

.round-tabs .nav-item-show a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    padding: 12px !important;
}

.round-tabs .nav-item.open .nav-link:hover,
.round-tabs .nav-link:hover {
    background-color: #f4f7ff;
    /* background: #0065d1; */
    color: #ffae00;
    border: none;
    border-radius: 12px 12px 0 0;
    transition: .4s;
}

.round-tabs .nav-item.open .nav-link,
.round-tabs .nav-item.open .nav-link:focus,
.round-tabs .nav-link.active,
.round-tabs .nav-link.active:focus {
    background-color: #f4f7ff;
    /* background: #0065d1; */
    color: #ffae00;
    font-weight: 500;
    border: none;
    border-radius: 12px 12px 0 0;
    transition: .4s;
}

.round-tabs .nav-link:hover::before,
.round-tabs .nav-link.active::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: -17px;
    width: 17px;
    height: 17px;
    background: transparent;
    transform: rotate(90deg);
    border-top-right-radius: 20px;
    box-shadow: 0px -8px 0 0 #f4f7ff;
}

.round-tabs .nav-link:hover::after,
.round-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -17px;
    width: 17px;
    height: 17px;
    background: transparent;
    transform: rotate(-90deg);
    border-top-left-radius: 20px;
    box-shadow: 0px -8px 0 0 #f4f7ff;
}

@media screen and (max-width: 1115px) {
    .round-tabs {
        justify-content: start;
    }
}

/* ================ END ROUNDED NAV TABS  ================== */

/* ================  NAV TABS BLUE  ================== */

.navBlue {
    position: relative;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    background: #E2F0FF;
    height: 45px;
    padding: 0 2px;
    border-radius: 12px;
}

.navBlue .nav-item-show {
    padding: 3px;
    text-align: center;
    /* min-width: 100px; */
    transition: background .6s ease;
}

.navBlue .nav-item-show .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    padding: 0 20px;
    line-height: 21px;
    color: #007BFF;
    white-space: nowrap;
}

.navBlue .nav-item.open .nav-link,
.navBlue .nav-item.open .nav-link:focus,
.navBlue .nav-item.open .nav-link:hover,
.navBlue .nav-link.active,
.navBlue .nav-link.active:focus,
.navBlue .nav-link:hover {
    height: 37px;
    background-color: #007bff;
    color: #fff;
    border-radius: 10px;
    border: none;
    transition: background .6s ease;
}

@media screen and (max-width: 850px) {
    .navBlue {
        height: auto;
        width: 100%;
    }
}

/* ================ END NAV TABS  ================== */

/* ================  NAV TABS ORANGE  ================== */

.navOrange {
    position: relative;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    background: #FFF6E3;
    height: 45px;
    padding: 0 2px;
    border-radius: 12px;
    z-index: 39;
}

.navOrange.nav-100 {
    flex-wrap: nowrap !important;
    width: 100%;
}

.navOrange .nav-item-show {
    padding: 3px;
    text-align: center;
    /* min-width: 100px; */
    transition: background .6s ease;
}

.navOrange .nav-item-show .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    padding: 0 18px;
    line-height: 21px;
    color: #FFAE00;
    white-space: nowrap;
}

.navOrange .nav-item.open .nav-link,
.navOrange .nav-item.open .nav-link:focus,
.navOrange .nav-item.open .nav-link:hover,
.navOrange .nav-link.active,
.navOrange .nav-link.active:focus,
.navOrange .nav-link:hover {
    height: 37px;
    background-color: #FFAE00;
    color: #fff;
    border-radius: 10px;
    border: none;
    transition: background .6s ease;
}

@media screen and (max-width: 850px) {
    .navOrange {
        flex-wrap: nowrap !important;
        height: auto;
        width: 100%;
    }
}

/* ================ END NAV TABS  ================== */

/* ================  NAV TABS BOTTOM ORANGE  ================== */

.orangeTabs {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.orangeTabs .nav-item-show {
    width: calc(100% / 6);
    text-align: center;
    border: 1px solid #ECECEC;
}

.orangeTabs .nav-side {
    width: calc(100% / 6);
    text-align: center;
    padding: 0 30px;
}

.orangeTabs .nav-item-show .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7rem;
    color: #68717a;
    font-size: 15px;
    font-weight: 400;
    border: none;
}

.orangeTabs .nav-item-show .nav-link .number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #F5F5F5;
    color: #949EAE;
    font-size: 14px;
    font-weight: 400;
}

.orangeTabs .nav-item-show .nav-link .numberOrange {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFF5E1;
    color: #FFB825;
    font-size: 14px;
    font-weight: 400;
}

.orangeTabs .nav-item-show .nav-link .checkGreen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #CCFFE7;
}

/* .orangeTabs .nav-item-show .nav-link.active~.sliderGreen,
.orangeTabs .nav-item-show .nav-link~.sliderOrange, */
.orangeTabs .nav-item-show .nav-link.active~.sliderOrange,
.orangeTabs .nav-item-show .nav-link.active~.sliderGreen,
.orangeTabs .nav-item-show .nav-link~.sliderGreen {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.orangeTabs .nav-item-show .nav-link~.sliderOrange,
.orangeTabs .nav-item-show .nav-link~.sliderGreen {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.orangeTabs .nav-item-show a {
    padding: 10px 0 !important;
    color: #474747;
}

.nav-tabs .sliderOrange {
    background: #FFB825;
    width: calc(100% / 6);
    height: 2px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

.nav-tabs .sliderGreen {
    background: #00DB76;
    width: calc(100% / 6);
    height: 2px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

@media screen and (max-width: 780px) {

    .orangeTabs .nav-item.open .nav-link,
    .orangeTabs .nav-item.open .nav-link:focus,
    .orangeTabs .nav-item.open .nav-link:hover,
    .orangeTabs .nav-link.active,
    .orangeTabs .nav-link.active:focus,
    .orangeTabs .nav-link:hover {
        background-color: #d3eaff;
        color: #007bff;
        border: none;
    }

    .orangeTabs .nav-item-show {
        width: calc(100% / 1);
    }

    .orangeTabs .nav-side {
        padding: 10px 30px;
        width: 300px;
    }

    .nav-tabs .sliderOrange,
    .nav-tabs .sliderGreen {
        background: transparent;
        width: calc(100% / 1);
        height: 0;
    }
}

.tab-pane.active {
    animation: slide-down .5s ease-out;
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(2%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================ END NAV TABS BOTTOM ORANGE  ================== */

.container-icon-or {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 6px;
    right: 9px;
    height: 26px;
    background-color: #fff;
}

.icon-or {
    color: rgba(104, 113, 122, 0.5);
    font-size: 18px;
}

.card-navigate {
    position: relative;
    border-radius: 14px;
    margin: -7px 5px 10px 5px;
    background-color: #fff;
    display: flex;
    justify-content: start;
    box-shadow: 2px 10px 20px rgba(221, 221, 221, 0.3);
    z-index: 9;
}

.breadContain {
    position: relative;
    margin: -7px 5px 10px 5px;
    background-color: #fff;
    display: flex;
    justify-content: start;
    border: 1px solid #eee;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.2);
    /* z-index: 9; */
}

.breadcrumb-item {
    /* padding: 13px 5px 13px 20px; */
}

.title-navigate {
    font-family: Poppins;
    font-size: 14px;
    font-weight: 400;
    color: #222;
}

.title-navigate:hover {
    text-decoration: none;
    color: #000;
}

.title-navigate-home {
    color: #007BFF;
}

.title-navigate-home:hover {
    color: #0068d8;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-32 {
    font-size: 32px !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    font-size: 20px;
    margin-right: -7px;
    filter: invert(55%);
    cursor: pointer;
}

.title-navigate-active {
    color: #fff;
    background: #007bff;
    padding-right: 14px;
    border-radius: 0px 8px 8px 0px;
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%);
}

.navigate-active {
    position: absolute;
    display: flex;
    border-left: 18px solid #fff;
    border-bottom: 56px solid transparent;
}


.scroll {
    margin-bottom: 30px;
    border: 0px;
    overflow-x: auto;
    overflow-y: auto;
}

.scrollY {
    /* margin-bottom: 30px; */
    border: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

.scrollX {
    /* margin-bottom: 30px; */
    border: 0px;
    overflow-x: auto;
    overflow-y: hidden;
}

#scrollBar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}


#scrollBar::-webkit-scrollbar-thumb {
    background: #dedede;
    border-radius: 8px;
}

#scroll-bar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#scroll-bar::-webkit-scrollbar-thumb {
    background: #bbb !important;
    border-radius: 8px;
}

#scroll-bar::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

#scroll-bar2::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#scroll-bar2::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 8px;
}

#scroll-bar3::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

#scroll-bar3::-webkit-scrollbar-thumb {
    background: #fff;
    border-radius: 8px;
}

#scroll-bar3::-webkit-scrollbar-track {
    background: #fff;
}

#scrollBlue::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

#scrollBlue::-webkit-scrollbar-thumb {
    background: #cfe6ff;
    border-radius: 8px;
}

#scrollBlue:hover::-webkit-scrollbar-thumb {
    background: #b0d6ff;
}

#scrollBlueXL::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#scrollBlueXL::-webkit-scrollbar-thumb {
    background: #cfe6ff;
    border-radius: 8px;
}

#scrollBlueXL:hover::-webkit-scrollbar-thumb {
    background: #b0d6ff;
}

#scrollOrangeHover::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    transition: .4s;
}

#scrollOrangeHover::-webkit-scrollbar-track,
#scrollOrangeHover::-webkit-scrollbar-thumb {
    background: transparent;
    transition: .4s;
}

#scrollOrangeHover:hover::-webkit-scrollbar-track {
    background: #fff3db;
    transition: .4s;
}

#scrollOrangeHover:hover::-webkit-scrollbar-thumb {
    background: #ffd988;
    border-radius: 8px;
    transition: .4s;
}

#scrollOrange::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

#scrollOrange::-webkit-scrollbar-track {
    background: #fff3db;
    transition: .4s;
}

#scrollOrange::-webkit-scrollbar-thumb {
    background: #ffd988;
    border-radius: 8px;
    transition: .4s;
}

#scrollNone::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#scrollNone::-webkit-scrollbar-thumb {
    background: transparent;
}

@media screen and (max-width: 520px) {

    .title-navigate,
    .title-navigate-active,
    .fs-18 {
        font-size: 12px;
    }

    .title-navigate-active .active {
        padding-right: 10px;
    }

    .breadcrumb-item {
        /* padding: 13px 5px 13px 8px; */
    }

    .title-20-dark-blue {
        font-size: 18px;
    }
}

@media screen and (max-width: 445px) {

    .card-navigate,
    .breadContain {
        display: none;
    }
}

.auditB-title,
.desc-notifHP {
    font-weight: 500;
    font-size: 22px;
    color: #000000;
    margin-bottom: 8px;
}

.hr-title {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
    margin-left: -8px;
}

.image-controll {
    position: relative;
    top: 17%;
}

.desc-controll {
    position: relative;
    top: 25%;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #FFFFFF;
}

.alertt {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-top: 8px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.alert-qr {
    color: #3c3c3c;
    background: rgba(248, 184, 46, 0.15);
    border: 1px solid #FB5B5B;
}

.alert-merah {
    color: #3c3c3c;
    background: rgba(251, 91, 91, 0.15);
    border: 1px solid #FB5B5B;
}

.alert-kuning {
    color: #3c3c3c;
    background: rgba(248, 184, 46, 0.15);
    border: 1px solid #F8B82E;
}

.alert-hijau {
    color: #3c3c3c;
    background: rgba(12, 174, 99, 0.15);
    border: 1px solid #0CAE63;
}

.icon-notification {
    position: absolute;
    width: 60px;
    height: 52px;
    top: 5px;
    left: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-Bwhite {
    background-color: #f8f8f8;
}

.bg-merah {
    background: #FB5B5B;
}

.bg-merah-muda {
    background: #FB5B5B;
}

.bg-softPink {
    background: #FFE7E7;
}

.bg-kuning {
    background: #F8B82E;
}

.bg-softOrange,
.bg-softYellow {
    background: #FFF1D4;
}

.bg-hijau {
    background: #0CAE63;
}

.bg-softGreen {
    background: #D7FFEC;
}

.bg-softBlue {
    background: #ECF5FF;
}

.bg-coklat {
    background: #d4782d;
}

.bg-orange {
    background: #FFAE00 !important;
}

.bg-cc {
    background: linear-gradient(321.07deg, #FFAC00 4.74%, #F9B935 96.16%);
}

.bg-it {
    background: linear-gradient(321.07deg, #00CE6F 4.74%, #00DB76 96.16%);
}

.bg-qc {
    background: linear-gradient(321.07deg, #FF4949 4.74%, #FB5B5B 96.16%);
}

.bg-approval {
    background: linear-gradient(321.07deg, #82DCE1 4.74%, #95F9FF 96.16%);
}

.bg-mkt {
    background: linear-gradient(321.07deg, #F3B600 4.74%, #FABE0F 96.16%);
}

.bg-hr {
    background: linear-gradient(321.07deg, #00BE8C 4.74%, #05D7A0 96.16%);
}

.bg-prc {
    background: linear-gradient(321.07deg, #FF305F 4.74%, #F0466E 96.16%);
}

.bg-ia {
    background: linear-gradient(321.07deg, #419BD2 4.74%, #69BEEB 96.16%);
}

.bg-ggi {
    background: linear-gradient(321.07deg, #E9C400 4.74%, #F5D214 96.16%);
}

.bg-wh {
    background: linear-gradient(321.07deg, #2CA1A8 4.74%, #50AFB5 96.16%);
}

.bg-mrp {
    background: linear-gradient(321.07deg, #DB004B 4.74%, #E6195F 96.16%, #E6195F 96.16%);
}

.bg-prd {
    background: linear-gradient(321.07deg, #2176D0 4.74%, #419BD2 96.16%);
}

.bg-acc {
    background: linear-gradient(321.07deg, #439480 4.74%, #5F9B8C 96.16%);
}

.bg-slr {
    background: linear-gradient(321.07deg, #FF7D2D 4.74%, #FF9553 96.16%);
}

.bg-mtd {
    background: linear-gradient(321.07deg, #573B8D 4.74%, #64508C 96.16%);
}

.bg-ppic {
    background: linear-gradient(321.07deg, #EF5329 4.74%, #EB6946 96.16%);
}

.bg-sys {
    background: linear-gradient(321.07deg, #233C4B 4.74%, #395D72 96.16%);
}

.bg-err {
    background: linear-gradient(321.07deg, #fb5b5b 4.74%, #ff2c2c 96.16%);
}

.circleBlue {
    width: 10px;
    height: 10px;
    background-color: #007bff;
    border-radius: 50%;
}

.circleGreen {
    width: 10px;
    height: 10px;
    background-color: #00DB76;
    border-radius: 50%;
}

.desc-notif {
    position: absolute;
    font-weight: 400;
    font-size: 14px;
    color: #222;
    top: 10px;
    margin-left: 60px;
    margin-right: 60px;
}

.truncate {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.col-controll-responsive {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-controll-petugas {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 33.333333%;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-controll-petugas a {
    text-decoration: none;
}

.col-controll {
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.eightCollumn {
    position: relative;
    width: 100%;
    padding-right: 6px;
    padding-left: 6px;
    margin-bottom: 12px;
    -webkit-flex: 0 0 12.5%;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.icon-report {
    margin-top: 9px;
}

.notif-modal {
    text-decoration: none;
    background: transparent;
    border: none;
    margin-left: -14px;
}

.icon-notifHP {
    font-size: 22px;
    margin-left: 5px;
}

.notifHP-count {
    position: absolute;
    top: -3px;
    left: 156px;
    padding: 0 4px;
    background: #FB5B5B;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
}

@media screen and (max-width: 700px) {

    .image-controll {
        width: 75px;
        height: 75px;
    }

    .desc-controll {
        font-size: 16px;
    }

    .desc-controll .px-2 {
        padding-left: 16px;
    }

    .icon-report {
        margin-top: -2px;
    }

    .col-controll-petugas {
        position: relative;
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .eightCollumn {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (min-width: 1000px) {
    .notif-hp {
        display: none;
    }

}

@media screen and (max-width: 1000px) {
    .col-controll-responsive {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 8px;
        padding-right: 8px;
    }

    .notif-web {
        display: none;
    }

    .col-controll {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
        width: 100%;
        padding-right: 7.5px;
        padding-left: 7.5px;
    }

}

.judul-apar,
.judul-scan {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    line-height: 36px;
    color: #000;
    margin-bottom: 20px;
}

.icon-camera {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 180px;
    color: #fff;
}

.border-1 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -1px;
    margin-left: -25px;
    border-top: 3px solid #007bff;
    border-left: 3px solid #007bff;
    z-index: 4;
}

.border-3 {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 9px;
    margin-left: -25px;
    border-bottom: 3px solid #007bff;
    border-left: 3px solid #007bff;
    z-index: 4;
}

.border-2 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -1px;
    margin-left: 322px;
    border-top: 3px solid #007bff;
    border-right: 3px solid #007bff;
    z-index: 4;
}

.border-4 {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 9px;
    margin-left: 322px;
    border-bottom: 3px solid #007bff;
    border-right: 3px solid #007bff;
    z-index: 4;
}

.apar-info {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.apar-info .tanggal {
    font-weight: 400;
    margin-right: 28px;
}

.apar-info .location {
    font-weight: 400;
    margin-right: 27px;
}


.apar-title {
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.wrapper-radio .option-1 {
    background: #fff;
    height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 20px;
    border: 1px solid #007BFF;
    transition: all 0.3s ease;
}

.wrapper-radio .option-2 {
    background: #fff;
    height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 20px;
    border: 1px solid #FB5B5B;
    transition: all 0.3s ease;
}

.wrapper-radio .option-3 {
    background: #fff;
    height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 20px;
    border: 1px solid #0CAE63;
    transition: all 0.3s ease;
}

.radio-title-blue {
    font-weight: 500;
    font-size: 18px;
    color: #007BFF;
}

.radio-title-green {
    font-weight: 500;
    font-size: 18px;
    color: #0CAE63;
}

.radio-title-red {
    font-weight: 500;
    font-size: 18px;
    color: #FB5B5B;
}

.icon-sub-blue {
    font-size: 18px;
    color: #007BFF;
}

.icon-sub-red {
    font-size: 18px;
    color: #FB5B5B;
}

@media screen and (max-width: 420px) {

    .radio-title-green,
    .radio-title-red,
    .radio-title-blue {
        font-size: 15px;
    }

}

input[type="radio"] {
    display: none;
}

.blue-radio:checked:checked~.option-1 {
    border: none;
    background: #007BFF;
}

.blue-radio:checked:checked~.option-1 .icon-sub-blue,
.blue-radio:checked:checked~.option-1 span {
    color: #fff;
}

.red-radio:checked:checked~.option-2 {
    border: none;
    background: #FB5B5B;
}

.red-radio:checked:checked~.option-2 .icon-sub-red,
.red-radio:checked:checked~.option-2 span {
    color: #fff;
}

.green-radio:checked:checked~.option-3 {
    border: none;
    background: #0CAE63;
}

.green-radio:checked:checked~.option-3 .icon-sub-green,
.green-radio:checked:checked~.option-3 span {
    color: #fff;
}


.custom-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: #007bff; */
    color: #fff;
    font-size: 16px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px 0px 0px 5px;
}

.input-date {
    border: 1px solid #007bff;
    border-radius: 5px;
}

.tgl,
.kondisi-sign {
    font-size: 14px;
}



@media screen and (min-width: 600px) {
    #preview {
        display: none;
    }

}

@media screen and (max-width: 600px) {
    .camera-pc {
        display: none;
    }
}

.notif-message {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    color: #FB5B5B;
}

.button-controll {
    display: flex;
    justify-content: center;
    align-items: center;

}

.btn-controll {
    border-radius: 7px;
    width: 280px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

.btn-controll:hover {
    border-radius: 7px;
    width: 280px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.btn-kirim {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 7px;
    color: #fff;
    font-size: 18px;
}

.btn-kirim:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    border-radius: 7px;
    color: #fff;
    font-size: 18px;
}

.hr-col-2 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 16.666667%;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.hr-cards-blue {
    position: relative;
    width: 49px;
    height: 49px;
    left: 0;
    top: 0;
    background: #007BFF;
    border-radius: 10px 0px;
}

.hr-image {
    position: relative;
    top: 12px;
}

.hr-desc {
    position: absolute;
    top: 15px;
    left: 0;
    padding-left: 65px;
    padding-right: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
}

.hr-desc-overall {
    position: relative;
    top: 18px;
    font-weight: 600;
    font-size: 24px;
    line-height: 16px;
    color: #FFFFFF;
}

.hr-count {
    position: relative;
    top: 14px;
    font-weight: bold;
    font-size: 72px;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
}

.hr-count-overall {
    position: relative;
    top: 39px;
    font-weight: bold;
    font-size: 72px;
    line-height: 60px;
    text-align: center;
    color: #FFFFFF;
}

.hr-total {
    padding-top: 25px;
}

.hr-totdamal {
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
    padding-top: 18px;
}

.hr-totdamal2 {
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    color: #FFFFFF;
}

@media screen and (max-width: 1115px) {
    .hr-col-2 {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 550px) {
    .hr-col-2 {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 445px) {
    .hr-desc {
        padding-left: 61px;
        font-size: 11px;
    }

    .hr-desc-overall {
        font-size: 20px;
    }

    .hr-totdamal {
        font-size: 15px;
    }

    .hr-totdamal2 {
        font-size: 15px;
    }
}

.hr-details {
    display: flex;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #007BFF;
}

.hr-details:hover {
    text-decoration: none;
    color: #026ee2;
}




/* ==================================== HRGA ACCORDION =============================================== */

/* ========================================================= */


.hr-md-tabs {
    position: relative;
    left: -6px;
    width: 100%;
}

.hr-md-tabs .nav-item-show {
    width: calc(100% / 5);
    text-align: center;
}

.hr-md-tabs .nav-item-show .nav-link {
    color: #68717a;
    font-size: 16px;
    font-weight: 500;
    border: none;
}

.hr-md-tabs .nav-item-show .nav-link.active~.hr-slide {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.hr-md-tabs .nav-item-show .nav-link~.hr-slide {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.hr-md-tabs .nav-item-show a {
    padding: 10px 0 !important;
    color: #474747;
}

.hr-md-tabs .nav-item.open .nav-link,
.hr-md-tabs .nav-item.open .nav-link:focus,
.hr-md-tabs .nav-item.open .nav-link:hover,
.hr-md-tabs .nav-link.active,
.hr-md-tabs .nav-link.active:focus,
.hr-md-tabs .nav-link:hover {
    background-color: transparent;
    color: #222;
    border: none;
}

.nav-tabs .hr-slide {
    /* background: #4099ff; */
    background: #f8b82e;
    width: calc(100% / 5);
    height: 3px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

.hr-number-badge {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    padding: 0 5px;
    top: -5px;
    color: #fff;
    background-color: #fb5b5b;
    border-radius: 4px;
    margin-left: 2px;
}

@media screen and (max-width: 550px) {
    .nav-tabs .hr-slide {
        width: calc(100% / 3);
    }

    .hr-md-tabs .nav-item-show {
        width: calc(100% / 3);
    }
}

/* ===============  ACCORDION HR ================== */

.hr-image-acc {
    width: 30px;
    height: 30px;
    margin-top: -3px;
    margin-left: -4px;
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

.hr-acc-title-apar {
    position: absolute;
    top: 18px;
    left: 50px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.hr-acc-title {
    position: absolute;
    top: 10px;
    left: 50px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.hr-acc-title2 {
    position: absolute;
    top: 25px;
    left: 50px;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}

.hr-desc-accordion {
    position: relative;
    left: 5px;
    font-size: 14px;
    font-weight: 500;
    color: #83898f;
}

.accordion__container {
    display: grid;
    font-family: "Poppins", sans-serif;
    row-gap: 0.75rem;
    padding: 2rem 1rem;
    background-color: var(--container-color);
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px rgba(51, 51, 51, 0.1);
}

.accordion__title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin-top: 0.15rem;
    transition: 0.2s;
}

.hr-accordion__header {
    column-gap: 0.5rem;
    height: 55px;
    width: 100%;
    margin-left: -5px;
    cursor: pointer;
}

.accordion__description {
    padding: 0 1.25rem 1.25rem 3rem;
    font-size: var(--smaller-font-size);
}

.accordion__iconHR {
    position: absolute;
    right: 12px;
    top: 16px;
    font-size: 1.2rem;
    color: #96999b;
    transition: 0.7s;
}


.accordion__item {
    box-shadow: 0 2px 6px rgba(38, 38, 38, 0.1);
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    transition: all 0.25s ease;
}

.hr-alarm-badge {
    background-color: #fb5b5b;
    position: relative;
    top: 0;
    left: 12px;
    height: 55px;
    border-radius: 10px 0 0 10px;
}

.hr-smokdet-badge {
    background-color: #007BFF;
    position: relative;
    top: 0;
    left: 12px;
    height: 55px;
    border-radius: 10px 0 0 10px;
}

.hr-apar-badge {
    background-color: #F8B82E;
    position: relative;
    top: 0;
    left: 12px;
    height: 55px;
    border-radius: 10px 0 0 10px;
}

.hr-emerlamp-badge {
    background-color: #0CAE63;
    position: relative;
    top: 0;
    left: 12px;
    height: 55px;
    border-radius: 10px 0 0 10px;
}

.hr-emerexit-badge {
    background-color: #EE0000;
    position: relative;
    top: 0;
    left: 12px;
    height: 55px;
    border-radius: 10px 0 0 10px;
}


.hr-accordion__content {
    overflow: hidden;
    height: 0;
    transition: all 0.25s ease;
}


/*Rotate icon and add font weight to titles*/
.accordion-open .accordion__iconHR {
    transform: rotate(135deg);
}

.accordion-open .hr-alarm-badge,
.accordion-open .hr-smokdet-badge,
.accordion-open .hr-apar-badge,
.accordion-open .hr-emerlamp-badge,
.accordion-open .hr-emerexit-badge {
    border-radius: 10px 0 0 0;
}

.accordion-open .accordion__title {
    font-weight: 600;
}

.accordion-open .hr-accordion__content {
    height: 100%;
}

/* .accordion-open .row-title1 {
    border-bottom: solid 2px #a0dcff;
} */

.table-border thead th {
    border: 1px solid #dfdfdf;
}

.table-border tbody {
    border-top: 1px solid #dfdfdf;
}

.table-bg tbody tr:nth-of-type(even) {
    background: #f9fcff !important;
}

.table-bg2 tbody tr:nth-of-type(even) {
    background: #fafafa !important;
}

.tables,
.tables2,
.tables3,
.tables4 {
    width: 100%;
    color: #212529;
    background-color: transparent;
}

.tables th,
.tables td {
    padding: 0.5rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
    border-right: 1px solid #DEE2E6;
}

.tables2 th,
.tables2 td {
    padding: 0.5rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.tables3 th,
.tables3 td {
    padding: 0.7rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #eeeeee;
}

.tables4 th,
.tables4 td {
    padding: 0.8rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #f3f5f7;
}

.table-small th,
.table-small td {
    padding: .2rem .8rem;
    border-color: #777;
}

.tbl-sm th,
.tbl-sm td {
    padding: .1rem .8rem;
    border-color: #fff;
}

.tables thead th,
.tables2 thead th {
    vertical-align: bottom;
}

.tables2.pdHeight th,
.tables2.pdHeight td {
    padding: 12px 0 !important;
}

.table-none {
    width: 100%;
    color: #545454;
    font-size: 16px;
    background-color: transparent;
}

.table-none th,
.table-none td {
    padding: 3px 10px;
    vertical-align: top;
}

.table-none thead th {
    vertical-align: bottom;
}

.title-content {
    font-family: "poppins", sans-serif;
    color: #666;
    font-size: 14px;
    text-align: left;
}

.info-content {
    font-family: "poppins", sans-serif;
    color: #666;
    font-size: 14px;
    text-align: left;
}

.card-finish-detail {
    border-radius: 10px;
    margin-top: 70px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

.finished-cln {
    font-size: 20px;
    font-weight: 500;
    color: #333;
}

.table thead tr th {
    font-weight: 600;
    font-size: 16px;
}

.table tbody tr td {
    font-weight: 500;
    font-size: 12px;
}

.icon-info {
    color: #007bff;
}

.info-modal {
    text-decoration: none;
    background: transparent;
    border: none;
}

@media screen and (max-width: 570px) {
    .hr-image-acc {
        width: 34px;
        margin-top: 0px;
        margin-left: 0px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hr-acc-title,
    .hr-acc-title-apar,
    .hr-acc-title2 {
        display: none;
    }
}

.hr-btn-proses {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
}

.hr-btn-proses:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.hr-btn-finish {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
}

.hr-btn-finish:hover {
    color: #fff;
    background: linear-gradient(90deg, #FFAE00 0%, #FFAE00 104.42%);
}

@media screen and (max-width: 490px) {
    .hr-btn-proses {
        margin-bottom: 5px;
    }
}



/* ======== HRGA ACCORDION ======== */


.form-check-input {
    margin-left: -12px;
}

.mt-mins {
    margin-top: -8px;
}

.mt-min-16 {
    margin-top: -16px;
}

.mt-cs {
    margin-top: -14px;
}

.mt-lightbox {
    margin-top: -20px;
}

.mrMin-10 {
    margin-right: -10px;
}

.ml_mr-7 {
    margin-left: -7px;
    margin-right: -7px;
}

.hr-btn-downloadPDF {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    margin-right: -7px;
}

.hr-btn-downloadPDF:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    box-shadow: rgba(0, 0, 0, 0.2) 2.4px 2.4px 3.2px;
}

.hr-report-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
}

.hr-icon-check-report {
    font-size: 30px;
    color: #0CAE63;
}

/* =============================== END HRGA ======================================== */

/* =============================== REJECT CUTTING ======================================== */

.reject-cutting-tittle {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
    margin-bottom: 8px;
}

.CRD {
    text-decoration: none;
    border: none;
    padding: 5px 16px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
}

.general-identity-title {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: #2B2B2B;
}

.ratio-cutting-title {
    font-size: 16px;
    color: #000;
}

.input-group-select {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    padding-left: 30px;
    padding-right: 30px;
}

.inputGroupSelect {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    padding: 0 22px;
    border-radius: 10px 0px 0px 10px;
}

.input-group-select-GI {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 90px;
}

.input-group-select-size {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 70px;
}

.input-group-select-icon {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 52px;
}

.form-dropdown {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    border: none;
    cursor: pointer;
    /* border: 1px solid #0073EE; */
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
}



.fields {
    width: 100%;
    height: calc(2.25rem + 2px);
    display: flex;
    position: relative;
}

.fields input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 8px 0 18px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #2125293a;
    border-radius: 5px;
}

.field {
    width: 100%;
    height: calc(2.25rem + 2px);
    margin-bottom: 40px;
    display: flex;
    position: relative;
}

.field input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 8px 0 18px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.field2 {
    width: 100%;
    height: calc(2.25rem + 2px);
    display: flex;
    position: relative;
}

.field2 input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 8px 0 18px;
    font-size: 16px;
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.border-input {
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.border-input2 {
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.border-input2::placeholder {
    font-size: 14px;
}

.field input:focus,
.custom-select {
    /* padding-left: 47px; */
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.line-2 {
    position: relative;
    bottom: 25px;
}

.line-3 {
    position: relative;
    bottom: 33px;
}

.btn-next {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    position: relative;
    bottom: 18px;
    padding: 5px 16px;
}

.btn-next:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
}

.progress-1 {
    background: #007BFF;
    border-bottom-left-radius: 7px;
    width: 50%;
    height: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.progress-2 {
    background: rgba(0, 123, 255, 0.2);
    border-bottom-right-radius: 7px;
    width: 50%;
    height: 12px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.progress-3 {
    background: #007BFF;
    border-bottom-right-radius: 7px;
    border-bottom-left-radius: 7px;
    width: 100%;
    height: 12px;
    position: absolute;
    bottom: 0;
    right: 0;
}


.hide {
    display: none !important
}

.modal .close {
    color: #2c3e50;
    font-size: 20px;
}

.no-reject-data {
    margin-top: 50px;
    margin-bottom: 7px;
}

.no-reject-capt {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 54px;
    color: #A6ADB5;
}

@media screen and (max-width: 500px) {
    .reject-cutting-tittle {
        font-size: 16px;
    }

    .CRD {
        padding: 5px 14px;
        font-size: 14px;
    }

    .mb-field {
        margin-bottom: 10px;
    }

}

.rc-tabs,
.rc-tabs2 {
    position: relative;
    width: 100%;
}

.rc-tabs .nav-item-show {
    width: calc(100% / 4);
    text-align: center;
}

.rc-tabs .nav-item-show .nav-link,
.rc-tabs2 .nav-item-show .nav-link {
    color: #68717a;
    font-size: 16px;
    font-weight: 500;
    border: none;
}

.rc-tabs .nav-item-show .nav-link.active~.rc-slide,
.rc-tabs2 .nav-item-show .nav-link.active~.rc-slide {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rc-tabs .nav-item-show .nav-link~.rc-slide,
.rc-tabs2 .nav-item-show .nav-link~.rc-slide {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rc-tabs .nav-item-show a,
.rc-tabs2 .nav-item-show a {
    padding: 10px 0 !important;
    color: #474747;
}

.rc-tabs .nav-item.open .nav-link,
.rc-tabs .nav-item.open .nav-link:focus,
.rc-tabs .nav-item.open .nav-link:hover,
.rc-tabs .nav-link.active,
.rc-tabs .nav-link.active:focus,
.rc-tabs .nav-link:hover,
.rc-tabs2 .nav-item.open .nav-link,
.rc-tabs2 .nav-item.open .nav-link:focus,
.rc-tabs2 .nav-item.open .nav-link:hover,
.rc-tabs2 .nav-link.active,
.rc-tabs2 .nav-link.active:focus,
.rc-tabs2 .nav-link:hover {
    background-color: transparent;
    color: #222;
    border: none;
}

.nav-tabs .rc-slide {
    /* background: #4099ff; */
    background: #f8b82e;
    width: calc(100% / 4);
    height: 3px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

.rc-tabs2 .nav-item-show {
    width: calc(100% / 3);
    text-align: center;
}

.nav-tabs .rc-slide2 {
    /* background: #4099ff; */
    background: #f8b82e;
    width: calc(100% / 3);
    height: 3px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: 0;
}

@media screen and (max-width: 700px) {

    .rc-tabs .nav-item-show,
    .rc-tabs2 .nav-item-show {
        width: calc(100% / 2);
        text-align: center;
    }

    .nav-tabs .rc-slide,
    .nav-tabs2 .rc-slide {
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 424px) {

    .rc-tabs .nav-item-show,
    .rc-tabs2 .nav-item-show {
        width: 100%;
        text-align: center;
    }

    .nav-tabs .rc-slide,
    .nav-tabs2 .rc-slide {
        width: 100%;
    }
}

.tabs-card {
    font-family: 'poppins', sans-serif;
}

.number-badge {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 4px;
    top: -5px;
    color: #fff;
    background-color: #fb5b5b;
    border-radius: 6px;
    margin-left: 2px;
}

.numberBadge {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 4px;
    top: -10px;
    color: #fff;
    background-color: #fb5b5b;
    border-radius: 6px;
    margin-left: 2px;
}

.h-95 {
    height: 95px;
}

.flex {
    display: flex;
}

.flexx {
    display: flex;
}

.justify-sb {
    display: flex;
    justify-content: space-between;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-start {
    display: flex;
    justify-content: start;
}

.justify-end {
    display: flex;
    justify-content: end;
}

.grid-center {
    display: grid;
    place-items: center;
}

.gap-1 {
    gap: .2rem;
}

.gap-2 {
    gap: .4rem;
}

.gap-3 {
    gap: .6rem;
}

.gap-4 {
    gap: .8rem;
}

.gap-5 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.2rem;
}

.gap-7 {
    gap: 1.4rem;
}

.gap-8 {
    gap: 1.8rem;
}

.gap-9 {
    gap: 2rem;
}

.gap-10 {
    gap: 2.6rem;
}

.bg-card-active {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%) !important;
}

.rc-icons {
    font-size: 36px;
    margin-bottom: 7px;
    color: #007BFF;
}

.rc-icons-active {
    font-size: 36px;
    margin-bottom: 7px;
    color: #fff;
}

.rc-count {
    font-size: 36px;
    font-weight: 600;
    margin-top: -7px;
    color: #007BFF;
}

.rc-count-none {
    font-size: 36px;
    font-weight: 600;
    margin-top: -7px;
    color: #fff;
}

.rc-desc {
    font-weight: 500;
    font-size: 14px;
    color: #68717A;
    line-height: 15px
}

.rc-desc-active {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    line-height: 15px
}

.rc-col-2 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 16.666667%;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

@media screen and (max-width: 1115px) {
    .rc-col-2 {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media screen and (max-width: 750px) {
    .rc-col-2 {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 600px) {
    .rc-col-2 {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.container-rc-btn {
    margin: -7px 0;
}

.rc-btn-edit {
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
}

.rc-btn-edit:hover {
    background: linear-gradient(270deg, #FFAE00 0%, #FFAE00 100%);
    border-radius: 5px;
    color: #fff;
}

.rc-btn-approve {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
}

.rc-btn-approve:hover {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
    border-radius: 5px;
    color: #fff;
}

.rc-btn-cancel {
    background: linear-gradient(88.96deg, #ae0c0c -3.61%, #cc0303 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
}

.rc-btn-cancel:hover {
    background: linear-gradient(88.96deg, #ae0c0c -3.61%, #cc0303 105.59%);
    border-radius: 5px;
    color: #fff;
}

.rc-btn-prosess {
    background: linear-gradient(88.96deg, #044cba -3.61%, #015eeb 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
}

.rc-btn-prosess:hover {
    background: linear-gradient(88.96deg, #044cba -3.61%, #015eeb 105.59%);
    border-radius: 5px;
    color: #fff;
}

.rc-btn-assign {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
}

.rc-btn-assign:hover {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
    border-radius: 5px;
    color: #fff;
}


/* =============================  WORKPLANE ======================================== */

.maxh-300 {
    max-height: 300px !important;
}

.h-80 {
    height: 80px;
}

.f-18 {
    font-size: 18px;
}

.f-16 {
    font-size: 16px;
}

.f-22 {
    font-size: 22px;
}

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

.bg-yl {
    background: #F8B82E;
}

.bg-bl {
    background: #007BFF;
}

.text-biru {
    color: #007BFF !important;
}

.text-merah {
    color: #FF0000 !important;
}

.text-ping,
.text-pink {
    color: #fb5b5b !important;
}

.text-hijau {
    color: #00DB76 !important;
}

.text-kuning {
    color: #FFB825 !important;
}

.text-abu {
    color: #68717A !important;
}

.fw-6 {
    font-weight: 600 !important;
}

.fw-5 {
    font-weight: 500 !important;
}

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

.pointer {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed !important;
}

.tdModal {
    cursor: pointer;
    transition: .5s;
}

.tdModal:hover {
    background-color: #007bff10;
    transition: .5s;
}

.card-it {
    margin-bottom: 25px;
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.wp-onProgress {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 22%;
    height: 80px;
    border-radius: 5px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 600;
    font-size: 24px;
    line-height: 20px;
    color: #FFFFFF;
}

.wp-work-desc {
    width: 68%;
    height: 80px;
    border-radius: 5px;
    padding: 16px 18px;
}

.wp-description {
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

.wp-due-date {
    padding-top: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

.wp-due-date .start-date {
    color: #0CAE63;
}

.wp-due-date .finish-date {
    color: #FB5B5B;
    margin-left: 26px;
}

.wp-done-check {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 7px;
    width: 10%;
    height: 80px;
    border-radius: 5px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
}

.wp-icon-done {
    position: absolute;
    top: 13px;
    font-size: 34px;
    color: #fff;
}

.wp-done {
    position: absolute;
    bottom: 13px;
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #FFFFFF;
}

.bg-wp-task {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
}

.fs-34 {
    font-size: 34px;
}

.bg-wp-task .wp-content-task {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.bg-wp-Newtask {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

.bg-wp-dashboard {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(270deg, #5bc0de 0%, #5bc0de 100%);
}

.bg-wp-dashboard .wp-content-dashboard {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.wp-icon-addTask {
    font-size: 20px;
    margin-left: 10px;
}

@media screen and (max-width: 550px) {
    .wp-onProgress {
        font-size: 16px;
    }

    .wp-icon-done {
        font-size: 28px;
    }

    .wp-done {
        font-size: 14px;
    }
}

.wp-title {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #000000;
}

.ytl {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #68717A;
}

.wp-no-task-yet {
    margin-top: 15px;
}

.wp-no-task-yet .no-task-yet {
    margin-top: 20px;
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 54px;
    color: #A6ADB5;
}


.accordion__title {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin-top: 0.15rem;
    transition: 0.2s;
}


.wp-accordion__item {
    box-shadow: rgba(67, 71, 85, 0.308) 0px 0px 3px;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    transition: all 0.25s ease;
}

.wp-accordion__header {
    column-gap: 0.5rem;
    height: 48px;
    width: 100%;
    margin-left: -5px;
    cursor: pointer;
    /* border-bottom: 1px solid #dee2e6; */
}

.wp-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 7%;
    height: 48px;
    left: 4px;
    top: 0px;
    border-radius: 10px 0 0 10px;
}

.wp-badge .wp-count {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    letter-spacing: .6px;
}

.wp-desc-accordion {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    padding-left: 12px;
    width: 70%;
    height: 42px;
    left: 0;
    top: 3.5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #000000;
}

.wp-date-accordion {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 19%;
    height: 42px;
    left: 0;
    top: 3.5px;
}

.wp-icon-accordion {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 4%;
    height: 42px;
    left: 0;
    top: 3.5px;
}

.wp-date {
    font-size: 14px;
    line-height: 21px;
}


.accordion__iconwp {
    position: absolute;
    right: 12px;
    top: 16px;
    font-size: 1.2rem;
    color: #96999b;
    transition: 0.7s;
}


.wp-accordion__content {
    overflow: hidden;
    height: 0;
    transition: all 0.25s ease;
}


/*Rotate icon and add font weight to titles*/
.accordion-open .accordion__iconwp {
    transform: rotate(135deg);
}

.accordion-open .wp-badge {
    border-radius: 10px 0 0 0;
}

.accordion-open .accordion__title {
    font-weight: 600;
}

.accordion-open .wp-accordion__content {
    height: 100%;

}

.wp-table {
    width: 100%;
    color: #212529;
    background-color: transparent;
}

.wp-table th,
.wp-table td {
    padding: 0.5rem 1rem;
    vertical-align: top;
    border: 1px solid #DEE2E6;
}

.wp-table thead th {
    vertical-align: bottom;
}

.title-content {
    color: #666;
    font-size: 14px;
    text-align: left;
}

.title-content2 {
    color: #000;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
}

.wp-icon-btn {
    font-size: 20px;
    margin-left: 10px;
}

.wp-btn-done {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.wp-btn-done:hover {
    color: #fff;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
}

.wp-btn-pending {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.wp-btn-pending:hover {
    color: #fff;
    background: linear-gradient(270deg, #FF0000 0%, #FF0000 103.15%);
}

.wp-btn-edit {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.wp-btn-edit:hover {
    color: #fff;
    background: linear-gradient(270deg, #FFAE00 0%, #FFAE00 100%);
}

.wp-btn-start {
    padding: 5px 16px;
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.wp-btn-start:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.wp-title-pending {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
    margin-top: -6px;
    margin-bottom: 14px;
}

.wp-btn-action {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -2px 0;
    color: #007BFF;
    font-size: 20px;
    border: none;
}

.wp-btn-action:hover {
    color: #0065d1;
}

.scrollXY {
    border: 0px;
    overflow-x: auto;
    overflow-y: auto;
}



.wp-title-create {
    font-weight: 600;
    font-size: 22px;
    line-height: 36px;
    color: #000000;
}

.wp-sub-title {
    font-size: 14px;
    color: #000;
}

.wp-required {
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
    color: #FB5B5B;
    position: relative;
    top: -5px;
}

.wp-field2,
.wp-field {
    width: 100%;
    height: calc(2.25rem + 2px);
    display: flex;
    position: relative;
}

.wp-field input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 8px 0 18px;
    font-size: 16px;
    border: 1px solid rgba(0, 123, 255, 0.5);
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    color: #2B2B2B;
}

.wp-field2 input {
    width: 100%;
    height: 100%;
    outline: none;
    padding: 0 8px 0 18px;
    font-size: 16px;
    border: 1px solid rgba(251, 91, 91, 0.5);
    background: #fff;
    box-sizing: border-box;
    border-radius: 5px;
    color: #2B2B2B;
}

.wp-field2 input:focus {
    border: 1px solid rgba(251, 91, 91, 0.5);
}

.wp-field input:focus,
.custom-select {
    /* padding-left: 47px; */
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.wp-message textarea {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.wp-message textarea::placeholder {
    font-family: "poppins", sans-serif;
    color: #d3d3d3;
}

.wp-message textarea:focus {
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.wp-message {
    position: relative;
}

.wp-message textarea {
    min-height: 130px;
    max-height: 230px;
    max-width: 100%;
    min-width: 100%;
    padding: 15px 20px;
}

.wp-message textarea::-webkit-scrollbar {
    width: 0px;
}

.wp-custom-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: #007bff; */
    color: #fff;
    font-size: 16px;
    width: 120px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px 0px 0px 5px;
}

.input-date-wp,
.input-date-wp:focus {
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.wp-field input:focus,
.custom-select {
    /* padding-left: 47px; */
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.wp-input-group-select {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 120px;
}

.wp-input-group-remark {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 205px;
}

.wp-field-number input {
    width: 100%;
    height: 37px;
    margin-top: 4px;
    padding: 0 5px;
    border: 1px solid rgba(0, 123, 255, 0.5);
    box-sizing: border-box;
    border-radius: 5px;
}

.wp-field-number input:focus {
    border: none;
}

.wp-btn-save {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 15px;
}

.wp-btn-save:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
}

.wp-title-onProgress {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
}

.wp-onProgress-blue {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
}

.card-blue {
    border: 0px;
    border-radius: 10px 10px 0 0;
    background: #007BFF;
}

.card-white {
    border: 0px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.wp-target-finish {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
    margin: -8px 0;
}

.c-pink,
.c-pinkk {
    color: #FB5B5B !important;
}

.color-green {
    color: #0CAE63 !important;
}

.c-blue {
    color: #007BFF !important;
}

.c-green {
    color: #00DB76;
}

.c-green2 {
    color: #0AB57A;
}

.c-yellow,
.c-orange {
    color: #FFAE00 !important;
}

/* .c-orange:hover {
    color: #ffc95c !important;
} */

.c-lightgrey {
    color: #D3D3D3 !important;
}

.c-darkgrey {
    color: #5D5D5D !important;
}

.c-grey {
    color: #68717A !important;
}

.c-grey2 {
    color: #8A9197 !important;
}

.c-white {
    color: #fff !important;
}

.c-dark {
    color: #4B575E !important;
}

.c-semi-dark {
    color: #8A9197 !important;
}

.wp-modal-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    color: #000000;
}

.wp-subtitle-modal {
    font-size: 14px;
    line-height: 24px;
    color: #2B2B2B;
}

.wp-custom-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: #007bff; */
    color: #fff;
    font-size: 16px;
    width: 120px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px 0px 0px 5px;
}

.input-date-wp,
.input-date-wp:focus {
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

/* ============================= END WORKPLANE ======================================== */


/* ============================= Factory Audit ======================================== */

.fa-title {
    font-weight: 500;
    font-size: 24px;
    color: #000000;
}

.fa-custom-calendar {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: #007bff; */
    color: #fff;
    font-size: 16px;
    padding: 5px 10px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px 0px 0px 5px;
}

.input-date-fa,
.input-date-fa:focus {
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.fs-18 {
    font-size: 18px;
}

.btn-fa-reportPDF {
    background: linear-gradient(118.76deg, #FB5B5B 25.56%, #FF0C0C 122.35%);
    height: 37px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #FFFFFF;
}

.btn-fa-reportPDF:hover {
    background: linear-gradient(118.76deg, #FF0C0C 25.56%, #FF0C0C 122.35%);
    color: #FFFFFF;
}

.icon-fa-pdf {
    position: relative;
    font-size: 18px;
    top: 2px;
    margin-left: 10px;
}

.btn-fa-info {
    width: 35px;
    height: 35px;
    background: #007BFF;
    color: #fff;
    border-radius: 8px;
}

.btn-fa-info:hover {
    background: #0065d1;
    color: #fff;
}

.btn-fa-edit {
    width: 35px;
    height: 35px;
    background: #F8B82E;
    color: #fff;
    border-radius: 8px;
    margin-left: 2px;
}

.btn-fa-edit:hover {
    background: #dba228;
    color: #fff;
}

.btn-fa-delete {
    width: 35px;
    height: 35px;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    color: #fff;
    border-radius: 8px;
    margin-left: 2px;
    border: none;
}

.btn-fa-delete:hover {
    background: linear-gradient(270deg, #FF0000 0%, #FF0000 103.15%);
    color: #fff;
}

.btn-icon-edit {
    position: relative;
    top: 0;
    left: -2px;
}

.btn-fa-add {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    height: 37px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    color: #FFFFFF;
}

.btn-fa-add:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    color: #FFFFFF;
}

.factory-title {
    position: absolute;
    top: 0;
    left: 8px;
}

.btn-hp-fa {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0 auto;
}

.factory-date {
    margin-left: auto !important;
}

.factory-btn-date {
    margin-left: 6px;
}

.factory-btn-add {
    margin-left: 6px;
}

@media screen and (min-width: 675px) {
    .btn-hp-fa {
        display: flex;
    }
}

@media screen and (max-width: 675px) {
    .factory-title {
        position: relative;
        text-align: center;
    }

    .factory-date {
        margin-top: 8px;
    }

    .btn-fa-reportPDF {
        width: 100%;
    }

    .factory-btn-date {
        margin-left: 0;
        margin-top: 8px;
    }

    .factory-btn-add {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* Custom Scroll Bar */
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 8px;
    border: none;
}

::-webkit-scrollbar-track {
    background: #ddd;
}

.btn-icon-blue,
.btn-simple-info {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-blue:hover,
.btn-simple-info:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 123, 255, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-softBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #CEE6FF;
    color: #007bff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-softBlue:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 123, 255, 0.78);
    color: #007bff;
    transition: .4s;
}

.btn-icon-softYellow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #FFF1D4;
    color: #f8b82e;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-yellow,
.btn-simple-edit {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: linear-gradient(275.75deg, #FFAC00 0.2%, #f1b948 95.68%);
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    z-index: 9;
    transition: .4s;
}

.btn-icon-yellow:hover,
.btn-simple-edit:hover {
    box-shadow: 0px 9px 12px -8px rgba(255, 172, 0, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-hijau,
.btn-simple-monitor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-hijau:hover,
.btn-simple-monitor:hover {
    box-shadow: 0px 9px 12px -8px rgba(12, 174, 99, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-softGreen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #D4EDDA; /* Warna hijau lembut */
    color: #28a745;       /* Warna teks hijau */
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-softGreen:hover {
    box-shadow: 0px 9px 12px -8px rgba(40, 167, 69, 0.78); /* Efek shadow hijau */
    color: #28a745;
    transition: .4s;
}

.btn-simple-interview {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: linear-gradient(88.96deg, #0c60ae -3.61%, #0016db 105.59%);
    color: #fff;
    border-radius: 8px;
    border: none;
    transition: .4s;
}

.btn-simple-interview:hover {
    box-shadow: 0px 9px 12px -8px rgba(12, 88, 174, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-red,
.btn-simple-delete {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: linear-gradient(270deg, #FB5B5B 0%, #ff1f1f 103.15%);
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-red:hover,
.btn-simple-delete:hover {
    box-shadow: 0px 9px 12px -8px rgba(255, 0, 0, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-black {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #313131;
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-black:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-grey {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #F0F0F0;
    color: #68717A;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-grey:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.78);
    color: #68717A;
    transition: .4s;
}

.btn-icon-pink {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    font-size: 16px;
    background: #fb5b5b;
    color: #fff;
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .4s;
}

.btn-icon-pink:hover {
    box-shadow: 0px 9px 12px -8px rgba(251, 91, 91, 0.78);
    color: #fff;
    transition: .4s;
}

.btn-icon-edit {
    position: relative;
    top: 0;
    left: -2px;
}

.btn-icon-delete {
    position: relative;
    top: 0;
    left: -1px;
}

.btn-icon-orange {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    width: 35px;
    height: 35px;
    background: linear-gradient(88.96deg, #FF8C00 -3.61%, #FFA500 105.59%);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-icon-orange:hover {
    box-shadow: 0px 9px 12px -8px rgba(255, 140, 0, 0.78);
    color: #fff;
}

.txt-fail {
    color: #FF0000;
}

.txt-late {
    color: #088149;
}

.txt-failed {
    color: #FB5B5B;
}

.txt-pased {
    color: #0CAE63;
}

.txt-primary {
    color: #007BFF;
}

.fa-packing-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #000000;
}

.input-data-fa {
    /* cursor: pointer; */
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
}

.btn-fa-startA {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 14px;
    margin-top: -20px;
}

.btn-fa-startA:hover {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
    border-radius: 5px;
    color: #fff;
}

.fa-select-aql {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 5px;
}

.fa-select-aql-fail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    color: #fff;
    border-radius: 5px;
}

.fa-message textarea {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.fa-message textarea::placeholder {
    font-family: "poppins", sans-serif;
    color: #d3d3d3;
}

.fa-message textarea:focus {
    border: 1px solid rgba(0, 123, 255, 0.5);
}

.fa-message {
    position: relative;
}

.fa-message textarea {
    min-height: 130px;
    max-height: 230px;
    max-width: 100%;
    min-width: 100%;
    padding: 15px 20px;
}

.fa-message textarea::-webkit-scrollbar {
    width: 0px;
}

.messageGrey textarea {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #CBCBCB;
}

.messageGrey textarea::placeholder {
    font-family: "poppins", sans-serif;
    color: #d3d3d3;
}

.messageGrey textarea:focus {
    border: 1px solid #CBCBCB;
}

.messageGrey {
    position: relative;
}

.messageGrey textarea {
    min-height: 130px;
    max-height: 230px;
    max-width: 100%;
    min-width: 100%;
    padding: 15px 20px;
}

.messageGrey textarea::-webkit-scrollbar {
    width: 0px;
}

.fa-container-action {
    margin: -8px 0;
}

/* IMAGE */
.file-upload {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.file-upload-btn-fa2,
.file-upload-btn-fa3,
.file-upload-btn-fa4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #68717A;
    background: transparent;
    border-radius: 50%;
    font-size: 36px;
    border: 1px solid rgba(104, 113, 122, 0.6);
    width: 100px;
    height: 100px;
    font-weight: 500;
}

.file-upload-btn-fa {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: #007BFF;
    border-radius: 8px;
    font-size: 16px;
    border: none;
    padding: 10px;
    width: 85%;
    font-weight: 500;
}

.file-upload-content-fa4,
.file-upload-content-fa3,
.file-upload-content-fa2,
.file-upload-content-fa {
    display: none;
    text-align: left;
}

.file-upload-input-fa4,
.file-upload-input-fa3,
.file-upload-input-fa2,
.file-upload-input-fa {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap-fa2,
.image-upload-wrap-fa3,
.image-upload-wrap-fa4 {
    margin-top: -12px;
    position: relative;
    text-align: center;
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
    border: 2px dashed rgba(104, 113, 122, 0.6);
    background: #fff;
}

.image-upload-wrap-fa {
    margin-top: -12px;
    position: relative;
    text-align: center;
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
    background: rgba(104, 113, 122, 0.2);
}


.drag-text {
    text-align: center;
}

.drag-text h5 {
    font-weight: 500;
    color: #aaa;
    font-size: 14px;
    margin-top: 65px;
}

.file-upload-image-fa,
.file-upload-image-fa2,
.file-upload-image-fa3,
.file-upload-image-fa4 {
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
    top: -13px;
    border-radius: 10px;
}

.file-upload-image {
    width: 100%;
    margin-top: -12px;
    max-height: 250px;
    position: relative;
    z-index: 99;
    border-radius: 5px;
}

.remove-image2 {
    position: absolute;
    top: 12px;
    right: 15px;
    color: #fff;
    background: #ff00006e;
    border: none;
    padding: 1px 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    outline: none;
    font-size: 18px;
}

.icon-upload-fa {
    padding-top: 20px;
    font-size: 64px;
    color: rgba(104, 113, 122, 0.6);
    ;
}

.icon-upload-ws {
    position: absolute;
    top: 48px;
    right: 50px;
    font-size: 68px;
    color: rgba(104, 113, 122, 0.6);
    ;
}

.icon-upload {
    padding-top: 30px;
    font-size: 75px;
    color: rgba(104, 113, 122, 0.6);
    ;
}

.fa-img-edit {
    width: 100%;
    height: 180px;
    position: relative;
    z-index: 10;
    border-radius: 10px;
}

/* ==============  Radio Button  =================== */

.wrapper-radio .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    border: 1px solid rgba(0, 123, 255, 0.5);
    color: #aaa;
    border-radius: 5px;
}

.wrapper-radio .options:hover {
    cursor: pointer;
}

.radio-desc {
    font-weight: 500;
}

input[type="radio"] {
    display: none;
}

.aql-radio:checked:checked~.option-pass {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 5px;
    border: none;
}

.aql-radio:checked:checked~.option-pass,
.aql-radio:checked:checked~.option-pass span {
    color: #fff;
}

.aql-radio:checked:checked~.option-pass .icon-radio {
    color: #fff;
}

.wrapper-radio .option-pass,
.wrapper-radio .option-fail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 37px;
    border: 1px solid #babcbe;
    color: #999;
    border-radius: 7px;
    padding: 0 18px;
    cursor: pointer;
}

.result-radio:checked:checked~.option-pass {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 7px;
    border: none;
    width: 100%;
}

.result-radio:checked:checked~.option-pass,
.result-radio:checked:checked~.option-pass span {
    color: #fff;
}

.result-radio:checked:checked~.option-pass .icon-radio {
    color: #fff;
}

.result-radio:checked:checked~.option-fail {
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    color: #fff;
    border-radius: 7px;
    border: none;
}

.result-radio:checked:checked~.option-fail,
.result-radio:checked:checked~.option-fail span {
    color: #fff;
}

.result-radio:checked:checked~.option-fail .icon-radio {
    color: #fff;
}

/* ====================  Tambahan Worksheet  =================== */

.containerStepbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    position: relative;
    height: 130px;
    margin-bottom: 26px;
}

.containerStepbar .line {
    position: absolute;
    width: 97%;
    border: 1px dashed #68717A;
}

.containerStepbar .line2 {
    position: absolute;
    height: 97%;
    border: 1px dashed #68717A;
}

.containerStepbar .cardStepbar {
    display: grid;
    place-content: center;
    place-items: center;
    position: relative;
    height: 140px;
    width: 100%;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(224, 224, 224, 0.5);
}

.cardStepbar .containerNumber {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #007bff;
}

.cardStepbar .containerNumber.check {
    background: #ceefe0;
    border: none;
}

.cardStepbar .containerNumber .number {
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #007bff;
}

.cardStepbar .containerNumber .number.check {
    font-size: 23px;
    color: #0cae63;
}

.cardStepbar .title {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #4A4A4A;
    margin-top: 6px;
    text-align: center;
}

.cardStepbar .title.check {
    font-weight: 500;
}

.cardStepbar .complete {
    font-weight: 500;
    font-size: 13px;
    color: #0cae63;
    margin-top: -6px;
}

.cardStepbar .title.check {
    font-weight: 500;
}

.cardStepbar .complete {
    font-weight: 500;
    font-size: 13px;
    color: #0cae63;
    margin-top: -6px;
}

.cardStepbar .containerNumber.active {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

.cardStepbar .containerNumber .number.active {
    color: #fff;
}

.cardStepbar .title.active {
    font-weight: 600;
    color: #007bff;
}

.cardStepbar .botLine {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 8px;
    width: 100%;
    background: #007bff;
    border-radius: 0 0 6px 6px;
}

@media screen and (max-width: 650px) {
    .containerStepbar {
        display: none;
    }
}

.title-blue {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: #007BFF;
}

.title-blue .po {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #68717A;
}

.title-or {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: #2B2B2B;
}

.w-380 {
    width: 380px !important;
}

.w-300 {
    width: 300px !important;
}

.WSDetail .title-2 {
    font-weight: 400;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    color: #2B2B2B;
    margin: 2px 0;
}

.WSDetail .descriptions {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #2B2B2B;
    padding: 0 12rem;
}

.WSDetail .card-close {
    position: relative;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #F9B935;
}

.WSDetail .title-orange {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    color: #FFAC00;
}

.WSDetail .close-icon {
    font-size: 18px;
    color: #F9B935;
    border: none;
    background: transparent;
}

.WSDetail .imageHover {
    width: 100%;
    height: 100%;
    transition: .3s;
    border-radius: 10px;
    position: relative;
    object-fit: cover;
}

.WSDetail .objectHover {
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #00000060;
    height: 200px;
    width: 100%;
    border-radius: 10px;
    opacity: 0;
    transition: .4s;
}

.WSDetail .objectHover:hover {
    opacity: 1;
    transition: .4s;
}

.WSDetail .objectHover i {
    font-size: 32px;
    color: #fff;
}

.WSDetail .objectHover .text {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    margin-top: 6px;
}

.table .bg-oren {
    background: #F9B935;
}

.table .bg-oren th {
    color: #fff !important;
}

.table.border-grey th,
.table.border-grey td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #ccc;
}

.table.border-grey thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #ccc;
}

.table.border-grey tbody+tbody {
    border-top: 2px solid #ccc;
}

@media screen and (max-width: 1000px) {
    .WSDetail .title-2 {
        font-size: 24px;
        line-height: 30px;
    }

    .WSDetail .descriptions {
        font-size: 12px;
        padding: 0;
    }
}

/* ====================  End Tambahan Worksheet xxx  =================== */

/* ==============  Radio Button  =================== */

.radioFlatContainer {
    position: relative;
    z-index: 20;
    margin-bottom: 16px;
}

.radioFlatContainer .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    height: 52px;
    width: 100%;
    background: #fff;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 4px 20px rgba(137, 145, 154, 0.05);
    transition: .4s ease-out;
}

.radioFlatContainer .options:hover {
    cursor: pointer;
}

.radioFlatContainer .radio-desc {
    font-weight: 400;
    color: #68717A;
    font-size: 16px;
}

.radioFlatContainer .check i {
    display: none;
}

.radioFlatContainer .notChecked {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #F0F0F0;
}

.radioFlatContainer .radioFlat:hover~.check,
.radioFlatContainer .radioFlat:checked:checked~.check {
    background: #429DFF;
    transition: .4s ease-in;
}

.radioFlatContainer .radioFlat:hover~.check .notChecked,
.radioFlatContainer .radioFlat:checked:checked~.check .notChecked {
    display: none;
}

.radioFlatContainer .radioFlat:hover~.check i,
.radioFlatContainer .radioFlat:checked:checked~.check i {
    display: block;
    font-size: 20px;
    color: #fff;
}

.radioFlatContainer .radioFlat:hover~.check span,
.radioFlatContainer .radioFlat:checked:checked~.check span {
    color: #fff;
}

/* ==============  Radio Button 1  =================== */

.radioFlatContainer2 {
    position: relative;
    z-index: 20;
}

.radioFlatContainer2 .options {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    width: 100%;
    background: #fff;
    border: 1px solid #f2f2f2;
    box-shadow: 2px 10px 20px rgba(221, 221, 221, 0.2);
    transition: .4s ease-out;
}

.radioFlatContainer2 .options:hover {
    cursor: pointer;
}

.radioFlatContainer2 .radio-desc {
    font-weight: 400;
    color: #455a64;
    font-size: 16px;
}

.radioFlatContainer2 .radioFlat2:hover~.check,
.radioFlatContainer2 .radioFlat2:checked:checked~.check {
    background: #E9F3FF;
    border: 1px solid #0073ee;
    transition: .4s ease-in;
}

.radioFlatContainer2 .radioFlat2:hover~.check span,
.radioFlatContainer2 .radioFlat2:checked:checked~.check span {
    color: #0073ee;
}

/* ==============  Radio Button 2  =================== */

.wrapperRadio {
    position: relative;
    z-index: 20;
}

.wrapperRadio.mb-min {
    margin-bottom: -9px;
}

.wrapperRadio .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: #FFF5DF;
    border: 1px solid rgba(249, 185, 53, 0.5);
    border-radius: 10px;
}

.wrapperRadio .options:hover {
    cursor: pointer;
}

.wrapperRadio .radio-desc {
    font-weight: 500;
    color: #4B4B4B;
    font-size: 14px;
}

.wrapperRadio .check i {
    display: none;
}

.wrapperRadio .notChecked {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(249, 185, 53, 0.5);
}

.resultRadio:hover~.check,
.resultRadio:checked:checked~.check {
    background: #FFAC00;
    border: 1px solid rgba(249, 185, 53, 0.5);
    border-radius: 10px;
    transition: .3s ease-in;
}

.resultRadio:hover~.check .notChecked,
.resultRadio:checked:checked~.check .notChecked {
    display: none;
}

.resultRadio:hover~.check i,
.resultRadio:checked:checked~.check i {
    display: block;
    font-size: 18px;
    color: #fff;
}

.resultRadio:hover~.check span,
.resultRadio:checked:checked~.check span {
    color: #fff;
}

/* =======================  RADIO 3  ========================== */

.wrapperRadio .optionBlue,
.wrapperRadio .optionBlue2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: rgba(0, 123, 255, 0.15);
    border-radius: 8px;
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionBlueFlat {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 41px;
    background: rgba(0, 123, 255, 0.15);
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionBlueFlat:hover,
.wrapperRadio .optionBlue:hover,
.wrapperRadio .optionBlue2:hover {
    cursor: pointer;
}

.wrapperRadio .descBlue {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    white-space: nowrap;
    transition: .3s ease-out;
}

.wrapperRadio .descBlue2 {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #68717A;
    white-space: nowrap;
    transition: .3s ease-out;
}

.radioBlueFlat:hover~.check,
.radioBlue2:hover~.check,
.radioBlue:hover~.check {
    background: rgba(0, 123, 255, 0.3);
    transition: .3s ease-in;
}

/* .radioBlue2:hover~.check {
    outline: 1px solid #007BFF;
    transition: .3s ease-in;
} */

.radioBlue:checked:checked~.check,
.radioBlue2:checked:checked~.check {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border: none;
    outline: none;
    border-radius: 8px;
    transition: .3s ease-in;
}

.radioBlueFlat:checked:checked~.check {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border: none;
    outline: none;
    transition: .3s ease-in;
}

.radioBlueFlat:hover~.check span,
.radioBlue:hover~.check span {
    color: #007BFF;
}

.radioBlueFlat:checked:checked~.check span,
.radioBlue:checked:checked~.check span,
.radioBlue2:checked:checked~.check span {
    color: #fff;
}

/* === */

.wrapperRadio .optionOrange {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: rgba(249, 185, 53, 0.15);
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionOrangeFlat {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 41px;
    background: rgba(249, 185, 53, 0.15);
    border: none;
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionOrangeFlat:hover,
.wrapperRadio .optionOrange:hover {
    cursor: pointer;
}

.wrapperRadio .descOrange {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #FFAC00;
    transition: .3s ease-out;
}

.radioOrangeFlat:hover~.check,
.radioOrange:hover~.check {
    background: rgba(249, 184, 53, 0.349);
    transition: .3s ease-in;
}

.radioOrange:checked:checked~.check {
    background: linear-gradient(275.75deg, #FFAC00 0.2%, #f1b948 95.68%);
    border: none;
    outline: none;
    border-radius: 8px;
    transition: .3s ease-in;
}

.radioOrangeFlat:checked:checked~.check {
    background: linear-gradient(275.75deg, #FFAC00 0.2%, #f1b948 95.68%);
    border: none;
    outline: none;
    transition: .3s ease-in;
}

.radioOrangeFlat:hover~.check span,
.radioOrange:hover~.check span {
    color: #FFAC00;
}

.radioOrangeFlat:checked:checked~.check span,
.radioOrange:checked:checked~.check span {
    color: #fff;
}

/* === */

.wrapperRadio .optionRed {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: rgba(251, 91, 91, 0.15);
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionRed:hover {
    cursor: pointer;
}

.wrapperRadio .descRed {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #FB5B5B;
    transition: .3s ease-out;
}

.radioRed:hover~.check {
    background: rgba(251, 91, 91, 0.349);
    transition: .3s ease-in;
}

.radioRed:checked:checked~.check {
    background: linear-gradient(275.75deg, #FB5B5B 0.2%, #f88282 95.68%);
    border: none;
    outline: none;
    border-radius: 8px;
    transition: .3s ease-in;
}

.radioRed:hover~.check span {
    color: #FB5B5B;
}

.radioRed:checked:checked~.check span {
    color: #fff;
}

/* === */

.wrapperRadio .optionGreen {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 37px;
    width: 100%;
    background: rgba(0, 219, 118, 0.15);
    border-radius: 8px;
    border: none;
    outline: none;
    transition: .3s ease-out;
}

.wrapperRadio .optionGreen:hover {
    cursor: pointer;
}

.wrapperRadio .descGreen {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #00DB76;
    transition: .3s ease-out;
}

.radioGreen:hover~.check {
    background: rgba(0, 219, 118, 0.349);
    transition: .3s ease-in;
}

.radioGreen:checked:checked~.check,
.wrapperRadio .actived {
    background: linear-gradient(275.75deg, #49f1a3 0.2%, #00DB76 95.68%);
    border: none;
    outline: none;
    border-radius: 8px;
    transition: .3s ease-in;
}

.radioGreen:hover~.check span,
.wrapperRadio .actived span {
    color: #00DB76;
}

.radioGreen:checked:checked~.check span,
.wrapperRadio .actived span {
    color: #fff;
}

/* ================================================= */

.ks-cboxtags {
    list-style: none;

}

.ks-cboxtags label {
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 123, 255, 0.5);
    color: #adadad;
    border-radius: 5px;
}

.ks-cboxtags label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0 14px;
    height: 37px;
    width: 100%;
}


.ks-cboxtags input[type="checkbox"]:checked+label {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    transition: all .2s;
}

.ks-cboxtags input[type="checkbox"] {
    display: absolute;
}

.ks-cboxtags input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.fa-cards {
    margin-top: -10px;
    margin-bottom: 20px;
    border: 0px;
    border-radius: 5px;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
    background: #fff;
}

.fa-cards .fa-start-time {
    width: 35%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    border-radius: 5px 0px 0px 5px;
}

.fa-cards .fa-proses-time {
    width: 35%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    border-radius: 5px 0px 0px 5px;
}

.fa-cards .fa-start-desc,
.fa-cards .fa-proses-desc {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 65%;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #121212;
    padding: 0 20px;
}

.btn-fa-finish {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    width: 100%;
    height: 37px;
}

.btn-fa-finish:hover {
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #0CAE63 105.59%);
    border-radius: 5px;
    color: #fff;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px;
}

.h-200 {
    height: 200px !important;
}


.fa-report-cards {
    border: 0px;
    border-radius: 10px;
    background: #fff;
    padding: 20px 25px;
    margin-bottom: 15px;
}

.fa-report-cards .fa-report-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: #68717A;
}

.fa-report-cards .fa-report-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}

.fa-report-cards .fa-count {
    width: 11%;
    height: 63px;
}

.fa-report-cards .fa-header-table {
    margin-top: -5px;
    width: 89%;
    height: 48px;
    border-bottom: 1px solid #68717A;
}

.fa-report-cards .fa-count-badge {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 63px;
    height: 63px;
    left: 8px;
    top: 0;
    background: #007BFF;
    border-radius: 10px 0px 10px 0px;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
}

.fa-report-cards .fa-count-badge2 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 63px;
    height: 63px;
    left: 8px;
    top: 0;
    background: #FB5B5B;
    border-radius: 10px 0px 10px 0px;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
}

.fa-header-table .title {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #68717A;
}

.fa-header-table .desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

.fa-tbl-content thead tr th {
    font-size: 14px;
}

.fa-tbl-content tbody tr td {
    font-size: 14px;
    font-weight: 500;
}

@media screen and (max-width: 500px) {
    .fa-report-cards .fa-count {
        width: 11%;
        height: 63px;
    }

    .fa-report-cards .fa-header-table {
        margin-top: -5px;
        width: 89%;
        height: 48px;
        border-bottom: 1px solid #68717A;
    }

    .fa-report-cards .fa-count-badge {
        width: 50px;
        height: 63px;
    }

    .fa-report-cards .fa-count-badge2 {
        width: 50px;
        height: 63px;
    }

    .fa-header-table .title {
        font-weight: 500;
    }

    .fa-header-table .desc {
        font-size: 12px;
    }

    .fa-header-table .data {
        display: none;
    }

    .fa-tbl-content thead tr th,
    .fa-tbl-content tbody tr td {
        font-size: 12px;
    }
}

.fa-images {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 10px;
}

.fa-ttd {
    width: 100%;
    height: 145px;
    object-fit: cover;
    border-radius: 10px;
}

.desc-ttd {
    font-weight: 500;
    font-size: 14px;
    color: #68717A;
}

/* ============================= END Factory Audit ======================================== */


/* ============================= PRODUCTION - CUTTING ======================================== */

.ctg-ppic-title {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #000000;
}

.btn-pic-schedule {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    font-size: 18px;
    height: 37px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 5px;
}

.btn-pic-schedule:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    color: #fff;
}

.table-borderless thead tr,
.table-borderless tbody tr {
    border-bottom: 1px solid #dedede;
}

.tbl-12 thead tr th,
.tbl-12 tbody tr td,
.tbl-12 tfoot tr th {
    font-size: 12px;
}

.tbl-ctg thead tr th {
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
}

.tbl-ctg tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: #2b2b2b;
}

.tbl-content-cost thead tr th {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #7D8791;
    text-align: left;
}

.tbl-content-cost tfoot tr th,
.tbl-content-cost tbody tr td {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #5E5E5E;
    text-align: left;
}

.tbl-content-12 thead tr th {
    font-size: 12px;
    font-weight: 500;
    color: #2b2b2b;
    text-align: left;
}

.tbl-content-12 tbody tr td {
    font-size: 12px;
    font-weight: 400;
    color: #2b2b2b;
    text-align: left;
}

.tbl-content-12 tfoot tr th {
    font-size: 12px;
    font-weight: 500;
    color: #2b2b2b;
    text-align: left;
}

.tbl-content thead tr th {
    font-size: 14px;
    font-weight: 500;
    color: #5E5E5E;
    text-align: left;
}

.tbl-content tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: #5E5E5E;
    text-align: left;
}

.tbl-content-center thead tr th {
    font-size: 14px;
    font-weight: 500;
    color: #2b2b2b;
    text-align: center;
}

.tbl-content-center tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: #2b2b2b;
    text-align: center;
}

.tbl-content-left thead tr th {
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    text-align: left;
}

.tbl-content tbody tr td,
.tbl-content-left tbody tr td {
    font-size: 14px;
    font-weight: 400;
    color: #2b2b2b;
    text-align: left;
}

.tbl-content-left tfoot tr {
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    text-align: left;
    background-color: #c5e1ff;
}

.tbl-content-left tfoot tr:nth-child(2) {
    font-size: 14px;
    font-weight: 600;
    color: #2b2b2b;
    text-align: left;
    background-color: #cfffc5;
}

.tbl-total-qty {
    color: #007BFF;
    cursor: pointer;
}

.tbl-total-qty:hover {
    color: #0064cf;
}

.table-not-striped tbody tr:nth-of-type(odd) {
    background-color: transparent;
}

.bg-striped {
    background-color: #f2f2f2
}

.bg-career {
    background: linear-gradient(167.34deg, rgba(255, 172, 0, 0.14) 8.91%, rgba(249, 185, 53, 0) 31.7%);
}

.title-sm {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #2B2B2B;
}

.title-smb {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    color: #000;
}

.radius-text {
    border-radius: 0 5px 5px 0;
}

.title-24 {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #000000;
}

.title-22 {
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    text-align: center;
    color: #000000;
}

.title-20 {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #000;
}

.title-20B {
    font-weight: 600;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
    color: #545454;
}

.pic-btn-save {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    padding: 4px 15px;
}

.pic-btn-save:hover {
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
}

.ctg-buatForm {
    text-decoration: none;
    border: none;
    padding: 5px 16px;
    color: #fff;
    font-size: 18px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 5px;
}

.ctg-buatForm:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.ctg-title-card {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #000000;
}

.ctg-input-group {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 60px;
}

.ctg-input-group2 {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px 0px 0px 5px;
    height: calc(2.25rem + 2px);
    width: 50px;
}

.custom-col-9 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 75%;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
    margin: 0 auto;
}

.col-gelar,
.col-gelar2,
.col-gelar3 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 14.2857142857%;
    -ms-flex: 0 0 14.2857142857%;
    flex: 0 0 14.2857142857%;
    max-width: 14.2857142857%;
}

@media screen and (max-width: 1115px) {
    .col-gelar {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-gelar2,
    .col-gelar3 {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .ctg-input-group2 {
        width: 70px;
    }
}

@media screen and (max-width: 900px) {
    .ctg-input-group2 {
        width: 60px;
    }

    .custom-col-9 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 550px) {

    .col-gelar,
    .col-gelar2 {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-gelar3 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.tbl-list-name {
    width: 300px;
}

.container-tbl-btn-sm {
    margin-top: -4px;
    margin-bottom: -4px;
}

.container-tbl-btn {
    margin-top: -6px;
    margin-bottom: -6px;
}

.container-tbl-btn2 {
    margin-top: -14px;
    margin-bottom: -14px;
}

.container-tbl-btn3 {
    margin-top: -10px;
    margin-bottom: -10px;
}

.btn-nav-tabs {
    padding: 8px 20px;
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    border: 1px solid #007BFF;
    border-radius: 8px;
}

.btn-nav-tabs.active {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

.btn-transparent {
    border: none;
    outline: none;
    background: #000;
    font-size: 14px;
    color: #5E5E5E;
    padding: 0;
}

.btn-white-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    padding: 0 18px;
    height: 38px;
    background: #FFFFFF;
    color: #455A64;
    border: 1px solid #F2F2F2;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.2);
    transition: .4s ease-in-out;
}

.btn-white-sm:hover {
    border: 1px solid #ddd;
    transition: .4s ease-in-out;
}

.btn-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    padding: 0 14px;
    height: 37px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.buttons-csv,
.btn-blue-md {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    padding: 0 14px;
    height: 37px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.btn-blue-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    width: 40px;
    height: 37px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.btn-blue-absolute {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 18px;
    font-weight: 500;
    width: 52px;
    height: 38px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 0 5px 5px 0;
    border: none;
}

.btn-blue-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    padding: 0 18px;
    height: 37px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.btn-blue-icon:hover,
.btn-blue-md:hover,
.btn-blue-absolute:hover,
.btn-blue-sm:hover,
.btn-blue:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 123, 255, 0.78);
    color: #fff;
    transition: .4 ease-in-out;
}

.btn-blue-md:hover{
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.btn-blue-md:active{
    transform: scale(.91);
}

.btn-yellow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    padding: 0 18px;
    height: 37px;
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.btn-yellow-md {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    padding: 0 18px;
    height: 37px;
    background: linear-gradient(270deg, #FFC549 0%, #FFAE00 100%);
    color: #fff;
    border-radius: 8px;
    border: none;
}

.btn-yellow-md:hover,
.btn-yellow:hover {
    box-shadow: 0px 9px 12px -8px rgba(255, 172, 0, 0.78);
    color: #fff;
}

.btn-green {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    padding: 0 18px;
    height: 37px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.buttons-excel,
.btn-green-md {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    padding: 0 18px;
    height: 37px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.buttons-excel:hover,
.btn-green-md:hover,
.btn-green:hover {
    box-shadow: 0px 9px 12px -8px rgba(12, 174, 99, 0.78);
    color: #fff;
}

.btn-black {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    padding: 0 18px;
    height: 37px;
    background: #313131;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.buttons-print,
.btn-black-md {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    padding: 0 18px;
    height: 37px;
    background: #313131;
    color: #fff;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

.btn-black-md:hover,
.btn-black:hover {
    box-shadow: 0px 9px 12px -8px rgba(49, 49, 49, 0.7);
    color: #fff;
}

.btn-red {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 18px;
    color: #fff;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    border: none;
}

.buttons-pdf,
.btn-red-md {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    color: #fff;
    height: 37px;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    border: none;
    cursor: pointer;
}

.btn-red-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    height: 37px;
    color: #fff;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    border-radius: 8px;
    font-size: 16px;
    border: none;
}

.buttons-pdf:hover,
.btn-red-sm:hover,
.btn-red-md:hover,
.btn-red:hover {
    box-shadow: 0px 9px 12px -8px rgba(255, 0, 0, 0.78);
    color: #fff;
}

/* .btn-grey-md {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    color: #fff;
    height: 37px;
    background: linear-gradient(321.38deg, #BABABA 18.74%, #9D9D9D 104.98%);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    border: none;
    cursor: pointer;
}

.btn-grey-md:hover {
    box-shadow: 0px 9px 12px -8px rgba(43, 43, 43, 0.78);
    background: linear-gradient(90deg, #E6E6E6 0%, #E6E6E6 104.42%);
} */

.btn-icon-green {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    width: 42px;
    height: 37px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn-icon-green:hover {
    box-shadow: 0px 9px 12px -8px rgba(12, 174, 99, 0.78);
    color: #fff;
}

.btn-delete-row {
    margin-top: 8px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #FB5B5B;
    margin-left: -8px;
}

.btn-delete-row2 {
    background-color: transparent;
    outline: none;
    border: none;
    color: #FB5B5B;
    font-size: 22px;
}

.btn-delete-row3 {
    background-color: transparent;
    outline: none;
    border: none;
    color: #FB5B5B;
    font-size: 22px;
    margin-top: -8px;
}

.DeleteRow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border: 2px solid #fb5b5b;
    border-radius: 50%;
    background: #fb5b5b20;
    box-shadow: 0px 0px 0px 4px rgba(251, 91, 91, 0.2);
}

.DeleteRow i {
    font-size: 10px;
    color: #fb5b5b;
}

.DeleteRow .iconDel {
    margin-right: 1px;
}

.border-bottom-blue {
    border-bottom: 1px solid rgba(0, 123, 255, 0.4);
}

.cards-scan2 {
    border: 0px;
    background: #dadada;
    height: 350px;
    width: 350px;
}

.icon-camera2 {
    display: grid;
    place-items: center;
    margin-top: 90px;
    font-size: 150px;
    color: #fff;
}

.kamera-pc {
    display: flex;
    justify-content: end;
}

.card-transparent {
    margin-bottom: 10px;
    border: 0px;
}

.h-28 {
    height: 28px !important;
}

.h-35 {
    height: 35px !important;
}

.h-38 {
    height: 38px !important;
}

.h-395 {
    height: 395px;
}

.h-285 {
    height: 285px;
}

.h-260 {
    height: 260px;
}

.w-160 {
    width: 160px !important;
}

.w-180 {
    width: 180px !important;
}

@media screen and (max-width: 700px) {
    .btnSMQC {
        margin-bottom: 50px;
    }
}

@media screen and (max-width: 550px) {
    .h-260 {
        height: auto;
    }
}

.borders-1 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -2px;
    left: 5px;
    border-top: 3px solid #007bff;
    border-left: 3px solid #007bff;
    z-index: 4;
}

.borders-3 {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: -2px;
    left: 5px;
    border-bottom: 3px solid #007bff;
    border-left: 3px solid #007bff;
    z-index: 4;
}

.borders-2 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -2px;
    right: 5px;
    border-top: 3px solid #007bff;
    border-right: 3px solid #007bff;
    z-index: 4;
}

.borders-4 {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: -2px;
    right: 5px;
    border-bottom: 3px solid #007bff;
    border-right: 3px solid #007bff;
    z-index: 4;
}


@media screen and (max-width: 767px) {
    .kamera-pc {
        display: none;
    }

    .margin-auto {
        margin: 0 auto;
    }
}

.gelar-tbl-content2 thead tr th,
.gelar-tbl-content thead tr th {
    font-size: 14px;
    background: #f1f1f1;
    text-align: center;
}

.gelar-tbl-content tfoot tr td {
    font-size: 14px;
    /* background: #f1f1f1; */
    padding-left: 25px;
}

.gelar-tbl-content2 tfoot tr td {
    font-size: 14px;
}

.gelar-tbl-content2 tbody tr td,
.gelar-tbl-content tbody tr td {
    font-size: 14px;
    font-weight: 500;
}

.w80 {
    width: 80px;
}

.w100 {
    width: 100px;
}

.w200 {
    width: 200px;
}

.pd-tbl-30 {
    padding-bottom: 30px;
}

.pd-tbl-20 {
    padding-bottom: 20px;
}

.pd-tbl-10 {
    padding-bottom: 10px;
}

/* ========== DROPDOWN ========== */

.dropdown-select {
    height: 37px;
    border: none;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    padding: 0 10px;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-select option {
    color: #000;
}

.btnDropDown {
    border: none;
    outline: none;
    background-color: transparent;
    color: #68717A;
    font-size: 20px;
}

.dropdown-menu {
    top: 0;
    right: 100%;
    left: -210px;
    min-width: 180px
}


.dropdown-item-green,
.dropdown-item-orange,
.dropdown-item {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .4rem !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    padding: 7px 20px;
    color: #68717A;
}

.dropdown-item:hover {
    color: #007bff;
    text-decoration: none;
    background-color: #007bff1c;
}

.dropdown-item-orange:hover {
    color: #FFAE00;
    text-decoration: none;
    background-color: #FFAE0030;
}

.dropdown-item-orange:focus {
    color: #fff;
    text-decoration: none;
    background-color: #FFAE00;
}

.dropdown-item-green:hover {
    color: #0BB566;
    text-decoration: none;
    background-color: #0BB56630;
}

.dropdown-item-green:focus {
    color: #fff;
    text-decoration: none;
    background-color: #0BB566;
}


/* ========== END DROPDOWN ========== */

.btn-add-column {
    padding: 5px 18px;
    color: #0CAE63;
    background: #fff;
    border: 1px solid #0CAE63;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    transition: .4s ease-in-out;
}

.btn-add-column:hover {
    color: #fff;
    background: #0CAE63;
}

.btn-add-column .fa-plus {
    position: relative;
    top: 2px;
}

.btn-gelar-save {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 18px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: 5px;
    border: none;
}

.btn-gelar-save:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #0073EE 104.42%);
}

.btn-gelar-save .fa-plus {
    position: relative;
    top: 2px;
}

.hrd-tbl-content thead tr th {
    font-size: 14px;
    text-align: left;
}

.hrd-tbl-content tfoot tr td {
    font-size: 14px;
    padding-left: 25px;
}

.hrd-tbl-content tbody tr td {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}

.py-numb {
    padding-top: 3.5rem !important;
    padding-bottom: 3rem !important;
}

html {
    scroll-behavior: smooth;
}

.ScrollToNumbering {
    width: 45px;
    height: 45px;
    position: fixed;
    z-index: 100;
    bottom: 125px;
    right: 10px;
    cursor: pointer;
    border-radius: 100px;
    transition: all .9s ease;
    opacity: 0;
    visibility: hidden;
    animation: scrollDelay .75s 1s forwards;
    -moz-animation: scrollDelay .75s 1s forwards;
    -webkit-animation: scrollDelay .75s 1s forwards;
    -o-animation: scrollDelay .75s 1s forwards;
    background: #b0d6ff;
    font-size: 24px;
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ScrollToPressing {
    width: 45px;
    height: 45px;
    position: fixed;
    z-index: 100;
    bottom: 70px;
    right: 10px;
    cursor: pointer;
    border-radius: 100px;
    transition: all .9s ease;
    opacity: 0;
    visibility: hidden;
    animation: scrollDelay .75s 1s forwards;
    -moz-animation: scrollDelay .75s 1s forwards;
    -webkit-animation: scrollDelay .75s 1s forwards;
    -o-animation: scrollDelay .75s 1s forwards;
    background: #b0d6ff;
    font-size: 24px;
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ScrollToBundling {
    width: 45px;
    height: 45px;
    position: fixed;
    z-index: 100;
    bottom: 15px;
    right: 10px;
    cursor: pointer;
    border-radius: 100px;
    transition: all .9s ease;
    opacity: 0;
    visibility: hidden;
    animation: scrollDelay .75s 1s forwards;
    -moz-animation: scrollDelay .75s 1s forwards;
    -webkit-animation: scrollDelay .75s 1s forwards;
    -o-animation: scrollDelay .75s 1s forwards;
    background: #b0d6ff;
    font-size: 20px;
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ScrollToNumbering:hover,
.ScrollToPressing:hover,
.ScrollToBundling:hover {
    background: #96c9ff;
    color: #007BFF;
    text-decoration: none;
}

.ignielToTop:active,
.ignielToTop:focus {
    bottom: 100%;
}

@keyframes scrollDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-webkit-keyframes scrollDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

@-moz-keyframes scrollDelay {
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* ============================= END PRODUCTION - CUTTING ======================================== */

/* ================  QR CODE  ======================== */


.acc_card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    border: none;
    margin-bottom: 30px;
    background-color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.acc_card .card-header {
    background-color: #fff;
    border-bottom: none;
    padding: 20px;
    max-width: 1000px;
    position: relative;
    -webkit-box-shadow: 0px 1px 20px 0px rgba(69, 90, 100, 0.08);
    box-shadow: 0px 1px 20px 0px rgba(69, 90, 100, 0.08);
}

#containers-card {
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    height: auto;
    width: auto;
}

.product-details {
    position: relative;
    text-align: left;
    overflow: hidden;
    float: right;
    width: 60%;
    height: 250px;
    padding-top: 35px;
    padding-left: 20px;
}

.product-details:before {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    right: 0;
    top: 0;
    margin-top: 62px;
    margin-right: 40px;
    background: #359aff;
    border-radius: 50%;
    opacity: 0.06;
    transition: 0.4s ease-in-out;
}

.product-details:after {
    position: absolute;
    content: "";
    width: 110px;
    height: 110px;
    right: 0;
    top: 0;
    margin-top: -30px;
    margin-right: -20px;
    border-radius: 50%;
    background: #359aff;
    opacity: 0.09;
    transition: 0.4s ease-in-out;
}

.product-image {
    transition: all 0.3s ease-out;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 40%;
    height: 100%;
    float: left;
}

.image-card {
    width: 250px;
    height: 250px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.info {
    background: rgba(27, 26, 26, 0.7);
    transition: all 0.3s ease-out;
    transform: translateX(-100%);
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.info1 {
    font-family: "poppins", sans-serif;
    color: #fff;
    justify-content: center;
    align-items: center;
    margin-top: 95px;
}

.info .desc {
    text-align: center;
    transform: translateY(150px);
}

.product-image:hover .info {
    transform: translateX(0);
}

.product-image:hover img {
    transition: all 0.3s ease-out;
}

.product-image:hover img {
    transform: scale(1.2, 1.2);
}

.img-detail {
    width: 200px;
    border-radius: 6px;
    box-shadow: -4px -4px 15px #e2e2e2, 4px 4px 15px #e2e2e2;
}

.grid {
    display: grid;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gap-6 {
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.card-detail {
    border-radius: 6px;
    /* background-color: #359aff; */
    background-color: #45a2ff;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.2);
}

.styles:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    margin-left: 130px;
    margin-top: 20px;
    background: transparent;
    border: 2px solid #fff;
    opacity: 0.2;
    transform: rotate(30deg);
}

.styles:after {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: -50px;
    margin-left: 200px;
    background: transparent;
    border: 2px solid #fff;
    opacity: 0.2;
}

.buyers:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    margin-top: 10px;
    margin-left: 140px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid #fff;
    opacity: 0.13;
    transform: rotate(25deg);
}

.buyers:after {
    position: absolute;
    content: "";
    height: 30px;
    width: 60px;
    background: #fff;
    opacity: 0.13;
    margin-top: -40px;
    margin-left: 200px;
    transform: rotate(-30deg);
}

.card-detail .card-body {
    padding: 1.5rem;
}

.flex {
    display: flex;
}

.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.w-40 {
    width: 10rem;
}

.h-40 {
    height: 10rem;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
}

.px-5 {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.ml-10 {
    margin-left: 2.5rem;
}

.h6 {
    font-family: "poppins", sans-serif;
    letter-spacing: 0.5px;
    font-size: 20px;
    font-weight: 600;
    color: #666;
}

.styles,
.buyers {
    font-family: "poppins", sans-serif;
    letter-spacing: 0.1rem;
    color: #e5f2ff;
    font-weight: 600;
    font-size: 18px;
}

.style__ {
    color: #fff;
    margin-top: 5px;
    font-weight: 600;
    font-size: 20px;
}

.buyer__ {
    color: #fff;
    margin-top: 5px;
    font-weight: 600;
    font-size: 20px;
}

.text-xs {
    font-family: "poppins", sans-serif;
    font-size: 0.75rem;
}

.text-true {
    font-family: "poppins", sans-serif;
    font-size: 14px;
    color: #007bff;
    opacity: 0.77;
}

.text-false {
    font-family: "poppins", sans-serif;
    font-size: 14px;
    color: #dc3545;
    opacity: 0.77;
}

.font-light {
    font-weight: 500;
}

.mb-6 {
    margin-bottom: 1rem;
}

.mt-6 {
    margin-top: 1rem;
}

.mt-12px {
    margin-top: 12px;
}

.justify-between {
    justify-content: space-between;
}

.icon-circle-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    outline: none;
}

.icon-circle {
    color: #fff;
    background-color: #87c3ff;
    border: 1px solid #fff;
    border-radius: 50%;
}

.icon-circle-2 {
    color: #5ac2ff;
    background-color: #fff;
    border: 0.16rem solid #5ac2ff;
    border-radius: 50%;
}

.w-10 {
    width: 2.5rem;
}

.h-10 {
    height: 2.5rem;
}

.w-15 {
    width: 1.3rem;
}

.h-15 {
    height: 1.3rem;
}

/* =============================== */

#accordionGroup {
    font-family: "poppins", sans-serif;
    letter-spacing: 0.05rem;
    font-size: 16px;
    font-weight: 600;
}

.accordion-effect {
    color: #555;
}

.accordion-effect:hover {
    background: linear-gradient(to right, #5aadff, #5aadff);
    color: #fff;
}

.title-update {
    font-size: 15px;
    font-weight: 500;
}

.tablist-icon {
    padding-right: 10px;
    font-size: 18px;
}

.tablist-icon-update {
    padding-right: 10px;
    font-size: 15px;
    font-weight: 500;
}

.tablist-icon2 {
    padding-right: 4px;
    font-size: 16px;
}

.tablist-icon3 {
    padding-right: 12px;
    padding-left: 2px;
    font-size: 18px;
}

.acc-title {
    font-size: 15px;
}

.last-update {
    font-size: 13px;
}

.remark_ {
    font-weight: 500;
}

.type_all {
    font-weight: 600;
    text-transform: uppercase;
}

/* END DETAIL NEW */

/* ======================================= */

/* PROGRESS BAR */

.space {
    width: 130px;
}

.skill-bars {
    width: 120px;
    margin-top: 28px;
    margin-left: 5px;
}

.skill-bars .bar:first-child {
    margin-top: 0px;
}

@keyframes showText {
    100% {
        opacity: 1;
    }
}

.skill-bars .bar .progress-line {
    height: 10px;
    width: 100%;
    background: #f0f0f0;
    position: relative;
    transform: scaleX(0);
    transform-origin: left;
    border-radius: 10px;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2),
        0 1px rgba(255, 255, 255, 0.8);
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
    100% {
        transform: scaleX(1);
    }
}

.bar .progress-line .bar2 {
    height: 120%;
    position: absolute;
    border-radius: 10px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: #007bff;
    animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.progress-line .bar2::before {
    position: absolute;
    content: "";
    top: -10px;
    right: 0;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: #000;
    opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}

.percent-bar80 {
    position: absolute;
    top: -32px;
    right: 0;
    font-weight: 500;
    background: #000;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}

.bar .progress-line .bar3 {
    height: 120%;
    position: absolute;
    border-radius: 10px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: #007bff;
    animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.progress-line .bar3::before {
    position: absolute;
    content: "";
    top: -9px;
    right: 0;
    margin-right: -7px;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-color: #000;
    opacity: 0;
    animation: showText3 0.5s 1.5s linear forwards;
}

.percent-bar0 {
    position: absolute;
    top: -31px;
    right: 0;
    margin-right: -31px;
    font-weight: 500;
    background: #000;
    color: #fff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 2px 5px;
    font-size: 12px;
    opacity: 0;
    animation: showText3 0.5s 1.5s linear forwards;
}

.bar .progress-line .bar100 {
    height: 120%;
    position: absolute;
    border-radius: 10px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    background: #1ddd5d;
    animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.progress-line .bar100::before {
    position: absolute;
    content: "";
    top: -10px;
    right: 0;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: #000;
    opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}

.percent-bar100 {
    position: absolute;
    top: -32px;
    right: 0;
    font-weight: 500;
    background: #000;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 6px;
    opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}

@keyframes showText2 {
    100% {
        opacity: 1;
    }
}

@keyframes showText3 {
    100% {
        opacity: 1;
    }
}

@keyframes showText100 {
    100% {
        opacity: 1;
    }
}

/* END PROGRESS BAR */

/* ====================== */

/* NEUMORPHISM CARD QR */

.card-qr {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 88vh;
}

.wrapper-qr,
.buttons .button-print {
    background: #f4f6f9;
    box-shadow: -3px -3px 7px #ffffff, 3px 3px 5px #ceced1;
}

.wrapper-qr {
    position: relative;
    width: 350px;
    padding: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.wrapper-qr .icon {
    font-size: 17px;
    color: #31344b;
    position: absolute;
    cursor: pointer;
    opacity: 0.7;
    top: 15px;
    height: 35px;
    width: 35px;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    font-size: 16px;
}

.wrapper-qr .icon i {
    position: relative;
    z-index: 9;
}

.wrapper-qr .name1 {
    font-family: "poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #4f5055;
    padding-top: 8px;
    margin: 18px 0 5px 0;
}

.wrapper-qr .name2 {
    font-family: "poppins", sans-serif;
    font-weight: 600;
    color: #4f5055;
    font-size: 16px;
    padding-bottom: 20px;
}

.wrapper-qr .name3 {
    font-family: "poppins", sans-serif;
    font-weight: 600;
    color: #4f5055;
    font-size: 16px;
}

.wrapper-qr .name4 {
    font-family: "poppins", sans-serif;
    font-weight: 600;
    color: #4f5055;
    font-size: 16px;
}

.wrapper-qr .social-icons {
    margin: 15px 0 25px 0;
}

.social-icons a {
    position: relative;
    height: 40px;
    width: 40px;
    margin-bottom: 20px;
    display: grid;
    text-decoration: none;
    border-radius: 50%;
    cursor: default;
}

.social-icons a:hover::before,
.wrapper-qr .icon:hover::before,
.buttons .button-print:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background: #ecf0f3;
    box-shadow: inset -3px -3px 7px #ffffff, inset 3px 3px 5px #ceced1;
}

.buttons .button-print:hover:before {
    z-index: -1;
    border-radius: 5px;
}

.tshirt {
    padding: 8px 8px;
    margin-right: 10px;
    border-radius: 50%;
    color: #4267b2;
    box-shadow: -5px -5px 7px #ffffff, 3px 3px 5px #ceced1;
}

.shopping {
    margin-top: 15px;
    margin-bottom: 30px;
    padding: 8px 8px;
    margin-right: 10px;
    border-radius: 50%;
    color: #1da1f2;
    box-shadow: -5px -5px 7px #ffffff, 3px 3px 5px #ceced1;
}

.print {
    padding-right: 15px;
    color: #01a733;
}

.wrapper-qr .buttons {
    display: flex;
    width: 80%;
    justify-content: space-between;
}

.buttons .button-print {
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    padding: 12px 0;
    color: #4f5055;
    font-size: 17px;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    z-index: 4;
}

.buttons .button-print:first-child {
    margin-right: 10px;
}

.buttons .button-print:last-child {
    margin-left: 10px;
}

/* NEUMORPHISM CARD QR */

/* ===================== */

/* .qr-edit, .qr-upload {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-top: 4px;
} */

/* BTN TABLE */

.btn-upload1 {
    background-color: #eeb12d;
    color: #fff;
}

.btn-upload1:hover {
    background-color: #daa32d;
    color: #fff;
}

.btn-upload2 {
    background-color: #1f77ad;
    color: #fff;
}

.btn-upload2:hover {
    background-color: #1c6c9e;
    color: #fff;
}

.btn-eye {
    background-color: #1ec9cf;
    color: #fff;
}

.btn-eye:hover {
    background-color: #1aacb1;
    color: #fff;
}

.btn-qr {
    background-color: #0c92ff;
    color: #fff;
}

.btn-qr:hover {
    background-color: #006dc7;
    color: #fff;
}

.btn-edit {
    background-color: #309ec0;
    color: #fff;
}

.btn-edit:hover {
    background-color: #2b8fad;
    color: #fff;
}

.btn-show {
    width: 32px;
    background-color: #29bb83;
    color: #fff;
}

.btn-show:hover {
    background-color: #26aa77;
    color: #fff;
}

/* =====  PACKING LIST  ===== */

.passOrder,
.qtySama {
    border: none;
    outline: none;
    background: transparent;
    font-size: 30px;
    color: #00DB76;
}

.shortShip {
    border: none;
    outline: none;
    background: transparent;
    font-size: 30px;
    color: #F9B935;
}

.overShip {
    border: none;
    outline: none;
    background: transparent;
    font-size: 30px;
    color: #007BFF;
}


.qtyBeda {
    border: none;
    outline: none;
    background: transparent;
    font-size: 30px;
    color: #FB5B5B;
}

/* =====  END PACKING LIST  ===== */

/* ============================= */

/* Accordion Last Update */

:root {
    --color-summary-1: #fdffff;
    --color-summary-1-highlight: #97d9ff;
}

details {
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.05);
    border-left: 15px solid gray;
    padding: 10px;
    font-family: "poppins", sans-serif;
    font-size: 16px;
}

details {
    margin-top: 18px;
    margin-bottom: 18px;
}

details.accord-update {
    --highlight: var(--color-summary-1-highlight);
    background: var(--color-summary-1);
    border-left-color: var(--color-summary-1-highlight);
}

details summary {
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    font-family: "poppins", sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #555;
    padding: 20px;
    cursor: pointer;
}

.content-menu {
    padding: 2px 20px;
    color: var(--color-accord);
    font-size: 16px;
}

details summary::-webkit-details-marker,
details p::-webkit-details-marker {
    display: none;
}

/* summary:focus, p:focus {
    border-bottom: solid 3px var(--highlight);
} */
details[open] summary {
    border-bottom: solid 2px #ddf2ff;
}

details summary::selection,
details p::selection {
    background-color: var(--highlight);
}

details summary::before {
    cursor: pointer;
    position: absolute;
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    left: 0rem;
    margin-right: 0.5rem;
    transition: 0.4s ease-in-out;
}


.navbar-notif .qr-notif {
    font-size: 25px;
    color: #222;
}

.navbar-notif .qr-notif-count {
    position: absolute;
    top: -2px;
    margin-left: -6px;
    padding: 0 4px;
    background: #FB5B5B;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 5px;
}

.qr-desc-notif {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 36px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #222;
    margin-left: 60px;
    /* background: #0064cf; */
}

/* ================  END QR CODE  ======================== */


/* ================  SUBKON  ======================== */

@media screen and (max-width: 875px) {

    .subkon-date,
    .kontrak-kerja,
    .subkon-btn-date {
        display: none;
    }

    .title-24 {
        font-size: 18px;
    }
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 400;
}

.choose-file {
    padding-left: 180px;
}

.custom-file-labels {
    font-family: 'poppins', sans-serif;
    position: absolute;
    font-size: 15px;
    top: 0;
    right: 0;
    left: 0;
    text-align: left;
    z-index: 1;
    height: 2.4rem;
    padding: 0.375rem 0.75rem;
    overflow: hidden;
    text-shadow: none;
    line-height: 1.5;
    color: #a3a3a3;
    background-color: #fff;
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 5px;
    box-shadow: none;
    cursor: pointer;
}


.custom-file-labels::after {
    position: absolute;
    content: "Choose Document";
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 2.4rem;
    padding: 0.375rem 1.2rem;
    color: #fff;
    background-color: #007BFF;
    border-radius: 5px 0px 0px 5px;
    cursor: pointer;
}

/* ==== Monitoring === */

.sb-md-tabs {
    position: relative;
    width: 100%;
}

.sb-md-tabs .nav-item-show {
    width: calc(100% / 8);
    text-align: center;
}

.sb-md-tabs .nav-item-show .nav-link.active {
    color: #007BFF;
    font-size: 16px;
    font-weight: 500;
    border: none;
}

.sb-md-tabs .nav-item-show .nav-link.active~.sb-slide {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sb-md-tabs .nav-item-show .nav-link~.sb-slide {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sb-md-tabs .nav-item-show a {
    padding: 14px 0 !important;
    color: #68717A;
}

.sb-md-tabs .nav-item.open .nav-link,
.sb-md-tabs .nav-item.open .nav-link:focus,
.sb-md-tabs .nav-link.active,
.sb-md-tabs .nav-link.active:focus {
    background: rgba(134, 192, 255, 0.3);
    color: #007BFF;
    border: none;
}

.nav-tabs .sb-slide {
    /* background: #4099ff; */
    background: #007BFF;
    width: calc(100% / 8);
    height: 3px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: -2px;
}

@media screen and (max-width: 730px) {
    .nav-tabs .sb-slide {
        width: calc(100% / 4);
    }

    .sb-md-tabs .nav-item-show {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 480px) {
    .nav-tabs .sb-slide {
        width: calc(100% / 2);
    }

    .sb-md-tabs .nav-item-show {
        width: calc(100% / 2);
    }
}

.sb-card {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    height: 78px;
}

.sb-card2 {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    height: 78px;
}

.sb-card::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 5px;
    width: 93%;
    background-color: #007BFF;
    margin-right: 7.5px;
    margin-left: 7.5px;
    border-radius: 0 0 5px 5px;
}

.sb-card2::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 5px;
    width: 93%;
    background-color: #0CAE63;
    margin-right: 7.5px;
    margin-left: 7.5px;
    border-radius: 0 0 5px 5px;
}

.sb-card2 .txt1,
.sb-card .txt1 {
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: #68717A;
}

.sb-card2 .txt2,
.sb-card .txt2 {
    font-weight: 600;
    font-size: 24px;
    line-height: 36px;
    color: #2B2B2B;
}

.export-excel {
    position: absolute;
    bottom: 18px;
    left: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background: #0CAE63;
    font-size: 19px;
    color: #fff;
    border-radius: 5px;
}

.export-excel:hover {
    color: #fff;
}

.flat-card .flat-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: #68717A;
}

.flat-card .flat-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
}

.flat-card .flat-date {
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #007BFF;
}


.pd-tbl-header {
    padding: 20px 25px;
}

.flat-card .sb-report-title {
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    color: #68717A;
}

.flat-card .sb-report-desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #000000;
}

.flat-card .sb-count {
    width: 5%;
    height: 63px;
}

.flat-card .sb-header-table {
    margin-top: -5px;
    width: 95%;
    height: 48px;
    border-bottom: 1px solid #68717A;
    /* background-color: #00DB76; */
}

.flat-card .sb-count-badge {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 63px;
    height: 63px;
    left: 8px;
    top: 0;
    background: #007BFF;
    border-radius: 10px 0px 10px 0px;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
}

.flat-card .sb-count-badge2 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 63px;
    height: 63px;
    left: 8px;
    top: 0;
    background: #FB5B5B;
    border-radius: 10px 0px 10px 0px;
    font-weight: 600;
    font-size: 24px;
    color: #FFFFFF;
}

.j-first .doc,
.j-first .daftar {
    margin-left: 4rem;
}

.sb-header-table .title {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: #68717A;
}

.sb-header-table .desc {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #000000;
}

.sb-tbl-content thead tr th {
    font-size: 14px;
}

.sb-tbl-content tbody tr td {
    font-size: 14px;
    font-weight: 500;
}

@media screen and (max-width: 500px) {
    .flat-card .sb-count {
        width: 11%;
        height: 63px;
    }

    .flat-card .sb-header-table {
        margin-top: -5px;
        width: 89%;
        height: 48px;
        border-bottom: 1px solid #68717A;
    }

    .flat-card .sb-count-badge {
        width: 50px;
        height: 63px;
    }

    .flat-card .sb-count-badge2 {
        width: 50px;
        height: 63px;
    }

    .sb-header-table .title {
        font-weight: 500;
    }

    .sb-header-table .desc {
        font-size: 12px;
    }

    .sb-header-table .data {
        display: none;
    }

    .sb-tbl-content thead tr th,
    .sb-tbl-content tbody tr td {
        font-size: 12px;
    }
}


* {
    outline: none;
}

.DTtableSearch {
    position: relative;
    height: 37px;
    width: 250px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.DTtableSearch .searchText {
    width: 80%;
    height: 35px;
    font-size: 14px;
    line-height: 1;
    color: #222;
    padding-left: 10px;
    margin-left: 10px;
    border: none;
}

.DTtableSearch .iconSearch {
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 18px;
    color: #ddd;
    border: 0;
    background-color: transparent;
}

.container-form {
    width: 320px;
    height: 40px;
    margin-right: 30px;
    background-color: #fff;
    border: 1px solid rgba(0, 123, 255, 0.5);
    border-radius: 7px;
}

.form {
    height: 35px;
}

.search-subkon {
    width: 300px;
    height: 32px;
    font-size: 16px;
    line-height: 1;
    color: #222;
    padding-left: 20px;
    border: 0;
    margin-top: 3px;
}

.search-subkon::placeholder,
.search-playlist::placeholder {
    color: #999;
}

.btn-subkon-submit,
.btn-subkon-submit2 {
    float: right;
    display: block;
    cursor: pointer;
    color: #333;
    border: 0;
    background-color: transparent;
}

.icon-search {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 7px;
    top: 0;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    font-size: 24px;
    color: #fff;
    border-radius: 5px;
    border: none;
    height: 40px;
    width: 45px;
}

@media screen and (max-width: 900px) {
    .flat-card .sb-count {
        width: 7%;
    }

    .flat-card .sb-header-table {
        width: 93%;
    }

    .j-first .doc,
    .j-first .daftar {
        margin-left: 2.5rem;
    }
}

@media screen and (max-width: 680px) {
    .flat-card .sb-count {
        width: 10%;
    }

    .flat-card .sb-header-table {
        width: 90%;
    }

    .j-first .doc,
    .j-first .daftar {
        margin-left: 1rem;
    }
}

@media screen and (max-width: 610px) {
    .sb-date {
        display: none;
    }
}

@media screen and (max-width: 570px) {
    .container-form {
        width: 150px;
    }

    .search-subkon {
        width: 130px;
    }
}

@media screen and (max-width: 570px) {
    .flat-card .sb-header-table {
        border-bottom: 1px solid #fff;
    }
}

/* ==== End Monitoring === */

/* ========================= FLOATING LABEL  ========================= */

.floating-label-content {
    position: relative;
    width: 100%;
}

.floating-label-content textarea {
    min-height: 120px;
    padding: 10px 20px;
}

.floating-label {
    position: absolute;
    left: 15px;
    top: 8px;
    font-size: 14px;
    font-weight: 400;
    padding: 0 7px;
    background: #fff;
    color: #68717A;
    transition: 0.2s ease all;
}

.floating-input:focus,
.floating-select:focus {
    outline: none;
}

.floating-input:focus~.floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
}

.floating-input:not(:-moz-placeholder-shown)~.floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
}

.floating-input:not(:-ms-input-placeholder)~.floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
}

.floating-input:not(:placeholder-shown)~.floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
}

.floating-select:not([value=""]):valid~.floating-label {
    top: -10px;
    left: 10px;
    font-size: 12px;
}

.form-transparent {
    margin: -8px 0;
    padding: 0 !important;
    border: none;
    background: transparent;
    color: #2b2b2b;
    font-weight: 500
}

.borderInput {
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 20px;
}

.borderInputVW {
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    height: 2.6vw !important;
    border-radius: .8vw;
    font-size: 1vw;
    padding: 0 20px;
}

.borderInput[readonly] {
    background: #f0f0f0;
}

.borderInput3 {
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 10px;
}

.borderInput2 {
    background: #FFFFFF;
    border: 1px solid #CBCBCB;
    height: 38px;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
}

.borderInput:focus,
.borderInput3:focus,
.borderInput2:focus {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.txtBlue {
    background: #daecff;
    color: #007bff;
    text-align: center;
    border: none;
    height: 38px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 20px;
}

.txtBlue:focus {
    background: #daecff;
    color: #007bff;
}

.containerLeft {
    width: 10px;
    background: transparent;
}

.borderLeft {
    position: absolute;
    left: 0;
    top: 0;
    height: 35px;
    width: 14px;
    background: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top: 1px solid #CBCBCB;
    border-left: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    z-index: 999;
}

.borderLeft2 {
    position: absolute;
    left: 0;
    top: 0;
    height: 38px;
    width: 14px;
    background: #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top: 1px solid #CBCBCB;
    border-left: 1px solid #CBCBCB;
    border-bottom: 1px solid #CBCBCB;
    z-index: 999;
}

textarea {
    min-height: 120px;
    padding: 14px 20px;
}

/* ========================= END FLOATING LABEL  ========================= */

/* IMAGE */


.image-upload {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
}

.file-upload-btn {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: #007BFF;
    border-radius: 8px;
    font-size: 18px;
    border: none;
    padding: 10px;
    width: 75%;
    font-weight: 600;
    z-index: 2;
}

.file-upload-btn10,
.file-upload-btn9,
.file-upload-btn8,
.file-upload-btn7,
.file-upload-btn6,
.file-upload-btn5,
.file-upload-btn4,
.file-upload-btn3,
.file-upload-btn2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #68717A;
    background: transparent;
    border-radius: 50%;
    font-size: 36px;
    border: 1px solid rgba(104, 113, 122, 0.6);
    width: 100px;
    height: 100px;
    font-weight: 500;
    z-index: 2;
}

.file-upload-btn1 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: #007BFF;
    border-radius: 8px;
    font-size: 16px;
    border: none;
    padding: 10px;
    width: 85%;
    font-weight: 500;
    z-index: 2;
}

.file-upload-btn-ws {
    position: absolute;
    top: 80px;
    left: 44px;
    color: #fff;
    background: #007BFF;
    border-radius: 8px;
    font-size: 18px;
    border: none;
    padding: 7px 20px;
    font-weight: 600;
    z-index: 2;
}

.file-upload-btn-ws:hover,
.file-upload-btn:hover {
    background: #007bff;
    color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.file-upload-btn-ws:active,
.file-upload-btn:active {
    border: 0;
    transition: all 0.2s ease;
}

.file-upload-content10,
.file-upload-content9,
.file-upload-content8,
.file-upload-content7,
.file-upload-content6,
.file-upload-content5,
.file-upload-content4,
.file-upload-content3,
.file-upload-content2,
.file-upload-content1 {
    display: none;
    text-align: left;
}

.file-upload-input10,
.file-upload-input9,
.file-upload-input8,
.file-upload-input7,
.file-upload-input6,
.file-upload-input5,
.file-upload-input4,
.file-upload-input3,
.file-upload-input2,
.file-upload-input1 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.image-upload-wrap10,
.image-upload-wrap9,
.image-upload-wrap8,
.image-upload-wrap7,
.image-upload-wrap6,
.image-upload-wrap5,
.image-upload-wrap4,
.image-upload-wrap3,
.image-upload-wrap2 {
    margin-top: -12px;
    position: relative;
    text-align: center;
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
    border: 2px dashed rgba(104, 113, 122, 0.6);
    background: transparent;
}

.image-upload-wrap1 {
    margin-top: -12px;
    position: relative;
    text-align: center;
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
    background: rgba(104, 113, 122, 0.2);
}



.drag-text-ws {
    text-align: left;
}

.drag-text-ws h5 {
    position: absolute;
    top: 98px;
    left: 43px;
    font-weight: 500;
    color: #aaa;
    font-size: 14px;
}

.drag-text {
    text-align: center;
}

.drag-text-folding1 h5 {
    font-weight: 500;
    color: #aaa;
    font-size: 14px;
    margin-top: 65px;
}

.file-upload-image10,
.file-upload-image9,
.file-upload-image8,
.file-upload-image7,
.file-upload-image6,
.file-upload-image5,
.file-upload-image4,
.file-upload-image3,
.file-upload-image2,
.file-upload-image1 {
    width: 100%;
    height: 200px;
    object-fit: cover;
    position: relative;
    top: -13px;
    z-index: 9;
    border-radius: 10px;
}


.file-upload-image {
    width: 100%;
    margin-top: -12px;
    max-height: 250px;
    position: relative;
    z-index: 99;
    border-radius: 5px;
}

.image-title-wrap .remove-image {
    position: absolute;
    top: 12px;
    right: 15px;
    z-index: 99;
    color: #fff;
    background: #ff00006e;
    border: none;
    padding: 1px 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    outline: none;
    font-size: 18px;
}

.remove-image:hover {
    background: #e05151;
    color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.remove-image:active {
    border: 0;
    transition: all 0.2s ease;
}

.icon-upload1 {
    padding-top: 20px;
    font-size: 64px;
    color: rgba(104, 113, 122, 0.6);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    .check1,
    #check1 {
        --active: #007bff;
        --active-inner: #fff;
        --focus: 2px rgba(0, 123, 255, .3);
        --border: #bbc1e1;
        --border-hover: #007bff;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    .check2 {
        --active: #007bff;
        --active-inner: #fff;
        --focus: 2px rgba(0, 123, 255, .3);
        --border: #bbc1e1;
        --border-hover: #007bff;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 16px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    .check2:after,
    .check1:after,
    #check1:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    .check2:checked,
    .check1:checked,
    #check1:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
        box-shadow: 0px 0px 0px 2px rgb(188, 219, 253);
    }

    .check2:disabled,
    .check1:disabled,
    #check1:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    .check2:disabled:checked,
    .check1:disabled:checked,
    #check1:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    .check2:hover:not(:checked):not(:disabled),
    .check1:hover:not(:checked):not(:disabled),
    #check1:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    .check2:focus,
    .check1:focus,
    #check1:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    .check1:not(.switch),
    #check1:not(.switch) {
        width: 21px;
    }

    .check2:not(.switch) {
        width: 16px;
    }

    .check2:not(.switch):after,
    .check1:not(.switch):after,
    #check1:not(.switch):after {
        opacity: var(--o, 0);
    }

    .check2:not(.switch):checked,
    .check1:not(.switch):checked,
    #check1:not(.switch):checked {
        --o: 1;
    }

    .check2+labell,
    .check1+labell,
    #check1+labell {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    .check1:not(.switch),
    #check1:not(.switch) {
        border-radius: 7px;
    }

    .check2:not(.switch) {
        border-radius: 5px;
    }

    .check1:not(.switch):after,
    #check1:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    .check2:not(.switch):after {
        width: 5px;
        height: 10px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 5px;
        top: 0;
        transform: rotate(var(--r, 20deg));
    }

    .check2:not(.switch):checked,
    .check1:not(.switch):checked,
    #check1:not(.switch):checked {
        --r: 43deg;
    }

    .check2.switch,
    .check1.switch,
    #check1.switch {
        width: 38px;
        border-radius: 11px;
    }

    .check2.switch:after,
    .check1.switch:after,
    #check1.switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    .check2.switch:checked,
    .check1.switch:checked,
    #check1.switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    .check2.switch:disabled:not(:checked):after,
    .check1.switch:disabled:not(:checked):after,
    #check1.switch:disabled:not(:checked):after {
        opacity: 0.6;
    }
}


.label-checkbox {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.label-checkbox2 {
    position: relative;
    top: -2px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.label-radio {
    position: relative;
    top: 0;
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

.col-pj {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.doc-jaminan {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 68px;
    background: #fff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 8px;
}

.doc-jaminan .doc-name {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #68717A;
}

.doc-jaminan .icon-doc {
    position: relative;
    top: 2px;
    margin-left: 13px;
    margin-right: 10px;
    font-size: 20px;
    color: #0CAE63;
}

/* TABLE FREEZE */

#DTtable261 th:nth-child(1),
#DTtable261 th:nth-child(2),
#DTtable261 th:nth-child(3),
#DTtable261 th:nth-child(4),
#DTtable261 td:nth-child(1),
#DTtable261 td:nth-child(2),
#DTtable261 td:nth-child(3),
#DTtable261 td:nth-child(4) {
    background: #FFF;
}

#DTtable261 th:nth-child(1),
#DTtable261 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 60px;
    min-width: 60px;
}

#DTtable261 th:nth-child(2),
#DTtable261 td:nth-child(2) {
    position: sticky;
    left: 102px;
    width: 60px;
    min-width: 60px;
}

#DTtable261 th:nth-child(3),
#DTtable261 td:nth-child(3) {
    position: sticky;
    left: 240px;
    width: 60px;
    min-width: 60px;
}

#DTtable261 th:nth-child(4),
#DTtable261 td:nth-child(4) {
    position: sticky;
    left: 360px;
    width: 160px;
    min-width: 160px;
}

#DTtable261 th:nth-child(1),
#DTtable261 th:nth-child(2),
#DTtable261 th:nth-child(3),
#DTtable261 th:nth-child(4) {
    z-index: 2;
}

#DTtable262 th:nth-child(1),
#DTtable262 th:nth-child(2),
#DTtable262 th:nth-child(3),
#DTtable262 td:nth-child(1),
#DTtable262 td:nth-child(2),
#DTtable262 td:nth-child(3) {
    background: #FFF;
}

#DTtable262 th:nth-child(1),
#DTtable262 td:nth-child(1) {
    position: sticky;
    left: 0;
    width: 60px;
    min-width: 60px;
}

#DTtable262 th:nth-child(2),
#DTtable262 td:nth-child(2) {
    position: sticky;
    left: 102px;
    width: 60px;
    min-width: 60px;
}

#DTtable262 th:nth-child(3),
#DTtable262 td:nth-child(3) {
    position: sticky;
    left: 236px;
    width: 60px;
    min-width: 60px;
}

#DTtable262 th:nth-child(1),
#DTtable262 th:nth-child(2),
#DTtable262 th:nth-child(3) {
    z-index: 999;
}

.th-freeze {
    position: relative;
    background-color: #0064cf !important;
    z-index: 888;
}


@media screen and (max-width: 750px) {
    .col-pj {
        -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media screen and (max-width: 620px) {
    .col-pj {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 520px) {
    .col-pj {
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ================  END SUBKON  ======================== */


/* ================  SAMPLE REQUEST  ======================== */

.margin-10 {
    margin: 0 -10px;
}

.sch-md-tabs,
.sr-md-tabs {
    position: relative;
    width: 100%;
}

.sr-md-tabs .nav-item-show {
    width: calc(100% / 8);
    text-align: center;
}

.sch-md-tabs .nav-item-show {
    width: calc(100% / 8);
    text-align: center;
}

.sch-md-tabs .nav-item-show .nav-link,
.sr-md-tabs .nav-item-show .nav-link {
    /* box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px; */
    border-radius: 10px 10px 0 0;
}

.sch-md-tabs .nav-item-show .nav-link.active,
.sr-md-tabs .nav-item-show .nav-link.active {
    color: #007bff;
    font-size: 16px;
    font-weight: 500;
    border: none;
    border-radius: 10px 10px 0 0;
}

.sch-md-tabs .nav-item-show .nav-link.active~.sch-slide,
.sr-md-tabs .nav-item-show .nav-link.active~.sr-slide {
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sch-md-tabs .nav-item-show .nav-link~.sch-slide,
.sr-md-tabs .nav-item-show .nav-link~.sr-slide {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.sch-md-tabs .nav-item-show a,
.sr-md-tabs .nav-item-show a {
    padding: 10px 0 !important;
    color: #68717A;
    border: none;
    outline: none;
}

/* .sch-md-tabs .nav-link {
    content: '';
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: #0065d1;
} */

.sr-md-tabs .nav-item.open .nav-link,
.sr-md-tabs .nav-item.open .nav-link:focus,
.sr-md-tabs .nav-link.active,
.sr-md-tabs .nav-link.active:focus {
    background: rgba(134, 192, 255, 0.3);
    color: #007bff;
    border: none;
    outline: none;
}

.sch-md-tabs .nav-item.open .nav-link,
.sch-md-tabs .nav-item.open .nav-link:focus,
.sch-md-tabs .nav-link.active,
.sch-md-tabs .nav-link.active:focus {
    background: rgba(134, 192, 255, 0.3);
    color: #007bff;
    border: none;
    outline: none;
}

.sr-md-tabs .sr-slide {
    background: #007bff;
    width: calc(100% / 8);
    height: 2px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: -1px;
}

.sch-md-tabs .sch-slide {
    background: #007bff;
    width: calc(100% / 8);
    height: 2px;
    border-radius: 20px;
    position: absolute;
    -webkit-transition: left 0.3s ease-out;
    transition: left 0.3s ease-out;
    bottom: -1px;
}

@media screen and (max-width: 850px) {

    .nav-tabs .sch-slide {
        width: calc(100% / 4);
    }

    .sch-md-tabs .nav-item-show {
        width: calc(100% / 4);
    }

}

@media screen and (max-width: 700px) {
    .flexx {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: .8rem !important;
    }
}

@media screen and (max-width: 480px) {

    .sch-md-tabs .nav-item-show,
    .sch-md-tabs .sch-slide {
        width: calc(100% / 2);
    }
}

.nav-item-show .relative {
    position: relative;
}

.icon-tabs1 {
    font-size: 28px;
    transform: rotate(-180deg);
}

.tabs-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 4px;
    min-width: 20px;
    color: #fff;
    background-color: #FB5B5B;
    border-radius: 6px;
    z-index: 10;
}

.modal-qty {
    border: none;
    outline: none;
    background-color: transparent;
    color: #007BFF;
    font-weight: 600;
}

.img-sr {
    width: 38px;
    height: 32px;
    object-fit: cover;
    border-radius: 5px;
}

.col-five,
.col-qty {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.input1 {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: #007BFF;
    background-clip: padding-box;
    border: 1px solid #007BFF;
    border-radius: 5px;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    transition: border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.inputBlue {
    display: block;
    width: 50px !important;
    height: 40px;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: #007BFF;
    background-clip: padding-box;
    border: 1px solid #007BFF;
    border-radius: 10px 0 0 10px;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    transition: border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.customSR {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inputBlue::placeholder,
.input1::placeholder {
    color: #fff;
    opacity: 1;
}

.inputBlue:focus,
.input1:focus {
    color: #fff;
    background-color: #007BFF;
    outline: 0;
}

#center {
    text-align: center;
}

@media screen and (max-width: 500px) {
    .col-qty {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

@media screen and (max-width: 600px) {
    .col-five {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 770px) {
    .nav-tabs .sr-slide {
        width: calc(100% / 4);
    }

    .sr-md-tabs .nav-item-show {
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 760px) {
    .title-hide {
        display: none;
    }

    .customSR {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
}

@media screen and (max-width: 1070px) {
    .title-hidden {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    .nav-tabs .sr-slide {
        width: calc(100% / 2);
    }

    .sr-md-tabs .nav-item-show {
        width: calc(100% / 2);
    }

    .sr-md-tabs .sr-slide,
    .sch-md-tabs .sch-slide {
        display: none;
    }

    .sch-md-tabs .nav-item-show .nav-link,
    .sr-md-tabs .nav-item-show .nav-link {
        border-radius: 10px !important;
    }
}


.sample-progress {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 12px;
    overflow: hidden;
    line-height: 0;
    font-size: 16px;
    background-color: #cce5ff;
    border-radius: 5px;
    margin-left: 40px;
    margin-top: 7px;
}

.progress-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: right;
    white-space: nowrap;
    transition: width 0.6s ease;
}

.bg-1 {
    background: #FF0000;
}

.bg-2 {
    background: #F9B935;
}

.bg-3 {
    background: #00DB76;
}

.bg-4 {
    background: #007BFF;
}

.bg-5 {
    background: #007BFF;
}

.sr-percent {
    position: absolute;
    font-weight: 400;
    font-size: 14px;
    color: #2B2B2B;
    margin-top: 3px;
}

.bg-tracking {
    width: 100%;
    background-color: rgba(0, 123, 255, 0.1);
}

.bg-tracking ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-item,
.progress-item-check {
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.progress-item .stepbar {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 25px;
    color: #fff;
    background: #F9B935;
    margin: 0 40px;
    z-index: 9;
}

.progress-item .one::after,
.progress-item .two::after,
.progress-item .three::after,
.progress-item .four::after,
.progress-item .five::after {
    content: '';
    position: absolute;
    left: 37px;
    width: 100px;
    height: 5px;
    background: rgba(249, 185, 53, 0.4);
}

.progress-item-check .stepbar {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 25px;
    color: #fff;
    background: #00DB76;
    margin: 0 40px;
    z-index: 9;
}

.progress-item-check .one::after,
.progress-item-check .two::after,
.progress-item-check .three::after,
.progress-item-check .four::after,
.progress-item-check .five::after {
    content: '';
    position: absolute;
    left: 37px;
    width: 100px;
    height: 5px;
    background: rgba(0, 219, 118, 0.4);
}

.title-stepbar {
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #545454;
    margin-top: 8px;
}

.icon-stepbar {
    width: 75px;
    margin-bottom: -5px;
}

.line-title {
    width: 122px;
    height: 2px;
    background-color: #007BFF;
}

.img-details-req {
    width: 100%;
    height: 470px;
    border-radius: 8px;
    object-fit: cover;
}

.late-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    color: #fff;
    background-color: #FB5B5B;
    border-radius: 5px;
}

.wip-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    color: #fff;
    background-color: #F9B935;
    border-radius: 5px;
}

.ok-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 8px;
    color: #fff;
    background-color: #00DB76;
    border-radius: 5px;
}

.grey-badge {
    font-size: 13px;
    font-weight: 500;
    padding: 4px 8px;
    color: #fff;
    background-color: #68717A;
    border-radius: 5px;
}

.accordion-header {
    display: flex;
    padding: 15px 25px;
    background-color: #007BFF;
    border-radius: 10px;
    cursor: pointer;
}

.accordion-header2 {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .8rem;
    padding: 10px 25px;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.055);
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 10px;
    cursor: pointer;
}

.accordion-header2 .accordion-title {
    font-size: 18px;
    color: #fff;
}

.accordion-header2 .accord-icon {
    color: #fff;
    font-size: 20px;
}

.accordion-header .accHeaderIcon {
    width: 4.5%;
}

.accordion-header .accHeaderTitle {
    width: 95.5%;
}

.accordion-header .accordion-title {
    font-size: 20px;
    color: #fff;
}

.accordion-header .accord-icon {
    color: #fff;
    font-size: 30px;
    margin-right: 20px;
}

.cards .accordion-body {
    background: #FFFFFF;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 20px 30px;
}

.accordion-body .no-data {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    color: #68717A;
}

.accordion-body .noData {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-top: 8px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: linear-gradient(270deg, #FB5B5B 0%, #f73e3e 103.15%);
}

.accordion-body .noData .desc {
    color: #fff;
    font-weight: 500;
    font-size: 20px;
}

.mt-sreq {
    margin-top: -12px;
}

@media screen and (max-width: 990px) {
    .mt-sreq2 {
        margin-top: -12px;
    }
}

/* ================  END SAMPLE REQUEST  ======================== */

/* ================  MORE PROGRAM LEADERBOARD  ======================== */

.lead-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 20px;
    row-gap: 10px;
}

.lead-2:nth-child(2) {
    grid-row: span 3;
}

.lead-2:nth-child(4) {
    grid-row: 1 span 2;
}

@media screen and (max-width: 1000px) {
    .lead-row {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 20px;
        row-gap: 10px;
        padding: 0 5px;
    }
}

@media screen and (max-width: 430px) {
    .title-vid {
        display: none;
    }
}

/* ================ END MORE PROGRAM LEADERBOARD  ======================== */


/* ================ MORE PROGRAM JOB ORIENTATION  ======================== */

.fileUploads {
    width: 100%;
    margin: 0 auto;
}

.imageUploadWrapRPA,
.imageUploadWrapPU,
.imageUploadWrap,
.imageUploadWrap2,
.imageUploadWrap3,
.imageUploadWrap4,
.imageUploadWrap5,
.imageUploadWrap6,
.imageUploadWrap7,
.imageUploadWrap8 {
    display: grid;
    place-items: center;
    position: relative;
    max-width: 100%;
    height: 60px;
    background: rgba(0, 123, 255, 0.1);
    border: 2px dashed #007BFF;
    border-radius: 10px;
}

.imageUploadWrap6 label {
    width: 100%;
    align-items: center; 
    
}

.imageUploadWrap6 .text-blue-primary {
    flex: 0 0 auto; /* Pastikan icon tidak ikut melar */
    width: 40px;     /* Atur lebar tetap */
    text-align: center;
}

.imageUploadWrap6 .flex.flex-col {
    flex: 1 1 auto; /* Biar isi teks bisa fleksibel */
    overflow-wrap: anywhere; /* Untuk membungkus nama file panjang */
}

.fileUploadInputRPA,
.fileUploadInputPU,
.fileUploadInput,
.fileUploadInput2,
.fileUploadInput3,
.fileUploadInput4,
.fileUploadInput5,
.fileUploadInput6,
.fileUploadInput7,
.fileUploadInput8 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.iconUpload {
    font-size: 30px;
    color: #007BFF;
    /* margin-bottom: -12px; */
}


.dragText {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #AAAAAA;
    margin-top: -10px;
}

.fileUploadContentRPA,
.fileUploadContentPU,
.fileUploadContent,
.fileUploadContent2,
.fileUploadContent3,
.fileUploadContent4,
.fileUploadContent5,
.fileUploadContent6,
.fileUploadContent7,
.fileUploadContent8 {
    position: relative;
    display: none;
    text-align: left;
}

.fileUploadImgRPA,
.fileUploadImgPU,
.fileUploadImg,
.fileUploadImg2,
.fileUploadImg3,
.fileUploadImg4,
.fileUploadImg5,
.fileUploadImg6,
.fileUploadImg7,
.fileUploadImg8 {
    width: 100%;
    height: 150px;
    object-fit: cover;
    position: relative;
    z-index: 9;
    border-radius: 10px;
}

.removeImage {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    color: #fff;
    background: #ff00006e;
    border: none;
    padding: 1px 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    outline: none;
    font-size: 18px;
}

.listGroup {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.listGroup:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

.listGroup2 {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    transition: .4s;
}

.listGroup2:hover {
    background-color: #007BFF10;
}

/* ================ END MORE PROGRAM JOB ORIENTATION  ======================== */


.col-10x4-3 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 28%;
    -ms-flex: 0 0 28%;
    flex: 0 0 28%;
    max-width: 28%;
}

.col-10x4-1 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 16%;
    -ms-flex: 0 0 16%;
    flex: 0 0 16%;
    max-width: 16%;
}

@media screen and (max-width: 1115px) {
    .col-10x4-3 {
        -webkit-flex: 0 0 33.333333%;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-10x4-1 {
        -webkit-flex: 0 0 1px;
        -ms-flex: 0 0 1px;
        flex: 0 0 1px;
        max-width: 1px;
    }

}

@media screen and (max-width: 780px) {
    .col-10x4-3 {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 14px;
    }

}

.alert-upload {
    font-size: 12px;
    color: #FF0000;
    font-style: italic;
}

.radioContainer {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.radioCustom {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 3px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #007bff;
    cursor: pointer;
}

.radioCustoms {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #007bff;
    cursor: pointer;
}

.radioCustomBlack {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 3px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #222;
    cursor: pointer;
}


.radioCustomBlack::after,
.radioCustoms::after,
.radioCustom::after {
    content: '';
    position: absolute;
    /* top: .24rem; */
    /* left: .24rem; */
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #fff;
}

.radioCustom2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 3px;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px solid #ccc;
    cursor: pointer;
}

.radioCustom2::after {
    content: '';
    position: absolute;
    /* top: .24rem; */
    /* left: .24rem; */
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #fff;
}

.radioCustomInputBlack:checked:checked~.radioCustomBlack {
    background-color: #222;
    box-shadow: 0px 0px 0px 3px rgb(184, 184, 184);
}

.radioCustomInput:checked:checked~.radioCustom2,
.radioCustomInput:checked:checked~.radioCustoms,
.radioCustomInput:checked:checked~.radioCustom {
    background-color: #007bff;
    box-shadow: 0px 0px 0px 3px rgb(188, 219, 253);
}

/* Tambahan Style Copy */

.no-notif i {
    font-size: 32px;
    color: #B7B7B7;
    margin: 32px 0 20px 0;
}

.no-notif span {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 18px;
    color: #B7B7B7;
}

.detail-btn {
    width: 90;
    /* height: 28px; */
    background: #007BFF;
    border-radius: 4px;
    border: none;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    color: #FFFFFF;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
}

.detail-btn:hover {
    color: #fff;
}

/* TAMBAHAN SUBKON */
.jaminan {
    /* position: absolute; */
    right: 0;
    width: 400px;
    height: 48px;
    background: #007BFF;
    border-radius: 0px 0px 10px 0px;
    display: flex;
    align-items: center;
    padding: 14px;
    box-sizing: border-box;
}

.jaminan h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
}


@media (max-width: 850px) {
    .carouselNone {
        display: none;
    }
}

@media (max-width: 768px) {

    .carousel-inner .carousel-item>div,
    .carousel-inner .carousel-items>div {
        display: none;
    }

    .carousel-inner .carousel-item>div:first-child,
    .carousel-inner .carousel-items>div:first-child {
        display: block;
    }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-items.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .8rem;
}

/* display 3 */
@media (min-width: 768px) {

    .carousel-inner .carousel-item-right.active,
    .carousel-inner .carousel-item-next {
        transform: translateX(33.333%);
    }

    .carousel-inner .carousel-item-left.active,
    .carousel-inner .carousel-item-prev {
        transform: translateX(-33.333%);
    }
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

.carouselPrev {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 8px;
    width: 35px;
    height: 35px;
    background: rgba(203, 203, 203, 0.37);
    border-radius: 30px;
    transition: .2s ease-in;
}

.carouselNext {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 8px;
    width: 35px;
    height: 35px;
    background: rgba(203, 203, 203, 0.37);
    border-radius: 30px;
    transition: .2s ease-in;
}

.carouselPrev:hover,
.carouselNext:hover {
    background: rgba(203, 203, 203, 0.55);
    /* outline: 1px solid #007bff; */
}

.carouselPrev i,
.carouselNext i {
    color: #007BFF;
}

.carouselPrevOrange {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -4px;
    width: 35px;
    height: 35px;
    background: #FFF6E399;
    border-radius: 50%;
    border: 4px solid #FFAE0090;
    box-shadow: 0px 0px 0px 4px rgba(255, 246, 227, 0.6);
    z-index: 89;
    transition: .2s ease-in;
}

.carouselNextOrange {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: -4px;
    width: 35px;
    height: 35px;
    background: #FFF6E399;
    border-radius: 50%;
    border: 4px solid #FFAE0090;
    box-shadow: 0px 0px 0px 4px rgba(255, 246, 227, 0.6);
    z-index: 89;
    transition: .2s ease-in;
}

.carouselPrevOrange:hover,
.carouselNextOrange:hover {
    border: 4px solid #FFAE0095;
}

.carouselPrevOrange i,
.carouselNextOrange i {
    font-size: 20px;
    color: #FFAE0099;
}

.filterAbs {
    position: absolute;
    top: -22px;
    left: 0;
}

.w-230 {
    width: 230px !important;
}

.w-340 {
    width: 340px !important;
}

.widthDateRange {
    width: 270px;
}

.widthDateRange2 {
    width: 220px;
}

@media screen and (max-width: 805px) {
    .title-none {
        display: none;
    }

    .object-hide {
        display: none;
    }
}

@media screen and (min-width: 805px) {
    .object-show {
        display: none;
    }
}

.containerGrid {
    display: grid;
    place-content: start;
    gap: .6rem;
    margin-top: 6px;
}

.inputGroupBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 10px 0px 0px 10px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    height: 38px;
    padding: 0 20px;
}


.inputGroupBlueVW {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: .8vw 0 0 .8vw;
    font-size: 1.4vw;
    color: #fff;
    height: 2.6vw;
    width: 3.4vw;
}

.inputGroupBlueRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    border-radius: 0 10px 10px 0;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    height: 38px;
    padding: 0 10px;
    min-width: 50px;
}

.rMeeting {
    display: flex;
    justify-content: start;
    align-items: center;
    list-style: none;
    gap: .8rem
}

.rMeeting li {
    margin-bottom: 32px;
}

.btnNavTabs {
    position: relative;
    padding: 4px 36px 26px 36px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    border: 1px solid #007BFF;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.btnNavTabs .kapasitas,
.btnNavTabsDisabled .kapasitas {
    position: absolute;
    left: 0%;
    right: 0%;
    text-align: center;
    font-weight: 400;
    font-size: 11px;
    line-height: 12px;
    color: #6E8AA5;
}

.btnNavTabsDisabled {
    position: relative;
    padding: 4px 36px 26px 36px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    border: 1px solid #007BFF;
    background-color: #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 28px;
}

.btnNavTabs.active .kapasitas {
    color: #fff;
}

.btnNavTabs.active {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

@media screen and (max-width: 430px) {
    .rMeeting {
        justify-content: center;
    }
}

.cursor {
    cursor: not-allowed ! important;
}

.heightCheck {
    height: 470px;
    gap: 1rem;
    overflow: hidden;
    margin-top: 1rem;
}

.heightCheck2 {
    height: 200px;
    gap: 1rem;
    /* overflow: hidden; */
}

.widthCheck {
    width: 50%;
}

.widthCheck2 {
    width: 150px;
}

.labelCheck {
    max-width: 60%;
    height: 22px;
    font-size: 14px;
    color: #222;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    cursor: pointer;

}

/* @media screen and (max-width: 1045px) {

    .heightCheck,
    .heightCheck2 {
        height: auto;
    }

    .widthCheck {
        width: 100%;
    }
} */

@media screen and (max-width: 500px) {
    .labelCheck {
        display: none;
    }
}

.nextPrevDate .next-day {
    position: absolute;
    top: 6px;
    right: 8px;
    padding-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 24px;
    color: #aaa;
    height: 28px;
    z-index: 99;
}

.nextPrevDate .prev-day {
    position: absolute;
    top: 6px;
    right: 34px;
    padding-right: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 24px;
    color: #aaa;
    height: 28px;
    z-index: 99;
}

.nextPrevDate .next-day:hover,
.nextPrevDate .prev-day:hover {
    color: #bbb;
}

.containerFormAll {
    position: relative;
    height: 37px;
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
}

.searchTextAll {
    width: 90%;
    height: 35px;
    font-size: 16px;
    line-height: 1;
    color: #222;
    padding-left: 10px;
    margin: 0 10px;
    border: 0;
    /* background-color: transparent; */
    /* background: #00ff80; */
}

.iconSearchAll {
    position: absolute;
    top: 3px;
    right: 8px;
    font-size: 18px;
    color: #007BFF;
    border: 0;
    background-color: #fff;
}

.containerDetailsSMV {
    margin-bottom: 12px;
}

.containerDetailsSMV .judul {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #9F9F9F;
}

.containerDetailsSMV .sub-judul {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #494849;
}

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

.justify-sb2,
.justify-sb3,
.justify-sb-xl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filterSMV {
    margin-right: 253px;
}

@media screen and (max-width: 1115px) {

    .justify-sb-xl {
        align-items: start;
        flex-direction: column;
        gap: .5rem;
    }
}

@media screen and (max-width: 700px) {
    .endSide {
        margin-top: 10px;
    }

    .justify-sb3 {
        align-items: start;
        flex-direction: column;
        gap: .5rem;
    }
}

@media screen and (max-width: 760px) {
    .justify-sb2 {
        margin-bottom: 50px;
    }

    .filterSMV {
        margin-right: 0;
    }

    .justify-start2,
    .justify-sb2 {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }
}

@media screen and (max-width: 490px) {
    .filterSMV {
        width: 100% !important;
    }
}

.btn-upload-smv {
    position: absolute;
    opacity: 0;
}

/* ===========  FLOATING CONTENTS  ============= */

.floating-legends {
    width: 404px;
    height: 490px;
    background: #007BFF;
    border-radius: 16px;
    position: fixed;
    bottom: 86px;
    right: 2%;
    z-index: 1045;
}

.floating-legends::before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    top: 100%;
    right: 20px;
    border-width: 10px;
    border-style: solid;
    border-color: rgb(255, 255, 255) transparent transparent transparent;
    display: block;
}

.floating-legends .floating-header {
    position: absolute;
    top: -75px;
}

.floating-legends .bodyChat {
    display: grid;
    place-content: center;
    gap: 1.4rem;
}

.floating-legends .bodyChatLeft {
    position: relative;
}

.floating-legends .chatHistory {
    position: relative;
    height: 62px;
    width: 100%;
    background: #F2F8FF;
    border: 1px solid #C5E1FF;
    border-radius: 10px;
    margin-bottom: 4px;
}

.floating-legends .chatHistory a {
    position: absolute;
    padding: 0 16px;
    width: 100%;
    height: 62px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.floating-legends .chatHistory .content1 .name {
    width: 200px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #494849;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-legends .chatHistory .content1 .bagian {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    color: #68717A;
}

.floating-legends .chatHistory .content2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.floating-legends .chatHistory .content2 .pills {
    padding: 1px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    background-color: #fb5b5b;
}

.floating-legends .chatHistory .content2 i {
    font-size: 20px;
    color: #007bff;
}

.floating-legends .chatHistory:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    transition: 1s;
}

.floating-legends .chatHistory:hover .content1 .name,
.floating-legends .chatHistory:hover .content1 .bagian,
.floating-legends .chatHistory:hover .content2 i {
    color: #fff;
}

.floating-legends .chatHistory2 {
    position: relative;
    height: 41px;
    width: 100%;
    background: #F2F8FF;
    border: 1px solid #C5E1FF;
    border-radius: 10px;
    margin-bottom: 8px;
}

.floating-legends .chatHistory2 a {
    position: absolute;
    padding: 0 14px;
    width: 100%;
    height: 41px;
    display: flex;
    justify-content: start;
    align-items: center;
    overflow: hidden;
}

.floating-legends .chatHistory2 a .content {
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-legends .chatHistory2:hover {
    color: #fff;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
}

.floating-legends .chatHistory2:hover a .content {
    color: #FFF;
}

.floating-legends .chatSearch {
    font-size: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 123, 255, 0.3);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.floating-legends .buttonBottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    border-radius: 0px 0px 16px 16px;
}

.floating-legends .troubleTitle {
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #68717A;
}

.floating-legends .floating-header .float-judul {
    font-weight: 500;
    font-size: 24px;
    line-height: 36px;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-legends .floating-header .sub-judul {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #E8E8E8;
}

.floating-contents {
    width: 404px;
    height: 396px;
    background: #fff;
    border-radius: 15px;
    position: absolute;
    bottom: 0;
    padding: 16px 18px;
}

.floating-contents .judul {
    font-weight: 500;
    font-size: 22px;
    line-height: 28px;
    color: #68717A;
}

.floating-contents .nav-tabs {
    display: none;
}

.floating-contents .bottomChat {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 66px;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 16px 16px;
}

.floating-contents .bottomChat .sendChat {
    display: flex;
    justify-content: center;
    align-items: center;
}

.floating-contents .bottomChat .sendChat button {
    position: absolute;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    background: #007BFF;
    border-radius: 8px;
    border: none;
    outline: none;
}

.floating-contents .bottomChat .sendChat i {
    font-size: 18px;
    color: #fff;
}

.floating-contents .bottomChat .sendChat input {
    width: 100%;
    height: 42px;
    background: #fff;
    border: 1px solid rgba(0, 123, 255, 0.3);
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 15px;
    padding-left: 45px;
    padding-right: 40px;
}

.floating-contents .bottomChat .fa-paperclip {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
}

.floating-contents .chatBody {
    display: grid;
    gap: .3rem !important;
}

.floating-contents .animations {
    display: grid;
    place-items: center;
    gap: .4rem;
    margin: 10px 0;
}

.floating-contents .animations .txt {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #68717A;
}

.floating-contents .rightChat {
    display: flex;
    justify-content: end;
    align-items: center;
}

.floating-contents .leftChat {
    display: flex;
    justify-content: start;
    align-items: center;
}

.floating-contents .respon {
    display: flex;
    gap: .8rem;
    position: relative;
    max-width: 320px;
    padding: 8px 14px;
    border-radius: 14px;
    background: #DEEEFF;
    overflow: hidden;
}

.floating-contents .respon .imgRespon {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 50%;
    width: 33px;
    height: 33px;
}

.floating-contents .respon .name {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #007BFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.floating-contents .respon .txt {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #68717A;
}

.floating-contents .rightChat span {
    position: relative;
    max-width: 320px;
    font-size: 14px;
    font-weight: 400px;
    padding: 8px 14px;
    border-radius: 14px 14px 0 14px;
    background: #007bff;
    color: #fff;
    /* float: right; */
}

.floating-contents .leftChat span {
    position: relative;
    max-width: 320px;
    font-size: 14px;
    font-weight: 400px;
    padding: 8px 14px;
    border-radius: 14px 14px 14px 0;
    background: #DEEEFF;
    color: #494849;
    /* float: left; */
}

.floating-contents .rightPict {
    display: flex;
    justify-content: end;
    align-items: center;
}

.floating-contents .rightPict .pictChat {
    max-width: 320px;
    padding: 5px 6px;
    border-radius: 14px 14px 0 14px;
    background: #007bff;
    color: #494849;
}

.floating-contents .rightPict .pictureChat {
    height: 100px;
    width: 200px;
    object-fit: cover;
    border-radius: 10px;

}

.containerRadio {
    position: relative;
    z-index: 20;
}

.containerRadio .options {
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    height: 42px;
    width: 100%;
    background: #fff;
    border: 1px solid #007bff;
    border-radius: 8px;
    transition: .3s ease-out;
}

.containerRadio .options:hover {
    cursor: pointer;
}

.containerRadio .radio-desc {
    font-weight: 500;
    color: #68717A;
    font-size: 14px;
}

.chatRadio:hover~.check,
.chatRadio:checked:checked~.check {
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    /* border: 1px solid #007bff; */
    border-radius: 8px;
    transition: .3s ease-in;
}

.chatRadio:hover~.check .radio-desc,
.chatRadio:checked:checked~.check .radio-desc {
    color: #fff;
}

/* ===============  DOT ANIMATION  ================= */

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #2baaff;
    color: #2baaff;
    box-shadow: 9999px 0 0 -5px #2baaff;
    animation: dotPulse 1.5s infinite linear;
    animation-delay: .25s;
}

.dot-pulse::before,
.dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #2baaff;
    color: #2baaff;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #2baaff;
    animation: dotPulseBefore 1.5s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #2baaff;
    animation: dotPulseAfter 1.5s infinite linear;
    animation-delay: .5s;
}

@keyframes dotPulseBefore {
    0% {
        box-shadow: 9984px 0 0 -5px #2baaff;
    }

    30% {
        box-shadow: 9984px 0 0 2px #2baaff;
    }

    60%,
    100% {
        box-shadow: 9984px 0 0 -5px #2baaff;
    }
}

@keyframes dotPulse {
    0% {
        box-shadow: 9999px 0 0 -5px #2baaff;
    }

    30% {
        box-shadow: 9999px 0 0 2px #2baaff;
    }

    60%,
    100% {
        box-shadow: 9999px 0 0 -5px #2baaff;
    }
}

@keyframes dotPulseAfter {
    0% {
        box-shadow: 10014px 0 0 -5px #2baaff;
    }

    30% {
        box-shadow: 10014px 0 0 2px #2baaff;
    }

    60%,
    100% {
        box-shadow: 10014px 0 0 -5px #2baaff;
    }
}

/* =============== END DOT ANIMATION  ================= */

/* =================  FRAMEWORK  ==================== */

code {
    overflow-y: auto;
    background-color: #f1f1f1;
    color: #333;
    font-weight: normal;
    padding: 0 32px;
    margin-top: -20px;
    margin-bottom: -40px;
}

pre {
    overflow: hidden;
    background: #f1f1f1;
    padding: 0;
    margin: 0;
}

.hljs {
    display: block;
    color: #333;
    background: #f1f1f1;
    line-height: 1.6;
}

.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
    color: #B9B9B9;
    font-style: italic
}

.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
    color: #333;
    font-weight: bold
}

.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
    color: #099
}

.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
    color: #bd240d
}

.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
    color: #900;
    font-weight: bold
}

.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
    font-weight: normal
}

.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
    color: #458;
    font-weight: bold
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
    color: #000080;
    font-weight: normal
}

.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
    color: #008080
}

.hljs-regexp {
    color: #009926
}

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
    color: #333333
}

.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
    color: #0086b3
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
    color: #999;
    font-weight: bold
}

.hljs-deletion {
    background: #fdd
}

.hljs-addition {
    background: #dfd
}

.diff .hljs-change {
    background: #0086b3
}

.hljs-chunk {
    color: #aaa
}

.card-framework {
    margin-bottom: 18px;
    border: 0px;
    border-radius: 10px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.082);
    background: #fff;
    padding: 1.6rem 2rem;
}

.card-framework2 {
    margin-bottom: 18px;
    border: 0px;
    border: 2px solid #fff;
}

.card-framework2 code {
    overflow: auto;
    background-color: #f6f6f6;
    color: #333;
    font-weight: normal;
    padding: 0 32px;
    margin-top: -20px;
    margin-bottom: -40px;
}

.card-framework2 pre {
    background: #f6f6f6;
    padding: 0;
    margin: 0;
}

.inner-card {
    width: 100%;
    display: flex;
    gap: 1rem;
    border: 2px solid #f1f1f1;
    padding: 1.6rem 2rem;
}

.inner-card2 {
    width: 100%;
    display: grid;
    gap: 1.2rem;
    border: 2px solid #f1f1f1;
    padding: 1.6rem 2rem;
}

@media screen and (max-width: 850px) {
    .inner-card {
        display: grid;
        gap: .6rem;
    }
}

.twoSide {
    width: 50%;
    margin: -50px 0;
}

/* =================  END FRAMEWORK  ==================== */

/* =================  FLOATING MENU  ==================== */

.floatMenu {
    position: fixed;
    right: 2.5%;
    bottom: 10%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1028;
}

.floatMenu .toggle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background: #007bff;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.20);
    font-size: 1.9rem;
    z-index: 9999;
    transition: .7s;
}

.floatMenu .toggle2 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    background: #007bff;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.20);
    font-size: 1.6rem;
    z-index: 9999;
    transition: .7s;
}

.floatMenu.active .toggle,
.floatMenu.active .toggle2 {
    transform: rotate(225deg);
}

.floatMenu li {
    position: absolute;
    left: 2px;
    list-style: none;
    transition: .5s;
}

.floatMenu li .red {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: 46px;
    height: 46px;
    background: linear-gradient(270deg, #FB5B5B 0%, #FF0000 103.15%);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 50%;
    transition: .2s;
}

.floatMenu li .red:hover {
    transition: .2s;
    box-shadow: 0px 4px 5px 0px rgba(255, 14, 14, .4);
    color: #fff;
}

.floatMenu li .green {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: 46px;
    height: 46px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 50%;
    transition: .2s;
}

.floatMenu li .green:hover {
    transition: .2s;
    box-shadow: 0px 4px 5px 0px rgba(10, 185, 104, .4);
    color: #fff;
}

.floatMenu li .blue {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: 46px;
    height: 46px;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border: none;
    outline: none;
    border-radius: 50%;
    transition: .2s;
}

.floatMenu li .blue:hover {
    transition: .2s;
    box-shadow: 0px 4px 5px 0px rgba(11, 122, 241, .4);
    color: #fff;
}

.floatMenu li .softBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    width: 46px;
    height: 46px;
    background: #D0EEFF;
    color: #007bff;
    border: none;
    outline: none;
    border-radius: 50%;
    transition: .2s;
}

.floatMenu li .softBlue:hover {
    transition: .2s;
    background: #007bff;
    box-shadow: 0px 4px 5px 0px rgba(11, 122, 241, .4);
    color: #fff;
}

.floatMenu.active .navOne {
    margin-top: -130px;
}

.floatMenu.active .navTwo {
    margin-top: -235px;
    transition-delay: .1s;
}

.floatMenu.active .navThree {
    margin-top: -340px;
    transition-delay: .2s;
}

.floatMenu.active .navFour {
    margin-top: -445px;
    transition-delay: .3s;
}

.btnAddCarton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 10%;
    width: 65px;
    height: 65px;
    background: linear-gradient(88.96deg, #0CAE63 -3.61%, #00DB76 105.59%);
    box-shadow: 0px 3px 5px rgba(104, 113, 122, 0.4);
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2rem;
    z-index: 1038;
}

/* =================  END FLOATING MENU  ==================== */

/* ================= RATING STAR ================= */

.rating-star {
    --dir: right;
    --fill: #f9b935;
    --fillbg: rgba(100, 100, 100, 0.15);
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --symbol: var(--star);
    /* --value: 1; */
    --w: calc(5 * 3rem);
    --x: calc(100% * (var(--value) / 5));
    block-size: 3rem;
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
}

.rating-star::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/3rem var(--symbol);
}

.rating-star::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/3rem var(--symbol);
    -webkit-mask: repeat left center/3rem var(--symbol);
}

.rating-star2 {
    --dir: right;
    --fill: #f9b935;
    --fillbg: rgba(100, 100, 100, 0.15);
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --symbol: var(--star);
    --value: 1;
    --w: calc(5 * 1.2rem);
    --x: calc(100% * (var(--value) / 5));
    block-size: 1.2rem;
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
    background-color: transparent;
}

.rating-star2::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/1.2rem var(--symbol);
}

.rating-star2::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/1.2rem var(--symbol);
    -webkit-mask: repeat left center/1.2rem var(--symbol);
}

.rating-star2::-moz-range-thumb,
.rating-star::-moz-range-thumb {
    height: 3rem;
    opacity: 0;
    width: 3rem;
}

.rating-star2::-webkit-slider-thumb,
.rating-star::-webkit-slider-thumb {
    height: 3rem;
    opacity: 0;
    width: 3rem;
    -webkit-appearance: none;
}


/* ================= RATING STAR ================= */


/* ================= PPIC SCHEDULE ================= */

.ProdSchedule .judul {
    font-weight: 500;
    font-size: 28px;
    line-height: 48px;
    color: #2B2B2B;
}

.btnSoftBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    height: 38px;
    background: #D0EEFF;
    font-size: 16px;
    font-weight: 500;
    padding: 0 16px;
    color: #007bff;
    border-radius: 8px;
    border: none;
    transition: 1s;
    outline: 0px solid #007bff;
}

.btnMagicAi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    height: 38px;
    background: #FEF3D9;
    color: #F8AE00;
    border-radius: 8px;
    position: relative;
    border: none;
    padding: 0 16px;
    font-weight: 500;
    scale: 1;
    transition: all .2s ease-in-out;
}

.btnMagicAi::before,
.btnMagicAi::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #F8AE00;
    border-radius: 8px;
}

.btnMagicAi::before {
    animation: borderAnimation 3s linear infinite;
}

.btnMagicAi::after {
    animation: borderAnimation 3s linear infinite 1.5s;
}

.btnMagicAi:hover {
    color: #F8AE00;
}

.btnMagicAi:active {
    scale: .95;
    transition: all .2s ease-in-out;
}

@keyframes borderAnimation {
    0% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 0 0 95%);
    }
    50% {
        clip-path: inset(95% 0 0 0); 
    }
    75% {
        clip-path: inset(0 95% 0 0);
    }
    100% {
        clip-path: inset(0 0 95% 0);
    }
}

.btnSoftBlue-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    height: 35px;
    background: #D0EEFF;
    font-size: 14px;
    font-weight: 500;
    padding: 0 14px;
    color: #007bff;
    border-radius: 8px;
    border: none;
    transition: .6s;
}

.btnSoftBlue-sm:hover,
.btnSoftBlue-sm:focus,
.btnSoftBlue:hover,
.btnSoftBlue:focus {
    box-shadow: 0px 9px 12px -8px rgba(163, 221, 255, 0.78);
    /* background: #007bff; */
    /* color: #fff; */
    transition: 1s;
    outline: 2px solid #007bff;
    /* outline-offset: 1px; */
}

.ProdSchedule .btnNav {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    background: #D0EEFF;
    font-size: 16px;
    font-weight: 400;
    padding: 0 16px;
    color: #007bff;
    border-radius: 10px;
    border: none;
    transition: .3s;
}

.ProdSchedule .btnNav:hover {
    box-shadow: 0px 9px 12px -8px rgba(163, 221, 255, 0.78);
    color: #007bff;
    transition: .3s;
}

.badgeNav {
    position: absolute;
    right: -4px;
    top: -8px;
    padding: 0 7px;
    border-radius: 8px;
    background-color: #007BFF;
    border: 1px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
}

.floating-content .badgeToday {
    padding: 4px 16px;
    color: #DB00FF;
    background: #FCE9FF;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.floating-content .badgeWeekend {
    padding: 4px 16px;
    color: #68717A;
    background: #ddd;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.floating-content .badgeNationalHoliday {
    padding: 4px 16px;
    color: #f8b021;
    background: #fff2d6;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
}

.floating-content .badgeSch {
    padding: 4px 16px;
    color: #fff;
    border-radius: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
}

.badges {
    padding: 2px 12px;
    color: #fff;
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
}

.badgeOTZO,
.floating-content .badgeOTZO {
    background: #8CC4FF;
}

.floating-content .badgeCOT {
    background: #007bff;
}

.floating-content .badgeCD {
    background: #0252ED;
}

.badgeOT,
.floating-content .badgeOT {
    background: #00DB76;
}

.badgeDelay,
.floating-content .badgeDelay {
    background: #FB5B5B;
}

.badgeSSF,
.floating-content .badgeSSF {
    background: #F9B935;
}

.navSchedule {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    gap: .8rem;
}

.navScheduleBottom {
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 888;
    width: 100%;
    height: 74px;
    background: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, .22);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.navScheduleBottom .btnNavBottom {
    border: none;
    outline: none;
    background: transparent;
    position: relative;
    display: grid;
    place-items: center;
}

.navScheduleBottom .btnNavBottom i {
    color: #68717A;
    font-size: 28px;
    transition: .3s;
}

.navScheduleBottom .btnNavBottom img {
    width: 30px;
}

.navScheduleBottom .btnNavBottom .name {
    font-weight: 400;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    color: #68717A;
    margin-top: 4px;
    transition: .3s;
}

.navScheduleBottom .btnNavBottom:hover i,
.navScheduleBottom .btnNavBottom:hover .name {
    color: #007bff;
    transition: .3s;
}

@media screen and (max-width: 1030px) {
    .navSchedule {
        display: none;
    }
}

@media screen and (max-width: 650px) {
    .ProdSchedule .judul {
        font-size: 18px;
        line-height: 24px;
    }

    /* .btnSoftBlue {
        height: 34px;
        font-size: 14px;
        padding: 0 12px;
    } */

    .badgeNav {
        top: -6px;
        padding: 0 6px;
        font-size: 10px;
        border-radius: 6px;
    }
}

@media screen and (min-width: 1030px) {

    .ProdSchedule .floatMenu,
    .navScheduleBottom {
        display: none;
    }
}

/* ================= END PPIC SCHEDULE ================= */

.imgAccounting {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
}

.imgAccounting2 {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    object-fit: cover;
}

@media screen and (max-width: 760px) {

    .mt-export {
        margin-top: 10px;
        padding-bottom: 12px;
    }
}

.noItem {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 0;
}

.containerFlex {
    width: 100%;
    display: flex;
    gap: .8rem;
}

.icons1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #ECF5FF;
    border-radius: 10px;
}

.icons1 i {
    font-size: 24px;
    color: #007bff;
}

.icons2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #FFF4DE;
    border-radius: 10px;
}

.icons2 i {
    font-size: 24px;
    color: #FFB825;
}

.icons2-sm {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    background: #FFF4DE;
    border-radius: 4px;
}

.icons2-sm i {
    font-size: 14px;
    color: #FFB825;
}

.icons3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #d9faea;
    border-radius: 10px;
}

.icons3 i {
    font-size: 24px;
    color: #00DB76;
}

.icons4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #e5e5e5;
    border-radius: 10px;
}

.icons4 i {
    font-size: 24px;
    color: #545454;
}

.icon-arrow {
    font-size: 12px;
    color: #68717a;
}

.containerTopThree,
.containerTopFive {
    display: flex;
    flex-wrap: nowrap;
    margin-right: -7.5px;
    margin-left: -7.5px;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    transition: .5s;
    border: 1px solid #fff;
    border-radius: 12px;
}

.containerTopThree:hover,
.containerTopFive:hover {
    transition: .5s;
    border: 1px solid #ccc;
    border-radius: 12px;
}

.containerTopThree .buyer {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 16px;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.containerTopThree .saving {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 16px;
    -webkit-flex: 0 0 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.containerTopThree .percent {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 16px;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.containerTopFive .no {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 16px;
    -webkit-flex: 0 0 8%;
    -ms-flex: 0 0 8%;
    flex: 0 0 8%;
    max-width: 8%;
}

.containerTopFive .factory {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.containerTopFive .line {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 22%;
    -ms-flex: 0 0 22%;
    flex: 0 0 22%;
    max-width: 22%;
}

.containerTopFive .amount {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 30%;
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

.filterCost {
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .8rem;
}

@media screen and (max-width: 800px) {

    .w-340 {
        width: 100%;
    }

    .filterCost {
        width: 100%;
        display: grid;
        place-content: center;
        gap: .8rem;
        background: #006dc720;
    }
}

@media screen and (max-width: 550px) {
    .containerTopThree {
        display: grid;
        gap: .4rem;
    }

    .containerTopThree .buyer,
    .containerTopThree .saving,
    .containerTopThree .percent {
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.accordionPreviewRed {
    height: 57px;
    padding: 0 1.6rem;
    background: #FFF0F0;
    border-radius: 10px;
    overflow: hidden;
}

.accordionPreviewBlue {
    height: 57px;
    padding: 0 1.6rem;
    background: #DEEEFF;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
}

.accordionPreviewOrange {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    padding: 0 1.6rem;
    background: #FFF6E2;
    border: 1px solid #F9B935;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
}

.accordionPreviewBlue .name,
.accordionPreviewRed .name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.accordionPreviewOrange .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #F9B935;
}

.accordionPreviewBlue .name .title {
    font-weight: 500;
    font-size: 14px;
    color: #007bff;
}

.accordionPreviewRed .name .title {
    font-weight: 500;
    font-size: 14px;
    color: #FB5B5B;
}

.btn-preview-orange {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 22px;
    height: 36px;
    color: #fff;
    background: #F9B935;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    border: none;
}

.btn-preview-orange:hover {
    box-shadow: 0px 9px 12px -8px rgba(249, 185, 53, 0.78);
    color: #fff;
}

.btn-preview-red {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 22px;
    height: 36px;
    color: #fff;
    background: #FB5B5B;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    border: none;
}

.btn-preview-red:hover {
    box-shadow: 0px 9px 12px -8px rgba(251, 91, 91, 0.78);
    color: #fff;
}

.btn-preview-blue {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 22px;
    height: 36px;
    color: #fff;
    background: #007bff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 400;
    border: none;
}

.btn-preview-blue:hover {
    box-shadow: 0px 9px 12px -8px rgba(0, 123, 255, 0.78);
    color: #fff;
}

.checkSuccess {
    color: #00DB76;
    font-size: 26px;
    margin-top: 16px;
}

.timesFailed {
    color: #fb5b5b;
    font-size: 26px;
    margin-top: 16px;
}

.btnHideShow {
    border: none;
    outline: none;
    background: transparent;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #455A64;
    transition: .4s ease-in;
}

.btnHideShow:hover {
    color: #999;
    transition: .4s ease-in;
}

/* ISSUE IR */

.cardPart {
    position: relative;
    border: 1px solid #eee;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
    z-index: 999;
}

.cardPart2 {
    position: relative;
    border: 1px solid #ddd;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
    border-radius: 20px;
    margin-bottom: 12px;
}

.cardHeads,
.cardHead {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0px 5px 20px rgba(242, 242, 242, 0.7);
}

.cardHead2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #ddd;
    box-shadow: 0px 5px 20px rgba(242, 242, 242, 0.7);
}

.sections,
.section {
    height: 71px;
}

.section2 {
    height: 108px;
}

.section3 {
    height: 60px;
}

.cardBody {
    background: #fff;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
}

.cardBody2 {
    background: #fff;
    border-radius: 0 0 20px 20px;
    box-shadow: 0px 0px 20px rgba(242, 242, 242, 0.5);
}

.listIR {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 85px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
    border-radius: 20px;
    padding: 0 1.4rem;
    margin-bottom: 10px;
}

.accordionHeaders .item,
.listIR .item {
    width: 45%;
    padding-right: 10px;
}

.accordionHeaders .qty,
.listIR .qty {
    width: 10%;
    padding-top: 2px;
}

.accordionHeaders .newOR,
.listIR .newOR {
    width: 15%;
    padding-top: 2px;
}

.accordionHeaders .glDate,
.listIR .glDate {
    width: 14%;
    padding-top: 2px;
}

.accordionHeaders .transaction,
.listIR .transaction {
    width: 14%;
    padding-top: 2px;
}

.listIR .menu {
    width: 2%;
    padding-top: 2px;
}

.dollar {
    position: absolute;
    top: 9px;
    left: 8px;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: #D3D3D3;
}

@media screen and (max-width: 700px) {
    .section {
        height: 158px;
    }
}

/* END ISSUE IR */

/* ============  INVOICE  ============= */

.invoiceList .btnPrevious {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    font-size: 16px;
    color: #949EAE;
    cursor: pointer;
    white-space: nowrap;
    transition: .4s;
}

.invoiceList .btnPrevious:hover {
    color: #777;
    transition: .4s;
}

.invoiceList .borderInvoice {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 2;
    border-left: 1px solid #eee;
}

.invoiceList .pdl-5 {
    padding-left: 2.2rem !important;
}

.invoiceList .pd-info {
    padding-right: 6rem !important;
}

.invoiceList .pdt-5 {
    padding-top: 3rem !important;
}

.invoiceList .pdx-5 {
    padding-left: 2.2rem !important;
    padding-right: 2.2rem !important;
}

.invoiceList .pdy-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.invoiceList .notice {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    width: 100%;
    background: #FFF5E1;
    padding: 1rem 1.4rem;
    margin: 6rem 3.5rem 0 0;
}

.invoiceList .notice .imgPaper {
    width: 120px;
}

.invoiceList .notice .judul {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #5E5E5E;
}

.invoiceList .notice .content {
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #68717A;
}

.invoiceList .notice .selectBuyer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: #5E5E5E;
    transition: .3s ease-in;
}

.invoiceList .notice .selectBuyer:hover {
    color: #007bff;
    transition: .3s ease-in;
}

.checkAccord {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #CCFFE7;
}

.readOnlyForm {
    font-size: 14px;
    font-weight: 500;
    color: #2b2b2b;
    height: 28px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 3px 10px rgba(204, 204, 204, 0.2);
    border-radius: 14px;
    text-align: center;
}

.readOnlyForm[readonly] {
    background: #fff;
}

.headerPreview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerPreview .left-side {
    position: relative;
    bottom: -18px;
    display: flex;
    justify-content: start;
    align-items: end;
    gap: .8rem;
}

.headerPreview .right-side .office,
.headerPreview .right-side .factory {
    display: flex;
}

.headerPreview .right-side .office .judul,
.headerPreview .right-side .factory .judul {
    display: flex;
    width: 60px;
}

.headerPreview .right-side .address {
    display: flex;
    width: 290px;
}

.headerPreview .mb-min {
    margin-bottom: -4px;
}

.headerTable .containerHeader {
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: -1px;
}

.footerTable {
    margin-top: -17px;
}

.footerTable .containerFooter {
    display: flex;
    font-size: 12px;
    font-weight: 400;
    margin-top: -1px;
}

.headerTable .containerHeader .title {
    font-size: 12px;
    font-weight: 500;
    /* font-style: italic; */
}

.footerTable .containerFooter .title {
    font-size: 12px;
    font-weight: 500;
}

.headerTable .containerHeader .part {
    width: 25%;
    padding: 6px 10px;
    border: 1px solid #777;
}

.headerTable .containerHeader .half,
.footerTable .containerFooter .half {
    width: 50%;
    padding: 6px 10px;
    border: 1px solid #777;
}

.headerTable .containerHeader .half2,
.footerTable .containerFooter .half2 {
    width: 50%;
    border: 1px solid #777;
}

.headerTable .containerHeader .half2 .padding,
.footerTable .containerFooter .half2 .padding {
    width: 100%;
    padding: 6px 10px;
}

.headerTable .containerHeader .all,
.footerTable .containerFooter .all {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #777;
}

.headerTable .containerHeader .empatpuluh,
.footerTable .containerFooter .empatpuluh {
    width: 40%;
    padding: 6px 10px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
}


.headerTable .containerHeader .empatpuluhsp,
.footerTable .containerFooter .empatpuluhsp {
    width: 40%;
    padding: 6px 10px;
    /* border-top: 1px solid #777; */
    /* border-bottom: 1px solid #777; */
}

.headerTable .containerHeader .duapuluh,
.footerTable .containerFooter .duapuluh {
    width: 20%;
    padding: 6px 10px;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
}

.headerTable .containerHeader .duapuluhlima,
.footerTable .containerFooter .duapuluhlima {
    width: 25%;
    padding: 6px 10px;
    /* border-left: 1px solid #777; */
    border-right: 1px solid #777;
    border-top: 1px solid #777;
}

.headerTable .containerHeader .duapuluhnoborder,
.footerTable .containerFooter .duapuluhnoborder {
    width: 20%;
    padding: 6px 10px;
}

.headerTable .containerHeader .tigapuluhnoborder,
.footerTable .containerFooter .tigapuluhnoborder {
    width: 30%;
    padding: 6px 10px;
}

.headerTable .containerHeader .delapanpuluh,
.footerTable .containerFooter .delapanpuluh {
    width: 80%;
    padding: 6px 10px; 
    border-left: 1px solid #777;
    border-bottom: 1px solid #777;
}

.headerTable .containerHeader .tigapuluh,
.footerTable .containerFooter .tigapuluh {
    width: 35%;
    padding: 6px 10px;
}
.headerTable .containerHeader .sepuluh,
.footerTable .containerFooter .sepuluh {
    width: 10%;
    padding: 6px 10px;
}

.headerTable .containerHeader .lima,
.footerTable .containerFooter .lima {
    width: 5%;
    padding: 6px 10px;
}

.headerTable .containerHeader .tujuhpuluh,
.footerTable .containerFooter .tujuhpuluh {
    width: 70%;
    padding: 6px 10px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    border-right: 1px solid #777;
}

.spasidua {
    margin:20px;
}

.headerTable .containerHeader .enampuluh,
.footerTable .containerFooter .enampuluh {
    width: 60%;
    padding: 6px 10px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    border-right: 1px solid #777;
}

.headerTable .containerHeader .limapuluh,
.footerTable .containerFooter .limapuluh {
    width: 50%;
    padding: 6px 10px;
    border-top: 1px solid #777;
    border-bottom: 1px solid #777;
    border-right: 1px solid #777;
}

.headerTable .containerHeader .limapuluhsp,
.footerTable .containerFooter .limapuluhsp {
    width: 50%;
    padding: 6px 10px;
    /* border-top: 1px solid #777; */
    /* border-bottom: 1px solid #777; */
    border-right: 1px solid #777;
}

.headerTable .containerHeader .halfnoborder,
.footerTable .containerFooter .halfnoborder {
    width: 50%;
    padding: 6px 10px;
}

.headerTable .containerHeader .allnoborder,
.footerTable .containerFooter .allnoborder {
    width: 100%;
    padding: 6px 10px;
}

@media screen and (max-width: 780px) {
    .invoiceList .pdt-5 {
        padding-top: 0 !important;
    }

    .invoiceList .pdl-5 {
        padding-left: 0 !important;
    }

    .invoiceList .pdx-5 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 2rem;
    }

    .invoiceList .title-26 {
        font-size: 20px;
        line-height: 26px;
    }

    .invoiceList .imgInvoice {
        width: 160px;
    }

    .borderInvoice {
        display: none;
    }
}

/* ============  END INVOICE  ============= */


/* ============  BLOCKING BUDGET  ============= */

.accordionHeaders .dates,
.accordionHeaders .plan,
.accordionHeaders .actual {
    width: 15%;
    padding-top: 2px;
}

.accordionHeaders .action {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 1rem;
    width: 55%;
    padding-top: 2px;
}

.accordionHeaders .action .today {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .3rem;
}

.removeRow {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: #FFDCDC;
    border-radius: 0px 0px 0px 50px;
    border: none;
    transition: .4s;
}

.removeRow:hover {
    background: #ffd1d1;
    transition: .4s;
}

.removeRow i {
    position: relative;
    top: -2px;
    right: -2px;
    color: #fb5b5b;
    font-size: 16px;
}

/* ============  END BLOCKING BUDGET  ============= */

/* ============  DOCUMENT STORAGE  ============= */

.storageDoc form {
    height: 130px;
    width: 390px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #E6F2FF;
    border: 1px dashed #949EAE;
    border-radius: 20px;
    cursor: pointer;
    transition: .4s;
}

.storageDoc form:hover {
    background: #daecff;
    transition: .4s;
}

.storageDoc form i {
    font-size: 50px;
    color: #007bff;
    margin-bottom: 8px;
}

.storageDoc section {
    overflow: hidden;
    padding: 0 .5rem;
}

.storageDoc section .row {
    margin-bottom: 12px;
    list-style: none;
    padding: 10px 20px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .4s;
}

.storageDoc section .row2 {
    margin-bottom: 12px;
    list-style: none;
    padding: 10px 20px;
    border: 1px solid #00DB76;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .4s;
}

.containerIcon,
.storageDoc section .row .containerIcon,
.storageDoc section .row2 .containerIcon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0 .75rem;
    background: #E5F2FF;
    border-radius: 5px;
}

.containerIcon i,
.storageDoc section .row .containerIcon i,
.storageDoc section .row2 .containerIcon i {
    color: #007bff;
    font-size: 22px;
}

.storageDoc section .row .fa-check,
.storageDoc section .row2 .fa-check {
    color: #007bff;
    font-size: 24px;
}

.storageDoc section .details .name {
    font-size: 14px;
    width: 500px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.progress-area .row .content,
.progress-area .row2 .content {
    width: 100%;
    margin-left: 15px;
}

.progress-area .details {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    justify-content: space-between;
}

.progress-area .content .progress-bar {
    height: 6px;
    width: 100%;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 30px;
}

.content .progress-bar .progress {
    height: 100%;
    width: 0%;
    background: #1a89ff;
    border-radius: inherit;
}

.uploaded-area {
    max-height: 232px;
    overflow-y: scroll;
}

.uploaded-area.onprogress {
    max-height: 150px;
}

.uploaded-area::-webkit-scrollbar {
    width: 0px;
}

.uploaded-area .row .content,
.uploaded-area .row2 .content {
    display: flex;
    align-items: center;
}

.uploaded-area .row .details,
.uploaded-area .row2 .details {
    display: flex;
    margin-left: 15px;
    flex-direction: column;
}

.row .percentage,
.row2 .percentage {
    color: #2b2b2b;
    font-size: 14px;
    margin-left: 20px;
}

.uploaded-area .row .details .size,
.uploaded-area .row2 .details .size {
    color: #404040;
    font-size: 11px;
}

.uploaded-area i.fa-check {
    font-size: 16px;
}

.dateWidth {
    width: 260px !important;
}

.containerDoc {
    display: flex;
    justify-content: space-between;
}

.containerDoc .btnDropDown {
    position: relative;
    top: -11px;
    right: 0;
}

.giscloudImg {
    position: absolute;
    top: -125px;
    right: -8px;
    width: 400px;
}

.removeDoc {
    font-size: 22px;
    color: #777;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: .4s;
}

.removeDoc:hover {
    color: #fb5b5b;
    transition: .4s;
}

.radioFlatContainer2 .radioDoc {
    width: 100%;
    background: #fff;
    border: 1px solid #f2f2f2;
    box-shadow: 2px 10px 20px rgba(221, 221, 221, 0.2);
    transition: .4s ease-out;
    cursor: pointer;
}

@media screen and (max-width: 680px) {

    .storageDoc section .details .name {
        width: 300px;
    }
}

@media screen and (max-width: 500px) {
    .storageDoc form {
        width: 100%;
        margin-top: 1rem;
    }

    .storageDoc section .row {
        padding: 10px;
    }

    .storageDoc section .details .name {
        width: 200px;
    }

    .dateWidth {
        width: 200px !important;
        margin-top: 10px;
    }

    .title-none2 {
        display: none;
    }
}

@media screen and (max-width: 400px) {

    .storageDoc section .details .name {
        width: 140px;
    }
}

/* ============  END DOCUMENT STORAGE  ============= */

/* ============  PARTIAL 262  ============= */

.accordionHeaders .woNumber,
.accordionHeaders .totalQty {
    width: 20%;
    padding-top: 2px;
}

.accordionHeaders .icons {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 60%;
    background: transparent;
    padding-top: 2px;
}

.accordionHeaders .category,
.accordionHeaders .totIssue {
    width: 35%;
    padding-top: 2px;
}

.accordionHeaders .icons2 {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 30%;
    background: transparent;
    padding-top: 2px;
}

.accordionHeaders .icons .chevron,
.accordionHeaders .icons2 .chevron {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #888;
    transition: .6s;
}

.accordionHeaders .icons .chevron i,
.accordionHeaders .icons2 .chevron i {
    font-size: 20px;
    color: #888;
}

.dragButton {
    position: relative;
    border: none;
    outline: none;
    background: transparent;
    z-index: 99;
    cursor: move;
    color: #7D8790;
}

.dragging {
    opacity: .2;
}

.containerStorageEdit {
    position: relative;
}

.containerStorageEdit .hiddenFile {
    position: absolute;
    opacity: 0;
}

.containerStorageEdit .storageEdit {
    height: 60px;
    width: 100%;
    background: #E5F2FF;
    border: 1px dashed #CCCCCC;
}

/* ============  END PARTIAL 262  ============= */


/* ============  QA  ============= */

.uploadPreviewImg {
    width: 100%;
    margin-bottom: 14px;
}

.uploadPreviewImg .imageUpload,
.uploadPreviewImg .imageUpload2,
.uploadPreviewImg .imageUpload3,
.uploadPreviewImg .imageUpload4,
.uploadPreviewImg .imageUpload5,
.uploadPreviewImg .imageUpload6,
.uploadPreviewImg .imageUpload7 {
    display: grid;
    place-items: center;
    position: relative;
    max-width: 100%;
    height: 150px;
    background: #E5F2FF;
    border: 1px dashed #CCCCCC;
}

.uploadPreviewImg .uploadInput,
.uploadPreviewImg .uploadInput2,
.uploadPreviewImg .uploadInput3,
.uploadPreviewImg .uploadInput4,
.uploadPreviewImg .uploadInput5,
.uploadPreviewImg .uploadInput6,
.uploadPreviewImg .uploadInput7 {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.uploadPreviewImg .iconUpload {
    font-size: 48px;
    color: #007BFF;
}

.uploadPreviewImg .dragText {
    font-weight: 400;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
    color: #68717A;
    margin-top: -20px;
}

.uploadPreviewImg .dragText .english {
    font-weight: 500;
    font-style: italic;
}

.uploadPreviewImg .fileUploadContent,
.uploadPreviewImg .fileUploadContent2,
.uploadPreviewImg .fileUploadContent3,
.uploadPreviewImg .fileUploadContent4,
.uploadPreviewImg .fileUploadContent5,
.uploadPreviewImg .fileUploadContent6,
.uploadPreviewImg .fileUploadContent7 {
    position: relative;
    display: none;
    text-align: left;
}

.uploadPreviewImg .uploadImg,
.uploadPreviewImg .uploadImg2,
.uploadPreviewImg .uploadImg3,
.uploadPreviewImg .uploadImg4,
.uploadPreviewImg .uploadImg5,
.uploadPreviewImg .uploadImg6,
.uploadPreviewImg .uploadImg7 {
    width: 100%;
    height: 150px;
    object-fit: cover;
    position: relative;
    z-index: 9;
    border: 1px dashed #CCCCCC;
}

.uploadPreviewImg .removeImage {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 99;
    color: #fff;
    background: #ff000050;
    border: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: all .4s ease;
    outline: none;
    font-size: 14px;
}

.uploadPreviewImg .removeImage:hover {
    background: #fb5b5b;
    transition: all .4s ease;
}

.chevronDropDown {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #68717A;
    font-size: 22px;
    color: #68717A;
}

.accordionFlat .double-check {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #CEE6FF;
}

/* ============  END QA  ============= */

/* ============  OFF CANVAS  ============= */

.bs-canvas-overlay {
    opacity: 0.5;
    z-index: 1100;
}

.bs-canvas {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 280px;
    transition: margin .4s ease-out;
}

.bs-canvas2 {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 450px;
    transition: margin .4s ease-out;
}

.bs-canvas3 {
    top: 0;
    z-index: 1110;
    overflow-x: hidden;
    overflow-y: auto;
    width: 320px;
    transition: margin .4s ease-out;
}

.bs-canvas-bottom {
    position: relative;
    left: 0;
    bottom: 0;
    z-index: 1110;
    overflow: hidden;
    height: 50vh;
    width: 100%;
    padding: 2rem;
    border-radius: 20px 20px 0 0;
    transition: margin .4s ease-out;
}

.bs-canvas-bottom .canvas-close-bottom {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translate(-50%);
    height: 4px;
    width: 70px;
    border-radius: 10px;
    background-color: #D9D9D9;
    cursor: pointer;
    border: none;
    transition: .9s;

}

.closeBtn:hover {
    background-color: #bdbdbd;
    transition: .9s;
}

.bs-canvas-bottom {
    left: 0;
    margin-bottom: -50vh;
}

.bs-canvas-left {
    left: 0;
    margin-left: -280px;
}

.bs-canvas-right {
    right: 0;
    margin-right: -280px;
}

.bs-canvas-right2 {
    right: 0;
    margin-right: -450px;
}

.bs-canvas-right3 {
    right: 0;
    margin-right: -320px;
}

.headerCanvas {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.headerCanvas2 {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: flex-start;
    flex-direction: column;
    gap: .4rem;
    box-shadow: 0px 10px 20px rgba(190, 209, 219, 0.15);
}

.headerCanvas .bs-canvas-close {
    outline: none;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #bbb;
}

.contentCanvas .btnCanvas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: .7rem;
}

/* ============  END OFF CANVAS  ============= */


/* ============  ERROR CODE  ============= */

.content-error {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.content-error .container-error {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    z-index: 99;
}

.aksenFixed {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.content-error .aksen {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.content-error .aksen-kiri {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 20%;
}

.content-error .aksen-kanan {
    position: absolute;
    top: 0;
    right: 0;
    width: 28%;
}

.content-error .text-xl {
    font-weight: 600;
    font-size: 48px;
    line-height: 42px;
    text-align: center;
    color: #455A64;
    margin-top: .4rem;
    margin-bottom: .6rem;
}

.content-error .text-sm {
    font-weight: 400;
    font-size: 20px;
    line-height: 22px;
    text-align: center;
    color: #455A64;
}

.content-error .img-404 {
    width: 38%;
    margin-bottom: 1.4rem;
}

.content-error .img-401 {
    width: 24%;
    margin-bottom: 1.4rem;
}

.content-error .img-419 {
    width: 34%;
    margin-bottom: 1.4rem;
}

.content-error .buttonBack {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #007bff;
    margin-top: 1.2rem;
    transition: .4s;
}

.content-error .buttonBack:hover {
    width: 150px;
    height: 50px;
    border-radius: 100px;
    background: #007bff;
    margin-top: 1.2rem;
    transition: .4s;
}

.content-error .buttonBack .txt-back {
    display: none;
    transition-delay: 1s;
}

.content-error .buttonBack:hover .txt-back {
    font-size: 20px;
    color: #fff;
    margin-left: 1rem;
    display: block;
    transition-delay: 1s;
}

.content-error .buttonBack .fa-long-arrow-alt-up {
    font-size: 32px;
    color: #fff;
    transform: rotate(-35deg);
}

.content-error .buttonBack .fa-chevron-left {
    font-size: 26px;
    color: #fff;
}

.content-error .buttonBack>.fas+.fas,
.content-error .buttonBack:hover>.fas {
    display: none;
    transition: .4s;
}

.content-error .buttonBack:hover>.fas+.fas {
    display: block;
    transition: .4s;
}

/* ============  END ERROR CODE  ============= */

/* ============  AQL  ============= */

.aql .bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 500px;
}

.aql .aql-bg {
    position: absolute;
    top: -88px;
    right: 0;
    width: 280px;
}

.aql .bg-create {
    position: relative;
    top: -25px;
    width: 70%;
}

.aql .bg-category {
    position: relative;
    top: -25px;
    left: 50%;
    transform: translate(-50%);
    width: 80%;
}

.aql .bg-category2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 80%;
}

@media screen and (max-width: 500px) {
    .aql .aql-bg {
        display: none;
    }
}

/* ============  END AQL  ============= */

/* ============  ROLE MANAGEMENT  ============= */

.role .imgRole {
    position: absolute;
    top: -70px;
    left: 26px;
    width: 220px;
}

.containerMenu {
    overflow-x: auto;
    overflow-y: hidden;
}

.navMenu {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 64px;
    width: 100%;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 2px 10px 30px rgba(221, 221, 221, 0.1);
    border-radius: 20px;
    margin-bottom: 12px;
    transition: .4s ease-in;
}

.navMenu:hover,
.navMenu.active {
    background: linear-gradient(269.98deg, #007BFF 0.01%, #3999FF 99.98%);
}

.navMenu .kiri {
    width: 58px;
    font-size: 32px;
    color: #455A64;
}

.navMenu .kanan .title {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #455A64;
    white-space: nowrap;
}

.navMenu .kanan .sub-title {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #68717A;
    white-space: nowrap;
}

.navMenu:hover .kiri,
.navMenu:hover .kanan .title,
.navMenu:hover .kanan .sub-title,
.navMenu.active .kiri,
.navMenu.active .kanan .title,
.navMenu.active .kanan .sub-title {
    color: #fff !important;
}

@media screen and (max-width: 770px) {
    .role .imgRole {
        display: none;
    }

    .title-32 {
        font-size: 26px;
        line-height: 28px;
    }

    .containerMenu {
        display: flex;
        gap: .5rem;
    }

    .navMenu {
        margin-bottom: 2px;
    }
}

/* ============  END ROLE MANAGEMENT  ============= */

/* ============  MONITORING IN OUT  ============= */

.bodyBlank .monitoring {
    position: relative;
    margin: 0;
    padding: 1.4vw;
    background: #fafbfc;
    /* overflow: hidden; */
}

.monitoring .imgPola {
    position: absolute;
    top: -8px;
    right: 0;
    width: 36%;
}

.bodyBlank .monitoring .containerTable {
    border: 0px;
    width: 100%;
    border: 0px;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: .5vh;
    max-height: 80vh;
    padding-right: .4vw;
}

.monitoring .hiveImg {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

.monitoring .imgGistex {
    position: relative;
    width: 10%;
    z-index: 9;
}

.monitoring .headerCard {
    position: relative;
    height: 13vh;
    width: 100%;
    background: #ddd;
    box-shadow: 0px 0px 20px rgba(240, 240, 240, 0.2);
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
}

.monitoring .headerCard .widthPO {
    position: relative;
    width: 100%;
    height: 180px;
    -webkit-flex: 0 0 28%;
    -ms-flex: 0 0 28%;
    flex: 0 0 28%;
    max-width: 28%;
    list-style: none;
}

.monitoring .headerCard .widthContent {
    position: relative;
    width: 100%;
    -webkit-flex: 0 0 18%;
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    max-width: 18%;
    list-style: none;
}

.title-48 {
    font-weight: 600;
    font-size: 2.2vw;
    line-height: 72px;
    color: #263238;
}

.title-bpb {
    font-weight: 500;
    font-size: 1.4vw;
    line-height: 30px;
    color: #68717A;
}

.monitoring .btnFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    background: #D0EEFF;
    font-size: 1.4vw;
    font-weight: 500;
    padding: .5vw 1.6vw;
    color: #007bff;
    border-radius: .8vw;
    border: none;
    transition: .6s;
}

.monitoring .btnFilter:hover {
    box-shadow: 0px 9px 12px -8px rgba(163, 221, 255, 0.78);
    background: #007bff;
    color: #fff;
    transition: .6s;
}

.monitoring .trackingSkip {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 4.8vw;
    width: 2vw;
    background: transparent;
    z-index: 99;
}

/* .monitoring .trackingSkip::before {
    content: '';
    position: absolute;
    width: 2vw;
    height: 2vw;
    border-radius: 50%;
    background: #2f91fa;
    border: .24vw solid #cde5ff;
} */

.monitoring .trackingSkip::after {
    content: '';
    position: absolute;
    left: 100%;
    height: 1.4vh;
    width: 10vw;
    /* width: 100%; */
    background: #7dbafe;
    z-index: 2;
}

.monitoring .timeTracking {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .4vw 1.4vw;
    border-radius: 1.2vw;
    background: #cfe6ff;
    border: .15vw solid #fff;
    z-index: 99;
}

.monitoring .timeTracking::after {
    content: '';
    position: absolute;
    left: 100%;
    height: 1.4vh;
    width: 10vw;
    /* width: 100%; */
    background: #7dbafe;
    z-index: 2;
}

.monitoring .timeTracking .time {
    font-size: 1.6vw;
    font-weight: 600;
    line-height: 4vh;
    color: #007bff;
}

.monitoring .timeTracking .date {
    font-size: 1.2vw;
    font-weight: 500;
    color: #007bff;
    white-space: nowrap;
}

.monitoring .timeTrackingDone {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: .4vw 1.4vw;
    border-radius: 1.2vw;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    z-index: 99;
}

.monitoring .timeTrackingDelay {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding : 6px !important;
    border-radius: 1.2vw;
    border: .15vw solid #fff;
    background: linear-gradient(91.6deg, #F9B935 5.88%, #FFAC00 100.92%);
    z-index: 99;
    font-size: 14px !important; 
}

.monitoring .timeTrackingDoneSample {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding : 6px !important;
    font-size: 10px;
    border-radius: 1.2vw;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    z-index: 99;
}

.monitoring .timeTrackingLate {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding : 6px !important;
    border-radius: 1.2vw;
    border: .15vw solid #fff;
    background: linear-gradient(91.6deg, #FF0033 5.88%, #FF0000 100.92%);
    z-index: 99;
    font-size: 10px;
}
.monitoring .timeTrackingDone .checkDoneImg {
    position: absolute;
    top: -.5vw;
    right: -.5vw;
    width: 1.8vw;
}

.monitoring .timeTrackingLate .checkDoneImg {
    font-size: 12px;
    color: #fff;
}


.monitoring .timeTrackingLate .time,
.monitoring .timeTrackingDelay .time,
.monitoring .timeTrackingDone .time {
    font-size: 14px;
    font-weight: 600;
    /* line-height: 4vh; */
    color: #fff;
}
.monitoring .timeTrackingLate .date,
.monitoring .timeTrackingDoneSample .date {
    font-size: 14px;
}
.monitoring .timeTrackingDelay .date,
.monitoring .timeTrackingDone .date {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    /* white-space: nowrap; */
}

.monitoring .btnSearch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .6vw;
    font-size: 1.2vw;
    font-weight: 400;
    padding: 0 14px;
    height: 5vh;
    background: linear-gradient(90deg, #0073EE 0%, #429DFF 104.42%);
    color: #fff;
    border-radius: .8vw;
    border: none;
}

.tableTracking {
    position: relative;
    z-index: 99;
}

.tableTracking thead th {
    vertical-align: middle !important;
}

.tableTracking thead th:nth-child(even) {
    position: relative;
    z-index: 9;
    background: #fff;
}

.tableTracking thead th:nth-child(odd) {
    position: relative;
    z-index: 9;
    background: #edf6ff;
}

.tableTracking thead .title {
    font-size: 16px;
    background: #edf6ff !important;
    color: #263238;
    white-space: nowrap;
}

.tableTracking tbody .title .height {
    display: flex;
    justify-content: start;
    align-items: center;
    /* min-height: 5vw; */
    /* margin-top: -1vh; */
    /* padding-top: 1vw; */
}

.tableTracking thead .title .height {
    display: flex;
    justify-content: start;
    align-items: center;
    /* height: 5vw; */
}

.tableTracking thead .tracking {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .7vw;
    /* height: 5vw; */
    padding: .8vw .7vw;
}

/* .tableTracking thead .tracking::after {
    content: '';
    position: absolute;
    right: 0;
    width: .15vw;
    height: 4vw;
    border-radius: 1vw;
    background: #4D5F67;
} */

.tableTracking thead .tracking .handling {
    font-weight: 400;
    font-size: 12px;
    /* line-height: 1.4vw; */
    color: #4D5F67;
    white-space: nowrap;
}

.tableTracking thead .tracking .bagian {
    font-weight: 500;
    font-size: 12px;
    color: #007bff;
}

.tableTracking tbody .tracking:nth-child(odd) {
    background: #edf6ff !important;
    text-align: center;
}

.tableTracking tbody .tracking:nth-child(even) {
    background: #fafbfc !important;
    text-align: center;
}

.tableTracking tbody td:nth-child(1),
.tableTracking tbody td:nth-child(2),
.tableTracking tbody td:nth-child(3),
.tableTracking tbody td:nth-child(4),
.tableTracking tbody td:nth-child(5) {
    font-size: 16px;
    font-weight: 700;
    /* padding-top: 1.4vw; */
    color: #263238;
}

.tableTracking tbody tr:nth-of-type(odd) {
    background: #fff !important;
}

.tableTracking tbody tr:nth-of-type(even) {
    background: #edf6ff !important;
}

.tableTracking th {
    border-top: none !important;
}

.tableTracking td {
    /* border-top: 2px solid #9ACAFE !important;
    padding: 2vh; */
    vertical-align: middle !important;
    padding : 6px !important;
}

.tableTracking td.tracking {
    padding : 0 6px !important;
}

/* ============  END MONITORING IN OUT  ============= */

/* ================  STANDARD COST  ==================== */

.standardCost .containerFilter {
    margin-top: 9rem;
}

.standardCost .containerFilter .workImg {
    position: absolute;
    top: -47%;
    right: 1%;
}

.standardCost .btnDetails {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border: none;
    outline: none;
    background: #D8EBFF;
}

.standardCost .btnDetails:hover {
    box-shadow: 0px 9px 12px -8px rgb(216, 235, 255);
    background: #D8EBFF;
}

.standardCost .btnDetails i {
    color: #007bff;
    font-size: 16px;
}

.standardCost .containerKnob {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .standardCost .containerKnob::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 7px solid #E3F1FF;
    z-index: 88;
} */

.standardCost .containerKnob .dial {
    position: relative;
    z-index: 999;
}

.standardCost .legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .4rem;
    margin-top: 1.6rem;
}

.standardCost .legend .simbol {
    width: 16px;
    height: 16px;
    background: #007BFF;
    border-radius: 6px;
}

.standardCost .icn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
}

.standardCost .icn i {
    font-size: 16px;
}

.standardCost .mb-min {
    margin-bottom: -2px;
}

.standardCost .containerScrollX {
    display: flex;
    justify-content: start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
    z-index: 99;
}

.full-8 {
    position: relative;
    width: 100%;
    padding-right: 7.5px;
    padding-left: 7.5px;
    -webkit-flex: 0 0 12.5%;
    -ms-flex: 0 0 12.5%;
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

@media screen and (max-width: 900px) {
    .standardCost .legend {
        margin-bottom: 18px;
    }

    .full-8 {
        -webkit-flex: 0 0 180px;
        -ms-flex: 0 0 180px;
        flex: 0 0 180px;
        max-width: 180px;
    }
}

/* ================  END STANDARD COST  ==================== */


/* ================  CONFIRMATION ORDER  ==================== */

.confirm .aksen1 {
    position: absolute;
    right: 7rem;
    top: -5.5rem;
}

.confirm .aksen2 {
    position: absolute;
    right: -.5rem;
    top: -5.5rem;
    width: 500px;
}

.confirm .aksen3 {
    position: absolute;
    right: 2rem;
    bottom: -2rem;
    width: 280px;
}

@media screen and (max-width: 1000px) {

    .confirm .aksen1,
    .confirm .aksen2 {
        display: none;
    }
}

/* ================  END CONFIRMATION ORDER  ==================== */

.aboluteBadge {
    position: absolute;
    bottom: 40px;
}

.aboluteBadge .containerBadge {
    position: relative;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: .6rem;
}

.changes-data{
    border : 2px solid #F9B935 !important;
    background-color: #FFE5AF !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.dataTables_scrollBody::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #bbb !important;
    border-radius: 8px !important;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #8A8A8A !important;
    border-radius: 8px !important;
}