:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}

#vacancy_calculator {
    padding-top: 130px;
    background-color: #F6F7F9;
}
#vacancy_calculator input[type="checkbox"], input[type="radio"], input[type="file"] {
    display: block !important;
}
#vacancy_calculator input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.VacancyCalculator_title__iigeB {
    text-align: center;
}
.Calculator_checkboxWrapper__mRulV .Checkbox_root__ECeb0:checked:not(:disabled) {
    border-color: #21a038 !important;
    background-color: #21a038 !important;
}
.VacancyCalculator_wrapper__8oB0l {
    justify-content: center !important;
}
.Checkbox_root__m6xRW:after, .Checkbox_root__m6xRW:before {
    background-color: #FFFFFF;
}
.Checkbox_root__m6xRW {
    border: 1px solid #e4ebf0;
    background: #fff;
    color: #fff;

}
.Checkbox_root__m6xRW:not(:disabled):not(:checked):focus, .Checkbox_root__m6xRW:not(:disabled):not(:checked):hover {
    border-color: #e4ebf0;
}
.Checkbox_root__m6xRW:focus, .Checkbox_root__m6xRW:hover {
    background-color: #f7f8fa;
}
.Button_default__riDte.Button_primary__in2fQ:focus, .Button_default__riDte.Button_primary__in2fQ:hover {
    --colorButtonDefaultBackground: #23B840;
}
.Button_default__riDte, .Button_default__riDte:focus, .Button_default__riDte:hover:not(:disabled) {
    color: #fff;
}
button.Button_root__GbzzH:focus, button.Button_root__GbzzH:hover {
    /* border: 1px solid #23B840; */
    background-color: #23B840;
} 
button.Button_root__GbzzH.Button_default__2Ien7:hover {
    background-color: #23B840 !important;
}

.ui-slider.ui-slider-horizontal {
    background: #87ff9b;
    height:2px;
    border:none;


}
#watch, #days {
    top: -27px;
    width: 95%;
    align-self: center;
}
.ui-slider .ui-slider-range {
    background: #21a038;
    height:3px !important;
}
.ui-slider .ui-slider-handle {
    --shadowThumb: var(--shadowXl), var(--shadowSm);
    --shadowOutlineFocus: var(--shadowThumb);
    position: absolute !important;
    bottom: 0;
    transform: scale(1);
    will-change: left, background-color, box-shadow;
    transition: background-color var(--durationTransition), box-shadow var(--durationTransition);
    margin: -4px;
    box-shadow: var(--shadowThumb);
    border: 3px solid var(--colorWhite) !important;
    border-radius: var(--sizeRadiusRound);
    background-color: var(--baseGreenColor) !important;
    cursor: -webkit-grab !important;
    cursor: grab !important;
    padding: 0;
    text-align: center;
    line-height: 16px;
    white-space: nowrap;
    font-size: 14px;
    outline: none;
}
.ta-c {
    text-align: center;
}
.br-40 {
    border-radius: 40px;
}
#steps_shell {
  padding-top: 100px;
}

/* ------------------------- */
header {
    padding: 0; 
}
.header {
    background-color: #000000;
    height: 95px;
}
.header-content {
    width: 100%;
    max-width: 1320px;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}
.ai-c {
    align-items: center;
}
header .logo {
    width: 125px;
}
.partLeft .thanxTo {
    color: #8F8F8F;
    margin-top: -5px !important;
    margin-bottom: 30px !important;
}
#box11 {
    margin-top: 173px;
}
#manual #box11 {
    margin-top: 100px;
}
.App_root {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: 32px;
    background: #f2f2f2;
    /* padding: 80px 50px 80px 120px; */
    padding-left: 120px;
    padding-right: 50px;
    height: 347px;
    box-sizing: border-box;
    color: #343434;
}
.App_root.image_right {
    padding-left: 40px;
    padding-right: 120px;
}
.App_img__Td2DN {
    transform: translateY(-25px);
    width: 332px;
    height: 396px;
    box-sizing: border-box;
}
.Image_img__QKbwm {
    vertical-align: middle;
}
.App_content__HYWV1 {
    align-self: center;
    margin-right: 20px;
    margin-left: 28px;
    /* width: 433px; */
    line-height: 38px;
    font-size: 32px;
    font-weight: 700;
    box-sizing: border-box;
    color: #343434;
}
#box11 .download_app {
    margin-top: 25px;
    border: 2px solid #21A038;
    background-color: #F2F2F2;
    color: #343434;
    font-size: 16px;
    padding: 13.5px 54px;
    border-radius: 16px;
    cursor: pointer;
}
/* #box11 .mob.App_title__5JscZ {
    display: none;
} */
.mob {
    display: none;
}
#box8 .mob {
    display: none;
}
.comment {
    margin-top: 10px;
    color: #A7A8AC;
    font-size: 16px;
}
.bread-crumbs {
    margin-top: 32px;
    font-size: 16px;
}
.bread-crumbs .main {
    color: #A7A8AC;
}
.bread-crumbs .manual {
    color: #343434;
}
.storeLinksWrap {
    display: flex;
    flex-wrap: wrap;
}
#box11 .storeLinksWrap {
    margin-left: -10px;
    margin-top: 18px;
}
.storeLinks {
    cursor: pointer;
    width: 211px;
    height: 64px;
    border-radius: 16px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.storeLinks img {
    width: 40px;
    margin-right: 10px;
}
.storeLinks span {
    color: #FFFFFF;
    font-size: 20px;
    line-height: 22px;
    font-weight: 600;
}
#manual #box2 {
    background-color: #FFFFFF;
    padding-top: 32px;
}
#box2 .wrap-content {
    background-color: #F7F8FA;
    border-radius: 32px;
    padding: 48px;
}
.subline {
    text-align: center;
    color: #A7A8AC;
    margin-top: 12px;
    margin-bottom: 38px;
}
.sub_app_title {
    font-size: 20px;
    font-weight: 500;
    color: #A7A8AC;
    display: block;
}
#box12, #box13 {
    padding-top: 129px;
}
.clip {
    width: 24px;
    margin-right: 12px;
}
.item-text {
    font-size: 20px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}
