.english-button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    text-transform: uppercase;
}

input.english-button {
    border: none;
}

.english-button_status_loading::after {
    background: url("/wp-content/themes/english/assets/images/preloader-white.gif") no-repeat 0 0;
    width: 15px;
    height: 15px;
    -webkit-background-size: 100%;
    background-size: 100%;
    content: '';
    position: absolute;
    left: 7px;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.english-button.loading,
.puzzle-button.loading {
    background: #71b26f url("/wp-content/themes/english/assets/images/preloader-20x20-green.gif") no-repeat 95% 18px;
    padding-left: 40px;
}

.english-button.loading.loading-left,
.puzzle-button.loading.loading-left {
    background-position: 10px;
}

.puzzle-button.loading.loading-middle {
    background-position: 50%;
}

.puzzle-button.loading {
    padding-left: 0;
}

.english-button_style_green {
    color: #fff !important;
    background-color: #79c177;
    box-shadow: inset 0 -3px 0 0 #599f57;
    -webkit-box-shadow: inset 0 -3px 0 0 #599f57;
}

.english-button_style_green:hover {
    color: #fff !important;
    background-color: #82cd80;
    box-shadow: inset 0 -3px 0 0 #599f57;
    -webkit-box-shadow: inset 0 -3px 0 0 #599f57;
}

.english-button_style_green:active {
    color: #fff !important;
    background-color: #79c177;
    box-shadow: inset 0 -2px 0 0 #599f57;
    -webkit-box-shadow: inset 0 -2px 0 0 #599f57;
}

.english-button_style_restore svg path {
    fill: #fff !important;
}
.english-button_style_restore svg g {
    stroke: #fff !important;
}

.english-button_style_restore svg path {
    fill: transparent !important;
}

.english-button_style_purple {
    color: #f0f0f0 !important;
    background-color: #9f66d8;
    box-shadow: inset 0 -3px 0 0 #64309a;
    -webkit-box-shadow: inset 0 -3px 0 0 #64309a;
}

.english-button_style_purple:hover {
    color: #f0f0f0 !important;
    background-color: #ad6fea;
    box-shadow: inset 0 -3px 0 0 #64309a;
    -webkit-box-shadow: inset 0 -3px 0 0 #64309a;
}

.english-button_style_purple:active {
    color: #f0f0f0 !important;
    background-color: #9c66d2;
    box-shadow: inset 0 -2px 0 0 #64309a;
    -webkit-box-shadow: inset 0 -2px 0 0 #64309a;
}

.english-button_style_pink {
    color: #fff !important;
    background-color: #f54750;
    box-shadow: inset 0 -3px 0 0 #b72b22;
    -webkit-box-shadow: inset 0 -3px 0 0 #b72b22;
}

.english-button_style_pink:hover {
    color: #f0f0f0 !important;
    background-color: #fb5b63;
    box-shadow: inset 0 -3px 0 0 #d6453c;
    -webkit-box-shadow: inset 0 -3px 0 0 #d6453c;
}

.english-button_style_pink:active {
    color: #f0f0f0 !important;
    background-color: #e63e46;
    box-shadow: inset 0 -2px 0 0 #e63e46;
    -webkit-box-shadow: inset 0 -2px 0 0 #e63e46;
}

.english-button_style_blue {
    color: #fff !important;
    background-color: #3197d9;
}

.english-button_style_blue:hover {
    color: #fff !important;
    background-color: #2382f5;
}

.english-button_style_blue:active {
    color: #fff !important;
    background-color: #1d6be0;
}

.english-button_style_light-blue {
    color: #fff !important;
    background-color: #1da5de;
    box-shadow: inset 0 -2px 0 0 #0071c1;
    -webkit-box-shadow: inset 0 -2px 0 0 #0071c1;
}

.english-button_style_light-blue:hover {
    color: #fff !important;
    background-color: #31b2e8;
    box-shadow: inset 0 -2px 0 0 #0787e2;
    -webkit-box-shadow: inset 0 -2px 0 0 #0787e2;
}

.english-button_style_light-blue:active {
    color: #fff !important;
    background-color: #31b2e8;
    box-shadow: inset 0 2px 0 0 #0787e2;
    -webkit-box-shadow: inset 0 2px 0 0 #0787e2;
}

.english-button_style_red {
    color: #fff !important;
    background-color: #ef3939;
}

.english-button_style_red:hover {
    color: #fff !important;
    background-color: #f6403f;
}

.english-button_style_red:active {
    color: #fff !important;
    background-color: #e43434;
}

.english-button_style_orange {
    color: #2f4051 !important;
    background-color: #febe46;
}

.english-button_style_orange:hover {
    color: #2f4051 !important;
    background-color: #ffcf4d;
}

.english-button_style_orange:active {
    color: #2f4051 !important;
    background-color: #fdad40;
}

.english-button_style_white {
    color: #333 !important;
    background-color: #fff;
    box-shadow: inset 0 -3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 -3px 0 0 #ccc;
}

.english-button_style_white:hover {
    color: #333 !important;
    background-color: #fff;
    box-shadow: inset 0 -3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 -3px 0 0 #ccc;
}

.english-button_style_white:active {
    color: #333 !important;
    background-color: #fff;
    box-shadow: inset 0 3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 3px 0 0 #ccc;
}

.english-button_style_gray {
    color: #333 !important;
    background-color: #f6f6f6;
    box-shadow: inset 0 -3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 -3px 0 0 #ccc;
}

.english-button_style_gray:hover {
    color: #333 !important;
    background-color: #f6f6f6;
    box-shadow: inset 0 -3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 -3px 0 0 #ccc;
}

.english-button_style_gray:active {
    color: #333 !important;
    background-color: #f6f6f6;
    box-shadow: inset 0 3px 0 0 #ccc;
    -webkit-box-shadow: inset 0 3px 0 0 #ccc;
}

.english-button_style_dark_gray {
    color: #fff !important;
    background-color: #ccc;
    box-shadow: inset 0 -3px 0 0 #abacad;
    -webkit-box-shadow: inset 0 -3px 0 0 #abacad;
}

.english-button_style_dark_gray:hover {
    color: #fff !important;
    background-color: #d5d5d5;
    box-shadow: inset 0 -3px 0 0 #abacad;
    -webkit-box-shadow: inset 0 -3px 0 0 #abacad;
}

.english-button_style_dark_gray:active {
    color: #fff !important;
    background-color: #d5d5d5;
    box-shadow: inset 0 -2px 0 0 #abacad;
    -webkit-box-shadow: inset 0 -2px 0 0 #abacad;
}

.english-button_disabled,
.english-button_type_disabled {
    color: #848484 !important;
    background-color: #c7c7c7 !important;
    box-shadow: inset 0 -3px 0 0 #ccc !important;
    -webkit-box-shadow: inset 0 -3px 0 0 #ccc !important;
    cursor: default !important;
}

.english-button_type_flat {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.english-button_type_icon {
    position: relative;
    min-width: 42px;
    height: 40px;
    border-radius: 5px;
}

.css-icon-white path{
    fill: #fff;
}

.english-button_type_icon .puzzle-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.english-button_size_xs {
    min-width: 135px;
    padding: 7px 14px 10px !important;
    font-size: 16px;
}

.english-button_size_s {
    min-width: 200px;
    padding: 7px 14px 10px !important;
    font-size: 17px;
}

.english-button_size_m {
    min-width: 150px;
    padding: 15px 32px;
    font-size: 14px;
}

.english-button_size_l {
    min-width: 160px;
    padding: 17px 10px 19px;
    font-size: 18px;
}

.english-button_size_xl {
    min-width: 220px;
    padding: 19px 60px 21px;
    font-size: 18px;
}

.arabic .level-test .j-next_question_btn .puzzle-icon{
    transform: rotateY(180deg);
}

/*Extra small devices (phones)*/

@media only screen and (max-width : 767px) {

    .english-button_size_xl {
        font-size: 16px;
    }

}