body {
    font-family: 'Lato', sans-serif;
}
/* browser scrollbar */
/* browser scrollbar */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color when hovered */
}

/* For Firefox */
html {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}
/* browser scrollbar ends */
/* table scrollbar */
table {
    overflow: auto;
}
table::-webkit-scrollbar {
    width: 8px!important;
    height: 8px!important;
}
table::-webkit-scrollbar-thumb {
    background-color: #888!important;
    border-radius: 10px!important;
}
table::-webkit-scrollbar-track {
    background: #f1f1f1!important;
}
table {
    scrollbar-width: thin!important;
    scrollbar-color: #888 #f1f1f1!important;
}
/* table scrollbar ends */
.icon{
    vertical-align: 0!important;
}
.va-middle{
    vertical-align: middle!important;
}
.ls-1{
    letter-spacing: 1px;
}
.ls-5{
    letter-spacing: 5px;
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--cui-dropdown-link-active-color);
    text-decoration: none;
    background-color: var(--cui-dropdown-link-active-bg);
}

.header > .container-fluid, .header > .container-sm, .header > .container-md, .header > .container-lg, .header > .container-xl, .header > .container-xxl, .sidebar-header{
    min-height: auto!important;
}
.table_header{
    background-color: #D0DFEC!important;
    padding: 0.3rem 0.3rem!important;
}
thead, tbody, tfoot, tr, td, th{
    border-style: revert-layer!important;
    border-width:1px!important;
}
.form-switch {
    padding-left: 3.5em!important;
}
.text-danger{
    color: #ff0000!important;
}
.mb-0{
    margin-bottom: 0px!important;
}
.lh-2{
    line-height: 2rem!important;
}
/****************** pagination css *******************/
/* hides big > and < from pagination */
.w-5{
    display: none;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    --cui-pagination-font-size: 12px!important;
    /*--cui-pagination-border-radius: 0!important;*/
}
.active>.page-link, .page-link.active,.page-link.active:hover,.tg-btn{
    color: #fff!important;
    /*background-color: #a09ee8!important;
    border-color: #a09ee8!important;*/
    background-color: #059c7b !important;
    border-color: #059c7b !important;
}
.page-link{
    color:#9797a5;
}
/****************** pagination css ends *******************/
.fs-8{
    font-size: 8px!important;
}
.fs-9{
    font-size: 9px!important;
}
.fs-10{
    font-size: 10px!important;
}
.fs-11{
    font-size: 11px!important;
}
.fs-12{
    font-size: 12px!important;
}
.fs-13{
    font-size: 13px!important;
}
.fs-14{
    font-size: 14px!important;
}
.fs-16{
    font-size: 16px!important;
}
.fs-18{
    font-size: 18px!important;
}
.fs-20{
    font-size: 20px!important;
}
.fs-36{
    font-size: 36px!important;
}
.font-600{
    font-weight: 600!important;
}

.no-radius{
    border-radius: 0!important;
}
.radius-4{
    border-radius: 4px!important;
}
.radius-5{
    border-radius: 5px!important;
}
.dropdownbtn{
    --cui-btn-bg:#78bbff!important;
}
.drp-dwn{
    --cui-dropdown-min-width:7rem!important;
    --cui-dropdown-padding-y:0!important;
    --cui-dropdown-divider-margin-y:0!important;
}
.drp{
    padding: 0!important;
}
.dropdown_li{
    width: 100%;
    text-align: left;
}
.dropdown-item:hover, .dropdown-item:focus{
    background-color: inherit!important;
}
.btn-success {
    --cui-btn-color: #080a0c;
    --cui-btn-bg: #1bdbe0;
    --cui-btn-border-color: #1bdbe0;
    --cui-btn-hover-color: #080a0c;
    --cui-btn-hover-bg: #1bdbe0;
    --cui-btn-hover-border-color: #1bdbe0;
    --cui-btn-focus-shadow-rgb: 24, 136, 55;
    --cui-btn-active-color: #080a0c;
    --cui-btn-active-bg: #1bdbe0;
    --cui-btn-active-border-color: #1bdbe0;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #080a0c;
    --cui-btn-disabled-bg: #1bdbe0;
    --cui-btn-disabled-border-color: #1bdbe0;
}
.btn-info {
    --cui-btn-color: #080a0c;
    --cui-btn-bg: #78bbff;
    --cui-btn-border-color: #78bbff;
    --cui-btn-hover-color: #080a0c;
    --cui-btn-hover-bg: #78bbff;
    --cui-btn-hover-border-color: #78bbff;
    --cui-btn-focus-shadow-rgb: 45, 132, 219;
    --cui-btn-active-color: #080a0c;
    --cui-btn-active-bg: #78bbff;
    --cui-btn-active-border-color: #78bbff;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #080a0c;
    --cui-btn-disabled-bg: #78bbff;
    --cui-btn-disabled-border-color: #78bbff;
}

.sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * {
    --cui-sidebar-occupy-start: 14rem!important;
}
.sidebar{
    --cui-sidebar-width: 14rem!important;
    background-color: #0c2757!important;
}
.sidebar-width{
    width: 230px!important;
}
.userpic{
    background-color: azure;
    border: 2px solid #caffff;
}
.hr_cls{
    color:#08eeee;
}
.pos_rel{
    position: relative!important;
}
.ava_st{
    height: 1.0rem!important;
    width: 3rem!important;
}
.user_clr1{
    background-color: #FF9AA2!important;
}
.user_clr1_light{
    background-color: #ffc5c9!important;
}
.user_clr2{
    background-color: #FFB7B2!important;
}
.user_clr2_light{
    background-color: #fcdbd8!important;
}
.user_clr3{
    background-color: #FFDAC1!important;
}
.user_clr3_light{
    background-color: #ffeee2!important;
}
.user_clr4{
    background-color: #E2F0CB!important;
}
.user_clr4_light{
    background-color: #f6ffe7!important;
}
.user_clr5{
    background-color: #B5EAD7!important;
}
.user_clr5_light{
    background-color: #c9ffec!important;
}
.user_clr6{
    background-color: #C7CEEA!important;
}
.user_clr6_light{
    background-color: #d9e0fa!important;
}
.user_clr7{
    background-color:#e2c1e8!important;
}
.user_clr7_light{
    background-color:#f2d4f8!important;
}
.user_clr8{
    background-color:#bbe2ff!important;
}
.user_clr8_light{
    background-color:#d5edff!important;
}
.user_clr9{
    background-color:#bbcbf2!important;
}
.user_clr9_light{
    background-color:#dbe5ff!important;
}
.user_clr10{
    background-color:#fef0b2!important;
}
.user_clr10_light{
    background-color:#fffae6!important;
}
.user_clr11{
    background-color: #9cd0f4 !important;
}
.user_clr11_light{
    background-color: #b8e1fd !important;
}
.userdet_card{
    --cui-card-spacer-y:0!important;
    --cui-card-spacer-x:0!important;
    --cui-card-border-color:none!important;
}

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
#sortable li { 
    margin: 5px 5px 5px 0; 
    padding: 5px; 
    font-size: 1.2em; 
    height: 2.5em; 
}
.position { 
    display: inline-block; 
    width: 20px; 
}
/* Custom styles for Select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    text-transform: capitalize!important; /* Capitalize first letter of each word */
    font-size: 12px!important; /* Set your desired font size */
}

.select2-container--default .select2-results__option {
    text-transform: capitalize!important; /* Capitalize first letter of each word */
    font-size: 12px!important; /* Set your desired font size */
}
.select2-selection__rendered, .select2-results__option {
    font-family: 'FontAwesome', 'Arial', sans-serif !important;
    text-transform: capitalize!important; 
    font-size: 12px!important;
}
.move-cursor{
    cursor: move;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
    /*border: 1px solid #00a8ff!important;
    background: #ace3ff!important;*/
    /*border: 1px solid #1bdbe0 !important;
    background: #70fbff63 !important;*/
    /*border: 1px solid #b3f5bc!important;
    background:#d9f6e6 !important;     */
    border: 1px solid #b1d0ff !important;
    background: #cfe2ff !important;                          
}
/*#menuPublished{
    background-color:#1bdbe0!important;
    border-color: #1bdbe0!important;
}*/
#sortable li{
    padding: 6px!important;
}
.tg-badge{
    background-color: #059c7b!important;
}
.menu-card-header,.add_menu_btn, .total_div, .details_bg{
    /*background-color: #0C2757!important;*/
    background-color: #103577 !important;
}
.select2-container{
    width: 160px!important;
}
.flex_nowrap{
    flex-wrap: nowrap!important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 32px!important;
}
.select2-container .select2-selection--single{
    height: 31px!important;
}
.select2-dropdown--below,.select2-dropdown--above{
    width: 222%!important;
}
.newswitch{
    height: 12px!important;
    width: 21px!important;
}
.mh-0{
    min-height: 0!important;
}
.expandable-row {
    display: none;
}
.expandable-row.show {
    display: table-row;
}
.expand-button,.cursor-pointer {
    cursor: pointer;
}
.default-cursor{
    cursor:default;
}
.rdo-align{
    display: table-header-group!important;
}
.lp-badge{
    background-color: #a09ef9!important;
}
.w-60{
    width: 60%!important;
}
.w-85{
    width: 85%!important;
}
#sortable_submenu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60%;
}
#sortable_submenu li{
    padding: 6px !important;
    margin: 5px 5px 5px 0;
    padding: 5px;
    font-size: 1.2em;
    height: 2.5em;
}
.lavendar_td,.lavendar_bg{
    background-color: lavender!important;
}
.menulbl_clr{
    color: #7129e8;
}
.submenu_menu_clr{    
    background-color: lightsteelblue!important;
    vertical-align: middle;
}
.table{
    --cui-body-bg:none!important;
}
.chkbox_border{    
    border: 2px solid #8a9eb7 !important;
}
.chkbox_border:checked{
    background-color: #8a9eb7 !important;
}
.no_cursor{
    cursor: not-allowed;
}
.center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 11px; /* Adjust the padding as needed */
}

