button {
    border: none;
}

button:focus {
    outline: none;
}

.btn{
    font-size: 16px;
    padding: 6px 12px;
}

.btn-danger{
    font-weight: bold;
    border-radius: 26px;
}

/*btn-for-card-action are action under card that looks like link they are also for icon with action ex: consultation-details*/
.btn-for-card-action{
    font-size: 13px;
    color: var(--blue-x-dark);
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}

.btn-for-card-action:hover{
    color: var(--blue);
    text-decoration: none;
}

.btn-for-card-action.danger:hover{
    color: var(--red);
    text-decoration: none;
}

.btn-for-card-action:focus, .btn-for-card-action.focus {
    text-decoration: none;
}

.btn-for-card-action:focus-visible {
    text-decoration: none;
    color: var(--blue);
    opacity: 0.6;
    outline: 0;
}

/*Border for action in the bottom of card (btn-for-card-action)*/
.border-right-1 {
    padding-right: .375rem;
    margin-right: .375rem;
    border-right: 1px solid var(--light-gray-2) !important;
}

.btn:focus, .btn.focus {
    outline: initial;
    box-shadow: initial;
}

/*Button focus set a shadow arround it*/
.btn:focus-visible, .btn.focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/*Button hover set a shadow under*/
.btn:hover {
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.btn-primary{
    background-color: var(--odeo-haylem-blue);
    border-color: var(--odeo-haylem-blue);
    color: var(--odeo-haylem-white);

    font-weight: bold;
    border-radius: 26px;
}

.btn-force-round-even-in-btn-group{
    border-radius: 26px !important;
}

/*Button press*/
 .btn-primary:not(:disabled):not(.disabled):active{
    /*TODO set a border color instead of setting the whole button color?*/
    border-color: var(--odeo-haylem-black);
    background-color: var(--blue-x-dark);
 }

/*Button disabled*/
.btn-primary.disabled, .btn-primary:disabled {
  color: var(--white);
  background-color: var(--odeo-haylem-dark-gray);
  border-color: var(--odeo-haylem-dark-gray);
}

.btn-haylem-3rd-party-auth {
    font-size: 16px;
    padding: 6px 12px;
    background-color: white;
    color: #555;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-weight: bold;
    border-radius: 26px;
}

.btn-haylem-3rd-party-auth img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.btn-haylem-3rd-party-auth:hover {
    cursor: pointer;
    background-color: #ddd;
}

.btn-haylem-3rd-party-auth.disabled, .btn-haylem-3rd-party-auth:disabled {
    cursor: initial;
    background-color: #f7f7f7;
    opacity: 0.9;
}

.btn-secondary{
    border-radius: 26px;
}

.btn-primary-blue{
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    font-weight: bold;
    border-radius: 26px;
}

.toggle-on.btn{
    padding-right: 1rem !important;
}
.toggle-off.btn{
    padding-left: 1rem !important;
}