.navbar-green {
    background-color: #003001 !important;
    color: #fff;
}
.sidebar{
    background-color: #003001 !important;
    color: white;
}
.logo-image{
    width: 40%;
    margin-top:-10px;
    margin-left: 10px;
}

.black-color{
    color: black !important;
}

.red-color{
    color: red;
}

.white-color{
    color: white !important;
}

.user-image{
    margin-left: 20px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: black !important;
    background-color: white !important;
}

.nav-pills .custom-menu-item.active{
    color: white !important;
    background-color: green !important;
}

.nav-pills .custom-menu-item:hover{
    color: white !important;
}


.nav-pills .nav-link:hover {
    color: white !important;
}

.user-panel{
    border-bottom: 1px solid black;
}

.layout-fixed .brand-link {
    background-color: white;
}

@keyframes jump {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-20px); 
    }
    60% {
      transform: translateY(-10px); 
    }
  }
  
  .animated-dot {
    animation: jump 1s ease infinite;
  }
  
  .addApplicant-button, .addUser-button{
    float: right;
    background-color: green;
    color: white;
    border-radius: 5px;
    border: 1px solid green;
    padding: 8px;
    transition: transform 0.2s; 
  }

  .addApplicant-button:hover, .addUser-button:hover{
    background-color: rgb(2, 98, 2);
    border: 1px solid rgb(2, 98, 2);
    transform: scale(1.1);
  }

body {
    padding-top: 50px;
}

.submit-btn{
    float: right;
}

.pull-right{
    float: right !important;
    margin-left: 105px !important;
}

.user-footer{
    display: flex !important;
}

.header-color{
    background-color: #B7FFBF;
    color: black !important;
}

.buttons-copy{
    background-color: rgb(72, 72, 255) !important;
    border: 1px solid rgb(72, 72, 255) !important;
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-copy:hover{
    background-color: blue !important;
    border: 1px solid blue !important;
    transform: scale(1.1);

}

.buttons-csv{
    background-color: rgb(255, 186, 57) !important;
    border: 1px solid rgb(255, 186, 57) !important;
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-csv:hover{
    background-color: orange !important;
    border: 1px solid orange !important;
    transform: scale(1.1);
}

.buttons-excel{
    background-color: rgb(50, 211, 50) !important;
    border: 1px solid rgb(50, 211, 50) !important;
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-excel:hover{
    background-color: green !important;
    border: 1px solid green !important;
    transform: scale(1.1);
}

.buttons-pdf{
    background-color: rgb(189, 58, 58) !important;
    border: 1px solid rgb(189, 58, 58) !important;
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-pdf:hover{
    background-color: rgb(146, 31, 31) !important;
    border: 1px solid rgb(146, 31, 31) !important;
    transform: scale(1.1);
}

.buttons-print{
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-print:hover{
    transform: scale(1.1);
}

.buttons-colvis{
    background-color: palevioletred !important;
    border: 1px solid palevioletred !important;
    transition: background-color 0.2s, border 0.2s, transform 0.2s;
}

.buttons-colvis:hover{
    background-color: rgb(175, 53, 94) !important;
    border: 1px solid rgb(175, 53, 94) !important;
    transform: scale(1.1);  
}

.dropdown-item.active, .dropdown-item:active {
    background-color: palevioletred !important;
}

.fa-scroll ,.fa-flip{
    --fa-animation-duration: 3s; 
    --fa-flip-x: 1; 
    --fa-flip-y: 0;
}

.fa-money-check-dollar, .fa-flip{
    --fa-animation-duration: 3s;
    --fa-flip-x: 0; 
    --fa-flip-y: 1;
}

.card-title{
    font-size: 30px !important;
}

.loan-form{
    padding: 10px;
}

.card-footer {
    background-color: transparent !important; 
}

.input-group-text {
    cursor: pointer;
}

.input-group-text:hover {
    color: black;
}

.input-group-text i {
    font-size: 15px;
}

.input-group-text.password-visible i {
    color: #005bbc;
}

.upload-image-btn{
    width: 15% !important;
    font-size: 25px !important;
    position: absolute;
    top: 170px;
    right: 70px;
    padding-left: 10px !important;
 }

 .upload-container{
    position: relative; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
    border-radius: 50%;
 }

 #avatarImage{
    width: 100%; 
    height: 100%; 
    object-fit: cover;
 }

 .user-image{
    width: 70px; 
    height: 70px;
    object-fit: cover;
    margin-left: 0;
 }

 .settings{
    color: #6c757d !important;
 }

 .is-invalid{
    margin-bottom: 10px;
 }

 .input-error {
    border-color: red !important; 
 }

 .camera-style{
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    top: 140px;
    left: 160px;
    color: white !important;
 }

 #profilePicture{
    object-fit: cover;
    width: 150px; 
    height: 150px; 
 }

 .edit-content{
    margin-top: 30% !important;
    width: 400px !important;
    height: 400px;
 }

 .modal-header{
    background-color: green;
 }

 .modal-title{
    color: white !important;
    font-size: 20px !important;
 }

 .close{
    color: white !important;
    font-size: 35px !important;
 }

 .text-wrap {
    white-space: normal;
    word-wrap: break-word;
 }

 .flex{
    flex: 1;
    white-space: nowrap;
 }

.action-button::after {
    content: attr(title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    padding: 5px 5px; 
    border-radius: 5px;
    font-size: 12px; 
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s; 
  }
  
  .action-button:hover::after {
    visibility: visible;
    opacity: 1;
  }