.border-wrapper {
    display: inline-block;
}

.border-wrapper img,.border-wrapper-cp {
    display: block;
    border: 5px solid #8484fe; /* Third border color */
    box-shadow: 
        0 0 0 5px #fdd132, /* Second border color */
        0 0 0 10px #11dbe0;  /* First border color */
    max-width: 100%; /* Ensure the image scales properly */
    height: auto;
}


.center-content p,.border-wrapper-cp {
    margin-top: 10px; /* Adjust the spacing as needed */
    font-size: 1.5em; /* Adjust the font size as needed */    
}
.color-grey{
    color: #565f6a!important; /* Adjust the text color as needed */
}
.alert{
    padding: 1%!important;
}
.btn-close{
    padding: 1.5%!important;
    font-size: 8px!important;
}
.p-1p{
    padding: 1%;
}
.p-2{
    padding: 2%!important;
}
.p-3{
    padding: 3%!important;
}
.custom-img {
    width: 100%; /* Adjust the width as needed */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure it doesn't exceed the container */
}
.centerimg{
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bg-gradiant{
    /*background: -webkit-linear-gradient(90deg, hsla(276, 91%, 79%, 1) 0%, hsla(254, 74%, 65%, 1) 100%)!important;*/
    background-color: #0C2757!important;
}
.blue-border-bottom{
    border-bottom: 1px solid #0c2757 !important;
}
.blue-border-top{
    border-top: 1px solid #0c2757 !important;
}
.blue-badge{
    background-color: #0C2757!important;
}

.light-purple{
    background-color: #aaaaf8 !important;
}
.td_border{
    border: 1px solid !important;
    border-color: #bebee6 !important;
}
.td_pad{
    padding-top: 5px!important;
    padding-bottom: 5px!important;
    padding-left: 15px!important;
    padding-right: 0px!important;
}
.bg-teal-green{
    background-color: #059C7B!important;
    border: #059C7B;
}
.teal-green{
    color: #059C7B;
}
.text-justify{
    text-align: justify;
}
.btn-link{
    color: #565f6a!important;
}
.text-dark{
    color: #000!important;
}
.input-border{
    border: 1px solid #059C7B;
}
.blue-border{
    border: 2px solid #0c2757;
}
.login-input-radius{
    border-top-right-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
}
.sidebar-nav .nav-link:hover,.sidebar-nav .nav-link.active{
    background: #059C7B!important;
}
.dash-card-radius{
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
}
.primary-card-text{
    color: #343399!important;
}
.tealgreen-card-text{
    color: #226657!important;
}
.darkblue-card{
    background-color: #2b4a81 !important;
    border-color:#2b4a81 !important;
}
.powderblue-header{
    background-color: powderblue;
}
.info-card-text{
    color: #095aaa !important
}
.warning-card-text{
    color: #b3831a !important
}
.dark-header{
    background-color: #1f2429!important;
}
.card-info{
    background-color: #348ee3;
    border: 1px solid #348ee3;
}
.card-warning{
    background-color: #f59e1b;
    border: 1px solid #f59e1b;
}
.card-lime{
    background-color: #90c94b;
    border: 1px solid #90c94b;
}
.lime-color{
    color: #668f34;
}
.session_project_select{    
    border: 2px solid;
}
.bg-primary-border{
    border-color: #5856d6!important;
}
.bg-secondary-border{
    border-color: #6b7785!important;
}
.top-header{
    background-color: ghostwhite;
}
.ghost-border{
    /*border-color: ghostwhite!important;*/
    border-color: lavender!important;
}
.ghost-border::after{
    margin-left: 1.255em!important;
}
.footer{
    background-color: #000000!important;
    border-top:0px!important;
}
.text-blue{
    color: #0C2757!important;
}
.text-skyblue{
    color: #78bbff;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate-icon {
    display: inline-block;
    animation: rotate 2s linear infinite; /* Rotate continuously every 2 seconds */
}

.toast-header {
    position: relative;
  }
  
/*  .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }*/
.progress {
    width: 100%;
    margin-top: -5px; /* Adjust if needed to align properly */
    height: 8px;
    --cui-progress-border-radius:0!important;
}
.progress-bar{
    background-color: #059273!important;
    transition: width 30s linear!important;
}
.loader {
    position: fixed;
    /*left: 48%; */
    left: auto;
    top: 2%;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #059c7b;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }
  .form_loader {
    position: fixed;
    left: 51%;
    /* left: auto; */
    top: 29%;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #212631;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }

  .form_loader2 {
    position: fixed;
    left: 57%;
    /* left: auto; */
    top: 22%;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #212631;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }
  .form_loader2_user {
    position: fixed;
    left: 48%;
    /* left: auto; */
    top: 28%;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #212631;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }
  .loader1 {
    position: fixed;
    /*left: 48%; */
    left: auto;
    top: 2%;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    border-radius: 50%;
    border-top: 3px solid #059c7b;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }
  .model_loader{
    position: relative;
    left: 47%;
    /* left: auto; */
    top: 65%;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    border-top: 3px solid #080a0c;
    animation: spin 1s linear infinite;
    z-index: 1051;
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .home-bg{
    /*background: url('/images/backgrounds/bg-8.png') no-repeat center center fixed;*/
    background: url('/images/backgrounds/bg-9.png') no-repeat center center fixed;
    background-size: cover;
  }
  .accordion-button,.accordion-button:not(.collapsed),.badge-button{
    background-color: #cfe2ff!important;
    color: #3634a3!important;
  }
  .user_breadcrumbs{
    background-color: #cfe2ff !important;
    color: #3634a3 !important;
    border: 1px solid #8eb7f6 !important;
    border-radius: 5px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  }
  .card-box{
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px 0px, rgba(0, 0, 0, 0.06) 0px 0px 6px 0px;
    height: 95px;
    width: 150px;
  }
  .box-shadow{
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3)!important;
  }
  .accordion{
    --cui-accordion-border-color: #cfe2ff!important;
  }
  .accordion-button:focus{
    box-shadow: none!important;
  }
  #loader-wrapper {
    position: fixed;
    /*top: -25px;*/
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black transparent background */
    z-index: 9998; /* Ensure it is behind the loader */
    
}
  .middle_loader {
    border: 5px solid #ffffff;
    border-top: 5px solid #059c7b;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    animation: spin 2s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

/* Animation for the loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.transparent-bg {
    /*background-color: rgba(0, 0, 0, 0.5); /* Black transparent background */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.transparent-bg-purple{
    background-color: rgb(110 108 214 / 78%);
}
.transparent-bg-blue{
    background-color: rgb(80 160 235);
}
.transparent-bg-pgreen{
    background-color: rgb(173 215 123 / 73%);
}
.transparent-bg-tg{
    background-color: #2c8d78;
}
.transparent-bg-dblue{
    background-color: rgb(66 96 151 / 82%);
}
.transparent-bg-grey{
    background-color: rgb(90 102 116 / 88%);
}
.transparent-bg-orange{
    background-color: rgb(209 145 49 / 93%);
}
.content {
    position: relative;
    z-index: 2;
    padding: 10px 0; /* Adjust padding as needed */
    color: #fff;
    top: -10px;
}
.add_btn{
    /*background-color: #0c2757!important;
    border-color: #0c2757!important;*/
    background-color: #103577 !important;
    border-color: #103577 !important;
}
.transparent-bg-black{
    background-color: rgba(0, 0, 0, 0.5);
}
.white-bg{
    background-color: #fff!important;
}
.ml-12px{
    margin-left: 12px!important;
}
.ml-1{
    margin-left: 1%!important;
}
.ml-14px{
    margin-left: 14px!important;
}
.ml-35px{
    margin-left: 35px!important;
}
.ghost-border::after{
    vertical-align: middle!important;
}
.border-none{
    border:none!important;
}
.breadcrumb-item > a{
    text-decoration: none!important;
    color: #000!important;
}
.accordion-button::after{
    width: 15px!important;
    height: 15px!important;
    --cui-accordion-btn-icon-width: 0.9rem!important;
    --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230c2757' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked {
    background-color: #009f79;
    border-color: #059c7a;
}
/* Target the select2 container for the select element with id project_tester */
#project_tester + .select2-container--default .select2-selection--single {
    width: 296px !important; /* Adjust the width as needed */
}
/* Ensure the dropdown itself also respects the width */
#project_tester + .select2-container--default .select2-dropdown {
    width: 296px !important; /* Adjust the width as needed */
}
#project_tester + .select2-container--default .select2-selection--single .select2-selection__arrow b{
    margin-left: 125px!important;
    margin-top: 0px!important;
}
#project_tester + .select2-container--default .select2-selection--single .select2-selection__rendered span{
    text-transform: lowercase!important;
}
#project_developers + .select2-container--default .select2-selection--single {
    width: 296px !important; /* Adjust the width as needed */
}
#project_developers + .select2-container--default .select2-dropdown,.select2-dropdown--below, .select2-dropdown--above,.select2-container--default .select2-selection--multiple {
    width: 296px !important; /* Adjust the width as needed */
}
#project_developers + .select2-container--default .select2-selection--single .select2-selection__arrow b{
    margin-left: 125px!important;
    margin-top: 0px!important;
}

