.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff !important;
    background-color: #00a87f !important;
}

.list-content ul li {
    margin-right: 20px;
}

.list-content a.nav-link {
    padding: 10px 0;
    color: #000000;
}

.list-content a.nav-link.active {
    border-bottom: 4px solid #00A87F;
}

button.custom-btn {
    background: #00A87F;
    color: #fff;
    border-radius: 8px;
    /* margin-right: 20px; */
}

button.custom-btn1 {
    background: #DCF9F2;
    color: #00A87F;
    border: #00A87F 1px solid;
    border-radius: 8px;
}

button.custom-btn2 {
    background: #ffffff;
    color: #000000;
    border: #00A87F 1px solid;
    border-radius: 8px;
    margin: 0 20px 0 0;
    
}

button.custom-btn2:hover {
    background: #00A87F;
    color: #FFF;
}
button.custom-btn2:hover img {
    filter: grayscale(100%) brightness(0) invert(100%);
}
button.custom-btn3{
    background: #858585;
    color: #fff;
    border-radius: 8px;
    margin-right: 20px;
}

.custom-btn2.dropdown-toggle::after {
    content: " ";
    float: right;
    margin-top: 10px;
}
.custom-btn2.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    padding: 15px;
}

a.dropdown-item {
    color: #000000;
    border-left: #00A87F 2px solid;
    margin: 10px 0px 10px 10px;
    padding: 0px 8px 0px 10px;
}

.dropdown-item:hover {
    background: #00A87F!important;
    border-left: #ffffff 2px solid;
    color: #ffffff;

}

.card-custom {
    background: #DCF9F2;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
}

.filter-btn {
    background-color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
}
#dateAdded.filter-btn {
    padding: 4px;
}

input.search-input {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-position: 10px center;
    background-repeat: no-repeat;
    padding-left: 40px; /* Adjust this value to fit your image size */
  }

  #removeAfter.dropdown-toggle {
    display: none!important;
  }

  table {
    border-top: dashed 3px #ccc;
  }

  .table thead th, .table td {
    vertical-align: middle;
  }

  .table thead {
    border-bottom: 1px solid #666666; 
  }

  .statusNew {
    color: #00A87F;
    border: #00A87F 1px solid;
    border-radius: 8px;
    background: transparent;
    margin: auto;
    text-align: center;
  }
  .statusWaiting {
    color: #FFA500;
    border: #FFA500 1px solid;
    border-radius: 8px;
    background: transparent;
    margin: auto;
    text-align: center;
  }
  /* content list */

a.edit-form.nav-link {
    color: #000000;
    font-weight: 700; 
    padding: 0 0 10px 0;
    margin: 10px 0;
    border-bottom: 4px solid #e3f8f3; 
}

a.edit-form.nav-link.active {
    border-bottom: #00A87F solid 4px !important;
}

.nodata {
    border-radius: 8px;
    border: dashed 1px #00A87F;
}

/* project list */
.custom-icon {
    background: #DCF9F2;
    border-radius: 8px;
}

.count {
    background: #00A87F;
    border-radius: 8px;
    padding: 5px;
    color: #fff;
}

.save-prompt {
    border: 1px dashed #00A87F;
    border-radius: 8px;
    background: #DCF9F2;
    transition: all .5s ease-in-out;
}

/* modal CSS */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    /*width: 50%;*/ /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    /* background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4);  */
    /* margin-left: 30%; */
    }

    /* Modal Content/Box */
    .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
   /* Could be more or less, depending on screen size */

    }

    /* The Close Button */
    .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    }

    .close:hover,
    .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    }
    
.modalBtn {
    color: #000000;
    border-left: #00A87F 2px solid;
    margin: 10px 0px 10px 10px;
    padding: 0px 8px 0px 10px;
}

.modalBtn:hover {
    background: #00A87F!important;
    border-left: #ffffff 2px solid;
    color: #ffffff;
}

.modal-backdrop.fade.show {
    display: none;
}



/* order details pop up */
.nodata {
    border-radius: 8px;
    border: dashed 1px #00A87F;
}

.order-details {
    color: #00A87F !important;
}

/* Hide radio buttons */

.btn-check:checked + .btn-outline-primary {
    background-color: #007bff;
    color: #fff;
}

.todoStatusInc {
    background: #dc3545;
    border-radius: 8px;
    color: #fff;
    min-width: 190px;
}

button.custom-btn5 {
    background-color: #dc3545;
    border-radius: 8px;
    color: #fff;
    min-width: 190px;
}

button.custom-btn6 {
    border: 1px #c60000;
    border-radius: 8px;
    color: #c60000;
}

   /* datatable style         */
.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0!important;
	border-radius: 8px!important;
}

.dataTables_wrapper .dataTables_info {
	padding-top: 5px;
}

.table-responsive {
	overflow-x: hidden;
}

.dataTables_wrapper .dataTables_paginate {
	width: 100%!important;
	display: flex;
	justify-content: center!important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f053"; /* Unicode for Font Awesome left arrow */
	font-weight: 900; 
	margin-right: 5px;
	margin-left: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next::after {
	font-family: "Font Awesome 5 Free"; 
	content: "\f054"; /* Unicode for Font Awesome chevron-right */
	font-weight: 900; 
	margin-left: 5px;
	margin-right: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: linear-gradient(to bottom, rgb(0 168 127) 0%, rgb(0 168 127) 100%);
		color: white !important;
		border: 1px solid rgb(255 255 255 / 0%);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: linear-gradient(to bottom, rgb(0 168 127) 0%, rgb(0 168 127) 100%);
		color: white !important;
		border: 1px solid rgb(255 255 255 / 0%);
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 5px 5 !important;
	border-radius: 8px !important;
	border: solid 1px #c1c1c1;
	margin: 0 5px;
	font-size:14px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	padding: 0 !important;
	border-radius: 8px !important;
	border: solid 1px #c1c1c1;
}
.dataTables_wrapper .dataTables_paginate .ellipsis {
	display: none;
}

  .table td {
	vertical-align: middle!important;
}

.table thead th {
	vertical-align: middle!important;
}

  .dataTables_length{
	margin-bottom:12px!important;
}


.blade-title{
    transform: translateY(-50px);
    width: 50%!important;
    justify-content: start!important;
    display: flex;
    flex-direction: column;
    margin: 0px!important;
}


.blade-content{
    margin-top:-50px;
}

.h2-custom-20px {
    margin-bottom:12px;
}

@media (max-width: 768px) {    
    .blade-title{
        transform: translateY(0px);
        width: 100%!important;
        padding-bottom:0px;

    }
    .blade-content{
        margin-top:0px;
    }

    .button-container-myprojects {
        margin-top: 0px!important;
    }
}