.button-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    color: #ffffff;
    background-color: var(--primary-color);
    border: solid 1px var(--primary-color);
    padding: 5px;
    width: 100%;
    max-width: 310px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 5px;
    transition: 0.15s;
    position: relative;
    font-size: 20px;
    font-weight: 600;
}

.button:hover {
    color: var(--primary-color);
    background-color: white;
    cursor: pointer;
    top: 1px;
    left: 1px;
    box-shadow: 0 2px 2px rgba(11,33,74,0.06), 0 -1px 1px rgba(11,33,74,0.03);
}


/* ---------- secondary-button, red/green-button, two/three-button, mini-button ---------- */
.secondary-button {
    background-color: white;
    border: 1px solid #d1d5db;
    /*color: #70abff;*/
    /*color: #5796ea; !* essai de couleur pour pas faire aussi "voyant"/important que le #2f80ed mais plutôt rester secondaire *!*/
    color: var(--primary-color);
}

.secondary-button:hover {
    color: var(--primary-color);
    border: 1px solid #d2e3fc;
    background-color: #e8f0fe;
    box-shadow: none;
}
        
.red-button {
    color: rgb(235, 87, 87);
}

.red-button:hover {
    color: #EB5757;
    border: 1px solid #EB5757;
    background-color: rgba(235, 87, 87, 0.1);
}

.green-button {
    color: rgb(33, 150, 83);
}

.green-button:hover {
    color: #219653;
    border: 1px solid #219653;
    background-color: rgba(33, 150, 83, 0.1);
}

.two-button {
    width: 50%;
}

.three-button {
    width: 33.3%;
    overflow: hidden;
}

.mini-button {
    width: 130px;
}

.secondary-button .button-content, .mini-button .button-content {
    letter-spacing: 0.7px;
    font-weight: 600;
    text-transform: uppercase;
    filter: none;
}

.secondary-button .button-content {
    font-size: 15px;
}

.mini-button .button-content {
    font-size: 11px;
}

.no-box-button {
    transition: 0.2s;
    box-shadow: none;
    background-color: transparent;
    border: none;
    color: var(--primary-color);
}

.no-box-button .button-content {
    font-size: 11px;
    letter-spacing: 1px;
}

.no-box-button:hover {
    background-color: rgba(47, 128, 237, 0.23);
    border: none;
    top: initial;
    left: initial;
    box-shadow: none;
}


/* ---------- button-icon ---------- */
.button-icon-left, .button-icon-right {
    display: flex;
    align-items: center;
    position: relative;
    height: 24px;
}

.button-icon-left {
    margin-right: 22px;
}

.button-icon-right {
    margin-left: 22px;
}

.two-button .button-icon-left {
    margin-right: 12px;
}

.two-button .button-icon-right {
    margin-left: 12px;
}

.three-button .button-icon-left {
    margin-right: 9px;
}

.three-button .button-icon-right {
    margin-left: 9px;
}

.mini-button .button-icon {
    height: 20px;
}

.mini-button .material-icons-outlined {
    font-size: 20px;
}