@import url('font/stylesheet.css');

:root {
    box-sizing: border-box;
}

*,
 ::before,
 ::after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Gilroy';
    background: #F2F2F2;
}

img {
    max-width: 100%;
    height: auto;
}

div#app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bold {
    font-weight: 500;
}





/* head */

.head {
    background: #D2CFFF;
}

.head>.wrap {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

@media (min-width: 1465px) {
    .head>.wrap {
        padding: 20px 0;
    }
}

.head>.wrap>.logo>img {
    max-width: 85px;
}

@media (min-width: 768px) {
    .head>.wrap>.logo>img {
        max-width: 120px;
    }
}

.head>.wrap>.wrap {
    display: flex;
    align-items: center;
}

.head>.wrap>.wrap>.back,
.body>.panel>.back {
    position: absolute;
    background: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: .5;
    z-index: 2;
}

.head>.wrap>.wrap>.wrap {
    margin-right: 30px;
    display: flex;
}

.head>.wrap>.wrap>.wrap.three {
    margin: 0 0 0 5px;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.wrap {
        display: flex;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        margin-right: 15px;
    }
}

.head>.wrap>.wrap>.wrap.two {
    margin: 0 30px 0 0;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.wrap.two {
        margin: 0 20px 0 0;
    }
}

.head>.wrap>.wrap>.wrap>svg {
    color: #6C63FE;
}

.head>.wrap>.wrap>.wrap>svg {
    width: 20px;
    height: 20px;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.wrap>svg {
        width: 22px;
        height: 22px;
    }
}

.head>.wrap>.wrap>.wrap.two svg {
    width: 22px;
    height: 22px;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.wrap.two svg {
        width: 23px;
        height: 23px;
    }
}

.head > .wrap > .wrap > .wrap > .name {
    display: none;
}

@media (min-width: 1050px) {
    .head > .wrap > .wrap > .wrap > .name {
        display: block;
        margin-left: 10px;
        font-weight: 500;
        font-size: 17px;
        line-height: 21px;
        color: #6C63FE;
    }
}

.head>.wrap>.user {
    display: none;
}

@media (min-width: 768px) {
    .head>.wrap>.user {
        display: flex;
        align-items: center;
        flex-grow: 1;
        margin-left: 30px;
    }
}


@media (min-width: 768px) {
    .head > .wrap > .user > .icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
        position: relative;
    }
}

@media (min-width: 768px) {
    .head >.wrap > .user > .icon img.img-responsive.img-rounded {
        border-radius: 5em;
        object-fit: cover;
        position: absolute;
        width: 100%;
        height: 100%;
    }
}

.head > .wrap > .user > .icon > .connect {
    width: 10px;
    height: 10px;
    background: red;
    border-radius: 10px;
    box-shadow: 0 0 5px red;
    position: absolute;
    right: 5px;
    bottom: 0;
}

.head > .wrap > .user > .icon > .connect.active {
    background: green;
    box-shadow: 0 0 5px green;
}

@media (min-width: 768px) {
    .head>.wrap>.user>.wrap>.name {
        font-weight: 500;
        font-size: 16px;
        color: #6173BB;
    }
}

@media (min-width: 768px) {
    .head>.wrap>.user>.wrap>.desc {
        font-weight: 500;
        font-size: 16px;
        color: #72828E;
        margin-top: 5px;
    }
}

.head>.wrap>.wrap>.country {
    display: none;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country {
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        cursor: pointer;
        margin-right: 20px;
        margin-top: 2.5px;
    }
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country>.name {
        font-weight: 500;
        font-size: 12px;
        line-height: 15px;
        color: #817BDC;
        text-transform: uppercase;
        border-bottom: 1px solid #817BDC;
    }
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country>img {
        width: 22px;
        height: 22px;
        margin-right: 5px;
    }
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country>.wrap {
        width: .5em;
        margin-left: 5px;
        display: flex;
        align-items: center;
    }
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country>.wrap>svg {
        color: #817BDC;
        width: 100%;
        height: 100%;
        margin-bottom: 5px;
    }
}

.head>.wrap>.wrap>.country>.langs {
    position: absolute;
    top: 22px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    min-width: 165px;
    right: 0px;
    z-index: 3;
    background: #FAFAFA;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.18);
    border-radius: 2px;
}

.head>.wrap>.wrap>.country>.langs>.lang {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .head>.wrap>.wrap>.country>.langs>.lang {
        font-size: 14px;
    }
}

.head>.wrap>.wrap>.country>.langs>.lang {
    color: #545454;
}

.head>.wrap>.wrap>.country>.langs>.lang.active {
    font-weight: bold;
}

.head>.wrap>.wrap>.country>.langs>.lang:first-of-type {
    margin-top: 0;
}


/* body country */

.body > .panel {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 2em;
}


.body>.panel>.country {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    cursor: pointer;
}

@media (min-width: 768px) {
    .body>.panel>.country {
        display: none;
    }
}

.body>.panel>.country>.name {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #817BDC;
    text-transform: uppercase;
    border-bottom: 1px solid #817BDC;
}

.body>.panel>.country>img {
    width: 22px;
    height: 22px;
    margin-right: 5px;
}

