#progress_block {
width: 800px;
margin: 80px auto 40px auto;
box-sizing: border-box;
}

.theme {
font-family: 'ZenKakuGothicNew-Regular', serif;
font-size: 22px;
text-align: center;
}

.theme>font {
display: block;
font-size: 17px;
margin-bottom: 20px;
}

.theme_info {
display: flex;
align-items: center;
margin-top: 40px;
height: 40px;
}

.scale_block {
border-radius: 100px;
width: 100%;
height: 100%;
border: 2px solid #cdcdcd;
overflow: hidden;
}

.scale {
height: 100%;
border-radius: inherit;
transition: width 1.8s, background 0s;
display: flex;
align-items: center;
width: 0;
justify-content: end;
}

.percent {
color: white;
font-size: 15px;
opacity: 0;
transition: .4s;
margin-right: 12px;
}

.theme_info9 {
margin-bottom: 40px;
}

#tasks_list {
margin: 20px 0;
}

#reset {
padding: 0px 20px;
margin: 80px auto;
width: max-content;
}

#reset_confirm,
#select_service {
position: fixed;
width: 100%;
z-index: 1;
box-sizing: border-box;
height: 100%;
top: 0;
background: rgb(0, 0, 0, .3);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: .25s;
z-index: 2;
}

.go_services {
width: 100%;
margin-bottom: 30px;
}

#select_service>div>p {
font-size: 22px;
margin: 0 0 40px 0;
}

#select_service>div>div>font {
font-size: 22px;
margin-bottom: 40px;
display: block;
font-family: "Raleway", serif;
}

.go_services>div {
padding: 0px 20px;
height: 50px;
cursor: pointer;
font-size: 17px;
font-family: "Raleway", serif;
color: var(--dark);
border: 1px solid var(--dark);
display: inline-flex;
align-items: center;
justify-content: center;
transition: .25s;
border-radius: 100px;
margin: 0 10px 10px 0;

}

.go_services>div:hover {
background: var(--dark);
font-family: "Raleway-Medium", sans-serif;
color: white;
}

#reset_confirm>div,
#select_service>div {
width: 400px;
padding: 20px;
background: white;
position: relative;
text-align: center;
margin-top: 60px;
box-sizing: border-box;
}

#select_service>div {
width: 800px;
}

#confirm_text {
font-size: 19px;
margin: 0 30px 20px;
}

#no,
#yes {
border-radius: 100px;
padding: 0 20px;
width: 100%;
color: var(--dark);
cursor: pointer;
margin: 10px auto;
background: transparent;
}

#yes {
margin-top: 20px;
background: var(--dark);
color: white;
}

#close_select_service {
position: absolute;
width: 30px;
height: 30px;
right: 0;
display: flex;
top: 0;
margin: 10px;
cursor: pointer;
opacity: .4;
align-items: center;
justify-content: center;
}

#close_select_service:before,
#close_select_service:after {
content: "";
position: absolute;
width: 9%;
height: 80%;
background: var(--dark);
transform: rotate(-45deg);
border-radius: 12px;
}

#close_select_service:after {
transform: rotate(45deg);
}

.theme_block {
cursor: pointer;
transition: .3s;
padding: 20px;
box-sizing: border-box;
margin-top: 40px;
}

@media (max-width: 950px) {

.title_block {
margin-top: 120px;
}
}

@media (max-width: 850px) {

#progress_block {
width: calc(100% - 40px);
}

#reset_confirm>div,
#select_service>div {
width: 100%;
}
}

@media (max-width: 768px) {

#select_service>div>div>font {
font-sise: 16px;
}

#select_service>div {
max-height: calc(100% - 60px);
overflow: auto;
scrollbar-width: none;
padding-top: 40px;
margin-top: 0;
}

.theme_block {
padding: 0;
}

.description {
margin-top: 12px;
}

}

.hide_block {
visibility: hidden;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: .25s;
}

.hide_block>font {
display: block;
text-align: center;
margin-top: 40px;
font-size: 19px;
}

.services_list {
margin-top: 40px;
text-align: center;
}

.services_list>a {
border: 1px solid var(--dark);
border-radius: 100px;
margin: 0 10px 10px 0;
color: var(--dark);
text-decoration: none;
padding: 12px 22px;
font-family: "Raleway", serif;
display: inline-block;
transition: .25s;
}

.services_list>a:hover {
font-family: "Raleway-Medium", serif;
background: var(--dark);
color: white;
}

.close {
width: max-content;
padding: 0 20px;
margin: 40px auto 0;
min-width: 120px;
}

.open_theme>.hide_block {
visibility: visible;
opacity: 1;
max-height: max-content;
}

.services_list>.go_tests {
margin-top: 30px;
}