.no-underline {
  text-decoration: none;
  color: black;
  }

  .text-custom-green {
  color: #4eaf0a;
  }

  .text-custom-black {
  color: black;
  }

  .text-custom-grey {
  color: grey;
  }

  /*
  #coinsTable td,
  #coinsTable th {
      text-align: right;
  }
  */

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

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

  @media (max-width: 768px) {
  .table-hide-on-mobile {
      display: none;
  }
  }
  .custom-pagination .page-item.active .page-link,
  .custom-pagination .page-link:hover {

      border-color: #212529;
  color: #fff;
  background-color: #212529;
  }
  .custom-pagination .page-link {

  color: #212529;
  background-color: #fff;
  border-color: #212529;
  }

/* Change the background color of the selected accordion header */
.accordion-item:not(.collapsed) .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    color: #242323; /* Set the text color to white */
  }
      
  .small-font {
    font-size: 0.8rem; /* Adjust this value as needed */
}


mark {
  padding: 1;
  margin: 0;
  line-height: normal;
}

.circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 7px;  /* Add some space between the circles */
  /* flex-shrink: 3;  Prevent flex items from shrinking */
}

.mx-1{
  margin-right:.25rem !important;
  margin-left:.25rem !important;
  /* padding-top: 10px !important; */
}
.text-muted{color:#8c9db5 !important}
.fixed-width {
  width: 90px; 
}

/* @media (min-width: 768px) {
  .fixed-width {
    width: 90px; 
  }

} */

.custom-btn {
  font-size: 2rem; /* This will make the button text larger. Adjust as needed. */
  padding: 1rem; /* This will make the button itself larger. Adjust as needed. */
}

.custom-icon {
  font-size: 1rem; /* This will make the icon larger. Adjust as needed. */
}




@media (max-width: 768px) {
  .circle {
    width: 20px; /* adjust as needed */
    height: 20px; /* adjust as needed */
    margin-right: 7px; /* adjust as needed */
}
  .exchangeimage {
    width: 20px;
    height: 20px;
    position: relative;
    bottom: 2px; 
  }

  .btn-responsive {
    padding: 5px 10px;
    font-size: 13px;
    line-height: 1.7;
  }

  h1 {
    font-size: 1.45rem;  /* Adjust as needed */
  }

  h2 {
    font-size: 1.35rem;  
  }
  h4 {
    font-size: 1.0rem;  
  }

  h3 {
    font-size: 1.3rem;  
  }



  h5 {
    font-size: 1.0rem;  
  }

  .message-mobile {
    font-size: 0.9rem;  
  }

  .fixed-column {
    min-width: 130px !important;
    max-width: 130px !important;
    width: 130px !important;
  }

}


/* start php_logic */

.table-container {
        overflow-x: auto;
        white-space: nowrap;
    }

    /* .outer-container {
    overflow-x: auto;
    white-space: nowrap;
}

.inner-container {
    position: relative; 
} */


    .fixed-column-1 {
        position: sticky;
        left: 0;
        background: white !important;
        z-index: 2;
        /* Make it on top of the second sticky column */
    }

    .fixed-column-2 {
        /* if I want 2 columns sticky - set the other one as -2 */
        position: sticky;
        left: 115px;
        /* Set this to the width of the first column */
        background: white !important;
        z-index: 1;
    }

    /* 
.table tr th,
.table tr td {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
} */

    /* table {
    border-collapse: collapse;
} */


    .circle {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 7px;
        /* Add some space between the circles */
        /* flex-shrink: 3;  Prevent flex items from shrinking */
    }

    @media (max-width: 767px) {
        .circle {
            width: 20px;
            /* adjust as needed */
            height: 20px;
            /* adjust as needed */
            margin-right: 7px;
            /* adjust as needed */
        }



    }
/* end php_logic */



.avatar-list-stacked .avatar {
  margin-right: 0.2em !important;
  box-shadow: 0 0 0 2px #f3f3f3;
  /* box-shadow: 0 0 0 2px #fff; */
}

.avatar-list2 .avatar {
background: #f8f9fa;
font-weight: 600;
width: 1.3rem;
height: 1.3rem;
line-height: 2rem;
border-radius: 50%;
display: inline-block;
position: relative;
vertical-align: bottom;
font-size: 0.875rem;
user-select: none;
min-width: 1rem;
}



/* start coin.php */

/* .card{border-color:var(--border-color);background-color:var(--card-color)} */
/* .card{background-color:var(--card-color)} */

/* .card-body{flex:1 1 auto;padding:var(--bs-card-spacer-y) var(--bs-card-spacer-x);} */

.card {
    background-color: none;
    border: none;
    padding: 0;
}


.card-body {
    flex: 1 1 auto;
    padding: 0;
}

.card-header {
    border-bottom: none !important;
}

.list-group-item:not(:last-child) {
    border-bottom: none;
}


.list-group-item-custom {
    padding-top: 0px;
    padding-bottom: 5px;
}

.small-text-muted {
    display: flex;
    justify-content: space-between;
}


.custom-table {
    width: 100%;
    max-height: 100px;
    background-color: #f4f4f4;
    border: 1px solid white;
    padding: 10px;
}

.custom-table td {
    vertical-align: middle;
    text-align: center;
}

.cell-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.custom-table td {
    vertical-align: middle;
    text-align: center;
    border: 10px solid white;
    padding: 10px;
}

.my-custom-class {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 992px) {
    .custom-table td {
        font-size: 0.8em;
        padding: 5px;
    }

    .custom-table2 {
        font-size: 0.8em;
    }

    .my-custom-class {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}


.clickable-row:hover {
    cursor: pointer;
    background-color: #f5f5f5;
    /* Optional: change background on hover */
}
/* end coin.php */


/* header */
header.border-bottom {
    border-bottom: 1px solid black !important;
}


/* exchange */