@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    font-family: "Kanit", sans-serif;
    box-sizing: border-box;
}

body{
    background: var(--neutral-n-20, #F6F6F6);
}

#imPaymentList_filter {
    display: none;
}

.relative {
    position: relative;
}

.im-btn-center {
    width: 100%;
    display: flex;
    justify-content: center;
}

.im-field-data input {
    color: #646B6B;
}

.im-step-form input {
    width: 100%;
}

.im-step-form .block-form {
    width: 528px;
    margin-bottom: 100px;
}

@media (max-width: 767px) {
    .im-step-form .block-form {
        width: 523px;
    }
}

.im-step-form .btn-next {
    margin: 16px 0 17px 0;
}

.im-step-form .form {
    padding: 0;
}

.im-step-form .im-data-space {
    margin-bottom: 32px;
}

.im-step-form .im-step-cancel {
    position: absolute;
    left: -15%;
    transform: translateX(-50%);
    top: 40px;
}

@media (max-width: 1024px) {
    .im-step-form .im-step-cancel {
        left: 61px;
        top: 65px;
    }

    .im-btn-back {
        padding: 16px!important;
    }

    .im-step-form .im-step-cancel .btn-txt-1 {
        display: none; /* Hide the text span on tablets */
    }
}


.tlist-seach {
    display: flex;
    align-items: center;
    gap: 18px;
}

.tlist-seachs {
    display: flex;
    align-items: center;
    margin-left: 130px;
    gap: 18px;
}

.tlist-seach .im-btn-next {
    margin: 0;
    color: #FFF;
}

.tlist-seach input {
    flex: 80
}

.tlist-seach button  {
    flex: 7
}


.tlist-seach input {
    padding: 16px;
    gap: 16px;
    border-radius: 6px;
    background: #FFF;
    border: 0;
    font-family: Kanit;
    color: #646B6B;
}

.tlist-seachs input {
    flex: 80
}

.tlist-seachs button  {
    flex: 7
}


.tlist-seachs input {
    padding: 16px;
    gap: 16px;
    border-radius: 6px;
    background: #FFF;
    border: 0;
    font-family: Kanit;
    color: #646B6B;
}

.im-step-form input:focus,
.tlist-seach input:focus {
    outline: none;
    border: 1px solid #B9BF1C;
    transition: border-color 0.3s ease-in-out;
}

@media (max-width: 524px) {
    .tlist-seach .im-btn-next span {
        display: none;
    }

    .tlist-seach .im-btn-next {
        display: inline-block;
    }
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background-image: url("storage/images/calendar-2.svg");
  width: 24px;
  height: 24px;
  cursor: pointer;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background-image: url("storage/images/clock.svg");
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.im-clear {
    content-visibility: hidden; /* Hide clear button */
}

.im-field-data .im-clear,
.im-field-data .im-time,
.im-field-data .im-calendar {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    cursor: pointer;
}

.im-filter-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #CBCDD1;
    margin-top: 8px;
}

.im-filter-item {
    padding: 8px 15px;
    cursor: pointer;
    color: #646B6B;
}

.im-filter-item:hover {
    background-color: #F6F6F6;
}

.im-separator {
    width: 100%;
    border: 0.5px solid #B6B9BA
}

.im-step-form .im-separator {
    margin: 32px 0;
}

.im-btn-back {
    display: flex;
    justify-content: baseline;
    align-items: center;
    color: #354F52;
    padding: 8px 16px 8px 16px;
    border-radius: 8px;
    background: #EBEDEE;
    border: 1px solid #354F52;
    gap: 8px;
    cursor: pointer;
}

.im-btn-back .btn-txt-1 {
    color: #354F52;
}

.im-btn-prev {
    width: 100%;
    height: 56px;
    padding: 16px 32px 16px 32px;
    border-radius: 8px;
    gap: 8px;
    background: #F8F9E8;
    border: 0;
    cursor: pointer;
    margin:  16px 0;

}

.im-btn-prev:hover {
    background: #B9BF1C;

}

.im-btn-prev:hover  .btn-txt {
    color: #FFF;
}

.im-btn-prev .btn-txt {
    color: #354F52;
}

.im-btn-next .btn-txt {
    color: #FFF;
}


.im-btn-next {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    height: 56px;
    padding: 16px 32px 16px 32px;
    border-radius: 8px;
    gap: 8px;
    background: #B9BF1C;
    border: 0;
    cursor: pointer;
    margin:  16px 0;
}

