/* Button */
.asidebtn {
    background-color: transparent;
    color: var(--text-primary);
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: var(--fw-md);
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    transition: var(--transition);
}

.asidebtn.active,
.asidebtn:hover {
    background-color: var(--text-primary);
    color: var(--secondary);
}

.formbtn,
.headbtn,
.modalbtn {
    background-color: var(--secondary);
    color: var(--text-primary);
    font-weight: var(--fw-lg);
    border: 2px solid var(--primary);
    border-radius: 5px;
    padding: 4px 25px;
}

.cancelbtn {
    background-color: var(--primary);
    color: var(--secondary);
    font-weight: var(--fw-lg);
    border: 2px solid var(--primary);
    border-radius: 5px;
    padding: 5px 25px;
}

.listbtn {
    background-color: var(--secondary);
    color: var(--text-primary);
    font-weight: var(--fw-lg);
    border: none;
    border-radius: 20px;
    padding: 5px 25px;
}

.addbtn,
.deletebtn {
    font-weight: var(--fw-lg);
    border: none;
    padding: 3px 15px;
    border-radius: 3px;
    transition: var(--transition);
}

.addbtn {
    background-color: var(--green);
    color: var(--text-primary);
    border: 2px solid var(--green);
}

.deletebtn {
    background-color: var(--red);
    color: var(--secondary);
    border: 2px solid var(--red);
}

.profilebtn {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--secondary);
    border-bottom: none;
    font-weight: var(--fw-md);
    border-radius: 5px 5px 0px 0px;
    padding: 5px 20px;
}

/* Transition */
.formbtn,
.listbtn,
.headbtn,
.modalbtn,
.deletebtn,
.cancelbtn,
.addbtn {
    transition: var(--transition);
    box-shadow: 0 0 .875rem 0 rgba(33, 37, 41, .05);
}

/* Hover */
.formbtn:hover,
.headbtn:hover,
.modalbtn:hover,
.listbtn:hover,
.listbtn.active {
    background-color: var(--primary);
    color: var(--secondary);
}

.profilebtn:hover,
.profilebtn.active {
    background-color: var(--secondary);
    color: var(--text-primary);
    border-bottom: none;
}

.cancelbtn:hover {
    background-color: var(--secondary);
    color: var(--text-primary);
}

.addbtn:hover,
.deletebtn:hover {
    background-color: var(--secondary);
    color: var(--text-primary);
}

@media screen and (min-width: 767px) {

    /* Button */
    .formbtn,
    .headbtn,
    .modalbtn,
    .listbtn,
    .cancelbtn,
    .profilebtn {
        font-size: 12px;
    }

    .addbtn,
    .deletebtn {
        font-size: 12px;
    }
}

@media screen and (max-width: 767px) {

    /* Button */
    .formbtn,
    .headbtn,
    .modalbtn,
    .listbtn,
    .cancelbtn,
    .profilebtn {
        font-size: 12px;
    }

    .addbtn,
    .deletebtn {
        font-size: 10px;
    }
}