:root {
    --font_regular: 'Manrope-regular';
    --font_medium: 'Manrope-medium';
    --font_semibold: 'Manrope-semibold';
    --font_bold: 'Manrope-bold';
}

body {
    background-color: #F9F7F7;
}

.custom-container {
    padding: 0px 44px;
}

.cursor-pointer {
    cursor: pointer;
}

.hover-change {
    transition: all .1s ease-in;

    &:hover {
        filter: brightness(.5);
    }
}

/*Search and filter styles - Starts here*/
.search-group {
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, #f3f3f3, #E7E7E7) border-box;
    border: 1px solid #EEEEEE;

    .btn-search-custom {
        background: #fff;
        border-radius: 0;
        border: none;
        margin-top: -4px !important;
    }

    .form-control {
        border: none;
        border-radius: 0;
        width: 160px;

        &:focus {
            box-shadow: none;
        }
    }
}

::placeholder {
    color: #A6A6A6 !important;
}

.advanced-filter-button {
    padding: 9px 15px;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, #f3f3f3, #E7E7E7) border-box;
    border: 1px solid transparent;
    border-radius: 10px;
    line-height: 1;

    img {
        filter: invert(53%) sepia(58%) saturate(12%) hue-rotate(217deg) brightness(138%) contrast(92%);
    }
}

.custom-filter {
    width: 488px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, #f3f3f3, #E7E7E7) border-box;
    border: 1px solid transparent;
    box-shadow: 2px 2px 4px rgba(233, 233, 233, 0.2509803922);

    .form-select {
        --bs-form-select-bg-img: url(/select-down-arrow.svg);
        background-position: right .75rem center;
        background-size: 9px 14px;
    }
}
@media (max-width: 826px) { 
    .custom-filter{
        width: 350px;
    }
 }
@media (max-width: 575.98px) { 
    .custom-filter{
        width: 250px;
    }
 }

/*Search and filter styles - Ends here*/

/*Buttton styles - starts here*/
.primary-btn {
    font-family: var(--font_semibold);
    font-size: 14px;
    line-height: 20px;
    color: #FFF;
    border-radius: 10px;
    border: 0;
    background: #3A4459;
    padding: 10px 29px;

    &:hover {
        background-color: #06276e;
    }
}

.secondary-btn {
    font-family: var(--font_semibold);
    font-size: 14px;
    line-height: 20px;
    color: #121A27;
    background: transparent;
    border: none;
    padding: 10px 20px;

    &:hover {
        opacity: 0.8;
    }
}

/*Buttton styles - Ends here*/

/* Pagination Styles - Starts here */

.custom-page-item {
    position: relative;
    background: #ffffff;
    border-radius: 13px !important;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    border: 0;
    width: 32px;
    height: 32px;

    &:hover {
        background-color: #3A4459;
        color: #FFFFFF;

        img {
            filter: invert(100%) sepia(1%) saturate(7460%) hue-rotate(262deg) brightness(125%) contrast(117%);
        }
    }
}

.custom-page-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px !important;
    padding: 0.5px;
    /* Should match the padding of the parent */
    background: linear-gradient(180deg, #F3F3F3 0%, #E7E7E7 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.custom-page-item.active {
    background-color: #3A4459;
    color: #FFFFFF;

    img {
        filter: invert(100%) sepia(1%) saturate(7460%) hue-rotate(262deg) brightness(125%) contrast(117%);
    }
}
.custom-page-item.active::before{
    background: none;
}
.custom-page-item:hover::before{
    background: none;
}
.lh-0 {
    line-height: 0;
}

/* Pagination Styles - Ends here */

input[type=date]::-webkit-calendar-picker-indicator {
    background: url(/calendar-icon.svg) no-repeat;
    background-size: 16px;
}

.advanced-filter-button.show {
    border: 1px solid #856DBA;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    background: #ECE3FF;

    img {
        filter: none;
    }
}

.dashboard-container {
    position: relative;
    background: #ffffff;
    border-radius: 13px !important;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    border: 0;
}