.im-btn-next i {
    color:  #FFF;
}

.im-btn-next:hover {
    background: #354F52;
}

.im-info {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 8px;
    background: #F8F9E8;
    border-radius: 8px;
}

.im-grey {
    color: #B9BF1C;
    font-weight: 500;
}

.no-data {
    margin-top: 16px;
}

.im-text-25 {
    color: #354F52;
    font-size: 25px;
    font-weight: 500;
    line-height: 30px;
}

.im-text-20 {
    color: #354F52;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.im-text-16 {
    margin-bottom: 16px;
    color: #354F52;
    font-size: 16px;
}

.im-text-13 {
    color: #4A5253;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
}

.im-text-10 {
    color: #646B6B;
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
}

.sm-btn-next .im-text-10 {
    color: #219653;
}

.im-column {
    gap: 8px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.im-column .inner {
    /* flex: 1; */
    padding: 16px;
    box-sizing: border-box;
}

.im-column .im-text-16 {
    color: #646B6B;
    margin-bottom: 0;
}

.im-icon {
    width: 32px;
    cursor: pointer;
}

.im-column .im-icon {
    position: absolute;
    right: 16px;
    top: 21px;
}

.im-icon-block {
    display: flex;
    align-items: center;
}

.trip-item {
    display: flex;
    align-items: center;
    min-width: 225px;
    height: 74px;
    border-radius: 8px;
    background: #F5F5F6;
    padding: 16px;
    cursor: pointer;
}

.trip-item:focus {
    outline: none; /* This removes the default focus outline */
    border: 1px solid #B9BF1C;
    transition: border-color 0.3s ease-in-out;
}

/* Styles for .im-icon when .trip-item is focused */
.trip-item:focus-within .im-icon {
    color: #fff;
    background: var(--green-g-300, #B9BF1C);
}

.btn-col .inner {
    padding:    0;
}

.im-grande {
    flex: 1.8!important;
}

.im-petite {
    flex: 1;
}

.im-gap-16 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.w-100 {
    width: 100%;
}

.vehicle-chooser {
    background: #F5F5F6;
    border-radius: 8px;
    margin-bottom: 35px;
}

.im-disp-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.im-disp-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vcolorHex {
    width: 19px;
    height: 19px;
    border: 1px;
    border-radius: 50%;

}

.sm-btn-next {
    display: flex;
    gap: 8px;
    padding: 8px 16px 8px 16px;
    color: #FFF;
    background: #B9BF1C;
    outline: none;
    border: 0;
    border-radius: 8px;
    align-items: baseline;
    cursor: pointer;

}

.sm-btn-next:hover {
    background: #354F52;
}

.sm-btn-next .btn-txt-1 {
    color: #FFF;
}

.vehicle-chooser .vimg {
    max-width: 178px;
}

.im-grey {
    color: #B6B9BA;
}

.im-dark-green {
    color: #354F52;
}

.im-green {
    color: #B9BF1C;
}

.vimage {
    width: 168px;
    height: 126px;
    border: 1px solid #B9BF1C;
    border-radius: 8px;
}

.im-f400 {
    font-weight: 400;
}

.im-f500 {
    font-weight: 500;
}

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

.switcher-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    padding: 8px;
    border-radius: 8px;
    gap: 8px;
    background: #EBEDEE;
    cursor: pointer;
}

.im-step-form .switcher {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.im-step-form .switcher input {
    text-align: center;
    font-size: 60px;
    width: 40%;
    height: 100px;
    color: #B9BF1C;
     /* Reset all default styles */
     border: none;
     background: none;
     outline: none;
     padding: 0;
     margin: 0;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
}

.im-step-form .switcher i {
    font-size: 35px;
}

.im-trip-confirm-item {
    min-width: 225px;
    margin-bottom: 16px;
}

.im-trip-validation .inner {
    padding: 0;
}

.confirm-block {
    border-bottom: 1px solid #B6B9BA;
    border-radius: 6px;
}

.confirm-block .input {
    padding: 0 0 8px 8px;
}

.confirm-block .im-disp-col {
    gap: 2px;
}

.im-restart-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: -104px;
}

.final-msg {
    padding: 0 16px;
    text-align: center;
    line-height: 24px;
    color: #646B6B;
}

.im-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*
    TRIP LIST PAGE START

*/
.im-trip-choice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    padding: 16px;
    cursor: pointer;
}

