@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Medium.ttf);
}
@font-face {
    font-family: IRANSansWeb;
    src: url(../fonts/IRANSansWeb.ttf);
}
@font-face {
    font-family: IRANYekan;
    src: url(../fonts/IRANYEKANREGULAR.ttf);
}

/* @font-face {
    font-family: 'Fontawesome6';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.ttf");
    src: url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.woff2") format("woff2"), url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.woff") format("woff"), url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.ttf") format("truetype"), url("../../FontAwesome.Pro-Web-6.4/webfonts/fa-regular-400.svg#fontawesome") format("svg"); 
} */

@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.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;
}

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;
}


.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;
}


.my-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh; /* Full viewport height */
    width: 220px; /* Adjust width as needed */
    background-color: #f8f9fa; /* Optional background color */
    padding-top: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto; /* Enables scrolling inside the sidebar if needed */
    z-index: 990; /* Ensures it stays on top */
}
.main-content {
    margin-right: 15rem; /* Adjust to match sidebar width */
}
.my-footer {
    position: relative;
    width: 100%;
    background-color: #23242a;
    color: white;
    text-align: center;
    z-index: 1000; /* Higher than sidebar */
}

.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-item{
    /* display: flex;
    justify-content: flex-end;
    align-items: center; */
    gap: 0.75rem;
    color: var(--basics-primary-50, #E9E3F7);
    text-align: right;

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

.sidebar-selected{
    border-radius: 0.375rem;
    background: var(--basics-primary-50, #E9E3F7);
    box-shadow: 0px 6px 12px 0px rgba(0, 79, 153, 0.15);
    color: var(--basics-primary-400-main, #500FE9);
    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;
}
.sidebar-footer {
    position: fixed;
    bottom: 0;
    right: 0; /* Ensure it aligns with the sidebar */
    width: 220px; /* Match sidebar width */
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.20);
    color: #FFF;
    text-align: right;
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.375rem;
    letter-spacing: 0.0075rem;
    padding: 1rem;
    margin-bottom: 2rem;
}

.topbar{
    background: #FFF;

    /* Drop Shadow / Large */
    box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.10), 0px 4px 6px -4px rgba(16, 24, 40, 0.10);
    color: var(--neutral-700, #6D6E6D);
    text-align: right;

    /* 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 #f3f3f3; /* Light grey */
    border-top: 8px solid #F5DE4D; /* yellow */
    border-radius: 50%;
    width: 6rem;
    height: 6rem;
    animation: spin 2s linear infinite;
    margin: auto;
    margin-bottom: 2rem;
 }
 .buffering-process{
    border-top: 8px solid #3A0BA8;
 }
 .buffering-queue{
    border-top: 8px solid #9A77EE;
 }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.fa-sliders{
    color: #EEB020;
    animation: reverse_spin 2s linear infinite;
    margin: 2rem;
}
.fa-sliders-process{
    color: #320990;
    animation: reverse_spin 2s linear infinite;
    margin: 2rem;
}
.fa-sliders-queue{
    color: #7642F0;
    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;
}
.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: #6D6E6D;
    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: #500FE9;
    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-title{
    color: #3A0BA8;
    text-align: right;
    font-family: IRANYekan;
    font-size: 1.3125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.8125rem; /* 138.095% */
}
.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;
}


.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;
}
.waveform{
    font-family: "Fontawesome6";
    font-weight: 400;
    content: "\f382";
}
.bigdrop {
    /* width: 20rem !important; */
    text-align: left;
    direction: ltr;
}
.select2-selection--single {
    height: 100% !important;
}
.select2-selection__rendered{
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}
.select2-selection__choice__display{
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}
.actionable{
    cursor: pointer;
}
.detail{
    font-family: IRANYekan;
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    text-align: right;
    color: #828382;
}

.qcform label{
    padding: 0.25rem 0.5rem;
    margin: 0.5rem;
}
.qcform select{
    padding: 0.5rem 2rem;
    margin: 0.5rem;
}
.account-field-class{
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 2rem;
    
}
.account-title-class{
    color: #250372;
    padding: 0.5rem;
    font-family: IRANYekan;
}
.account-btn-class{
    border-radius: 2rem;
    background-color: #18014B;
    color: white;
    padding: 0.75rem;
    margin: 0.5rem;
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.account-btn-class:hover, .account-btn-class:focus, .account-btn-class:active{
    background-color: #18014B;
    color: white;
}
.account-btn-class[disabled]{
    background-color: #9A77EE;
    color: white;
}
.email-field-class{
    text-align: left;
}
.account-login-signup-selection-class{
    margin: 1rem 15%;
    padding: 0;
    width: 70%;
    background-color: white;
    color: black;
    border: #6D6E6D 2px solid;
    border-radius: 2rem;
}
.account-login-signup-selection-class .col-sm-6{
    padding: 0.5rem;
}
.account-login-signup-selection-class .active{
    background-color: #CACBCA;
    border-radius: 2rem;
}
.account-logout-accept-btn, .account-logout-accept-btn:hover, .account-logout-accept-btn:focus{
    margin: 1rem;
    border-radius: 2rem;
    background-color: #EF4444;
    color: white
}
.account-logout-reject-btn, .account-logout-reject-btn:hover, .account-logout-reject-btn:focus{
    margin: 1rem;
    border-radius: 2rem;
    background-color: #22C55E;
    color: white
}
.account-logout-box{
    margin: 2rem;
    padding: 1rem;
}
.account-logout-box p{
    font-size: larger;
}

#rulesModal li{
    margin: 0.5rem;
    text-align: justify;
    line-height: 1.75rem;
}
#rulesModal .modal-ignore{
    color: #9A77EE;
    border: #9A77EE 1px solid;
}
.password-feedback {
    display: none; /* Hide initially */
    color: red;
}
.btn.modal-ignore.float-right, .btn.modal-ignore.float-left{
    border-radius: 2rem;
}
.btn.modal-ignore.float-right:hover, .btn.modal-ignore.float-right:focus, .btn.modal-ignore.float-left:hover, .btn.modal-ignore.float-left:focus{
    border-radius: 0.375rem;
    border: 1px solid ; /* #ACADAC */
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    /* color: black; */
    padding: 0.5rem;
    border-radius: 2rem;
}
.login-checkbox-class {
    margin-left: 1px;  /* Add space between checkbox and label */
}

