body {background: url('../img/main_bg.jpg') center top no-repeat;background-size: 1680px 735px;}

/* header */
.header {height:90px;}
.header .wrapper {display: flex; align-items: center; height: 100%;}
.header .logo-img-mobile {display: none}

/* main menu */
.nav-main ul{display: flex; gap: 4px;  border-bottom: 2px solid #484848; height: 40px; width: 100%; font-size: 18px; text-transform: uppercase;margin-bottom: 0;}
.nav-main a{display: flex;align-items: center;justify-content: center; height: 100%; text-decoration: none;color: #585858;width: 100%;}
.nav-main li{flex: 1 1 0; background: #DCDCDC linear-gradient(to top, #ABABAB, #F2F2F2); border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;height: 100%; line-height: 39px; vertical-align: middle; text-align: center;}
.nav-main li:hover,
.nav-main li.active {background: #404040 linear-gradient(to top, #404040, #646464);}
.nav-main li:hover a,
.nav-main li.active a{text-decoration: underline; color: #FFFFFF;}

/* submenu */
.submenu {height: 50px; margin-bottom: 10px;}
.submenu {height: 50px; margin-bottom: 10px;}

.submenu ul {display: flex;flex-wrap: wrap;justify-content: space-between}
.submenu li{flex: 0 1 auto; background: #535353 linear-gradient(to top, #CACACA, #EEEEEE);border-radius: 3px;color: #585858;font-size: 14px;height: 35px;line-height: 16px;text-align: center;vertical-align: middle;width: 23%;}
.submenu li a{color: #585858 !important; display: inline-block; height: 100%; padding: 8px; width: 100%;}
.submenu li.current,
.submenu li:hover{background: #535353 linear-gradient(to top, #424242, #636363);}
.submenu li.current a,
.submenu li:hover a{color: white !important;}
.submenu li.last{margin-right: 0;}

.main {
    min-height: 100%;
    background-color: white;
    border-bottom: 2px solid #484848;
    border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    box-shadow:rgba(100, 100, 100, 0.3) 0 0 9px 1px;
    margin: 0 auto 30px auto;
    max-width: 1200px;
    padding: 25px 15px;
}

/* footer */
.footer {height: 40px; background: #363636 linear-gradient(to top, #303030, #4B4B4B);position: relative;}
.footer .copyright{color: white;font-size: 16px;position: absolute;right: 20px;top: 7px;}

/* wrapper */
.wrapper {max-width: 1200px; margin: 0 auto; position: relative;}

/** Mobile nav */
.nav-mobile {position: fixed;top: 60px;right: 12px;width: 280px;background: #ffffff;border-radius: 14px;box-shadow: 0 12px 32px rgba(0,0,0,.18);display: none;z-index: 10000;overflow: hidden;}
.nav-mobile.open {display: block;}
.nav-mobile ul {list-style: none;margin: 0;padding: 0;}
.nav-mobile a {text-decoration: none;}
.nav-mobile .menu-item > a,
.nav-mobile .menu-parent {display: flex;align-items: center;padding: 14px 16px;font-size: 16px;color: #111827;text-decoration: none;}
.nav-mobile .menu-item > a:hover {background: #f3f4f6;}
.nav-mobile .menu-item.active > a {color: #2563eb;font-weight: 600;background: #eef2ff;}
.nav-mobile .menu-item.has-children .menu-parent {font-weight: 600;color: #374151;background: #f9fafb;}
.nav-mobile .nav_submenu {background: #f9fafb;padding: 4px 0 8px;}
.nav-mobile .nav_submenu .subitem a {padding: 10px 16px 10px 32px;font-size: 14px;color: #374151;display: block;}
.nav-mobile .nav_submenu .subitem.active a {color: #2563eb;font-weight: 600;}
.nav-mobile-btn {width: 44px;height: 44px;cursor: pointer;display: none;position: absolute;right: 6px;top: 5px;}
.nav-mobile-btn::before {content: "☰";font-size: 36px;line-height: 42px;}

/* Популярные запросы */
.popular {margin-bottom: 10px;}
.popular .popular-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;}
.popular .popular-header h3{margin: 0;}
.popular .popular-nav{display: flex; gap: 5px;}
.popular .popular-list .empty{text-align: center;}
.popular .popular-list ul {display: flex;flex-wrap: wrap;gap: 8px 8px;margin: 0;padding: 0;}
.popular .popular-list li{font-family: 'Hasklig', monospace; background-color: #F3F3F3;border-radius: 3px;padding: 0 10px;height: 22px;line-height: 22px;max-width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 0 1 auto;text-align: center;}

/* search-container */
.search-container{display: flex;align-items: flex-start;gap: 30px;}
.search-container .left{flex: 1 1 auto; min-width: 0;}
.search-container .right{flex: 0 0 270px; min-width: 0;}

/* search-filter */
.search-filter .search-filter-header{display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;}
.search-filter .search-filter-header h3{margin: 0;}
.search-filter .label{font-size: 14px; font-weight: bold; margin-bottom: 0;}
.search-filter input[type=radio] {vertical-align: sub;}
.search-filter .side_block{margin-bottom: 8px;}
.search-filter select {width: 100%;box-sizing: border-box; max-width: 100%;}
.search-filter .full-width {width: 100% !important;box-sizing: border-box;}
.search-filter .length-fix-container {margin-top: 10px;}
.search-filter .length-fix-container .length-select {width: auto !important;min-width: 80px;margin-left: 5px;}
.search-filter .length-range-container {margin-top: 10px;display: flex !important;align-items: center;flex-wrap: nowrap;gap: 5px;}
.search-filter .length-range-container .length-select {width: auto !important;min-width: 70px;flex-shrink: 0;}

.line-dashed{border-bottom: 2px dashed grey;}
.alphabet ul {display: flex;flex-wrap: wrap;justify-content: space-between}
.alphabet a{color: black; text-decoration: none;}
.alphabet li{background-color: #F3F3F3; border-radius: 50%; padding: 0;width: 22px; height: 22px;line-height: 22px;flex: 0 1 auto;text-align: center;}
.alphabet li.current{color: #F3F3F3;font-weight: 600;background: #404040;}

/* Главная страница */
.mainpage .quote{font-size: 15px; line-height: 18px; padding-left: 50px; text-align: justify;}
.mainpage .main_pic{height: 330px; margin: 0 30px; float: right;}
.mainpage .cont_marker{position: relative;}
.mainpage .cont_marker p{margin-left: 40px;}
.mainpage .cont_marker .marker{background-color: #EEEEEE;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;position: absolute;left: 0;top: -4px;display: inline-block;text-align: center;line-height: 23px;width: 25px;height: 25px;}

/* главная форма */
.request-form-container form {display: flex;flex-wrap: nowrap;gap: 6px;}
.request-form-container input {flex: 1 1 auto; min-width: 0;}
.request-form-container .btn {flex: 0 0 auto; white-space: nowrap;}
.request-form-container .hints span{display: inline-block; margin-right: 10px; color: black; font-size: 0.9em;}

/* вывод результатов */
.result-container .empty{font-size: 18px; padding: 15px; text-align: center;}
.result-container .navigation-bar {display: flex;align-items: center;justify-content: space-between;margin-bottom: 8px;margin-top: 8px;padding: 0;}
.result-container .navigation-bar .found-info span{font-weight: bold;}
.result-container .navigation-bar .navigation-controls {display: flex;align-items: center;gap: 12px;}

.result-block{border: 1px solid #EEEEEE; margin-bottom: 16px; padding: 0 8px;}
.result-block .result-header{font-weight: bold;}
.result-block .result-body .loading{height: 60px;display: flex;align-items: center;justify-content: center;color: #666;font-size: 14px;}
.result-block .result-body .words-list{display: flex;flex-wrap: wrap;justify-content: space-evenly;}
.result-block .result-body .words-list li {
    background-color: #F3F3F3;
    border-radius: 3px;
    height: 22px;
    line-height: 22px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    flex: 0 1 auto;
    text-align: center;
    text-transform: uppercase;
    margin: 2px;
    font-size: 14px;
    font-family: 'Hasklig', monospace;
}


@media screen and (max-width: 1100px) {
    body {background: none;}
    .header{background-color: white; height:60px;border-bottom: 1px solid gray; position: fixed; width: 100%;z-index:9999}

    .header .logo{height: 50px;width: 50px;}
    .header .logo img{height: 100%;width: 100%;}
    .header .logo-img {display: none}
    .header .logo-img-mobile {display: block}

    .wrapper{padding: 0 5px;}
    .footer .copyright{font-size: 10px; right: 10px;}

    .main{padding-top: 75px;}

    /* Navigation */
    .nav-main{display: none;}
    .submenu{display: none;}
    .nav-mobile-btn{display: block;}

    h1 {font-size: 26px; margin-bottom: 16px;}
}

@media screen and (max-width: 770px) {
    h1 {font-size: 24px; margin-bottom: 14px;}

    .btn {
        font-size: 14px;
        height: 24px;
        line-height: 18px;
        padding: 0 10px;
    }
    input[type=text] {
         font-size: 16px;
         height: 24px;
         line-height: 24px;
         padding: 4px;
     }
}

@media screen and (max-width: 700px) {
    .search-container {
        flex-direction: column;
    }
    .search-container .right {
        flex: none;
        width: 100%;
    }
    h1 {font-size: 22px; margin-bottom: 14px;}
}

@media screen and (max-width: 610px) {
    h1 {font-size: 20px; margin-bottom: 10px;}
}

@media screen and (max-width: 430px) {
    h1 {font-size: 18px; margin-bottom: 10px;}
}