.im-trip-list,
.im-payment-list {
    margin-bottom: 88px;
}

.im-trip-list .im-text-16,
.im-payment-list .im-text-16 {
    margin: 0;
}

.im-list-head .im-disp-row {
    gap: 0;
}

.im-trip-choice.chooser-current:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #B9BF1C, #B9BF1C 50%, #B9BF1C 50%, #B9BF1C);
    border-radius: 50px;
}

.im-trip-item-chooser {
    background-color: #FFF;
}

.chooser-current .im-text-16 {
    color: #B9BF1C;
}

.im-trip-item-chooser {
    background-color: #FFF;
}

.im-list-body {
    background: #FFF;
    border-radius: 10px;
    overflow: auto;
}

.im-lists-body {
    background: #FFF;
    border-radius: 10px;
    overflow: auto;
    margin-left: 130px;
}

.trip-table-container {
    width: 100%;
}

.trip-table-container thead {
    background: #EBEDEE;
}

.im-list-body tbody tr {
    height: 72px;
}

.im-lists-body tbody tr {
    height: 72px;
}

.im-list-body thead th {
    font-size: 13px;
    font-weight: 400!important;
    line-height: 19.5px;
    color: #96A0A3;
    padding: 16px;
    text-align: left;
}

.im-lists-body thead th {
    font-size: 13px;
    font-weight: 400!important;
    line-height: 19.5px;
    color: #96A0A3;
    padding: 16px;
    text-align: left;
}

.im-list-body tbody tr td {
    padding-left: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: top;
}

.im-lists-body tbody tr td {
    padding-left: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: top;
}

.im-list-body tbody tr:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #EBEDEE, #EBEDEE 50%, #EBEDEE 50%, #EBEDEE);
}

.im-lists-body tbody tr:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to bottom, #EBEDEE, #EBEDEE 50%, #EBEDEE 50%, #EBEDEE);
}

.im-list-body tbody {
    margin-bottom: 20px;
}

.im-lists-body tbody {
    margin-bottom: 20px;
}

.imgs-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.trip-img-wrapper {
    display: flex;
    flex-direction: row;
}

.trip-img-wrapper img {
    max-width: 38px;
    object-fit: contain;
}

.trip-img-wrapper .img-container:nth-child(2) {
    margin-left: -11%;
}

.trip-img-wrapper .img-container:nth-child(3) {
margin-left: -10%;
}

.trip-img-wrapper .img-container:nth-child(4) {
margin-left: -11%;
}

.pverified img {
    box-shadow: 0 0 0 2px var(--dark-green-d-50, #EBEDEE), 0 0 0 5px var(--green-g-300, #B9BF1C);
    border-radius: 50px;
}

.pverified::after {
    content: url(../img/verifywhite-big.svg);
    position: absolute;
    bottom: -7px;
    right: -7px;
}

.trip-img-wrapper .pverified::after {
    content: url(../img/verify-white.svg);
}

.tripHexColor {
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

.im-center-info {
    align-items: center;
}

.footer-copyright {
    text-align: center;
    margin-bottom: 8px;
}

.trip-detail .sm-btn-next i {
    color: #292D32;
}

.trip-detail .sm-btn-next:hover .im-text-13,
.trip-detail .sm-btn-next:hover i {
    color: #FFF;
}

.im-list-body .tlist-id,
.im-list-body .tlist-price {
    min-width: 61px;
}

.im-lists-body .tlist-id,
.im-lists-body .tlist-price {
    min-width: 61px;
}

.im-list-body .tlist-driver {
    min-width: 158px;
}

.im-lists-body .tlist-driver {
    min-width: 158px;
}

.im-list-body .tlist-passenger,
.im-list-body .tlist-departure-info,
.im-list-body .tlist-arrival-info {
    min-width: 150px;
}

.im-lists-body .tlist-passenger,
.im-lists-body .tlist-departure-info,
.im-lists-body .tlist-arrival-info {
    min-width: 150px;
}

.im-list-body .tlist-departure-info {
    min-width: 150px;
}

.im-lists-body .tlist-departure-info {
    min-width: 150px;
}

.im-list-body .tlist-date {
    min-width: 87px;
}

.im-lists-body .tlist-date {
    min-width: 87px;
}

.im-list-body .tlist-detail {
    min-width: 90;
}

.im-lists-body .tlist-detail {
    min-width: 90;
}

.tlist-depature .im-disp-row,
.tlist-arrival .im-disp-row {
    gap: 4px;
}

.tlist-search-area {
    margin: 23px 0;
}

.im-list-body tbody tr:not(:last-child) {
    position: relative;
}

.im-lists-body tbody tr:not(:last-child) {
    position: relative;
}

.im-no-trip {
    margin: 54px 0;
}

.im-no-trip-m {
    gap: 11px;
    margin-top: 51px;
    margin-bottom: 10px;
}

.im-no-trip .im-btn-next {
    width: auto;
}

.im-no-trip .im-text-16 {
    color: #646B6B;
}

.review-block-1{
    display: flex;
    gap: 16px;
}

.review-subblock-1{
    display: flex;
    flex-direction: column;
}

.back-button{
    margin: 30px 0;
    margin-left: 130px;
}

@keyframes rotate-heartbeat {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(45deg);
    }
}

@keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
}