.body>.panel>.country>.wrap {
    width: .5em;
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.body>.panel>.country>.wrap>svg {
    color: #817BDC;
    width: 100%;
    height: 100%;
    margin-bottom: 5px;
}

.body>.panel>.country>.langs {
    position: absolute;
    top: 22px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    min-width: 165px;
    right: 0px;
    z-index: 2;
    background: #FAFAFA;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.18);
    border-radius: 2px;
    z-index: 3;
}

.body>.panel>.country:first-of-type>.langs {
    left: 0;
}

.body>.panel .country>.langs>.lang {
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: #545454;
    margin-top: 10px;
}

.body>.panel>.country>.langs>.lang.active {
    font-weight: bold;
}

.body>.panel>.country>.langs>.lang:first-of-type {
    margin-top: 0;
}


/* body */

#app>.wrap {
    background: linear-gradient(227.08deg, #E1E1FF -2.36%, #ECECFF 34.64%, #FEF4EF 86.74%, #FFE791 132.05%);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

@media (min-width: 1465px) {
    #app>.wrap {
        padding: 0 0 5em;
    }
}

.body {
    max-width: 1440px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}


/* footer */

.footer {
    background: #F2F2F2;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer>.wrap {
    text-align: center;
    margin: 0;
    line-height: 25px;
}

.footer .wrap a {
    color: gray;
    text-decoration: none;
}


/* body */

.body .account {
    width: 100%;
}

.body .header {
    display: flex;
    align-items: center;
    margin: 1em 0px;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 600px) {
    .body .header {
        justify-content: space-between;
        flex-direction: row;
    }
}


.body .header > .name {
    display: flex;
    align-items: center;
}


.body .header > .name.game-name {
    flex-grow: 1;
}



.body .header > .wrap_button {
    margin: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}


.body .header > .wrap_button > .name.link {
    margin: 5px;
    display: flex;
}

@media (min-width: 600px) {
    .body .header > .wrap_button > .name.link {
        margin-bottom: 0;
        margin-left: .5em;
        margin-right: 0;
    }
}

.body .header > .name > span > svg {
    color: #4951FD;
}

.body .header > .wrap_button > .name > .button {
    color: #4951FD;
    border: 1px solid #4951FD;
    padding: .5em .75em;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}


.body .header > .wrap_button > .name img {
    width: 32px;
    height: 32px;
}

.body .header>.name h1 {
    margin-left: 15px;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.02em;
    color: #4951FD;
}

.body .header > .links {
    display: flex;
    align-items: center;
}

.body .header>.links .link {
    font-size: 15.5px;
    letter-spacing: 0.01em;
    color: #4951FD;
    border: 1px solid #007AFF;
    margin-left: 25px;
    border-radius: 5px;
    padding: .25em 1.25em;
}

.body .header>.links .link.active {
    background: #E9D5FF;
    border: none;
}


/* stages */

.body .account .stages {
    display: flex;
    align-items: center;
    margin: 2em 0;
    justify-content: space-between;
    flex-direction: column;
}

@media (min-width: 1280px) {
    .body .account .stages {
        flex-direction: row;
    }
}

.body .account .stages > .name {
    margin-bottom: 1em;
    display: flex;
    align-items: center;
}

.body .account .stages > .name > .name {
    font-size: 26px;
    letter-spacing: 0.02em;
    color: #000000;
}

.body .account .stages>.name>.desc {
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #A7A7A7;
    margin-left: 10px;
}

.body > .account > .stages > .wrap {
    display: flex;
    flex-wrap: wrap;
}

.body > .account > .stages > .wrap > .stage {
    display: flex;
    position: relative;
    margin-top: 1.5em;
    flex-direction: column;
    transition: all 500ms;
}

@media (min-width: 1400px) {
    .body > .account > .stages > .wrap > .stage {
        margin-left: 2em;
    }
}

@media (min-width: 1400px) {
    .body > .account > .stages > .wrap > .stage {
        margin-top: 0;
    }
}

.body>.account>.stages>.wrap>.stage>.wrap {
    display: flex;
    align-items: center;
    margin: 0 .5em;
}

.body>.account>.stages>.wrap>.stage>.wrap svg {
    color: #4951FD;
}

.body > .account > .stages > .wrap > .stage > .wrap > .name {
    font-size: 20px;
    letter-spacing: 0.02em;
    color: black;
    margin-left: .5em;
    display: none;
}

@media (min-width: 1000px) {
    .body > .account > .stages > .wrap > .stage > .wrap > .name {
        display: block;
    }
}

.body>.account>.stages>.wrap>.stage>.line {
    width: 100%;
    height: 2px;
    opacity: 0;
    transition: all 500ms;
    margin-top: 0.75em;
}

.body>.account>.stages>.wrap>.stage>.line.active {
    opacity: 1;
    background: #4951FD;
}

.body .account .stages .wrap .stage.finished {
    opacity: .5;
}

.body .account .stages .wrap .stage.active .left {
    position: absolute;
}

.body .account .stages .wrap .stage .left .b_top {
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid white;
    border-top: 0px solid transparent;
    transform: rotate(180deg);
}

.body .account .stages .wrap .stage.finished .left .b_top {
    border-bottom: 30px solid #DFE2FF;
}

.body .account .stages .wrap .stage .left .b_bottom {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 30px solid white;
    border-top: 0px solid transparent;
    transform: rotate(0deg);
}

.body .account .stages .wrap .stage.finished .left .b_bottom {
    border-bottom: 30px solid #DFE2FF;
}

.body .account .stages .wrap .stage.active .left .b_top {
    width: auto;
    height: auto;
    border: none;
    transform: skew(30deg, 20deg);
    width: 1.5px;
    height: 30px;
    background: #4951FD;
    margin-left: 8px;
}

.body .account .stages .wrap .stage.active .left .b_bottom {
    width: auto;
    height: auto;
    border: none;
    transform: skew(-30deg, 20deg);
    width: 1.5px;
    height: 30px;
    background: #4951FD;
    margin-left: 8px;
}

.body .account .stages .wrap .stage .center {
    display: flex;
    align-items: center;
    padding: 20px 0;
    max-height: 60px;
    background: white;
    padding-left: .5em;
    min-width: 160px;
    justify-content: center;
}

.body .account .stages .wrap .stage.finished .center {
    background: #DFE2FF;
}

.body .account .stages .wrap .stage.active .center {
    background: none;
    padding-left: 2em;
}

.body .account .stages .wrap .stage.active .center {
    border-bottom: 1.5px solid #4951FD;
    border-top: 1.5px solid #4951FD;
}

.body .account .stages .wrap .stage .center>img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.body .account .stages .wrap .stage .center>.name {
    margin-left: 15px;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #4951FD;
}

.body .account .stages .wrap .stage .right .b_top {
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid white;
    border-top: 0px solid transparent;
}

.body .account .stages .wrap .stage.finished .right .b_top {
    border-bottom: 30px solid #DFE2FF;
}

.body .account .stages .wrap .stage .right .b_bottom {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 30px solid white;
    border-top: 0px solid transparent;
    transform: rotate(180deg);
}

.body .account .stages .wrap .stage.finished .right .b_bottom {
    border-bottom: 30px solid #DFE2FF;
}

.body .account .stages .wrap .stage.active .right .b_top {
    width: auto;
    height: auto;
    border: none;
    transform: skew(30deg, 20deg);
    width: 1.5px;
    height: 30px;
    background: #4951FD;
    margin-left: 8px;
}

.body .account .stages .wrap .stage.active .right .b_bottom {
    width: auto;
    height: auto;
    border: none;
    transform: skew(-30deg, 20deg);
    width: 1.5px;
    height: 30px;
    background: #4951FD;
    margin-left: 8px;
}


/* status */

.body .account .status {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1400px) {
    .body .account .status {
        flex-direction: row;
    }
}

@media (min-width: 1400px) {
    .body .account .status>.left {
        max-width: 560px;
        width: 100%;
    }
}

.body .account .status>.left>.top {
    background: #FFFFFF;
    box-shadow: 0px 9.01476px 19.3173px rgb(216 216 216 / 25%);
    border-radius: 12.8782px;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.body .account .status>.left>.top>.left>.wrap {
    display: flex;
    align-items: center;
    margin-top: .5em;
}

.body .account .status>.left>.top>.left>.wrap:first-of-type {
    margin-top: 0;
}

.body .account .status>.left>.top>.left>.wrap>.name {
    font-weight: 500;
    font-size: 25px;
    letter-spacing: 0.01em;
    color: #4951FD;
}

.body .account .status>.left>.top>.left>.wrap>.desc {
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.01em;
    color: #5E5E5E;
    margin-left: 10px;
    margin-top: 5px;
    word-break: break-all;
}

.body .account .status>.left>.top>.right {
    font-weight: 500;
    font-size: 25.0486px;
    letter-spacing: 0.01em;
    color: #4D4C4C;
}

@media (min-width: 550px) {
    .body .account .status > .left > .bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
    }    
}

.body .account .status > .left > .bottom > .panel {
    padding: 1em;
    background: #FFFFFF;
    box-shadow: 0px 9.01476px 19.3173px rgb(216 216 216 / 25%);
    border-radius: 12.8782px;
    margin-top: 10px;
}

@media (min-width: 1400px) {
    .body .account .status>.left>.bottom>.panel {
        padding: 1.5em;
    }
}

.body .account .status>.left>.bottom>.panel>.name {
    font-weight: 600;
    font-size: 19.3173px;
    letter-spacing: 0.01em;
    color: #4951FD;
}

.body .account .status>.left>.bottom>.panel>.wrap {
    margin-top: .5em;
}

@media (min-width: 1400px) {
    .body .account .status>.left>.bottom>.panel>.wrap {
        margin-top: 1em;
    }
}

.body .account .status>.left>.bottom>.panel>.wrap>.name {
    font-size: 15.4539px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    margin-bottom: .5em;
    height: 20px;
}

@media (min-width: 1400px) {
    .body .account .status>.left>.bottom>.panel>.wrap>.name {
        margin-bottom: 1em;
    }
}

.body .account .status>.left>.bottom>.panel>.wrap>.name.font.x2 {
    font-size: 14px;
}

.body .account .status>.left>.bottom>.panel>.wrap>.count {
    font-weight: 500;
    font-size: 18.0295px;
    letter-spacing: 0.01em;
    color: #4951FD;
    background: #FFFFFF;
    box-shadow: -1.28782px 6.43911px 15.4539px rgba(158, 158, 158, 0.11);
    border-radius: 12.8782px;
    padding: 12px
}

.body .account .status>.left>.bottom>.panel>.wrap>.count.yellow {
    background: #f3d915;
}

.body .account .status>.left>.bottom>.panel>.wrap>.count.red {
    background: #c91c00;
    color: white;
}

.body .account .status>.left>.bottom>.panel>.wrap>.count span {
    color: #FF9900;
}

.body .account .status>.left>.bottom>.panel>img {
    height: 70px;
    object-fit: contain;
    margin-top: .5em;
    width: 100%;
}

@media (min-width: 1400px) {
    .body .account .status>.left>.bottom>.panel>img {
        margin-top: 1em;
    }
}

.body .account .status>.right {
    background: #FFFFFF;
    box-shadow: 0px 9.01476px 19.3173px rgba(216, 216, 216, 0.25);
    border-radius: 12.8782px;
    padding: 15px 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    position: relative;
}

@media (min-width: 1400px) {
    .body .account .status>.right {
        margin-top: 0;
        margin-left: 1em;
    }
}

.body .account .status > .right > .top {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .body .account .status > .right > .top {
        justify-content: space-between;
        flex-direction: row;
    }
}

.body .account .status > .right > .top > .left > .top {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .body .account .status > .right > .top > .left > .top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
}




.body .account .status>.right>.top>.left>.top svg {
    color: #4951FD;
}

.body .account .status>.right>.top>.left>.top>.name {
    font-weight: 500;
    font-size: 25.7565px;
    letter-spacing: 0.02em;
    color: #4951FD;
    margin-left: 15px;
}

.body .account .status > .right > .top > .left > .desc {
    font-size: 21.893px;
    letter-spacing: 0.01em;
    color: red;
    margin-top: .5em;
    text-align: center;
}

@media (min-width: 768px) {
    .body .account .status > .right > .top > .left > .desc {
        margin-left: 40px;
        text-align: left;
    }
}



.body .account .status>.right>.top>.left>.desc.margin {
    margin-left: 15px;
}

.body .account .status>.right>.top>.left>.desc.active {
    color: #5E5E5E;
}

.body .account .status>.right>.top>.left>.desc.active {
    color: #FF1010;
}

.body .account .status>.right>.top>.left>.desc span {
    font-weight: 500;
    font-size: 38.6347px;
    letter-spacing: 0.01em;
    color: #4951FD;
}

.body .account .status > .right > .top > .wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 1.5em 0 1em;
}

