/*// Import icon font, I've used Entypo (http://entypo.com/)*/
/* @import url(http://weloveiconfonts.com/api/?family=entypo); */
/*// Import Roboto font*/
/* @import url(https://fonts.googleapis.com/css?family=Roboto:300); */
@font-face {
    font-family: IRANSansWeb;
    src: url(../fonts/IRANSansWeb.ttf);
}
@font-face {
    font-family: Estedad;
    src: url(../fonts/Estedad-Medium.ttf);
}
@font-face {
    font-family: IRANYekan;
    src: url(../fonts/IRANYEKANREGULAR.ttf);
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.eot");
    src: url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.woff2") format("woff2"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.woff") format("woff"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.ttf") format("truetype"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.eot");
    src: url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.woff2") format("woff2"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.woff") format("woff"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.ttf") format("truetype"), url("../../fontawesome-free-5.15.3-web/webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
      



html, body {
    font-family: 'Roboto', IRANSansWeb;
    font-size: 16px;
    line-height: 24px;
    /* background-color: #F1F2F3; */
    background: var(--main-bg, #F3F5F9);
    overflow-x: hidden;
}

body{
    background-image: linear-gradient(to bottom right,#F5F5FF, #DFF7F4);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

a:hover {
    color: inherit;
    text-decoration: none !important;
}

a {
    text-decoration: none;
    color: inherit;
}

/* .form-control::-webkit-input-placeholder {
    font-family: IRANSansWeb;
}
  
.form-control:-ms-input-placeholder {
    font-family: IRANSansWeb;
}
  
.form-control:-moz-placeholder {
    font-family: IRANSansWeb;
}

.form-control::-moz-placeholder {
    font-family: IRANSansWeb;
} */

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            opacity: 0.4; /* Firefox */
}
.select2-search__field::placeholder {
    font-family: IRANSansWeb;
    color: #6c757d;
    opacity: 0.5;
}
.select2-container {
    width: 100% !important;
    /* color: black; */
}
.select2-selection__rendered {
    overflow: hidden;
    text-overflow: ellipsis;
}
.select2-results {
    max-width: inherit !important; /* Adjust this value as needed */
}
.select2-results__option {
    max-width: inherit !important; /* Adjust this value as needed */
}
/* .select2-container[aria-expanded="true"] textarea{
    width: 4rem !important;
    background-color: #006603 !important;
} */
.select2-container--default .select2-selection--multiple{
    border: 1px solid #ced4da;
}

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.noborder {
    border: 0;
}
.nothing {
    border: 0;
    outline: none;
    background-color: inherit;
}

.select2-container .select2-search--inline .select2-search__field {
height: 24px;
}

.send-btn[disabled]{
    background-color: #780087;
    opacity: 0.5;
    color: white;
}
.send-btn:hover{
    background-color: #780087;
    opacity: 0.8;
    color: white;
}
.close{
    background-color: inherit;
    border: 1px solid;
    border-radius: 8px;
    opacity: 0.3;
}

.sidebar{
    background: var(--basics-primary-600, #320990);
    box-shadow: -4px 4px 6px -1px rgba(16, 24, 40, 0.10), -4px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--white, #FFF);

    /* Heading4 */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    padding: 1rem;
    padding-right: 2rem;
    height: 100%;
    margin-left: 0;
}
.sidebar-title{
    color: var(--basics-primary-700, #1C6E65);
    font-family: IRANYekan;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.625rem; /* 150% */
}
.sidebar-item{
    /* display: flex;
    justify-content: flex-end;
    align-items: center; */
    gap: 0.75rem;
    color: var(--neutral-700, #6D6E6D);
    text-align: right;
    /* Heading / Desktop / H6 / Medium */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.625rem; /* 144.444% */
    margin: 1rem;
    border-radius: 1rem;
}

.sidebar-selected{
    border-radius: 1rem;
    background: var(--basics-primary-400-main, #15C1AE);

    /* Drop Shadow/Large */
    box-shadow: 0px 10px 15px -3px rgba(25, 76, 71, 0.10), 0px 4px 6px -4px rgba(25, 76, 71, 0.10);
    color: var(--generic-white, #FFF);
    text-align: right;

    /* Heading / Desktop / H6 / Medium */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.625rem; /* 144.444% */
    padding: 0.5rem;
}
.topbar{
    /* Paragraph / Overline / 12px / Medium */
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem; /* 183.333% */
    letter-spacing: 0.0075rem;
    padding: 1.5rem;
    margin: 0;
}


.buffering{
    border: 2px solid #EAFAF9; /* Light grey */
    border-top: 8px solid #15C1AE; /* yellow */
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    animation: spin 2s linear infinite;
    margin: auto;
    margin-bottom: 2rem;
 }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fa-sliders{
    color: #15C1AE;
    animation: reverse_spin 2s linear infinite;
    margin: 2rem;
}
@keyframes reverse_spin {
       0% { transform: rotate(360deg); }
       100% { transform: rotate(0deg); }
}
#detail-name-single, #detail-name-client, #detail-name-agent, #uploaded-single-name, #uploaded-client-name, #uploaded-agent-name, .user-mail{
    word-wrap: break-word;
}
.break-word{
    word-wrap: break-word;
}
.sidebar-footer{
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.20);
    /* box-shadow: -4px 4px 6px -1px rgba(16, 24, 40, 0.10), -4px 2px 4px -2px rgba(16, 24, 40, 0.10); */
    color: #FFF;
    text-align: right;
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem; /* 183.333% */
    letter-spacing: 0.0075rem;
    padding: 1rem;
    position: absolute;
    bottom: 0;
}
.modal-close{
    color: #6B7280;
    background-color: #E5E7EB;
    padding: 0.5rem;
}
.modal-ignore{
    border-radius: 0.375rem;
    border: 1px solid #ACADAC;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #6D6E6D;
    padding: 0.5rem;
}
.modal-delete{
    border-radius: 0.375rem;
    background: #EF4343;
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 0.5rem;
    border: none;
}
.modal-activate{
    border-radius: 0.375rem;
    background: #21C45D;
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);color: var(--generic-white, #FFF);
    text-align: center;
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 0.5rem;
    border: none;
}
.modal-inactivate{
    border-radius: 0.375rem;
    background: var(--semantic-error-400-main, #EF4343);
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 0.5rem;
    border: none;
}
.modal-create{
    border-radius: 0.375rem;
    background: #15C1AE;
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px -1px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 0.5rem;
    border: none;
}
/* .myModal{

} */
.myModal-title{
    color: var(--basics-primary-700, #1C6E65);
    text-align: right;

    /* Heading / Desktop / H5 / Bold */
    font-family: IRANYekan;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.8125rem; /* 138.095% */
}
.myModal-alert{
    padding: 0.5rem;
    margin: 0.75rem;
    text-align: right;

    /* Paragraph/Overline/14px/Regular */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    border-radius: 12px;
}
.myModal-alert.warning{
    color: #A07522;
    background-color: #fff8e0;
    border-color: #d7c26c;
}
.myModal-alert.danger{
    color: var(--semantic-error-900, #B8000C);
    background-color: #ffebee;
    border-color: #f04e4e;
}
.myModal-info{
    border-radius: 0.75rem;
    background: var(--neutral-100, #F6F7F6);
    padding: 0.5rem;
}
.myModal .title{
    color: var(--neutral-700, #6D6E6D);
    text-align: right;

    /* Paragraph/Overline/14px/Regular */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    padding: 0.5rem;
}
.myModal .detail{
    color: var(--neutral-900, #2B2C2B);
    text-align: right;

    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
    padding: 0.5rem;
}
.myModal .subdetail{
    color: var(--neutral-600, #828382);
    text-align: right;
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2px;
    margin-bottom: 1rem;
}
.informative-message{
    border-radius: 0.75rem;
    border: 1px solid #CACBCA;
    background: #FBFCFB;
    box-shadow: 0px 20px 25px -5px rgba(16, 24, 40, 0.10), 0px 8px 10px -6px rgba(16, 24, 40, 0.10);
    color: var(--neutral-900, #2B2C2B);
    text-align: right;
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.625rem; /* 185.714% */
    letter-spacing: 0.00875rem;
    padding: 0.5rem;
}
.informative-message.success{
    border-color: #21C45D;
    background: #E4F7E8;
    color: #006603;
}
.informative-message.info{
    border-color: #36BAFC;
    background: #E0F5FF;
    color: #1A5A9E;
}
.informative-message.warning{
    border-color: #EF4343;
    background: #FFEBEE;
    color: #B8000C;
}
.informative-message.inside-success{
    border-color: #21C45D;
    background: #E4F7E8;
    color: #006603;
}
.informative-message.inside-info{
    border-color: #36BAFC;
    background: #E0F5FF;
    color: #1A5A9E;
}
.informative-message.inside-warning{
    border-color: #EF4343;
    background: #FFEBEE;
    color: #B8000C;
}
.modal-header{
    border: none
}
.modal-footer{
    border: none
}
.modal-footer div>p{
    color: #36BAFC;
    text-align: center;
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.625rem; /* 185.714% */
    letter-spacing: 0.00875rem;
    padding: 0.25rem;
}

.row-filters{
    border-radius: 0.75rem;
    background: var(--generic-white, #FFF);

    /* Drop Shadow / Medium */
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    padding: 1rem;
    margin: 1rem;
}

.row-results{
    border-radius: 0.75rem;
    border: 1px solid var(--neutral-500, #ACADAC);
    background: var(--generic-white, #FFF);

    /* Drop Shadow/Small */
    box-shadow: 0px 1px 3px 0px rgba(25, 76, 71, 0.10), 0px 1px 2px -1px rgba(25, 76, 71, 0.10);
    padding: 0.5rem;
    color: var(--neutral-900, #2B2C2B);
    text-align: center;

    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
}
.row-results.light{
    border-radius: 0.75rem;
    border: 1px solid var(--neutral-300, #EBECEB);
    background: var(--generic-white, #FFF);
}
.row-results.stat_error{
    background: var(--Semantic-Error-100, #FFEBEE);
    border-color: #F09593;
    cursor: context-menu;
}

.row-item{
    border-radius: 0.75rem;
    background: var(--neutral-200, #F1F3F1);
    padding: 0.5rem;
    margin: 0.5rem;
    color: var(--neutral-700, #6D6E6D);
    text-align: center;

    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
}
.row-item.selected , .row-item.active{
    border-radius: 0.75rem;
    background: var(--basics-secondary-400-main, #6366F1);

    /* Drop Shadow / Medium */
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--basics-secondary-50, #EEF2FF);
    text-align: center;

    /* Paragraph / XLarge / Medium */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.875rem; /* 187.5% */
}
.row-item .counter{
    color: var(--neutral-800, #4E4E4E);
    text-align: center;

    /* Paragraph/Overline/12px/Regular */
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.375rem; /* 183.333% */
    border-radius: 3.125rem;
    background: var(--semantic-warning-400-main, #FC0);
    padding: 0.25rem;
}


.enableInputs{
    border-radius: 0.375rem;
    background: var(--semantic-success-400-main, #21C45D);/* Drop Shadow / Medium */
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;

    /* Paragraph / XLarge / Bold */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 1rem;
    cursor: pointer;
}
.disableInputs{
    border-radius: 0.375rem;
    background: var(--neutral-700, #6D6E6D);

    /* Drop Shadow / Medium */
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;

    /* Paragraph / XLarge / Medium */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.875rem; /* 187.5% */
    padding: 1rem;
    cursor: pointer;
}
.deleteInputs{
    border-radius: 0.375rem;
    background: var(--semantic-error-400-main, #EF4343);

    /* Drop Shadow / Medium */
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
    color: var(--generic-white, #FFF);
    text-align: center;

    /* Paragraph / XLarge / Bold */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 187.5% */
    padding: 1rem;
    cursor: pointer;
}

.user-logedin{
    border-radius: 6.25rem;
    /* background: var(--basics-primary-200, #93ECE2); */
    color: #0EAF9D;
    width: 2.5rem;
    height: 2.5rem;
    font-size:36px
}

.results-box{
    border-radius: 1rem;
    background: var(--generic-white, #FFF);

    /* Drop Shadow/Medium */
    box-shadow: 0px 4px 6px -1px rgba(25, 76, 71, 0.10), 0px 2px 4px -2px rgba(25, 76, 71, 0.10);
    padding: 1rem;
    margin: 1rem;
    color: #ACADAC
}

.results-box .users-row-title{
    color: var(--basics-primary-500, #3A0BA8);
    text-align: center;

    /* Heading / Desktop / H6 / Bold */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem; /* 144.444% */
    margin-top: 1rem;
    padding-top: 1rem;
}

.action-btn{
    border-radius: 0.5rem;
    text-align: center;

    /* Paragraph/Overline/14px/Medium */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.625rem; /* 185.714% */
    letter-spacing: 0.00875rem;
    padding: 4px;
    margin: 0 4px;
    cursor: pointer;
}
.action-btn.all-approve{
    background: var(--semantic-success-400-main, #21C45D);
    color: var(--generic-white, #FFF);
}
.action-btn.side-approve{
    background: var(--semantic-warning-500, #FFC300);
    color: #6D6E6D;
}
.action-btn.decline{
    background: var(--semantic-error-400-main, #EF4343);
    color: #FFFFFF;
}

.info-top{
    text-align: right;

    /* Paragraph/Overline/14px/Regular */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    padding: 1rem;
}
.info-top.warning{
    /* background-color: ; */
    color: #A07522;
}
.info-top.danger{
    /* background-color: ; */
    color: var(--semantic-error-900, #B8000C);
}

.modal-identity{
    border-radius: 0.75rem;
    background: var(--neutral-100, #F6F7F6);
    color: var(--neutral-900, #2B2C2B);
    text-align: center;

    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
    padding: 1rem;
}

.page-item{
    color: var(--neutral-800, #4E4E4E);
    text-align: center;

    /* Paragraph / XLarge / Light */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.875rem; /* 187.5% */
    border-radius: 0.75rem;
    background: var(--basics-primary-50, #EAFAF9);
    padding: 0.25rem;
    margin: 0.25rem;;
}
.page-item .page-link{
    background: inherit;
    color: inherit;
    border: none;
}
.page-item.active{
    font-weight: 500;
    color: var(--generic-white, #FFF);
    background: var(--basics-primary-400-main, #15C1AE);
}

#sideApprove-subject, #approve-subject{
    color: var(--basics-secondary-700, #4338CA);
    text-align: center;

    /* Heading / Desktop / H6 / Bold */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem; /* 144.444% */
    padding: 0.25rem;
}

.actionable{
    cursor: pointer;
}
.disapproved{
    border-radius: 6.25rem;border-radius: 6.25rem;
    background: var(--semantic-error-50, #FFEBEE);
    padding: 0.75rem;
}
.myModal .detail .fa-times{
    color: #EF4343;
}
.myModal .detail .fa-check-circle-o{
    color: #21C45D;
}
.undone-tasks{
    border-color: #21C45D;
    background: #E4F7E8;
    color: #006603;
}
.forcounter{
    color: #0a58ca;
}
.error{
    color: red;
    font-size: 0.75rem;
}
.restored-task{
    background-color: #ffae0060 ;
    border-radius: 0.5rem;
    font-size: 8px;
    display: inline-block;
    padding: 4px;
}

/* handmade tooltip */

.myTooltip{
    display: none; 
    position: absolute;
    right: -2rem;
    border-radius: 1rem;
    border: 1px solid var(--Neutral-300, #EBECEB);
    background: var(--Generic-White, #FFF);
    z-index: 9;
    cursor: default;

    /* Drop Shadow/XLarge */
    box-shadow: 0px 20px 25px -5px rgba(25, 76, 71, 0.10), 0px 8px 10px -6px rgba(25, 76, 71, 0.10);
    padding: 0.5rem;
    width: 25rem !important;
    /* z-index: 100; */
}
.myTooltip.name-tooltip{
    top: -5rem;
}
.myTooltip.time-tooltip{
    top: -7rem;
}
.myTooltip .title{
    color: var(--Basics-Secondary-600, #4338CA);
    text-align: center;

    /* Heading / Desktop / H6 / Bold */
    font-family: IRANYekan;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.625rem; /* 144.444% */
    padding: 0.5rem;
}
.myTooltip .date{
    color: var(--Neutral-600, #828382);
    text-align: right;

    /* Paragraph/Overline/14px/Regular */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    padding: 0.5rem;
}
.myTooltip .subtitle{
    color: var(--Neutral-700, #6D6E6D);
    text-align: right;

    /* Paragraph/Overline/14px/Regular */
    font-family: IRANYekan;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.00875rem;
    padding: 0.5rem;
}
.myTooltip .text{
    color: var(--Neutral-900, #2B2C2B);
    text-align: center;

    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
}


.table-time:hover .time-tooltip{
    display: block;
}
.table-name:hover .name-tooltip{
    display: block;
}
/* end of handmade tooltip */
.progress-bar{
    background-color: #15C1AE !important;
    color: #15C1AE !important;
}

.token-pagination .page-link{
    background: var(--generic-white, #FFF);
    font-weight: 500;
    /* color: var(--basics-primary-400-main, #15C1AE); */
    border-radius: 0.75rem;
}


.call_id_title{
    color: var(--basics-primary-500, #3A0BA8);
    text-align: right;
    /* Paragraph / XLarge / Regular */
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 187.5% */
}
.call_id{
    color: var(--neutral-600, #828382);
    text-align: right;
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;   
}



/* Callex page */
.callex-whole{
    margin-right: 10rem;
    margin-left: 10rem;
}
.callex-title{
    color: var(--basics-primary-700, #1C6E65);
    font-family: IRANYekan;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.625rem; /* 150% */
    margin: 1rem;
}
.callex-image-container {
    position: relative;
    display: inline-block; /* Allows the container to fit the image size */
    margin-bottom: 1rem;
    box-shadow: 0px 10px 15px -3px rgba(25, 76, 71, 0.10), 0px 4px 6px -4px rgba(25, 76, 71, 0.10);
}
.callex-image-container.mid::before {
    content: "";
    position: absolute;
    inset: 0; /* Covers the whole container */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1; /* Places the gradient overlay above the image */
    border-radius: 12px;
}
.callex-background-image {
    display: block; /* Removes the bottom space below the image */
    width: 100%; /* Adjusts the image to fit the container */
    height: auto; /* Maintains the aspect ratio */
    border-radius: 12px;
}
.callex-overlay-text {
    position: absolute;
    font-family: IRANYekan;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 1000;
    line-height: 1.75rem; /* 150% */
    text-align: right;
    top: 50%; /* Centers the text vertically */
    left: 50%; /* Centers the text horizontally */
    transform: translate(-50%, -50%); /* Offsets the text to truly center it */
    color: white; /* Text color */
    font-size: 24px; /* Adjust font size as needed */
    text-align: center; /* Centers text */
    padding: 10px; /* Optional: padding around the text */
    border-radius: 5px; /* Optional: rounded corners */
    width: 70rem;
    max-width: 100%; /* Prevent overflow */
    word-wrap: break-word; /* Wrap long words if necessary */
    z-index: 2; /* Ensures text appears above the gradient */
}
.callex-overlay-text.upper{
    top: 50%;
    left: 20%;
}
.callex-overlay-text.mid{
    text-align: right;
    top: 70%;
    left: 45%;
}
.callex-overlay-text.btm{
    text-align: right;
    top: 50%;
    left: 40%;
}
.callex-overlay-text .title{
    color: #3cddca;
    font-weight: 800;
    font-size: 22px;
}
.callex-overlay-text .subtitle{
    color: white;
    font-weight: 400;
    font-size: 14px;
}
.callex-overlay-text.mid::after , .callex-overlay-text.btm::after{
    background-color: #3cddca;
    content: "";
    position: absolute;
    top: 25%; /* Where the line starts */
    bottom: 20%; /* Where the line ends */
    right: -5px; /* Offset the line slightly from the text if desired */
    width: 3px; /* Thickness of the line */
}