@keyframes bounce-scale {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

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

#svg-object {
    animation: float 2s ease-in-out infinite;
}

.im-no-trip-cta {
    gap: 16px;
}

@media screen and (max-width: 524px) {
    .im-no-trip-content {
        justify-content: left;
    }

    #svg-object  {
        width: 200px
    }

    .im-no-trip-content .font-39 {
        font-size: 29px;
    }

    .im-no-trip-cta {
        flex-direction: column;
        gap: 0;
    }
}

/*


    TRIP LIST PAGE END

*/





/*
    NOTIFICATION PAGE START

*/
.im-notification {
    margin: auto;
    width: 485px;
    height: auto;
    border-radius: 16px;
    box-shadow: 0px 0px 30px 0px #38476D17;
    background: #FFFFFF;
    text-align: center;
}

.im-notification .font-20 {
    line-height: 24px;
}

.im-note-heading {
    padding: 38px 32px;
}

.im-note-body.im-disp-col {
    gap: 0;
}

.btn-bg-grey, .im-note-request {
    background: #F8F9E8;
}

.im-note-accept, .im-note-seen {
    background: #FFF;
}

.im-note-seen::before,
.im-no-prev::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* White overlay with opacity */
    z-index: 1; /* Place the overlay below other content */
}

.im-note-seen .notification-btns {
    z-index: 2;
}

.im-note-body {
    margin: 8px 0;
}

.im-note-heading .im-column {
    justify-content: space-between;
    align-items: center;
}

.im-note-heading .im-disp-row {
    justify-content: flex-end;
}

.im-note-body .im-column {
    gap: 16px;
}

.font-20 {
    font-family: "Kanit";
    font-size: 20px;
    color: #464E5F;
    line-height: 46.8px;
    font-weight: 500;
}

.font-39 {
    font-family: "Kanit";
    font-size: 39px;
    color: #354F52;
    line-height: 46.8px;
    font-weight: 500;
}

.font-49 {
    font-family: "Kanit";
    font-size: 49px;
    color: #354F52;
    line-height: 58.8px;
    font-weight: 500;
}

.btn-bg-grey:hover .btn-txt-1,
.btn-bg-grey:hover .im-text-13 {
    color: #FFF;
}

.btn-bg-grey .btn-txt-1 {
    color: #354F52;
}

.btn-bg-pink {
    background: #EB5757;
}

.btn-bg-red {
    background: #FAD1D1;
}

.btn-bg-red .btn-txt-1,
.btn-bg-red .im-text-10,
.btn-bg-red .im-text-13 {
    color: #EB5757;
}

.btn-bg-violet {
    background: #E6D4F7;
}

.btn-bg-violet .btn-txt-1,
.btn-bg-violet .im-text-10,
.btn-bg-violet .im-text-13 {
    color: #9B51E0;
}

.btn-bg-pink .btn-txt-1 {
    color: #FFF;
}

.btn-bg-transparent {
    background: transparent;
}

.btn-bg-green {
    background: #EAFAF1;
    cursor: auto;
}

.btn-bg-green .btn-txt-1,
.btn-bg-green .im-text-10,
.btn-bg-green .im-text-13 {
    color: #27AE60;
}

.btn-bg-blue {
    background: #E9F5FB;
    cursor: auto;
}