label[for="id_remember"] {
    display: inline-block;
    margin-right: 2px;
}

.account-help-text {
    color: #6c757d; /* Grey color for help text */
    font-size: 0.875rem; /* Smaller font size */
}

.account-error {
    color: #dc3545; /* Red color for error messages */
    font-size: 0.875rem; /* Smaller font size */
}

.title-detail{
    font-family: IRANYekan;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.375rem; /* 183.333% */
    letter-spacing: 0.0075rem;
    margin-left: auto;
    margin-right: 2rem;
}


.logout-accept{
    border-color: #22C55E;
    color: #22C55E;
}
.logout-accept:hover, .logout-accept:focus{
    border-color: #22C55E;
    color: #00871B;
}
.logout-reject{
    border-color: #EF4444;
    color: #EF4444;
}
.logout-reject:hover, .logout-reject:focus{
    border-color: #EF4444;
    color: #C6011A;
}

.header-user-limit{
    display: inline;
    border: 1px grey solid;
    border-radius: 6px;
    margin: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);
}

.list_count{
    font-family: IRANYekan;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
}
.reprocess{
    margin-bottom: -1rem !important;
    padding: 0.5rem;
    color: #EEB022;
    cursor: pointer;
    background-color: #F6F7F6;
    border-radius: 8px;
}
.reprocess:hover,.reprocess:focus{
    box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.10);    
    color: #EEB022 !important;
    background-color: #F6F7F6 !important;
}
.fa-spin-reprocess {
    animation: spin 1s linear infinite;
}
.reprocess_in_table{
    /* padding: 0.5rem; */
    color: #EEB022;
    cursor: pointer;
    background-color: #F6F7F6;   
}