.body .account .status>.right>.top>.wrap>svg {
    color: #4951FD;
}

.body .account .status>.right>.top>.wrap>.name {
    font-size: 22px;
    color: #A7A7A7;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.body .account .status>.right>.top>.wrap>img {
    width: 32px;
    margin-right: 20px;
    object-fit: contain;
}

.body .account .status>.right form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.body .account .status > .right form > .center {
    margin-top: 25px;
}

@media (min-width: 550px) {
    .body .account .status > .right form > .center {
        display: grid;
        margin-top: 25px;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
    }
}


.body .account .status>.right form>.center.not_active {
    opacity: .7;
}









.body .account .status > .right form > .center > .count {
    margin-top: 1em;
}

@media (min-width: 768px) {
    .body .account .status > .right form > .center > .count {
        margin-left: 40px;
        max-width: 300px;
        margin-top: 0;
    }
}

.body .account .status>.right form>.center>.count>.name {
    font-size: 18.0295px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    min-height: 50px;
    user-select: none;
}

.body .account .status > .right form > .center > .count .input {
    display: flex;
    align-items: center;
}



.body .account .status > .right form > .center > .count .input > .wrap > .wrap {
    background: #FFFFFF;
    box-shadow: 0px 7.54138px 25.7565px rgb(203 203 203 / 30%);
    border-radius: 10.7734px;
    display: flex;
    align-items: center;
    padding: .65em 20px;
    flex-grow: 1;
}

.body .account .status > .right form > .center > .count .input > .wrap > .wrap > input {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    font-weight: 600;
    font-size: 21.893px;
    letter-spacing: 0.01em;
    color: #5E5E5E;
    outline: none;
    background: none;
}





.body .account .status>.right form>.center>.count .input .del {
    background: #B7B7B7;
    border-radius: 6.43911px 0px 0px 6.43911px;
    padding: 10px;
    margin-right: 2px;
    cursor: pointer;
    transition: all 500ms ease 0s;
    color: white;
}

.body .account .status>.right form>.center>.count .input .add {
    padding: 10px;
    border-radius: 0 6px 6px 0;
    margin-left: 2px;
    cursor: pointer;
    transition: all 500ms ease 0s;
    color: white;
}

.body .account .status>.right form>.center>.count .input .del:hover,
.body .account .status>.right form>.center>.count .input .add:hover {
    background: #4951FD;
}





.body .account .status>.right form>.button {
    background: #FFFFFF;
    border: 1.28782px solid #4951FD;
    box-sizing: border-box;
    box-shadow: 0px 7.54138px 16.1601px rgb(216 216 216 / 25%);
    border-radius: 9.01476px;
    max-width: 190px;
    margin: 25px auto 0;
    font-weight: 500;
    font-size: 18.0295px;
    letter-spacing: 0.01em;
    color: #4951FD;
    padding: .5em 0;
    text-align: center;
    cursor: pointer;
    width: 100%;
    user-select: none;
}


.body .account .status > .right > .bottom {
    margin-top: 1.5em;
}

@media (min-width: 768px) {
    .body .account .status > .right > .bottom {
        margin-left: 40px;
    }
}

.body .account .status > .right > .bottom > .name {
    font-size: 21.2795px;
    letter-spacing: 0.01em;
    color: #4951FD;
    margin-bottom: 1em;
    text-align: center;
}

@media (min-width: 768px) {
    .body .account .status > .right > .bottom > .name {
        text-align: left;
    }
}