#edit_project_developers + .select2-container--default .select2-selection--single {
    width: 296px !important; /* Adjust the width as needed */
}
#edit_project_developers + .select2-container--default .select2-dropdown,.select2-dropdown--below, .select2-dropdown--above,.select2-container--default .select2-selection--multiple {
    width: 296px !important; /* Adjust the width as needed */
}
#edit_project_developers + .select2-container--default .select2-selection--single .select2-selection__arrow b{
    margin-left: 125px!important;
    margin-top: 0px!important;
}
.green_td{
    background-color: #b6d8d0!important;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-top-left-radius: 5px!important;
    border-top-right-radius: 5px!important;
    border-bottom-left-radius: 5px!important;
    border-bottom-right-radius: 5px!important;
    width: 185%;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    padding: 1px 4px!important;
    color: #fff!important;
    background-color: #0c2757!important;
    border: 1px solid #0c2757!important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: #0c2757!important;
    border: 1px solid #0c2757!important;
    color: #fff!important;
    padding: 2px!important;
    padding-left: 20px!important;
    font-size: 12px!important;
}
#project_developers + .select2-container .select2-selection--multiple .select2-selection__rendered,#project_testers + .select2-container .select2-selection--multiple .select2-selection__rendered{
    font-family: 'Lato'!important;
}

