.img-box > input {
    display: none;
}

.template-border {
    border: 3px solid #0b9ef7 !important;
    border-radius: 10px !important;
}

.btn-check {
    &:focus + .btn {
        outline: unset !important;
        box-shadow: unset !important;
    }
}
.btn {
    &:focus {
        outline: unset !important;
        box-shadow: unset !important;
    }
}

.screen.image {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;

    img {
        width: 100%;
        transition-duration: 0.5s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: top;
        height: 300px;
        transition: 3s all ease;
    }

    &:hover {
        img {
            object-position: left;
        }
    }
}

.screen.vcard_11 {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;

    img {
        width: 100%;
        transition-duration: 0.5s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: left;
        height: 300px;
        transition: 5s all ease;
    }

    &:hover {
        img {
            object-position: right;
        }
    }
}

.theme-img-radio .screen.vcard_11 {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;

    img {
        width: 100%;
        transition-duration: 0.5s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: left;
        height: 400px;
        transition: 5s all ease;
    }

    &:hover {
        img {
            object-position: right;
        }
    }
}

.theme-img-radio {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;
    position: relative !important;

    img {
        width: 100%;
        transition-duration: 0.2s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: top;
        height: 400px;
        transition: 5s all ease;
    }

    &:hover {
        img {
            object-position: left;
        }
    }
}

.theme-img-radio.img-border {
    border: 3px solid #1c274c !important;
    border-radius: 10px !important;
    position: relative;

    &::before {
        position: absolute;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px !important;
        font-weight: 500;
        height: 100%;
        width: 100%;
        opacity: 1;
        z-index: 999;
    }
    &::after {
        opacity: 1;
    }
}

.badge-tag {
    left: -42px;
    top: 15px;
    transform: rotate(-38deg) !important;
    font-size: 14px;
    width: 150px;
    height: 26px;
    background-color: #d8d8d8;
    text-align: center;
    font-weight: 600;
    color: #6c757d;
}
.vcard-container {
    border: 1px solid var(--bs-primary) !important;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    .card-body {
        .card-img {
             border-radius: 10px 10px 0px 0px;
             aspect-ratio: 2.2652;
             transition: all 0.3s ease-in-out;
                height: 100%;
                img {
                    vertical-align: middle;
                    height: 100%;
                    border-radius: 10px 10px 0px 0px;
                    object-fit: cover;
                    object-position: top;
                    width: 100%;
                    transition: all 0.3s ease-in-out;
                    aspect-ratio: 2.2652;
                }
        }
        .vcard-actions {
            display: block !important;
            .vcard-button {
                background-color: #ffffff;
                width: 40px;
                min-width: 40px;
                height: 40px;
                display: flex;
                justify-content: center;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                @media (max-width: 575px) {
                    width: 35px;
                    min-width: 35px;
                    height: 35px;
                }
                svg {
                    @media (max-width: 575px) {
                        font-size: 16px !important;
                    }
                }
            }
            .show-vcard a {
                color: #0ac074;
                text-decoration: none;
            }
            .vcard-link-copy a {
                color: #ff8717;
                text-decoration: none;
            }
            .show-chart a {
                color: #0099fb;
                text-decoration: none;
            }
            .vcard-Subscribers a {
                color: #0099fb;
                text-decoration: none;
            }
        }
        .vcard-edit-icon{
            background: white;
            display: inline-block;
            border-radius: 8px;
            position: absolute;
            right: 10px;
            top: 10px;
            opacity: 0;
            z-index: 1;
        }
    }
    .body-content{
        background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    }
    &:hover{
        transition: all 0.3s ease-in-out;
        .card-img {
                transform: scale(1.05);
                transition: all 0.3s ease-in-out;
        }
        .vcard-edit-icon{
            opacity: 1;
            transition: .3s all ease-in-out;
        }
    }
}
.col-custom {
    padding: 0 2px !important;
    @media screen and (min-width: 1450px) {
        width: 20%;
    }
    @media (min-width: 992px) and (max-width: 1450px) {
        width: 25%;
    }
    @media (min-width: 800px) and (max-width: 991px) {
        width: 20%;
    }
    @media (min-width: 650px) and (max-width: 800px) {
        width: 25%;
    }
    @media (min-width: 470px) and (max-width: 650px) {
        width: 33.33%;
    }
    @media screen and (max-width: 470px) {
        width: 50%;
    }
}
.screen.image {
    @media screen and (max-width: 580px) {
        max-width: 100% !important;
    }
}

.short-code-tr{
    background-color: #f8f9fa;
}