.warning-text {
    background-color: #FDF2E5;
    padding: 16px 16px 6px 16px;
    border-radius: 12px;
    line-height: 19.34px;
}
.warning-text .item-text span {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.34px;
}
.warning {
    margin-right: 12px;
}
.item-text span {
    line-height: 24px;
    font-weight: 500;
}
span.warning {
    padding-top: 26px;
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #8F8F8F;
}
#box11 .content, #box12 .content, #box13 .content {
    max-width: 1280px;
    width: auto;
}
.App_content {
    padding-right: 62px;
}
#manual #box11 .App_content__HYWV1 {
    max-width: 577px;
}
.titleform {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #000000;
    margin-top: 33px;
}
.wrapform {
    margin: auto;
    width: 456px;
}
.red {
    color: #F04B69;
}
.wrapform input[type="checkbox"] {
    display: block !important;
    color: #000000;
    width: 18px;
    height: 18px;
    /* margin-top: -20px; */
    margin-right: 10px;
}
.div-privacy {
    font-size: 14px;
    color: #343434;
}
.contactWithMessangers {
    color: #FFF;
    font-size: 16px;
}
#box9 .contactWithMessangers,
#connect .contactWithMessangers,
#box11 .contactWithMessangers,
#by .contactWithMessangers,
#downloadApp .contactWithMessangers {
    color: #A7A8AC;
    font-size: 16px;
    font-weight: 500;
}
.wrapMessangers {
    display: flex;
}
.title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 79px;
}
.title-box span {
    font-size: 32px;
    font-weight: 700;
    color: #343434;
}
.title-box img {
    margin: 50px 0;
}
.wrap-general {
    display: flex;
    justify-content: flex-start;
}
.wrap-table {
    width: max-content;
    border: 24px solid #fff;
    border-radius: 24px;
    margin-right: 34px;
}
.calendar td {
    width: 56px;
    height: 56px;
    text-align: center;
}
.calendar .tr-1 td {
    height: 40px;
}
.calendar {
    font-size: 20px;
    font-weight: 500;
    background-color: #FFFFFF;
}
.calendar .tr-1 {
    color: #A7A8AC;
}
.calendar .tr-2 {
    color: #C97313;
}
.calendar .tr-3 {
    color: #343434;
}
.calendar .tr-2 div,
.calendar .tr-3 div  {
    border: 2px solid;
    border-radius: 100%;
    text-align: center;
    width: 40px;
    height: 40px;
    margin: auto;
    box-sizing: border-box;
}
.calendar .tr-2 div {
    background-color: #EDDBC8;
}
.calendar .tr-3 div {
    background-color: #FFFFFF;
    border-color: #A7A8AC;
}
.calendar .tr-3 td:nth-child(4) div,
.calendar .tr-3 td:nth-child(5) div,
.calendar .tr-3 td:nth-child(6) div {
    color: #21A037;
    background-color: #D3E9D9;
    border-color: #21A037;
}
.remark span {
    font-size: 16px;
    font-weight: 500;
    color: #A7A8AC;
    display: flex;
    align-items: center;
}
.remark span:nth-child(1) div {
    border-color: #C97313;
    background-color: #EDDBC8;
}
.remark span:nth-child(2) div {
    border-color: #21A037;
    background-color: #D3E9D9;
}
.remark span div {
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    border: 2px solid;
    margin-right: 6.5px;
}
.plyr {
    max-width: 937px;
    margin: auto;
    border-radius: 24px;
}
#manual .faqList .faq.active .questionTitle {
    background-color: #21A037;
    color: #FFF;
}


.tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

#manual .tab > input[type="radio"] {
    display: none !important;
  }

  .tab-content {
    display: none;
    width: fit-content;
    margin-top: 24px;
    background-color: #EFF8F1;
    padding: 24px;
    border-top-right-radius: 44px;
    border-bottom-right-radius: 44px;
    border-bottom-left-radius: 44px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #343434;
  }

  .tab-content#content-2 {
    margin-left: 333px;
  }

  .tab-content#content-3 {
    border-top-right-radius: 0;
    border-top-left-radius: 44px;
    margin-left: 302px;
  }

  .tab-content#content-4 {
    border-top-right-radius: 0;
    border-top-left-radius: 44px;
    margin-left: 660px;
  }

  .tab-content a {
    color: #21A037;
    text-decoration: underline;
  }

  .tab-content span {
    color: #21A037;
  }

  #tab-btn-1:checked~#content-1,
  #tab-btn-2:checked~#content-2,
  #tab-btn-3:checked~#content-3,
  #tab-btn-4:checked~#content-4 {
    display: block;
  }

  .tab > label {
    display: block;
    padding: 18.5px 22px;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
    text-decoration: none;
    color: #343434;
    border: 0;
    border-radius: 16px;
    background: 0 0;
    font-size: 20px;
    font-weight: 600;
  }

  .tab > input[type="radio"]:checked + label {
    cursor: default;
    color: #fff;
    background-color: #21A037;
  }

  /* ========== модальное окно ============= */

/* Убираем флажок */
#css-modal-checkbox {
    display: none;
}
/* Кнопка для открытия */
.css-modal-checkbox {
    display: inline-flex;
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Roboto', Тahoma, sans-serif;
    background: #337AB7;
    cursor: pointer;
    border: 2px solid #BFE2FF;
    overflow: hidden;
    z-index: 1;    
}
.css-modal-checkbox:hover,
.css-modal-checkbox:active,
.css-modal-checkbox:focus {
    color: #FFF;
}
.css-modal-checkbox:before {
    content: '';
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-top: 50px solid #2D6B9F;
    transition: transform 0.5s;
    transform: translateX(-100%);
    z-index: -1;
}
.css-modal-checkbox:hover:before,
.css-modal-checkbox:active:before,
.css-modal-checkbox:focus:before {
    transform: translateX(0);
}
 
/* Контейнер, который затемняет страницу */
#css-modal-checkbox + .cmc {
    display: none;
}
#css-modal-checkbox:checked + .cmc {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: #FFF;
}
 
/* Модальное окно */
#css-modal-checkbox:checked + .cmc .cmt {
    /* font-family: Verdana, sans-serif;   */
    /* font-size: 16px; */
    padding: 30px;
    /* width:80%; */
    /* max-width: 600px; */
    /* max-height: 70%; */
    transition: 0.5s;
    /* border: 6px solid #BFE2FF; */
    /* border-radius: 12px; */
    background: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    /* text-align: center; */
    overflow: auto;
    animation: scale 0.5s ease;
}
/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
    width: 20px;
    height: 20px;
    /* border: 6px solid #BFE2FF; */
    /* border-radius: 12px; */
    position: absolute;
    z-index: 10;
    top: 20px;
    right: 20px;
    /* box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); */
    background-image: url("../images/close.svg");
    /* background-color: #FFF; */
    background-size: cover;
    animation: move 0.5s ease;
    cursor: pointer;
}
 
/* Анимации */
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(51, 122, 183, 0);
    }
    100% {
        /* background: rgba(51, 122, 183, 0.7); */
        background: #FFF;
    }
}


.text-privacy {
    max-width: 1200px;
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
}
.icon-black {
    display: none;
}

header .connect-new {
    margin: 0 0 0 32px;
    padding: 13.5px 25px;
}
header .callback-new {
    font-size: 14px;
    margin: 5px 0 0;
    color: #FFFFFF;
    transition: color .3s;
    cursor: pointer;
}
header .callback-new:hover {
    color: #004682;
}
#box1 .connect-new {
    margin: 23px 0 0;
    padding: 15.5px 44px;
}
#vacancy_calculator a {
    margin-top: auto;
}
#box10 .connect-new {
    margin: auto;
    margin-top: 40px;
    padding: 15.5px 47px;
}
.byBtn-new {
    padding: 13.5px 34px;
}
/* #box11 .download_app-new {
    margin-top: 25px;
    border: 2px solid #21A038;
    background-color: #F2F2F2;
    color: #343434;
    font-size: 16px;
    padding: 13.5px 54px;
    border-radius: 16px;
    cursor: pointer;
} */