@media (min-width: 650px) {
    .body .account .status > .right > .bottom .result {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}


.body .account .status > .right > .bottom .result > .name {

    background: #60A5FA;
    box-shadow: 0px 8.58691px 18.2128px rgb(216 216 216 / 29%);
    border-radius: 10.4715px;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding: 15px 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

@media (min-width: 768px) {
    .body .account .status > .right > .bottom .result > .name {
        margin-top: 0;
    }
}

@media (min-width: 800px) {
    .body .account .status > .right > .bottom .result > .name {
        font-size: 17.5243px;
    }
}

.body .account .status > .right > .bottom .result > .name > strong {
    margin-left: 0.5em;
}


/* detail */

.body .account .detail {
    background: #FFFFFF;
    box-shadow: 0px 9.01476px 19.3173px rgba(216, 216, 216, 0.25);
    border-radius: 12.8782px;
    margin-top: 30px;
    padding: 20px 30px;
}

@media (min-width: 1400px) {
    .body .account .detail {
        margin-top: 15px;
    }
}

.body .account .detail>.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.body .account .detail>.wrap>svg {
    color: #4951FD;
}

.body .account .detail>.wrap>.name {
    font-weight: 500;
    font-size: 25.7565px;
    letter-spacing: 0.01em;
    color: #4951FD;
    margin-left: 20px;
}


/* market */
.body .account .detail .markets .market {
    margin-top: 1.5em;
}

@media (min-width: 1400px) {
    .body .account .detail .markets .market {
        margin-top: 2.5em;
    }
}

.body .account .detail .markets .market>.name {
    font-size: 19.3173px;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    color: #4951FD;
    margin-bottom: 1em;
}

.body .account .detail .markets .market>.list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 20px;
    grid-gap: 10px;
}

.body .account .detail .markets .market>.list>.name {
    padding: 1em;
    letter-spacing: 1px;
    font-weight: 500;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e6e6e6;
    font-size: 15.4539px;
    letter-spacing: 0.01em;
}

@media (min-width: 1400px) {
    .body .account .detail .markets .market>.list>.name {
        font-size: 16px;
    }
}

.body .account .detail .markets .market>.list>.wrap {
    display: flex;
    align-items: center;
    padding: 1em;
    border-bottom: 1px solid #e6e6e6;
    color: #4951FD;
    cursor: pointer;
}

.body .account .detail .markets .market>.list>.wrap>svg {
    width: 20px;
    height: 20px;
}

.body .account .detail .markets .market>.list>.wrap>.name {
    margin-left: 15px;
}

.body .account .detail .markets .market>.list>.wrap>.name button {
    background: none;
    border: none;
    font-size: 14px;
    letter-spacing: 0.03em;
    color: #4951FD;
    cursor: pointer;
}

.body .account .detail .markets .market>.list.top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0px;
    box-shadow: -0.846526px 5.92568px 15.2375px rgb(158 158 158 / 8%);
}

.body .account .detail .markets .market>.list.top>.name {
    font-size: 12px;
    color: #60A5FA;
    text-transform: uppercase;
}

.body .account .detail .markets .market>.list.top>.name.current_step {
    color: #4951FD;
}

@media (min-width: 1400px) {
    .body .account .detail .markets .market>.list.top>.name {
        font-size: 14px;
    }
}

/* new market */

.body .account .detail > .market > .top {
    display: flex;
    justify-content: center;
    align-items: center;
}

.body .account .detail > .market > .top > .name {
    color: #4951FD;
    margin-left: 0.5em;
    font-weight: 500;
    font-size: calc(20px + 6 * ((100vw - 320px) / 680));
}


@media (min-width: 1280px) {
    .body .account .detail > .market > .top > .name {
        font-size: 28px;
    }
}


@media (min-width: 730px) {
    .body .account .detail > .market > .wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
    }
}

.body .account .detail > .market > .wrap > .wrap {
    margin-top: 2em;
    font-size: calc(13px + 6 * ((100vw - 320px) / 680));
}

@media (min-width: 600px) {
    .body .account .detail > .market > .wrap > .wrap {
        font-size: 18px;
    }
}

.body .account .detail > .market > .wrap > .wrap > .name {
    font-weight: 500;
    margin-bottom: 0.5em;
    font-size: .8em;
    color: #4951FD;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-left: 15px;
}

@media (min-width: 660px) {
    .body .account .detail > .market > .wrap > .wrap > .name {
        height: 45px;
        font-size: 14px;
    }
}

.body .account .detail > .market > .wrap > .wrap > .steps {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    box-shadow: -0.846526px 5.92568px 15.2375px rgb(158 158 158 / 10%);
    border-radius: 10px;
    height: 135px;
}

.body .account .detail > .market > .wrap > .wrap > .steps > .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em;
    justify-content: center;
    color: black;
    border-radius: 10px 0 0 10px;
}

.body .account .detail > .market > .wrap > .wrap > .steps > .step.active {
    background: #388dd61c;
}


.body .account .detail > .market > .wrap > .wrap > .steps > .step > .name {
    font-weight: 500;
    font-size: .9em;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0.5em;
    margin-bottom: 2em;
}

.body .account .detail > .market > .wrap > .wrap > .steps > .step > .desc {
    font-weight: 500;
    font-size: .9em;
}

.body .account .detail > .market > .wrap > .wrap > .steps > .step > .bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.body .account .detail > .market > .wrap > .wrap > .steps > .step > .bottom > svg {
    width: 1em;
    height: 1em;
    color: #4951FD;
    display: none;
}

@media (min-width: 1170px) {
    .body .account .detail > .market > .wrap > .wrap > .steps > .step > .bottom > svg {
        display: block;
    }
    
}


.body .account .detail > .market > .wrap > .wrap > .steps > .step > .bottom > .name {
    margin-left: 0.5em;
    font-weight: 500;
    font-size: .9em;
    color: #4951FD;
}

/* new market */








/* login-in */

.body .login-in {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 320px;
    width: 100%;
    z-index: 1;
    position: relative;
}

.body .login-in .form {
    background: white;
    padding: 2em 1em 2em;
    box-shadow: 0px 12px 34px rgb(111 111 111 / 11%);
    border-radius: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.body .login-in .form>h2 {
    text-align: center;
}

.body .login-in .form>.wrap {
    max-width: 80px;
    margin-bottom: 2.5em;
}

.body .login-in .form > .input {
    box-shadow: 0px 3px 15px rgb(97 97 97 / 12%);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    padding: 1em;
    margin-bottom: 1.25em;
    width: 100%;
    max-width: 235px;
}


.body .login-in .form > .input.red {
    border: 1px solid red;
}

.body .login-in .form > .error {
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    letter-spacing: 0.02em;
    color: #A70000;
}

.body .login-in .form>.input>img {
    max-width: .9em;
    margin-right: 10px;
    width: 100%;
}

.body .login-in .form>.input>input {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    width: 100%;
    background: none;
}

.body .login-in .form>.input>input::placeholder {
    font-size: 14px;
    color: #C0C0C0;
}

.body .account .status > .right form > .center > .count .desition {
    color: #5E5E5E;
}

.body .account .status > .right form > .center > .count .desition.green {
    color: green;
}

.body .account .status > .right form > .center > .count .desition svg {
    width: 3em;
    height: 2em;
}


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
  }
  
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
  
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
  
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }






.body .login-in .form .err {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
    color: #EB5757;
}

.body .login-in .form>.button {
    margin-top: .5em;
    background: #4951FD;
    box-shadow: 0px 3px 16px rgb(0 102 255 / 30%);
    border-radius: 10px;
    font-size: 1.25em;
    text-align: center;
    letter-spacing: 0.025em;
    color: #FFFFFF;
    max-width: 150px;
    width: 100%;
    padding: .5em 0;
    border: none;
    cursor: pointer;
}

.body .login-in .form>a {
    margin-top: 20px;
    line-height: 21px;
    letter-spacing: 0.025em;
    text-decoration-line: underline;
    color: #01B2CF;
}


/* registration */

.body .registration {
    display: flex;
    justify-content: center;
    align-items: center;
}

.body .registration .form {
    background: #FFFFFF;
    box-shadow: 0px 12px 34px rgba(111, 111, 111, 0.11);
    border-radius: 30px;
    padding: 30px 20px;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.body .registration .form>.name {
    font-weight: 500;
    font-size: 24px;
    color: #454545;
    margin-bottom: 20px;
}

.body .registration .form>.input {
    box-shadow: 0px 3px 15px rgb(97 97 97 / 12%);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 15px;
    width: 100%;
}

.body .registration .form>.input>img {
    width: 10px;
    margin-right: 10px;
}

.body .registration .form>.input>input {
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
}

.body .registration .form>.input>input::placeholder {
    font-size: 14px;
    color: #C0C0C0;
}

.body .registration .form>.button {
    margin-top: 30px;
    background: #4951FD;
    box-shadow: 0px 3px 16px rgba(0, 102, 255, 0.3);
    border-radius: 10px;
    font-size: 16px;
    text-align: center;
    letter-spacing: 0.025em;
    color: #FFFFFF;
    max-width: 150px;
    width: 100%;
    padding: .35em 0;
}



@media (min-width: 600px) {
    .special_block {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1em;
        margin-left: 40px;
        margin-top: 1em;
        margin-right: 40px;
    }
}


.special_block .block {
    background: #FFFFFF;
    box-shadow: 0px 5px 20px rgba(113, 113, 113, 0.09);
    border-radius: 10px;
    padding: 25px 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .special_block .block {
        margin-top: 10px;
    }
}

.special_block .block .name {
    font-size: 18.3954px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    font-weight: 500;
}

.special_block .block .count {
    font-weight: 600;
    font-size: 21.2591px;
    letter-spacing: 0.01em;
    color: #5E5E5E;
    margin-top: 1em;
}

.bankrupt {
    color: red;
}


/* fast creadit*/

.body .header > .wrap_button > .wrap {
    position: absolute;
    top: 0;
    left: 15px;
    right: 15px;
    bottom: 0;
    display: flex;
    justify-content: center;
    z-index: 1;
    align-items: flex-start;
}

.body .header > .wrap_button > .wrap>.back {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    z-index: 0;
    opacity: 0.5;
}

.body .header > .wrap_button > .wrap>.inputs {
    z-index: 2;
    background: white;
    padding: 1em;
    border-radius: 5px;
    max-width: 650px;
}

.body .header > .wrap_button > .wrap>.inputs>h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.01em;
    color: #000000;
}

.body .header > .wrap_button > .wrap>.inputs>p {
    color: black;
    font-size: 18px;
}

.body .header > .wrap_button > .wrap>.inputs h2>svg {
    width: 1em;
    height: 1em;
}

