/********************************/
/***** CONFIGURATION BUTTON *****/
/********************************/
.btn {
    display: inline-block;
    height: 30px;
    border: 2px solid var(--menu-link);
    border-radius: 7px;
    cursor: pointer;
    transition: 0.25s ease-in-out;
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
}

.btn-home, .btn-contact, .btn-previous, .btn-next, .btn-email, .btn-copy, .btn-calendar {
    width: 100px;
    padding: 15px 40px;
}

.btn-reset {
    width: 50px;
    padding: 15px 20px;
}

.btn-home, .btn-contact, .btn-reset, .btn-previous, .btn-next, .btn-email, .btn-copy, .btn-calendar {
    border: 1px solid var(--white);
    text-decoration: none;
    background-size: 50px;
}

.btn-home {
    background-image: url("../../img/home_white.svg");
    background-size: 30px;
    background-color: var(--purple);
}

.btn-email {
    background-image: url("../../img/email_white.svg");
    background-size: 35px;
}

.btn-previous {
    background-image: url("../../img/bold_arrow_left_white.svg");
}

.btn-previous.absolute {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    height: 100px;
    width: 90px;
    z-index: 5;
    box-shadow: 0 0 15px black;
    transition: 0.5s ease-in;
    border-radius: 10px;
}

.btn-previous.absolute:hover {
    box-shadow: 0 0 10px var(--card-hover);
}

.btn-next {
    background-image: url("../../img/bold_arrow_right_white.svg");
}

.btn-e-mail {
    background-image: url("../../img/email_white.svg");
    background-size: 30px;
}

.btn-contact {
    background-image: url("../../img/@_white.svg");
    background-size: 30px;
}

.btn-valid {
    background-image: url("../../img/check_white.svg");
    background-size: 20px;
    background-color: var(--green);
    width: 170px;
    padding: 13px 40px;
}

.btn.notValid {
    cursor: initial;
}

.btn-valid.notValid {
    background-color: var(--black);
}

.btn-reset, .btn-reset-picture {
    background-image: url("../../img/reset_white.svg");
    background-size: 20px;
    background-color: var(--darkorange);
}

.btn-edit, .btn-delete, .btn-e-mail, .btn-passwd, .btn-archive, .btn-podium, .btn-generate, .btn-text, .btn-qr-code {
    background-color: transparent;
    width: 150px;
    padding: 15px 40px;
}

.btn-visible, .btn-not-visible, .btn-download {
    background-color: transparent;
    background-size: 30px;
    width: 50px;
    padding: 0;
}

.btn-visible {
    background-image: url("../../img/view_available_white.svg");
}

.btn-download {
    background-image: url("../../img/download_white.svg");
    background-size: 20px;
}

.btn-not-visible {
    background-image: url("../../img/view_no_available_white.svg");
}

.btn-add, .btn-minus {
    background-color: var(--blue);
    background-size: 25px;
    padding: 18px;
}

.btn-csv {
    background-color: var(--green);
    background-size: 25px;
    padding: 18px;
    width: 50px;
}

.btn-cancel, .btn-cancel-picture {
    background-color: var(--red);
    background-image: url("../../img/cross_white.svg");
}

.btn-cancel {
    width: 120px;
}

.btn-delete {
    background-image: url("../../img/delete_red.svg");
}

.btn-delete.black {
    background-image: url("../../img/delete_white.svg");
}

.btn-e-mail {
    background-image: url("../../img/email_white.svg");
    background-size: 30px;
}

.btn-copy {
    background-image: url("../../img/copy_white.svg");
    background-color: transparent;
    background-size: 25px;
    padding: 13px 13px;
    border: 2px solid var(--nav-bar-hover);
    width: 25px;
}

.btn-passwd {
    background-size: 30px;
    background-image: url("../../img/security-password.svg");
}

.btn-edit {
    background-size: 22px;
    background-image: url("../../img/pencil_color.svg");
}

.btn-text {
    padding: 25px;
    width: 50px;
    background-size: 35px;
    background-color: var(--darkorange);
    background-image: url("../../img/text_white.svg");
}

.btn-qr-code {
    padding: 25px;
    width: 50px;
    background-size: 35px;
    background-color: var(--darkorange);
    background-image: url("../../img/qr-code_white.svg");
}

.btn-archive {
    background-size: 30px;
    background-image: url("../../img/archive_white.svg");
}

.btn-add {
    background-image: url("../../img/plus_white.svg");
}

.btn-csv {
    background-image: url("../../img/csv.svg");
}

.btn-minus {
    background-image: url("../../img/minus_white.svg");
}

.btn-podium {
    top: 3px;
    background-image: url("../../img/podium.svg");
}

.btn-generate {
    top: 3px;
    background-image: url("../../img/gear.svg");
}

.btn-calendar {
    background-image: url("../../img/calendar_white.svg");
    background-size: 25px;
    width: 25px;
    padding: 15px;
}

.btn-add-minus {
    position: relative;
    display: inline-block;
    border: none;
    background-color: var(--nav-bar-hover);
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--white);
    text-align: center;
    line-height: 40px;
    width: 125px;
    cursor: initial;
}

.both {
    position: absolute;
}

.btn-minus.both {
    left: 0;
}

.btn-add.both {
    right: 0;
}

.btn:hover {
    background-color: var(--nav-bar);
}

.btn.notValid:hover {
    background-color: var(--black);
}

.btn.btn-add-minus:hover {
    background-color: var(--nav-bar-hover);
}

.not-active {
    background-color: var(--black);
    color: var(--white);
    cursor: initial;
    font-size: 0.9rem;
    opacity: 15%;
    padding: 5px 20px;
}

.btn.not-active {
    height: 32px;
    position: relative;
    top: 2px;
}

.not-active:hover {
    background-color: var(--black);
}

/*******************************************************************************/
/********************************* BTN SLIDE ***********************************/
/*******************************************************************************/

/*******************************************************************************/
/***** <a type="button" class="btn-inter-slide">                           *****/
/*****     <span class="inter"></span>                                     *****/
/***** </a>                                                                *****/
/*******************************************************************************/
/***** const btnInterSlide = document.querySelectorAll('.btn-inter-slide') *****/
/*****                                                                     *****/
/***** btnInterSlide.forEach(btnSlide => {                                 *****/
/*****     btnSlide.addEventListener('click', () => {                      *****/
/*****         btnSlide.children.item(0).classList.toggle('inter-change')  *****/
/*****     })                                                              *****/
/***** })                                                                  *****/
/*******************************************************************************/
.btn-inter-slide {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 25px;
    background-color: var(--grey-menu);
    border-radius: 20px;
    cursor: pointer;
    transition: opacity 0.5s;
}

.btn-inter-slide.disabled, .btn-inter-slide:hover.disabled {
    opacity: 30%;
    cursor: initial;
}

.btn-inter-slide:hover {
    opacity: 50%;
}

.btn-inter-slide-txt {
    position: absolute;
    display: flex;
    width: 100%;
    line-height: 25px;
    font-size: 0.55rem;
}

.btn-inter-slide-txt p {
    position: absolute;
    width: 50%;
}

.btn-inter-slide-txt-off {
    left: 0;
    color: var(--black);
    padding-left: 2px;
}

.btn-inter-slide-txt-on {
    left: 50%;
    padding-left: 4px;
}

.inter {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: var(--red);
    border-radius: 100%;
    transition: transform 0.5s, background-color 0.5s;
}

.inter-change {
    transform: translateX(15px);
    background-color: var(--green);
}