/*
 * __ˍ__ˍ__ˍ__ˍ__ˍ__ˍ__ˍ__ˍ__ˍ
 * --------- General ---------
 * ‾‾¯‾‾¯‾‾¯‾‾¯‾‾¯‾‾¯‾‾¯‾‾¯‾‾¯
 */
.button {
	display: block;
    position: relative;
    width: 100%;
    height: 44px;
    padding: 0 20px;
    background: transparent;
    border: 1px;
    border-color: #252324;
    border-radius: 22px;
	text-align: center;
    cursor: pointer;
    white-space: normal;
    overflow: hidden;
}

.button:after {
    content: '';
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 22px;
    left: -1px;
    top: -1px;
    z-index: 10;
    transition: background 0.2s ease-in-out;
}

.button-large {
	display: block;
    position: relative;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    background: transparent;
    border: 1px ;
    border-color: #252324;
    border-radius: 28px;
	text-align: center;
    overflow: hidden;
    white-space: normal;
}

.button-large:after {
    content: '';
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 22px;
    left: -1px;
    top: -1px;
    z-index: 10;
    transition: background 0.2s ease-in-out;
}

.button span,
.button-large span {
    display: inline-block;
    vertical-align: middle;
    font-family: 'Inter', sans-serif;
    /*font-size: 13px;*/
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    position: relative;
    z-index: 15;
}

.button:before,
.button-large:before {
    z-index: 15;
}

.button span {
    line-height: 44px;
    transition: all 0.36s;
}

.button-large span {
    line-height: 53px;
}

.button-outline-dark {
    border: 1px solid #CCCCCC;
    transition: 0.36s all;
}

.button-outline-dark:hover {
    border: 1px solid #808080;
}

/*.button-outline-dark:after{*/
/*    width: calc(100% + 2px);*/
/*    height: calc(100% + 2px);*/
/*    left: -1px;*/
/*    top: -1px;*/
/*}*/

.button-outline-dark span {
    color: #252324;
}

/*.button-outline-dark:hover:after {*/
/*    background: rgba(37,35,36,0.15);*/
/*}*/

/*.button-outline-dark:focus:after {*/
/*    background: rgba(37,35,36,0.4);*/
/*}*/

.button-outline-success {
    border-color: #079048;
    box-shadow: 0 0 0 0.25px #079048;
}

.button-outline-success:after{
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    left: -1px;
    top: -1px;
}

.button-outline-success span {
    color: #079048;
}

.button-outline-success:hover:after {
    background: rgba(7,144,72,0.15);
}

/*.button-outline-success:focus:after {*/
/*    background: rgba(7,144,72,0.4);*/
/*}*/

.button-outline-white {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 0.25px #FFFFFF;
}

.button-outline-white:after{
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    left: -1px;
    top: -1px;
}

.button-outline-white span {
    color: #FFFFFF;
}

.button-outline-white:hover:after {
    background: rgba(255,255,255,0.15);
}

/*.button-outline-white:focus:after {*/
/*    background: rgba(37,35,36,0.2);;*/
/*}*/

.button-solid-alert {
    background: #DD1018;
    border-color: #DD1018;
}

.button-solid-alert span {
    color: #FFFFFF;
    z-index: 15;
}

.button-solid-alert:hover:after {
    background: #bb1218;
}

.button-solid-dark {
    background: #252324;
    border-color: transparent;
}

.button-solid-dark span {
    color: #FFFFFF;
    z-index: 15;
}

.button-solid-dark:hover:after {
    background: #000;
}

/*.button-solid-dark:focus:after {*/
/*    background: rgba(37,35,36,0.50);*/
/*}*/

/* TEST NEW BUTTONS */
.button-solid-success-new {
    background-image: linear-gradient(180deg, #009F4C 0%, #006D34 100%);
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 9px 0 rgba(174,174,174,0.50), inset 0 -1px 0 0 rgba(0,0,0,0.35), inset 0 1px 0 0 rgba(255,255,255,0.50);
}

.button-solid-success-new:hover {
    background-image: linear-gradient(180deg, #00853F 0%, #006D34 100%);
}

.button-solid-success-new span {
    color: #FFFFFF;
}

.button-solid-success-new:after {
    display: none;
}


.button-outline-dark-new {
    background-image: linear-gradient(180deg, #717171 0%, #262626 100%);
    border: 1px solid #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(174,174,174,0.50), inset 0 -1px 0 0 rgba(0,0,0,0.55), inset 0 1px 0 0 rgba(255,255,255,0.50);
}

.button-outline-dark-new:hover {
    background-image: linear-gradient(180deg, #4A4A4A 0%, #262626 100%);
}

.button-outline-dark-new span {
    color: #fff;
}
.button-outline-dark-new:after {
    display: none;
}
/* END TEST NEW BUTTONS */

.button-solid-success {
    background: #079048;
    border-color: transparent;
}

.button-solid-success span {
    color: #FFFFFF;
}

.button-solid-success:hover:after {
    background: rgba(37,35,36,0.30);
    mix-blend-mode: overlay;
}

body:not(.is-mobile) .button-solid-success:hover:after {
    background: rgba(37,35,36,0.30);
    mix-blend-mode: overlay;
}

/*.button-solid-success:focus:after {*/
/*    background: rgba(37,35,36,0.30);*/
/*}*/

.button-solid-white {
    background: #FFFFFF;
}

.button-solid-white span {
    color: #252324;
}

.button-solid-white:hover:after {
    background: rgba(37,35,36,0.15);
    /*mix-blend-mode: overlay;*/
}

/*.button-solid-white:focus:after {*/
/*    background: rgba(37,35,36,0.30);*/
/*}*/

.button-transparent-dark {
    border-color: transparent;
}

.button-transparent-dark span {
    color: #252324;
}

.button-transparent-white {
    border-color: transparent;
}

.button-transparent-white span {
    color: #ffffff;
}


/*.effect-ripple {*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    background-color: rgba(255, 255, 255, 0.2);*/

/*    width: 100px;*/
/*    height: 100px;*/
/*    margin-top: -50px;*/
/*    margin-left: -50px;*/

/*    animation: ripple 1s;*/
/*    opacity: 0;*/
/*}*/

/*@keyframes ripple {*/
/*    from {*/
/*        opacity: 1;*/
/*        transform: scale(0);*/
/*    }*/
/*    to {*/
/*        opacity: 0;*/
/*        transform: scale(10);*/
/*    }*/
/*}*/

/*div.ripple {*/
/*    position: absolute;*/
/*    border-radius: 50%;*/
/*    transform: scale(0);*/
/*    animation: ripple 600ms linear;*/
/*    background-color: rgba(255, 255, 255, 0.2);*/
/*}*/

/*@keyframes ripple {*/
/*    to {*/
/*        transform: scale(4);*/
/*        opacity: 0;*/
/*    }*/
/*}*/