﻿.card.income-card .card-body .round-box {
    width: 45px;
    height: 45px;
}

.card.income-card.card-primary .round-box, .dashboard-2-main .card.income-card.card-primary .round-box {
    background-color: rgba(36, 105, 92, 0.1);
}

.card.income-card .card-body .round-box, .dashboard-2-main .card.income-card .card-body .round-box {
    width: 55px;
    height: 55px;
    border-radius: 27px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .card.income-card .card-body .round-box svg {
        height: 16px;
    }

.card.income-card.card-primary .round-box svg, .dashboard-2-main .card.income-card.card-primary .round-box svg {
    fill: #E91E63;
}

.card.income-card .card-body .round-box svg, .dashboard-2-main .card.income-card .card-body .round-box svg {
    width: auto;
    height: 25px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.card.income-card .card-body .parrten, .dashboard-2-main .card.income-card .card-body .parrten {
    position: absolute;
    top: -25px;
    left: -25px;
}

    .card.income-card .card-body .parrten svg, .dashboard-2-main .card.income-card .card-body .parrten svg {
        fill: rgba(36, 105, 92, 0.03);
        width: 100px;
        height: 100px;
        -webkit-transform: rotate(-135deg);
        transform: rotate(135deg);
    }

.card {
    margin-bottom: 30px;
    border: 1px solid #e6edef;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    border-radius: 0;
    background-color: #fff;
}

    .card.income-card, .dashboard-2-main .card.income-card {
        overflow: hidden;
    }

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.btn-pink {
    background-color: #E91E63 !important;
    border-color: #E91E63 !important;
    color: #ffffff;
    border-radius: 3px !important;
}

.btn:hover {
    color: #ffffff !important;
}

.pd-card {
    padding: 17px !important;
}

.pd-margin {
    margin: 40px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
}

.hd-card {
    height: auto !important;
}

.custfnt {
    color: #E91E63 !important;
}

/*.pagination {
    border: 1px groove;
    border-radius: 5px;
}

    .pagination .page-link {
        border: none;
        color: black;
    }

    .pagination .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #E91E63 !important;
    }*/


.dt-paging-button .page-item:active .page-link {
    background-color: #E91E63 !important
}

.no-height {
    height: 0px !important;
}

.fontpink {
    color: #E91E63 !important;
}

#tableprofile1_wrapper .col-12 {
    overflow-x: scroll;
}

.table thead th, .table tbody td {
    padding: 12px 22px;
}

.badge-pink {
    background-color: #E91E63 !important;
    border-color: #E91E63 !important;
    color: #ffffff;
}

/*#ddlgroups + .btn-group {
    width: 100%; 
}

    
    #ddlgroups + .btn-group .multiselect-container {
        width: 100%; 
        max-height: 250px; 
        overflow-y: auto; 
    }*/



#tableprofile1 .table-hover tbody tr:hover {
    background-color: rgba(36, 105, 92, 0.1);
    --bs-table-accent-bg: unset;
}

    #tableprofile1 .table-hover tbody tr:hover th, .table-hover tbody tr:hover td {
        color: black;
    }

input {
    height:auto !important;
}


.divtitle {
    background-color: #007bff38;
    border-radius: 25px;
    padding: 7px 0 4px 0;
    margin-bottom: 5px;
    color: #000;
}

#tableprofile2_wrapper .col-12 {
    overflow-x: scroll;
}

#tableprofile2 .table-hover tbody tr:hover {
    background-color: rgba(36, 105, 92, 0.1);
    --bs-table-accent-bg: unset;
}
#tableprofile2 .table-hover tbody tr:hover th, .table-hover tbody tr:hover td {
    color: black;
}

#tableprofile .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 15px;
}

#tableprofile .bg-info {
    background-color: rgb(113 113 113 / 0.11) !important;
}

#tableprofile .icofont-ui-edit{
    color: #717171;
}

#tableprofile .bg-danger {
    background-color: rgb(210 45 61 / 0.11) !important;
}

#tableprofile .fa-trash {
    color: #d22d3d;
    padding: 0px 2px;
}

#tableprofile .bg-success {
    background-color: rgb(27 76 67 / 0.11) !important;
}

#tableprofile .fa-file-excel-o {
    color: #1b4c43;
    padding: 0px 2px;
}