.dashboard-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px !important;
    padding: 0.5px;
    /* Should match the padding of the parent */
    background: linear-gradient(180deg, #F3F3F3 0%, #E7E7E7 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.progress-batch {
    box-shadow: 0px 1px 3px 0px #A4A4A440;
    border-radius: 14px;
}

.progress-batch.progress-total {
    border: 1px solid #AA9ACD36;
    background-color: #AA9ACD0A;
}

.progress-batch.progress-start {
    border: 1px solid #E3B55E36;
    background-color: #F1C56F0A;
}

.progress-batch.progress-ongoing {
    border: 1px solid #89CEDD36;
    background-color: #B3ECEC0A;
}

.progress-batch.progress-completed {
    border: 1px solid #A8E25E36;
    background-color: #B5F16F0A;
}

.tooltip-inner {
    background-color: #3A4459;
    color: #FFFFFF;
    font-size: 12px;
    --bs-tooltip-opacity: 1;
    opacity: 1;
}

.tooltip-arrow::before {
    display: none;
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 145px;
    display: inline-block;
}

/* Popup styles starts here */

.custom-modal {
    position: relative;
    background: #ffffff;
    border-radius: 13px !important;
    box-shadow: 1px 2px 29px 0px #4D4D4D;
    border: 0;
}

.custom-modal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 13px !important;
    padding: 0.5px;
    background: linear-gradient(180deg, #F3F3F3 0%, #E7E7E7 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.custom-form {
    border: 0.75px solid #DCDCDC;
    border-radius: 8px;
    padding: 11px 16px;

    &::placeholder {
        color: #777777;
    }
}

.custom-form:disabled {
    background-color: #EAEAEA;
}

.form-check-input.form-checked {
    border: 0.75px solid #D7D7D7;

    &:checked {
        background-image: url("/radio-checked.svg");
        background-size: 8px 8px;
        border: 1px solid #2D3547 !important;
        background-color: #FFFFFF;
    }

    &:focus {
        box-shadow: none;
    }

    &:focus-visible {
        outline: unset;
    }
}

.custom-select {
    --bs-form-select-bg-img: url(/select-down-arrow.svg);
    background-position: right .75rem center;
    background-size: 10px 14px;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    border: 1px solid #EEEEEE;
}

.custom-textarea {
    border: 0.75px solid #DCDCDC;
    border-radius: 10px;
    resize: none;
    height: 132px;
}

.btn-red {
    border-radius: 10px;
    background-color: #FF6F6F;
    padding: 10px 26px;
    color: #FFFFFF;

    &:hover {
        background-color: #ff5252;
        color: #FFFFFF;
    }
}

.shadow-btn {
    border: 1px solid #E7E7E7;
    box-shadow: 1px 2px 5px 0px #F2F0F0;
    background-color: #FFFFFF;
    color: #777777;
    padding: 10px 26px;
    border-radius: 10px;

    &:hover {
        background-color: #E4E2E2;
        color: #777777;
    }
}

/* Popup styles ends here */

/* 404 page styles start here */

