@import url('https://fonts.cdnfonts.com/css/muller-narrow');

html {
    scroll-behavior: smooth;
}
@media screen and (min-width: 1700px) and (max-width: 1920px) {
    body {
        width: 100%;
        height: 100vh;
        margin: 0;
        color: #001E65;
    }
    .fix_code {
        position: absolute;
        width: 17%;
        padding-top: 37px;
    }

    .fix_code2 {
        position: absolute;
    }
    .nav-desctop {
        width: 86%;
        height: 86px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;
        font-family: 'Muller;', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .check__h4__1 {
        margin-top: -10px;
    }

    .part__one {
        width: 81%;
    }
    .check__h4__2 {
        margin-top: -10px;
        margin-bottom: 30px;
    }
    .nav-tablet {
        display: none;
    }
    .check__img {
        padding-right: 10px;
    }
    .logo {
        padding: 0;
        width: 30px;
        height: 30px;
    }
    .rectangle1 {
        width: 14px;
        height: 14px;
        position: relative;
        top: 8px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 1;
    }
    .rectangle2 {
        position: relative;
        top: -14px;
        left: 8px;
        width: 14px;
        height: 14px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 2;
    }
    .rectangle3 {
        position: relative;
        top: -26px;
        left: 3px;
        width: 7px;
        height: 7px;
        z-index: 1;
        background-color: #fff;
    }
    .rectangle4, .rectangle5 {
        position: relative;
        width: 1.5px;
        height: 4px;
        z-index: 3;
        background-color: #fff;
    }
    .rectangle4 {
        top: -21px;
        left: 12px;
    }
    .rectangle5 {
        top: -25px;
        left: 17.5px;
    }
    .headerCube__uniq, .headerCube {
        margin-bottom: -16px;
        padding-left: 25px;
            }
    .nav > span {
        margin-left: 10px;
        text-transform: uppercase;
    }
    .buttons {
        display: flex;
        width: 75%;
        justify-content: space-between;
        align-items: center;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .nav .buttons button{
        background-color: #0446E6;
        color: white;
        border-radius: 6px;
        border-style: none;
        height: 30px;
    }
    .menu__item {
        text-decoration: none;
        color: #001E65;
    }
    
    .content {
        width: 86%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .imageContent {
        background-image: url(../images/img1.png);
        border-radius: 10px;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 480px;
    }
    .contentText {
        width: 50%;
        padding: 36px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        font-family: 'Muller;', sans-serif;
        padding-top: 0px!important;
    }
    .credit-sum h4 {
        font-size: 18px;
    }
    .main__h4 {
        font-size: 21px;
        font-weight: 400;
        font-family: 'Muller;', sans-serif;
    }
    .main__h1 {
        font-size: 48px;
    }

    .main__h3 {
        font-size: 21px;
        font-weight: 100;
    }
    .text__form {
        width: 80%;
    }
    .contentText h1 {
    font-size: 48px;
    }
    .contentText h4 {
        font-weight: 400;
        align-items: stretch;
    }
    .contentText a {
        width: 209px;
    }
    .contentText img {
        position: relative;
        top: 7px;
    }
    .btn {
        width: 209px;
        height: 48px;
        border-radius: 3px;
        background: #0446E6;
        color: white;
        border-style: none;
    }
    .item__bnt {
        font-size: 20px;
        font-family: 'Muller;', sans-serif;
        text-decoration: none;
        color: #fff;
        font-weight: normal;
    }
    .menu__item__bnt {
        text-decoration: none;
        color: #fff;
        font-weight: normal;
        font-size: 16px;
        font-family: 'Muller;', sans-serif;
    }
    .contentInstruction {
        display: flex;
        flex-direction: column;
        margin-top: 5px;
    }
    .contentInstruction h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .scheme {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 273px;
    }

    .chek__text {
        font-size: 19px;
    }

    .chek__text2 {
        font-size: 19px;
    }
    .cubeScheme {
        width: 23.5%;
        border-radius: 18px;
        border: 1px solid #E9F0F4;
        background: #F3F7FA;
        padding: 15px;
        padding-top: 5px;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        font-family: 'Muller;', sans-serif;
    }
    .cubeScheme h4 {
        font-size: 22px;
    }
    .cubeScheme h5 {
        font-size: 18px;
        font-weight: 100;
        padding-left: 25px;
    }
    .poligon {
        width: 2%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .phone {
        display: none;
    }
    .cubeSign {
        position: relative;
        left: 80%;
        top: 25%;
    }
    .rectangleHorizon {
        margin-top: 2px;
        width: 36px;
        height: 8px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .rectangleVertical {
        position: relative;
        top: -5px;
        left: 14px;
        width: 8px;
        height: 36px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .sign {
        width: 36px;
        position: relative;
        left: 66%;
        top: 20%;
    }
    .man {
        top: 70%;
    }
    .underline {
        text-decoration: underline;
    }
    .claim {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 80%;
        margin: 15px auto;
        align-items: center;
        margin-top: 40px;
    }
    .cta {
        width: 40%!important;
    }
    .claim h2 {
        width: 50%;
        font-family: 'Muller;', sans-serif;
    }
    .factoring {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        font-weight: 800;
    }
    .factoringScheme {
        display: grid;
        row-gap: 30px;
        column-gap: 10px;
        grid-template-columns: 50px 240px 246px 240px 246px;
        font-family: 'Muller;', sans-serif;
        align-self: center;
    }
    .grid-item {
        align-self: center;
        justify-self: center;
    
    }
    .item3 {
        position: relative;
        top: 18px;
    }
    .item3 .arrow {
        position: relative;
        top: -16px;
        left: 240px;
    }
    .item5 .arrow {
        position: relative;
        top: 322px;
    }
    .center-text {
        position: relative;
        top: -195px;
        width: 200px;
    }
    .dotted-line {
        position: relative;
        top: 40px;
    }
    .item6 .arrow {
        position: relative;
        top: -16px;
        left: 65px;
    }
    .item8 {
        position: relative;
        top: 32px;
    }
    .item8 .arrow {
        position: relative;
        top: 27px;
    }
    .item11 {
        position: relative;
        top: 50px;
    }
    .item11 .arrow {
        position: relative;
        top: -16px;
        left: 235px;
    }
    .circlePercent {
        width: 180px;
        position: relative;
        top: 40px;
    }
    .halfCircle {
        position: relative;
        left: 90px;
        top: -150px;
    }
    .percent {
        position: relative;
        left: -5px;
        top: -165px;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 31px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%;
    }
    .item5 {
        grid-column: 5 / 6;
        grid-row: 1 / 3;
    }
    .item6 {
        grid-column: 1 / 2;
        grid-row: 2 / 4
    }
    .item10 {
        position: relative;
        left: 35px;
    }
    .paiment-header {
        font-family: 'Muller;', sans-serif;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .paiment {
        height: 472px;
        border-radius: 18px;
        border: 1px solid #E9F0F4;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        display: grid;
        grid-template-columns: 38% 18% 42%;
        grid-column-gap: 15px;
        padding: 30px 30px 30px 45px;
        font-family: 'Muller;', sans-serif;
    }
    .credit-sum, .credit-date {
        justify-self: center;
        width: 100%;
    }

    #credit {
        /* Устанавливаем цвет фона */
        background-color: rgba(0, 0, 0, 0);
        /* Задаем закругление углов */
        border-radius: 5px;
        /* Убираем стандартные стили ползунка */
        border: none;
        /* Убираем стандартный ползунок и стрелки */
        -webkit-appearance: none;
        appearance: none;
        /* Устанавливаем высоту и ширину ползунка */
        width: 100%;
        height: 10px;
        z-index: 1;
      }
      
      #credit::-webkit-slider-thumb {
        /* Убираем стандартный стиль для ползунка */
        -webkit-appearance: none;
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
        z-index: 2;
      }
      
      #credit::-moz-range-thumb {
        /* Убираем стандартный стиль для ползунка в Firefox */
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: white;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
      }


      #date {
        /* Устанавливаем цвет фона */
        background-color: rgba(0, 0, 0, 0);
        /* Задаем закругление углов */
        border-radius: 5px;
        /* Убираем стандартные стили ползунка */
        border: none;
        /* Убираем стандартный ползунок и стрелки */
        -webkit-appearance: none;
        appearance: none;
        /* Устанавливаем высоту и ширину ползунка */
        width: 100%;
        height: 10px;
        z-index: 1;
      }
      
      #date::-webkit-slider-thumb {
        /* Убираем стандартный стиль для ползунка */
        -webkit-appearance: none;
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
        z-index: 2;
      }
      
      #date::-moz-range-thumb {
        /* Убираем стандартный стиль для ползунка в Firefox */
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
      }

      #color-indicator {
        height: 10px;
        border-radius: 5px;
        z-index: 3;
        margin-bottom: -16px; 
    }

    #color-indicator-date {
        height: 10px;
        border-radius: 5px;
        z-index: 3;
        margin-top: -13px; 
    }

    .rectangle-grey {
        width: 100%;
        height: 8px;
        border-radius: 100px;
        background: #CBDEEF;
    }
    .rectangle-blue {
        position: relative;
        top: -8px;
        width: 51%;
        height: 8px;
        border-radius: 100px;
        background: #0446E6;
    }
    .payment-circle {
        position: relative;
        top: -20px;
        left: 50%;
    }
    .paiment-account {
        padding: 38px;
        border-radius: 18px;
        background: #FFF;
        grid-column: 3 / 4;
        grid-row: 1 / 4;
        color: #001E65;
    }
    .range {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }
    input[type=range] {
        width: 100%;
    }
    .range input {
        height: 40px;
        border-style: none;
        border-radius: 3px;
        padding: 10px;
        font-size: 18px;
        text-align: center;
    }
    .describe {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px;
    }

    .header__result {
        margin-top: -15px;
    }
    .red {
        color: red;
    }
    .small {
        font-size: 18px;
        font-weight: 100;
    }
    .small__text {
        font-size: 16px;
        font-weight: 100;
    }
    .pai-range {
        position: relative;
        top: 40px;
    }
    .date-range {
        position: relative;
        top: 170px;
    }
    .paiment-footer {
        padding-left: 20px;
    }
    .form__header {
        font-size: 26px;
        margin-bottom: 5px;
        font-family: Muller, sans-serif;
        text-align: center;
    }

    .form {
        height: 383px;
        margin-top: 20px;
        width: 95.5%;
        border-radius: 18px;
        display: grid;
        padding: 30px;
        grid-template-columns: 70% 30%;
        background-image: url(../images/img2.png);
        font-family: 'Muller;', sans-serif;
        padding-bottom: 55px;
    }
    .describtion, .form h2 {
        color: white;
    }
    .describtion {
        width: 90%;
        align-self: center;
    }

    .two__item {
        padding-top: 35px;
    }
    .heder_credit {
            font-size: 18px;
        }

    .form input {
        width: 100%;
        height: 50px;
        margin-top: 15px;
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        padding-left: 15px;
        font-size: 16px;
        font-family: 'Muller;', sans-serif;
        font-weight: 100;
    }
    input[type=button] {
        background-color: #0446E6;
        color: white;
    }
    .footer {
        height: 106px;
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        padding-left: 115px;
        font-family: 'Muller;', sans-serif;
        background: #F3F7FA;
    }
    .footer h2 {
        margin-bottom: 0;
    }
    .footer h5 {
        font-weight: 100;
    }
    .footer h4 {
        margin-top: 0;
        font-weight: 100;
    }
    .company {
        width: 33%;
        padding-top: 35px;
        padding-left: 20px;
    }
    .company h4 {
        padding-left: 35px;
    }
    .address {
        width: 46.5%;
        padding-top: 10px;
    }
    .copyright a {
        text-decoration: none;
        color: black;
    }
    .copyright {
        padding-top: 25px;
        text-align: right;
    }
    .padding-modal {
        display: flex;
        flex-direction: column;
        width: 550px;
        height: 477px;
        padding: 15px;
        position: fixed;
        top: 22%;
        left:31%;
    }
    .modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        height: 457px;
        background-image: url(../images/img3.png);
        background-size: cover;
        border-radius: 10px;
        padding: 15px;
        font-family: 'Muller;', sans-serif;
    }
    .chest {
        display: flex;
        justify-content: end;
    }
    .main {
        width: 70%;
        height: 40px;
        box-sizing: border-box;
        margin-top: 15px;
        border-radius: 5px;
        border-style: none;
        padding: 10px;
    }
    .modal p, .modal h2 {
        color: white;
    }
    .modal h2 {
        margin-bottom: 0;
    }
    .agree {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 70%;
    }
    .agree p {
        margin-left: 15px;
    }
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(73, 74, 75, 0.508);
    }    
}
@media screen and (min-width: 716px) and (max-width: 1699px) {
    body {
        width: 100%;
        height: 100vh;
        margin: 0;
        color: #001E65;
    }
    .nav-desctop {
        display: none;
    }
    .nav-tablet {
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 15px;
        font-family: 'Muller;', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .logo {
        padding: 0;
        width: 30px;
        height: 30px;
    }
    .item__bnt {
        font-size: 18px!important;
        font-family: 'Muller;', sans-serif;
        text-decoration: none;
        color: #fff;
        font-weight: normal;
    }
    .rectangle1 {
        width: 14px;
        height: 14px;
        position: relative;
        top: 8px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 1;
    }
    .rectangle2 {
        position: relative;
        top: -14px;
        left: 8px;
        width: 14px;
        height: 14px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 2;
    }
    .rectangle3 {
        position: relative;
        top: -26px;
        left: 3px;
        width: 7px;
        height: 7px;
        z-index: 1;
        background-color: #fff;
    }
    .rectangle4, .rectangle5 {
        position: relative;
        width: 1.5px;
        height: 4px;
        z-index: 3;
        background-color: #fff;
    }
    .rectangle4 {
        top: -21px;
        left: 12px;
    }
    .rectangle5 {
        top: -25px;
        left: 17.5px;
    }
    .nav > span {
        margin-left: 10px;
        text-transform: uppercase;
    }
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .imageContent {
        background-image: url(../images/img3.png);
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 480px;
    }
    .contentText {
        width: 50%;
        padding: 36px;
        padding-top: 0px!important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        font-family: 'Muller;', sans-serif;
    }
    .contentText h4 {
        font-weight: 100;
        margin-bottom: 2px;
        font-size: 22px;
    }
    .contentText a {
        width: 209px;
        margin-top: 35px;
    }
    .contentText img {
        position: relative;
        top: 7px;
    }
    .btn {
        width: 209px;
        height: 48px;
        border-radius: 3px;
        background: #0446E6;
        color: white;
        border-style: none;
    }
    .contentInstruction {
        display: flex;
        flex-direction: column;
    }
    .contentInstruction h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 40px;
        margin-bottom: 5px;
        font-weight: 900;
    }
    .scheme {
        display: grid;
        row-gap: 15px;
        grid-template-columns: 46% 5% 46%;
        padding: 15px;
    }
    .cubeScheme {
        width: 95%;
        height: 150px;
        padding: 15px;
        border-radius: 18px;
        border: 1px solid #E9F0F4;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        font-family: 'Muller;', sans-serif;
    }
    .cubeScheme h4 {
        font-size: 22px;
        margin-top: 0;
    }
    .cubeScheme h5 {
        font-size: 18px;
        font-weight: 100;
    }
    .poligon {
        display: flex;
        align-items: center;
    }
    .phone, .tablet {
        display: none;
    }
    .commision {
        grid-column:1;
        grid-row: 2;
    }
    .dateEnd {
        grid-row: 1;
        grid-column: 3;
    }
    .disabled {
        display: none;
    }
    .cubeSign {
        position: relative;
        left: 80%;
    }
    .rectangleHorizon {
        margin-top: 2px;
        width: 36px;
        height: 8px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .rectangleVertical {
        position: relative;
        top: -5px;
        left: 14px;
        width: 8px;
        height: 36px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .sign {
        width: 36px;
        position: relative;
        left: 72%;
        top: -18%;
    }
    .signPercent {
        top: -25px;
    }
    .underline {
        text-decoration: underline;
    }
    .man {
        top: -60px;
    }
    .claim {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 35px 40px 25px;
    }
    .claim a {
        width: 70%;
    }
    .claim a button {
        width: 95%;
    }
    .claim h2 {
        font-family: 'Muller;', sans-serif;
        width: 50%;
    }
    .factoring h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 0px;
        font-weight: 900;
    }
    .factoringScheme {
        display: grid;
        position: relative;
        top: -80px;
        height: 450px;
        row-gap: 30px;
        column-gap: 10px;
        grid-template-columns: 50px 240px 246px 240px 246px;
        font-family: 'Muller;', sans-serif;
        align-self: center;
        transform: scale(0.68);
    }
    .grid-item {
        align-self: center;
        justify-self: center;
    
    }
    .item3 {
        position: relative;
        top: 18px;
    }
    .item3 .arrow {
        position: relative;
        top: -15px;
        left: 235px;
    }
    .item5 .arrow {
        position: relative;
        top: 322px;
    }
    .center-text {
        position: relative;
        top: -195px;
        width: 200px;
    }
    .dotted-line {
        position: relative;
        top: 40px;
    }
    .item6 .arrow {
        position: relative;
        top: -16px;
        left: 65px;
    }
    .item8 {
        position: relative;
        top: 32px;
    }
    .item8 .arrow {
        position: relative;
        top: 27px;
    }
    .item11 {
        position: relative;
        top: 50px;
    }
    .item11 .arrow {
        position: relative;
        top: -16px;
        left: 235px;
    }
    .circlePercent {
        width: 180px;
        position: relative;
        top: 40px;
    }
    .halfCircle {
        position: relative;
        left: 90px;
        top: -150px;
    }
    .percent {
        position: relative;
        left: -5px;
        top: -165px;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 31px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%;
    }
    .item5 {
        grid-column: 5 / 6;
        grid-row: 1 / 3;
    }
    .item6 {
        grid-column: 1 / 2;
        grid-row: 2 / 4
    }
    .item10 {
        position: relative;
        left: 35px;
    }
    .paiment-header {
        font-family: 'Muller;', sans-serif;
        text-align: center;
        margin-top: 40px;
        font-weight: 900;
    }
    .paiment {
        height: 472px;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        display: grid;
        grid-template-columns: 38% 18% 42%;
        grid-column-gap: 15px;
        padding: 10px 30px 30px 45px;
        font-family: 'Muller;', sans-serif;
    }
    .credit-sum, .credit-date {
        justify-self: center;
        width: 100%;
    }
    .rectangle-grey {
        width: 100%;
        height: 8px;
        border-radius: 100px;
        background: #CBDEEF;
    }
    .rectangle-blue {
        position: relative;
        top: -8px;
        width: 51%;
        height: 8px;
        border-radius: 100px;
        background: #0446E6;
    }
    .payment-circle {
        position: relative;
        top: -20px;
        left: 50%;
    }
    .paiment-account {
        padding: 20px;
        border-radius: 18px;
        background: #FFF;
        grid-column: 3 / 4;
        grid-row: 1 / 4;
        color: #001E65;
    }
    .range {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }
    input[type=range] {
        width: 100%;
        background: #0446E6;
    }
    .describe {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px;
    }
    .red {
        color: red;
    }
    .small {
        font-size: 12px;
    }
    .pai-range {
        position: relative;
        top: 45px;
        width: 95%;
        height: 40px;
        padding-left: 10px;
        border-radius: 3px;
        border-style: none;
    }
    .date-range {
        position: relative;
        top: 165px;
        width: 95%;
        height: 40px;
        padding-left: 10px;
        border-radius: 3px;
        border-style: none;
    }
    .form {
        margin: 0 15px;
        display: grid;
        padding: 30px;
        grid-template-columns: 60% 40%;
        background-image: url(../images/img2.png);
        font-family: 'Muller;', sans-serif;
    }
    .describtion, .form h2 {
        color: white;
        font-size: 22px;
    }
    .form h3 {
        font-weight: 500;
    }
    .describtion {
        width: 76%;
        align-self: center;
    }
    .form input {
        width: 100%;
        height: 40px;
        margin-top: 15px;
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        padding-left: 15px;
    }
    input[type=button] {
        background-color: #0446E6;
        color: white;
    }
    .footer {
        height: 148px;
        display: grid;
        grid-template-columns: 40% 60%;
        text-align: center;
        align-items: end;
        font-family: 'Muller;', sans-serif;
        background: #F3F7FA;
    }
    .footer .logo {
        position: relative;
        top: 35%;
        left: 35%;
    }
    .footer h2 {
        margin-bottom: 0;
        font-weight: 1;
        font-size: 22px;
    }
    .footer h5 {
        font-weight: 100;
    }
    .footer h4 {
        margin-top: 0;
        font-weight: 100;
    }
    .copyright {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .company h4 {
        padding-left: 25px;
    }
    .copyright a {
        text-decoration: none;
        color: black;
    }
    .copyright h5 {
        margin-top: 0;
        font-weight: 100;
    }
    .padding-modal {
        display: flex;
        flex-direction: column;
        width: 450px;
        height: 497px;
        padding: 15px;
        position: fixed;
        top: 22%;
        left: 20%;
    }
    .modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(../images/img3.png);
        background-size: cover;
        border-radius: 10px;
        padding: 15px;
        font-family: 'Muller;', sans-serif;
    }
    .chest {
        display: flex;
        justify-content: end;
    }
    .main {
        width: 70%;
        height: 40px;
        box-sizing: border-box;
        margin-top: 15px;
        border-radius: 5px;
        border-style: none;
        padding: 10px;
    }
    .modal p, .modal h2 {
        color: white;
    }
    .agree {
        display: flex;
        width: 70%;
        flex-direction: row;
        align-items: center;
    }
    .agree p {
        margin-left: 15px;
    }
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(73, 74, 75, 0.508);
    }    
}