.btn-bg-blue .btn-txt-1,
.btn-bg-blue .im-text-10,
.btn-bg-blue .im-text-13 {
    color: #2D9CDB;
}

.btn-bg-transparent .btn-txt-1 {
    color: #EB5757;
}

.im-notification-item {
    padding: 16px 8px;
}

.im-notification .inner {
    padding: 0;
}

.notification-btns {
    display: flex;
    gap: 26px;
}

.notification-img img, .trip-img img {
    max-width: 42px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 500px;
}

.ncolorHex {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #B9BF1C;
    position: absolute;
    right: 5px;
    top: 25px;
}

/*

    TRIP DETAIL PAGE START

*/
.detail-search-btn .im-btn-next {
    width: auto;
}

.trip-detail-info {
    margin-bottom: 32px;
}

.trip-detail-info .trip-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trips-wrapper .im-text-13 {
    color: #646B6B;
}

.im-trip-detail h1 {
    margin: 0;
}

.trips-wrapper .stroke-dash {
    margin-top: 9px;
}

@media screen and (max-width: 524px) {
    .trips-wrapper.tdetail .stroke-dash {
        display: inline-block;
        margin-bottom: 2px;
    }

    .tdetail .trip-info {
        flex-direction: column;
    }

}

.trips-wrapper.tdetail .single-item {
    background: #FFF!important;
}

.trip-item-detail .im-text-16 {
    margin-bottom: 8px;
}

.trips-wrapper.tdetail .trips-grid .listing .search-results {
    gap: 32px;
}

.trip-item-detail .im-column .inner {
    padding: 0;
    flex: initial;
}

.trip-item-detail .im-column .vimage {
    width: 112px;
    height: 84px;
}

.trip-item-detail .im-column .inner.im-disp-col {
    gap: 1px;
}
.trip-item-detail .im-column .driver-meta {
    padding: 8px;
}

.passenger-item:hover {
    min-width: 225px;
    border-radius: 8px;
    background: #F5F5F6;
    cursor: pointer;
}

.passenger-item .im-text-20 {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1024px) {
    .trips-wrapper.tdetail .trips-grid .sidebar.row-2 {
        margin-top: -56px;
    }
}
/*

    TRIP DETAIL PAGE END

*/


/*

    PAYMENT DETAIL PAGE START

*/

.im-payment-blocks {
    margin-top: 32px;
}