#tableprofile .bg-secondary {
    background-color: rgb(186 137 93 / 0.11) !important;
}

#tableprofile .icofont-ui-add {
    color: #ba895d;
}

#tableprofile .table thead th, .table tbody td {
    vertical-align:middle;
}

.selectize-input {
    border: none !important;
    box-shadow: none !important;
}
.selectize-control.multi .selectize-input [data-value] {
    background-color: #717171 !important;
    background-image: none !important;
}

.selectize-control.multi .selectize-input > div {
    border: 1px solid #717171 !important;
    padding: 6px 12px !important;
}

.selectize-control.plugin-remove_button [data-value] .remove {
    position: relative !important;
    padding: 0px 0px 1px 10px !important;
    width: 20px !important;
    border-left: none !important;
    font-size: 20px !important;
}

.dropzone {
    margin-right: auto;
    margin-left: auto;
    padding: 50px;
    border: 2px dashed #717171;
    border-radius: 15px;
    -o-border-image: none;
    border-image: none;
    background: rgba(36, 105, 92, 0.05);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 150px;
    position: relative;
}

    .dropzone .dz-message {
        text-align: center;
        margin: 25px 0;
    }

    .dropzone.dz-clickable .dz-message {
        cursor: pointer;
    }

    .dropzone i {
        font-size: 50px;
        color: #E91E63;
    }


/*#tableprofile1 a {
    color: #242934 !important;
}*/

.calendar-basic .tui-full-calendar-popup .tui-full-calendar-popup-section-item {
    padding-top: 4px !important;
}

.tui-full-calendar-popup {
    font-weight: normal !important;
}

.cust-ps {
    padding-left: 0.4rem;
}

.popover {
    max-width: 430px !important;
}

.feature-products div .input-group input {
    margin-bottom: 15px;
    height: 50px !important;
    padding-left: 30px;
}

.feature-products div .input-group a {
    padding-top: 13px;
    height: 50px;
}

.chat-box .chat-right-aside .chat .chat-msg-box {
    margin-bottom: 0px !important;
}

.p-t-12 {
    padding-top: 12px !important;
}


.gallery-item {
    width: 50px !important;
    height: 50px !important;
    background-size: cover;
    background-position: center;
}

.gallery-item-btn {
    width: 50px !important;
    height: 50px !important;
}

.gallery-container {
    overflow-y: scroll;
    max-height: 200px;
}


.email-wrap .email-right-aside .email-body .inbox .righ-img svg {
    width: 18px;
    margin-right: 0px;
    cursor: pointer;
    padding-top: 0.25rem !important;
}

.chat-box .chat-right-aside .chat .chat-message {
    position:relative;
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: 0.5;
}

    .placeholder.btn::before {
        display: inline-block;
        content: "";
    }

.placeholder-xs {
    min-height: 0.6em;
}

.placeholder-sm {
    min-height: 0.8em;
}

.placeholder-lg {
    min-height: 1.2em;
}

.placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite;
}

@keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

.sendm-attchments {
    font-size: 14px;
    font-weight: 600;
    vertical-align: middle;
}


.select2-drpdwn-product .form-control {
    background-color: rgba(233, 30, 99, 0.05);
    color: #d22d3d;
    border-color: rgba(233, 30, 99, 0.05);
}

.select2-container--default .select2-selection--multiple {
    padding-top: 5px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border: 1px solid #e6edef !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
        margin-bottom: 5px !important;
        margin-top: 5px !important;
        border: 1px solid #E91E63 !important;
    }


div.dt-processing > div:last-child {
    display: none !important;
}

.ui-window-bar .ui-button {
    position: absolute;
    top: 50%;
    width: 20px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

.ui-window-bar .ui-window-minimize {
    right: calc(.3em + 40px);
}

.ui-window-bar .ui-window-maximize {
    right: calc(.3em + 20px);
}

.btnmodalclose {
    top: 25px !important;
}

.square-img {
    width: 100px; /* Adjust the size as needed */
    height: 100px; /* This makes the image square */
    object-fit: cover; /* Ensures the image fills the square area without distorting */
}

.checkfont i {
    font-size: 30px !important;
    color: #dc3545 !important;
}


.dropzone .dz-preview .dz-image img {
    height: 120px;
    width: 120px;
    object-fit: cover;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
    position: relative !important;
    border-right: 0px !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    float: right;
    margin-left: 0.15rem;
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        background-color: transparent !important;
    }

.select2-container .select2-search--inline .select2-search__field {
    margin-bottom: 5px;

}

#twiltbl_st {
    width: 17% !important;
}

