/* Create wrap */
.create-wrap {
    background-color: $body-bg;
    border-radius: toRem(10);
    padding: toRem(83) toRem(10);
    display: flex;
    flex-direction: column;
    align-items: center;
    @media screen and (max-width: 575px) {
        padding: toRem(20) toRem(10);
    }
    h4 {
        @media screen and (max-width: 575px) {
            font-size: toRem(20) !important;
            line-height: toRem(25) !important;
        }
    }
}
/* Dropdown */
.notifyDropdown {
    .dropdown {
        &-toggle {
            .notify_no {
                position: absolute;
                top: calc(-1 * toRem(3));
                right: calc(-1 * toRem(3));
                width: toRem(17);
                height: toRem(17);
                border-radius: 50%;
                background-color: $red;
                @include fontFamily(13, $fw_medium, 16, $white);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            &::after {
                display: none;
            }
        }
        &-menu {
            min-width: toRem(345);
            max-width: toRem(345);
            padding: toRem(20) 0;
            background-color: $white;
            border: toRem(0.5) solid $stroke;
            border-radius: toRem(15);
            transform: translate3d(0, toRem(60), 0);
            @media screen and (max-width: 575px) {
                min-width: toRem(240);
                max-width: toRem(240);
            }
            // @media screen and (max-width: 434px) {
            //   transform: translate3d(-77px, 43px, 0px) !important;
            //   transform: translate3d(calc(-1 * toRem(166)), toRem(60), 0);
            // }
            &.show {
                top: 100% !important;
            }
            // > * {
            //     padding-left: toRem(15);
            //     padding-right: toRem(15);
            // }
        }
    }
}
.dropdown-after-hide {
    &::after {
        display: none !important;
    }
}
.dropdownItem {
    &-one {
        // min-width: toRem(125) !important;
        padding: toRem(14) !important;
        // background-color: $white !important;
        border: toRem(1) solid $stroke !important;
        border-radius: toRem(6) !important;
        box-shadow: 0px 11px 30px 10px #a3b1cc29;
        li {
            padding-bottom: toRem(8);
            &:last-child {
                padding-bottom: 0;
            }
        }
        a {
            // padding: toRem(7) toRem(9);
            border-radius: toRem(7);
            &:hover,
            &.active {
                // background-color: $primary-color;
                p {
                    color: $main-color !important;
                }
                svg {
                    path,
                    circle {
                        stroke: $main-color;
                    }
                }
            }
        }
    }
    &-two {
        min-width: toRem(140) !important;
        padding: toRem(16) toRem(14) !important;
        border: toRem(1) solid $stroke !important;
        border-radius: toRem(6) !important;
        box-shadow: 0px 11px 30px 10px #a3b1cc29;
        li {
            padding-bottom: toRem(10);
            &:last-child {
                padding-bottom: 0;
            }
        }
        a,
        button {
            > div {
                flex: 0 0 auto;
                max-width: toRem(15);
                width: 100%;
            }
            &:hover,
            &.active {
                p {
                    color: $main-color !important;
                }
                svg {
                    path {
                        fill: $main-color;
                    }
                }
            }
        }
    }
    &-three {
        min-width: toRem(213) !important;
        padding: toRem(16) !important;
        border: toRem(1) solid $stroke !important;
        border-radius: toRem(6) !important;
        box-shadow: 0px 11px 30px 10px #a3b1cc29;
        li {
            padding-bottom: toRem(10);
            margin-bottom: toRem(10);
            border-bottom: toRem(1) solid $stroke;
            &:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }
        }
        a {
            > div {
                flex: 0 0 auto;
                max-width: toRem(15);
                width: 100%;
            }
            &:hover,
            &.active {
                p {
                    color: $main-color !important;
                }
                svg {
                    path {
                        fill: $main-color;
                    }
                }
            }
        }
    }
    &-four {
        min-width: toRem(140) !important;
        padding: toRem(12) toRem(14) !important;
        border: toRem(1) solid $stroke !important;
        border-radius: toRem(6) !important;
        box-shadow: 0px 11px 30px 10px #a3b1cc29;
        li {
            padding-bottom: toRem(10);
            &:last-child {
                padding-bottom: 0;
            }
        }
        button {
            border: none;
            padding: 0;
            background: transparent;
            width: 100%;
            text-align: left;
            @include fontFamily(14, $fw_regular, 17, $para-text);
            &:hover,
            &.active {
                color: $main-color !important;
            }
        }
    }
}
/* Badges */
.zBadge {
    display: inline-block;
    padding: toRem(2) toRem(12);
    border: none;
    border-radius: toRem(5);
    @include fontFamily(12, $fw_medium, 24, $white);
    background-color: $main-color;
    white-space: nowrap;
    &-pending,
    &-reviewer,
    &-closed,
    &-unpaid {
        color: $yellow;
        background-color: $yellow-10;
    }
    &-inProgress,
    &-open,
    &-projectManager,
    &-working {
        color: $purple;
        background-color: $purple-10;
    }
    &-done,
    &-onHold,
    &-superAdmin,
    &-active,
    &-paid,
    &-complete {
        color: $green;
        background-color: $green-10;
    }
    &-toDo,
    &-cancel {
        color: $red;
        background-color: $red-10;
    }
    &-admin {
        color: $main-color;
        background-color: $main-color-10;
    }
    &-inactive,
    &-deactivate {
        color: $para-text;
        background-color: $stroke;
    }
    &-expiry {
        color: $badge-expiry;
        background-color: $badge-expiry-bg;
    }
    &-supported {
        color: $badge-supported;
        background-color: $badge-supported-bg;
    }
}
/* Lists */
.notify-list {
    max-height: toRem(288);
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    &::-webkit-scrollbar {
        width: toRem(6);
    }
    &::-webkit-scrollbar-track {
        background: $scroll-track;
        border-radius: toRem(50);
    }
    &::-webkit-scrollbar-thumb {
        background: $scroll-thumb;
        border-radius: toRem(50);
    }
    // &:has(:nth-child(4)) {
    //   overflow-y: scroll;
    //   &::-webkit-scrollbar {
    //     width: toRem(6);
    //   }
    //   &::-webkit-scrollbar-track {
    //     background: $scroll-track;
    //     border-radius: toRem(50);
    //   }
    //   &::-webkit-scrollbar-thumb {
    //     background: $scroll-thumb;
    //     border-radius: toRem(50);
    //   }
    // }
    li {
        padding: toRem(20) 0;
        border-bottom: toRem(1) solid $stroke;
        &:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }
    }
}
/* Priority */
.zPriority {
    position: relative;
    display: inline-block;
    padding-left: toRem(11);
    @include fontFamily(12, $fw_medium, 15, $para-text);
    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: toRem(6);
        height: toRem(6);
        border-radius: 50%;
        background-color: $yellow;
    }
    &-high {
        &::before {
            background-color: $green;
        }
    }
    &-low {
        &::before {
            background-color: $purple;
        }
    }
    &-service {
        &::before {
            background-color: $para-text;
        }
    }
}
/* Lists */
.zList {
    &-pb {
        &-4 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(4);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-11 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(11);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-12 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(12);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-15 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(15);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-16 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(16);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-17 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(17);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-18 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(18);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-19 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(19);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-20 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(20);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-21 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(21);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
        &-27 {
            list-style: none;
            padding: 0;
            margin: 0;
            li {
                padding-bottom: toRem(27);
                &:last-child {
                    padding-bottom: 0;
                }
            }
        }
    }
    &-one {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            position: relative;
            @include fontFamily(14, $fw_regular, 24, $para-text);
            padding-left: toRem(10);
            &::before {
                content: "";
                position: absolute;
                top: toRem(10);
                left: 0;
                width: toRem(4);
                height: toRem(4);
                border-radius: 50%;
                background-color: $para-text;
            }
        }
    }
    &-two {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            padding: toRem(20) 0;
            border-bottom: toRem(1) solid $stroke;
            &:last-child {
                padding-bottom: 0;
                border-bottom: none;
            }
        }
    }
    &-three {
        @media screen and (max-width: 1199px) {
            display: flex;
            align-items: center;
            gap: toRem(10) toRem(20);
            flex-wrap: wrap;
        }
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            padding: toRem(25) 0;
            border-bottom: toRem(1) solid $stroke;
            @media screen and (max-width: 1199px) {
                position: relative;
                padding: 0;
                border-bottom: none;
            }
            &::before {
                content: "";
                position: absolute;
                top: 50%;
                right: calc(-1 * toRem(10));
                transform: translateY(-50%);
                width: toRem(1);
                height: toRem(22);
                background-color: $stroke;
                display: none;
                @media screen and (max-width: 1199px) and (min-width: 576px) {
                    display: block;
                }
            }
            &:first-child {
                padding-top: 0;
            }
            &:last-child {
                padding-bottom: 0;
                border-bottom: none;
                &::before {
                    display: none;
                }
            }
        }
    }
    &-four {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            a {
                border-bottom: toRem(2) solid transparent;
                &.active,
                &:hover {
                    border-bottom: toRem(2) solid $main-color;
                    svg {
                        circle {
                            stroke: $main-color;
                        }
                        path {
                            fill: $main-color;
                        }
                    }
                    span {
                        color: $main-color !important;
                    }
                }
            }
        }
    }
}
/* Search */
.search {
    &-one {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        input {
            width: 100%;
            height: toRem(42);
            border: toRem(1) solid $stroke;
            border-radius: toRem(8);
            background-color: $white;
            @include fontFamily(14, $fw_medium, 17, $title-black);
            padding: toRem(14) toRem(18) toRem(13) toRem(47);
            &:focus {
                @include fontFamily(14, $fw_medium, 17, $title-black);
                border-color: $main-color;
            }
            &::placeholder {
                @include fontFamily(14, $fw_medium, 17, $para-text);
            }
        }
        .icon {
            position: absolute;
            top: 50%;
            left: toRem(18);
            transform: translateY(-50%);
            display: flex;
            max-width: toRem(18);
            border: none;
            padding: 0;
            background-color: transparent;
        }
    }
    // &-two {
    //   position: relative;
    //   -webkit-box-flex: 1;
    //   -ms-flex: 1 1 auto;
    //   flex: 1 1 auto;
    //   max-width: toRem(357);
    //   display: -webkit-box;
    //   display: -ms-flexbox;
    //   display: flex;
    //   input {
    //     width: 100%;
    //     height: toRem(45);
    //     border: toRem(1) solid $black-5;
    //     border-radius: toRem(110);
    //     background-color: $colorThree;
    //     @include fontFamily(14, $fw_regular, 17, $text-black);
    //     padding: toRem(14) toRem(14) toRem(14) toRem(45);
    //     &:focus {
    //       @include fontFamily(14, $fw_regular, 17, $text-black);
    //       border-color: var(--primary-color);
    //     }
    //     &::-webkit-input-placeholder {
    //       @include fontFamily(14, $fw_regular, 17, $colorOne);
    //     }
    //     &::-moz-placeholder {
    //       @include fontFamily(14, $fw_regular, 17, $colorOne);
    //     }
    //     &:-ms-input-placeholder {
    //       @include fontFamily(14, $fw_regular, 17, $colorOne);
    //     }
    //     &::-ms-input-placeholder {
    //       @include fontFamily(14, $fw_regular, 17, $colorOne);
    //     }
    //     &::placeholder {
    //       @include fontFamily(14, $fw_regular, 17, $colorOne);
    //     }
    //   }
    //   .icon {
    //     position: absolute;
    //     top: 50%;
    //     left: toRem(18);
    //     -webkit-transform: translateY(-50%);
    //     -ms-transform: translateY(-50%);
    //     transform: translateY(-50%);
    //     display: -webkit-box;
    //     display: -ms-flexbox;
    //     display: flex;
    //     max-width: toRem(18);
    //     border: none;
    //     padding: 0;
    //     background-color: transparent;
    //   }
    //   .sDelete {
    //     position: absolute;
    //     top: 50%;
    //     right: toRem(18);
    //     -webkit-transform: translateY(-50%);
    //     -ms-transform: translateY(-50%);
    //     transform: translateY(-50%);
    //     border: none;
    //     padding: 0;
    //     background-color: transparent;
    //     display: -webkit-box;
    //     display: -ms-flexbox;
    //     display: flex;
    //     max-width: toRem(13);
    //   }
    // }
}