.im-payment-section {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.im-payment-blocks .payment-block {
    width: 657px;
    padding: 32px;
    border-radius: 16px;
    background: #FFF;
    border: 1px solid var(--dark-green-d-300, #354F52);
}

@media (max-width: 767px) {
    .im-payment-blocks .payment-block {
        width: 390px;
    }
}

@media (max-width: 376px) {
    .im-payment-blocks .payment-block {
        width: 340px;
    }
}

@media (max-width: 321px) {
    .im-payment-blocks .payment-block {
        width: 290px;
    }
}

.im-data-space {
    margin-bottom: 32px;
}

.im-payment-blocks .im-payment-section {
    margin-bottom: 88px;
}

.im-payment-blocks .trips-wrapper {
    margin: 0;
}

.im-payment-blocks .trips-wrapper .trips-grid {
    all: initial;
}

.im-payment-invoice .payment-block {
    padding: 0;
}

.im-payment-blocks .heading {
    padding: 16px;
}

.im-payment-blocks .trips-wrapper .trips-grid .listing .search-results .single-item {
    border: 0;
    border-radius: 16px;
}

.im-payment-blocks .trips-wrapper .trips-grid .listing .search-results .single-item .header,
.im-payment-blocks .trips-wrapper .trips-grid .listing .search-results .single-item .body {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.im-payment-blocks .trips-wrapper .trips-grid .listing .search-result {
    all: initial;
}

.im-dataTablePagination,
.im-dataTableEntries {
    font-size: 11px;
    margin: 18.5px 16px
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 0!important;
    background: none!important;

}

.idtripno {
    text-decoration: underline;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #B9BF1C!important;
    border-radius: 5px;
    min-width: 1.5em;
    color: #FFF!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-radius: 5px;
    color: #B9BF1C!important;
    background: #354F52!important;
}
/*

    PAYMENT DETAIL PAGE END

*/


/*

    PAYMENT POPUP START

*/

.im-popUP {
    background: #FFF;
    width: 528px;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #354F52
}

@media (max-width: 767px) {
    .im-popUP {
        width: 428px;
    }
}

.popUp-head .head {
    gap: 17px;
}

.im-paymentItems {
    gap: 17px;
}

.popupPAY input:focus-visible {
    outline: none;
}

.im-paymentItem {
    width: 100%;
    padding: 20px 10px;
    border: 1px solid #B9BF1C;
    border-radius: 12px;
    background: linear-gradient(0deg, #F3F3F3, #F3F3F3);
    cursor: pointer;
    display: flex;
    gap: 13px;
    justify-content: space-between;
}

.im-paymentItem .itemDesc {
    gap: 15px;
}

.im-paymentItem .itemDesc span {
    color: #333;
}

.im-paymentAmount {
    font-size: 31px;
    color: #354F52;
}

.payment-radio {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    background-color: white;
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    cursor: pointer;
}

.payment-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: relative;
    width: 18px;
    height: 18px;
    background-color: #354F52;
    border-radius: 50%;
    display: none;
}

.payment-input:checked ~ .checkmark {
    display: block;
}

.im-paymentItem.focused {
    background: #B9BF1C;
}

.im-paymentItem.focused > .itemDesc span  {
    color: #FFF; /* Change the background color to your desired color */
}

.im-paymentItem.focused .checkmark {
    background-color: #FFF;
    width: 8px;
    height: 8px;
}

.im-paymentItem.focused .payment-radio {
    background-color: #354F52;
    border: 1px solid #354F52;
}

.paymentCTA .im-btn-prev,
.paymentCTA .im-btn-next {
    margin: 0;
}

.im-paymentItem.focused.checked {
    background: #F8F9E8;
}

.im-paymentItem.focused.checked > .itemDesc span  {
    color: #141E1F; /* Change the background color to your desired color */
}

.im-popUP .close-button {
    color: #EB5757;
    font-size: 19px;
    transition: transform 0.2s ease;
}

.im-popUP .close-button:hover i {
    color: #EB5757;
    animation: spin 0.5s linear infinite;
}

.im-popUP .close-popUP {
    position: absolute;
    top: 2%;
    right: 5%;
}

.ST2-details .im-info {
    margin: 9px 0;
    gap: 8px;
}

.ST2-details label {
    color: #354F52;
    line-height: 24px;
}

.ST2-details input {
    margin-top: 6px;
}

.paymentCoupon .couponUse {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.couponA {
    transition: opacity 0.5s ease-in-out;
    opacity: 0.8;
}

.couponA:hover {
    opacity: 1;
}

.couponA .sm-btn-next {
    background: #354F52;
}

.popupPAY .paymentCoupon {
    margin-top: 14.5px;
    gap: 8px;
}

.imPaymentST2 .paymentCTA {
    margin-top: 15px;
}

/* Styles for the popup and overlay */
.im-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    z-index: 999; /* Ensure the overlay is above other elements */
}

.im-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    z-index: 999; /* Ensure the popup is above other elements */
}

.popupPAY .im-column .inner {
    padding: 0;
}

.invalid-email {
    border: 1px solid #EB5757!important;
}

/*

    PAYMENT POPUP START

*/

@media (max-width: 1410px) {
    .im-data-space {
        margin-bottom: 32px;
        /* margin-left: 280px; */
    }

    .tlist-seach {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .tlist-seachs {
        display: flex;
        align-items: center;
        margin-left: 280px;
        gap: 18px;
    }

    .im-list-body {
        background: #FFF;
        border-radius: 10px;
        overflow: auto;
    }

    .im-lists-body {
        background: #FFF;
        border-radius: 10px;
        overflow: auto;
        margin-left: 280px;
    }

    .back-button{
        margin: 30px 0;
        margin-left: 280px;
    }
}

@media (max-width: 1044px) {
    .im-data-space {
        margin-bottom: 32px;
        margin-left: 0px;
    }

    .tlist-seach {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .tlist-seachs {
        display: flex;
        align-items: center;
        margin-left: 0px;
        gap: 18px;
    }

    .im-list-body {
        background: #FFF;
        border-radius: 10px;
        overflow: auto;
    }

    .im-lists-body {
        background: #FFF;
        border-radius: 10px;
        overflow: auto;
        margin-left: 0px;
    }

    .back-button{
        margin: 30px 0;
        margin-left: 0px;
    }
}