#twiltbl_dt {
    width: 16% !important;
}

#header_lnklogout {
    color: #2b2b2b;
}

#header_lnklogout:hover {
    color:white ;
}

    #header_lnklogout:focus {
        color: white;
    }

.login-form .form-group .input-group-text {
    color: #E91E63;
}

body.dark-only .compact-wrapper .page-body-wrapper .page-body .email-wrap .media-body .custname {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-only .compact-wrapper .page-body-wrapper .page-body .email-wrap .media-body .custimg {
    color: rgba(255, 255, 255, 0.7) !important;
}

option {
    border: none;
    /*outline-color: rgba(233, 30, 99, 0.05) !important;*/
}


/*.crm-activity {
    height: 291px;
    overflow-y: auto;
}*/

/* Base styles for the button */
.expandable-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 50px; /* Initial width for just the icon */
    height: 40px; /* Adjust as needed */
    transition: width 0.3s ease;
    white-space: nowrap;
    padding: 0 10px;
    /*border: 1px solid #ccc;*/ /* Optional: border to match your design */
    border-radius: 5px; /* Rounded corners */
    /*background-color: #fff;*/ /* Adjust background color if needed */
}

    /* Icon styles */
    .expandable-btn i {
        position: absolute;
        font-size: 16px; /* Adjust as needed */
        margin-right: 0; /* No margin initially */
        /*color: #000;*/ /* Adjust icon color */
        transition: transform 0.3s ease;
    }

    /* Text label styles (hidden initially) */
    .expandable-btn .btn-label {
        display: inline-block;
        opacity: 0;
        margin-left: 10px;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none; /* Prevent interaction with hidden text */
        color: inherit;
    }

    /* On hover, expand the button */
    .expandable-btn:hover {
        width: 180px; /* Expanded width to accommodate text */
        /*padding: 0 15px !important;*/
    }

        /* On hover, show the text */
        .expandable-btn:hover .btn-label {
            opacity: 1;
            transform: translateX(0);
        }

        .expandable-btn:hover i {
            position: relative; /* Move icon left by 10px */
        }




.expandable-btn-1 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 50px; /* Initial width for just the icon */
    height: 40px; /* Adjust as needed */
    transition: width 0.3s ease;
    white-space: nowrap;
    padding: 0 10px;
    /*border: 1px solid #ccc;*/ /* Optional: border to match your design */
    border-radius: 5px; /* Rounded corners */
    /*background-color: #fff;*/ /* Adjust background color if needed */
}

    /* Icon styles */
    .expandable-btn-1 i {
        position: absolute;
        font-size: 16px; /* Adjust as needed */
        margin-right: 0; /* No margin initially */
        /*color: #000;*/ /* Adjust icon color */
        transition: transform 0.3s ease;
    }

    /* Text label styles (hidden initially) */
    .expandable-btn-1 .btn-label {
        display: inline-block;
        opacity: 0;
        margin-left: 10px;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none; /* Prevent interaction with hidden text */
        color: inherit;
    }

    /* On hover, expand the button */
    .expandable-btn-1:hover {
        width: 200px; /* Expanded width to accommodate text */
        /*padding: 0 15px !important;*/
    }

        /* On hover, show the text */
        .expandable-btn-1:hover .btn-label {
            opacity: 1;
            transform: translateX(0);
        }

        .expandable-btn-1:hover i {
            position: relative; /* Move icon left by 10px */
        }



.btn-outline-old-green {
    border-color: #24695c;
    color: #24695c;
    background-color: transparent;
}

    .btn-outline-old-green:hover, .btn-outline-old-green:focus, .btn-outline-old-green:active, .btn-outline-old-green.active {
        color: white;
        background-color: #24695c !important;
        border-color: #24695c !important;
    }

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #E91E63;
    border-color: #E91E63;
}

.page-link {
    color: #000;
}

