/**********************************************************/
/* UP DOWN SCROLLING BUTTONS */
/**********************************************************/

.upbtn, .downbtn {
    z-index: 9999 !important;
    width: 60px !important;
    height: 60px !important;
    position: fixed !important;
    right: 20px !important;
    cursor: pointer !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    visibility: hidden !important;
    will-change: opacity, transform !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* Плавное появление кнопок */
    transition: opacity 0.35s ease-in-out,
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.upbtn {
    bottom: 20px !important;
    top: auto !important;
}

.downbtn {
    bottom: 20px !important;
    top: auto !important;
}

.upbtn.visible, .downbtn.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.upbtn:hover, .downbtn:hover {
    transform: scale(1.12) !important;
}

.upbtn {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAwKSI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik01IDE1TDEwIDkuODQ5ODVDMTAuMjU2MyA5LjU3NjE2IDEwLjU2NiA5LjM1ODE0IDEwLjkxMDEgOS4yMDg5OEMxMS4yNTQxIDkuMDU5ODMgMTEuNjI1IDguOTgyOTEgMTIgOC45ODI5MUMxMi4zNzUgOC45ODI5MSAxMi43NDU5IDkuMDU5ODMgMTMuMDg5OSA5LjIwODk4QzEzLjQzNCA5LjM1ODE0IDEzLjc0MzcgOS41NzYxNiAxNCA5Ljg0OTg1TDE5IDE1IiBzdHJva2U9IiMyOTk2Y2MiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD4gPC9nPjwvc3ZnPg==") !important;
}

.downbtn {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwMDAwIiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAtMSwgMCwgMCkiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+PGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c+PGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8cGF0aCBkPSJNNSAxNUwxMCA5Ljg0OTg1QzEwLjI1NjMgOS41NzYxNiAxMC41NjYgOS4zNTgxNCAxMC45MTAxIDkuMjA4OThDMTEuMjU0MSA5LjA1OTgzIDExLjYyNSA4Ljk4MjkxIDEyIDguOTgyOTFDMTIuMzc1IDguOTgyOTEgMTIuNzQ1OSA5LjA1OTgzIDEzLjA4OTkgOS4yMDg5OEMxMy40MzQgOS4zNTgxNCAxMy43NDM3IDkuNTc2MTYgMTQgOS44NDk4NUwxOSAxNSIgc3Ryb2tlPSIjMjk5NmNjIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+IDwvZz48L3N2Zz4=") !important;
}