#edit_project_developers + .select2-container .select2-selection--multiple .select2-selection__rendered,#edit_project_testers + .select2-container .select2-selection--multiple .select2-selection__rendered{
    font-family: 'Lato'!important;
}
.assigntbl td{
    padding: 2px 0px 4px 15px!important;
}
.font-500{
    font-weight: 500!important;
}
.alert-pad{
    padding: 2%!important;
}
.display-none{
    display: none!important;
}
.display-block{
    display: block!important;
}
/*.spinner_loader{
    display: none; 
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 20%;
}
.spinner {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.spinner_loader p {
    font-size: 10px;
    color: #333;
    margin-top: 20px;
}*/
/* Loader container */
.display-flex{
    display: flex!important;
}


/* Spinner */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0c2757;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader text */
.spinner_loader p {
    font-size: 12px;
    color: #0c2757;
    /*margin-left: 5px;
    font-weight: 600;*/
}
.display-inline{
    display: inline!important;
}
.access-spinner{
    height: 15px!important;
    width: 15px!important;
    border-width: 3px!important;
}
.mt-3p{
    margin-top: 3px;
}
.mt-5p{
    margin-top: 5px;
}
.m-5px{
    margin:5px;
}
.line_seperator{
    background-color: #0c2757!important;
    display: inline-block;
    align-self: stretch;
    width: var(--cui-border-width);
    min-height: 1.8em;
    padding: 0;
    opacity: 0.25!important;
}
.gif-loader-overlay {
    position: fixed;
    
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: 9999; /* Ensure it's on top of other elements */
    
}
.gif_loader{
    position: fixed;
    top: 35%;
    left: 50%;
    z-index: 9999;
}
.gif_loader img {
    width: 100px; /* Adjust the size as needed */
    height: 100px; /* Adjust the size as needed */
}
.page-link{
    position: static!important;
}
.notification_dot{
    font-size: 5px;
    position: absolute;
    top: 18%;
    /*left: 62%;*/
    color: #ff3c3c;
    animation: blink 0.5s infinite alternate;
}@keyframes blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Ensure the parent container doesn't interfere */
.notification_dot,.notification_dot_user {
    display: inline-block; /* Add this */
}
/*.notification_dot_user {
    font-size: 5px;
    position: absolute;
    top: 18%;
    left: 70%;
    color: #ff3c3c;
    animation: blink 0.5s infinite alternate;
}*/
.skyblue-badge{
    background-color: #348ee3!important;
    border-radius: 4px!important;
}
.light-blue-bg{
    background-color: rgb(207, 226, 255) !important;
    color: #348ee3;
}
/* ------------------------------------view all notification css---------------------- */
/* Initially hide notifications after the 4th one */
.hidden-notification {
    display: none;
}
/* Style for the "View all notifications" link */
.view-all-notifications {
    border-top: 1px solid #e0e0e0;
    background-color: #dadada;
}
.toggle-notifications {
    text-decoration: none;
    color: #007bff;
    font-weight: 500;
}
.toggle-notifications:hover {
    text-decoration: underline;
}
/* Arrow animation */
.animated-arrow {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}
.toggle-notifications:hover .animated-arrow {
    transform: translateY(3px); /* Downward animation on hover */
}
.top-radius{
    border-top-left-radius: 4px!important;
    border-top-right-radius: 4px!important;
}
.double-tick {
    color:#3aacf2; /* WhatsApp green color */
    font-size: 12px;
    margin-left: 10px;
}
.double-tick i {
    margin-left: -9px; /* Overlap ticks slightly */
}
.green-tick{
    color: #3abe3a !important;
}
.grey-tick{
    color: #a7a7a7!important;
}
.w-55{
    width: 55%!important;
}
.notify-data {
    position: relative;
    /*min-height: 100px;*/ /* or whatever height you need */
}

.div_loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.notify_dot{
    position: relative;
    display: inline-block;
}
.proj_notify_badge{
    position: absolute;
    /*top: -23px;
    right: -3px;*/
    top: -19px;
    right: 3px;
    background-color: red;
    color: white;
    border-radius: 50%;
    /*width: 14px;
    height: 14px;*/
    width: 7px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
}
.proj_notify_badge_users{
    position: absolute;
    top: -2px;
    right: 0px;
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5px;
    font-weight: bold;
}