.body .header > .wrap_button > .wrap > .inputs > .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 600px) {
    .body .header > .wrap_button > .wrap > .inputs > .wrap {
        margin-top: 25px;
    }
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count {
    max-width: 300px;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.name {
    font-size: 18.0295px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    min-height: 50px;
    user-select: none;
    display: flex;
    align-items: center;
    margin-left: 3em;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input {
    display: flex;
    align-items: center;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input>.wrap {
    margin-right: 12px;
    background: #FFFFFF;
    box-shadow: 0px 7.54138px 25.7565px rgb(203 203 203 / 30%);
    border-radius: 10.7734px;
    display: flex;
    align-items: center;
    padding: .65em 20px;
    flex-grow: 1;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input>.wrap>input {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
    font-weight: 600;
    font-size: 21.893px;
    letter-spacing: 0.01em;
    color: #5E5E5E;
    outline: none;
    background: inherit;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .add,
.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .del {
    background: #B7B7B7;
    padding: 10px;
    margin-right: 2px;
    cursor: pointer;
    transition: all 500ms ease 0s;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .del:hover,
.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .add:hover {
    background: #4951FD;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .del {
    border-radius: 6px 0px 0px 6px;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .add {
    border-radius: 0 6px 6px 0;
}

.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .del svg,
.body .header > .wrap_button > .wrap>.inputs>.wrap>.count>.input .add svg {
    color: white;
}

.body .header > .wrap_button > .wrap>.inputs>.button {
    background: #FFFFFF;
    border: 1.28782px solid #4951FD;
    box-sizing: border-box;
    box-shadow: 0px 7.54138px 16.1601px rgb(216 216 216 / 25%);
    border-radius: 9.01476px;
    max-width: 190px;
    margin: 25px auto 0;
    font-weight: 500;
    font-size: 18.0295px;
    letter-spacing: 0.01em;
    color: #4951FD;
    padding: .5em 0;
    text-align: center;
    cursor: pointer;
    width: 100%;
    user-select: none;
}

.body .header > .wrap_button > .wrap>.inputs>.bottom {
    margin-top: 1.5em;
}

.body .header > .wrap_button > .wrap>.inputs>.bottom>.name {
    font-size: 21.2795px;
    letter-spacing: 0.01em;
    color: #4951FD;
    margin-bottom: 1em;
}

.body .header > .wrap_button > .wrap>.inputs>.bottom>.name {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.01em;
    color: #000000;
}

@media (min-width: 600px) {
    .body .header > .wrap_button > .wrap > .inputs > .bottom .result {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2em;
    }
}

.body .header > .wrap_button > .wrap > .inputs > .bottom .result > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1em;
}

@media (min-width: 600px) {
    .body .header > .wrap_button > .wrap > .inputs > .bottom .result > .wrap {
        margin-top: 0;
    }
}

.body .header > .wrap_button > .wrap>.inputs>.bottom .result>.wrap>.name {
    font-size: 17px;
}

.body .header > .wrap_button > .wrap>.inputs>.bottom .result>.wrap>.center {
    flex-grow: 1;
    height: 1px;
    align-self: flex-end;
    margin: 0 .25em 3px;
    border-bottom: 1px dashed grey;
}

.body .header > .wrap_button > .wrap>.inputs>.bottom .result>.wrap>.price {
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 0.01em;
    color: #000000;
}

.chart {
    background: white;
    padding: 1em;
    margin-top: 1em;
    border-radius: 10px;
    z-index: 1;
    width: 100%;
}

.chart > h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.01em;
    color: #000000;
}

.chart > h2 > svg {
    width: 1em;
    height: 1em;
}

.chart > .wrap {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .chart > .wrap {
        flex-direction: row;
    }
}

.chart > .wrap > .name {
    font-size: 1em;
    margin: 1em;
    border-bottom: 1px solid #c9c9c9;
    color: #6c6c6c;
    text-transform: uppercase;
    cursor: pointer;
}

.chart > .wrap > .name.active {
    color: black;
    font-weight: 500;
}

.pop-up {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pop-up>.back {
    background: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    opacity: .5;
    z-index: 1;
}

.pop-up>.wrap {
    background: white;
    padding: 1em;
    border-radius: 5px;
    max-width: 320px;
    z-index: 2;
}

.pop-up>.wrap>.name {
    font-size: 18px;
    text-align: center;
    font-weight: 600;
}

.pop-up>.wrap>.wrap {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2em 0 0;
}

.pop-up>.wrap .wrap>.name {
    padding: .5em 1em;
    border-radius: 5px;
    cursor: pointer;
}

.pop-up>.wrap .wrap>.name.gren {
    background: green;
    color: white;
}

.pop-up>.wrap .wrap>.name.red {
    background: red;
    color: white;
}

.pop-up>.wrap>h1 {
    text-align: center;
}





/* history component */
.body .results > .active-tab {
    background: white;
    padding: 1em 1em 0 1em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

@media (min-width: 650px){
    .body .results > .active-tab {
        display: none;
    }
}

.body .results > .top {
    display: flex;
    margin-top: 2em;
}

.body .results > .top > .tab {
    display: flex;
    align-items: center;
    color: rgba(189, 189, 189, 0.15);
    width: 100%;
    flex-grow: 1;
    /* Скрывает текст, если ширины блока не хватает */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 1440px){
    .body .results > .top > .tab {
        width: auto;
        min-width: 230px;
    }
}

.body .results > .top > .tab > .wrap {
    font-weight: 500;
    font-size: 17.7023px;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: #5E5E5E;
    background: rgba(189, 189, 189, 0.15);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 100%;
}

@media (min-width: 450px){
    .body .results > .top > .tab > .wrap {
        padding: 0.65em 20px;
    }
}

.body .results > .top > .tab.first > .wrap {
    padding: .65em 30px .65em 30px;
    border-top-left-radius: 12px;
}

.body .results > .top > .tab.last > .wrap {
    border-top-right-radius: 12px;
}

.body .results > .top > .tab > .wrap.active {
    background: white;
    color: #5E5E5E;
}

.body .results > .top > .tab > .wrap > .icon {
    display: flex;
}

.body .results > .top > .tab > .wrap > .icon > svg {
    width: 0.6em;
    height: 0.6em;
}

@media (min-width: 450px){
    .body .results > .top > .tab > .wrap > .icon > svg {
        width: 1em;
        height: 1em;
    }
}

.body .results > .top > .tab > .wrap > .name {
    display: none;
}

@media (min-width: 950px){
    .body .results > .top > .tab > .wrap > .name {
        display: block;
        margin-left: 0.5em;
    }
}

.body .results > .top > .tab.first {
    margin-left: 0;
}

.body .results > .bottom {
    background: white;
    padding: 25px 12px 25px;
    display: flex;
}

.body .results > .wrap {
    background: white;
    border-radius: 0 0 12.6445px 12.6445px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.body .results > .wrap > svg {
    width: 1.5em;
    height: 1.5em;
    color: grey;
    cursor: pointer;
}

.body .results > .wrap > svg:hover {
    color: black;
}

.body .results > .wrap > svg.left {
    transform: rotate(180deg);
}

.body .results > .wrap > .pagination {
    display: flex;
    justify-content: center;
}

.body .results > .wrap > .pagination > .name {
    width: 10px;
    height: 10px;
    border: 3px solid grey;
    margin: 5px;
    border-radius: 10px;
}

.body .results > .wrap > .pagination > .name.active {
    border: 3px solid #5acb5a;
}

.body .results > .bottom > .historys {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.body .results > .bottom > .historys > .wrap {
    width: 100%;
    margin: 0 2.5px;
    display: none;
}

.body .results > .bottom > .historys > .wrap.column_0 {
    display: block;
}

@media (min-width: 500px){
    .body .results > .bottom > .historys > .wrap.column_1 {
        display: block;
    }
}

@media (min-width: 650px){
    .body .results > .bottom > .historys > .wrap.column_2 {
        display: block;
    }
}

@media (min-width: 800px){
    .body .results > .bottom > .historys > .wrap.column_3 {
        display: block;
    }
}

@media (min-width: 950px){
    .body .results > .bottom > .historys > .wrap.column_4 {
        display: block;
    }
}

@media (min-width: 1100px){
    .body .results > .bottom > .historys > .wrap.column_5 {
        display: block;
    }
}

@media (min-width: 1250px){
    .body .results > .bottom > .historys > .wrap.column_6 {
        display: block;
    }
}

@media (min-width: 1440px){
    .body .results > .bottom > .historys > .wrap.column_7 {
        display: block;
    }
}

.body .results > .bottom > .historys > .wrap > .wrap {
    font-size: 12px;
    background: #F4F8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #5E5E5E;
    text-align: center;
    padding: 0.5em;
    cursor: pointer;
    position: relative;
    min-height: 80px;
}


@media (min-width: 400px){
    .body .results > .bottom > .historys > .wrap > .wrap {
        font-size: 13px;
    }
}

.body .results > .bottom > .historys > .wrap > .wrap > .arrow {
    width: 1.5em;
    height: 1.5em;
}

.body .results > .bottom > .historys > .wrap > .wrap > .arrow.left {
    transform: rotate(-180deg);
}

.body .results > .bottom > .historys > .wrap > .wrap > .question {
    width: 1em;
    height: 1em;
    margin-left: 0.25em;
}

.body .results > .bottom > .historys > .wrap > .wrap > .pop-up {
    position: absolute;
    width: 385px;
    background: white;
    padding: 1em;
    bottom: -102px;
    top: auto;
    right: auto;
    left: -227px;
    z-index: 999;
    box-shadow: 0 0 5px gainsboro;
    font-size: 12px;
}

@keyframes shadow {
    from {
        transform: scale(0, 0);
    }
    to {
        transform: scale(1, 1);
    }
}

.body .results > .bottom > .historys > .wrap .desc {
    background: #FFFFFF;
    box-shadow: inset -4.30905px 5.38631px 6.46357px rgb(251 251 251 / 15%), inset 2.15452px -2.15452px 6.46357px rgb(135 135 135 / 10%);
    padding: 0.5em;
    font-weight: 500;
    font-size: 16px;
    color: #5E5E5E;
    margin-top: 5px;
    /* min-width: 155px; 123*/
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0, 0);
    animation: shadow 500ms 1 ease-in-out forwards;
}

.body .results > .bottom > .historys > .wrap .desc.active {
    background: #f6f6f6;
}

.body .results > .bottom > .historys > .wrap .desc.green {
    background: green;
    color: white;
}

.body .results > .bottom > .historys > .wrap .desc.yellow {
    background: yellow;
    color: black;
}

.body .results > .bottom > .historys > .wrap .desc.red {
    background: red;
    color: white;
}

.body .results > .bottom > .left > .wrap > .name {
    border-radius: 10px 0 0 0;
    font-size: 16px;
    background: #F4F8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #5E5E5E;
    text-align: center;
    padding: 0.5em 1em;
    cursor: pointer;
    min-height: 80px;
}

.body .results > .bottom > .left > .wrap .desc {
    background: #FFFFFF;
    box-shadow: inset -4.30905px 5.38631px 6.46357px rgb(251 251 251 / 15%), inset 2.15452px -2.15452px 6.46357px rgb(135 135 135 / 10%);
    padding: 0.5em;
    font-weight: 500;
    font-size: 16px;
    color: #5E5E5E;
    margin-top: 5px;
    word-break: break-all;
    min-height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: scale(0, 0);
    animation: shadow 500ms 1 ease-in-out forwards;
}

.body .results > .bottom > .left > .wrap .desc.active {
    background: #f6f6f6;
}

.body .results > .bottom > .left > .wrap .desc.red {
    background: red;
    color: white;
}


/* feedback */
.feedback {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback > .back {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: black;
    opacity: .5;
}

.feedback > .wrap {
    z-index: 1;
    background: white;
    margin: 1em;
    border-radius: 5px;
}

@media (min-width: 360px){
    .feedback > .wrap {
        max-width: 550px;
    }
}


.feedback > .wrap > .top > .name {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: .0125em;
    padding: 16px 1em 10px;
    border-bottom: 1px solid rgba(0,0,0,.12);
}

.feedback > .wrap > .cnt {
    padding: 1em;
}

.feedback > .wrap > .cnt > .name {
    font-size: 15.4539px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    margin-bottom: 1em;
}

.feedback > .wrap > .cnt > .wrap {
    position: relative;
    margin-bottom: 1em;
        border-radius: 5px;
}

.feedback > .wrap > .cnt > .wrap > label {
    left: 10px;
    right: auto;
    position: absolute;
    background: white;
    color: rgba(0,0,0,.6);
    font-size: 14px;
    top: -8px;
    padding: 0 5px;
}

.feedback > .wrap > .cnt > .wrap > textarea {
    border: 1px solid rgba(0,0,0,.38);
    width: 100%;
    border-radius: 5px;
    margin: 0;
    padding: 15px 10px 0;
    min-width: 100%;
    max-width: 100%;
    max-height: 300px;
    min-height: 100px;
}

.feedback > .wrap > .cnt > .wrap > textarea::placeholder {
    color: #adadad;
    font-weight: 400;
    letter-spacing: .1px;
    font-family: 'Gilroy';
}


.feedback > .wrap > .cnt > .desc {
    font-size: 15.4539px;
    letter-spacing: 0.01em;
    color: #A7A7A7;
    margin-bottom: 1em;
}

.feedback > .wrap > .cnt > .wrap > input {
    border: 1px solid rgba(0,0,0,.38);
    width: 100%;
    border-radius: 5px;
    margin: 0;
    padding: 20px 15px 20px;
    min-width: 100%;
}

.feedback > .wrap > .cnt > .wrap > input::placeholder {
    color: #adadad;
    font-weight: 400;
    letter-spacing: .1px;
    font-family: 'Gilroy';
}

.feedback > .wrap > .btm {
    padding: 1em;
    border-top: 1px solid rgba(0,0,0,.12);
}

@media (min-width: 390px){
    .feedback > .wrap > .btm {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.feedback > .wrap > .btm > .send {
    color: rgba(0, 0, 0, 0.26);
    text-transform: uppercase;
    text-align: center;
    padding: 0.5em 0;
    background: #fcfcfc;
    cursor: pointer;
}

.feedback > .wrap > .btm > .send.active {
    color: rgb(25, 118, 210);
}

@media (min-width: 390px){
    .feedback > .wrap > .btm > .send {
        padding: .75em 1em;
    }
}

.feedback > .wrap > .btm > .cancel {
    margin-top: 1em;
    color: rgb(25, 118, 210);
    text-transform: uppercase;
    text-align: center;
    padding: 0.5em 0;
}

@media (min-width: 390px){
    .feedback > .wrap > .btm > .cancel {
        padding: .75em 1em;
        margin-top: 0;
        cursor: pointer;
    }
}

.hidden {
    display: none;
}


/* virtual-assistant */
.virtual-assistant {
    position: fixed;
    right: 10px;
    bottom: 0;
    max-width: 365px;
    max-width: 300px;
    z-index: 1;
    margin-left: 10px;
    width: 100%;
    box-shadow: 0 0 10px #545050;
    border-radius: 8px 8px 0px 0px;
}

@media (min-width: 365px){
    .virtual-assistant {
        max-width: 365px;
    }
}

.virtual-assistant > .top {
    display: flex;
    align-items: center;
    background: linear-gradient(229.73deg, #003DA7 -19.09%, #50C7FF 131.11%);
    border-radius: 8px 8px 0px 0px;
    padding: 15px;
}

.virtual-assistant > .top > .left {
    margin-right: 10px;
    position: relative;
    display: flex;
}

.virtual-assistant > .top > .left > svg {
    border: 2px solid #0944AA;
    border-radius: 30px;
}

.virtual-assistant > .top > .left > .is-active {
    width: 15px;
    height: 15px;
    background: #18C139;
    box-shadow: 0px 0px 4px #18c139;
    border-radius: 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.virtual-assistant > .top > .center {
    flex-grow: 1;
    margin-right: 5px;
}

.virtual-assistant > .top > .center > .name {
    font-weight: 500;
    font-size: 24px;
    line-height: 29px;
    color: #FFFFFF;
}

.virtual-assistant > .top > .center > .desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 15px;
    color: #FFFFFF;
    opacity: 0.8;
}

.virtual-assistant > .top > .right {
    display: flex;
    cursor: pointer;
}



.virtual-assistant > .center {
    background: white;
    padding: 0 15px;
    max-height: 400px;
    overflow-y: scroll;
    position: relative;
    min-height: 320px;
    overflow-x: hidden;
}

.virtual-assistant > .center > .top {
    height: 25px;
    width: 100%;
}

.virtual-assistant > .center > .bottom {
    height: 25px;
    width: 100%;
}

.virtual-assistant > .center .bot {
    display: flex;
    align-items: flex-end;
    margin-top: 25px;
}

@keyframes shadow2 {

    from {
        opacity: 0;
        transform: translateX(-320px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }

}

.virtual-assistant > .center .bot.test {
    animation: shadow2 250ms 1;
}



.virtual-assistant > div.center > div:nth-child(2) {
    margin-top: 0;
}

.virtual-assistant > .center .bot > svg {
    margin-right: 5px;
    min-width: 35px;
    border: 2px solid #0944AA;
    border-radius: 30px;
}

.virtual-assistant > .center .bot > .wrap > .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    color: rgba(90, 102, 113, 0.5);
    margin-bottom: 5px;  
}

.virtual-assistant > .center .bot > .wrap > .wrap {
    background: rgba(90, 102, 113, 0.2);
    border-radius: 8px 8px 0px 0px;
    padding: 10px;
    display: flex;
    align-items: flex-end;
}

.virtual-assistant > .center .bot > .wrap > .wrap > .msg {
    font-weight: 400;
    font-size: 18px;
    color: #333333;
}

.virtual-assistant > .center .bot > .wrap > .wrap > .date {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    color: rgba(90, 102, 113, 0.5);
    margin-left: 5px;
}

.virtual-assistant-v1 {
    position: fixed;
    bottom: 10px;
    right: 4em;
    display: flex;
    z-index: 1;
    align-items: flex-end;
    cursor: pointer;
}

.virtual-assistant-v1 > .alerts > .msg {
    background: #FFFFFF;
    border: 2px solid #0944AA;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 8px;
    padding: 1em;
    display: flex;
    align-items: center;
    transition: all 500ms ease 0s;
    margin-top: 10px;
    font-size: 18px;
}

.virtual-assistant-v1 > svg {
    margin-left: 10px;
    border: 2px solid #0944AA;
    border-radius: 30px;
}







.rules {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    overflow-y: scroll;
    padding: 1em;
    color: #0944AA;
}

.rules > .back {
    background: black;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    opacity: .5;
}

.rules > .wrap {
    background: #FFFFFF;
    z-index: 999;
    border-radius: 8px;
    padding: 20px 30px;
}

.rules > .wrap > .name {
    font-weight: 500;
    font-size: 32px;
    text-align: center;
    color: #0944AA;
    position: relative;
}

.rules > .wrap > .name > svg {
    width: 1em;
    height: 1em;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

.rules > .wrap > .desc {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 45px;
    flex-wrap: wrap;
    flex-direction: column;
}

@media (min-width: 420px){
    .rules > .wrap > .desc {
        flex-direction: row;
    }
}

.rules > .wrap > .desc > .wrap {
    display: flex;
    align-items: center;
    color: #0944AA;
    margin: 20px 0px 20px 0;
}

.rules > .wrap > .desc > .wrap.center {
    margin: 20px 0px 20px 0;
}

@media (min-width: 420px){
    .rules > .wrap > .desc > .wrap.center {
        margin: 20px 0px 20px 75px;
    }
}

.rules > .wrap > .desc > .wrap.last {
    margin: 20px 0 20px 0;
}

@media (min-width: 570px){
    .rules > .wrap > .desc > .wrap.last {
        margin: 20px 0px 20px 75px;
    }
}

.rules > .wrap > .desc > .wrap > .name {
    font-weight: 500;
    font-size: 24px;
    letter-spacing: 0.02em;
    margin-left: 0.5em;
}

.rules > .wrap > .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 600px){
    .rules > .wrap > .wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
        align-items: inherit;
    }
}

@media (min-width: 820px){
    .rules > .wrap > .wrap {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (min-width: 1760px){
    .rules > .wrap > .wrap {
        display: flex;
        flex-direction: row;
    }
}

.scroll_none {
    overflow: hidden;
}


.rules > .wrap > .wrap > .block {
    max-width: 260px;
    min-width: 260px;
    width: 100%;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

@media (min-width: 600px){
    .rules > .wrap > .wrap > .block {
        margin-bottom: 0;
    }
}


.rules > .wrap > .wrap > .block > .top {
    background: #E9F2FA;
    border-radius: 8px 8px 0px 0px;
    padding: 20px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #0944AA;
}

.rules > .wrap > .wrap > .block > .top > svg {
    width: 2em;
    height: 2em;
}

.rules > .wrap > .wrap > .block > .top > .name {
    font-weight: 500;
    font-size: 24px;
    margin-top: 20px;
}

.rules > .wrap > .wrap > .block > .center {
    padding: 25px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}

.rules > .wrap > .wrap > .block > .center > img {
    margin-bottom: 25px;
}

.rules > .wrap > .wrap > .block > .center > ul {
    margin: 0;
    padding: 0 0 0 30px;
}

.rules > .wrap > .wrap > .block > .center > ul > li {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    margin-bottom: 20px;
}

.rules > .wrap > .wrap > .block > .bottom {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.02em;
    color: #222222;
    padding: 10px;
    border-top: 1px solid rgba(90, 102, 113, 0.2);
}

.rules > .wrap > .wrap > .block > .center > .wrap > .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    text-align: center;
    margin-bottom: 5px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap {
    display: grid;
    grid-template-columns: .5fr 1fr;
    margin-bottom: 10px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name.bottom {
    border-bottom: 1px solid #0944AA;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name.left {
    border-left: 1px solid #0944AA;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name > .name {
    flex-grow: 1;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    text-align: center;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name > .desc {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap > .name > .desc > svg {
    margin-left: 5px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 {
    margin-top: 25px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 > .name {
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #0944AA;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 > .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 > .wrap > .name {
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    text-transform: uppercase;
    color: #0944AA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 > .wrap > .name.left {
    border-left: 1px solid #0944AA;
}

.rules > .wrap > .wrap > .block > .center > .wrap > .wrap_v2 > .wrap > .name > .left {
    margin-left: 5px;
}


.rules > .wrap > .wrap_1 {
    display: flex;
    margin-top: 45px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.rules > .wrap > .wrap_1 .wrap {
    border-radius: 5px 5px 0px 0px;
    max-width: 500px;
    overflow: hidden;
    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}

.rules > .wrap > .wrap_1 .wrap .top {
    display: flex;
    align-items: center;
}

.rules > .wrap > .wrap_1 .wrap .top .left {
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
    padding: 10px;
    color: #FFFFFF;
    padding: 1px 10px;

}

.rules > .wrap > .wrap_1 .wrap .top .left.one {
    background: #1DB100;
}

.rules > .wrap > .wrap_1 .wrap .top .left.two {
    background: #F27200;
}

.rules > .wrap > .wrap_1 .wrap .top .left.three {
    background: #2E6670;
}


.rules > .wrap > .wrap_1 .wrap .right {
    font-size: 32px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    color: #209D11;
    background: #E0E6E4;
    padding: 15px;
    width: 100%;
}

.rules > .wrap > .wrap_1 .wrap .center {
    padding: 20px;
}

.rules > .wrap > .wrap_1 .wrap .center > .name {
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    color: #484D59;
    margin-bottom: 20px;
}


.rules > .wrap > .wrap_1 .wrap .center .list .line {
    height: 50px;
}

.rules > .wrap > .wrap_1 .wrap .center .list .line.grid {
    display: grid;
    align-items: center;
    grid-template-columns: .25fr 1fr 1fr;
}

.rules > .wrap > .wrap_1 .wrap .center .list .line.flex {
    padding: 0 10px;
    display: flex;
    align-items: center;
}

.rules > .wrap > .wrap_1 .wrap .center .list .line.flex .icon {
    margin-right: 10px;
}

.rules > .wrap > .wrap_1 .wrap .center .list .line > .name {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
    color: #484D59;
}

.rules > .wrap > .wrap_1 .wrap .center .list .line .number {
    font-size: 14px;
    font-weight: 500;
    line-height: 16.59px;
}

.rules > .wrap > .wrap_1 .wrap .bottom {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    text-align: left;
    color: #484D59;
    padding: 0 20px 20px 20px;
}