.short-code-table tbody tr:nth-child(even) {
    background-color: #eff3f6;
}

.short-code-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.short-code-table tbody td,
.short-code-table thead th {
    border-right: 2px solid #e9ecef;
}
.short-code-table tbody td:first-child,
.short-code-table thead th:first-child{
    border-left: 2px solid #e9ecef;
}
.templates {
    max-height: 625px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.template-name {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.whatsapp-store-template-name {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgb(0, 0, 0, 0.6);
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 16px;
}
.auth-theme-img-radio .screen.vcard_11 {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;

    img {
        width: 100%;
        transition-duration: 0.5s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: left;
        height: 400px;
        transition: 5s all ease;
    }

    &:hover {
        img {
            object-position: right;
        }
    }
}

.auth-theme-img-radio {
    padding: 5px;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    margin: auto;
    border-radius: 5px;
    height: auto;
    position: relative !important;

    img {
        width: 100%;
        transition-duration: 0.2s;
        transform-origin: 50% 50%;
        object-fit: cover;
        object-position: top;
        height: 400px;
        transition: 5s all ease;
    }

    &:hover {
        img {
            object-position: left;
        }
    }
}

.card-detail {
    font-size: 12px;
}
.auth-theme-img-radio.img-border {
    border: 3px solid #1c274c !important;
    border-radius: 10px !important;
    position: relative;

    &::before {
        position: absolute;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 25px !important;
        font-weight: 500;
        height: 100%;
        width: 100%;
        opacity: 1;
        z-index: 999;
    }
    &::after {
        opacity: 1;
    }
}
.dashboard-card-row{
    .fs-30{
        font-size: 30px;
        @media (max-width: 767px) {
            font-size: 24px;
        }
        @media (max-width: 575px) {
            font-size: 20px;
        }
    }
    .fs-18{
        font-size: 18px;
        @media (max-width: 767px) {
            font-size: 16px;
        }
    }

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

    .dashboard-card{
        &:nth-child(1){
            .dashboard-card-bg{
                background-image: linear-gradient(124deg, #dbdde91f, #dbdde9);
                border: 1px solid #4C5592;
                padding-top: 10px;
                padding-bottom: 10px;
                h5 , p {
                    color: #4C5592;
                }
                .card-icon{
                    background-color: #4C5592;
                }
                &:after {
                    background-image: radial-gradient(circle, #8990b7, #a9aec961 40%, #0000 70%);
                }
        }
    }
        &:nth-child(2){
            .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #ff98000f, #ff980042);
                    border: 1px solid #ff9800;
                    h5 , p {
                        color: #ff9800;
                    }
                    .card-icon{
                        background-color: #ff9800;
                    }
                    &:after {
                        background-image: radial-gradient(circle,#f59e0b66,#f59e0b33 40%,#0000 70%);
                    }
                }
            }
            &:nth-child(3){

                .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #dbe7e000, #dbe7e0);
                    border: 1px solid #4E9F3D;
                    h5 , p {
                        color: #4E9F3D;
                    }
                    .card-icon{
                        background-color: #4E9F3D;
                    }
                     &:after {
                        background-image:radial-gradient(circle,#10b98166,#10b98133 40%,#0000 70%);
                    }
            }

        }
            &:nth-child(4){

                .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #fae7e740, #d2141240);
                    border: 1px solid #d21412;
                    h5 , p {
                        color: #d21412;
                    }
                    .card-icon{
                        background-color: #d21412;
                    }
                    &::after {
                        background-image: radial-gradient(circle, #dd7375, #e59fa29c 40%, #0000 70%);
                    }
            }

        }
        &:nth-child(5){
            .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #e7e4d021, #e7e4d0);
                    border: 1px solid #b0a565;
                    h5 , p {
                            color: #b0a565;
                    }
                    .card-icon{
                        background-color: #b0a565;
                    }
                    &::after {
                        background-image: radial-gradient(circle, #b9af78, #e7e7e2 40%, #0000 70%);
                    }
                }
            }
            &:nth-child(6){

                  .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #ccded900, #ccded9);
                    border: 1px solid #005b41;
                     h5 , p {
                            color: #005b41;
                        }
                    .card-icon{
                        background-color: #005b41;
                    }
                     &::after {
                        background-image: radial-gradient(circle, #22715c63, #22725d29 40%, #0000 70%);
                    }
            }

            }
            &:nth-child(7){

                 .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #fbeff824, #fbeff8);
                    border: 1px solid #d862bc;
                    h5 , p {
                            color: #d862bc;
                        }
                    .card-icon{
                        background-color: #d862bc;
                    }
                    &::after {
                            background-image: radial-gradient(circle, #db78c48c, #db78c45c 40%, #0000 70%);
                    }
                }

            }
            &:nth-child(8){

                 .dashboard-card-bg{
                    background-image: linear-gradient(124deg, #fff4e526, #fff4e5);
                    border: 1px solid #ff9800;
                    h5 , p {
                        color: #ff9800;
                    }
                    .card-icon{
                        background-color: #ff9800;
                    }
                    &::after {
                            background-image: radial-gradient(circle, #fda4234a, #fda42345 40%, #0000 70%);
                    }
                }

        }

    }
    @keyframes waterSplash{
        0% {
            transform: translateY(0) scale(1);
        }
        30% {
            transform: translateY(-8px) scale(1.05);
        }
        60% {
            transform: translateY(-3px) scale(1.02);
        }
        100% {
            transform: translateY(-5px) scale(1.02);
        }
    }
    @keyframes waterWaves{
        0%, 100% {
            opacity: .8;
            transform: rotate(0) scale(1);
        }

        25% {
            opacity: 1;
            transform: rotate(1deg) scale(1.02);
        }
        50% {
            opacity: .9;
            transform: rotate(0) scale(.98);
        }
        75% {
            opacity: 1;
            transform: rotate(-1deg) scale(1.01);
        }
    }
    .dashboard-card-bg{
        // background-color: #4C5592;
        // box-shadow: 0px 0px 24px 0px #00000040 inset;
        border-radius: 20px;
        padding: 16px;
        position: relative;
        overflow: hidden;
        min-height: 117px;
        z-index: 1;
        &:after {
            content: "";
            z-index: -1;
            opacity: 0;
            border-radius: 50%;
            width: 0;
            height: 0;
            transition: all .8s ease-out;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        &:hover {
            animation: .6s ease-out waterSplash;
            transform: translateY(-5px) scale(1.02);
            &:after {
                opacity: .4;
                width: 200px;
                height: 200px;
            }
        }
        @media (max-width:1500px) {
            padding: 15px ;
        }
        @media (max-width:991px) {
            padding: 24px;
        }
        .add-card {
            a {
                color: #4C5592;
                font-size: 12px;
            }
        }
        p {
            margin-bottom: 6px;
        }
        .card-icon{
            width: 42px;
            height: 42px;
            // background-color: #666EAA;
            border-radius: 7px;
            box-shadow: 0px 0px 14px 0px #00000040;
            svg {
                font-size: 20px;
            }
        }

    }
}
.dashboard-table{
    box-shadow: 0px 0px 14px 0px #00000026 !important;
    thead{
        tr{
            &:first-child{
                th{
                    &:nth-child(2){
                        border-top-left-radius: 0.625rem;
                    }
                }
            }
            th{
                background:#d9e0ea;
                border-bottom: 1px solid #93989C !important;
                padding: 20px !important;

            }
        }
    }
    [dir="rtl"] &,
        .rtl & {
            thead {
                tr {
                    &:first-child {
                        th {
                            &:nth-child(2) {
                            border-top-right-radius: 0.625rem;
                            border-top-left-radius: 0;
                            }
                        }
                    }
                }
            }
    }
    tbody{
        tr{
            td{
                border-bottom: 0 !important;
                padding: 20px !important;
               }
            &:last-child{
                td{
                    border-bottom: 0 !important;
                    &:nth-child(2){
                        border-bottom-left-radius: 0.625rem;
                    }
                }
            }
            &:nth-of-type(odd){
                td{
                    background-color: #fff;
                    --bs-table-accent-bg:  #ffffff;
                }
            }
            &:nth-of-type(even){
                td{

                    background-color:  #edf0f3;
                    --bs-table-accent-bg:  #edf0f3;
                }
            }
        }

    }
}
.dashboard-table-recent{
    box-shadow: 0px 0px 14px 0px #00000026 !important;
    thead{
        tr{
            &:first-child{
                th{
                    &:nth-child(1){
                        border-top-left-radius: 0.625rem;
                    }
                }
            }
            th{
                background:#d9e0ea!important;
                border-bottom: 1px solid #93989C !important;
                padding: 20px !important;

            }
        }
    }
    tbody{
        tr{
            td{
                background-color: #fff !important;
                border-bottom: 0 !important;
                padding: 20px !important;
               }
                &:nth-of-type(odd){
                    td{
                        background-color: #fff !important;
                        --bs-table-accent-bg:  #ffffff !important;
                    }
                }
                &:nth-of-type(even){
                    td{

                        background-color:  #edf0f3 !important;
                        --bs-table-accent-bg:  #edf0f3 !important;
                    }
                }
                &:last-child{
                    td{
                        border-bottom: 0 !important;
                        &:nth-child(1){
                            border-bottom-left-radius: 0.625rem;
                        }

                    }
                }
        }

    }
}
#chart-container {
@media (max-width:991px) {
    max-width: 500px;
    aspect-ratio: 1/1;
    margin: 0 auto;
}
  }

  #chart-container canvas , .chart2-container canvas {
    width: 100% !important;
    height: 100% !important;
  }
.dashboard-calendar-btn{
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    @media (max-width:575px) {
        padding: 6px 10px !important;
    }
    svg{
        min-width: 24px;
        @media (max-width:575px) {
            min-width: 20px;
        }
        path{
            fill: var(--bs-primary);
        }
    }
    span{
        @media (max-width:575px) {
            font-size: 10px;
        }
    }
}
.graph-icon{
    border-radius: 10px;
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
    width: 42px;
    height: 42px;
    min-width: 42px;
    @media (max-width:575px) {
        width: 32px;
        height: 32px;
        min-width: 32px;
        svg{
            width: 16px;
        }
    }
    svg{
        path{
            fill: var(--bs-primary) !important;
        }
    }
}
.dashboard-search-box{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.width-250{
    width: 250px !important;
}

@media (max-width: 576px) {
    .dashboard-search-box {
        min-width: 150px !important;
        width: 100% !important;
    }

    .dashboard-search-box-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.sidebar-bottom-btn{
    &:hover{
        background-color: var(--bs-primary) !important;
        color: #fff !important;
        i ,svg{
            color: #fff !important;
            path{
                fill: #fff !important;
            }
        }
        span{
            color: #fff !important;
        }
    }
}
.vcards-main{
    .vcards-table{
        thead{
            th{
                &:last-child{
                    width: 210px;
                }
            }
        }
    }
}
.dashboard-dropdown{
    color: #6c757d !important;
    border-radius: 8px !important;
    font-size: 14px;
    padding: 6px 12px !important;
    span{
        color: #6c757d !important;
    }
    &:hover{
        color: #fff !important;
        background-color: var(--bs-primary) !important;
        span , svg path{
            color: #fff !important;
            fill: #fff !important;
        }
    }
}
.row-gap-24px{
    row-gap: 24px;
}
.chart-max-height{
@media (min-width:991px) {
    max-height: 553px;
    min-height: 553px;
}
}


.common-modal-card {
    .modal-content {
        border-radius: 20px;
    }
    .modal-header{
        padding: 20px;
        &:after {
            display: none;
        }
        .modal-close {
            svg {
                width: 22px;
                path {
                    fill: #1c274c;
                }
            }
        }
    }
    .form-control {
        font-size: 13px;
        background-color: #eff3f7;
        border-radius: 8px;
        color: var(--bs-primary);
    }
    .image-picker {
        margin-top: 8px;
        .previewImage {
            background-size: 70% 76%;
            height: 80px;
            width: 80px;
            border-radius: 10px;
        }
        .picker-edit {
            border: 1px solid #1c274c;
            height: 22px;
            width: 22px;
            svg {
                height: 12px;
                path {
                    fill: #1c274c;
                }
            }
        }
    }
    .modal-title {
        font-weight: 600;
    }
    .modal-body {
        padding: 20px;
    }
    .modal-footer {
        button {
            min-width: 105px;
        }
        .btn-primary {
            &:hover {
                background-color: var(--bs-white) !important;
                color: var(--bs-primary) !important;
            }
        }
        .discard-btn {
            background-color: #eff3f7  !important;
            color: var(--bs-primary) !important;
            max-width: fit-content;
            border: 1px solid #ced4da;
            &:hover {
                background-color: var(--bs-white) !important;
                color: var(--bs-primary) !important;
                border-color: var(--bs-primary) !important;
            }
        }
    }
}

.form-control {
    &::placeholder {
        font-size: 12px;
    }
}

.analytics-badge {
    background: linear-gradient(135deg, #eef4ff, #f5f8ff);
    border: 1px solid #dbe7ff;
    min-width: 60px;
    justify-content: center;
    transition: all 0.3s ease;
}

.analytics-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 118, 173, 0.15);
}

.analytics-icon {
    color: #4f76ad;
    font-size: 13px;
}

.analytics-count {
    color: #355c8a;
    font-size: 13px;
    font-weight: 600;
}