@font-face {  src: url("font/open-sans.ttf");  font-family: "Open sans";  }

@font-face {  src: url("font/open-sans-bold.ttf");  font-family: "Open sans bold";  }

@font-face {  src: url("font/smash.ttf");  font-family: "Smash";  }

body {background: #8b6ec1;font-size: 15px;font-family: "Open sans";margin: 0;}

a {text-decoration: none;}

b {font-family: "Open sans bold";}

ul {margin: 0;padding: 0;}

li {list-style-type: none;}

input {line-height: 40px;padding: 0 10px;font-size: 14px;font-family: "Open sans";border: none;outline: none;}

textarea {background: #6c529c;color: #ffffff;width: calc(100% - 20px);padding: 15px 12px;font-size: 16px;font-family: "Open sans";outline: none;border: none;resize: none;border-radius: 10px;margin-bottom: 5px;}

textarea::placeholder {color: #c6b0ee;}

.send {line-height: 40px;font-size: 14px;font-family: Open sans bold;cursor: pointer;transition: .2s;}

.send.anim:active {transform: scale(.9);}

.tti {display: none;}

.empty {background: #7258a2;color: #c4aaf5;line-height: 40px;font-size: 16px;text-align: center;border-radius: 15px;margin-top: 20px;cursor: default;}

.warning {background: #d84b4b;padding: 5px 10px;font-size: 13px;margin-top: 7px;}

.example {background: #533d7b;line-height: 25px;padding: 5px 10px;font-size: 14px;margin-top: 7px;}

.select {position: relative;}

.select .title {background: #513c7b;color: #a58ada;width: 80px;height: 40px;line-height: 40px;padding: 0 10px;font-size: 13px;font-family: "Open sans bold";text-align: center;border-radius: 10px;cursor: pointer;overflow: hidden;}

.select .title.ac {background: #594480;color: #bf9dff;box-shadow: 0 0 0 2px #bf9dff inset;}

.select .option {background: white;width: 200px;max-height: 179px;position: absolute;z-index: 1;top: 55px;left: 0;overflow-y: scroll;opacity: 0;visibility: hidden;border-radius: 6px;transition: .3s;box-shadow: 0 2px 5px #00000080;}

.select .option::-webkit-scrollbar {display: none;}

.select .option::-webkit-scrollbar-track {background: #f1f1f1;}

.select .option::-webkit-scrollbar-thumb {background: #888;}

.select .option.ac {top: 50px;visibility: visible;opacity: 1;}

.select .option .item {color: #553f7d;height: 40px;line-height: 40px;padding-left: 10px;font-size: 14px;font-family: "Open sans bold";border-bottom: 1px solid #e9e3f5;cursor: pointer;overflow: hidden;transition: .2s;}

.select .option .item:hover {background: #7359a5;color: white;}

.top-progress {background: #d7c2ff;height: 10px;position: fixed;top: 0;left: 0;}

.must {background: #745ba9;color: white;line-height: 20px;padding: 10px;font-size: 14px;cursor: default;border-radius: 10px;margin-bottom: 10px;}

.tabs {margin-bottom: 10px;}

.tabs .slider {background: #ffffff9e;color: #8b6ec1;width: 130px;height: 40px;position: absolute;top: 0;left: -177px;right: 0;margin: 0 auto;border-radius: 25px;transition: .2s;}

.tabs .tab {background: #6c529c;color: #c7b2f1;line-height: 43px;padding: 0 20px;font-family: "Open sans bold";text-align: center;border-radius: 25px;cursor: pointer;margin: 0 10px;transition: .2s;}

.tabs .tab:hover {background: #614a90;}

.tabs .tab.ac {background: #ffffff;color: #8b6ec1;}

.tab-block {}

.tab-block.two,.tab-block.three,.tab-block.four,.tab-block.five,.tab-block.six {display: none;}

.material.grammar .send, .material.essay .send {background: #7b60af;color: #d5c1f9;line-height: 40px;font-size: 13px;font-family: "Open sans bold";text-align: center;border-radius: 10px;box-shadow: 0 0 0 2px #d5c1f9 inset;transition: .2s;}

.message {color: #8b6ec1;width: 100%;line-height: 45px;padding: 0 10px;text-align: center;font-family: Open sans bold;position: fixed;z-index: 2;bottom: -45px;left: 0;right: 0;transition: .5s;cursor: pointer;margin: auto;}

.message.red {background: #252525fa;}

.message.green {background: #ffffff;color: #5d4786;}

.message.active {bottom: 0;}

.container {margin: 0 auto;margin-bottom: 20px;}

.switch {background: #6c529c;width: 40px;height: 14px;border-radius: 20px;margin: auto;margin-top: 8px;margin-bottom: 20px;cursor: pointer;transition: .5s;}

.switch.ac {background: #ffffff;box-shadow: 0 0 5px #ffffff99;}

::-webkit-scrollbar {width: 6px;}

::-webkit-scrollbar-thumb {background: #fff;border-radius: 6px;}

::-webkit-scrollbar-thumb:hover {background: #eee;}

.dialog {position: fixed;z-index: 3;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(.9);border-radius: 15px;box-shadow: 0 2px 8px #00000036;opacity: 0;visibility: hidden;overflow: hidden;transition: .3s;}

.dialog.ac {opacity: 1;visibility: visible;transform: translate(-50%,-50%) scale(1);}

.dialog .title {background: #7258a2;color: #ffffff;line-height: 45px;font-size: 17px;text-align: center;cursor: default;}

.dialog .list {background: #fff;height: 252px;overflow-y: scroll;}

.dialog .list::-webkit-scrollbar {display: none;}

.dialog .list .item {color: #383838;padding: 10px;border-bottom: 1px solid #f3f1f7;cursor: pointer;transition: .1s;}

.dialog .list .item:hover {background: #fcfaff;color: #7258a2;}

.dialog .text {background: white;color: #333;padding: 10px;font-size: 14px;cursor: default;}

.wrapper.ac {width: 100%;height: 100vh;background: #00000063;position: fixed;z-index: 3;top: 0;left: 0;transition: .2s;cursor: pointer;}

.flex {display: flex;}

.out {color: rgb(202, 174, 255);line-height: 40px;text-align: center;cursor: default;}

.menu {background: #a78ed8;height: 55px;text-align: center;margin: 0 auto;margin-bottom: 25px;border-top: none;display: flex;}

.menu .item .icon {background: #8569b9;background-size: cover;width: 40px;height: 40px;cursor: pointer;display: inline-block;border-radius: 50%;transition: .2s;}

.menu .item .icon:hover, .menu .icon.ac {background-color: #685094;}

.menu .item .icon.languages {background-image: url("../images/icon/menu/languages.png");}

.menu .item .icon.statistics {background-image: url("../images/icon/menu/statistics.png");}

.menu .item .icon.favourite {background-image: url("../images/icon/menu/favourite.png");}

.menu .item .icon.progress {background-image: url("../images/icon/menu/progress.png");}

.menu .item .icon.practice {background-image: url("../images/icon/menu/practice.png");}

.menu .item .icon.category {background-image: url("../images/icon/menu/category.png");}

.menu .item .icon.parse {background-image: url("../images/icon/menu/parse.png");}

.menu .item .icon.grammar {background-image: url("../images/icon/menu/grammar.png");}

.menu .item .icon.essay {background-image: url("../images/icon/menu/essay.png");}

.menu .item .icon.words {background-image: url("../images/icon/menu/words.png");}

.menu .item .icon.phrases {background-image: url("../images/icon/menu/phrasebook.png");}

.menu .item .tooltip {background: #ffffff;color: #775ca9;max-width: 100px;line-height: 26px;padding: 0 7px;font-size: 11px;font-family: Open sans bold;position: absolute;top: 7px;left: 45px;z-index: 1;border-radius: 10px;opacity: 0;visibility: hidden;transition: .3s;box-shadow: 0 2px 3px #8b6ec12b;}

.menu a {position: relative;}

.menu a:hover .tooltip {opacity: 1;visibility: visible;left: 55px;}

.page .popup {background: #252525;position: fixed;z-index: 2;bottom: -45px;box-shadow: 0 0px 10px #00000061;transition: .2s;}

.page .popup.ac {bottom: 0;}

.page .popup .edit,.page .dialog .delete {display: none;}

.page .popup form {}

.page .popup form input {width: calc(100% - 220px);background: #292929;color: #e2e2e2;font-family: Open sans bold;}

.page .popup .title {color: whitesmoke;line-height: 40px;padding-left: 10px;font-family: Open sans bold;cursor: default;float: left;}

.page .popup .right {float: right;}

.page .popup .right .btn {width: 100px;line-height: 40px;font-size: 13px;font-family: Open sans bold;text-align: center;float: left;cursor: pointer;transition: .1s;}

.page .popup .right .btn.cancel {background: #1d1d1d;color: #b9b9b9;}

.page .popup .right .btn.cancel:hover {background: #151515;}

.page .popup .right .btn.ok {background: #5598e0;color: white;}

.page .popup .right .btn.ok:hover {background: #4783c3;}

/* Welcome */
.page.main {}

.page.main .center {width: 400px;display: flex;align-items: center;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.page.main .center .image {background-image: url('../image/presentation.png');width: 100px;height: 100px;flex-shrink: 0;}

.page.main .center .text {color: #ddcbff;line-height: 27px;margin-left: 5px;font-size: 17px;cursor: default;}

/* Policy */
.policy .text{color: #ffffff;line-height: 25px;cursor: default;}
.policy .text b{color: #ffffff;font-size: 18px;}

@keyframes animate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mobile */
@media (max-width: 768px) and (min-width: 240px) {
    .material img {
        width: 100%;
    }

    .menu {
        overflow-x: scroll;
    }

    .menu::-webkit-scrollbar,.tabs::-webkit-scrollbar,.tab-sec::-webkit-scrollbar,.page.statistics .list.sections::-webkit-scrollbar {
        display: none;
    }

    .tabs,.tab-sec {
        overflow-x: scroll;
        white-space: nowrap;
        text-align: center;
    }

    .tabs .tab,.tab-sec .tab {
        display: inline-block;
    }

    .dialog {
        width: 80%;
    }

    /* policy */
    .page.policy .text{width:80%;padding:20px 10px;margin:0 auto;}

    /* statistics */
    .page.statistics .list.sections {
        overflow-x: scroll;
        white-space: nowrap;
        text-align: center;
    }

    .page.statistics .list.sections .item {
        display: inline-block;
    }

    .page.statistics .tab-block.one .list.sections .item .name {
        color: #c6a7ff;
        font-size: 13px;
    }

    .page.statistics .tab-block.one .list.sections .item .digit {
        font-size: 12px;
        margin-top: 2px;
    }

    .page.progress form#add input {
        width: 150px;
    }

    /* words */
    .page .popup {
        width: 100%;
        left: 0;
    }

    .page.words form input {
        width: calc(100% - 20px);
        margin-bottom: 10px;
        display: block;
    }

    .page.words form .select {
        margin-bottom: 10px;
    }

    /* practice */
    .page.practice .tab-block.one .panel {
        height: 350px;
    }

    /* grammar */
    .material.grammar .category, .material.grammar .more {
        display: none;
    }

    /* words */
    .material.words form input[type=search] {
        width: 100%;
    }
}

@media (min-width: 420px) and (max-width:768px) {
    .menu {
        justify-content: center;
    }
}

/* PC */
@media (min-width: 768px) {
    .main .item {
        transition: .2s;
    }

    .container {
        width: 600px;
        margin-top: 20px;
    }

    .menu {
        width: 52px;
        height: 363px;
        justify-content: center;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        flex-direction: column;
        position: fixed;
        top: 83px;
        right: 300px;
        border-radius: 25px;
    }

    .material img {
        width: 420px;
    }

    .tabs,.tab-sec {
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .page.statistics {
        width: 400px;
    }

    .dialog {
        width: 400px;
    }

    .page .popup {
        width: 600px;
    }

    /* policy */
    .page.policy .text{width:500px;padding:30px 15px;margin:0 auto;}

    /* statistics */
    .page.statistics .list.sections {
        display: flex;
        flex-direction: row;
    }

    .page.statistics .list.sections .item {
        flex: 1;
    }

    .page.statistics .tab-block.one .list.sections .item .name {
        color: #c6a7ff;
        font-size: 12px;
    }

    .page.statistics .tab-block.one .list.sections .item .digit {
        font-size: 11px;
        margin-top: 1px;
    }

    .page.progress form#add input {
        width: 300px;
    }

    .page.practice .tab-block.one .panel input {
        font-size: 16px;
    }

    /* moderation user */
    .page.words form {
        justify-content: center;
        display: flex;
    }

    .page.words form input {
        width: 140px;
        margin-right: 5px;
    }

    .page.words form .select {
        margin-right: 5px;
    }

    .material.words form input[type=search] {
        width: 300px;
    }
}