/*.loaderDiv{
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #3498db; 
    animation: spin 1s linear infinite;
}
.loader-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}*/
.loader-container,.defect-loader-container {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}
/*.loader-container-chart{
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex; 
    justify-content: center!important; 
    align-items: center!important; 
}*/
#myProjectChart {
    max-width: 100%;
    max-height: 400px; 
    width: 100%;
    position: relative;
    /*z-index: 1;*/ 
}
/*#myProjectChart {
    width: 100% !important;
    height: 400px !important; 
    max-height: 400px;
}*/
.loader-container-chart {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10; 
    display: flex;
    justify-content: center;
    align-items: center;
}


.canvas-container {
    position: relative;
    width: 100%;
    height: 400px; 
    overflow: visible; 
}
/*.canvas-container {
    position: relative;
    width: 100%;
    height: 450px; /* Increased height to accommodate title */
    overflow: visible; /* Prevent title clipping */
}



.loader-container-chart {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/
.loaderDiv{
    position: fixed;
    top: 53%;
    left: 33%;
    z-index: 9999;
}
.loaderDiv_no_data{
    position: fixed;
    top: 23%;
    left: 33%;
    z-index: 9999;
}
.loaderDiv_user{
    position: fixed;
    top: 60%;
    left: 21%;
    z-index: 9999;
}
.loaderDiv_user_no_data{
    position: fixed;
    top: 30%;
    left: 21%;
    z-index: 9999;
}
.loaderDiv_defects_user_data{
    position: fixed;
    top: 30%;
    left: 68%;
    z-index: 9999;
}
.loaderDiv_defects_no_data{
    position: fixed;
    top: 23%;
    left: 33%;
    z-index: 9999;
}
.loaderDefectDiv{
    position: fixed;
    top: 53%;
    left: 33%;
    z-index: 9999;
}
.loaderDiv img,.loaderDiv_user img,.loaderDiv_user_no_data img,.loaderDiv_no_data img, .loaderDiv_defects_data img, .loaderDiv_defects_no_data img, .loaderDiv_user_def img, .loaderDefectDiv img, .loaderDiv_defects_user_data img{
    width: 50px; /* Adjust the size as needed */
    height: 50px; 
}
.loaderDiv_user_def{
    position: fixed;
    top: 60%;
    left: 67%;
    z-index: 9999;
}
.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 55%); /* Transparent black overlay */
    z-index: 1000; /* Ensures it sits above modal content */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

