:root {
    --main-bg-color: #EDFAFD;
    --main-primary-color: #7ECBF6;
    --main-primary-color-hover: #71b8e0;
}


 /*****************************************/
 /* Components */

.btn.custom-primary-btn {
    background-color: var(--main-primary-color); 
    color: #fff;
}


.btn.custom-primary-btn:hover,
.btn.custom-primary-btn:focus {
    background-color: var(--main-primary-color-hover); 
    color: #fff;
}

.card.custom-card {
     background-color: var(--main-bg-color);
}

.custom-icon-small-size {
    height: 1rem;
    width: 1rem;
}


 /*****************************************/
 /* Navigation */

.navbar-custom {
    background-color: var(--main-bg-color);
}

.custom-logo {
    width: 9rem;
    height: 2.3rem;
}

.login-custom {
    margin-top: 7rem;
}

.custom-icon-manage-account-btn {
    filter: invert(1);
    height: 1rem;
    width: 1rem;
}

button:active .custom-icon-manage-account-btn {
    filter: invert(0);
}

.custom-logout-btn {
    position: relative;
    right: -0.5rem;
}




/************************************************/
/* Home Page */

.container.custom-container {
    margin-top: 3rem;
    padding-left: 2rem;   /* mobile default smaller padding */
    padding-right: 2rem;
}

/* Tablets and up (md: 768px) */
@media (min-width: 768px) {
    .container.custom-container {
        padding-left: 5rem;
        padding-right: 5rem;
    }
}

/* Desktops and up (lg: 992px) */
@media (min-width: 992px) {
    .container.custom-container {
        padding-left: 10rem;
        padding-right: 10rem;
    }
}

/* Anything above 1200px applied this class */
@media (min-width: 1200px) {
    p.card-title {
        font-size: 1.25rem !important;
    }
}

/* mobile/ tablet default smaller font */
p.card-title {
    font-size: 1.10rem !important;
}


.lift-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lift-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); 
}

.sup-lift {
  position: relative;
  top: -1rem;
}

/*************************************************/
/**** Create project form and create account form **/

.card.custom-form-container {
    box-shadow: 0 0 2px 1px #7ECBF6;
}

button.my-bg-iconform-color-primary,
a.my-bg-iconform-color-primary,
span.my-bg-iconform-color-primary {
    background-color: var(--main-primary-color); 
}


input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    display: none;
}

/*********************************************************/
/** Show all Project Page **/

.table-striped > tbody > tr:nth-of-type(odd) {
    --bs-table-striped-bg: var(--main-bg-color);  /* your custom light blue */
    color: #000;
}

th {
  font-weight: normal;
}

button.my-manage-btn,
a.my-manage-btn {
  padding: 0.40rem 0.60rem;
  font-size: 0.875rem;
  
  line-height: 1.2;  /* Adjusted for better vertical centering */
  display: inline-flex;  /* Ensures alignment */
  align-items: center;   /* Vertically centers text */
  justify-content: center; /* Horizontally center (optional) */
}


button.filter-form-btn {
  padding: 0.40rem 0.60rem;
  font-size: 0.875rem;
  line-height: 1;
}
a.filter-form-btn {
  padding: 0.40rem 0.60rem;
  font-size: 0.875rem;
  line-height: 1;
}

a.filter-form-btn.filter-active {
    background-color: #64a0c2 ;
}

/************************************************************/
/** Show Project Page **/

img.myproject-title-icon {
    width: 4rem;
    height: 4rem;
}

.card.project-card {
    width: 10rem;
    height: auto;
    background-color: var(--main-bg-color);
}

.my-custom-tabs .nav-link {
  color: #333;
}
.my-custom-tabs a.nav-link.active {
  color:  #07a5fff2;
  font-weight: 500;
}

a.page-link.page-link-mycolor {
    background-color: var(--main-primary-color);
    border: 1px solid var(--main-primary-color);
}


/************************************************************/
/** Show Project Page **/


img.mytask-title-icon {
    width: 2rem;
    height: 2rem;
}

/*****************************************************************/