.error-page-container {
    background-image: url(/404-error.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 98vh;
    background-position: center;
}

/* 404 page styles end here */

.breadcrumb-link {
    &:hover {
        color: #06276e;
    }
}


/* Application */
.primary-btn.invoice-btn{
    position: relative;
    border: 1px solid transparent;
    z-index: 1;
    background: linear-gradient(white, white) padding-box, linear-gradient(to bottom, #F3F3F3 0%, #E7E7E7 100%) border-box;
    color: #000000;
}
.primary-btn.invoice-btn img{
    filter: invert(51%) sepia(0%) saturate(1173%) hue-rotate(207deg) brightness(91%) contrast(94%);
}
.primary-btn.invoice-btn:hover{
    font-family: var(--font_semibold);
    font-size: 14px;
    line-height: 20px;
    color: #FFF;
    border-radius: 10px;
    border: 0;
    background: #3A4459;
    padding: 10px 29px;
    border: 3px solid #BFC8D9 !important;
}
.primary-btn.invoice-btn:hover img{
   filter: invert(51%) sepia(0%) saturate(1173%) hue-rotate(240deg) brightness(215%) contrast(94%);
}
.finance-drpdown-menu li a:hover{
    color: #856DBA;
}
.finance-drpdown-menu{
    border: 1px solid #E2E2E2 !important;
    box-shadow: 1px 2px 5px #EDEDED;
}
.custom-dropdown-btn.dropdown-toggle::after {
    display: none;
}
.customer-bagde{
    background-color:#EDEDED;
    color: #212121;
    border-radius: 6px;
    padding: 5px 10px;
}
.customer-dropdown{
    border: 0.75px solid #DCDCDC;
    border-radius: 8px;
    padding: 11px;
}
.custom-checkbox .form-check-input{
    border-color: #A9A9A9;
}

.custom-checkbox .form-check-input:checked {
        background-color: #3A4459;
        border-color: #A9A9A9;
}

.customer-dropdown-menu{
    min-height: 140px;
    max-height: 140px;
    overflow-y: scroll;
}
.customer-dropdown-menu li:hover{
    background-color: #e6e6e6;
}
.customer-dropdown-menu::-webkit-scrollbar {
        height: 5px;
        width: 4px;
        background-color: unset;
        border-radius: 12px;
      }
    
.customer-dropdown-menu::-webkit-scrollbar-thumb {
        background-color: #9C9C9C;
        border-radius: 12px;
}
.required-color{
    color: #FF5858;
}
.primary-btn:disabled{
    background-color: #969AA3;
    color: #cbcdd1;
}
.reject-btn{
    background-color: #FFC5C5 !important;
}
.reject-btn:disabled{
   opacity: 0.5;
}
.tertiary-btn{
    padding: 8px 20px !important;
    box-shadow: 0px 0.5px 2px 0px #BBBBBB40;
    background-color: #f6f2ff;
    color: #121A27;
    border-radius: 10px;
    position: relative;
    border: 1px solid transparent;
    z-index: 1;
    background: linear-gradient(#ffffff, #F1EFEF) padding-box, linear-gradient(to bottom, #E4E4E5 0%, #C9C9C9 100%) border-box;
    color: #000000;
}
.pwd-icon{
    position: absolute;
    top: 10px;
    right: 35px;
}

.header-container{
    background-color: #fff;
    padding: 20px 25px;
}
.bg-white-article-popup{
    background-color: #FCFCFA;
}

/* new css start here */

/* activity popup css start here */
.activity-popup-container .activity-popup-content-section{
    border: 1px solid #E8E8E8 !important;
    border-radius: 8px;
  }
  .activity-popup-container .statue-acknowledged{
   padding: 1px;
   border-radius: 45px;
   background-color: #828EA1;
   display: inline-block;
   vertical-align: middle;
   margin-right: 15px !important;
  }  
  .activity-popup-container .content-container{
    overflow-y: auto;
    height:500px !important;
} 
.activity-popup-container .user-content-section{
    line-height: 20px;
}
  .activity-popup-container .view-worker{
    padding:10px;
    position: relative;
    color: #917FA0;
    background-color: #F3EFFF;
    border-radius: 100px;
    z-index: 1000;
  }
  .activity-popup-container .sub-view-worker{
    color: #959AAD;
    padding: 10px 11px;
    background-color: #E0F7FF;
  }
  .activity-popup-container .additional-view{
     padding:10px 6px;
     border-radius: 100px;
     border: 1px solid #2D3547;
  }
.content-container{
    position: relative;
}
.content-container:after{
    width: 0.5px;
    height: 615px;
    background-color: #C9CFDB;
    position: absolute;
    content: "";
    top: 80px;
    left: 44px;
 
}
  .activity-popup-container .form-container{
    width: 85%;
  }
  /* activity popup css end here */

  /* custom info dashboard user css start here */
  .dashboard-sdi .dashboard-content-container{
    overflow-y: auto;
    height: 560px !important;
    padding-right: 12px !important;
  }

  .dashboard-sdi .priority-mark{
    border-radius: 2px !important;
  }
.dashboard-sdi .custom-dashboard-border{
    border-bottom: 1px solid #E8E8E8 !important;
  }
    /* custom info dashboard user css end here  */

    /* new css end here */