:root {

    --main-color: #26A69A;
    --btn-main-color-hover: #1E857B;
    --btn-border-main-color-hover: #1E857B;

    --secondary-color: #FFFFFF;
    --btn-border-secondary-color: #26A69A;
    --btn-text-secondary-color: #26A69A;
    --btn-secondary-color-hover: #E0F2F1;
    --btn-border-secondary-color-hover: #E0F2F1;
    --btn-text-secondary-color-hover: #1E857B;


    --neutral-color: #ECEFF1;
    --btn-border-neutral-color: #ECEFF1;
    --btn-text-neutral-color: #263238;
    --btn-neutral-color-hover: #CFD8DC;
    --btn-border-neutral-color-hover: #CFD8DC;
    --btn-text-neutral-color-hover: #263238;


    --danger-color: #EF5350;
    --btn-border-danger-color: #EF5350;
    --btn-text-danger-color: #FFFFFF;
    --btn-danger-color-hover: #D32F2F;
    --btn-border-danger-color-hover: #D32F2F;
    --btn-text-danger-color-hover: #FFFFFF;


    --background-color: #ECEFF1;
    --background-nav-color: #37474F;
    --text-nav-color-hover: #e9ecef;
    --text-nav-color-open: #e9ecef;
    --text-nav-color: #e9ecef;
    --icon-nav-color-hover: #26A69A;
    --boder-bottom: #dee2e6;
    --font-size: 0.87rem;
    --card-bg-color: #f9fafd;
    --card-text-color: #263238;
    --button-radius: 20px;
    --pagination-nav-color: #26A69A;
    --text-color: #495057;

}


.my-btn-primary{
    background-color: var(--main-color);
    color: #FFFFFF;
    padding-top: 3px;
    padding-bottom: 3px;
    border-color: var(--main-color);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--button-radius);
}
.my-btn-primary:hover, .btn.my-btn-primary:active{
    background-color: var(--btn-main-color-hover);
    border-color: var(--btn-border-main-color-hover);
    color: #FFFFFF;
}

.main-color-text{
    color: var(--main-color);
}

.my-btn-danger{
    background-color: var(--danger-color);
    color: var(--btn-text-danger-color);
    padding-top: 3px;
    padding-bottom: 3px;
    border-color: var(--btn-border-danger-color);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--button-radius);
}

.my-btn-danger:hover, .btn.my-btn-danger:active{
    background-color: var(--btn-danger-color-hover);
    border-color: var(--btn-border-danger-color-hover);
    color: var(--btn-text-danger-color-hover);
}

.my-btn-neutral{
    background-color: var(--neutral-color);
    color: var(--btn-text-neutral-color);
    padding-top: 3px;
    padding-bottom: 3px;
    border-color: var(--btn-border-neutral-color);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--button-radius);
}

.my-btn-neutral:hover, .btn.my-btn-neutral:active{
    background-color: var(--btn-neutral-color-hover);
    border-color: var(--btn-border-neutral-color-hover);
    color: var(--btn-text-neutral-color-hover);
}


.auth-logo{
    max-width: 300px;
}