body {
}
.btn:active {
    transform: scale(0.95); /* Slightly shrink the button on click */
}
.btn-portal {
    padding: 1% 5%;
    font-size: large;
}

.card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.white-btn {
    background-color: #D8E6ED;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 72px;
    padding: 3% 15%;
    font-size: 13px;
}

.header{
    display: flex;
     align-items: center;
      justify-content: flex-start;
       width: 100%;
}
.card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.white-btn {
    background-color: #D8E6ED;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 72px;
    padding: 3% 15%;
    font-size: 13px;
}

.card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.sub-head {
    color: #000;
    font-size: 1.25rem;
}

.img-onboarding {
    border-radius: 40px;
    height: 225px;
}



.bg-color3 {
    background-color: #73949A;
}


.sub-head {
    color: #000;
    font-size: 1.25rem;
}

.card-body img {
    display: block;
    margin: 0 auto;
}

.setup-white-btn {
    background-color: #D8E6ED;
    border-radius: 72px;
    color: #000;
    width: 100%; /* make the button full width */
    padding: 10px 20px; /* increase the padding to make the button broader */
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center; /* add this to vertically center the text */
}

.fs-3 {
    color: #000;
}

.white-card {
    background-color: #D8E6ED;
    padding: 7%;
    border-radius: 15px;
    margin: 2%;
}

thead {
    background-color: #892062;
    color: white;
}

/*td,
th {
    font-size: 10pt;
    padding: 7px !important;
    vertical-align: middle;
}*/

a {
    text-decoration: none;
}

.card.box-shadow {
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .1);
}

/* competency index*/
     .modal {
            /* padding-top: 0px; */
          
            padding: 0px 0px 0px 0px;
        }

        .card-out {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .modal-content {
            margin: 0px;
        }

        select {
            font-size: 28px;
        }

        .modal-dialog {
            max-width: 100%;
        }

        .modal-dialog-slideout {
            min-height: 100%;
            margin: 0 0 0 auto;
            background: #fff;
        }

        .modal.fade .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(100%, 0)scale(1);
            transform: translate(100%, 0)scale(1);
        }

        .modal.fade.show .modal-dialog.modal-dialog-slideout {
            -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
            display: flex;
            align-items: stretch;
            -webkit-box-align: stretch;
            height: 100%;
            width: 85%;
        }

            .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
                overflow-y: auto;
                overflow-x: hidden;
            }

        .modal-dialog-slideout .modal-content {
            border: 0;
        }

        .modal-dialog-slideout .modal-header,
        .modal-dialog-slideout .modal-footer {
            height: 6rem;
            display: block;
        }

        /*.DD {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        thead {
            background-color: lightgrey;
            color: black;
        }

        table {
            text-align: center;
        }

        .table {
            margin-bottom: 0px;
        }

        td {
            padding: 10px !important;
            border: 1px solid lightgrey;
        }

        th {
            padding: 10px !important;
            border: 1px solid grey;
        }

        a {
            text-decoration: none;
        }


        .contentdata {
            background-color: #f3d4a0;
            color: black;
        }

        .text-left {
            text-align: left !important;
        }

        .text-center {
            text-align: center !important;
        }

        .text-right {
            text-align: right !important;
        }

        .width-10 {
            width: 10% !important;
        }

        .width-12 {
            width: 12% !important;
        }

        .width-30 {
            width: 30% !important;
        }

        .badge {
            color: black;
        }

        .error {
            color: red;
        }

        .toast-red {
            background-color: red;
            color: white;
        }

        .custom-textbox {
            height: 42px;
            width: 100%;
            font-size: 14px;
        }

        .btn {
            box-shadow: 0px 0px 0px 0px;
        }

        .submit {
            background-color: red;
        }*/

        .card.box-shadow {
            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, .2);
        }



/* Basic button styling */
.btn-search {
    background-color: #972162; /* Button color */
    color: white; /* Text color */
    border: none; /* Remove border */
}
.search-staff-input {
    padding:5px; 
    margin-right:15px; 
    width: 600px;
}
.search-staff-wrapper {
   display:flex; 
   align-items:center; 
   flex-direction:row;
}
/* Hover state to keep button color consistent */
.btn-search:hover {
    background-color: #972162; /* Keep the button color on hover */
    color: white; /* Text color on hover */
}
.bg-theme:hover {
    background-color: #972162; /* Keep the button color on hover */
    /* Text color on hover */
}
.bg-theme:active {
    background-color: #972162 !important; /* Keep the button color on hover */
    /* Text color on hover */
}
/* Focus state to prevent color change when clicked */
.btn-search:focus {
    outline: none; /* Remove default focus outline */
    background-color: #972162; /* Keep the button color on focus */
    color: white; /* Text color on focus */
}
.search-wrapper {
    flex-grow: 1;
    margin-right: 10px;
}

.search-input {
    width: 100%;
    color:#972162!important;
}

.select2-search__field{
    color:#972162!important;

}


.form-check-input:checked {
    background-color:#972162 !important;
    border-color:#972162 !important;
 }
