/* BTN MATERIALIZE EFFECT */
.btn-materialize {
    cursor:pointer;
    height:33px;
    padding-left:10px !important;
    padding-right:10px !important;
    outline: none !important;
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    border-width: 0;
    outline: none;
    border-radius: 4px;
    background-color:transparent;
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f;
}
.btn-materialize:hover {
    background-color: rgba(236, 240, 241, .3);
}

.btn-materialize-light {
    box-shadow: unset !important;
}
.btn-materialize-light:is(:hover,:focus) {
    transition:0.1s ease all;
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f !important;
}
.btn-materialize > * {
    position: relative;
}
.btn-materialize span {
    display: block;
    padding: 12px 24px;
}
.btn-materialize:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    padding-top: 0;
    border-radius: 100%;
    background-color: rgba(236, 240, 241, .7);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 4px;
}
.btn-materialize:active:before {
    width: 120%;
    padding-top: 120%;
    transition: width .2s ease-out, padding-top .2s ease-out;
}