@font-face {font-family: 'Roboto';src: url(/res/fonts/Roboto-Regular.ttf); src: local(Roboto), url(/res/fonts/Roboto-Regular.ttf);}
*{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto',sans-serif;}
body{background: #F6F6F6;-webkit-user-select: none; user-select: none;-khtml-user-select: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;}
ul,li{list-style: none;}
/*  убирает синие выделение при нажатии ссылок */
button{cursor: pointer;}
textarea{resize: none;}
a{text-decoration:none}
[data-href]{cursor: pointer;}
/*open and close page*/
.transformScaleYes{transition: .3s;}
.transformScaleNot{transform: scale3d(0, 0, 0);transition: .3s;position: absolute;}     
.loaderCenterPage{width: 100%;height: calc(100vh - 160px);display: flex;align-items: center;justify-content: center;margin-top: 50px;font-size:14px;}

/*default colors*/
.bc-standard{background-color: #336699;}
/* body.dark_theme .bc-standard{background-color: #6699cc!important;} */
.cl-standard{color:#336699;}
body.dark_theme .cl-standard{color:#6699cc!important;}

.error{color:red;font-size: 14px;display: block;margin-bottom: 5px;}

/*default button*/
.default-btn{outline: none;width: 100%;border-radius: 16px;height: 50px;font-size: 16px;color: #fff;border: none;position: relative;transition-duration: 0.2s;overflow: hidden;}
.default-btn:after {content: "";background: #f1f1f1;display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s}
.default-btn:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s}
.default-btn:hover{background-color: #2b5178;}
/*default input*/
.default-input{height:50px;width: 100%;border-radius: 10px;border:1px solid #dbdbdb;background-color: #ececec;outline: none;font-size: 15px;padding: 0 15px;}
.default-input:focus {border-color: #2b547e;}

.container{padding: 0 10px;max-width: 600px;margin: 0 auto;}
.content{margin: 55px 0;}

/*readyLoad*/
.ready-load{position: fixed;width: 100%;height: 100%;background-color: #fff;z-index: 105;display: flex;justify-content: center;align-items: center;top: 0;}
.ready-load>span{position: absolute;bottom: 30px;background: linear-gradient(45deg, #0076b1 33%, #00a300 66%, #990016);   -webkit-background-clip: text;-webkit-text-fill-color: transparent;display: table;font-weight: bold;}

/*header and nav*/
.header{height: 50px;position: fixed;width: 100%;top: 0;background-color: #f5f5f5;z-index: 99;}
.header ul{height: 50px;display: flex;justify-content: space-between;align-items: center;}
.header ul>li{padding: 12px;font-weight: bold;border-radius: 16px;}
.headerLiScroll{overflow-y: scroll;height: 50px;text-align: center;width: 75%;}
nav{position: fixed;width: 100%;background-color: #ffffff;bottom: 0;height: 60px;z-index: 99;text-align: center;box-shadow: 0px 0px 80px 0px #00000014; }
nav ul{display: flex;justify-content: space-around;align-items: center;height: 60px;}
nav .nav-li{display: flex;flex-direction: column;width: 100%;height: 100%;justify-content: center;margin: 0 -10px;color: #b0b2b8;cursor:pointer;}
nav .nav-li:not(.active):hover{opacity:0.6;}
nav .nav-li.active{color: #336699; }
nav .nav-li>i{font-size: 23px;}
nav .nav-li>span{font-size: 7.5px;margin-top: 4px;}

/* hsk lvl colors */
.bc_hsk1{background:#F6B51E;color:#fff;} .cl_hsk1{color:#F6B51E;}
.bc_hsk2{background:#12A394;color:#fff;} .cl_hsk2{color:#12A394;}
.bc_hsk3{background:#ED6E06;color:#fff;} .cl_hsk3{color:#ED6E06;}
.bc_hsk4{background:#BA1719;color:#fff;} .cl_hsk4{color:#BA1719;}
.bc_hsk5{background:#1B3E76;color:#fff;} .cl_hsk5{color:#1B3E76;}
.bc_hsk6{background:#6B3557;color:#fff;} .cl_hsk6{color:#6B3557;}

/* paginatiion */
.pagination{display:flex;justify-content:space-between;font-size:14px;}
.pagination a{color:#000;background:#fff;padding:16px;border-radius:16px;cursor: pointer;}
.pagination a:hover{opacity:0.7;}
.pagination a:first-child i{margin-right:10px;}
.pagination a:last-child i{margin-left:10px;}

/* modal */

.modal{display:none;justify-content: center;align-items:center;height:100%;width:100vw;position:absolute;margin-top:-55px;}
.modal-dark-side{background-color: #000;opacity:0.5;width:100%;height:100%;position: fixed;z-index:99;margin-top:-55px;display:none;}

.modal-content{position:fixed;background-color: #fff;z-index: 999;width:40%;height:40%;padding:20px;border-radius: 16px;}
@media screen and (max-width: 720px) {
    .modal-content{width:90%}
}

/* dark theme values */
body.dark_theme nav{background-color: #3a3d41!important;}
body.dark_theme nav .nav-li{color:#a3a9ac;}
body.dark_theme nav .nav-li.active{color:#6699cc!important;}

body.dark_theme .pagination a:not(:empty){background-color: #2a2b2e!important;color:#ececec;}

body.dark_theme .bc_hsk1{background:#8B5E00;color:#ececec;} body.dark_theme .cl_hsk1{color:#8B5E00;}
body.dark_theme .bc_hsk2{background:#0A5D51;color:#ececec;} body.dark_theme .cl_hsk2{color:#0A5D51;}
body.dark_theme .bc_hsk3{background:#8A3703;color:#ececec;} body.dark_theme .cl_hsk3{color:#8A3703;}
body.dark_theme .bc_hsk4{background:#600C0D;color:#ececec;} body.dark_theme .cl_hsk4{color:#600C0D;}
body.dark_theme .bc_hsk5{background:#254F99;color:#ececec;} body.dark_theme .cl_hsk5{color:#254F99;}
body.dark_theme .bc_hsk6{background:#82406E;color:#ececec;} body.dark_theme .cl_hsk6{color:#82406E;}

body.dark_theme .modal-content{background-color: #2a2b2e;color:#ececec;}

/* main */
.main-discipline-list ul{ display: flex; justify-content: center; flex-wrap: wrap;margin-left:-8px;margin-right:-8px; }
.main-discipline-list ul>li{ background-color: #fff; border-radius: 16px; display: flex; justify-content: center; flex-direction: column; margin: 5px; font-weight: bold; width: 45%;  padding: 0 5px 5px 5px; text-align: center; cursor: pointer;}
.main-discipline-list.three_block ul>li{width:30%;position:relative;}
.main-discipline-list ul>li{position: relative;}

.main-discipline-list ul>li:hover{opacity: .7;}
.main-discipline-list ul>li>span{font-size: 13px;text-align: center;}
.main-discipline-list ul>li>i{margin-bottom: 6px;color:#4d5254;margin-top:20px;}

.transformTranslateRight{transform:translateX(1000%);position: absolute;}
.transformTranslateLeft{transform:translateX(-1000%);position: absolute;transition: 0.3s;}
.transformTranslateCenter{transform:translateX(0);transition: 0.3s;}

.whatshsk{margin-top:10px;background:#fff; border-radius:16px;padding:14px;font-size:15px;display:flex;align-items:center;display:flex;align-items:center;}
.whatshsk:hover{opacity: 0.7;}
.whatshsk i{color: #4d5254;}
.whatshsk span{font-weight:bold;margin-left:12px;}

.accuracy_text{font-size: 8px!important; color: #fff; background: #336699;width: 100%; position: absolute;top:0;left: 50%;transform: translateX(-50%);padding: 4px; border-radius: 6px 6px 0 0; font-weight: 400;}

.silver_block{background:rgb(222, 222, 222)!important;opacity:0.6;}
/* dark theme */
body.dark_theme .main-discipline-list ul>li ,body.dark_theme .whatshsk:not(.download_apk){background-color: #2a2b2e!important;color:#ececec!important;}
body.dark_theme .main-discipline-list ul>li>i, body.dark_theme .whatshsk:not(.download_apk) i{color:#a3a9ac!important;}
body.dark_theme .whatshsk:not(.download_apk) span{color: #6699cc!important;}

body.dark_theme h3{color:#ececec!important;}
body.dark_theme .silver_block{background:#1a1b1e!important;opacity:0.3;}

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
.premium_banner { position: relative; overflow: hidden; }

.premium_banner::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: rgba(255, 255, 255, 0.2); /* Полупрозрачная белая полоса */ transform: rotate(30deg); animation: shine 3s infinite; }

@keyframes shine { 0% { transform: translateX(-100%) rotate(30deg); } 50% { transform: translateX(100%) rotate(30deg); } 100% { transform: translateX(100%) rotate(30deg); } }

/* main-streak */
.streak_block{height:70vh; display: flex; justify-content: center; align-items: center;margin:16px;} 
.streak-container { margin-top:10px;text-align: center; background: #ffffff; padding: 20px 30px; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width:100%;} 
.streak-header { font-size: 24px; margin-bottom: 10px; } .streak-message { font-size: 18px; color: #555; margin-bottom: 20px; } 
.streak-days { font-size: 25px; margin-top:10px; color: #ff5722; display: flex; align-items: center; justify-content: center; gap: 6px; } 
.streak-fire { color: #ff5722; font-size:70px;animation: pulse 1.5s infinite;} @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* main-daily */
.daily-goal { background-color: #fff; border-radius: 8px; padding: 20px; text-align: center; font-family: Arial, sans-serif; }
.daily-goal h3 { margin: 0 0 10px; font-size: 20px; color: #333; }
.daily-goal p { margin: 10px 0; color: #555; }
.daily-goal .goal-count { font-weight: bold; color: #007BFF; }
.progress-bar { width: 100%; height: 12px; background-color: #e0e0e0; border-radius: 6px; overflow: hidden; margin: 15px 0; position: relative; }
.progress-bar .progress { height: 100%; background-color: #4caf50; transition: width 0.3s ease-in-out; }
.progress-text { font-size: 14px; color: #777; }
.complete-goal-btn { background-color: #007BFF; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; }
.complete-goal-btn:hover { background-color: #0056b3; }
.set-goal { background-color: #fff; border-radius: 8px; padding: 20px; text-align: center; font-family: Arial, sans-serif; }
.set-goal h3 { margin: 0 0 10px; font-size: 20px; color: #333; }
.set-goal p { margin: 10px 0; color: #555; font-size: 14px; }
.set-goal-btn { background-color: #007BFF; color: #fff; border: none; border-radius: 6px; padding: 10px 15px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; }
.set-goal-btn:hover { background-color: #0056b3; }
.daily-complete { background-color: #fff; border-radius: 8px; padding: 16px; text-align: center; font-family: Arial, sans-serif; border: 2px solid #4caf50; }
.daily-complete h3 { margin: 0 0 10px; font-size: 22px; color: #4caf50; }
.daily-complete p { margin: 10px 0 4px; color: #333; font-size: 14px; }
.next-goal-btn { background-color: #4caf50; color: #fff; border: none; border-radius: 6px; margin-top:5px;padding: 10px 16px; font-size: 15px; cursor: pointer; transition: background-color 0.3s ease; }
.next-goal-btn:hover { background-color: #388e3c; }

body.dark_theme .daily-goal, body.dark_theme .set-goal, body.dark_theme .daily-complete {background:#2a2b2e!important;}
body.dark_theme .daily-goal p,body.dark_theme .set-goal p,body.dark_theme .daily-complete p{color:#efefef;}