body.dark-only .compact-wrapper .page-body-wrapper .page-body .link-dark {
    color: rgba(255, 255, 255, 0.7) !important;
}


.daterangepicker.ltr .ranges li:hover {
    border: none !important;
}

.daterangepicker.ltr .ranges li.active {
    border: none !important;
}

.daterangepicker .drp-buttons .btn-default {
    color: #212529 !important;
}
/*.CodeMirror {
    height: 200px !important; 
    min-height: 200px !important;
}*/
body.dark-only .editor-toolbar select {
    background-color: #111727;
    color: rgba(255, 255, 255, 0.7);
}


.loader {
    width: 4px; /* Reduced width */
    height: 20px; /* Reduced height */
    border-radius: 2px; /* Adjusted border-radius */
    display: block;
    margin: 10px 20px; /* Adjusted margin */
    position: relative;
    background: currentColor;
    color: #E91E63;
    box-sizing: border-box;
    animation: animloader 0.3s 0.3s linear infinite alternate;
}

    .loader::after, .loader::before {
        content: '';
        width: 4px; /* Reduced width */
        height: 20px; /* Reduced height */
        border-radius: 2px; /* Adjusted border-radius */
        background: currentColor;
        position: absolute;
        top: 50%; /* Centered vertically */
        transform: translateY(-50%);
        left: 10px; /* Adjusted spacing */
        box-sizing: border-box;
        animation: animloader 0.3s 0.45s linear infinite alternate;
    }

    .loader::before {
        left: -10px; /* Adjusted spacing */
        animation-delay: 0s;
    }

@keyframes animloader {
    0% {
        height: 24px; /* Adjusted max height */
    }

    100% {
        height: 2px; /* Adjusted min height */
    }
}

.loader-div {
    height: 30px !important;
}

.blur-backdrop {
    filter: blur(0.4rem);
    -webkit-backdrop-filter: blur(0.4rem);
    max-width: 90%;
    overflow-x: auto;
}


div.dt-processing {
    left: 40% !important;
    width: auto !important;
    background: none;
    border: none;
}


.del-pad {
   padding : 0px 2px;
}

.table-scroll-cust .dt-container .col-12 {
    overflow-x: scroll;
}

#sidebar_getstorename {
    color: #222222 !important;
}

body.dark-only #sidebar_getstorename {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-only #header_lnklogout {
    color: rgba(255, 255, 255, 0.7) !important;
}

.filter-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 50px; /* Initial width for just the icon */
    height: 40px; /* Adjust as needed */
    transition: width 0.3s ease;
    white-space: nowrap;
    padding: 0 10px;
    /*border: 1px solid #ccc;*/ /* Optional: border to match your design */
    border-radius: 5px; /* Rounded corners */
    /*background-color: #fff;*/ /* Adjust background color if needed */
}

    /* Icon styles */
.filter-btn i {
    position: absolute;
    font-size: 16px; /* Adjust as needed */
    margin-right: 0; /* No margin initially */
    /*color: #000;*/ /* Adjust icon color */
    transition: transform 0.3s ease;
}

    /* Text label styles (hidden initially) */
    .filter-btn .btn-label {
        display: inline-block;
        opacity: 0;
        margin-left: 10px;
        transform: translateX(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none; /* Prevent interaction with hidden text */
        color: inherit;
    }

    /* On hover, expand the button */
.filter-btn:hover {
    width: 128px; /* Expanded width to accommodate text */
    /*padding: 0 15px !important;*/
}

        /* On hover, show the text */
.filter-btn:hover .btn-label {
    opacity: 1;
    transform: translateX(0);
}

.filter-btn:hover i {
    position: relative; /* Move icon left by 10px */
}



.introjs-arrow.top {
    border-bottom-color: #ffffff !important;
}

.introjs-arrow.top-right {
    border-bottom-color: #ffffff !important;
}

.introjs-arrow.top-middle {
    border-bottom-color: #ffffff !important;
}


.introjs-arrow.right-bottom {
    border-left-color: #ffffff !important;
}

.introjs-arrow.left-bottom {
    border-right-color: #ffffff !important;
}

.introjs-arrow.bottom {
    border-top-color: #ffffff !important;
}

.introjs-arrow.right {
    border-left-color: #ffffff !important;
}

.introjs-arrow.left {
    border-right-color: #ffffff !important;
}

.introjs-bullets ul li a.active {
    background: #000000 !important;
}

.introjs-tooltip {
    color: black !important;
    background-color: #ffffff !important;
    border: 6px solid #ffffff !important;
}


.email-wrap .email-right-aside .email-body .inbox img {
    height: auto;
}

@media screen and (max-width: 1199px) {
    .chat-menu-icons {
        width: auto !important;
    }
}

input, button, select, optgroup, textarea {
    font-family : inherit !important;
}

body.dark-only .compact-wrapper .page-body-wrapper .page-body .card .bg-white {
    background-color : transparent !important;
}


.custtbl-btn .btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 15px;
}

