.light-theme {
	--color-font: #333;
}

.dark-theme {
	--color-font: #FFF;
}



.button {
    border:                                                     0;
    padding:                                                    0;
    margin:                                                     0;
    box-shadow:                                                 none;
    outline:                                                    none;
    background:                                                 none;

    cursor:                                                     pointer;

    font-size:                                                  15px;
    font-weight:                                                500;
    letter-spacing:                                             0.75px;
}


.button--header {
    width:                                                      175px;
    height:                                                     45px;

    color:                                                      var(--fontcolor-header-button);
    background-color:                                           var(--background-header-button);
    transition:                                                 background-color 0.4s ease, color 0.4s ease;
}

.button--header:hover {
    color:                                                      var(--fontcolor-header-button-hover);
    background-color:                                           var(--background-header-button-hover);
}

.button--auth {
    width:                                                      280.7px;
    height:                                                     50px;

    color:                                                      var(--fontcolor-button-auth);
    background-color:                                           var(--background-button-auth);

    transition:                                                 background-color 0.3s ease;
}

.button--auth:hover {
    color:                                                      var(--fontcolor-button-auth-hover);
    background-color:                                           var(--background-button-auth-hover);
}

.button--tools {
    width:                                                      224px;
    height:                                                     45px;

    display: flex;
    justify-content: left;
    align-items: center;

    padding-left:                                               10px;


    font-size:                                                  10.5px;
    /* font-weight:                                                600; */

    color:                                                      var(--color-font);
    /* background-color:                                           var(--background-button-auth); */

    transition:                                                 background-color 0.3s ease;
}

.button--tools-selected {
    background-color:                                           var(--background-button-auth);
}

.button--tools:hover {
    color:                                                      var(--fontcolor-button-auth-hover);
    background-color:                                           var(--background-button-auth-hover);
}


.button--image {
    width:                                                      170px;
    height:                                                     170px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius:                                              50%;

    color:                                                      var(--fontcolor-button-auth);
    background-color:                                           var(--background-button-auth);

    transition:                                                 background-color 0.3s ease;
}

.button--image:hover {
    color:                                                      var(--fontcolor-button-auth-hover);
    background-color:                                           var(--background-button-auth-hover);
}


.button--tools-item {
    width:                                                      248px;
    height:                                                     45px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-left:                                               10px;


    font-size:                                                  10.5px;
    font-weight:                                                600;

    color:                                                      var(--fontcolor-button-auth);
    background-color:                                           var(--background-button-auth);

    transition:                                                 background-color 0.3s ease;
}


.button--tools-item:hover {
    color:                                                      var(--fontcolor-button-auth-hover);
    background-color:                                           var(--background-button-auth-hover);
}


.button--superuser {
    color:                                                      var(--fontcolor-button-logout);
}

.button--article {
    display:                                                    flex;
    justify-content:                                            center;
    align-items:                                                center;

    width:                                                      226px;
    height:                                                     60px !important;

    margin-top:                                                 25.5px;
    margin-bottom:                                              25.5px;
}

.button--modal {
    width:                                                      100px;
    height:                                                     30px;

    color:                                                      var(--fontcolor-header-button);
    background-color:                                           var(--background-header-button);
    border-radius:                                              20px;

    font-size:                                                  13px;

    /* transition:                                                 background-color 0.4s ease, color 0.4s ease; */
}