.form-check-input:not(:checked) {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.btn-search {
    flex-shrink: 0;
    margin-left: 0; /* Optional: make sure there's no unintended left margin */
}
/*competncy edit command delete button*/
.icon {
    color: #972162 !important; 
    font-size:20px !important;
}




.welcome-text{
    background-color: #8A194F;
    color: #fff;
    text-align: center;
    padding: 4% 2%;
    border-radius: 15px;
}
.green-btn{
    background-color: #00BF63;
    color: #000;
    border: none;
    border-radius: 72px;
    padding: 5% 10%;
    font-size: 25px;
}
.tab {
    padding: 4% 4% 2%;
    text-align: center;
    margin: 5% 0 0 5%;
    border-radius: 10px;
}
.tab a{
    color: #000036;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
}
.bg-color1{
    background-color: #A0C8A9;
}
.bg-color2{
    background-color: #9DB6CC;
}
.bg-color3{
    background-color: #E2D47D;
}
.bg-color4{
    background-color: #74BDCB;
}
.bg-color5{
    background-color: #CDC6C6;
}
.bg-color6{
    background-color: #00BF63;
}
.bg-theme{
        background-color: #972162 !important;
         color: white !important;
}
.close-button{
    background-color:white !important; 
    color:#972162 ; 
    border:1px solid #972162;
}
.arrow{
    border: 2px solid;
    border-radius: 50%;
    padding: 5% 8% 5%;
    font-size: 35px;
}
/*.profile-icon{
    border: 0;
    border-radius: 50%;
    padding: 9% 37%;
    font-size: 45px;
    background: #CDC6C6;
    color: #000;
}
.bell-icon{
    border: 0;
    border-radius: 50%;
    padding: 9% 15%;
    font-size: 50px;
    background: #FFDE00;
    color: #000;
}
.logout-icon{
    border: 0;
    border-radius: 50%;
    padding: 9% 15%;
    font-size: 40px;
    background: #FF3131;
    color: #000;
}*/
.profile-icon, .logout-icon {
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* Adjust this size to match */
    height: 60px; /* Adjust this size to match */
    font-size: 25px; /* Adjust icon size */
    color: #000;
}

.profile-icon {
    background: #CDC6C6; /* Gray background */
}

.logout-icon {
    background: #FF3131; /* Red background */
}

.white-btn{
    background-color: #D8E6ED;
    color: #000;
    font-weight: bold;
    border:none;
    border-radius:72px;
    padding: 3% 15%;
    font-size: 17px;
}
.fs-3{
    color: #000;
}
.home-icon{
    color: #000;
    font-size: 50px;
}
.head-font-size{
    font-size: 3.5rem;
    color: #000;
}
.sub-head{
    color: #000;
    font-size: 1.25rem
}
.grey-card {
    background-color: #73949A;
    border: 0;
    border-radius: 20px;
    padding: 1% 0;
    margin: 0 2% 0 0;
    line-height: 37px;
}
.setup-white-btn{
    background-color: #D8E6ED;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 46px;
    font-size: 16px;
    display: flex;
    justify-content: center;
}
.profilepg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;  /* Width for the icon's container */
    height: 80px; /* Height for the icon's container */
    border-radius: 50%;
   color: lightgrey;
}

.profilepg-icon i {
    font-size: 45px;  /* Increase icon size */
    color: #808080;   /* Grey color for the entire icon */
    background-color: transparent; /* Ensure the icon's background is transparent */
}


.edit-profile{
    color: #727272;
}
.custom-card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    border-radius: 30px;
}
.custom-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35vh; /*Adjust this value to control the vertical centering */
}
.quick-links{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.support-white-btn{
    background-color: #CDC6C6;
    color: #000;
    border: none;
    border-radius: 72px;
    padding: 2% 15%;
    font-size: 25px;
    text-decoration: none;
}
.card-padding{
    padding: 5rem 0;
}
.colored-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.text-right{
    text-align: right;
}
.pg-head{
    text-align: right;
}
.display-card{
    display: contents;
}
.modal-close{
    background: none;
    border: 0;
}
.modal-save{
    background: #00BF63;
    border-color: #00BF63;
    color: #fff;
    padding: 1.5%;
    border-radius: 7px;
}
.white-card{
    background-color: #fff;
    padding: 7%;
    border-radius: 15px;
    margin: 2%;
}
.p-white-card{
    background-color: #fff;
    padding: 4%;
    border-radius: 15px;
    margin: 2%;
    word-wrap: break-word;
}
.home-container{
    /*min-height: 90vh;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 25px;
}
@media screen and (max-width: 600px) {
    .welcome-text {
        padding: 12% 2%;
    }
    .green-btn{
        padding: 5% 20%;
        font-size: 20px;
    }
    .quick-links, .home-icon{
        text-align: center;
    }
    .home-icon{
        display: flex;
        flex-direction: column;
    }
    .white-btn{
        padding: 5% 7% !important;
        display: flex;
        justify-content: center;
    }
    .head-font-size {
        font-size: 1.8rem;
    }
    .setup-white-btn {
        padding: 1% 17%;
        display: flex;
        font-size: 20px;
        justify-content: center;
    }
    .grey-card{
        padding: 3% 5%;
    }
    .pg-head{
        text-align: center;
    }
    .support-white-btn {
        padding: 3% 15%;
        font-size: 20px;
    }
    .display-card{
        display: block;
    }
    .quick-links{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;
    }
    .profile-icon{
        padding: 15% 25%;
    }
    .bell-icon{
        padding: 20% 40%;
        font-size: 45px;
    }
    .logout-icon{
        padding: 23% 40%;
        font-size: 42px;
    }
    .tab{
        margin: 5% 0 0 0;
    }
    .white-card{
        padding: 10%;
        margin: 0;
    }
    .sub-head{
        font-size: 1.1rem;
    }
  }


  @media screen and (min-width: 900px) {

    .home-container .col-sm-2.quick-links {
        width: 10% !important;
    }
         
    .welcome-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 30px;
    }

    .row.home-row {
        min-height: 90vh;

    }
     /*.h4, h4 {
    font-size: 2rem;
    color: white;*/
}

  }

  .table:not(.table-bordered) td:first-child.padding-left, 
  .table:not(.table-bordered) th:first-child.padding-left, 
  .table:not(.table-bordered) tr:first-child.padding-left  {

  }


  .text-theme{
      color:#972162 !important;
  }
  .border-theme{
      color:#972162 !important;
     border: 1px solid #972162 !important;
  }