:root{
    /*--text-color                : #d3d3d3;*/
    --text-color                : #cfcfdd;
    
    /*--default-font              : "Charter", "Times New Roman";*/


    --bs-nav-underline-link-active-color : #fff;
    --bs-emphasis-color : #fff;

    --bs-body-bg: #FFFFFF0A;    


}    

:root .dropdown-menu {
    --bs-body-bg: #000;  
    --dtcc-dropdown-button_background: #000;  
}

:root .table.dataTable.fixedHeader-floating {
    --bs-body-bg: #000; 
}

/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/custom/xn7gYHE41ni1AdIRggqxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/custom/xn7gYHE41ni1AdIRggOxSvfedN62Zw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/custom/xn7gYHE41ni1AdIRggexSvfedN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    font-weight: 500;
    background: var(--bg-color) url('../images/hero-bg-shape.png') no-repeat;
    background-position: top center;
    background-size: auto;
}

a.orange {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
    opacity: .9;
}

.form-check {padding-left: 3.5em;}
.form-check-label {margin-top: .15em;}

.bg-section{
    background-image: url('/custom/img/section-bg.png');
    background-repeat: repeat-y;
    background-position: left top;
    background-size: cover;
}

.hero {padding: 50px 0 0; background: none}
.hero-content {margin-bottom: 50px;}


.section-title h3{
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-color);
    background: var(--divider-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 50px;
    margin-bottom: 20px;
}
.section-title h3::before{
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    background: url('/custom/img/icon-sparkle.svg') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

.section-title h3::after{
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    background: url('/custom/img/icon-sparkle.svg') no-repeat;
    background-position: right center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

.nav-sticky-active {
    background: #0a0a0a; 
    padding: 10px 3px;
     -webkit-box-shadow: 2px 1px 0 rgba(0,0,0,.2);
    box-shadow: 2px 1px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 2px 1px 0 rgba(0,0,0,.2);
    border-top-left-radius: var(--bs-nav-pills-border-radius);
    border-top-right-radius: var(--bs-nav-pills-border-radius);
}


.form-control-plaintext {color: #a7aabb;}
/*.form-select:focus {border-width: 0px; border-color: unset; border: none}*/

.contact-form form .btn-default {line-height: 1.5em; padding: 12px;}

.contact-form form .form-control, .contact-form form .form-select, .contact-form form .input-group-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 12px;
    padding: 15px 20px;
    outline: none;
    box-shadow: none;
}

.contact-form form .input-group .form-select  {
    padding: 10px 20px;
    outline: none;
}
.contact-form form .input-group .input-group-text {
    background-color: var(--secondary-color);
    padding: 10px 20px;
}
.contact-form form .form-select {
  appearance: none;          /* Скрыть стандартную стрелку */
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--secondary-color) url('data:image/svg+xml;utf8,<svg fill="white" height="16" viewBox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M5.516 7.548l4.484 4.484 4.484-4.484"/></svg>') no-repeat right 10px center/16px 16px;
  padding-right: 10px;       /* Добавить отступ справа под стрелку */
}

.contact-form form select::-ms-expand { display: none; } /* IE10+ */
.contact-form form select::-webkit-inner-spin-button,
.contact-form form select::-webkit-outer-spin-button,
.contact-form form select::-webkit-search-cancel-button,
.contact-form form select::-webkit-search-decoration,
.contact-form form select::-webkit-search-results-button,
.contact-form form select::-webkit-search-results-decoration {
  display: none;
}

.contact-form form .form-select option {
    background-color: var(--secondary-color);
    padding: 10px 20px;
    color: #000;
}

.contact-form form .form-control option {
    background-color: var(--secondary-color);
    padding: 10px 20px;
    color: #000;
}

#results_city {
    position: absolute; 
    z-index: 99; 
    background-color: #0c0d0e;
    background-color: #cfcfdd;
    color: #333;
    border: 1px solid var(--divider-color);
    border-radius: 12px; 
    padding: 10px 5px 10px 50px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, .2); 
    outline: none;
    display: none; 
    margin:0;
}
#results_city li {padding: 8px 10px; text-align: left; font-weight: 600}
#results_city li:hover {color: #000}

.ts9 {font-size: .9em}
.hidden, .hidden_user {display:none}
.is_admin .hidden_user {display:block}

.hero-content .why-choose-list ul {max-width: 310px; margin: 0 auto}
.hero-content .why-choose-list ul li {text-align: left; width: 100%}

.text-content h2, .text-content h3, .text-content h4 {margin:20px 0 15px}
.text-content ul {margin-bottom: 30px}
.text-content li {margin-bottom: 8px; line-height: 1.5}
.text-content li::marker {color: var(--accent-color);}
.text-content {font-size: 18px; line-height: 1.6em;}
.text-content b, .text-content strong {font-weight: 800}

#desc .nav-link {font-weight: 600; font-size: 16px; /*color: var(--accent-color);*/ margin-top:5px} 
#desc .nav-underline {color: #fff}

#people_table, #search_table, .dt-column-title {font-size: .7em}
#people_table td, #search_table td {line-height: 1.3em}
#people_table td span, #search_table td span {opacity: .4;}

#form_search_peoples .input-group input, #form_search_peoples .input-group span, #form_search_peoples .city, #form_search_peoples select {padding: 5px 20px}
#form_search_peoples .btn-outline-primary {border-radius: 0;}


#form_compatibility .form-check-label {font-size: .8em; /*margin-top: .25em;*/}

#search_table {}
#search_table .good {color:#76bd76}
#search_table .bad {color:#c73333}
#search_table span {display:block}

#share_block .form-check-inline {margin-right: 0; text-align: left}
#share_block label {margin-top: .25em; font-size: .9em}
#share_block a {font-size: .9em}
#share_block .form-check {margin-bottom: .525rem;}
#share_block .shareqr img {margin:0 auto;}

.copyright {opacity: .5; font-size: .8em}


div.tgme_widget_login_button {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 20px;
    background-color: #54a9eb;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 9px 21px 11px;
    margin: 0;
    border: none;
    color: #fff;
    cursor: pointer;
}
div.tgme_widget_login_button .tgme_widget_login_button_icon {
    width: 24px;
    height: 22px;
    margin: 0 13px -2px -7px;
    display: inline-block;
    vertical-align: top;
    background: url('/custom/img/tg.svg') no-repeat 0 -1px;
}


@media only screen and (max-width: 767px) {
    .section-title h1 {
        font-size: 36px;        
    }
}
@media (min-width: 576px) {
    #share_selects div {padding-left:25px}
    #share_block .col-md-3 {
        flex: 0 0 auto;
        width: 18%;
    }
}