.loader-content {
    text-align: center;
}
.load-border{
    --cui-spinner-width: 1rem;
    --cui-spinner-height: 1rem;
    --cui-spinner-border-width: 0.20em;
}
.border-right-radius{
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.list-style-none{
    list-style: none!important;
}
.me-6 {
    margin-right: 6rem !important;
}
.box-border{
    border: 2px solid #0c2757;
    border-radius: 5px;
}
.tr_danger_cls{
    background-color:#ddf5ff;
}
.rotate-270{
    rotate: 270deg;
}
.paper-clip{
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: 20px;
    color: #ffc108;
    transform: rotate(315deg);
    z-index: 1;
}
.clip-cls{
    color:#004ebb;
}
.red-badge,.red-badge:hover{
    background-color: #DC2626;
}
.orange-badge,.orange-badge:hover{
    background-color: #F59E0B;
}
.green-badge,.green-badge:hover{
    background-color: #16A34A;
}
.darkgrey,.darkgrey:hover{
    background-color: #4f5459;
}
.light-red-badge{
    background-color: #f38787;
}
.light-orange-badge{
    background-color: #fbbe7e;
}
.light-green-badge{
    background-color: #70be8d;
}
.light-red-badge:hover{
    background-color: #DC2626;
}
.horn-red{
    color: #DC2626;
}
.light-orange-badge:hover{
    background-color: #F59E0B;
}
.light-green-badge:hover{
    background-color: #16A34A;
}
.allstatus,.allstatus:hover{
    background-color: #37a9fb;
}
.light-new-badge{
    background-color: #a5bdf7;
}
.light-attempt-badge{
    background-color: #94ade8;
}
.light-close-badge{
    background-color: #82cbff;
}
.light-new-badge:hover,.new-badge,.new-badge:hover{
    background-color: #3764cf;
}
.light-attempt-badge:hover,.attempt-badge,.attempt-badge:hover{
    background-color: #4b7bec;
}
.light-close-badge:hover,.close-badge,.close-badge:hover{
    background-color: #60bbfc;
}
.dotted-underline {
    border-bottom: 1px dotted #0c2757; /* Dotted underline */
    padding-bottom: 0px; /* Space between text and underline */
    text-decoration: none; /* Remove default underline */
    display: inline-block; /* Ensure padding works correctly */
}
.mod_name{
    padding: 2% 5% 2% 5%;
    background-color: #004ebb;
}
.orange-bg{
    background-color: #f59e1b;
}
.info-bg{
    background-color: #348ee3;
}
.dashed-border-right{
    border-right: 1px dashed lightgray;
}
.dashed-border-top{
    border-top: 1px dashed lightgray;
}
.dashed-border-bottom{
    /*border-bottom: 1px dashed lightgray;*/
    border-bottom: 1px dashed #979595;
}
/*.custom-list-item {
    margin-bottom: 0.25rem; 
}*/
.custom-list-item {
    border: 1px solid #dee2e6; 
    border-radius: 0.375rem; 
    margin-bottom: 1rem; 
    padding: 0.5rem 1rem; 
}
.custom-list-item:last-child {
    margin-bottom: 0; /* Remove margin from the last item to avoid extra space at the end */
}
.card-border{
    border: 1px dashed #3fa5ff;
}
.card_footer{
    background-color: #d0e9ff;
    color: #3fa5ff;
    border: 1px solid #3fa5ff;
}
.horn-red {
    animation: blink 1s infinite;
}
.pass-green{
    color: #18c145 !important;
}
.table-bordered {
    border: 1px solid #dee2e6;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #dee2e6!important;
    padding: 8px!important;
}
.bg-light-blue{
    background-color: #cfe2ff !important;
}
.dashed-border-bottom-grey{
    border-bottom:1px dashed #3634a3;
}
.dashed-border-top-grey{
    border-top: 1px dashed #3634a3;
}
.dashed-border-right-grey{
    border-right: 1px dashed #3634a3;
}
.border-start-blue{
    border-left-color: #4034a3 !important
}
.bg-light-grey{
    background-color:#dfe0e0;
}
.beige_bg{
    background-color: beige;
}

/* TABS CSS */
.nav-tabs .nav-link.active{
    color: #ffffff!important;
    background-color: #0c2757;
    --cui-nav-tabs-link-active-border-color: #0c2757 #0c2757 #0c2757;
    --cui-nav-tabs-border-color:#ffffff!important;
    --cui-nav-tabs-border-width:0px!important;
}
.nav-tabs .nav-link{    
    color: #000000!important;
    background-color: lavender;
}
/*.tab-content{
    border: 1px dashed #dbdfe6;
}*/
.green-outline-badge{
    border: 1px solid #069c7a;
    color: #069c7a;
}
.tg-bg-badge{
    background-color: #069c7a;
}
.blue-outline-badge{
    border: 1px solid #0c2757;
    color: #0c2757;
}
.msg-blink {
    animation: blink 2s infinite;
}




.initials-container {
/*display: flex;*/
display: inline-flex;
align-items: center;
margin: 8px 0;
}

.initial-circle {
width: 25px;
height: 25px;
line-height: 26px;
text-align: center;
border-radius: 50%;
color: white;
font-weight: 600;
font-size: 12px;
position: relative;
z-index: 1;
flex-shrink: 0;
transition: transform 0.2s;
}

.initial-circle:not(:first-child) {
/*margin-left: -16px;*/
margin-left: -9px;
}

/*.initial-circle:hover {
transform: scale(1.2);
z-index: 2;
}*/
.folder-color{
    color: #FFDB75;
}
.defect_desc_txt::first-letter {
  text-transform: capitalize;
}
.card-grey-bg{
    background-color: #f2f4f7;
}
.circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px; /* Adjust size as needed */
  height: 24px; /* Adjust size as needed */
  border-radius: 50%; /* Makes it a circle */
  color: white; /* Text color for contrast */
  font-size: 12px; /* Adjust font size */
  font-weight: bold; /* Optional: make letter bold */
  text-transform: uppercase; /* Ensure letter is uppercase */
}
.black-border{
    border: 2px solid black!important;
}
.rep_tr_border{
    border-top: 2px solid #000 !important;
    border-left: 2px solid #000 !important;
    border-right: 2px solid #000 !important;
}
.expanded_rep_tr_border{
    border-left: 2px solid #000 !important;
    border-right: 2px solid #000 !important;
    border-bottom: 2px solid #000!important;
}
.sticky_dark_header{
    position: sticky;
    top: 0;
    z-index: 10;
}
.round-img{
    height: 35px;
    width: 35px;
    padding: 2px;
    border-radius: 50%;
}
.light-danger{
    background-color: #ffc7c7;
}
.scroll-card{
    height: 225px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.online-user-scroll{
    height: 81%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.linethrough{
    text-decoration: line-through;
}
.no-bg{
    background-color: #fff!important;
}
.bg-dark{
    background-color: #000!important;
}

/* Right sidebar styling */
.right-sidebar {
    position: fixed; /* Remove from normal flow */
    top: 0;
    right: 0;
    /*width: 8% !important; 
    min-width: 100px; 
    max-width: 150px; */
    width: 21% !important;
    min-width: 100px;
    max-width: 260px;
    height: 100vh; /* Full viewport height */
    z-index: 1030; /* Overlay content */
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.3s ease; /* Smooth slide */
}

/* Hidden state */
/* Hidden state */
.right-sidebar.hidden {
    display: none; /* Completely remove from layout */
}

/* Visible state */
.right-sidebar:not(.hidden) {
    display: block; /* Show sidebar */
    transform: translateX(0); /* Slide into view */
}

/* Smooth transition */
.right-sidebar {
    transition: transform 0.3s ease;
    color:red;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .right-sidebar {
        width: 50% !important; /* Wider on smaller screens */        
    }
}

/* Prevent layout shift */
.wrapper, .container-fluid {
    margin-right: 0 !important; /* No margin adjustments */
    width: 100% !important; /* Full width */
}

/* Style toggler */
#right-sidebar-toggler {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem; /* Reduced padding */
    margin: 0; /* No margins */
    line-height: 1; /* Prevent extra height */
}
/* Ensure header nav items don’t add extra space */
.header-nav .nav-item {
    margin: 0;
    padding: 0;
}
.header-nav .nav-link {
    padding: 0.25rem;
}
.ou-height{
    height: 81%;
}
.pagination.menus {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* table toggle button */
.extra-info {
    background-color: lavender;
    padding: 10px;
    border-top: 1px solid #ddd;
}
.toggle-btn,.toggle-btn-execution,.toggle-btn-defects {    
    cursor: pointer;
    color: #007bff;
}
.tgl_btn,.tgl_btn1,.tgl_btn2{
    background-color: #e1f1ff !important;
}
.toggle-btn:hover, .toggle-btn-execution:hover, .toggle-btn-defects:hover {
    color: #007bff;
}
.extra-info * {
    margin: 0px 0;
    line-height: 1.5;
}
/* Ensure any inline styles or classes in testcase_steps_and_data take precedence */
.extra-info [style] {
    all: revert !important;
}
.lt_green{
    background-color: #9dcf93!important;
}
.bg-danger{
    background-color: #ff0000!important;
}
.rep_exp_header{
    /*background-color: #687997 !important;*/
    background-color: #000000 !important;
}
.tr_bottom_border{
    border-bottom-color: #4789ff;
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
}
.input_txt_border{
    border: 3px solid #ffffff;
    border-radius: 10px;
}
.loader-container-chart-pm-rep, .loader-container-chart-pm-projmod-rep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Black transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure spinner is on top */
}

.loader-container-chart-pm-rep .spinner-border, .loader-container-chart-pm-projmod-rep .spinner-border {
    width: 2rem;
    height: 2rem;
}
.h-w-100{
    /*height: 100px;
    width: 100px;*/
    height: 120px;
    width: 165px;
}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {  --r: .8em; /* control the cutout */  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--r)) calc(100% - .25em),100% 50%,calc(100% - var(--r)) .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #059c7b padding-box; /* the color  */
  width: fit-content;
}
.ribbon_executions{ --r: .8em; /* control the cutout */  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--r)) calc(100% - .25em),100% 50%,calc(100% - var(--r)) .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #90c94b padding-box; /* the color  */
  width: fit-content;

}
.ribbon_defects{ --r: .8em; /* control the cutout */  
  border-block: .5em solid #0000;
  padding-inline: .5em calc(var(--r) + .25em);
  line-height: 1.8;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,calc(100% - var(--r)) calc(100% - .25em),100% 50%,calc(100% - var(--r)) .25em);
  background:
   radial-gradient(.2em 50% at left,#000a,#0000) border-box,
   #ffcd03 padding-box; /* the color  */
  width: fit-content;
}
.aliceblue-bg{
    background-color: aliceblue;
}
.black-thin-border{
    border: 1px solid black;
}

