.dashboard-nav-bars {
    width: 100%;
    bottom: 0;
    left: 0;
}

.dashboard-nav-bars .menu li .submenu {
    width: auto;
    background: #262626;
    transform: translate(-50%);
    top: -45px;
    left: 50%;
}

.dashboard-nav-bars .menu li .submenu a {
    color: white;
    padding: 4px 10px;
}

.dashboard-nav-bars .menu li .submenu li a:hover {
    padding-left: 10px;
    background: #262626;
}


.wrap-button-container .button {
    min-width: 63px;
    min-height: 63px;
    font-family: 'Nunito', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #fff;
    /* background: #4FD1C5; */
    /* background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); */
    border: none;
    border-radius: 1000px;
    box-shadow: 12px 12px 24px rgba(188, 197, 196, 0.2);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 10px;
    border: 4px solid #fff;
    /* opacity: 0.5; */
}

.wrap-button-container .button:hover {
    transform: scale(1.05);
}

.wrap-button-container .button.purple {
    background: #71336D;
    /* background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); */
}

.wrap-button-container .button.blue {
    background: #432C4F;
}

.wrap-button-container .button.dark {
    background: #27273C;
}

.wrap-button-container .button.light-green {
    background: #C1F376;
    /* background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%); */
}

.wrap-button-container .button.middle-green {
    background: #55C233;
}

.wrap-button-container .button.dark-green {
    background: #37AE0F;
}

.wrap-button-container button::before {
    content: '';
    border-radius: 1000px;
    min-width: calc(60px + 12px);
    min-height: calc(60px + 12px);
    /* border: 6px solid #00FFCB; */
    /* box-shadow: 0 0 60px rgba(0,255,203,.64); */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease-in-out 0s;
}

.wrap-button-container button:hover {
    border: 6px solid #fff;
    /* border: 6px solid #71336d; */
    box-shadow: 0 0 60px rgba(0, 255, 203, .64);
}

.wrap-button-container button.purple::before {
    /* border: 6px solid #fff; */
    /* border: 6px solid #71336d; */
    /* box-shadow: 0 0 60px rgba(0,255,203,.64); */
}

.wrap-button-container button.blue::before {
    /* border: 6px solid #fff; */
    /* border: 6px solid #432C4F; */
    /* box-shadow: 0 0 60px rgba(0,255,203,.64); */
}

.wrap-button-container button.dark::before {
    /* border: 6px solid #fff; */
    /* border: 6px solid #27273C; */
    /* box-shadow: 0 0 60px rgba(0,255,203,.64); */
}

/* .wrap-button-container .button:hover, .button:focus {
  transform: translateY(-2px);
} */

.wrap-button-container button:hover::before, button:focus::before {
    opacity: 1;
}

.wrap-button-container button:hover::after {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 100%;
    /* border: 2px solid #00FFCB; */
    border: 2px solid #fff;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 3s infinite;
}

@keyframes ring {
    0% {
        width: 30px;
        height: 30px;
        opacity: 0.2;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}