/* [dir=rtl] body{ background: #eee;} */

/* hide template customizer setting for colors */
.template-customizer-open-btn{
    display: none !important;
}

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('/assets/img/logo.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
    animation: shake 2s infinite;
}

@keyframes shake {
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(-2px, 2px);
    }
    50% {
        transform: translate(2px, -2px);
    }
    75% {
        transform: translate(-2px, 2px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

.img_primary {
    filter: invert(26%) sepia(100%) saturate(4434%) hue-rotate(180deg) brightness(94%) contrast(90%);
}

.img_white{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(190deg) brightness(100%) contrast(100%);
}

.img_black{
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(190deg) brightness(100%) contrast(100%);
}

.img-info{
    /* #D3F1F0 */
    filter: invert(31%) sepia(86%) saturate(658%) hue-rotate(140deg) brightness(92%) contrast(97%);
}

.img_gray{
    /* #9A9A9A */
    filter: grayscale(100%) brightness(60%) contrast(80%);
}

.dark-style .vector_img_dark{ /*convert to white*/
    filter: brightness(0) saturate(100%) invert(83%) sepia(9%) saturate(670%) hue-rotate(183deg) brightness(96%) contrast(92%);
}

.percentage-success{
    border: 1px solid #4CAF50;
    color: #4CAF50;
    font-size: 12px;
}
.percentage-danger{
    border: 1px solid #D32F2F;
    color: #D32F2F;
    font-size: 12px;
}
.percentage-secondary{
    border: 1px solid #757575;
    color: #757575;
    font-size: 12px;
}
.percentage-success-text{
    color: #4CAF50;
}
.percentage-danger-text{
    color: #D32F2F;
}
.percentage-secondary-text{
    color: #757575;
}
.percentage-success-bg{
    background-color: #4CAF50;
}
.percentage-danger-bg{
    background-color: #D32F2F;
}
.percentage-secondary-bg{
    background-color: #757575;
}
.percentage-warning-bg{
    background-color: #FFC107;
}
.percentage-orange-bg{
    background-color: #F39C12;;
}

[dir=rtl] .bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: #E3F3FA !important;
    color: #0077B6 !important;
    box-shadow: none;
    font-weight: bold;
}

.avatar-fallback{
    background: #0077B6;
    color: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 45px;
    line-height: 58px;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #0077B6;
    background-color: #E3F3FA;
}

.select2-results__option[role=option][aria-selected=true]{background: #0077B6 !important;}
.select2-container--default .select2-results__option--highlighted:not([aria-selected=true]) {
    background-color: #dce6f447 !important;
    color: #0077B6 !important;
}

.card{
    border-color: #E1E5E8 !important;
    border-radius: 14px;
}

/* ==================== progress steps ==================== */
.progress-steps .step-container {
    position: relative;
    text-align: center;
    transform: translateY(-33%);
}

.progress-steps .step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #D4D9DC;
    border: 1px solid #D4D9DC;
    /* color: #444C53; */
    line-height: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.progress-steps .step-circle.active {
    background-color: #fff;
    border-color: #0077b6;
    color: #0077b6;
}

.progress-steps .step-circle.complete {
    background-color: #0077b6;
    border-color: #0077b6;
    color: #fff;
}

.progress-steps .step-label.active{
    color: #0077b6;
    font-weight: bold;
}


/* ==================== drag and drop ==================== */
.dragable_media_box .upload_image_box {
    position: relative;
    border: 2px dashed #0077b6;
    display: inline-block;
    border-radius: 16px;
    transition: transform 0.3s;
    input[type="file"] {
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: 0;
        top: 0;
        left: 0;
    }
}
.dragable_media_box .draging {
    transform: scale(1.1);
}
.dragable_media_box #preview img{max-width: 100%}

.swal2-rtl .swal2-close{
    box-shadow: none !important;
}



/* ==================== datatables (dataTable scroll body) ==================== */
#table-view{border-radius: 14px !important;}
.dataTables_scroll{padding: 0 20px;}
.dataTables_scrollHead{background-color: #eee;}
.dataTables_scrollBody{
    max-height: auto !important;
    height: auto !important;
}
.table-footer-row{
    background: #eee;
    border-radius: 0 0 14px 14px;
}

.dark-style .dataTables_scrollHead,
.dark-style .table-footer-row{
    background: #25293c;
}

.dataTables_length{margin: 0 !important; font-size: 14px !important;}
select[name="DataTables_Table_0_length"]{
    /* padding: 0 0 0 30px !important; */
    border: 0;
    box-shadow: none !important;
    background: transparent;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    margin: 0 0px 0 17px;
    padding: 0 !important;
}

div.dataTables_wrapper div.dataTables_info{
    padding: 0;
    font-size: 16px;
}

.dataTables_filter,
.filter_section {
    visibility: hidden;
}

@media (max-width: 575.98px) {
    .col-sm-12.col-md-6:has(#DataTables_Table_0_length){flex-wrap: wrap; justify-content: center !important;}
    [dir=rtl] div.dataTables_wrapper .dataTables_filter input{margin: 0; display: block; width: 95%}
}
/* ==================== */


.sm-icons{
    background: #EEEEEE;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.xs-icons{
    background: #EEEEEE;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============== progress circle ============== */
.progress-circle-small {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 20px;
}

.progress-circle-small svg {
    width: 80px;
    height: 80px;
}

.progress-circle-small .bg {
    fill: none;
    stroke-width: 3px;
    stroke: #D4D9DC;
}

.progress-circle-small .progress {
    fill: none;
    stroke-width: 3px;
    stroke: #0077b6;
    stroke-linecap: round;
    stroke-dasharray: 232.36;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dashoffset: 200;
    animation: progress-animation 2.5s ease-in-out, appear 1s;
}

.progress-circle-small .text {
    position: absolute;
    width: 100%;
    top: 33px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    line-height: 16px;
}

.progress-circle-small .text .small {
    font-size: 12px;
    color: #fff;
}

@keyframes progress-animation {
  from {
    stroke-dashoffset: 233;
  }
  to {
    stroke-dashoffset: 200;
  }
}

#campaign_performance_chat{
    width: 350px !important;
    height: 175px !important;
}
.campaign_performance_img{
    position: absolute;
    bottom: 40px;
    height: 100px;
    margin: 0 0 0 100px;
}

.campaign_performance_circle_img{
    position: absolute;
    bottom: 40px;
    height: 40px;
    width: 40px;
}
.campaign_performance_arrow_img{
    position: absolute;
    bottom: 40px;
    margin: 0 0 0 130px;
    height: 114px;
    z-index: 2;
    transform: rotate(4deg);
}