/* Toolbar Styles */
#toolbar {
    position: fixed;
    z-index: 9999;
    right: 17px;
    bottom: 15%;
}

#toolbar ul {
    padding: 0;
    margin: 0;
}

#toolbar li {
    margin-bottom: 3px;
    font-size: 0;
    width: 57px;
    height: 57px;
    right: 0;
    position: relative;
    list-style: none;
}

#toolbar li a {
    display: block;
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    width: 57px;
    height: 57px;
    overflow: hidden;
    background: #333;
    transition: 0.5s;
    white-space: nowrap;
    font-size: 0;
    text-decoration: none;
}

#toolbar li .icon-font {
    display: inline-block;
    vertical-align: middle;
    width: 57px;
    height: 57px;
    background-color: rgb(217, 217, 217);
    position: relative;
}

#toolbar li .wz {
    display: inline-block;
    line-height: 57px;
    font-size: 14px;
    color: rgb(255, 255, 255);
    vertical-align: middle;
}

/* Icons using CSS pseudo-elements with background images */
#toolbar li .icon-font::after {
    content: "";
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3C/svg%3E");
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - 15px);
    top: calc(50% - 15px);
}

/* Using inline SVG icons instead of external sprite */
#toolbar li .icon-phone::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#toolbar li:hover .icon-phone::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}


#toolbar li .icon-message::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#toolbar li:hover .icon-message::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z'/%3E%3C/svg%3E");
}

#toolbar li .icon-top::before {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: 0.3s;
}

#toolbar li:hover .icon-top::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
}


/* Hover Effects */
#toolbar li:hover a {
    width: 210px;
}

#toolbar li:hover .icon-font {
    background-color: #333;
}

#toolbar .backtop {
    cursor: pointer;
}