.custtbl-btn .bg-info {
    background-color: rgb(113 113 113 / 0.11) !important;
    color: #717171 !important;
}

.custtbl-btn .bg-danger {
    background-color: rgb(210 45 61 / 0.11) !important;
    color: #d22d3d !important;
}

.custtbl-btn .bg-success {
    background-color: rgb(27 76 67 / 0.11) !important;
    color: #1b4c43 !important;
}

.custtbl-btn .fa-file-excel-o {
    padding: 0px 2px;
}

.custtbl-btn .bg-secondary {
    background-color: rgb(186 137 93 / 0.11) !important;
    color: #ba895d !important;
}

.custtbl-btn .bg-pink {
    background-color: rgb(233 30 99 / 0.11) !important;
}

.email-top .border-top {
    border-color: #e6edef !important;
}

.email-profile .inbox .badge-primary {
    background-color: rgba(233, 30, 99, 0.10);
    color: #E91E63 !important;
}

.email-profile .inbox .badge-secondary {
    background-color: rgba(0, 147, 33, 0.10);
    color: #009321 !important;
}

.email-profile .inbox .badge-info {
    background-color: rgba(0, 117, 255, 0.10);
    color: #0075ff;
}

.email-profile .contactname {
    color: #E91E63 !important;
}

.unread-bg {
    background-color: #f2f6fc;
}

.select2 {
    width: 100% !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.twitter-typeahead {
    width: 100% !important;
}

.tt-menu {
    width: auto !important;
}

body.dark-only .border-bottom {
    border-bottom: 1px solid rgba(36, 105, 92, 0.2) !important;
}

@media (min-width: 564px) {
    .daterangepicker .ranges, .daterangepicker .drp-calendar {
        float: left !important;
    }
}

.spl .badge-info {
    background-color: rgba(0, 117, 255, 0.10);
    color: #0075ff;
}

.spl .badge-secondary {
    background-color: rgba(0, 147, 33, 0.10);
    color: #009321 !important;
}


@media screen and (max-width: 1199px) {
    .video-testing .chat-history {
        height: auto;
    }
}

.expandable-test {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-width: 50px; /* Initial width for just the icon */
    max-width: 50px; /* Start with a fixed width */
    height: 40px;
    transition: max-width 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    padding: 0 10px;
    border-radius: 5px;
}

    .expandable-test i {
        position: absolute;
        font-size: 16px;
        transition: transform 0.3s ease;
    }

    .expandable-test .btn-label {
        display: inline-block;
        opacity: 0;
        margin-left: 10px;
        transform: translateX(-10px);
        /*transition: transform 0.3s ease;*/
        pointer-events: none;
        white-space: nowrap;
    }

    /* Smooth transition using max-width instead of width:auto */
    .expandable-test:hover {
        max-width: 200px; /* Adjust dynamically based on text length */
    }

        .expandable-test:hover .btn-label {
            opacity: 1;
            transform: translateX(0);
        }

        .expandable-test:hover i {
            position: relative;
        }


body.dark-only .compact-wrapper .collapse .invoice-table td {
    color: white !important;
    border-color: rgba(36, 105, 92, 0.2) !important;
}

.compact-wrapper .collapse .invoice-table .item {
    background-color: rgba(36, 105, 92, 0.1);
    --bs-table-bg: rgba($primary-color,0.1);
    color: #24695c;
}

body.dark-only .compact-wrapper .collapse .invoice-table .item {
    background-color: rgba(0, 0, 0, 0.05);
}

body.dark-only .compact-wrapper .collapse .bg-white {
    background-color:transparent !important;
}