/*th[data-sort] { position: relative; }
.sort-asc::after { content: ' ↑'; }
.sort-desc::after { content: ' ↓'; }*/

/*th[data-sort] {
    position: relative;
    cursor: pointer; 
}
th[data-sort]::after {
    content: ' ↕'; 
    position: absolute;
    right: 5px; 
}
th[data-sort].sort-asc::after {
    content: ' ↑'; 
}
th[data-sort].sort-desc::after {
    content: ' ↓'; 
}*/

.h-96p{
    height:96%!important;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ml-62p{
    margin-left: 62%;
}
.h-14p{
    height: 14% !important;
}
.icon-wrapper {
  position: relative;
  display: inline-block;
}

.icon-wrapper .fa {
  font-size: 14px;
}
.count_badge {
  position: absolute;
  top: -3px;
  right: 6px;
  border-radius: 50%;  
  font-size: 8px;
  font-weight: bold;
  line-height: 1;
  min-width: 14px;
  text-align: center;
}
.pad-9{
    padding-top: 9px;
    padding-bottom: 9px;
}


.sort-icons {
    margin-left: 5px;
    display: inline-block;
}
.sort-asc, .sort-desc {
    font-size: 10px;
    vertical-align: middle;
    color: #6c757d; /* Gray color for inactive arrows */
    display: inline;
}
.sort-asc.active, .sort-desc.active {
    color: #000; /* Black color for active arrow */
}
th[data-sort] {
    cursor: pointer;
    user-select: none;
}
th[data-sort]:hover .sort-icons span {
    color: #007bff; /* Blue on hover */
}