@media screen and (min-width: 640px) and (max-width: 715px) {
    body {
        width: 100%;
        height: 100vh;
        margin: 0;
    }
    .nav-desctop {
        display: none;
    }
    .nav-tablet {
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 15px;
        font-family: 'Muller;', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .logo {
        padding: 0;
        width: 30px;
        height: 30px;
    }
    .item__bnt {
        font-size: 18px!important;
        font-family: 'Muller;', sans-serif;
        text-decoration: none;
        color: #fff;
        font-weight: normal;
    }
    .rectangle1 {
        width: 14px;
        height: 14px;
        position: relative;
        top: 8px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 1;
    }
    .rectangle2 {
        position: relative;
        top: -14px;
        left: 8px;
        width: 14px;
        height: 14px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 2;
    }
    .rectangle3 {
        position: relative;
        top: -26px;
        left: 3px;
        width: 7px;
        height: 7px;
        z-index: 1;
        background-color: #fff;
    }
    .rectangle4, .rectangle5 {
        position: relative;
        width: 1.5px;
        height: 4px;
        z-index: 3;
        background-color: #fff;
    }
    .rectangle4 {
        top: -21px;
        left: 12px;
    }
    .rectangle5 {
        top: -25px;
        left: 17.5px;
    }
    .nav > span {
        margin-left: 10px;
        text-transform: uppercase;
    }
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .imageContent {
        background-image: url(../images/img3.png);
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 480px;
    }
    .contentText {
        width: 50%;
        padding: 36px;
        padding-top: 0px!important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        font-family: 'Muller;', sans-serif;
    }
    .contentText h4 {
        font-weight: 100;
        margin-bottom: 2px;
        font-size: 22px;
    }
    .contentText a {
        width: 209px;
        margin-top: 35px;
    }
    .contentText img {
        position: relative;
        top: 7px;
    }
    .btn {
        width: 209px;
        height: 48px;
        border-radius: 3px;
        background: #0446E6;
        color: white;
        border-style: none;
    }
    .contentInstruction {
        display: flex;
        flex-direction: column;
    }
    .contentInstruction h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .scheme {
        display: grid;
        row-gap: 15px;
        grid-template-columns: 46% 5% 46%;
        padding: 15px;
    }
    .cubeScheme {
        width: 95%;
        height: 150px;
        padding: 15px;
        border-radius: 18px;
        border: 1px solid #E9F0F4;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        font-family: 'Muller;', sans-serif;
    }
    .cubeScheme h4 {
        font-size: 22px;
        margin-top: 0;
    }
    .cubeScheme h5 {
        font-size: 18px;
        font-weight: 100;
    }
    .poligon {
        display: flex;
        align-items: center;
    }
    .phone, .tablet {
        display: none;
    }
    .commision {
        grid-column:1;
        grid-row: 2;
    }
    .dateEnd {
        grid-row: 1;
        grid-column: 3;
    }
    .disabled {
        display: none;
    }
    .cubeSign {
        position: relative;
        left: 80%;
    }
    .rectangleHorizon {
        margin-top: 2px;
        width: 36px;
        height: 8px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .rectangleVertical {
        position: relative;
        top: -5px;
        left: 14px;
        width: 8px;
        height: 36px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .sign {
        width: 36px;
        position: relative;
        left: 72%;
        top: -18%;
    }
    .signPercent {
        top: -25px;
    }
    .underline {
        text-decoration: underline;
    }
    .man {
        top: -65px;
    }
    .claim {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px 15px 15px;
    }
    .claim a {
        width: 70%;
    }
    .claim a button {
        width: 95%;
    }
    .claim h2 {
        font-family: 'Muller;', sans-serif;
    }
    .factoring h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 0px;
        font-weight: 900;
    }
    .factoringScheme {
        display: grid;
        position: relative;
        top: -80px;
        height: 450px;
        row-gap: 30px;
        column-gap: 10px;
        grid-template-columns: 50px 240px 246px 240px 246px;
        font-family: 'Muller;', sans-serif;
        align-self: center;
        transform: scale(0.68);
    }
    .grid-item {
        align-self: center;
        justify-self: center;
    
    }
    .item3 {
        position: relative;
        top: 18px;
    }
    .item3 .arrow {
        position: relative;
        top: -15px;
        left: 235px;
    }
    .item5 .arrow {
        position: relative;
        top: 322px;
    }
    .center-text {
        position: relative;
        top: -195px;
        width: 200px;
    }
    .dotted-line {
        position: relative;
        top: 40px;
    }
    .item6 .arrow {
        position: relative;
        top: -16px;
        left: 65px;
    }
    .item8 {
        position: relative;
        top: 32px;
    }
    .item8 .arrow {
        position: relative;
        top: 27px;
    }
    .item11 {
        position: relative;
        top: 50px;
    }
    .item11 .arrow {
        position: relative;
        top: -16px;
        left: 235px;
    }
    .circlePercent {
        width: 180px;
        position: relative;
        top: 40px;
    }
    .halfCircle {
        position: relative;
        left: 90px;
        top: -150px;
    }
    .percent {
        position: relative;
        left: -5px;
        top: -165px;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 31px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%;
    }
    .item5 {
        grid-column: 5 / 6;
        grid-row: 1 / 3;
    }
    .item6 {
        grid-column: 1 / 2;
        grid-row: 2 / 4
    }
    .item10 {
        position: relative;
        left: 35px;
    }
    .paiment-header {
        font-family: 'Muller;', sans-serif;
        text-align: center;
    }
    .paiment {
        height: 472px;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        display: grid;
        grid-template-columns: 38% 18% 42%;
        grid-column-gap: 15px;
        padding: 30px 30px 30px 45px;
        font-family: 'Muller;', sans-serif;
    }
    .credit-sum, .credit-date {
        justify-self: center;
        width: 100%;
    }
    .rectangle-grey {
        width: 100%;
        height: 8px;
        border-radius: 100px;
        background: #CBDEEF;
    }
    .rectangle-blue {
        position: relative;
        top: -8px;
        width: 51%;
        height: 8px;
        border-radius: 100px;
        background: #0446E6;
    }
    .payment-circle {
        position: relative;
        top: -20px;
        left: 50%;
    }
    .paiment-account {
        padding: 20px;
        border-radius: 18px;
        background: #FFF;
        grid-column: 3 / 4;
        grid-row: 1 / 4;
        color: #001E65;
    }
    .range {
        grid-column: 2 / 3;
        grid-row: 1 / 4;
    }
    input[type=range] {
        width: 100%;
        background: #0446E6;
    }
    .describe {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-top: 10px;
    }
    .red {
        color: red;
    }
    .small {
        font-size: 12px;
    }
    .pai-range {
        position: relative;
        top: 45px;
        width: 95%;
        height: 40px;
        padding-left: 10px;
        border-radius: 3px;
        border-style: none;
    }
    .date-range {
        position: relative;
        top: 165px;
        width: 95%;
        height: 40px;
        padding-left: 10px;
        border-radius: 3px;
        border-style: none;
    }
    .form {
        margin: 0 15px;
        display: grid;
        padding: 30px;
        grid-template-columns: 60% 40%;
        background-image: url(../images/img2.png);
        font-family: 'Muller;', sans-serif;
    }
    .describtion, .form h2 {
        color: white;
        font-size: 22px;
    }
    .form h3 {
        font-weight: 500;
    }
    .describtion {
        width: 76%;
        align-self: center;
    }
    .form input {
        width: 100%;
        height: 40px;
        margin-top: 15px;
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        padding-left: 15px;
    }
    input[type=button] {
        background-color: #0446E6;
        color: white;
    }
    .footer {
        height: 148px;
        display: grid;
        grid-template-columns: 40% 60%;
        text-align: center;
        align-items: end;
        font-family: 'Muller;', sans-serif;
        background: #F3F7FA;
    }
    .footer .logo {
        position: relative;
        top: 35%;
        left: 35%;
    }
    .footer h2 {
        margin-bottom: 0;
        font-weight: 1;
        font-size: 22px;
    }
    .footer h5 {
        font-weight: 100;
    }
    .footer h4 {
        margin-top: 0;
        font-weight: 100;
    }
    .copyright {
        grid-column: 1 / 4;
        grid-row: 2 / 3;
    }
    .company h4 {
        padding-left: 25px;
    }
    .copyright a {
        text-decoration: none;
        color: black;
    }
    .copyright h5 {
        margin-top: 0;
        font-weight: 100;
    }
    .padding-modal {
        display: flex;
        flex-direction: column;
        width: 450px;
        height: 497px;
        padding: 15px;
        position: fixed;
        top: 22%;
        left: 20%;
    }
    .modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(../images/img3.png);
        background-size: cover;
        border-radius: 10px;
        padding: 15px;
        font-family: 'Muller;', sans-serif;
    }
    .chest {
        display: flex;
        justify-content: end;
    }
    .main {
        width: 70%;
        height: 40px;
        box-sizing: border-box;
        margin-top: 15px;
        border-radius: 5px;
        border-style: none;
        padding: 10px;
    }
    .modal p, .modal h2 {
        color: white;
    }
    .agree {
        display: flex;
        width: 70%;
        flex-direction: row;
        align-items: center;
    }
    .agree p {
        margin-left: 15px;
    }
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(73, 74, 75, 0.508);
    }    
}
@media screen and (min-width: 320px) and (max-width: 640px) {
    body {
        width: 100%;
        height: 100vh;
        margin: 0;
        color: #001E65;
    }
    .header__result {
        margin-top: -15px;
    }

    .nav-desctop {
        display: none;
    }
    .nav-tablet {
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px 0 15px;
        font-family: 'Muller;', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .logo {
        padding: 0;
        width: 30px;
        height: 30px;
    }
    .rectangle1 {
        width: 14px;
        height: 14px;
        position: relative;
        top: 8px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 1;
    }

    .item__bnt {
        font-size: 18px;
        font-family: 'Muller;', sans-serif;
        text-decoration: none;
        color: #fff;
        font-weight: normal;
    }
    .rectangle2 {
        position: relative;
        top: -14px;
        left: 8px;
        width: 14px;
        height: 14px;
        border-radius: 1px;
        outline: 4px solid #0446E6;
        z-index: 2;
    }
    .rectangle3 {
        position: relative;
        top: -26px;
        left: 3px;
        width: 7px;
        height: 7px;
        z-index: 1;
        background-color: #fff;
    }
    .rectangle4, .rectangle5 {
        position: relative;
        width: 1.5px;
        height: 4px;
        z-index: 3;
        background-color: #fff;
    }
    .rectangle4 {
        top: -21px;
        left: 12px;
    }
    .rectangle5 {
        top: -25px;
        left: 17.5px;
    }
    .nav > span {
        margin-left: 10px;
        text-transform: uppercase;
    }
    .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }
    .imageContent {
        background-image: url(../images/img2.png);
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 480px;
    }

    .check__h4__2 {
        margin-top: -10px;
    }

    .contentText {
        width: 80%;
        padding: 36px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: white;
        font-family: 'Muller;', sans-serif;
    }
    .contentText h4 {
        font-weight: 600;
        align-items: stretch;
        font-family: 'Muller;', sans-serif;
        line-height: 130%;
        font-size: 14px;
    }
    .main__h4.part__two{
        width: 70%!important;
        margin-top: 5px;
        margin-bottom: 0px;
    }
    .main__h4.part__one{
        width: 90%!important;
    }
    .contentText a {
        width: 209px;
    }
    .contentText img {
        position: relative;
        top: 7px;
    }
    .btn {
        width: 100%;
        height: 48px;
        border-radius: 3px;
        background: #0446E6;
        color: white;
        border-style: none;
    }
    .contentInstruction {
        margin-top: 30px;
        padding-left: 15px;
    }
    .contentInstruction h1 {
        text-align: center;
        font-family: 'Muller;', sans-serif;
        margin-top: 5px;
        font-size: 24px;
        font-weight: 900;
    }
    .scheme {
        display: grid;
    }
    .scheme h4 {
        font-weight: 600;
    }
    .cubeScheme {
        width: 90%;
        height: 155px;
        padding: 15px;
        border-radius: 18px;
        border: 1px solid #E9F0F4;
        background: #F3F7FA;
        box-shadow: 0px 4px 28px 0px rgba(208, 219, 228, 0.61);
        font-family: 'Muller;', sans-serif;
        font-size: 12px;
        font-weight: 100;
    }

    .headerCube__uniq {
padding-top: 0px!important;

    }
    .cubeScheme h4 {
        padding-top: 15px;
        font-size: 22px;
        margin-bottom: -20px;
        padding-left: 10px;
    }
    .cubeScheme h5 {
        font-size: 18px;
        font-weight: 100;
        padding-left: 10px;
    }
    .poligon {
        display: none;
    }
    .phone{
        text-align: center;
        margin-bottom: 20px;
        z-index: 10;
    }
    .cubeSign {
        width: 50px;
        position: relative;
        left: 85%;
        margin-top: -20px;
    }
    .rectangleHorizon {
        margin-top: 2px;
        width: 36px;
        height: 8px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .rectangleVertical {
        position: relative;
        top: -5px;
        left: 14px;
        width: 8px;
        height: 36px;
        border-radius: 5px;
        background: #DEE6F4;
    }
    .sign {
        width: 36px;
        position: relative;
        left: 75%;
        top: -40px;
    }
    .signPercent {
        left: 75%;
    }
    .man {
        top: -38%;
    }
    .underline {
        text-decoration: underline;
    }
    .main_h5 {
        font-weight: 100;
    }
    .claim {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    .claim h2 {
        font-family: 'Muller;', sans-serif;
    }
    .claim button {
        width: 100%;
    }
    .factoring {
        text-align: center;
        margin-top: 40px;
        font-weight: 900;
    }
    .check__img {
        padding-right: 10px;
    }
    .factoring h1 {
        font-weight: 900;
        font-size: 24px!important;
        font-family: 'Muller;', sans-serif;
    }
    .factoringScheme {
        display: grid;
        grid-template-columns: repeat(12);
        font-family: 'Muller;', sans-serif;
        align-items: center;
        text-align: center;
    }
    .item1, .item3, .item5, .item6, .item8, .item11 {
        display: none;
    }
    .schemeText {
        margin: 5px auto 10px auto;
        width: 80%;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%;
    }
    .phone-dashed {
        position: relative;
        left: 12px;
    }
    .phone-arrow {
        position: relative;
        left: -4px;
    }
    .phone {
        margin-bottom: -10px;
    }
    .grid-item {
        align-self: center;
        justify-self: center;
        padding-top: 15px;
    
    }
    .center-text {
        position: relative;
        top: -195px;
        width: 200px;
    }
    .dotted-line {
        position: relative;
        top: 40px;
    }
    .item6 .arrow {
        position: relative;
        top: -16px;
        left: 65px;
    }
    .item9 {
        grid-row: 5 / 6;
    }
    .item7 {
        grid-row: 7 / 8;
    }
    .circlePercent {
        width: 180px;
        height: 180px;
        position: relative;
    }
    .halfCircle {
        position: relative;
        left: 66px;
        top: -149px;
    }
    .percent {
        position: relative;
        left: -25px;
        top: -165px;
        color: #001E65;
        font-family: 'Muller;', sans-serif;
        font-size: 31.828px;
        font-style: normal;
        font-weight: 800;
        line-height: 120%;
    }
    .item10 {
        position: relative;
        left: 35px;
    }
    .item14 {
        width: 55%;
    }
    .paiment-header {
        font-family: 'Muller;', sans-serif;
        text-align: center;
        font-weight: 900;
        font-size: 24px;
    }
    .paiment {
        display: grid;
        background: #F3F7FA;
        font-family: 'Muller;', sans-serif;
        padding: 15px;
    }
    .rectangle-grey {
        width: 97%;
        height: 8px;
        border-radius: 100px;
        background: #CBDEEF;
    }
    .rectangle-blue {
        position: relative;
        top: -8px;
        width: 49%;
        height: 8px;
        border-radius: 100px;
        background: #0446E6;
    }
    .payment-circle {
        position: relative;
        top: -20px;
        left: 47%;
    }
    .input-date input, .input-credit input {
        height: 40px;
        padding: 5px;
        width: 95%;
        text-align: center;
        font-size: 18px;
        border: none;
        font-weight: 400;
        font-family: 'Muller;', sans-serif;
    }

    .input-date {
        margin-bottom: 30px;
    }
    .paiment-account {
        margin: 15px auto;
        width: 90%;
        grid-row: 5 / 6;
        padding: 20px;
        border-radius: 18px;
        background: #FFF;
        color: #001E65;
    }
    .range {
        display: none;
    }
    input[type=range] {
        width: 100%;
    }
    .describe {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }
    .red {
        color: red;
    }
    .small {
        font-size: 12px;
    }
    .main__h1 {
        font-size: 32px;
        font-weight: 700;
        font-family: 'Muller;', sans-serif;
    }
    .main__h3 {
        font-family: 'Muller;', sans-serif;
        font-size: 14px;
        font-weight: 500;
    }

    .form {
        margin: 15px auto 0px 0px;
        display: grid;
        padding: 30px;
        background-image: url(../images/img2.png);
        font-family: 'Muller;', sans-serif;
    }
    .describtion, .form h2 {
        color: white;
    }
    .form input {
        width: 100%;
        height: 50px;
        margin-top: 15px;
        border: none;
        border-radius: 3px;
        box-sizing: border-box;
        padding-left: 15px;
    }
    input[type=button] {
        background-color: #0446E6;
        color: white;
    }
    .company {
        padding-top: 30px;
    }

    .small__text {
        font-size: 14px;
        font-weight: 100;
    }

    .paiment-footer {
        padding-left: 20px;
    }
    .footer {
        display: grid;
        text-align: center;
        padding-left: 25px;
        font-family: 'Muller;', sans-serif;
        background: #F3F7FA;
        padding: 0;
        margin-top: 40px;
    }
    .footer .logo {
        position: relative;
        top: 180%;
        left: 11%;
    }
    .footer h2 {
        margin-bottom: 0;
    }
    .footer h5 {
        font-weight: 100;
    }
    .footer h4 {
        margin-top: 0;
        font-weight: 100;
    }
    .company h4 {
        padding-left: 25px;
    }
    .copyright a {
        text-decoration: none;
        color: black;
    }
    .padding-modal {
        display: flex;
        flex-direction: column;
        width: 660px;
        height: 497px;
        padding: 15px;
        position: fixed;
        top: 22%;
        left:7%;
    }
    #credit {
        /* Устанавливаем цвет фона */
        background-color: rgba(0, 0, 0, 0);
        /* Задаем закругление углов */
        border-radius: 5px;
        /* Убираем стандартные стили ползунка */
        border: none;
        /* Убираем стандартный ползунок и стрелки */
        -webkit-appearance: none;
        appearance: none;
        /* Устанавливаем высоту и ширину ползунка */
        width: 100%;
        height: 10px;
        z-index: 1;
      }
      
      #credit::-webkit-slider-thumb {
        /* Убираем стандартный стиль для ползунка */
        -webkit-appearance: none;
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
        z-index: 2;
      }
      
      #credit::-moz-range-thumb {
        /* Убираем стандартный стиль для ползунка в Firefox */
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: white;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
      }


      #date {
        /* Устанавливаем цвет фона */
        background-color: rgba(0, 0, 0, 0);
        /* Задаем закругление углов */
        border-radius: 5px;
        /* Убираем стандартные стили ползунка */
        border: none;
        /* Убираем стандартный ползунок и стрелки */
        -webkit-appearance: none;
        appearance: none;
        /* Устанавливаем высоту и ширину ползунка */
        width: 100%;
        height: 10px;
        z-index: 1;
      }
      
      #date::-webkit-slider-thumb {
        /* Убираем стандартный стиль для ползунка */
        -webkit-appearance: none;
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
        z-index: 2;
      }
      
      #date::-moz-range-thumb {
        /* Убираем стандартный стиль для ползунка в Firefox */
        appearance: none;
        /* Задаем цвет ползунка */
        background-color: #0034B0;
        /* Задаем размер ползунка */
        width: 20px;
        height: 20px;
        /* Задаем закругление углов ползунка */
        border-radius: 50%;
        /* Устанавливаем тень для ползунка */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        /* Положение ползунка над фоном */
        position: relative;
      }

      #color-indicator {
        height: 10px;
        border-radius: 5px;
        z-index: 3;
        margin-bottom: -16px; 
    }

    #color-indicator-date {
        height: 10px;
        border-radius: 5px;
        z-index: 3;
        margin-top: -13px; 
    }
    .small {
        font-size: 14px;
        font-weight: 400;
        font-family: 'Muller;', sans-serif;
        padding-top: 10px;
        padding-bottom: 10px;
    }


    .modal {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(../images/img3.png);
        background-size: cover;
        border-radius: 10px;
        padding: 15px;
        font-family: 'Muller;', sans-serif;
    }
    .chest {
        display: flex;
        justify-content: end;
    }
    .main {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        margin-top: 15px;
        border-radius: 5px;
        border-style: none;
        padding: 10px;
    }
    .modal p, .modal h2 {
        color: white;
    }
    .agree {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .agree p {
        margin-left: 15px;
    }
    .background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(73, 74, 75, 0.508);
    }    
}