/* Ticket */
.ticket-upload-img-wrap {
    display: flex;
    column-gap: toRem(10);
    flex-wrap: wrap;
    > div {
        margin-top: toRem(10);
        width: toRem(60);
        height: toRem(60);
        border: toRem(1) solid $stroke;
        border-radius: toRem(6);
        overflow: hidden;
        > div {
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            position: relative;
            width: 100%;
            height: 100%;
        }
    }
}

// CTA
.cta {
    &-section {
        position: relative;
    }
    &-content {
        position: relative;
        border-radius: toRem(20);
        padding: toRem(80) toRem(20);
        overflow: hidden;
        background-color: $title-black;
        @media screen and (max-width: 991px) {
            padding: toRem(60) toRem(20);
        }
        .left {
            max-width: toRem(750);
            margin: 0 auto;
            padding: 0 !important;
            text-align: center;
            .section {
                &-title {
                    @include fontFamilyAlt(46, $fw_medium, 1.2, $white);
                    @media screen and (max-width: 767px) {
                        font-size: toRem(40);
                    }
                    @media screen and (max-width: 575px) {
                        font-size: toRem(32);
                    }
                }
                &-info {
                    @include fontFamily(16, $fw_medium, 26, $white);
                    padding-bottom: toRem(40);
                }
            }
            .link {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                padding: toRem(12) toRem(30);
                border-radius: toRem(5);
                background-color: $main-color;
                @include fontFamily(18, $fw_bold, 28, $white);
            }
        }
        &-three {
            border-radius: toRem(20);
            padding: toRem(80) toRem(20);
            @media screen and (max-width: 991px) {
                padding: toRem(60) toRem(20);
            }
            .left {
                max-width: toRem(496);
                margin: 0 auto;
                padding: 0 !important;
                text-align: center;
                .section {
                    &-subtitle {
                        border-color: $white;
                        color: $white;
                        .bar {
                            background-color: $white;
                        }
                    }
                    &-title,
                    &-info {
                        color: $white;
                    }
                }
            }
        }
    }
}

.tableList-items {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    padding-left: 16px;
    li {
        position: relative;
        margin-bottom: 10px;
        &::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -16px;
            width: 6px;
            height: 6px;
            background-color: #596680;
            border-radius: 50%;
            transform: translateY(-50%);
        }
    }
}

.ticket-upload-img-close {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: red;
    border-radius: 50%;
    top: 5px;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
        content: "✖";
        font-size: 14px;
        color: var($white);
    }
}
